/* Personnel follows the interface brandbook palette without changing customer themes. */
.platform-runtime { --blue-700: var(--link); --background: var(--selected-surface); --danger-light: var(--danger-light); }
/* Portal identity extends the shared navy shell and restrained Ratio card system. */
.platform-shell { max-width: var(--interface-content-width); margin: 0 auto; display: grid; gap: 18px; }
.platform-intro { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.platform-intro p { margin: 5px 0 0; color: var(--muted); font-size: var(--interface-value-size); }
.platform-intro h2 { margin: 4px 0 0; color: var(--text-strong); font-size: 23px; font-weight: 750; line-height: 1.1; }
/* The dashboard and permission cards share the brandbook's calm tile geometry. */
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.platform-card { padding: 18px var(--interface-card-padding) var(--interface-card-padding); border: 1px solid var(--interface-border); border-radius: var(--interface-card-radius); background: var(--surface); box-shadow: var(--shadow-small); min-width: 0; }
.platform-card h2 { margin: 0 0 14px; font-size: var(--interface-heading-size); font-weight: 700; line-height: 1.25; }
.platform-card h3 { margin: 0 0 10px; font-size: var(--interface-value-size); font-weight: 700; }
.platform-card > a:not(.button) { font-size: var(--interface-value-size); font-weight: 650; }
.platform-card p { color: var(--muted); font-size: var(--interface-value-size); line-height: 1.5; }
.platform-metric strong { display: block; margin-top: 8px; color: var(--text-strong); font-size: 28px; font-weight: 700; }
.platform-metric span { font-size: var(--interface-label-size); color: var(--muted); }
.platform-metric { text-decoration: none; }
.platform-card dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px 12px; margin: 0; }
.platform-card dt { color: var(--muted); font-size: var(--interface-label-size); font-weight: 750; }
.platform-card dd { margin: 0; font-size: var(--interface-value-size); font-weight: 450; line-height: 1.5; overflow-wrap: anywhere; }
/* Editors retain the shared actual-state unsaved guard and 40px controls. */
.platform-form { max-width: 820px; }
.platform-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.platform-field label { display: block; margin-bottom: 5px; font-size: var(--interface-label-size); font-weight: 750; }
.platform-field input:not([type=checkbox], [type=radio], [type=color]), .platform-field select { width: 100%; height: var(--interface-control-height); font-size: var(--interface-value-size); font-weight: 450; }
.platform-field input[type=color] { width: 56px; height: var(--interface-control-height); padding: 3px; }
/* Checkbox labels: the box centred beside its text, also inside an ordinary field. */
label.platform-check-label { display: flex; align-items: center; gap: 8px; }
.platform-check-label input { flex: 0 0 auto; margin: 0; }
.platform-field .errorlist, .platform-form > .errorlist { padding: 0; list-style: none; color: var(--danger); font-size: var(--interface-value-size); }
/* Choice groups: a titled block of radios or checkboxes, separated from the fields above it. */
.platform-choice-group { margin: 20px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--interface-divider); }
.platform-choice-group legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: var(--interface-tile-heading-size); font-weight: 750; }
.platform-choice-group legend + * { clear: both; }
.platform-choice-group .platform-fields { margin-top: 14px; }

/* Option cards: one bordered card per radio choice, the choice's description under its label. */
.platform-option-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.platform-option-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--interface-border); border-radius: var(--interface-tile-radius); background: var(--interface-edit-surface); cursor: pointer; }
.platform-option-card:has(input:checked) { border-color: var(--selected-border); background: var(--selected-surface); }
.platform-option-card input { flex: 0 0 16px; margin: 2px 0 0; accent-color: var(--primary); }
.platform-option-card span { display: grid; gap: 3px; }
.platform-option-card strong { font-size: var(--interface-value-size); font-weight: 750; }
.platform-option-card small { color: var(--muted); font-size: var(--interface-label-size); font-weight: 450; line-height: 1.45; }

