@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexMono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexMono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/InstrumentSans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/InstrumentSans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/InstrumentSans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/InstrumentSans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --nav: #ecf0f2;
  --nav-active: #e1edef;
  --nav-hover: #e1e8ec;
  --nav-text: #13212c;
  --nav-label: #55656f;
  --nav-border: #dce3e7;
  --canvas: #f3f5f6;
  --surface: #ffffff;
  --surface-subtle: #f7f9fa;
  --text: #13212c;
  --muted: #55656f;
  --border: #dce3e7;
  --border-strong: #778895;
  --action: #00656e;
  --action-hover: #004e56;
  --on-action: #ffffff;
  --on-danger: #ffffff;
  --brand-signal: #12b7a4;
  --success: #1c6b44;
  --success-bg: #e5f3eb;
  --warning: #8a4a00;
  --warning-bg: #fff1d9;
  --danger: #b42318;
  --danger-bg: #fceae6;
  --info: #1f5a8c;
  --info-bg: #e4eef8;
  --focus: #0b7f8a;
  --chart-1: #007d86;
  --chart-2: #173b57;
  --chart-3: #4d7ea8;
  --chart-4: #d69e2e;
  --chart-5: #bd4b3e;
  --chart-6: #768692;
  --sidebar-width: clamp(248px, calc(248px + (100vw - 808px) / 1000), 252px);
  --topbar-height: 56px;
  --radius: 6px;
  --radius-small: 4px;
  --overlay-shadow: 0 18px 54px rgba(13, 34, 51, .22);
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 14px/1.5 var(--font-sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font: inherit; }
a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--action-hover); }
::selection { background: #bfeee6; color: #13212c; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p { color: inherit; }
h1 { margin: 4px 0 8px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.2px; }
h3 { font-size: 15px; font-weight: 600; }
.hint, small { color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
code, .mono, [data-recording-utc], .account-name { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Application shell */
body.app-page > .side { position: fixed; inset: 0 auto 0 0; z-index: 100; display: flex !important; visibility: visible !important; flex-direction: column; width: var(--sidebar-width) !important; padding: 18px 12px 16px; overflow-y: auto; border-right: 1px solid var(--nav-border); background: var(--nav) !important; color: var(--nav-text); box-shadow: none; }
.side::before { display: none; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; }
.brand-logo { width: 36px; height: 36px; flex: none; object-fit: contain; }
.brand-name { color: var(--nav-text); font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.instance { margin: 0 8px 24px; padding: 9px 0 9px 11px; border-left: 2px solid var(--brand-signal); }
.instance strong, .instance span { display: block; }
.instance strong { color: var(--nav-text); font-size: 12px; font-weight: 600; }
.instance span { margin-top: 2px; color: var(--nav-label); font-size: 11px; }
.primary-nav { display: block; }
.nav-section { margin: 18px 10px 5px; color: var(--nav-label); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nav { display: flex; align-items: center; min-height: 36px; margin: 1px 0; padding: 7px 10px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--nav-text); font-size: 13.5px; font-weight: 500; text-decoration: none; box-shadow: none; }
.nav:hover { background: var(--nav-hover); color: var(--nav-text); }
.nav.active { background: var(--nav-active); color: var(--action); font-weight: 600; box-shadow: none; }
.side-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nav-border); }
.side-footer .nav { min-height: 36px; color: var(--nav-text); font-size: 13px; }
body.app-page > .top { position: relative; z-index: 20; display: flex !important; visibility: visible !important; align-items: center; justify-content: space-between; width: auto; height: var(--topbar-height); margin-left: var(--sidebar-width) !important; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: none; }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--text); font-weight: 500; }
.user-context, .user-context > a { display: flex; align-items: center; gap: 10px; }
.top-perimeter { display: flex; flex: 0 1 300px; flex-direction: column; gap: 1px; margin-left: auto; padding: 3px 0 3px 10px; border-left: 2px solid var(--action); color: var(--text); line-height: 1.2; }
.top-perimeter span { color: var(--muted); font-size: 9px; letter-spacing: .65px; }
.top-perimeter strong { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-perimeter-settings { margin-top: 18px; padding: 16px; border-left: 3px solid var(--action); background: var(--surface-subtle); }
.portal-perimeter-settings h3 { margin: 0 0 5px; }
.portal-perimeter-settings > label { display: block; max-width: 620px; margin-top: 12px; }
.user-context > a { color: var(--text); text-decoration: none; }
.user-context > a > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.user-context strong { font-size: 12px; font-weight: 600; }
.user-context small { margin-top: 2px; font-size: 10px; }
.user-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #9aabb5; border-radius: 50%; background: #edf2f4; color: var(--text); font-size: 11px; font-weight: 700; }
.top-session-form { margin: 0 0 0 4px; }
.top-session-form .top-logout { min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; }
.top-session-form .top-logout:hover { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--text); }
body.app-page > .content { display: block !important; visibility: visible !important; width: auto; max-width: none; min-height: calc(100vh - var(--topbar-height)); margin-left: var(--sidebar-width) !important; padding: 26px 28px 42px; }
.content > :first-child { margin-top: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; transform: translateY(-180%); padding: 9px 12px; border: 2px solid var(--action); border-radius: var(--radius-small); background: var(--surface); color: var(--action); font-weight: 600; text-decoration: none; box-shadow: var(--overlay-shadow); }
.skip-link:focus { transform: translateY(0); }
.mobile-nav-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 110; min-height: 40px; border-radius: var(--radius-small); background: var(--action); color: var(--on-action); box-shadow: none; }

/* Surfaces and data hierarchy */
.card { max-width: 100%; margin: 18px 0; padding: 20px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.card:hover { border-color: var(--border); box-shadow: none; }
.card > h1:first-of-type, .card > .eyebrow + h1 { margin-top: 3px; }
.grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; }
.tag, .status-pill, .dashboard-live, .permission-chip, .activity-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-small); background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: 600; line-height: 1.35; }
.tag::before, .status-pill::before, .dashboard-live::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.protocol-rdp, .protocol-ssh, .protocol-unknown, .account-protocol, .identity-role { border-color: var(--border); background: var(--surface); color: var(--muted); text-transform: uppercase; }
.account-kind-domain, .account-kind-local { margin-left: 6px; border-color: #9fd9d9; background: #eefafa; color: var(--action); text-transform: none; }
.account-kind-local { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); }
.identity-source { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); }
.identity-source-mark { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #d7f1f1; color: var(--action); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.identity-source span:last-child { display: grid; gap: 2px; min-width: 0; }
.identity-source strong { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.identity-source small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.identity-source-ldap { border-color: #9fd9d9; background: #eefafa; }
.identity-source-ldap .identity-source-mark { background: #d7f1f1; color: var(--action); }
.identity-source-local .identity-source-mark { background: #edf2f4; color: var(--text); }
.user-detail-source-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.state-active, .profile-active { border-color: transparent; background: var(--success-bg); color: var(--success); }
.state-pending { border-color: transparent; background: var(--warning-bg); color: var(--warning); }
.state-denied { border-color: transparent; background: var(--danger-bg); color: var(--danger); }
.state-warning { border-color: transparent; background: var(--warning-bg); color: var(--warning); }
.state-disabled, .state-neutral, .profile-disabled { border-color: transparent; background: #e9eef1; color: var(--muted); }
.notice, .success, .success-notice, .danger-notice, .error { padding: 12px 14px; border: 1px solid #e2c890; border-left: 3px solid var(--warning); border-radius: var(--radius-small); background: var(--warning-bg); color: var(--warning); }
.success, .success-notice { border-color: #bad9c7; border-left-color: var(--success); background: var(--success-bg); color: var(--success); }
.danger-notice, .error { border-color: #efc4bf; border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.empty-state { padding: 40px 20px !important; color: var(--muted); text-align: center; }
.access-request-pending { pointer-events: none; cursor: not-allowed; border-color: var(--border) !important; background: #e5eaed !important; color: var(--muted) !important; box-shadow: none !important; }
.collapse { display: none; }
.collapse.show { display: block; }

/* Forms and controls */
label { margin: 11px 0; color: var(--text); font-size: 12px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 40px; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--text); box-shadow: none; }
textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6a7a86; }
input:hover, select:hover, textarea:hover { border-color: #506470; }
input:focus, select:focus, textarea:focus { border-color: var(--action); outline: 3px solid rgba(0, 109, 119, .18); box-shadow: none; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); box-shadow: none; }
form label:focus-within { color: var(--text); }
input[type="checkbox"], input[type="radio"] { flex: 0 0 20px; width: 20px; min-width: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: var(--action); vertical-align: middle; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; }
.app-page label:has(> input[type="checkbox"]), .app-page label:has(> input[type="radio"]) { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.app-page label:has(> input[type="checkbox"]):hover, .app-page label:has(> input[type="radio"]):hover { border-color: var(--border-strong); background: #f2f5f6; }
.app-page label > input[type="checkbox"]:checked { border-color: var(--action); background: var(--action); }
.app-page label > input[type="radio"]:checked { border-color: var(--action); }
button, .launch, .btn { min-height: 40px; padding: 8px 13px; border: 1px solid var(--action); border-radius: var(--radius-small); background: var(--action); color: var(--on-action); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: none; }
button:hover, .launch:hover, .btn:hover { border-color: var(--action-hover); background: var(--action-hover); color: var(--on-action); filter: none; transform: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary, .secondary, .btn-outline-secondary, .filter-reset, .reset-filters, a[href*="reset"] { border: 1px solid var(--border-strong) !important; border-radius: var(--radius-small) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important; }
button.secondary:hover, .secondary:hover, .btn-outline-secondary:hover, .filter-reset:hover, .reset-filters:hover, a[href*="reset"]:hover { background: #edf2f4 !important; color: var(--text) !important; }
.danger-button { border-color: var(--danger) !important; background: var(--danger) !important; color: var(--on-danger) !important; }
.danger-button:hover { background: var(--danger) !important; filter: brightness(.9); }
.filter-actions, .toolbar, .actions, .modal-actions, .account-creation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Tables */
.table-responsive { width: 100%; max-height: none; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.table-responsive table { min-width: 680px; margin: 0; }
th { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; }
td { min-height: 48px; padding: 11px 12px; border-bottom: 1px solid #e1e7ea; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f4f7f7; }

/* Dashboard */
.dashboard-page { max-width: 1440px; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dashboard-heading h1 { margin-bottom: 5px; }
.dashboard-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 2px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dashboard-period, .dashboard-refresh { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.dashboard-period select { width: auto; min-width: 125px; margin: 0; }
.dashboard-refresh { min-height: 40px; padding: 0 2px; }
.dashboard-refresh input { width: 20px; margin: 0; }
body.app-page .dashboard-refresh { border: 0; background: transparent; }
.dashboard-live { border-color: #bad9c7; border-radius: var(--radius-small); }
.dashboard-live i, .dashboard-status i { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.dashboard-status i.warning { background: var(--warning); }
.dashboard-status i.neutral { background: var(--muted); }
.dashboard-tabs, .settings-tabs, .account-detail-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border); }
.dashboard-tab, .settings-tab, .account-detail-tab { min-height: 42px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: none; }
.dashboard-tab:hover, .settings-tab:hover, .account-detail-tab:hover { background: #edf2f4; color: var(--text); }
.dashboard-tab.is-active, .settings-tab.is-active, .account-detail-tab.is-active { border-bottom-color: var(--action); background: transparent; color: var(--action); box-shadow: none; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dashboard-metric { min-height: 116px; padding: 17px 18px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); box-shadow: none; }
.dashboard-metric span, .dashboard-metric strong, .dashboard-metric small { display: block; }
.dashboard-metric span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .8px; }
.dashboard-metric strong { margin: 8px 0 3px; color: var(--text); font-size: 28px; font-weight: 600; }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dashboard-panel { display: none; }
.dashboard-panel.is-active { display: block; }
.dashboard-card { margin: 0; }
.dashboard-alerts { margin: 18px 0; }
.dashboard-todo-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.dashboard-todo-layout > .card { margin: 0; }
.dashboard-side-cards { display: grid; gap: 18px; }
.dashboard-side-cards > .card { margin: 0; }
.dashboard-live-sessions { margin: 18px 0; }
.dashboard-inventory { margin-top: 18px; }
.dashboard-alert-count { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dashboard-alert-list { display: grid; gap: 0; }
.dashboard-alert h3 { margin: 4px 0 2px; font-size: 14px; }
.dashboard-alert p { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-alert { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--border); background: transparent; }
.dashboard-alert:last-child { border-bottom: 0; }
.dashboard-alert-priority { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--radius-small); background: var(--info-bg); color: var(--info); font-size: 12px; font-weight: 600; }
.dashboard-alert-danger { background: transparent; }
.dashboard-alert-danger .dashboard-alert-priority { background: var(--danger-bg); color: var(--danger); }
.dashboard-alert-warning { background: transparent; }
.dashboard-alert-warning .dashboard-alert-priority { background: var(--warning-bg); color: var(--warning); }
.dashboard-alert-info { background: transparent; }
.dashboard-alert-empty { display: flex; flex-direction: column; gap: 3px; padding: 18px 14px; border: 1px dashed var(--border-strong); background: var(--surface-subtle); }
.dashboard-alert-empty span { color: var(--muted); font-size: 12px; }
.favorite-form { display: inline-flex; margin: 0; }
.favorite-button { width: 30px; min-height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 17px; line-height: 1; box-shadow: none; }
.favorite-button:hover, .favorite-button.is-favorite { border-color: #d7b65b; background: #fff8e8; color: #a66b00; }
.favorite-resource { display: flex; align-items: center; gap: 8px; }
.account-action-group > .favorite-form { margin-right: 4px; }
.shortcut-help-dialog .modal-panel { max-width: 500px; }
.shortcut-list { display: grid; grid-template-columns: 105px 1fr; gap: 0; margin: 18px 0 0; }
.shortcut-list dt, .shortcut-list dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--border); }
.shortcut-list dt { color: var(--action); font-family: var(--font-mono); font-weight: 700; }
.shortcut-list dd { color: var(--muted); }
.dashboard-card-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.dashboard-status { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.dashboard-status strong, .dashboard-status small { display: block; }
.dashboard-status small { margin-top: 3px; color: var(--muted); }
.system-health-page { max-width: 1440px; }
.system-health-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.system-health-heading h1 { margin-bottom: 5px; }
.system-health-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.system-health-actions .btn { margin: 0; }
.system-health-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.system-health-summary > div { min-height: 105px; padding: 17px 18px; background: var(--surface); }
.system-health-summary span, .system-health-summary strong { display: block; }
.system-health-summary span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: none; }
.system-health-summary strong { margin-top: 9px; color: var(--action); font-size: 29px; font-weight: 600; }
.system-health-card { margin: 0; }
.system-health-card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.system-health-card-heading h2 { margin-bottom: 4px; }
.system-health-card-heading .hint { margin: 0; }
.system-health-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.system-health-legend i, .system-health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.system-health-legend i.warning, .system-health-dot.warning { background: var(--warning); }
.system-health-legend i.neutral, .system-health-dot.neutral { background: var(--muted); }
.system-health-dot.danger { background: var(--danger); }
.system-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; overflow: visible; }
.system-health-grid > .system-health-service { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
.system-health-service { min-height: 135px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: background .16s ease, box-shadow .16s ease; }
.system-health-service:hover { background: #fbfdfd; box-shadow: inset 3px 0 0 var(--action); }
.system-health-service > summary { display: block; width: 100%; box-sizing: border-box; list-style: none; cursor: pointer; }
.system-health-service > summary::-webkit-details-marker { display: none; }
.system-health-service[open] { background: #fbfdfd; box-shadow: inset 3px 0 0 var(--action); }
.system-health-service-summary { position: relative; padding-right: 24px; }
.system-health-service[open] > summary::after { color: var(--action); content: "−"; }
.system-health-service > summary::after { position: absolute; top: 3px; right: 0; color: var(--muted); content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.system-health-service-heading { display: flex; align-items: flex-start; gap: 12px; }
.system-health-service-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #b9dfe0; border-radius: 12px; background: #eaf7f7; color: var(--action); }
.system-health-service-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.system-health-service-icon.tone-warning { border-color: #ead39d; background: #fff8e8; color: var(--warning); }
.system-health-service-icon.tone-danger { border-color: #efc4bf; background: var(--danger-bg); color: var(--danger); }
.system-health-service-icon.tone-neutral { border-color: var(--border); background: #edf1f3; color: var(--muted); }
.system-health-service-copy { flex: 1; min-width: 0; }
.system-health-service-title { display: block; margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.system-health-service-description { display: block; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.system-health-service .status-pill { flex: 0 0 auto; margin-left: auto; }
.system-health-service-meter { display: block; height: 4px; margin: 15px 0 9px 54px; overflow: hidden; border-radius: 999px; background: #e8edef; }
.system-health-service-meter span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--success); }
.system-health-service-meter span.warning { background: var(--warning); }
.system-health-service-meter span.danger { background: var(--danger); }
.system-health-service-meter span.neutral { width: 32%; background: var(--muted); }
.system-health-service-footer { display: flex; justify-content: space-between; gap: 12px; margin-left: 54px; color: #8293a0; font-size: 10px; letter-spacing: .2px; }
.system-health-service-details { margin: 15px 0 0 54px; padding-top: 13px; border-top: 1px solid var(--border); }
.system-health-service-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.system-health-service-details dl > div { min-width: 0; }
.system-health-service-details dt { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: none; }
.system-health-service-details dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 11px; font-weight: 600; }
.system-health-topology { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.8fr); align-items: center; gap: 28px; margin-bottom: 18px; padding: 22px 24px; overflow: hidden; border: 1px solid #1a465b; border-radius: var(--radius); background: linear-gradient(135deg, #0b2234 0%, #123d50 100%); color: #fff; box-shadow: 0 10px 25px rgba(13, 34, 51, .12); }
.system-health-topology .eyebrow { margin-bottom: 7px; color: #8bd4d5; }
.system-health-topology-heading h2 { margin: 0 0 6px; color: #fff; font-size: 20px; }
.system-health-topology-heading p:not(.eyebrow) { margin: 0; color: #b6cbd2; font-size: 12px; line-height: 1.5; }
.system-health-topology-flow { display: flex; align-items: center; min-width: 0; }
.system-health-topology-node { display: flex; align-items: center; flex-direction: column; min-width: 82px; gap: 7px; text-align: center; }
.system-health-topology-node > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(139, 212, 213, .52); border-radius: 14px; background: rgba(255, 255, 255, .1); color: #8bd4d5; }
.system-health-topology-node svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.system-health-topology-node strong { color: #fff; font-size: 11px; font-weight: 600; }
.system-health-topology-node small { color: #a8c2ca; font-size: 10px; }
.system-health-topology-link { position: relative; flex: 1; min-width: 22px; height: 1px; margin: 0 10px; background: rgba(139, 212, 213, .55); }
.system-health-topology-link::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid #8bd4d5; border-right: 1px solid #8bd4d5; content: ""; transform: rotate(45deg); }
.system-health-note { margin-top: 16px; padding: 13px 15px; border: 1px solid var(--border); border-left: 3px solid var(--action); border-radius: var(--radius-small); background: #f4f8f9; color: var(--muted); font-size: 12px; }
.system-health-note strong { color: var(--text); }
.system-health-redundancy { margin: 0 0 18px; }
.system-health-redundancy-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.system-health-redundancy-heading h2 { margin-bottom: 5px; }
.system-health-redundancy-heading .hint { max-width: 68ch; margin: 0; }
.system-health-redundancy-heading .status-pill { flex: 0 0 auto; }
.system-health-redundancy-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-small); overflow: hidden; }
.system-health-redundancy-facts > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.system-health-redundancy-facts > div:nth-child(3n) { border-right: 0; }
.system-health-redundancy-facts > div:nth-last-child(-n+3) { border-bottom: 0; }
.system-health-redundancy-facts dt { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: none; }
.system-health-redundancy-facts dd { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-weight: 600; }
.system-health-redundancy-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.system-health-alert { margin: 0 0 18px; border-left: 3px solid var(--danger); background: var(--danger-bg); color: var(--text); }
.system-health-alert strong { color: var(--danger); }
.system-health-history { margin-top: 18px; }
.system-health-history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.system-health-history-heading h2 { margin-bottom: 4px; }
.system-health-history-heading .hint { margin: 0; }
.system-health-history-retention { color: var(--muted); font-size: 11px; white-space: nowrap; }
.system-health-history table { min-width: 680px; }
.system-health-history .empty-state { padding: 22px; text-align: center; }
.webauthn-card { border-left: 3px solid var(--action); }
.webauthn-count { color: var(--action); font-size: 13px; font-weight: 600; }
.passkey-list { margin: 12px 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-small); }
.passkey-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 10px 12px; }
.passkey-item + .passkey-item { border-top: 1px solid var(--border); }
.passkey-item form { margin: 0; }
.passkey-name { overflow-wrap: anywhere; }
.webauthn-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.webauthn-status.is-danger { color: var(--danger); }
.webauthn-login-button { display: block; margin-top: 10px; }

/* Accounts, detail and session preparation */
.accounts-page { padding: 0; background: transparent; border: 0; }
.accounts-page > .hint { max-width: 780px; }
.account-filters { display: grid; grid-template-columns: minmax(240px, 1.7fr) minmax(190px, 1fr) auto; align-items: end; gap: 12px; margin: 20px 0 0; padding: 14px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
.account-filters label { margin: 0; }
.accounts-page .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
.accounts-page table { table-layout: auto; border-top: 0; }
.accounts-page th:nth-child(n), .accounts-page td:nth-child(n) { width: auto; }
.accounts-page td { height: 62px; overflow: visible; text-overflow: clip; }
.account-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.account-open { display: block; color: inherit; text-decoration: none; }
.account-open-hint { display: block; margin-top: 4px; color: var(--action); font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.account-open:hover .account-open-hint, .account-open:focus .account-open-hint { opacity: 1; }
.account-action-group { display: flex; align-items: center; gap: 7px; }
.connect-button { min-width: 92px; }
.ds .connect-button { min-width: 0; }
.account-menu-button { width: 40px; min-width: 40px; padding: 0; border-color: var(--border-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--text); }
.account-menu-button:hover { background: #edf2f4; color: var(--text); }
body.app-page .account-detail-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(13, 34, 51, .56); backdrop-filter: none; }
.account-detail-backdrop > a { display: block; width: 100%; height: 100%; }
body.app-page .account-detail-panel { position: fixed; top: 0; right: 0; z-index: 1110; width: min(620px, 100vw); height: 100vh; overflow: auto; border-left: 1px solid var(--border); background: var(--surface); box-shadow: var(--overlay-shadow); animation: account-panel-in .18s ease-out; }
body.app-page .account-detail-header { display: flex; justify-content: space-between; gap: 20px; padding: 26px 28px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
body.app-page .account-detail-close { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-small); color: var(--muted); font-size: 26px; text-decoration: none; }
body.app-page .account-detail-close:hover { border-color: var(--border); background: #edf2f4; }
body.app-page .account-detail-tabs { gap: 0; padding: 0 20px; }
body.app-page .account-detail-tab { min-height: 42px; padding: 10px 12px; border-radius: 0; font-weight: 600; }
body.app-page .account-detail-tab:hover { background: #edf2f4; color: var(--text); }
body.app-page .account-detail-tab.is-active { background: transparent; color: var(--action); }
body.app-page .account-detail-content { padding: 22px 28px 94px; }
body.app-page .account-detail-section, body.app-page .account-detail-footer { border-color: var(--border); }
body.app-page .account-detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--border); }
body.app-page .account-detail-metrics > div { padding: 16px; border: 0; border-radius: 0; background: var(--surface); }
.account-detail-metrics strong { display: block; font-size: 22px; }
.account-detail-metrics span, .permission-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-detail-section { margin-bottom: 24px; }
.account-detail-section h3 { margin: 0 0 14px; }
.account-detail-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-detail-list { display: grid; grid-template-columns: 1fr 1.5fr; margin: 0; border-top: 1px solid var(--border); }
.account-detail-list dt, .account-detail-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.account-detail-list dt { color: var(--muted); }
.account-detail-list dd { color: var(--text); font-weight: 600; }
body.app-page .account-detail-callout { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-left: 3px solid var(--action); border-radius: var(--radius-small); background: #eef6f6; color: var(--muted); font-size: 12px; }
body.app-page .detail-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-small); }
.detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.detail-table th, .detail-table td { padding: 10px; vertical-align: top; text-align: left; }
.activity-details { max-width: 180px; overflow-wrap: anywhere; color: var(--muted); }
.permission-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.permission-row > div:first-child { min-width: 130px; }
.permission-chips { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
body.app-page .detail-counter, body.app-page .activity-status, body.app-page .permission-chip { display: inline-block; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-small); background: #edf2f4; color: var(--muted); font-weight: 600; }
body.app-page .permission-chip.allowed { border-color: #bad9c7; background: var(--success-bg); color: var(--success); }
body.app-page .account-detail-footer { position: fixed; right: 0; bottom: 0; z-index: 1120; display: flex; justify-content: flex-end; gap: 8px; width: min(620px, 100vw); padding: 14px 28px; border-top: 1px solid var(--border); background: var(--surface); }
body.app-page .account-detail-footer .btn { display: inline-flex; align-items: center; }
.accounts-directory-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.accounts-directory-layout:has(> .account-detail-panel) { grid-template-columns: minmax(0, 1.55fr) minmax(340px, .9fr); }
.accounts-directory-layout > .accounts-page { min-width: 0; margin: 0; }
.accounts-directory-count { margin: 4px 0 10px; color: var(--muted); font-size: 11px; }
.accounts-directory-layout > .account-detail-backdrop { display: none; }
body.app-page .accounts-directory-layout > .account-detail-panel { position: sticky; top: 12px; width: auto; height: calc(100vh - 24px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; animation: none; }
body.app-page .accounts-directory-layout .account-detail-content { padding-bottom: 24px; }
body.app-page .accounts-directory-layout .account-detail-footer { position: sticky; bottom: 0; width: auto; }
.vault-detail-panel .vault-detail-members { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.vault-detail-panel .vault-detail-members li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.vault-detail-panel .account-detail-tab { cursor: pointer; }
.vault-permissions-panel { width: min(940px, calc(100vw - 32px)); }
.modal:has(.vault-permissions-panel) { z-index: 1200; }
.vault-role-presets { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.vault-assignment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.vault-assignment-summary > section { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.vault-assignment-summary h3 { margin: 0 0 10px; font-size: 13px; }
.vault-assignment-summary .permission-chips, .safe-page .permission-chips, .vault-detail-panel .permission-chips { justify-content: flex-start; }
.vault-advanced-rights { margin: 18px 0; }
.vault-advanced-rights > summary, .vault-removal > summary { cursor: pointer; font-weight: 600; }
.permission-readonly { background: var(--surface); }
.permission-readonly input { cursor: not-allowed; }
.vault-removal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.vault-removal[hidden], [data-vault-permissions] [hidden] { display: none; }
@media (max-width: 640px) {
  .vault-assignment-summary { grid-template-columns: minmax(0, 1fr); }
  .vault-permissions-panel { width: calc(100vw - 24px); }
}
.vault-detail-panel .permission-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.vault-detail-panel .permission-row > div:first-child { min-width: 150px; }
.vault-detail-panel .permission-row > div:first-child span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
@keyframes account-panel-in { from { transform: translateX(24px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }
.wizard-progress { display: flex; gap: 1px !important; margin: 24px 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--border); }
.wizard-progress span { flex: 1; padding: 11px; border-radius: 0 !important; background: var(--surface-subtle) !important; color: var(--muted) !important; font-size: 12px; font-weight: 600; text-align: center; }
.wizard-progress span.is-active { background: #eef6f6 !important; color: var(--action) !important; }
.account-creation-page { width: 100%; margin: 0; border: 0; background: transparent; }
body.app-page .account-creation-page { max-width: 1440px !important; padding: 20px !important; }
.account-creation-header, .account-edit-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.account-creation-actions, .account-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
body.app-page .account-creation-page .btn { border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); font-weight: 600; }
body.app-page .account-edit-page { max-width: 900px !important; padding: 24px 28px !important; }
.account-edit-header { margin-bottom: 24px; }
.account-edit-form { display: grid; gap: 18px; }
.account-edit-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 20px; }
.account-edit-form textarea { min-height: 130px; }
body.app-page .account-edit-title { font-size: 28px !important; letter-spacing: -.4px; }
body.app-page .account-target-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--action); font-size: 12px; font-weight: 600; white-space: nowrap; }
body.app-page .account-edit-fields { border-color: var(--border); border-radius: var(--radius); background: var(--surface-subtle); }
body.app-page .account-edit-actions .btn { border-radius: var(--radius-small); font-weight: 600; }
.account-edit-actions .cancel { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.domain-machine-fields, .account-remote-machines { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-left: 3px solid var(--action); border-radius: var(--radius-small); background: var(--surface-subtle); }
.domain-machine-fields legend { padding: 0 6px; color: var(--action); font-size: 12px; font-weight: 700; }
.account-remote-machines h2 { margin: 0 0 14px; font-size: 18px; }
.account-remote-machines table { margin-bottom: 18px; }
.remote-machine-add-form { align-items: end; }
.profile-remote-machines { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-left: 3px solid var(--action); border-radius: var(--radius-small); background: var(--surface-subtle); }
.profile-remote-machines h3 { margin: 0 0 4px; font-size: 18px; }
.profile-remote-machines table { margin: 16px 0; }
.profile-remote-machines .remote-machine-add-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) 120px auto; gap: 12px; align-items: end; }
.profile-remote-machines .remote-machine-add-form button { white-space: nowrap; }
.security-profile-edit-page, .security-profile-create-page { max-width: 1180px !important; }
body.app-page .security-profile-edit-page, body.app-page .security-profile-create-page { padding: 24px 28px !important; }
.security-profile-edit-page .profile-form-page, .security-profile-create-page .profile-form-page { margin-top: 18px; }
.security-profile-edit-page .security-profile-form, .security-profile-create-page .security-profile-form { display: grid; gap: 16px; }
.security-profile-edit-page .standalone-profile-actions, .security-profile-create-page .standalone-profile-actions { justify-content: flex-end; margin-top: 18px; }
.security-profile-edit-page .profile-remote-machines { margin-top: 24px; }
.profile-section { min-width: 0; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--border); border-left: 3px solid var(--action); border-radius: var(--radius-small); background: var(--surface-subtle); }
.profile-section legend { padding: 0 8px; color: var(--action); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.profile-section > label { display: block; margin-top: 14px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.profile-form-grid > label { min-width: 0; }
.profile-section .web-profile-fields { margin: 18px 0 0; background: var(--surface); }
.profile-section .settings-checks { margin-top: 16px; }
body.app-page .standalone-profile-actions { padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-remote-machines .remote-machine-add-form { grid-template-columns: 1fr; }
}
.inline-form { display: inline; }

/* Governance and administration */
.identity-shell, .settings-shell, .profiles-page, .recordings-page { max-width: 1440px; }
body.app-page .users-management-page, body.app-page .groups-management-page { max-width: 1440px !important; padding: 20px !important; }
body.app-page .users-management-heading, body.app-page .groups-management-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
body.app-page .identity-tabs { display: flex; gap: 0; margin-bottom: 20px; overflow-x: auto; border-bottom: 1px solid var(--border); }
body.app-page .identity-tab { min-height: 42px; padding: 10px 14px; border-radius: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
body.app-page .identity-tab:hover { background: #edf2f4; color: var(--text); }
body.app-page .identity-tab.is-active { background: transparent; color: var(--action); border-bottom-color: var(--action); }
body.app-page .identity-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
body.app-page .identity-metric { min-height: 112px; padding: 16px 18px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); box-shadow: none; }
body.app-page .identity-metric span, body.app-page .identity-metric strong, body.app-page .identity-metric small { display: block; }
body.app-page .identity-metric span, body.app-page .identity-metric small { color: var(--muted); }
body.app-page .identity-metric span { font-size: 11px; font-weight: 600; }
body.app-page .identity-metric strong { margin: 7px 0 2px; color: var(--text); font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
body.app-page .identity-metric small { font-size: 11px; line-height: 1.35; }
body.app-page .identity-search { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 20px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
body.app-page .identity-search label { flex: 1; margin: 0; }
body.app-page .identity-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.app-page .identity-subcard { border-radius: var(--radius); box-shadow: none; }
body.app-page .identity-section-heading { display: flex; justify-content: space-between; gap: 12px; }
body.app-page .identity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
body.app-page .identity-tip { border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
body.app-page .live-dot { border: 1px solid #bad9c7; border-radius: var(--radius-small); background: var(--success-bg); color: var(--success); font-weight: 600; }
.governance-line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--border); }
.governance-line span { color: var(--muted); }
.governance-line strong { color: var(--text); font-size: 24px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.governance-line .warning-text { color: var(--warning); }
.identity-summary-grid, .settings-status-grid { gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.identity-summary-grid > *, .settings-status-grid > div { border: 0; border-radius: 0; background: var(--surface); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-grid > .card { margin: 0; }
body.app-page .profile-modal { max-width: 780px !important; }
body.app-page .profile-modal .web-profile-fields { margin: 18px 0; padding: 16px; border: 1px solid #cddde5; border-radius: 10px; background: #f7fafb; }
body.app-page .profile-modal .web-profile-fields legend { padding: 0 8px; color: #007b83; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.app-page .profile-modal .web-profile-fields label { display: block; margin-top: 12px; }
body.app-page .profile-modal .web-profile-fields input, body.app-page .profile-modal .web-profile-fields textarea { width: 100%; box-sizing: border-box; }
body.app-page .profile-modal .web-profile-fields .settings-checks { margin-top: 14px; }
body.app-page .profile-rdp, body.app-page .profile-ssh { border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); color: var(--text); }
body.app-page .profile-active { border-color: #bad9c7; background: var(--success-bg); color: var(--success); }
body.app-page .profile-disabled { border-color: var(--border); background: #edf2f4; color: var(--muted); }
body.app-page .profile-menu-button { min-width: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--text); }
body.app-page .profile-menu-button:hover { background: #edf2f4; color: var(--text); }
.profile-row-disabled { opacity: .58; }
.profile-actions { width: 70px; }
.profile-menu-button { font-size: 19px; line-height: 1; }
.profile-menu-button::after { display: none; }
.profiles-table td { vertical-align: middle; white-space: nowrap; }
body.app-page .profile-approval-row { border-color: var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
body.app-page .profile-approver-panel { border-color: var(--border); border-radius: var(--radius-small); background: var(--surface); }
body.app-page .profile-approver-details summary { color: var(--action); font-weight: 600; }
.profile-approval-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.profile-search { display: block; width: 260px; margin: 0 0 18px auto; }
.profile-approval-list { display: flex; flex-direction: column; gap: 8px; }
.profile-approval-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid var(--border); }
.profile-approval-row > label { display: flex; align-items: center; flex: 1; gap: 11px; margin: 0; }
.profile-approval-row > label input { width: auto; margin: 0; }
.profile-approval-row > label small { display: block; margin-top: 3px; font-weight: 400; }
.profile-approver-details { min-width: 130px; }
.profile-approver-panel { min-width: 290px; margin-top: 10px; padding: 12px; border: 1px solid var(--border); }
.profile-approver-panel label { margin: 0; }
.profile-approver-panel select { min-height: 116px; }
.profile-approval-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.profile-approval-row[hidden] { display: none; }
body.app-page .profile-tabs { display:flex; gap:0; width:100%; height:42px; margin:22px 0 20px; overflow:hidden; border-bottom:1px solid var(--border); }
body.app-page .profile-tabs a { display:flex; flex:0 0 auto; align-items:center; box-sizing:border-box; min-height:42px; height:42px; margin:0; padding:10px 14px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:12px !important; font-weight:600; line-height:20px; text-decoration:none; white-space:nowrap; box-shadow:none; transform:none; }
body.app-page .profile-tabs a:hover { background:#edf2f4; color:var(--text); }
body.app-page .profile-tabs a.is-active, body.app-page .profile-tabs a[aria-selected="true"] { border-bottom-color:var(--action); background:transparent; color:var(--action); box-shadow:none; }
body.app-page .profile-tabs a:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.profile-connectors-card { margin-top:18px; }
.connector-action-row { display:grid; grid-template-columns: 1fr 1fr 1.4fr 1.2fr 1.2fr auto; gap:8px; align-items:center; margin:8px 0; }
.connector-action-row input, .connector-action-row select { min-width:0; }
.connector-actions-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; }
.connector-actions-heading h3 { margin:0 0 4px; }
.connector-actions { padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-subtle); }
.connector-remove-action { min-width:34px; padding:7px 10px !important; }
.connector-row-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.inline-form { display:inline; }
.settings-portal-card, .settings-policy-card { vertical-align: top; }
.notification-panel { padding: 16px 18px; }
.notification-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notification-bar h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.notification-count, .notification-summary-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 22px; padding: 2px 8px; border: 1px solid #a9e5da; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: 700; }
.notification-disclosure { margin-top: 12px; border-top: 1px solid var(--border); }
.notification-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 0; color: var(--action); cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; }
.notification-disclosure summary::-webkit-details-marker { display: none; }
.notification-disclosure summary::after { content: '＋'; color: var(--action); font-size: 16px; }
.notification-disclosure[open] summary::after { content: '−'; }
.notification-list { display: grid; gap: 6px; max-height: 190px; margin: 10px 0 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; }
.notification-list li { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.notification-list li:last-child { border-bottom: 0; }
.notification-list li strong { color: var(--text); }
.notification-list li span { color: var(--muted); }
.notification-list li time { color: var(--muted); white-space: nowrap; }
.settings-portal-form { display: grid; gap: 16px; margin-top: 22px; }
.settings-portal-form > label { margin: 0; }
.settings-portal-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border) !important; border-radius: var(--radius-small); background: var(--surface-subtle); }
.settings-portal-toggle:hover { border-color: var(--border-strong) !important; background: #f2f5f6; }
.settings-portal-toggle input { flex: 0 0 20px; width: 20px; min-height: 20px; margin: 0; padding: 0; }
.settings-portal-toggle span, .settings-portal-field > span { color: var(--text); font-size: 12px; font-weight: 600; }
.settings-portal-field { display: grid; gap: 6px; }
.settings-portal-field input, .settings-portal-field textarea { margin-top: 0; }
.settings-checks label, .settings-switch, .recording-option { border-color: var(--border) !important; border-radius: var(--radius-small) !important; background: var(--surface-subtle) !important; }
.settings-checks label, .settings-switch, .recording-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; }
.settings-checks label:hover, .settings-switch:hover, .recording-option:hover { border-color: var(--border-strong) !important; background: #f2f5f6 !important; }

.ldap-page { max-width: 1220px; }
.ldap-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.ldap-heading h1 { margin-bottom: 8px; }
.ldap-heading-mark { display: grid; place-items: center; min-width: 76px; height: 54px; border: 1px solid #a9ded9; border-radius: 12px; background: #e9f8f7; color: var(--action); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.ldap-tabs { margin: 0 -28px 24px; padding: 0 28px; }
.ldap-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.ldap-metrics > div { display: flex; flex-direction: column; gap: 5px; min-height: 88px; padding: 15px; background: var(--surface); }
.ldap-metrics span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: none; }
.ldap-metrics strong { color: var(--action); font-size: 18px; }
.ldap-metrics small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldap-section { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ldap-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ldap-section-heading h2 { margin: 0 0 6px; }
.ldap-badge, .ldap-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px 10px; border: 1px solid #b8dcca; border-radius: 6px; background: #eff9f3; color: #147a4d; font-size: 11px; font-weight: 700; }
.ldap-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ldap-status.danger { border-color: #efc1ba; background: #fff3f1; color: #af3329; }
.ldap-status.neutral { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); }
.ldap-form { display: grid; gap: 18px; padding-top: 22px; }
.ldap-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ldap-field { display: grid; gap: 7px; margin: 0; }
.ldap-field > span { color: var(--text); font-size: 12px; font-weight: 700; }
.ldap-field > span b { color: var(--action); }
.ldap-field > span em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 400; }
.ldap-field input, .ldap-field select, .ldap-field textarea { width: 100%; margin: 0; }
.ldap-field textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.ldap-field-wide { grid-column: 1 / -1; }
.ldap-divider { height: 1px; background: var(--border); }
.ldap-ca-toggle { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid #b9e1d6; border-radius: var(--radius-small); background: #f0faf6; color: #155b43; font-size: 12px; font-weight: 700; }
.ldap-ca-toggle input { flex: 0 0 18px; width: 18px; min-height: 18px; margin: 0; }
.ldap-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ldap-form-actions .secondary { background: var(--surface); }
.ldap-empty-state, .ldap-result { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.ldap-empty-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e5f4f3; color: var(--action); font-size: 22px; }
.ldap-empty-state strong, .ldap-result strong { display: block; margin-bottom: 3px; color: var(--text); }
.ldap-empty-state p, .ldap-result span { margin: 0; color: var(--muted); font-size: 12px; }
.ldap-result { border-color: #b7dec9; background: #f0faf4; }
.ldap-result-success strong { color: #147a4d; }
.ldap-result-danger { border-color: #efc1ba; background: #fff5f3; }
.ldap-result-danger strong { color: #af3329; }
.ldap-security-note { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--action); background: #edf8f7; color: var(--text); }
.ldap-security-note strong { font-size: 12px; }
.ldap-security-note span { color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 800px) {
  .ldap-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ldap-form-grid { grid-template-columns: 1fr; }
  .ldap-field-wide { grid-column: auto; }
  .ldap-tabs { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
}
.safe-summary, .recording-locked { border-color: var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.permission-item, .member-list { border-color: var(--border); border-radius: var(--radius-small); background: var(--surface); }
.permission-row { border-color: var(--border); }
.permission-grid { gap: 8px; margin-top: 12px; }
.permission-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; font-weight: 400; }
.permission-item input, .member-option input { width: auto; margin: 3px 0 0; }
.permission-item span { display: flex; flex-direction: column; gap: 3px; }
.permission-item small { color: var(--muted); font-weight: 400; line-height: 1.3; }
.permission-preview { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--action); background: var(--surface-subtle); color: var(--text); font-size: 12px; }
.permission-preview span { color: var(--muted); line-height: 1.45; }
.permission-preview.is-empty { border-left-color: var(--border); }
.member-list { max-height: 220px; padding: 8px; overflow: auto; }
.member-option { margin: 0; padding: 7px; font-weight: 400; }
.safe-step[hidden] { display: none; }
.safe-summary { padding: 14px; }
.safe-summary ul { margin: 6px 0 14px; padding-left: 20px; }

/* Remote sessions */
.page-heading, .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-heading { margin-bottom: 20px; }
.scope { padding-left: 12px; border-left: 2px solid var(--border-strong); color: var(--muted); font-size: 10px; letter-spacing: .7px; white-space: nowrap; }
.scope span, .scope strong { display: block; }
.scope strong { margin-top: 2px; color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.session-monitor-trigger { white-space: nowrap; }

/* Menus and modal dialogs */
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 1080; min-width: 12rem; margin: 2px 0 0; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--overlay-shadow); list-style: none; }
.dropdown-menu.show { display: block; }
.dropdown-menu form { margin: 0; }
.dropdown-menu a, .dropdown-menu form button { border-radius: 3px; color: var(--text); }
.dropdown-menu a, .dropdown-menu form button { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; font: inherit; text-align: left; text-decoration: none; }
.dropdown-menu a:hover, .dropdown-menu form button:hover { background: #edf2f4; color: var(--text); }
.modal { display: none; position: fixed; inset: 0; z-index: 1055; padding: 4vh 16px; overflow: auto; background: rgba(13, 34, 51, .68); backdrop-filter: none; }
.modal:target, .modal.show { display: block; }
.modal-panel { width: min(760px, 100%); max-height: 92vh; margin: auto; padding: 24px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--overlay-shadow); }
.confirm-panel { max-width: 520px; }
body.app-page .modal { background: rgba(13, 34, 51, .68); backdrop-filter: none; }
body.app-page .modal-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--overlay-shadow); }
body.app-page .modal-close { border: 1px solid transparent; border-radius: var(--radius-small); background: transparent; color: var(--muted); }
body.app-page .modal-close:hover { border-color: var(--border); background: #edf2f4; color: var(--text); }
body.app-page .member-list { border-color: var(--border); border-radius: var(--radius-small); }
.modal-grid, .permission-grid, .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.modal-close { display: grid; float: right; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-small); background: transparent; color: var(--muted); font-size: 22px; line-height: 1; box-shadow: none; }
.modal-close:hover { border-color: var(--border); background: #edf2f4; color: var(--text); }
.modal-actions { justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); }
.session-expiry-dialog { z-index: 1200; }

/* Recordings */
.recording-modal-panel { width: min(1180px, 100%); max-width: 1180px; background: var(--surface); }
.recording-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.recording-modal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.recording-security { margin: 0; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.recording-security-active { border-color: #a9e5da; background: var(--success-bg); color: var(--success); }
.recording-security-warning { border-color: #e8c98d; background: #fff8e8; color: #8a5a12; }
.recording-size { white-space: nowrap; font-variant-numeric: tabular-nums; }
.recording-storage-panel { display: grid; grid-template-columns: minmax(220px, 1fr) 132px minmax(360px, 1.5fr); align-items: center; gap: 24px; margin: 20px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.recording-storage-intro h2 { margin: 3px 0 5px; font-size: 20px; }
.recording-storage-chart { display: grid; place-items: center; width: 116px; height: 116px; border: 1px solid var(--border-strong); border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--recording-used), #e7edef var(--recording-used) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.recording-storage-chart::after { grid-area: 1 / 1; width: 76px; height: 76px; border-radius: 50%; background: var(--surface-subtle); content: ''; }
.recording-storage-chart span { z-index: 1; grid-area: 1 / 1; color: var(--text); font-size: 18px; font-weight: 700; }
.recording-storage-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.recording-storage-legend > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; min-width: 0; }
.recording-storage-legend span:not(.recording-storage-dot) { color: var(--muted); font-size: 12px; }
.recording-storage-legend strong { grid-column: 2; color: var(--text); font-size: 15px; }
.recording-storage-legend small { grid-column: 2; color: var(--muted); font-size: 10px; }
.recording-storage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.recording-storage-dot.free { background: #e7edef; border: 1px solid var(--border-strong); }
.recording-storage-dot.limit { background: var(--muted); }
.recording-display { position: relative; display: flex; align-items: center; justify-content: center; height: min(540px, calc(100vh - 360px)); min-height: 280px; overflow: hidden; border: 1px solid #274252; border-radius: var(--radius-small); background: #071a2b; }
.recording-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.recording-controls input[type="range"] { min-height: 28px; margin: 0; padding: 0; border: 0; background: transparent; }
body.app-page #recording-status:not(.danger-notice), body.app-page #recording-modal-status:not(.danger-notice) { display: none; }
.recording-filters .filter-reset, .recording-filters a[href="/recordings"] { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; white-space: nowrap; }
.recordings-page .protocol-rdp, .recordings-page .protocol-ssh, .recordings-page .protocol-unknown { border: 1px solid var(--border); background: var(--surface-subtle); color: var(--text); }
.recording-controls #recording-modal-fullscreen { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; padding: 0; }
.recording-controls #recording-modal-fullscreen svg { display: block; }
.audit-page .table-responsive, .settings-page .table-responsive { margin-top: 18px; }
.audit-page table, .settings-page table { min-width: 620px; }
.audit-page .notice, .settings-page .notice { margin-top: 20px; }
.audit-header { margin-bottom: 16px; }
.audit-header .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.audit-header h1 { margin-bottom: 5px; }
.audit-scope { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid #bad9c7; border-radius: var(--radius-small); background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: 700; white-space: nowrap; }
.audit-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.audit-metric { display: grid; gap: 5px; margin: 0; padding: 16px 18px; }
.audit-metric span, .audit-metric small { color: var(--muted); font-size: 12px; }
.audit-metric strong { color: var(--action); font-size: 28px; line-height: 1; }
.audit-metric-danger strong { color: var(--danger); }
.audit-filters { margin: 0 0 16px; }
.audit-filter-form { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); align-items: end; gap: 12px; margin-top: 18px; }
.audit-filter-form label { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 600; }
.audit-filter-form button { min-height: 40px; white-space: nowrap; }
.audit-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.audit-export-actions .btn { min-height: 32px; padding: 7px 10px; font-size: 11px; }
.audit-table-card { margin-top: 0; }
.audit-table-card table { min-width: 980px; }
.audit-date { white-space: nowrap; }
.audit-protocol { text-transform: uppercase; }
.audit-event-code { display: block; margin-top: 5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.audit-details { min-width: 180px; }
.audit-details summary { cursor: pointer; color: var(--action); font-size: 12px; font-weight: 600; }
.audit-detail-list { display: grid; gap: 6px; margin-top: 8px; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.audit-detail-item { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 8px; align-items: baseline; }
.audit-detail-item small { color: var(--muted); }
.audit-detail-item strong { overflow-wrap: anywhere; font-size: 11px; font-weight: 600; }
.audit-details-cell { min-width: 280px; }
.audit-technical-context { margin-top: 8px; }
.audit-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.audit-pagination > div { display: flex; gap: 8px; }
.audit-pagination .is-disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }
@media (max-width: 960px) { .audit-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audit-filter-form label:first-child { grid-column: 1 / -1; } .audit-header .page-heading { display: block; } .audit-scope { margin-top: 12px; } .audit-export-actions { justify-content: flex-start; margin-top: 12px; } }
@media (max-width: 640px) { .audit-metrics { grid-template-columns: 1fr; } .audit-filter-form { grid-template-columns: 1fr; } .audit-filter-form label:first-child { grid-column: auto; } }
.profile-grid .notice { line-height: 1.5; }
.modal[id^="edit-safe-"] .modal-panel { max-width: 900px; padding: 28px; }
.modal[id^="edit-safe-"] form { display: grid; gap: 16px; }
.modal[id^="edit-safe-"] textarea { min-height: 130px; resize: vertical; }

/* Authentication and MFA */
body.public-page { width: 100%; height: auto; min-height: 100dvh; overflow: auto; background: linear-gradient(90deg, var(--nav) 0, var(--nav) 34%, var(--canvas) 34%, var(--canvas) 100%); }
.public-content { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 100dvh; padding: 32px; overflow: visible; background: transparent; }
.public-content::before, .login-shell::before { display: none; }
.public-content .login-shell { flex: 0 1 480px; width: 100%; max-width: 480px; }
.login-card, .login-notice-card, .mfa-gate > .card { margin: 0; padding: 30px 32px; overflow: visible; border: 1px solid var(--border); border-top: 3px solid var(--brand-signal); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 36px rgba(13, 34, 51, .13); }
.login-card::before { display: none; }
.login-heading { margin-bottom: 24px; }
.login-mark, .mfa-gate::before { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-small); background-color: var(--surface-subtle); box-shadow: none; }
.login-mark img { width: 100%; height: 100%; object-fit: contain; }
.login-card h1 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.5px; }
.login-intro { margin: 0; line-height: 1.6; }
.login-context, .login-footnote { color: var(--muted); }
.login-input-wrap input { height: 44px; border-radius: var(--radius-small); }
.login-submit { height: 44px; border-radius: var(--radius-small); background: var(--action); box-shadow: none; }
.login-submit:hover { background: var(--action-hover); }
.login-error-message { border-radius: var(--radius-small); }
.notice-points { border-color: var(--border); border-radius: var(--radius-small); background: var(--surface-subtle); }
.notice-points b { border-radius: 3px; background: #e1f0ee; color: var(--action); }
.mfa-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 480px); min-height: 100dvh; margin: auto; padding: 32px; box-sizing: border-box; }
.mfa-gate > .card { width: 100%; }
.mfa-gate::before { display: none; }
.mfa-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.mfa-card-heading .eyebrow { margin: 0; }
.mfa-context { margin: 4px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .8px; }
.mfa-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-subtle) url('/static/assets/pam-guard-logo.png') center/contain no-repeat; color: transparent; font-size: 0; }
.mfa-card h1 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.5px; }
.mfa-intro { margin: 0; line-height: 1.6; }
.mfa-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.mfa-field { display: flex; flex-direction: column; gap: 6px; }
.mfa-field input { height: 48px; margin: 0; border-radius: var(--radius-small); text-align: center; font-size: 22px; font-weight: 700; letter-spacing: .35em; }
.mfa-field input::placeholder { color: var(--muted); letter-spacing: .35em; }
.mfa-gate .login-submit { width: 100%; }
.mfa-retry, .totp-qr { margin: 18px 0; text-align: center; }
.mfa-cancel-form { margin-top: 16px; }
.mfa-cancel-form button { width: 100%; }
.auth-message-card { width: min(100%, 430px); margin: 12vh auto; }
.inline-action { display: inline; }
.totp-qr-code { width: 190px; height: 190px; padding: 10px; border-radius: var(--radius-small); background: #fff; }
.login-shell { position: relative; width: min(100%, 480px); min-width: 0; max-width: 100%; }
.login-shell > .login-card, .login-shell > .login-notice-card { width: 100%; max-width: 100%; }
.login-mark { overflow: hidden; background: var(--surface-subtle) url('/static/assets/pam-guard-logo.png') center/contain no-repeat; color: transparent; font-size: 0; }
.login-heading { display: flex; align-items: center; gap: 12px; }
.login-heading .eyebrow { margin: 0; }
.login-context { margin: 4px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .8px; }
.login-divider { display: flex; align-items: center; gap: 9px; margin: 25px 0 20px; color: var(--muted); font-size: 10px; letter-spacing: .8px; }
.login-divider span { height: 1px; flex: 1; background: var(--border); }
.login-form { display: flex; flex-direction: column; }
.login-field { margin: 0 0 14px; }
.login-field > span { display: block; margin-bottom: 6px; }
.login-input-wrap { position: relative; min-width: 0; }
.login-input-wrap input { margin: 0; padding-right: 76px; }
.login-field-icon { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.password-toggle { position: absolute; top: 4px; right: 4px; min-height: 32px; padding: 4px 8px; border: 0; background: transparent; color: var(--action); font-size: 11px; box-shadow: none; }
.password-toggle:hover { border: 0; background: transparent; color: var(--action-hover); text-decoration: underline; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.login-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; color: var(--muted); font-size: 11px; }
.security-dot { color: var(--brand-signal); }
.login-error-message { display: flex; flex-direction: column; gap: 5px; margin: 18px 0 16px; padding: 12px 14px; border: 1px solid #efc4bf; border-left: 3px solid var(--danger); background: var(--danger-bg); color: var(--danger); line-height: 1.45; }
.login-error-message span { color: #7b3b36; font-size: 12px; }
.login-error-message.login-error-locked { border-color: #e2c890; border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.notice-points { display: grid; gap: 8px; margin: 20px 0; padding: 12px; }
.notice-points span { display: flex; align-items: center; gap: 9px; }
.notice-points b { display: grid; place-items: center; min-width: 24px; height: 22px; font-size: 10px; }
.settings-heading { margin: 4px 0 20px; }
.settings-tabs { margin-bottom: 20px; }
.settings-sessions-card { display: none; }
.settings-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; }
.settings-status-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.settings-status-grid span { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: none; }
.settings-status-grid strong { color: var(--action); font-size: 17px; }
.settings-shell[data-settings-section="overview"] .settings-portal-card,
.settings-shell[data-settings-section="overview"] .settings-policy-card,
.settings-shell[data-settings-section="overview"] .settings-sessions-card,
.settings-shell[data-settings-section="overview"] .settings-revocation-card { display: none; }
.settings-shell[data-settings-section="security"] .settings-overview-card,
.settings-shell[data-settings-section="security"] .settings-portal-card,
.settings-shell[data-settings-section="security"] .settings-sessions-card,
.settings-shell[data-settings-section="security"] .settings-revocation-card,
.settings-shell[data-settings-section="portal"] .settings-overview-card,
.settings-shell[data-settings-section="portal"] .settings-policy-card,
.settings-shell[data-settings-section="portal"] .settings-sessions-card,
.settings-shell[data-settings-section="portal"] .settings-revocation-card,
.settings-shell[data-settings-section="sessions"] .settings-overview-card,
.settings-shell[data-settings-section="sessions"] .settings-portal-card,
.settings-shell[data-settings-section="sessions"] .settings-policy-card { display: none; }
.settings-shell[data-settings-section="security"] .settings-policy-card,
.settings-shell[data-settings-section="portal"] .settings-portal-card { display: block; width: 100%; }
.portal-branding-section { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--action); background: var(--surface-subtle); }
.portal-branding-section h3 { margin: 0 0 6px; }
.portal-branding-section .settings-grid { margin-top: 14px; }
.portal-branding-section textarea { min-height: 92px; resize: vertical; }
.portal-theme-dark { color-scheme: dark; }
.portal-theme-dark .login-card, .portal-theme-dark .login-notice-card { border-color: var(--border); background: var(--surface); color: var(--text); }
.portal-theme-dark .login-card h1, .portal-theme-dark .login-notice-card h1, .portal-theme-dark .login-card strong, .portal-theme-dark .login-notice-card strong { color: var(--text); }
.portal-theme-dark .login-card .hint, .portal-theme-dark .login-notice-card .hint, .portal-theme-dark .login-footnote { color: var(--muted); }
body.portal-theme-dark { --nav: #0e171e; --nav-active: #15303a; --nav-hover: #1a2731; --nav-text: #e2e9ee; --nav-label: #9aabb6; --nav-border: #22323d; --canvas: #0b1218; --surface: #121c24; --surface-subtle: #16222b; --text: #e2e9ee; --muted: #9aabb6; --border: #22323d; --border-strong: #5b7080; --action: #3dbac2; --action-hover: #66cdd3; --brand-signal: #3dbac2; --success: #6bd49a; --success-bg: #10291d; --warning: #f2b55b; --warning-bg: #2d210e; --danger: #ff8c80; --danger-bg: #34160f; --info: #86b9ec; --info-bg: #122538; --on-action: #04262a; --on-danger: #2a0d08; --focus: #5fd0d7; color-scheme: dark; }
body.app-page.portal-theme-dark > .top { background: var(--surface); }
body.app-page.portal-theme-dark .card, body.app-page.portal-theme-dark .modal-panel, body.app-page.portal-theme-dark .profile-section, body.app-page.portal-theme-dark .ldap-section { box-shadow: none; }
body.app-page.portal-theme-dark table, body.app-page.portal-theme-dark th, body.app-page.portal-theme-dark td, body.app-page.portal-theme-dark input, body.app-page.portal-theme-dark select, body.app-page.portal-theme-dark textarea, body.app-page.portal-theme-dark button, body.app-page.portal-theme-dark .dropdown-menu { border-color: var(--border); }
body.app-page.portal-theme-dark th { background: var(--surface-subtle); color: var(--muted); }
body.app-page.portal-theme-dark input, body.app-page.portal-theme-dark select, body.app-page.portal-theme-dark textarea, body.app-page.portal-theme-dark .dropdown-menu { background: var(--surface); color: var(--text); }
body.app-page.portal-theme-dark .secondary, body.app-page.portal-theme-dark .btn.secondary, body.app-page.portal-theme-dark .top-session-form .top-logout { background: var(--surface-subtle); color: var(--text); }
body.app-page.portal-theme-dark .dashboard-tab:hover, body.app-page.portal-theme-dark .settings-tab:hover, body.app-page.portal-theme-dark .account-detail-tab:hover, body.app-page.portal-theme-dark .nav:hover { background: var(--nav-hover); }
body.app-page.portal-theme-dark .settings-portal-toggle:hover, body.app-page.portal-theme-dark .settings-checks label:hover, body.app-page.portal-theme-dark .settings-switch:hover { background: var(--nav-hover) !important; }
body.app-page.portal-theme-dark .state-neutral, body.app-page.portal-theme-dark .state-disabled, body.app-page.portal-theme-dark .profile-disabled { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--muted); }
body.app-page.portal-theme-dark .protocol-rdp, body.app-page.portal-theme-dark .protocol-ssh, body.app-page.portal-theme-dark .protocol-unknown, body.app-page.portal-theme-dark .account-protocol, body.app-page.portal-theme-dark .identity-role, body.app-page.portal-theme-dark .user-avatar { border-color: var(--border); background: var(--surface-subtle); color: var(--text); }
body.app-page.portal-theme-dark .account-kind-domain, body.app-page.portal-theme-dark .identity-source-ldap { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--action-hover); }
body.app-page.portal-theme-dark .identity-source-mark { background: var(--surface-subtle); color: var(--text); }
body.app-page.portal-theme-dark .system-health-note { background: var(--surface-subtle); color: var(--muted); }
body.app-page.portal-theme-dark .system-health-service-icon { border-color: var(--border); background: var(--surface-subtle); color: var(--action-hover); }
body.app-page.portal-theme-dark .system-health-service-icon.tone-warning { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
body.app-page.portal-theme-dark .system-health-service-icon.tone-danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
body.app-page.portal-theme-dark .system-health-service-icon.tone-neutral { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); }
.login-mark[style] { background-size: contain; background-repeat: no-repeat; background-position: center; }
.login-legal, .login-support, .login-version { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.login-support a { color: var(--action); }
.settings-shell[data-settings-section="sessions"] .settings-sessions-card { display: block; }
.settings-shell[data-settings-section="sessions"] .settings-revocation-card { display: block; }
.settings-authentication-section { margin: 20px 0; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--action); background: var(--surface-subtle); }
.settings-authentication-section h3 { margin: 0 0 6px; }
.settings-auth-methods { display: grid; gap: 9px; margin-top: 14px; }
.settings-auth-option { display: flex; align-items: center; gap: 11px; min-height: 54px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); cursor: pointer; }
.settings-auth-option:hover { border-color: var(--brand-signal); background: var(--surface-subtle); }
.settings-auth-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--action); }
.settings-auth-option span { display: grid; gap: 2px; }
.settings-auth-option strong { color: var(--text); font-size: 12px; }
.settings-auth-option small { color: var(--muted); font-size: 11px; }
.settings-auth-option input:disabled + span { opacity: .58; }
.settings-auth-default { display: grid; gap: 6px; margin-top: 14px; }
.settings-auth-default select { margin-top: 0; }
.settings-authentication-options { display: grid; gap: 9px; margin-top: 16px; }
.settings-authentication-options > label { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
.settings-authentication-options > label:hover { border-color: var(--brand-signal); background: var(--surface-subtle); }
.settings-authentication-options > label input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--action); }
.settings-authentication-options > .settings-auth-default { display: grid; align-items: initial; gap: 6px; }
.settings-hardening-section { margin-top: 20px; padding: 18px 16px; border: 1px solid var(--border); border-left: 3px solid var(--action); border-radius: var(--radius-small); background: var(--surface-subtle); }
.settings-hardening-section h3 { margin: 0 0 6px; }
.settings-hardening-section .settings-checks { margin: 16px 0; }
.settings-hardening-section .settings-grid { margin-top: 14px; }
.settings-hardening-section .settings-portal-field { margin-top: 16px; }
.settings-hardening-section textarea { min-height: 78px; resize: vertical; }
.settings-hardening-warning { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--warning); background: var(--warning-bg); }
.login-provider-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 18px; }
.login-provider { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); text-align: left; box-shadow: none; }
.login-provider:hover, .login-provider.is-active { border-color: var(--brand-signal); background: #eaf7f5; color: var(--text); box-shadow: inset 0 0 0 1px var(--brand-signal); }
.login-provider-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border: 1px solid #a9e5da; border-radius: 10px; background: #eefaf8; color: var(--action); font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.login-provider-ldap-icon { border-color: #c8dbe5; background: #f0f5f7; color: var(--text); }
.login-provider span:last-child { display: grid; gap: 2px; min-width: 0; }
.login-provider strong { font-size: 12px; }
.login-provider small { color: var(--muted); font-size: 10px; }
.settings-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.d-block { display: block !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.align-middle { vertical-align: middle !important; }
.btn-sm { padding: 7px 10px !important; font-size: 12px !important; }
.bg-light { background: var(--surface-subtle) !important; }

@media (max-width: 1100px) {
  .dashboard-columns, .dashboard-todo-layout { grid-template-columns: 1fr; }
  .system-health-topology { grid-template-columns: 1fr; gap: 17px; }
  .account-detail-panel { width: min(620px, 100%); }
}
@media (max-width: 850px) {
  .system-health-grid { grid-template-columns: 1fr; }
  .mobile-nav-toggle { display: block; }
  body.app-page > .side { width: var(--sidebar-width) !important; transform: translateX(-105%); transition: transform .18s ease; }
  body.app-page > .top, body.app-page > .content { margin-left: 0 !important; }
  body.app-page > .top { padding: 0 14px 0 96px; }
  body.app-page > .content { padding: 22px 16px 36px; }
  .app-page.nav-open .side { transform: translateX(0); }
  .app-page.nav-open .side .brand { margin-top: 44px; }
  .app-page.nav-open::after { z-index: 90; background: rgba(13, 34, 51, .5); }
  .app-page.nav-open .mobile-nav-toggle { z-index: 110; }
  .user-context > a > span:last-child { display: none; }
  .top-perimeter { flex-basis: 140px; margin-left: auto; padding-left: 7px; }
  .top-perimeter strong { max-width: 130px; font-size: 10px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-health-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-health-redundancy-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-health-redundancy-facts > div:nth-child(3n) { border-right: 1px solid var(--border); }
  .system-health-redundancy-facts > div:nth-child(2n) { border-right: 0; }
  .system-health-redundancy-facts > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
  .system-health-redundancy-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
  .system-health-heading, .system-health-card-heading { display: block; }
  .system-health-actions { justify-content: flex-start; margin-top: 12px; }
  .system-health-legend { display: flex; margin-top: 14px; white-space: normal; }
  .system-health-topology-flow { justify-content: space-between; }
  .system-health-topology-node { min-width: 65px; }
  .system-health-topology-link { margin: 0 4px; }
  body.app-page .identity-metrics, body.app-page .identity-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-filters { grid-template-columns: 1fr; gap: 9px; }
  .accounts-directory-layout:has(> .account-detail-panel) { grid-template-columns: 1fr; }
  body.app-page .accounts-directory-layout > .account-detail-panel { position: relative; top: auto; height: auto; max-height: none; }
  .account-edit-fields { grid-template-columns: 1fr; }
  .filter-actions > *, .toolbar > *, .actions > * { flex: 1 1 auto; }
  .profile-grid { grid-template-columns: 1fr; }
  .connector-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connector-action-row input[name="target_value"], .connector-action-row input[name="payload_value"] { grid-column: span 2; }
  .connector-remove-action { justify-self: end; }
  .connector-actions-heading { align-items: flex-start; flex-direction: column; }
  .profiles-table { min-width: 1100px; }
  .grid { grid-template-columns: 1fr; }
  .settings-portal-card, .settings-policy-card { display: block; width: 100%; margin-right: 0; }
}
@media (max-width: 620px) {
  .system-health-redundancy-heading { flex-direction: column; }
  .system-health-redundancy-facts { grid-template-columns: 1fr; }
  .system-health-redundancy-facts > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--border); }
  .system-health-redundancy-facts > div:last-child { border-bottom: 0; }
  .system-health-service-details { margin-left: 0; }
  .system-health-service-details dl { grid-template-columns: 1fr; }
  .system-health-topology { padding: 18px; }
  .system-health-topology-flow { align-items: stretch; flex-direction: column; gap: 10px; }
  .system-health-topology-node { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 11px; min-width: 0; text-align: left; }
  .system-health-topology-node > span { grid-row: 1 / span 2; width: 42px; height: 42px; }
  .system-health-topology-link { width: 1px; height: 14px; margin: 0 0 0 20px; }
  .system-health-topology-link::after { top: auto; right: auto; bottom: -3px; left: -3px; border-top: 0; border-right: 1px solid #8bd4d5; border-bottom: 1px solid #8bd4d5; transform: rotate(45deg); }
  body.app-page .account-detail-header, body.app-page .account-detail-content { padding-left: 20px; padding-right: 20px; }
  body.app-page .account-detail-tabs { padding: 0 10px; }
  body.app-page .account-detail-tab { padding-left: 7px; padding-right: 7px; font-size: 11px; }
  body.app-page .account-detail-metrics { grid-template-columns: 1fr; }
  .permission-row { display: block; }
  .permission-chips { justify-content: flex-start; margin-top: 10px; }
  body.app-page .account-detail-footer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .notification-bar { align-items: flex-start; flex-direction: column; }
  .notification-list li { grid-template-columns: 1fr; gap: 3px; }
  .notification-list li time { font-size: 11px; }
  .breadcrumb span:first-child, .breadcrumb span[aria-hidden="true"] { display: none; }
  .top-session-form .top-logout { font-size: 11px; }
  .card { padding: 16px; }
  h1 { font-size: 25px; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  body.app-page .identity-metrics, body.app-page .identity-columns { grid-template-columns: 1fr; }
  body.app-page .users-management-page, body.app-page .groups-management-page, body.app-page .account-creation-page, body.app-page .account-edit-page { padding: 16px !important; }
  body.app-page .users-management-heading, body.app-page .groups-management-heading, .account-edit-header { display: block; }
  body.app-page .identity-search { display: block; }
  body.app-page .identity-search button, body.app-page .identity-search .btn { width: 100%; margin-top: 10px; }
  .dashboard-heading, .account-creation-header, .recording-header { display: block; }
  .page-heading, .card-heading { display: block; }
  .scope { display: none; }
  .dashboard-heading-actions, .recording-header .btn { margin-top: 12px; }
  .modal { padding: 12px; }
  .modal-panel { padding: 18px; }
  .modal-grid, .permission-grid, .settings-grid { grid-template-columns: 1fr; }
  .recording-storage-panel { grid-template-columns: 1fr; gap: 14px; }
  .recording-storage-chart { margin: 0 auto; }
  .recording-storage-legend { grid-template-columns: 1fr; }
  .permission-item { margin: 8px 0; }
  .profile-search { width: 100%; margin: 0 0 14px; }
  .profile-approval-row { align-items: flex-start; flex-direction: column; }
  .profile-approver-details { width: 100%; }
  .profile-approver-panel { min-width: 0; }
  .profile-approval-actions { display: block; }
  .recording-controls { flex-wrap: wrap; }
  .recording-controls input[type="range"] { flex-basis: 100%; order: 3; }
  body.public-page { background: var(--canvas); }
  .public-content { padding: 16px; }
  .login-card, .login-notice-card, .mfa-gate > .card { padding: 25px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  body.app-page > .side, body.app-page > .top, .mobile-nav-toggle, .skip-link { display: none !important; }
  body.app-page > .content { margin: 0 !important; padding: 0; }
  .card { break-inside: avoid; }
}
/* Access request states: shared visual language for Dual Control. */
.request-status{display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:5px 10px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:800;line-height:1}
.request-status.pending{background:#fff4d8;color:#9a6500;border-color:#f2cf78}
.request-status.approved{background:#e3f8f3;color:#087f73;border-color:#a9e5da}
.request-status.denied{background:#fff0ef;color:#b42318;border-color:#efb6b0}
.request-status.inactive{background:#edf1f3;color:#657985;border-color:#cbd8de}
.request-status.unknown{background:#f2f5f6;color:#647784;border-color:#d8e1e5}

/* Remote-session actions: keep monitoring and revocation distinct. */
.session-monitor-button{white-space:nowrap}
.reports-page{max-width:1500px;margin:0 auto;padding:12px 0 40px}.report-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.report-tabs{display:flex;gap:0;margin:22px 0 20px;overflow-x:auto;border-bottom:1px solid var(--border)}.report-tab{min-height:42px;padding:10px 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-weight:600;text-decoration:none;white-space:nowrap}.report-tab:hover{background:#edf2f4;color:var(--text)}.report-tab.is-active{border-bottom-color:var(--action);background:transparent;color:var(--action)}.report-tab-panel{min-width:0}.report-filters{margin:22px 0}.report-filters form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}.report-filters label{min-width:180px}.report-filters .btn{height:42px}.report-filters .hint{margin:10px 0 0}.report-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.report-metrics-secondary{margin-top:0}.report-metrics .card{padding:18px}.report-metrics span,.report-metrics small{display:block;color:var(--muted);font-size:12px}.report-metrics strong{display:block;color:var(--action);font-size:28px;margin:8px 0}.report-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.report-chart{min-height:280px}.report-chart h2{margin:0 0 5px}.report-pie-layout{display:flex;align-items:center;gap:24px;margin-top:22px}.report-pie{width:150px;height:150px;flex:0 0 150px;border-radius:50%;display:grid;place-items:center}.report-pie>span{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:var(--surface);color:var(--action);font-size:20px;font-weight:800}.report-pie small{display:block;color:var(--muted);font-size:10px;font-weight:600}.report-legend{list-style:none;padding:0;margin:0;display:grid;gap:10px;width:100%}.report-legend li{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:7px;font-size:12px}.report-legend-dot{width:9px;height:9px;border-radius:50%}.report-legend strong{color:var(--action)}.report-bars{display:grid;gap:16px;margin-top:25px}.report-bar-row>div:first-child{display:flex;justify-content:space-between;gap:14px;font-size:13px}.report-bar-row strong{color:var(--action)}.report-bar-track{height:9px;margin-top:7px;background:#e8eef1;border-radius:8px;overflow:hidden}.report-bar-track i{display:block;height:100%;background:var(--teal,#007d86);border-radius:8px}.report-table{overflow:hidden}.report-table .table-responsive{overflow:auto}
.report-scheduling{margin-top:16px;overflow:hidden}.report-scheduling .card-heading{padding:18px;border-bottom:1px solid var(--border)}.report-schedule-form{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:12px;align-items:end;padding:18px;border-bottom:1px solid var(--border)}.report-schedule-form label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.report-scheduling table{margin:0}.report-scheduling h3{margin:22px 18px 10px;color:var(--action)}.report-scheduling .btn{white-space:nowrap}.report-scheduling small{display:block;color:var(--muted);margin-top:4px}
.report-actions{display:flex;gap:18px;align-items:stretch;justify-content:flex-end;flex-wrap:wrap}.report-action-group{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:1px solid var(--border)}.report-action-group:first-child{padding-left:0;border-left:0}.report-action-label{font-size:12px;line-height:1;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:700}.report-action-items{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.report-action-primary{background:var(--action);color:#fff;border-color:var(--action)}.report-action-primary:hover{background:#006b72;border-color:#006b72;color:#fff}.report-action-compliance{border-color:#b8d4c5;color:#17633f;background:#f4faf6}.report-action-compliance:hover{background:#e7f4eb;color:#145a39}.report-action-view{min-width:145px}
@media print{.reports-page{max-width:none}.report-actions,.report-filters{display:none!important}.report-metrics{grid-template-columns:repeat(5,1fr)}.report-chart-grid{grid-template-columns:repeat(3,1fr)}.report-table{margin-top:16px}.report-table tbody tr:nth-child(n+31){display:none}.card{box-shadow:none}}
@media(max-width:1100px){.report-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.report-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.report-chart-grid{grid-template-columns:1fr}.report-pie-layout{align-items:flex-start;flex-direction:column}.report-schedule-form{grid-template-columns:1fr}}

/* LDAP setup wizard: mirror the guided account-creation flow. */
.ldap-wizard-page{max-width:1220px}.ldap-heading-actions{display:flex;align-items:flex-start;gap:14px}.ldap-heading-actions .btn{white-space:nowrap}.ldap-wizard-form{padding-top:0}.ldap-wizard-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:24px 0 28px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-small);background:var(--border)}.ldap-wizard-step-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 14px;border:0;border-radius:0;background:var(--surface-subtle);color:var(--muted);font:inherit;font-size:12px;font-weight:600}.ldap-wizard-step-button:hover{background:#edf2f4;color:var(--text)}.ldap-wizard-step-button span{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:11px}.ldap-wizard-step-button.is-active{background:#eef7f7;color:var(--action)}.ldap-wizard-step-button.is-complete{background:#f4faf8;color:#147a4d}.ldap-wizard-step{min-width:0;margin:0;padding:0;border:0}.ldap-wizard-step[hidden]{display:none}.ldap-wizard-step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.ldap-wizard-step-heading h2{margin:0 0 6px}.ldap-wizard-callout{margin:20px 0}.ldap-wizard-summary{display:flex;flex-direction:column;gap:5px;margin-top:20px;padding:14px 16px;border:1px solid var(--border);border-left:3px solid var(--action);background:var(--surface-subtle)}.ldap-wizard-summary strong{font-size:12px}.ldap-wizard-summary span{color:var(--muted);font-size:12px;line-height:1.5}.ldap-wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}.ldap-wizard-navigation{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.ldap-wizard-navigation [hidden]{display:none}.ldap-wizard-navigation .btn{white-space:nowrap}
@media(max-width:700px){.ldap-heading-actions{align-items:flex-end;flex-direction:column}.ldap-wizard-progress{grid-template-columns:1fr}.ldap-wizard-step-button{justify-content:flex-start}.ldap-wizard-step-heading{flex-direction:column}.ldap-wizard-actions{align-items:stretch;flex-direction:column}.ldap-wizard-navigation{justify-content:stretch}.ldap-wizard-navigation .btn{flex:1}}
.ldap-directory-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:24px 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--border)}.ldap-directory-summary>div{display:flex;flex-direction:column;gap:6px;min-height:76px;padding:15px;background:var(--surface)}.ldap-directory-summary span{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.ldap-directory-summary strong{color:var(--action);font-size:22px}.ldap-directory-summary small{color:var(--muted);font-size:11px}.ldap-domain-list{display:grid;gap:12px}.ldap-domain-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}.ldap-domain-card:hover{border-color:#9dcfd0;box-shadow:0 5px 16px rgba(8,38,55,.06)}.ldap-domain-main{display:flex;align-items:center;gap:14px;min-width:0}.ldap-domain-main h2{margin:0 0 5px;font-size:16px}.ldap-domain-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid #a9ded9;border-radius:12px;background:#e9f8f7;color:var(--action);font-size:9px;font-weight:800;letter-spacing:.7px}.ldap-domain-meta{margin:6px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ldap-domain-state{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:150px}.ldap-domain-state small{color:var(--muted);font-size:11px}.ldap-domain-actions{display:flex;justify-content:flex-end}.ldap-directory-empty{display:flex;align-items:center;gap:16px;padding:32px;border:1px dashed #a9c9cf;border-radius:var(--radius);background:var(--surface-subtle)}.ldap-directory-empty h2{margin:0 0 6px}.ldap-directory-empty p{margin:0 0 15px;color:var(--muted);font-size:12px}
@media(max-width:800px){.ldap-directory-summary{grid-template-columns:1fr}.ldap-domain-card{grid-template-columns:1fr;gap:14px}.ldap-domain-state{min-width:0}.ldap-domain-actions{justify-content:flex-start}}

.ldap-leave-dialog .modal-panel{max-width:520px}.ldap-leave-dialog h2{margin:4px 0 8px}.ldap-leave-dialog .hint{max-width:430px;line-height:1.55}.ldap-leave-dialog .modal-actions{margin-top:22px}.ldap-wizard-test{white-space:nowrap}.ldap-wizard-navigation .btn:disabled{cursor:not-allowed;opacity:.55}
.settings-session-form { display: grid; gap: 18px; margin-top: 22px; }
.settings-session-section { padding: 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-small); background: var(--surface-subtle); }
.settings-session-section h3 { margin: 3px 0 14px; }
.settings-session-section + .settings-session-section { margin-top: 0; }
.settings-session-form .settings-checks { margin-top: 14px; }
.settings-shell:not([data-settings-section='sessions']) .settings-session-form { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Access requests: sections and decision dialog */
.request-sections { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; border-bottom: 1px solid var(--border); }
.request-sections a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; }
.request-sections a:hover { color: var(--action); border-bottom-color: var(--action); }
.request-sections .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-subtle); color: var(--muted); font-size: 11.5px; }
.request-facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 14px; margin: 14px 0; padding: 12px 14px; border-radius: var(--radius-small); background: var(--surface-subtle); }
.request-facts dt { color: var(--muted); font-size: 12.5px; }
.request-facts dd { margin: 0; overflow-wrap: anywhere; }
.request-consequences { margin: 6px 0 16px; padding-left: 18px; font-size: 13px; }
.request-consequences li { margin: 3px 0; }
.request-list table { min-width: 980px; }
.request-list td:first-child strong { white-space: nowrap; }
.accounts-page .account-name { white-space: nowrap; }
.accounts-page .table-responsive table { min-width: 940px; }
.account-access-state .tag { margin-bottom: 3px; }
.account-access-state small { display: block; max-width: 230px; }
/* Account detail: effective access, chain and permitted actions */
.account-access-block { display: grid; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.account-access-block h3 { margin: 10px 0 2px; font-size: 13px; }
.account-access-note { margin: 0; color: var(--muted); font-size: 13px; }
.account-chain, .account-actions-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.account-chain li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 12px; }
.account-chain li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.account-chain strong, .account-chain span:not(.chain-dot) { display: block; }
.account-chain strong { font-size: 13px; }
.account-chain li span:not(.chain-dot) { color: var(--muted); font-size: 12.5px; }
.chain-dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); }
.chain-dot.ok { border-color: var(--success); background: var(--success); }
.account-actions-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 13px; }
.account-actions-list li.is-allowed > span { color: var(--success); }
.account-actions-list li.is-denied > span { color: var(--muted); }
.account-actions-list small { display: block; color: var(--muted); font-size: 12px; }
.monitoring-policy-notice strong { margin-right: 8px; }
.system-health-groups { display: grid; gap: 22px; margin-top: 14px; }
.system-health-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.system-health-group-heading h3 { margin: 0; font-size: 15px; }
.system-health-group-heading .tag { margin-left: auto; }
/* Mobile tab bar */
.mobile-tabbar { display: none; }
@media (max-width: 850px) {
  .mobile-tabbar { position: fixed; inset: auto 0 0 0; z-index: 105; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 4px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
  .mobile-tabbar .tab-item { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
  .mobile-tabbar .tab-item:hover { background: var(--surface-subtle); color: var(--text); }
  .mobile-tabbar .tab-item.is-current { color: var(--action); box-shadow: inset 0 2px 0 var(--action); }
  .app-page.nav-open .mobile-tabbar { visibility: hidden; }
  body.app-page > .content { padding-bottom: 88px; }
}
/* My account: factors first, password second, preferences aside */
@media (min-width: 1101px) {
  body.app-page[data-view="profile"] > .content { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); column-gap: 20px; align-content: start; }
  body.app-page[data-view="profile"] > .content > * { grid-column: 1; margin-top: 0; }
  body.app-page[data-view="profile"] > .content > :not(.card) { grid-column: 1 / -1; order: -1; }
  body.app-page[data-view="profile"] > .content > .card:nth-of-type(2) { order: 1; }
  body.app-page[data-view="profile"] > .content > .webauthn-card { order: 2; }
  body.app-page[data-view="profile"] > .content > .card:nth-of-type(1) { order: 3; }
  body.app-page[data-view="profile"] > .content > .language-preferences-card { order: 1; grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
.mfa-coverage-figure { font-size: 26px; font-weight: 600; }
.coverage-bar { height: 8px; margin: 8px 0; border-radius: 4px; background: var(--surface-subtle); overflow: hidden; }
.coverage-bar > i { display: block; height: 100%; background: var(--success); }
.mfa-uncovered { margin: 4px 0 10px; padding-left: 18px; }
/* Icons */
.nav { gap: 10px; }
.nav-icon { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav.active .nav-icon { stroke-width: 2; }
.mobile-tabbar .tab-item { flex-direction: column; gap: 3px; }
.mobile-tabbar .nav-icon { width: 20px; height: 20px; }
/* Spacing, alignment, icons (feedback pass) */
.dashboard-tabs, .settings-tabs, .account-detail-tabs { margin-bottom: 22px; }
.dashboard-tab, .settings-tab { padding-top: 12px; padding-bottom: 12px; }
.dashboard-page > .dashboard-heading { margin-bottom: 18px; }
.badge-icon { flex: none; width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-alert-priority { align-self: flex-start; margin-bottom: 4px; }
.card form > button[type="submit"]:last-child, .card form > .form-actions { margin-top: 20px; }
.settings-shell form > button[type="submit"], .settings-policy-card form > button:last-of-type { margin-top: 22px; }
.card + .card, .card + form, form + .card { margin-top: 20px; }
/* Row actions stay on one line */
td .favorite-form, td .dropdown { display: inline-flex; vertical-align: middle; margin: 0; }
td .favorite-form + .dropdown, td .favorite-form + .launch { margin-left: 8px; }
/* Passkey registration: name and button side by side */
.webauthn-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; }
.webauthn-card > p, .webauthn-card > h2, .webauthn-card > .eyebrow, .webauthn-card > ul, .webauthn-card > div { grid-column: 1 / -1; }
.webauthn-card > label { grid-column: 1; margin-bottom: 0; }
.webauthn-card > button { grid-column: 2; align-self: end; }
.webauthn-card > .webauthn-status { margin-top: 10px; }
@media (max-width: 620px) { .webauthn-card { grid-template-columns: 1fr; } .webauthn-card > button { grid-column: 1; margin-top: 10px; } }
td .favorite-form, td .dropdown { align-items: center; height: 34px; }

/* Dark surfaces shared by public authentication and the application. */
body.public-page.portal-theme-dark .login-provider:hover,
body.public-page.portal-theme-dark .login-provider.is-active,
body.public-page.portal-theme-dark .login-provider-icon,
body.public-page.portal-theme-dark .notice-points b { border-color: var(--border-strong); background: var(--nav-active); color: var(--action); }
body.public-page.portal-theme-dark .login-provider-ldap-icon { color: var(--text); }
body.public-page.portal-theme-dark .login-error-message span { color: var(--muted); }
body.portal-theme-dark { --chart-1: #3dbac2; --chart-2: #86b9ec; --chart-3: #6bd49a; --chart-4: #f2b55b; --chart-5: #ff8c80; --chart-6: #9aabb6; }

body.app-page.portal-theme-dark input::placeholder,
body.app-page.portal-theme-dark textarea::placeholder { color: var(--muted); }
body.portal-theme-dark input:focus-visible,
body.portal-theme-dark select:focus-visible,
body.portal-theme-dark textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body.app-page.portal-theme-dark input:hover,
body.app-page.portal-theme-dark select:hover,
body.app-page.portal-theme-dark textarea:hover { border-color: var(--border-strong); }
body.app-page.portal-theme-dark label:has(> input[type="checkbox"]):hover,
body.app-page.portal-theme-dark label:has(> input[type="radio"]):hover { background: var(--nav-hover); }
body.app-page.portal-theme-dark tbody tr:hover,
body.app-page.portal-theme-dark .system-health-service:hover,
body.app-page.portal-theme-dark .system-health-service[open],
body.app-page.portal-theme-dark .dropdown-menu a:hover,
body.app-page.portal-theme-dark .dropdown-menu form button:hover,
body.app-page.portal-theme-dark .modal-close:hover,
body.app-page.portal-theme-dark .account-menu-button:hover,
body.app-page.portal-theme-dark .account-detail-close:hover,
body.app-page.portal-theme-dark .identity-tab:hover,
body.app-page.portal-theme-dark .profile-menu-button:hover,
body.app-page.portal-theme-dark .profile-tabs a:hover,
body.app-page.portal-theme-dark .report-tab:hover,
body.app-page.portal-theme-dark .ldap-wizard-step-button:hover { background: var(--nav-hover); color: var(--text); }
body.app-page.portal-theme-dark button.secondary:hover,
body.app-page.portal-theme-dark .secondary:hover,
body.app-page.portal-theme-dark .btn-outline-secondary:hover,
body.app-page.portal-theme-dark .filter-reset:hover,
body.app-page.portal-theme-dark .reset-filters:hover,
body.app-page.portal-theme-dark a[href*="reset"]:hover,
body.app-page.portal-theme-dark .settings-portal-toggle:hover,
body.app-page.portal-theme-dark .settings-checks label:hover,
body.app-page.portal-theme-dark .settings-switch:hover,
body.app-page.portal-theme-dark .recording-option:hover { background: var(--nav-hover) !important; color: var(--text) !important; }
body.app-page.portal-theme-dark .favorite-button:hover,
body.app-page.portal-theme-dark .favorite-button.is-favorite { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
body.app-page.portal-theme-dark .account-detail-callout,
body.app-page.portal-theme-dark .detail-counter,
body.app-page.portal-theme-dark .activity-status,
body.app-page.portal-theme-dark .permission-chip,
body.app-page.portal-theme-dark .profile-disabled { background: var(--surface-subtle); color: var(--muted); }
body.app-page.portal-theme-dark .permission-chip.allowed { border-color: var(--success); background: var(--success-bg); color: var(--success); }
body.app-page.portal-theme-dark .access-request-pending { background: var(--surface-subtle) !important; }
body.app-page.portal-theme-dark .wizard-progress span.is-active { background: var(--nav-active) !important; color: var(--action) !important; }
body.app-page.portal-theme-dark .profile-modal .web-profile-fields { border-color: var(--border); background: var(--surface-subtle); }
body.app-page.portal-theme-dark .profile-modal .web-profile-fields legend { color: var(--action); }
body.app-page.portal-theme-dark .recording-storage-dot.free,
body.app-page.portal-theme-dark .report-bar-track { background: var(--surface-subtle); }
body.app-page.portal-theme-dark .report-bar-track i { background: var(--chart-1); }
body.app-page.portal-theme-dark .recording-storage-chart { background: conic-gradient(var(--action) 0 var(--recording-used), var(--surface-subtle) var(--recording-used) 100%); box-shadow: inset 0 0 0 1px var(--border); }
body.app-page.portal-theme-dark .recording-security-warning { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
body.app-page.portal-theme-dark .system-health-service-meter { background: var(--surface-subtle); }
body.app-page.portal-theme-dark .report-action-primary,
body.app-page.portal-theme-dark .report-action-primary:hover { border-color: var(--action); background: var(--action); color: var(--on-action); }
body.app-page.portal-theme-dark .report-action-primary:hover { border-color: var(--action-hover); background: var(--action-hover); }
body.app-page.portal-theme-dark .report-action-compliance,
body.app-page.portal-theme-dark .report-action-compliance:hover { border-color: var(--success) !important; background: var(--success-bg) !important; color: var(--success) !important; }
body.app-page.portal-theme-dark .request-status.pending { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
body.app-page.portal-theme-dark .request-status.approved { border-color: var(--success); background: var(--success-bg); color: var(--success); }
body.app-page.portal-theme-dark .request-status.denied { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
body.app-page.portal-theme-dark .request-status.inactive,
body.app-page.portal-theme-dark .request-status.unknown { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--muted); }

/* LDAP screens include their own cards, wizard and result states. */
body.app-page.portal-theme-dark .ldap-heading-mark,
body.app-page.portal-theme-dark .ldap-domain-icon,
body.app-page.portal-theme-dark .ldap-empty-icon { border-color: var(--border-strong); background: var(--nav-active); color: var(--action); }
body.app-page.portal-theme-dark .ldap-security-note,
body.app-page.portal-theme-dark .ldap-ca-toggle { border-color: var(--action); background: var(--surface-subtle); color: var(--text); }
body.app-page.portal-theme-dark .ldap-badge,
body.app-page.portal-theme-dark .ldap-status,
body.app-page.portal-theme-dark .ldap-result { border-color: var(--success); background: var(--success-bg); color: var(--success); }
body.app-page.portal-theme-dark .ldap-status.neutral { border-color: var(--border-strong); background: var(--surface-subtle); color: var(--muted); }
body.app-page.portal-theme-dark .ldap-status.danger,
body.app-page.portal-theme-dark .ldap-result-danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
body.app-page.portal-theme-dark .ldap-result-success strong { color: var(--success); }
body.app-page.portal-theme-dark .ldap-result-danger strong { color: var(--danger); }
body.app-page.portal-theme-dark .ldap-wizard-step-button.is-active { background: var(--nav-active); color: var(--action); }
body.app-page.portal-theme-dark .ldap-wizard-step-button.is-complete { background: var(--success-bg); color: var(--success); }
body.app-page.portal-theme-dark .ldap-directory-empty { border-color: var(--border-strong); }
body.app-page.portal-theme-dark .ldap-domain-card:hover { border-color: var(--action); }
/* Role-based home */
.dashboard-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.dashboard-two-columns > .card { margin: 0; }
.home-list { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.home-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.home-list li:last-child { border-bottom: 0; }
.home-list li > div:last-child { text-align: right; }
.home-list small { display: block; }
.home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; }
.home-shortcut { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.home-shortcut:hover { border-color: var(--action); color: var(--text); }
.home-shortcut strong, .home-shortcut small { display: block; }
.home-shortcut small { color: var(--muted); }
.home-shortcut-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-small); background: var(--sel, var(--surface-subtle)); color: var(--action); }
.home-shortcut-icon .badge-icon { width: 20px; height: 20px; margin: 0; }
@media (max-width: 850px) { .dashboard-two-columns { grid-template-columns: 1fr; } }

body.app-page .users-management-page .identity-list-card, body.app-page .groups-management-page .identity-list-card { margin: 16px 0 0; padding: 0; border: 0; box-shadow: none; background: transparent; }

body.app-page .identity-switch { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; background: var(--surface-2, #eef2f4); border: 1px solid var(--border); border-radius: 10px; }
body.app-page .identity-switch-tab { padding: 8px 16px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.app-page .identity-switch-tab:hover { color: var(--text); }
body.app-page .identity-switch-tab.is-active { background: var(--surface, #fff); color: var(--action); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
body.app-page .identity-switch-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }


body.app-page .policy-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
body.app-page .policy-summary-item { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); }
body.app-page .policy-summary-item span { color: var(--muted); font-size: 12px; font-weight: 600; }
body.app-page .policy-summary-item strong { font-size: 24px; line-height: 1.2; }
body.app-page .policy-summary-item small { color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { body.app-page .policy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

body.app-page .accounts-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }

body.app-page .account-detail-tab { padding: 10px 9px; font-size: 13px; white-space: nowrap; }
body.app-page .account-detail-tabs { padding: 0 12px; scrollbar-width: thin; }
body.app-page .account-detail-content .table-responsive { overflow-x: auto; }
body.app-page .account-detail-panel:not(.vault-detail-panel) .account-detail-tabs { flex-wrap: wrap; overflow-x: visible; }

/* Loading skeleton */
body.app-page.is-loading #main-content { position: relative; min-height: 60vh; pointer-events: none; }
body.app-page.is-loading #main-content > * { visibility: hidden; }
body.app-page.is-loading #main-content::before {
  content: ""; position: absolute; inset: 28px 28px auto 28px; height: 340px; border-radius: 12px;
  background:
    linear-gradient(var(--skeleton, #dbe3e8), var(--skeleton, #dbe3e8)) 0 0 / 220px 26px no-repeat,
    linear-gradient(var(--skeleton, #dbe3e8), var(--skeleton, #dbe3e8)) 0 44px / 55% 14px no-repeat,
    linear-gradient(var(--skeleton, #dbe3e8), var(--skeleton, #dbe3e8)) 0 96px / 100% 64px no-repeat,
    linear-gradient(var(--skeleton, #dbe3e8), var(--skeleton, #dbe3e8)) 0 176px / 100% 64px no-repeat,
    linear-gradient(var(--skeleton, #dbe3e8), var(--skeleton, #dbe3e8)) 0 256px / 100% 64px no-repeat;
  animation: pam-skeleton 1.2s ease-in-out infinite;
}
body.portal-theme-dark { --skeleton: #1c2a34; }
@keyframes pam-skeleton { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.app-page.is-loading #main-content::before { animation: none; } }

@media (max-width: 640px) {
  body.app-page table.is-cardable { display: block; width: 100%; min-width: 0; border: 0; }
  body.app-page table.is-cardable tbody, body.app-page table.is-cardable tr { width: 100%; min-width: 0; box-sizing: border-box; }
  body.app-page table.is-cardable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.app-page table.is-cardable tbody { display: grid; gap: 12px; }
  body.app-page table.is-cardable tr { display: grid; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
  body.app-page table.is-cardable td { display: grid; grid-template-columns: minmax(88px, 38%) 1fr; gap: 10px; align-items: start; padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  body.app-page table.is-cardable td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; }
  body.app-page table.is-cardable td:not([data-label]) { grid-template-columns: 1fr; }
  body.app-page table.is-cardable td:last-child[data-label] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  body.app-page table.is-cardable td:last-child[data-label]::before { flex: 0 0 100%; }
  body.app-page table.is-cardable td:last-child .launch, body.app-page table.is-cardable td:last-child button.launch { white-space: nowrap; }
  body.app-page table.is-cardable tr.is-empty-row { display: block; }
  body.app-page table.is-cardable tr.is-head-row, body.app-page table.is-cardable td.is-empty-cell { display: none; }
  body.app-page .table-responsive { overflow-x: visible; }
}

/* ---- Design system surface (matches the approved design boards) ---- */
.ds { --line: var(--border); --line-strong: var(--border-strong); --raised: var(--surface-subtle); --sunk: #e9eef1; --faint: #8a98a1; --sel: var(--nav-active); --ok: var(--success); --ok-bg: var(--success-bg); --warn: var(--warning); --warn-bg: var(--warning-bg); --action-soft: #e0eff0; --neutral: #46555f; --neutral-bg: #e9eef1; --scrim: rgba(15, 29, 40, .42); }
body.portal-theme-dark .ds { --sunk: #1a2731; --faint: #6f828e; --action-soft: #11323a; --neutral: #a8b6bf; --neutral-bg: #1a2731; --scrim: rgba(0, 0, 0, .6); }
.ds { display: flex; flex-direction: column; gap: 18px; font-size: 14px; line-height: 1.45; color: var(--text); }
.ds h1, .ds h2, .ds h3, .ds p, .ds dl, .ds dd { margin: 0; }
.ds .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -.01em; }
.ds .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds .hint { font-size: 12.5px; color: var(--muted); }
.ds .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 5px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds .btn-primary { background: var(--action); color: var(--on-action); }
.ds .btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.ds .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.ds .btn-secondary:hover { background: var(--sunk); color: var(--text); }
.ds .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.ds .btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.ds .btn-sm { min-height: 28px; padding: 0 9px; font-size: 12.5px; }
.ds .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; }
.ds .b-ok { color: var(--ok); background: var(--ok-bg); }
.ds .b-warn { color: var(--warn); background: var(--warn-bg); }
.ds .b-danger { color: var(--danger); background: var(--danger-bg); }
.ds .b-neutral { color: var(--neutral); background: var(--neutral-bg); }
.ds .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; color: var(--muted); background: var(--surface); white-space: nowrap; line-height: 1; }
.ds .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--sunk); color: var(--muted); }
.ds .count-warn { background: var(--warn-bg); color: var(--warn); }
.ds .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.ds .input { min-height: 36px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; font-size: 13.5px; }
.ds .input::placeholder { color: var(--muted); }
.ds .bar { height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; display: block; }
.ds .bar > i { display: block; height: 100%; border-radius: 2px; background: var(--ok); }
.ds .trow { display: grid; align-items: center; border-bottom: 1px solid var(--line); }
.ds .trow:hover { background: var(--raised); }
.ds .th { font-size: 12px; font-weight: 600; color: var(--muted); }
.ds-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.ds-heading-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 420px; }
.ds-heading h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.ds-heading .lead { color: var(--muted); }
.ds-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds .inline-action { display: inline-flex; margin: 0; }
.ds .stat-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); overflow: hidden; gap: 0; margin: 0; background: var(--surface); }
.ds .stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--line); min-height: 0; background: transparent; }
.ds .stat:last-child { border-right: 0; }
.ds .stat strong { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.45; }
.ds .stat strong.is-warn { color: var(--warn); }
.ds .panel-head { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; align-items: center; border-bottom: 1px solid var(--line); }
.ds .panel-head h2 { font-size: 16px; font-weight: 600; flex: 1 1 200px; }
.ds .panel-head:has(> #monitor-title) { gap: 10px; }
.ds .chip-value { display: inline-block; }
.ds .panel-head-filters { align-items: flex-end; }
.ds .panel-head-filters h2 { font-size: 18px; align-self: center; }
.ds .filter-field { display: flex; flex-direction: column; gap: 5px; flex: 0 1 180px; font-size: 12.5px; font-weight: 600; }
.ds .filter-field.filter-search { flex-basis: 240px; }
.ds .table-scroll { overflow-x: auto; }
.ds .session-table { min-width: 1060px; }
.ds .session-table .trow { grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1.25fr) 180px 190px 220px; gap: 12px; padding: 10px 16px; min-height: 66px; }
.ds .session-table .trow.thead { padding-top: 0; padding-bottom: 0; min-height: 38px; }
.ds .session-table .trow.thead:hover { background: transparent; }
.ds .th-right { text-align: right; }
.ds .cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .time-cell { gap: 5px; }
.ds .state-cell { gap: 4px; align-items: flex-start; }
.ds .cell-stack .strong { font-weight: 600; }
.ds .wrap-any { overflow-wrap: anywhere; }
.ds .transport-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ds .cell-stack:nth-child(3) { gap: 4px; }
.ds .remain { font-size: 12.5px; color: var(--muted); }
.ds .remain.is-expiring { color: var(--warn); font-weight: 600; }
.ds .row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ds .row-actions form { margin: 0; }
.ds .empty-row { display: block; padding: 18px 16px; }
.ds .panels-row, .panels-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.panels-row > .panel:first-child { flex: 3 1 520px; }
.panels-row > .panel:nth-child(2) { flex: 2 1 380px; }
.ds .panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ds .monitor-request { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ds .monitor-request-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 280px; }
.ds .monitor-request-text strong { font-weight: 600; }
.ds .monitor-request-text .quote { font-size: 13px; margin-top: 4px; }
.ds .monitor-request-actions { display: flex; gap: 8px; }
.ds .session-scope { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ds .session-scope h2 { font-size: 16px; font-weight: 600; }
.ds .session-scope dl { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ds .session-scope dt { font-weight: 600; }
.ds .session-scope dd { margin: 2px 0 0; }

/* ---- Application shell, design boards ---- */
body.app-page > .side { gap: 16px; padding: 16px 12px; background: var(--nav) !important; }
body.app-page .side .brand { gap: 10px; padding: 2px 6px; }
body.app-page .side .brand-logo { width: 28px; height: 28px; }
body.app-page .side .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body.app-page .side .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
body.app-page .side .instance-label { font-size: 11.5px; color: var(--nav-label); font-family: var(--font-mono); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .side-search { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
body.app-page .side-search .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.app-page .side-search .side-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .side-search:hover { background: var(--surface-subtle); }
body.app-page .kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted); background: var(--surface); }
body.app-page .primary-nav { display: flex; flex-direction: column; gap: 16px; }
body.app-page .nav-group { display: flex; flex-direction: column; gap: 2px; }
body.app-page .navlabel { padding: 0 10px 4px; color: var(--nav-label); font-size: 12px; font-weight: 600; }
body.app-page .side .nav { gap: 10px; min-height: 34px; margin: 0; padding: 0 10px; border-radius: 5px; font-size: 14px; font-weight: 500; color: var(--nav-text); }
body.app-page .side .nav .nav-label { flex: 1; min-width: 0; }
body.app-page .side .nav:hover { background: var(--nav-hover); }
body.app-page .side .nav.active { background: var(--nav-active); color: var(--action); font-weight: 600; }
body.app-page .side .nav .nav-icon { width: 16px; height: 16px; }
body.app-page .side .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--sunk, #e9eef1); color: var(--muted); }
body.app-page .side .count-warn { background: var(--warning-bg); color: var(--warning); }
body.app-page .nav-hint { margin: 0; padding: 0 10px; color: var(--nav-label); font-size: 12.5px; }
body.app-page .side-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; margin-top: auto; border-top: 1px solid var(--nav-border); }
body.app-page .side-session { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
body.app-page .side-session .hint { font-size: 12.5px; color: var(--muted); }
body.app-page .link-button { padding: 0; border: 0; background: transparent; color: var(--action); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
body.app-page .user-menu { position: relative; }
body.app-page .user-menu > summary { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 5px; cursor: pointer; list-style: none; color: var(--text); }
body.app-page .user-menu > summary::-webkit-details-marker { display: none; }
body.app-page .user-menu > summary:hover { background: var(--nav-hover); }
body.app-page .user-menu .user-avatar { width: 32px; height: 32px; border: 0; background: var(--action); color: var(--on-action); font-size: 13px; font-weight: 700; }
body.app-page .user-menu .user-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
body.app-page .user-menu .user-meta strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .user-menu .user-meta .hint { font-size: 12.5px; color: var(--muted); }
body.app-page .user-menu .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--muted); }
body.app-page .user-menu-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--overlay-shadow); z-index: 5; }
body.app-page .user-menu-list .top-session-form { margin: 0; }
body.app-page .user-menu-list .top-logout { width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
body.app-page .user-menu-list .top-logout:hover { background: var(--nav-hover); }
body.app-page > .top { height: auto; min-height: 56px; padding: 8px 28px; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
body.app-page .breadcrumb { gap: 6px; font-size: 13px; color: var(--muted); }
body.app-page .breadcrumb strong { color: var(--text); font-weight: 600; }
body.app-page .top-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.app-page .top-tools .chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; color: var(--muted); background: var(--surface); white-space: nowrap; line-height: 1; }
body.app-page .iconbtn { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--muted); text-decoration: none; }
body.app-page .iconbtn:hover { background: var(--nav-hover); color: var(--text); }
body.app-page .iconbtn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.app-page .bell-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--action); color: var(--on-action); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
body.app-page > .content { padding: 24px; }
.ds label { margin: 0; }
.ds .input { margin: 0; width: auto; padding: 0 10px; }
.ds .btn-sm .ico { width: 14px; height: 14px; }
body.app-page > .side, body.app-page > .top { line-height: 1.45; }
.ds .btn-sm { min-height: 28px; padding: 0 9px !important; font-size: 12.5px !important; }
.ds h2, .ds h3 { line-height: inherit; }
.ds h2, .ds h3 { letter-spacing: normal; }
.ds .mono.mono-lg { font-size: 13.5px; }

/* ---- Accounts and vaults directory (design board) ---- */
.ds .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds .iconbtn { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; padding: 0; }
.ds .iconbtn:hover { background: var(--sunk); color: var(--text); }
.ds .iconbtn.icon-sm { width: 30px; height: 30px; min-height: 30px; }
.ds .favorite-button.iconbtn { border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: inherit; }
.ds .favorite-button.iconbtn:hover { background: var(--sunk); color: var(--text); border-color: transparent; }
.ds .favorite-button.iconbtn.is-favorite { color: var(--action); background: transparent; border-color: transparent; }
.ds .favorite-button.iconbtn.is-favorite .ico { fill: currentColor; }
.ds .directory-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ds .vault-nav { flex: 1 1 216px; max-width: 100%; display: flex; flex-direction: column; gap: 2px; }
.ds .vault-nav-title { padding: 0 10px 6px; font-weight: 600; }
.ds .vault { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 5px; color: var(--text); text-decoration: none; }
.ds .vault:hover { background: var(--sunk); color: var(--text); }
.ds .vault[aria-current="true"] { background: var(--sel); }
.ds .vault-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ds .vault-row .mono { color: var(--muted); }
.ds .vault-nav-note { padding: 10px 10px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.ds .vault-manage { padding: 8px 10px 0; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--action); }
.ds .vault-manage:hover { color: var(--action-hover); text-decoration: underline; }
.ds .vault-panel { flex: 999 1 500px; }
.ds .vault-head { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.ds .vault-title { display: flex; flex-direction: column; gap: 2px; }
.ds .vault-title h2 { font-size: 18px; font-weight: 600; flex: none; }
.ds .vault-rights { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds .rights-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ds .chip-ok { color: var(--ok); border-color: var(--ok-bg); background: var(--ok-bg); }
.ds .chip-sm { min-height: 18px; font-size: 11px; }
.ds .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.ds .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 600; text-decoration: none; }
.ds .tab:hover { color: var(--text); }
.ds .tab[aria-selected="true"] { color: var(--action); border-bottom-color: var(--action); }
.ds .account-filters-ds { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; align-items: flex-end; margin: 0; }
.ds .filter-grow { flex: 1 1 220px; }
.ds .filter-state { flex: 0 1 200px; }
.ds .list-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 18px 8px; }
.ds .pager-links { display: inline-flex; align-items: center; gap: 4px; }
.ds .accounts-table { min-width: 480px; }
.ds .accounts-table .trow { grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1.2fr) 128px; min-height: 58px; padding: 8px 0; }
.ds .accounts-table .trow.thead { min-height: 36px; padding: 0; border-top: 1px solid var(--line); }
.ds .accounts-table .trow.thead:hover { background: transparent; }
.ds .accounts-table .th { display: flex; align-items: center; }
.ds .accounts-table .th-fav { padding-left: 12px; }
.ds .accounts-table .th-right { justify-content: flex-end; padding-right: 18px; }
.ds .account-row.is-selected, .ds .account-row.is-selected:hover { background: var(--sel); }
.ds .fav-cell { padding-left: 8px; }
.ds .fav-cell .favorite-form { margin: 0; display: inline-flex; }
.ds .acc-cell { min-width: 0; padding-right: 10px; }
.ds .rowlink { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; min-width: 0; text-decoration: none; }
.ds .rowlink:hover .host { text-decoration: underline; }
.ds .rowlink .host { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ds .acc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds .state-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.ds .action-cell { text-align: right; padding-right: 18px; }
.ds .action-cell .connect-form { display: inline-flex; margin: 0; }
.ds .account-detail-ds { flex: 1 1 372px; display: flex; flex-direction: column; }
.ds .detail-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ds .detail-head-row { display: flex; align-items: flex-start; gap: 8px; }
.ds .detail-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ds .detail-head h2 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; flex: none; }
.ds .strong-text { color: var(--text); }
.ds .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .detail-block { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.ds .detail-block:last-child { border-bottom: 0; }
.ds .detail-block h3 { font-size: 13px; font-weight: 600; }
.ds .detail-state .badge { align-self: flex-start; }
.ds .detail-title { font-size: 15px; font-weight: 600; }
.ds .detail-bar { display: flex; flex-direction: column; gap: 5px; }
.ds .bar-lg { height: 6px; }
.ds .bar-lg > i { background: var(--action); }
.ds .chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .chain li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.ds .chain-mark { display: flex; flex-direction: column; align-items: center; }
.ds .chain-dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; }
.ds .dot-ok { background: var(--ok); }
.ds .dot-warn { border: 2px solid var(--warn); background: var(--warn-bg); }
.ds .dot-todo { border: 2px solid var(--line-strong); background: var(--surface); }
.ds .dot-bad { background: var(--danger); }
.ds .dot-grey { background: var(--neutral); }
.ds .chain-rail { flex: 1; width: 2px; background: var(--line); }
.ds .chain-text { display: flex; flex-direction: column; gap: 1px; padding-bottom: 12px; }
.ds .chain-text strong { font-size: 13px; font-weight: 600; }
.ds .btn-block { width: 100%; min-height: 40px; }
.ds .detail-connect, .ds .detail-action { display: flex; flex-direction: column; gap: 10px; }
.ds .detail-connect .connect-form { display: block; margin: 0; }
.ds .detail-text { font-size: 13px; }
.ds .request-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ds .duration-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .duration-pills .is-picked { background: var(--sel); color: var(--action); border-color: var(--action); }
.ds .request-form .field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.ds .request-form textarea.input { padding: 8px 10px; resize: vertical; min-height: 0; }
.ds .request-other { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.ds .request-other[hidden] { display: none; }
.ds .kv { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
.ds .kv-rules { grid-template-columns: 150px minmax(0, 1fr); margin-top: -2px; }
.ds .kv dd { margin: 0; }
.ds .act-list { list-style: none; margin: -2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ds .act-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ds .act-ok { color: var(--ok); margin-top: 2px; }
.ds .act-no { color: var(--muted); margin-top: 2px; }
.ds .act-na { color: var(--muted); text-align: center; }
.ds .act-text { display: flex; flex-direction: column; gap: 1px; }
.ds .act-label { font-size: 13px; font-weight: 600; }
.ds .act-link { color: inherit; text-decoration: none; }
.ds .act-link:hover { text-decoration: underline; }
.ds .why-list { margin: -2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ds .detail-links { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; margin-top: -2px; }
.ds .detail-links a { font-size: 13px; font-weight: 600; }
.ds .members-intro { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; }
.ds .members-intro .hint { flex: 1 1 320px; }
.ds .members-scroll { padding: 0 0 8px; }
.ds .members-table { min-width: 860px; }
.ds .perm-head, .ds .perm-row { grid-template-columns: minmax(200px, 1fr) repeat(14, 40px) 104px; }
.ds .perm-head { align-items: end; border-top: 1px solid var(--line); }
.ds .perm-head:hover { background: transparent; }
.ds .th-perm { height: 116px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; }
.ds .has-sep { border-left: 1px solid var(--line); }
.ds .vlabel { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 11.5px; }
.ds .member-head { padding: 0 0 8px 18px; }
.ds .perm-row { min-height: 54px; }
.ds .member-cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 18px; }
.ds .member-cell strong { font-weight: 600; }
.ds .perm-cell { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.ds .perm-on { color: var(--ok); }
.ds .perm-off { color: var(--line-strong); }
.ds .member-action { text-align: right; padding-right: 14px; }
.ds .btn-ghost { background: transparent; color: var(--action); }
.ds .btn-ghost:hover { background: var(--action-soft); }
.ds .members-foot { padding: 4px 18px 16px; }
.ds .b-info { color: var(--info); background: var(--info-bg); }
.ds.accounts-page { gap: 20px; }
.ds .pager-links .iconbtn.icon-sm { width: 18px; height: 18px; min-height: 18px; }
.ds .btn.connect-button, .ds .connect-button.btn-sm { min-width: 0; margin: 0; }

/* ---- Mon compte ---- */
.ds.profile-page { gap: 20px; margin: 0 4px; padding: 4px 0; max-width: 1124px; }
.ds .profile-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ds .profile-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ds .profile-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ds .profile-mfa { padding: 18px 20px 6px; }
.ds .profile-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 14px; }
.ds .profile-panel-head h2, .ds .profile-password h2 { font-size: 18px; font-weight: 600; flex: 1; }
.ds .profile-intro { padding-bottom: 14px; }
.ds .factor { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ds .factor form { margin: 0; }
.ds .fico { width: 36px; height: 36px; border-radius: 6px; background: var(--sunk); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.ds .factor-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .factor-text strong { font-weight: 600; }
.ds .factor-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ds .factor-foot .hint { flex: 1 1 300px; }
.ds .factor-enroll { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.ds .factor-enroll-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; }
.ds .webauthn-status { margin: 0; font-size: 12.5px; color: var(--muted); }
.ds .webauthn-status:empty { display: none; }
.ds .webauthn-status.is-danger { color: var(--danger); padding-bottom: 12px; }
.ds .profile-password, .ds .profile-identity, .ds .profile-prefs { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.ds .profile-identity, .ds .profile-prefs { gap: 12px; }
.ds .profile-identity h2, .ds .profile-prefs h2 { font-size: 16px; font-weight: 600; }
.ds .profile-password-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ds .profile-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.ds .fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; margin: 0; }
.ds .fld .input { width: 100%; margin: 0; }
.ds .fld-wide { grid-column: 1 / -1; }
.ds .pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 6px; font-size: 13px; }
.ds .pw-rules li { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.ds .pw-rules li[data-state='ok'] { color: var(--ok); }
.ds .pw-rules li[data-state='bad'] { color: var(--danger); }
.ds .pw-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; }
.ds .pw-actions .hint { flex: 1 1 300px; }
.ds .profile-kv { grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.ds .profile-prefs form { margin: 0; }
.ds .profile-prefs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ds .profile-prefs legend { padding: 0 0 6px; font-size: 13px; font-weight: 600; }
.ds .radio, body.app-page .ds label.radio { min-height: 0; box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font-size: 13.5px; font-weight: 400; cursor: pointer; margin: 0; }
body.app-page .ds label.radio:hover { background: var(--raised); border-color: var(--line); }
.ds .radio input[type='radio'] { flex: none; accent-color: var(--action); margin: 0; width: 13px; height: 13px; min-width: 0; min-height: 0; }
.ds .profile-zone { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ds .profile-zone > span:first-child { font-weight: 600; }

/* Account menu: popover on most pages, expanded inline on "Mon compte". */
body.app-page .user-menu-item { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 5px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; }
body.app-page .user-menu-item:hover { background: var(--nav-hover); color: var(--text); }
body.app-page .user-menu-item.active { background: var(--nav-active); color: var(--action); font-weight: 600; }
body.app-page .user-menu-inline { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
body.app-page .user-menu-inline > summary { padding: 6px 4px; }
body.app-page .user-menu-inline[open] > summary .ico { transform: rotate(180deg); }
body.app-page .user-menu-inline[open] .user-menu-list { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; }

/* ---- Journal d'audit ---- */
.ds.audit-page { gap: 16px; }
.ds .audit-integrity { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 16px; }
.ds .audit-integrity-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds .audit-integrity-mark.is-bad { background: var(--danger-bg); color: var(--danger); }
.ds .audit-integrity-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 360px; }
.ds .audit-integrity-text strong { font-weight: 600; }
.ds .audit-how { position: relative; }
.ds .audit-how summary { font-size: 13px; font-weight: 600; color: var(--action); cursor: pointer; list-style: none; }
.ds .audit-how summary::-webkit-details-marker { display: none; }
.ds .audit-how p { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-width: 80vw; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--overlay-shadow); z-index: 5; }
.ds .audit-filters { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ds .audit-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ds .audit-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; margin: 0; }
.ds .audit-field .input { margin: 0; }
.ds .audit-field-period { flex: 0 1 170px; }
.ds .audit-field-user { flex: 0 1 150px; }
.ds .audit-field-target { flex: 0 1 170px; }
.ds .audit-field-result { flex: 0 1 140px; }
.ds .audit-field-ip { flex: 0 1 130px; }
.ds .audit-field-search { flex: 1 1 200px; }
.ds .audit-range { display: flex; flex-wrap: wrap; gap: 8px; }
.ds .audit-range[hidden] { display: none; }
.ds .audit-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ds .audit-count { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ds .chip-ink { color: var(--text); text-decoration: none; }
.ds .audit-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ds .audit-events { flex: 999 1 560px; min-width: 0; overflow-x: auto; }
.ds .audit-table { min-width: 700px; }
.ds .audit-row { grid-template-columns: 92px minmax(0, 1.5fr) 92px minmax(0, 1fr) 84px 92px; gap: 10px; padding: 8px 14px; min-height: 52px; }
.ds .audit-row.audit-head { padding: 0 14px; min-height: 38px; }
.ds .trow.sel, .ds .trow.sel:hover { background: var(--sel); }
.ds .audit-time { display: flex; flex-direction: column; }
.ds .audit-time .hint { font-size: 11.5px; }
.ds .audit-cell-event { min-width: 0; }
.ds .audit-cell-event .rowlink { gap: 2px; }
.ds .audit-cell-event .lbl { font-weight: 600; font-size: 13.5px; }
.ds .audit-code { font-size: 11.5px; color: var(--muted); }
.ds .audit-corr { font-size: 11.5px; color: var(--muted); }
.ds .audit-wrap { overflow-wrap: anywhere; }
.ds .audit-empty { padding: 24px 16px; color: var(--muted); }
.ds .audit-detail { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; }
.ds .audit-detail-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ds .audit-detail-kicker { font-weight: 600; }
.ds .audit-detail-head h2 { font-size: 17px; font-weight: 600; }
.ds .audit-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ds .audit-facts { margin: 0; padding: 14px 18px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.ds .audit-detail-actions { padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.ds .audit-follow { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.ds .audit-follow h3 { font-size: 13px; font-weight: 600; }
.ds .audit-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .audit-steps li { display: grid; grid-template-columns: 46px 16px minmax(0, 1fr); gap: 8px; }
.ds .audit-step-time { font-size: 11.5px; color: var(--muted); padding-top: 1px; }
.ds .audit-rail { display: flex; flex-direction: column; align-items: center; }
.ds .audit-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; flex: none; box-sizing: border-box; }
.ds .audit-dot.is-open { border: 2px solid var(--line-strong); background: var(--surface); }
.ds .audit-line { flex: 1; width: 2px; background: var(--line); }
.ds .audit-line.is-last { background: transparent; }
.ds .audit-step-text { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; }
.ds .audit-step-text > span:first-child { font-size: 13px; font-weight: 500; }
.ds .audit-step-text > span.is-current { font-weight: 700; }
.ds .audit-note { display: flex; gap: 6px; align-items: flex-start; }
.ds .audit-note .ico { margin-top: 1px; }
.ds .audit-no-session { padding: 14px 18px; }
.ds .audit-export { position: relative; }
.ds .audit-export summary { list-style: none; cursor: pointer; }
.ds .audit-export summary::-webkit-details-marker { display: none; }
.ds .audit-export-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 140px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--overlay-shadow); z-index: 5; display: flex; flex-direction: column; }
.ds .audit-export-list a { padding: 6px 10px; border-radius: 4px; color: var(--text); text-decoration: none; font-weight: 500; }
.ds .audit-export-list a:hover { background: var(--sunk); }

/* ---- Demandes d'accès ---- */
.ds.requests-page { gap: 18px; }
.ds .request-tabs { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--line); }
.ds .request-tabs .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 600; text-decoration: none; }
.ds .request-tabs .tab[aria-selected='true'] { color: var(--action); border-bottom-color: var(--action); }
.ds .req-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ds .req-list { flex: 1 1 360px; min-width: 0; overflow: hidden; }
.ds .req-list-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ds .req { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; }
.ds .req:hover { background: var(--raised); color: var(--text); }
.ds .req.sel, .ds .req.sel:hover { background: var(--sel); }
.ds .req-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.ds .req-head strong { font-weight: 600; flex: 1; }
.ds .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--sunk); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; flex: none; }
.ds .req-body { padding-left: 36px; display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; }
.ds .req-host { font-weight: 600; }
.ds .req-just { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds .req-empty { padding: 18px 16px; }
.ds .req-detail { flex: 999 1 520px; min-width: 0; }
.ds .req-detail-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ds .req-detail-head h2 { font-size: 18px; font-weight: 600; }
.ds .req-detail-head h2 .mono { font-size: 16px; }
.ds .req-sent { margin-left: auto; }
.ds .req-grid { padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; border-bottom: 1px solid var(--line); }
.ds .req-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds .req-label { font-weight: 600; }
.ds .req-person { display: flex; gap: 10px; align-items: center; }
.ds .avatar-lg { width: 36px; height: 36px; border-radius: 50%; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex: none; }
.ds .req-person-text { display: flex; flex-direction: column; gap: 1px; }
.ds .req-person-text strong { font-weight: 600; }
.ds .req-account { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ds .req-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .req-section { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); }
.ds .req-grid.req-section { display: grid; flex-direction: unset; gap: 18px; }
.ds .req-just-box { padding: 12px 14px; border-radius: 6px; background: var(--sunk); font-size: 14px; }
.ds .req-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.ds .req-facts > div { display: flex; flex-direction: column; gap: 2px; }
.ds .req-facts dd { margin: 0; font-weight: 600; }
.ds .req-facts > div:last-child dd { font-weight: 400; }
.ds .req-note { display: flex; gap: 8px; align-items: flex-start; }
.ds .req-note .ico { margin-top: 1px; }
.ds .req-list-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ds .req-why { font-size: 13px; }
.ds .req-decision { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ds .req-decision form { margin: 0; }
.ds .req-decision .fld textarea { padding: 8px 10px; resize: vertical; font: inherit; font-size: 13.5px; width: auto; }
.ds .req-decision-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds .req-decision-actions .btn { min-height: 40px; }
.ds .req-decision-actions .hint { margin-left: auto; }
.ds .req-banner { margin: 16px 20px 0; padding: 14px 16px; border-radius: 6px; display: flex; gap: 10px; align-items: flex-start; }
.ds .req-banner .ico { margin-top: 2px; flex: none; }
.ds .req-banner > div { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.ds .req-banner.is-ok { background: var(--ok-bg); color: var(--ok); }
.ds .req-banner.is-ok strong { color: var(--ok); }
.ds .req-banner.is-neutral { background: var(--neutral-bg); }
.ds .req-banner-actions { display: flex; gap: 8px; margin-top: 4px; }
.ds .req-table-panel { overflow-x: auto; }
.ds .req-table { min-width: 820px; }
.ds .req-row { gap: 12px; padding: 8px 16px; min-height: 60px; }
.ds .req-table-mine .req-row { grid-template-columns: 90px minmax(0, 1.4fr) 90px minmax(0, 1.6fr) 150px; }
.ds .req-table-grants .req-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 220px minmax(0, 1fr) 120px; min-height: 62px; }
.ds .req-row.req-head-row { min-height: 38px; padding: 0 16px; }
.ds .req-row:last-child { border-bottom: 0; }
.ds .req-state { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ds .req-action { text-align: right; }
.ds .req-action form { margin: 0; display: inline; }
.ds .req-remaining { display: flex; flex-direction: column; gap: 4px; }
.ds .req-grants-intro { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ds .confirm-facts { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; padding: 12px 14px; border-radius: 6px; background: var(--sunk, #e9eef1); }
.ds .confirm-facts dd { margin: 0; }
body.app-page .notif-menu { position: relative; }
body.app-page .notif-menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
body.app-page .notif-menu > summary::-webkit-details-marker { display: none; }
body.app-page .notif-list { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-width: calc(100vw - 32px); padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--overlay-shadow); z-index: 20; display: flex; flex-direction: column; gap: 10px; }
body.app-page .notif-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.app-page .notif-list li { display: flex; flex-direction: column; gap: 2px; }
body.app-page .notif-list form { margin: 0; }

/* ---- Santé système ---- */
.ds.health-page { gap: 20px; margin: 0 4px; padding: 4px 0; max-width: 1224px; }
.ds .health-banner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 6px; border: 1px solid var(--line); }
.ds .health-banner.is-warn { background: var(--warn-bg); }
.ds .health-banner.is-ok { background: var(--ok-bg); }
.ds .health-banner.is-danger { background: var(--danger-bg); }
.ds .health-banner > .ico { width: 22px; height: 22px; }
.ds .health-banner.is-warn > .ico, .ds .health-banner.is-warn strong { color: var(--warn); }
.ds .health-banner.is-ok > .ico, .ds .health-banner.is-ok strong { color: var(--ok); }
.ds .health-banner.is-danger > .ico, .ds .health-banner.is-danger strong { color: var(--danger); }
.ds .health-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 420px; }
.ds .health-banner-text strong { font-weight: 600; }
.ds .health-banner-text span { font-size: 13px; }
.ds .health-banner-observed { color: var(--text); }
.ds .health-banner-observed > time { font-family: var(--font-mono); letter-spacing: -.01em; }
.ds .health-group { overflow: hidden; }
.ds .health-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 14px 16px; }
.ds .health-group-head h2 { font-size: 16px; font-weight: 600; }
.ds .health-service > summary { list-style: none; cursor: pointer; }
.ds .health-service > summary::-webkit-details-marker { display: none; }
.ds .crow { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) 120px 150px 92px 34px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.ds .crow .dot { width: 12px; height: 12px; border-radius: 50%; justify-self: center; box-sizing: border-box; }
.ds .crow-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds .crow-name strong { font-weight: 600; }
.ds .crow-toggle { width: 30px; height: 30px; }
.ds .health-service[open] .crow-toggle { color: var(--text); transform: rotate(180deg); }
.ds .crow-detail { padding: 0 16px 14px 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; font-size: 13px; }
.ds .crow-detail > div { display: flex; flex-direction: column; gap: 1px; }
.ds .health-pair { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.ds .health-evidence, .ds .health-trust { flex: 1 1 480px; min-width: 0; overflow: hidden; }
.ds .health-block { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ds .health-block-last { gap: 4px; }
.ds .health-trust .health-block-last { gap: 8px; }
.ds .health-block-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ds .health-block-head strong { font-weight: 600; }
.ds .health-bar { height: 8px; position: relative; }
.ds .health-block-foot { display: flex; justify-content: space-between; gap: 10px; }
.ds .health-link { font-size: 13px; font-weight: 600; align-self: flex-start; }
.ds .health-facts { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.ds .health-facts dd { margin: 0; }
.ds .health-facts .is-warn { color: var(--warn); }
.ds .health-redundancy { padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ds .health-redundancy-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 420px; }
.ds .health-redundancy h2 { font-size: 16px; font-weight: 600; }
.ds .health-records { overflow-x: auto; }
.ds .health-records-head { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ds .health-records-head h2 { font-size: 16px; font-weight: 600; }
.ds .health-records-table { min-width: 720px; }
.ds .health-record { grid-template-columns: 140px 160px 130px minmax(0, 1fr); gap: 12px; padding: 10px 16px; }
.ds .health-record-head { padding: 0 16px; min-height: 36px; border-top: 1px solid var(--line); }
.ds .health-record:last-child { border-bottom: 0; }
@media (max-width: 760px) { .ds .crow { grid-template-columns: 24px minmax(0, 1fr) 34px; } .ds .crow .opt { display: none; } }

/* ---- Accueil (operations home of administrators and personal home of the other roles) ---- */
.ds.home-page { gap: 24px; margin: 0 4px; padding: 4px 0; max-width: 1224px; }
.ds.home-page.home-user { gap: 22px; }
.ds.home-page .ds-heading-actions { gap: 10px; flex-wrap: nowrap; }
.ds .btn-ghost { background: transparent; color: var(--action); }
.ds .btn-ghost:hover { background: var(--action-soft); color: var(--action); }
.ds .badge .ico { width: 14px; height: 14px; }
.ds .home-row { display: flex; flex-wrap: wrap; gap: 20px; }
.ds .home-row-top { align-items: flex-start; }
.ds .home-row-bottom { align-items: stretch; }
.ds .home-todo { flex: 2 1 600px; min-width: 0; }
.ds .home-health { flex: 1 1 340px; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ds .home-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ds .home-panel-head h2 { font-size: 18px; font-weight: 600; }
.ds .home-panel-title { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.ds .home-panel-head-top { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0; border: 0; }
.ds .home-panel-head-top .home-panel-title { flex: 0 1 auto; }
.ds .home-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.ds .home-filters .btn { background: transparent; color: var(--muted); border-color: transparent; }
.ds .home-filters .btn:hover { background: var(--action-soft); }
.ds .home-filters .btn[aria-pressed='true'] { background: var(--sel); color: var(--action); }
.ds .home-queue { list-style: none; margin: 0; padding: 0; }
.ds .qrow { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ds .qrow:last-child { border-bottom: 0; }
.ds .qrow:hover { background: var(--raised); }
.ds .qrow[hidden] { display: none; }
.ds .qrow .badge { justify-self: start; }
.ds .qrow form { margin: 0; }
.ds .home-q-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds .home-q-text strong { font-weight: 600; }
.ds .home-q-empty { display: flex; flex-direction: column; gap: 3px; padding: 18px; }
.ds .home-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .home-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
.ds .home-rail { display: flex; flex-direction: column; align-items: center; }
.ds .home-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; box-sizing: border-box; flex: none; }
.ds .home-line { flex: 1; width: 2px; background: var(--line); }
.ds .home-step-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; }
.ds .home-step.is-last .home-step-body { padding-bottom: 0; }
.ds .home-step-head { display: flex; justify-content: space-between; gap: 8px; }
.ds .home-step-head strong { font-weight: 600; }
.ds .home-step-head span { font-size: 12.5px; font-weight: 600; }
.ds .home-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; text-decoration: none; color: var(--action); align-self: flex-start; }
.ds .home-link:hover { color: var(--action-hover); }
.ds .home-link-end { margin-left: auto; align-self: auto; }
.ds .home-health > .home-link { align-self: stretch; }
.ds .home-live, .ds .home-favorites { min-width: 0; }
.ds .home-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .home-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.ds .home-favorites .home-table { min-width: 720px; }
.ds .home-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 12px; height: 36px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ds .home-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ds .home-table tbody tr:last-child td { border-bottom: 0; }
.ds .home-table tbody tr:hover td { background: var(--raised); }
.ds .home-table .home-col-left { width: 240px; }
.ds .home-table .home-col-action { text-align: right; }
.ds .home-table form { margin: 0; justify-content: flex-end; }
.ds .home-empty { padding: 18px 12px; }
.ds .home-left { display: flex; flex-direction: column; gap: 5px; }
.ds .home-left-soon { font-size: 12.5px; color: var(--warn); font-weight: 600; }
.ds .home-card { flex: 1 1 460px; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ds.home-user .home-card { flex-basis: 440px; }
.ds .home-card h2 { font-size: 18px; font-weight: 600; }
.ds .home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ds .home-card-head a { font-size: 13px; font-weight: 600; text-decoration: none; }
.ds .home-period { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--text); padding: 0; margin: 0; cursor: pointer; max-width: 100%; }
.ds .home-period:hover { background: var(--sunk); }
.ds .home-period option { font-size: 14px; font-weight: 400; }
.ds .home-grants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .home-grants li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ds .home-grants li:last-child { border-bottom: 0; }
.ds .home-grant-time { display: flex; flex-direction: column; gap: 4px; }
.ds .home-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0; }
.ds .home-stats > div { padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.ds .home-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.ds .home-stats dd { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 600; }
.ds .home-stats dd .hint { font-size: 12.5px; font-weight: 400; }
.ds .home-fail { font-size: 12.5px; color: var(--danger); font-weight: 600; }
.ds .home-review { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; }
.ds .home-current { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.ds .home-current-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 380px; min-width: 0; }
.ds .home-current-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds .home-current-head h2 { font-size: 13px; font-weight: 600; color: var(--muted); }
.ds .home-host { font-size: 16px; font-weight: 600; }
.ds .home-current-left { display: flex; flex-direction: column; gap: 6px; flex: 0 1 260px; }
.ds .home-current-left .bar { height: 6px; }
.ds .home-current-actions { display: flex; gap: 8px; }
.ds .home-current-actions form { margin: 0; }
.ds .home-grant { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.ds .home-grant-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ds .home-grant-name { display: flex; flex-direction: column; gap: 2px; }
.ds .home-host-sm { font-size: 13.5px; font-weight: 600; }
.ds .home-grant-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.ds .home-requests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .home-requests li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ds .home-requests li:last-child { border-bottom: 0; }
.ds .home-request-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ds .home-request-head .mono { font-weight: 600; }
.ds .home-again { font-size: 13px; font-weight: 600; align-self: flex-start; }
.ds .home-account { text-decoration: none; color: inherit; }
.ds .home-account .mono { font-weight: 600; }
.ds .home-notices { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ds .home-notices h2 { font-size: 18px; font-weight: 600; }
.ds .home-notices form { margin: 0; }
.ds .home-notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .home-notice-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ds .home-notice-list li:last-child { border-bottom: 0; }
.ds .home-notice-list time { color: var(--muted); }
/* header switches of the operations home */
body.app-page .top-tools .chip-ico { width: 14px; height: 14px; margin-right: 5px; flex: none; }
body.app-page .top-tools .lang-switch { margin: 0; display: inline-flex; }
body.app-page .top-tools .lang-switch [role='group'] { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden; }
body.app-page .top-tools .lang-switch button { border: 0; padding: 0 9px; min-height: 30px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
body.app-page .top-tools .lang-switch button[aria-pressed='true'] { background: var(--nav-active); color: var(--action); }
body.app-page .top-tools .theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
body.app-page .top-tools .theme-toggle:hover { background: var(--surface-subtle); color: var(--text); }
body.app-page .top-tools .theme-toggle .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body.app-page:not(.portal-theme-dark) .theme-toggle .theme-sun, body.app-page.portal-theme-dark .theme-toggle .theme-moon { display: none; }
@media (max-width: 760px) {
  .ds .qrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ds .qrow .badge { justify-self: start; }
  .ds .qrow > .btn, .ds .qrow > form { justify-self: start; }
}
body.app-page .top-tools .chip .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ds .home-period { height: 26px; line-height: 26px; }
body.app-page .top-tools .theme-toggle { padding: 0; }
body.app-page .top-tools .theme-toggle .ico { flex: none; }
body.app-page .top-tools .theme-toggle { min-height: 34px; height: 34px; min-width: 34px; }
.ds .home-card-head h2 { line-height: 26px; }
.ds .home-card-head h2:has(.home-period) { display: flex; align-items: center; height: 26px; }
.ds .home-period { display: block; }
body.portal-theme-dark.app-page .side { --sunk: #1a2731; }

/* ---- Paramètres ---- */
.ds.settings-page { gap: 18px; margin: 0 4px; padding: 4px 0; max-width: 1224px; }
.ds.settings-head { gap: 18px; margin: 0 4px 18px; padding: 4px 0 0; max-width: 1224px; }
.ds .settings-intro { display: flex; flex-direction: column; gap: 6px; }
.ds .settings-intro h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.ds .settings-intro .lead { color: var(--muted); }
.ds .settings-tabs-ds { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--line); }
.ds .tab[aria-current='page'] { color: var(--action); border-bottom-color: var(--action); }
.ds a.tab { text-decoration: none; }
.ds .set-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ds .set-form { flex: 2 1 600px; min-width: 0; max-width: 800px; display: flex; flex-direction: column; overflow: hidden; margin: 0; }
.ds .set-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ds .sec { border: 0; margin: 0; padding: 20px 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ds .sec.first { border-top: 0; }
.ds .sec legend { padding: 0; float: left; width: 100%; font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.ds .set-form .opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.ds .opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .set-grow { flex: 1; }
.ds .opt-text strong { font-weight: 600; }
.ds .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.ds .fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.ds .fld .hint { font-weight: 400; }
.ds .fld .input { width: auto; }
.ds .cb { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--action); flex: none; }
.ds .set-switch { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.ds .switch { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 10px; border: 0; padding: 0; background: var(--line-strong); position: relative; cursor: pointer; flex: none; margin: 2px 0 0; }
.ds .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: left .15s; }
.ds .switch:checked { background: var(--action); }
.ds .switch:checked::after { left: 18px; }
@media (prefers-reduced-motion: reduce) { .ds .switch::after { transition: none; } }
.ds .set-effect { display: flex; flex-direction: column; gap: 10px; border-radius: 6px; }
.ds .set-effect.is-changed { padding: 12px 14px; background: var(--action-soft); }
.ds .set-effect-text { color: var(--text); }
.ds .set-chip { color: var(--action); border-color: var(--action); }
.ds .chip[hidden], .ds .hint[hidden] { display: none; }
.ds .set-checks { display: flex; flex-wrap: wrap; gap: 18px; }
.ds .set-check { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; }
.ds .set-check .cb { margin: 0; }
.ds .set-allowlist { padding: 8px 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; min-height: 0; }
.ds .set-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--raised); }
.ds .set-bar-state { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; }
.ds .set-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.ds .set-bar.is-dirty .set-dot { background: var(--action); }
.ds .set-bar-text { font-size: 13px; }
.ds .set-bar .btn:disabled { opacity: .5; cursor: default; }
.ds .set-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ds .set-side .set-card:nth-child(n+2) { gap: 8px; }
.ds .set-card h2 { font-size: 16px; font-weight: 600; }
.ds .set-card p { font-size: 13px; }
.ds .set-figure { display: flex; align-items: baseline; gap: 8px; }
.ds .set-figure strong { font-size: 26px; font-weight: 600; }
.ds .set-bar8 { height: 8px; }
.ds .set-counts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13px; }
.ds .set-counts dd { margin: 0; }
.ds .set-uncovered { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ds .set-uncovered-title { font-size: 13px; font-weight: 600; }
.ds .set-uncovered-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ds .set-link { font-size: 13px; font-weight: 600; }
.ds .set-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
body.app-page .ds .set-form label:has(> input[type='checkbox']) { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 400; align-items: flex-start; gap: 12px; }
body.app-page .ds .set-form label:has(> input[type='checkbox']):hover { background: transparent; border-color: transparent; }
body.app-page .ds .set-form label.opt:has(> input[type='checkbox']) { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
body.app-page .ds .set-form label.opt:has(> input[type='checkbox']):hover { border-color: var(--line); }
body.app-page .ds .set-form label.set-check:has(> input[type='checkbox']) { align-items: center; gap: 8px; }
body.app-page .ds .set-form .opt-text strong { font-size: 14px; font-weight: 600; }
body.app-page .ds .set-form input[type='checkbox'].cb { appearance: auto; -webkit-appearance: auto; border: revert; background: revert; width: 16px; height: 16px; }
body.app-page .ds .set-form input[type='checkbox'].cb:checked { background: revert; border-color: revert; }
body.app-page .ds .set-form input[type='checkbox'] { min-width: 0; min-height: 0; }

/* ---- Mobile application shell (phones and small tablets): app bar, menu button, bottom tab bar ---- */
.m-brand { display: none; }
.tab-count { display: none; }
@media (max-width: 850px) {
  body.app-page > .top { position: sticky; top: 0; z-index: 20; height: 56px; min-height: 56px; padding: 0 6px 0 54px; gap: 4px; flex-wrap: nowrap; align-items: center; justify-content: flex-start; background: var(--surface); border-bottom: 1px solid var(--border); }
  body.app-page > .top .breadcrumb, body.app-page > .top .top-tools .chip, body.app-page > .top .lang-switch, body.app-page > .top .theme-toggle { display: none; }
  .m-brand { display: flex; align-items: center; align-self: stretch; gap: 4px; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
  .m-brand-logo { width: 24px; height: 24px; flex: none; }
  .m-brand-text { display: flex; flex-direction: column; flex: 1; line-height: 1.15; padding-left: 6px; min-width: 0; }
  .m-brand-text strong { font-size: 15px; font-weight: 700; }
  .m-brand-text .mono { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.app-page > .top .top-tools { margin-left: auto; gap: 0; }
  body.app-page > .top .notif-menu > summary.iconbtn { width: 44px; height: 44px; min-height: 44px; border-radius: 6px; }
  body.app-page > .top .notif-menu > summary .ico { width: 18px; height: 18px; }
  body.app-page > .top .bell-count { top: 8px; right: 8px; }
  .mobile-nav-toggle { display: block; top: 6px; left: 6px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text); overflow: hidden; text-indent: -9999px; white-space: nowrap; }
  .mobile-nav-toggle::before { content: ''; position: absolute; inset: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.app-page > .content { padding: 18px 16px 85px; }
  .mobile-tabbar { padding: 4px 4px 10px; border-top: 1px solid var(--border); background: var(--surface); }
  .mobile-tabbar .tab-item { position: relative; flex-direction: column; gap: 3px; min-height: 52px; padding: 0; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
  .mobile-tabbar .tab-item.is-current { box-shadow: none; color: var(--action); }
  .mobile-tabbar .nav-icon { width: 18px; height: 18px; }
  .tab-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-subtle); color: var(--muted); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
  .tab-count.is-warn { background: var(--warning-bg); color: var(--warning); }
}

/* ---- Sessions on a phone: cards, most pressing first ---- */
.ds .m-sessions-head, .ds .m-sessions { display: none; }
@media (max-width: 640px) {
  .ds.sessions-page { gap: 14px; }
  .ds .m-sessions-head { display: flex; flex-direction: column; gap: 2px; }
  .ds .m-sessions-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.45; }
  .ds .m-sessions-head .hint, .ds .m-session .hint { font-size: 13px; }
  .ds.sessions-page .ds-heading-text, .ds.sessions-page .session-summary-grid, .ds.sessions-page .session-list > .panel-head, .ds.sessions-page .session-list > .table-scroll { display: none; }
  .ds.sessions-page .ds-heading { order: 98; }
  .ds.sessions-page .panels-row, .ds.sessions-page .monitoring-policy-notice, .ds.sessions-page .session-monitor-requests { order: 99; }
  .ds.sessions-page .session-list { border: 0; background: transparent; order: 1; }
  .ds .m-sessions { display: flex; flex-direction: column; gap: 14px; }
  .ds .m-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .ds .fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .ds .fchip[aria-pressed='true'] { background: var(--sel); border-color: var(--action); color: var(--action); }
  .ds .m-session-cards { display: flex; flex-direction: column; gap: 14px; }
  .ds .m-session { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .ds .m-session[hidden] { display: none; }
  .ds .m-session .mono { font-size: 13px; }
  .ds .m-session .strong { font-weight: 600; }
  .ds .m-session-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
  .ds .m-session-target { display: flex; flex-direction: column; gap: 1px; }
  .ds .m-bar { height: 5px; border-radius: 3px; }
  .ds .m-bar > i { border-radius: 3px; }
  .ds .m-warn { font-size: 13px; color: var(--warn); font-weight: 600; }
  .ds .m-note { font-size: 13px; }
  .ds .m-session-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
  .ds .m-session-actions > form, .ds .m-session-actions > a, .ds .m-session-actions > span { display: flex; margin: 0; min-width: 0; }
  .ds .m-session-actions:has(> :only-child) { grid-template-columns: 1fr; padding-top: 0; }
  .ds .m-session-actions .btn-sm { min-height: 44px; padding: 0 14px !important; font-size: 14px !important; }
  .ds .m-session-actions .ico { display: none; }
  .ds .m-session-actions .btn, .ds .m-session-actions button { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 6px; font-size: 14px; }
}
.ds .m-sessions-head .mono { font-size: 13px; }

/* Controls keep their strong border in the dark theme (WCAG 1.4.11): the older rule that flattens every button and field to the weak border is more specific than the surface tokens. */
body.app-page.portal-theme-dark .ds :is(.input, .btn-secondary, .fchip) { border-color: var(--line-strong); }
body.app-page.portal-theme-dark .ds .btn-danger { border-color: var(--danger); }
body.app-page.portal-theme-dark .ds .fchip[aria-pressed='true'] { border-color: var(--action); }
body.app-page.portal-theme-dark .ds .btn-primary { border-color: transparent; }

/* ---- Decision of a request on a phone: one screen per request, decisions fixed at the bottom, confirmations as bottom sheets ---- */
.ds .m-req, .ds .m-comment { display: none; }
@media (max-width: 640px) {
  body.app-page:has(.m-req) > .top, body.app-page:has(.m-req) > .mobile-nav-toggle, body.app-page:has(.m-req) .mobile-tabbar { display: none !important; }
  body.app-page:has(.m-req) > .content { padding: 0; }
  .ds.requests-page:has(.m-req) > :not(.req-layout):not(.modal):not(.m-req) { display: none; }
  .ds.requests-page:has(.m-req) .req-layout > .req-list, .ds.requests-page:has(.m-req) .req-layout > .req-detail { display: none; }
  .ds .m-req { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); line-height: 1.45; font-size: 15px; }
  .ds .m-req-bar { height: 56px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .ds .m-req-bar .iconbtn { width: 44px; height: 44px; color: var(--text); }
  .ds .m-req-bar .ico { width: 18px; height: 18px; }
  .ds .m-req-title { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
  .ds .m-req-title strong { font-size: 15px; font-weight: 600; }
  .ds .m-req-title .mono { font-size: 14px; }
  .ds .m-req-title .hint { font-size: 12px; }
  .ds .m-req-bar .badge { margin-right: 8px; }
  .ds .m-req-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .ds .m-blk { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); flex: none; }
  .ds .m-blk .hint { font-size: 13px; }
  .ds .m-blk .mono { font-size: 13px; }
  .ds .m-blk-person { flex-direction: row; align-items: center; gap: 12px; }
  .ds .m-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
  .ds .m-person { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ds .m-person strong { font-weight: 600; }
  .ds .m-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .ds .m-account { font-size: 14px !important; font-weight: 600; }
  .ds .m-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .ds .m-just { font-size: 15px; }
  .ds .m-facts { gap: 10px; }
  .ds .m-facts > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .ds .m-facts > div > strong { font-weight: 600; }
  .ds .m-facts > .m-fact-sep { flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); align-items: stretch; }
  .ds .m-facts > .m-fact-col { flex-direction: column; gap: 2px; align-items: stretch; }
  .ds .m-facts > .m-fact-sep > span:last-child, .ds .m-facts > .m-fact-col > span:last-child { font-size: 14px; }
  .ds .m-req .req-banner { margin: 0; }
  .ds .m-req-actions { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; padding: 12px 16px 20px; border-top: 1px solid var(--line); background: var(--surface); }
  .ds .m-req-actions .btn { min-height: 46px; padding: 0 14px; border-radius: 6px; font-size: 14px; }
  /* confirmations are bottom sheets */
  body.app-page .modal:has(.confirm-panel) { padding: 0; align-items: flex-end; }
  body.app-page .modal:has(.confirm-panel):target { display: flex; }
  body.app-page .modal:has(.confirm-panel) .modal-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; border-radius: 14px 14px 0 0; padding: 22px 16px 22px; }
  body.app-page .modal:has(.confirm-panel) .modal-panel::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: -12px auto 12px; }
  .ds .m-comment, body.app-page .m-comment { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 12.5px; font-weight: 600; }
}

/* ---- Home on a phone: what needs the viewer, then their temporary accesses and the sessions of their perimeter ---- */
.ds .m-home { display: none; }
@media (max-width: 640px) {
  .ds.home-user { gap: 20px; margin: 0; padding: 0; }
  .ds.home-user > :not(.m-home) { display: none; }
  .ds .m-home { display: flex; flex-direction: column; gap: 20px; }
  .ds .m-home-head { display: flex; flex-direction: column; gap: 2px; }
  .ds .m-home-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.45; }
  .ds .m-home .hint { font-size: 13px; }
  .ds .m-home .mono { font-size: 13px; }
  .ds .m-section { display: flex; flex-direction: column; gap: 10px; }
  .ds .m-section h2 { font-size: 16px; font-weight: 600; line-height: 1.45; }
  .ds .m-section h2 .hint { font-weight: 500; }
  .ds .m-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.45; }
  .ds .m-card strong { font-weight: 600; }
  .ds .m-card strong .mono { font-size: 14px; }
  .ds .m-card .mono.m-strong { font-weight: 600; }
  .ds .m-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ds .m-card-top .ico, .ds .m-card-row > .ico { color: var(--muted); width: 18px; height: 18px; }
  .ds .m-card-row { flex-direction: row; align-items: center; gap: 12px; }
  .ds .m-card-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .ds .m-grant-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
  .ds .m-workstation { display: flex; gap: 6px; align-items: flex-start; padding-top: 4px; }
}

/* ---- States of the interface: empty, refused, error (board "États de l’interface") ---- */
.ds .state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 24px; }
.ds .state strong { font-weight: 600; }
.ds .state-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sunk); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds .state-icon .ico { width: 20px; height: 20px; }
.ds .state-icon.is-ok { background: var(--ok-bg); color: var(--ok); }
.ds .state-icon.is-danger { background: var(--danger-bg); color: var(--danger); }
.ds .state-icon.is-large { width: 52px; height: 52px; }
.ds .state-icon.is-large .ico { width: 24px; height: 24px; }
.ds .state-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ds .cap { font-size: 12px; font-weight: 600; color: var(--muted); }
.ds .access-denied { padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 720px; }
.ds .access-denied h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }
.ds .access-denied p { font-size: 14px; max-width: 560px; }
.ds .access-denied .state-actions { justify-content: flex-start; }

/* ---- Confirmation dialogs: what will be closed, what stays valid, and a button that names the consequence ---- */
.ds .btn-danger-solid { background: var(--danger); color: var(--on-danger); }
.ds .btn-danger-solid:hover { background: var(--danger); color: var(--on-danger); filter: brightness(.92); }
.modal-panel.dlg { padding: 0; gap: 0; max-width: 480px; overflow: hidden; border-radius: 8px; }
.ds .dlg-b { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.ds .dlg-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ds .dlg-f { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.ds .dlg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.ds .dlg-check input { margin: 3px 0 0; accent-color: var(--action); }
body.app-page .ds label.dlg-check { display: flex; gap: 8px; align-items: flex-start; padding: 0; border: 0; background: none; min-height: 0; font-size: 13px; font-weight: 400; color: var(--text); }
body.app-page .ds label.dlg-check input[type='checkbox'] { flex: none; appearance: auto; -webkit-appearance: auto; width: 13px; height: 13px; min-width: 0; min-height: 0; margin: 3px 0 0; padding: 0; border: revert; background: revert; accent-color: var(--action); }
.ds .state-error { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.ds .state-error-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds .state-error-body strong { font-weight: 600; }
.ds .state-error-body p { font-size: 13.5px; }
.ds .state-error .state-actions { justify-content: flex-start; margin-top: 4px; }

/* ---- Forms: field errors named next to the field, and a submit button that waits for the answer ---- */
.ds .input[aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
.ds .fld-error { display: flex; gap: 6px; align-items: center; color: var(--danger); font-weight: 600; }
.ds .fld-error[hidden], .ds .busy-hint[hidden] { display: none; }
.ds .btn-busy { background: var(--sunk); color: var(--muted); border-color: var(--line); cursor: progress; }
.ds .btn-busy:hover { background: var(--sunk); color: var(--muted); }
.ds .modal-actions .busy-hint { margin-right: auto; }
.ds textarea.input { padding: 8px 10px; resize: vertical; }
.ds .fld-narrow { max-width: 220px; }

/* ---- Notices that explain why something is not possible ---- */
.ds .notice-card { padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.ds .notice-card > .ico { margin-top: 2px; color: var(--warn); }
.ds .notice-card.is-neutral > .ico { color: var(--neutral); }
.ds .notice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds .notice-body strong { font-weight: 600; }
.ds .notice-card.has-actions .notice-body { gap: 6px; }
.ds .notice-actions { align-self: flex-start; }

/* ---- Toast: the answer to an action ---- */
.ds .toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 16px 40px rgba(15, 29, 40, .18), 0 2px 6px rgba(15, 29, 40, .08); }
body.portal-theme-dark .ds .toast { box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); }
.ds .toast > .ico { margin-top: 2px; }
.ds .toast .is-ok { color: var(--ok); }
.ds .toast .is-warn { color: var(--warn); }
.ds .toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .toast-body strong { font-weight: 600; }
.ds .toast-body a { font-size: 13px; font-weight: 600; }

/* ---- Console session about to expire: a banner that does not hide the page (board "États de l’interface") ---- */
.modal.session-expiry-dialog { inset: 16px auto auto 50%; width: min(620px, calc(100% - 32px)); padding: 0; overflow: visible; background: transparent; transform: translateX(-50%); }
.ds .session-expiry-banner { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--warn-bg); box-shadow: 0 16px 40px rgba(15, 29, 40, .18), 0 2px 6px rgba(15, 29, 40, .08); }
.ds .session-expiry-banner > .ico { color: var(--warn); width: 20px; height: 20px; }
.ds .session-expiry-text { display: flex; flex-direction: column; flex: 1 1 260px; }
.ds .session-expiry-text strong { font-weight: 600; }
.ds .session-expiry-text > span { font-size: 13px; }
.ds .session-expiry-banner form { margin: 0; }

/* ---- Mandatory enrolment of a second factor ---- */
.mfa-gate:has(.mfa-enroll) { width: min(100%, 584px); }
.ds.mfa-enroll { width: 100%; }
.ds .enroll-panel { padding: 32px; display: flex; flex-direction: column; gap: 16px; max-width: 520px; width: 100%; margin: 0 auto; }
.ds .enroll-brand { display: flex; align-items: center; gap: 10px; }
.ds .enroll-brand strong { font-size: 16px; font-weight: 700; }
.ds .enroll-panel h1 { font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.ds .enroll-panel p { font-size: 14px; }
.ds .enroll-panel p.hint { font-size: 12.5px; }
.ds .enroll-factor { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.ds .enroll-factor-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds .enroll-factor-icon .ico { width: 18px; height: 18px; }
.ds .enroll-factor-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ds .enroll-factor-text strong { font-weight: 600; }
.ds .enroll-factor form, .ds .enroll-panel .mfa-cancel-form { margin: 0; }
.ds .enroll-panel .mfa-cancel-form { align-self: flex-start; }
.ds .enroll-panel .mfa-cancel-form button { width: auto; }
.ds .enroll-verify { display: flex; flex-direction: column; gap: 12px; margin: 0; }
body.app-page.portal-theme-dark .ds .input[aria-invalid='true'] { border-color: var(--danger); }
@media (max-width: 640px) {
  /* The confirmation dialogs keep their own padding inside the bottom sheet of the phone */
  body.app-page .modal:has(.confirm-panel) .modal-panel.dlg { padding: 0; }
  body.app-page .modal:has(.confirm-panel) .modal-panel.dlg::before { margin: 8px auto 0; }
  .ds .dlg-f { flex-wrap: wrap; }
  .ds .dlg-f .btn { flex: 1 1 140px; }
  .modal.session-expiry-dialog { inset: 8px auto auto 50%; width: calc(100% - 16px); }
}

/* A badge that mixes words and a clock is one line of text: as a flex row, the gap of the icon + text badges would open between the words and the time */
.ds .badge:has(> time) { display: inline-block; line-height: 22px; }