/* Checkbox grids: Django renders each choice in its own div, laid out here in even columns. */
.platform-checkbox-grid > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-top: 10px; }
.platform-checkbox-grid label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--interface-value-size); font-weight: 450; cursor: pointer; }
.platform-help { margin: 6px 0 0; color: var(--muted); font-size: var(--interface-label-size); }
.platform-notice { padding: 14px 16px; border: 1px solid var(--info-border); border-radius: var(--interface-tile-radius); background: var(--hover-surface); color: var(--text); font-size: var(--interface-value-size); }
.content > .platform-notice { margin-bottom: 18px; }
/* Operational tables retain central status widths, typography and pagination. */
.platform-table { width: 100%; border-collapse: collapse; }
.platform-table th, .platform-table td { padding: 13px 12px; border-bottom: 1px solid var(--interface-border); text-align: left; font-size: var(--interface-value-size); }
.platform-table td { font-weight: 450; }
.platform-table th { color: var(--muted); font-size: var(--interface-label-size); }
.platform-table small { display: block; color: var(--muted); font-size: var(--interface-helper-size); }
.platform-table tbody tr:hover { background: var(--hover-surface); }
.platform-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.platform-toolbar input { width: auto; min-width: min(240px, 100%); flex: 1 1 240px; }
.platform-toolbar select { width: auto; flex: 0 1 260px; }
.platform-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.platform-table .platform-audit-data { max-width: 420px; }
.platform-audit-data { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--interface-label-size); color: var(--muted); }
.platform-empty { padding: 32px; text-align: center; color: var(--muted); font-size: var(--interface-value-size); }
/* Authentication follows the same hierarchy without altering customer pages. */
.platform-runtime .login-card { border: 1px solid var(--interface-border); border-radius: var(--interface-card-radius); }
.platform-runtime .login-card h1 { font-size: 23px; font-weight: 750; line-height: 1.1; }
.platform-runtime .ratio-login-form label, .platform-runtime .invitation-password-field label { font-size: var(--interface-label-size); }
.platform-runtime .login-intro { font-size: var(--interface-value-size); line-height: 1.5; }
.platform-runtime .login-security-note, .platform-runtime .password-help { font-size: var(--interface-helper-size); line-height: 1.5; }
.platform-runtime .ratio-login-form, .platform-runtime .invitation-password-form { gap: 16px; }
.platform-runtime .ratio-login-form > div, .platform-runtime .invitation-password-field { gap: 5px; }
/* Compact screens keep cards and controls in a readable single flow. */
@media (max-width: 1000px) { .platform-grid, .platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .platform-checkbox-grid > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .platform-grid, .platform-metrics, .platform-fields, .platform-option-cards, .platform-checkbox-grid > div { grid-template-columns: 1fr; } .platform-intro { flex-direction: column; } .platform-card dl { grid-template-columns: 1fr; gap: 5px; } .platform-card dd { margin-bottom: 10px; } }

/* The Deus lockup and icon are tight vector artwork, unlike the padded Ratio PNG, so they get
   their own box. Any replacement lockup is contained and left-aligned, so swapping the artwork
   only replaces the SVG files. */
.platform-sidebar-brand .brand-logo { top: 22px; left: 12px; width: 190px; height: 44px; object-fit: contain; object-position: left center; }
html.sidebar-is-collapsed .platform-sidebar-brand .brand-logo-small { top: 20px; left: 6px; width: 44px; height: 44px; }

/* Example submenus retain their hierarchy on every personnel page. */
.example-sidebar-children { padding-left: 24px; }
.example-sidebar-children .sidebar-link { font-size: 13px; min-height: 34px; }
/* Branding samples on the organisation card; the dark variant sits on the shell's own dark surface. */
.platform-logo-sample { display: block; max-width: 220px; max-height: 48px; object-fit: contain; }
.platform-logo-sample--dark { padding: 8px 12px; border-radius: var(--radius-small); background: var(--shell-surface); }