/* ============================================================
   PKIPlayground – Application CSS (Light Theme)
   ============================================================ */

:root {
    --bg-primary:   #f1f5f9;
    --bg-secondary: #f8fafc;
    --bg-card:      #ffffff;
    --bg-hover:     #f1f5f9;
    --border:       #e2e8f0;
    --border-light: #cbd5e1;
    --text-primary: #0f172a;
    --text-muted:   #64748b;
    --accent:       #2563eb;
    --accent-hover: #1d4ed8;
    --accent-glow:  rgba(37,99,235,.22);
    --cyan:         #0891b2;
    --green:        #059669;
    --amber:        #d97706;
    --red:          #dc2626;
    --purple:       #7c3aed;
    --radius:       .75rem;
    --radius-sm:    .5rem;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:       0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
    --shadow-lg:    0 10px 30px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

.app-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ──────────────────────────────────────────────── */
.app-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .6rem 0;
}

/* Bootstrap default .dropdown-menu z-index is 1000 — below our sticky
   navbar (1030). When a content-area dropdown opens upward near the
   bottom of the viewport its top slides under the navbar. Bumping to
   1031 keeps menus clear without affecting modals (1055) or popovers. */
.dropdown-menu { z-index: 1031; }

/* Subtle per-row tints for /domains, keyed off the cert status. We set
   --bs-table-bg directly so Bootstrap's striping + hover stack on top
   without us having to override .table-* row variants. Alpha values
   stay low (~6–10%) so the accent table border + content stay readable
   in both light and dark modes; the row hover is an overlay
   (--bs-table-bg-state) on top of the tint, so the tint survives it. */
.domain-row-ok       td { --bs-table-bg: rgba(34, 197, 94,  .08); }  /* green */
.domain-row-expiring td { --bs-table-bg: rgba(234, 179, 8,  .12); }  /* amber */
.domain-row-expired  td { --bs-table-bg: rgba(239, 68,  68, .10); }  /* red   */
.domain-row-error    td { --bs-table-bg: rgba(100, 116, 139,.10); }  /* slate */

/* /syslog device-list row tints, keyed off connection status. Hues
   match the .badge-status-* palette so the row reads consistently with
   the status pill in the same row: active=green, disconnected=red,
   never_connected=amber. Alpha kept low so accent table border + text
   stay readable; the hover overlay sits on top without hiding it. */
.syslog-row-active td { --bs-table-bg: rgba(34, 197, 94,  .08); }  /* green */
.syslog-row-idle   td { --bs-table-bg: rgba(239, 68,  68, .10); }  /* red   */
.syslog-row-silent td { --bs-table-bg: rgba(234, 179, 8,  .12); }  /* amber */

/* /account/management/credentials row tints, keyed off auth_type. Hues
   match the Tip badge palette: SSH key = info/cyan, X509 = primary/blue,
   password = secondary/gray. Alpha kept low; accent hover wins. */
.cred-row-key      td { --bs-table-bg: rgba( 13, 202, 240, .10); }  /* info  */
.cred-row-x509     td { --bs-table-bg: rgba( 13, 110, 253, .08); }  /* primary */
.cred-row-snmp     td { --bs-table-bg: rgba( 22, 101,  52, .08); }  /* green — matches dev-row-snmp */
.cred-row-password td { --bs-table-bg: rgba(108, 117, 125, .08); }  /* secondary */

/* /account/management/devices row tints, keyed off connection_type.
   Hues match the Tip badge palette (see $typeBadge in the view): SSH
   = purple, VNC = pink, RDP = cyan, Telnet = amber, SNMP = green. */
.dev-row-ssh    td { --bs-table-bg: rgba(111,  66, 193, .08); }  /* purple */
.dev-row-vnc    td { --bs-table-bg: rgba(190,  24,  93, .08); }  /* pink   */
.dev-row-rdp    td { --bs-table-bg: rgba(  3, 105, 161, .08); }  /* cyan   */
.dev-row-telnet td { --bs-table-bg: rgba(180,  83,   9, .10); }  /* amber  */
.dev-row-snmp   td { --bs-table-bg: rgba( 22, 101,  52, .08); }  /* green  */

/* /account/connectors row tints, keyed off derivedStatus(): online =
   green, offline = red, pending = amber (transient), orphan = deeper
   amber/orange (warning), revoked = deep red. Mirrors the badge palette
   defined in $statusBadge. */
.conn-row-online  td { --bs-table-bg: rgba( 34, 197,  94, .08); }  /* green  */
.conn-row-offline td { --bs-table-bg: rgba(239,  68,  68, .10); }  /* red    */
.conn-row-pending td { --bs-table-bg: rgba(234, 179,   8, .10); }  /* amber  */
.conn-row-orphan  td { --bs-table-bg: rgba(180,  83,   9, .12); }  /* orange */
.conn-row-revoked td { --bs-table-bg: rgba(220,  38,  38, .14); }  /* deep red */

/* Long menus (e.g. EE "Descarca" with 9+ entries on a small viewport)
   would otherwise overflow the screen edge and clip the bottom items.
   Capping height + auto-scroll keeps every option reachable regardless
   of where the trigger button sits. Pair with data-bs-popper-config
   strategy:fixed so the cap follows the viewport, not a parent box.
   50vh (instead of 70vh): when the trigger sits roughly in the middle
   of the viewport, Popper's flip middleware picks whichever side has
   more space (always ≥ 50vh by definition), so a 50vh-tall menu is
   guaranteed to fit regardless of trigger position. */
.dropdown-menu-scrollable {
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.brand-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--accent), #1d4ed8);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 6px rgba(59,130,246,.35);
}

.brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: -.3px;
}
.brand-dot { color: var(--accent); }

.app-navbar .nav-link {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
    opacity: .75;
}
.app-navbar .nav-link:hover { opacity: 1; color: var(--text-primary); background: var(--bg-hover); }
.app-navbar .nav-link.active {
    opacity: 1;
    color: var(--accent);
    background: rgba(59,130,246,.1);
    font-weight: 600;
}

.plan-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.plan-badge.plan-free         { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.plan-badge.plan-home_office  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.plan-badge.plan-small_office { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.plan-badge.plan-custom       { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.btn-user {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: .875rem;
    padding: .4rem .85rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.btn-user:hover { background: var(--bg-hover); color: var(--text-primary); }

.user-avatar {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
}

.app-dropdown {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 1050;
}
.app-dropdown .dropdown-item { color: var(--text-primary); font-size: .875rem; padding: .5rem 1rem; }
.app-dropdown .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.app-dropdown .dropdown-divider { border-color: var(--border); }
.app-dropdown .dropdown-item-text { padding: .5rem 1rem; color: var(--text-muted); }

/* ── Page Layout ─────────────────────────────────────────── */
.app-page { flex: 1; padding: 2rem 0; }

.page-header { margin-bottom: 1.5rem; }
.page-title  { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-sub    { color: var(--text-muted); font-size: .9rem; margin: .25rem 0 0; }

/* ── Cards ───────────────────────────────────────────────── */
.app-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Accent variant — adds a defined blue edge in the same family as
   .btn-primary / .app-table-accent. Use on cards that should read as
   "this is the primary content surface" (PKI infrastructure cards,
   the filter row above them, etc.) so they group visually as one
   accented section. Stacks with .app-card.

   Auto-applied to EVERY .app-card under sections marked
   data-section="accent" on <body> — see header.php $_accentPrefixes
   list (PKI, Administrare, Monitorizare, Incidente). Saves tagging
   the ~50+ cards individually. The modifier class still works
   outside those sections for any page that wants the same look
   explicitly. */
.app-card-accent,
body[data-section="accent"] .app-card {
    border: 1px solid var(--accent);
    box-shadow: 0 1px 3px rgba(59,130,246,.12);
}
/* All form controls under accented sections share the border of the
   modern buttons (.btn-outline-secondary, see "Modern buttons" below):
   slate #cbd5e1 at rest, #94a3b8 on hover, accent blue + glow on focus.
   Inputs, file pickers, selects, textareas, number spinners, input-group
   addons and checkboxes read as one surface with the buttons next to
   them. The focus rule has to repeat the selector: the plain
   .app-input:focus rule loses to this one on specificity. */
body[data-section="accent"] .form-control,
body[data-section="accent"] .form-select,
body[data-section="accent"] .app-input,
body[data-section="accent"] .app-select,
body[data-section="accent"] .input-group-text {
    border-color: #cbd5e1 !important;
}
body[data-section="accent"] .form-control:hover:not(:focus):not(:disabled),
body[data-section="accent"] .form-select:hover:not(:focus):not(:disabled),
body[data-section="accent"] .app-input:hover:not(:focus):not(:disabled),
body[data-section="accent"] .app-select:hover:not(:focus):not(:disabled) {
    border-color: #94a3b8 !important;
}
body[data-section="accent"] .form-control:focus,
body[data-section="accent"] .form-select:focus,
body[data-section="accent"] .app-input:focus,
body[data-section="accent"] .app-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.28) !important;
}
body[data-section="accent"] .form-control.is-invalid,
body[data-section="accent"] .form-select.is-invalid { border-color: var(--red) !important; }
body[data-section="accent"] .form-control.is-invalid:focus,
body[data-section="accent"] .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.22) !important; }
/* ── Checkboxes, radios, switches ─────────────────────────────────────
   Same family as the modern buttons: slate hairline at rest, darker on
   hover, solid accent when on, the accent focus ring. Box is 1.125em
   with a .1875em top offset, so it stays centred on a 1.5 line-height
   label like Bootstrap's 1em box did. The tick and the dash are
   heavier strokes than Bootstrap's defaults so they read at a glance;
   the indeterminate state (the "select all" headers) gets its own dash. */
body[data-section="accent"] .form-check-input {
    width: 1.125em;
    height: 1.125em;
    margin-top: .1875em;
    border: 1.5px solid #94a3b8;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, background-position .15s ease;
}
body[data-section="accent"] .form-check-input[type="checkbox"] { border-radius: .3125em; }
body[data-section="accent"] .form-check-input:hover:not(:disabled):not(:checked):not(:indeterminate) {
    border-color: #64748b;
    background-color: #f8fafc;
}
body[data-section="accent"] .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.28);
}
body[data-section="accent"] .form-check-input:checked,
body[data-section="accent"] .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(37,99,235,.3);
}
body[data-section="accent"] .form-check-input:checked:hover:not(:disabled),
body[data-section="accent"] .form-check-input[type="checkbox"]:indeterminate:hover:not(:disabled) {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
body[data-section="accent"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5.5 10.5 3 3 6-7'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%23fff'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-check-input:disabled {
    cursor: not-allowed;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
    opacity: 1;
}
body[data-section="accent"] .form-check-input:disabled:checked,
body[data-section="accent"] .form-check-input[type="checkbox"]:disabled:indeterminate {
    background-color: #93c5fd;
    border-color: #93c5fd;
}
body[data-section="accent"] .form-check-input:disabled ~ .form-check-label { opacity: .6; cursor: not-allowed; }
body[data-section="accent"] .form-check-label { cursor: pointer; }
body[data-section="accent"] .form-check { padding-left: 1.75em; }
body[data-section="accent"] .form-check .form-check-input { margin-left: -1.75em; }

/* Switches: a filled track with a white knob in both states, the
   track turning accent when on. */
body[data-section="accent"] .form-switch { padding-left: 2.875em; }
body[data-section="accent"] .form-switch .form-check-input {
    width: 2.25em;
    height: 1.25em;
    margin-top: .125em;
    margin-left: -2.875em;
    border-radius: 2em;
    border-color: #cbd5e1;
    background-color: #cbd5e1;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.1' fill='%23fff'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-switch .form-check-input:hover:not(:disabled):not(:checked) {
    background-color: #94a3b8;
    border-color: #94a3b8;
}
body[data-section="accent"] .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.1' fill='%23fff'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-switch .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.1' fill='%23fff'/%3e%3c/svg%3e");
}
body[data-section="accent"] .form-switch .form-check-input:disabled { background-color: #e2e8f0; border-color: #e2e8f0; }
body[data-section="accent"] .form-switch .form-check-input:disabled:checked { background-color: #93c5fd; border-color: #93c5fd; }

/* ── Selects ──────────────────────────────────────────────────────────
   The closed control matches the buttons: same radius and hairline
   shadow, a thin chevron, a light hover, an accent chevron on focus,
   and the same height as .btn / .btn-sm. (The open option list is
   native and stays the OS's.)
   Also restores the chevron on .app-select: the global
   `.app-select { background: #fff !important }` shorthand wiped
   background-image, so every filter select had no arrow at all.
   Only padding-right is touched, so selects with a left icon
   (.input-group-icon) keep their left padding; list boxes
   ([multiple] / [size]) get no chevron. */
body[data-section="accent"] select.form-select,
body[data-section="accent"] select.app-select,
body[data-section="accent"] select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: 1rem 1rem !important;
    padding-right: 2.25rem !important;
    min-height: calc(1.5em + .75rem + 2px);
    border-radius: .5625rem !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    cursor: pointer;
    text-overflow: ellipsis;
}
body[data-section="accent"] select.form-select-sm,
body[data-section="accent"] .input-group-sm > select {
    min-height: calc(1.5em + .5rem + 2px);
    padding-top: .3rem;
    padding-bottom: .3rem;
    padding-left: .65rem;
    padding-right: 2rem !important;
    background-position: right .55rem center !important;
    background-size: .9rem .9rem !important;
    font-size: .84rem;
    border-radius: .5rem !important;
}
body[data-section="accent"] select.form-select:hover:not(:disabled):not(:focus),
body[data-section="accent"] select.app-select:hover:not(:disabled):not(:focus),
body[data-section="accent"] select.form-control:hover:not(:disabled):not(:focus) {
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important;
}
body[data-section="accent"] select.form-select:focus,
body[data-section="accent"] select.app-select:focus,
body[data-section="accent"] select.form-control:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important;
}
body[data-section="accent"] select.form-select:disabled,
body[data-section="accent"] select.app-select:disabled,
body[data-section="accent"] select.form-control:disabled {
    background-color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important;
    color: #94a3b8 !important;
    box-shadow: none;
    cursor: not-allowed;
}
body[data-section="accent"] select[multiple],
body[data-section="accent"] select[size]:not([size="1"]) {
    background-image: none !important;
    padding-right: .75rem !important;
    cursor: default;
}
/* Joined to an input-group neighbour: keep Bootstrap's square inner edge. */
body[data-section="accent"] .input-group > select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body[data-section="accent"] .input-group > select:not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body[data-section="accent"] select option:disabled { color: #94a3b8; }

/* ── Text inputs ──────────────────────────────────────────────────────
   Text / email / password / number / url / search inputs, textareas and
   file pickers in the same family as the buttons and selects: button
   radius, hairline shadow, the button height, a soft placeholder, a
   quiet disabled state. Borders, hover and focus come from the shared
   form-control rule above. padding-left is left alone so inputs with
   a left icon (.input-group-icon, 2.5rem) keep their room. [readonly]
   is deliberately not restyled: forms use a temporary readonly as an
   anti-autofill trick, and a grey flash on load would look broken. */
body[data-section="accent"] input.form-control:not(.form-control-color):not([type="file"]),
body[data-section="accent"] input.app-input,
body[data-section="accent"] textarea.form-control,
body[data-section="accent"] textarea.app-input {
    background-color: #ffffff;
    border-radius: .5625rem !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
body[data-section="accent"] input.form-control:not(.form-control-color):not([type="file"]),
body[data-section="accent"] input.app-input {
    min-height: calc(1.5em + .75rem + 2px);
    padding-top: .375rem;
    padding-bottom: .375rem;
    padding-right: .8rem;
}
body[data-section="accent"] input.form-control-sm:not([type="file"]) {
    min-height: calc(1.5em + .5rem + 2px);
    padding-top: .3rem;
    padding-bottom: .3rem;
    padding-right: .65rem;
    font-size: .84rem;
    border-radius: .5rem !important;
}
body[data-section="accent"] textarea.form-control,
body[data-section="accent"] textarea.app-input {
    padding: .55rem .8rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 5.5rem;
}
body[data-section="accent"] textarea.form-control[rows="1"],
body[data-section="accent"] textarea.form-control[rows="2"] { min-height: 0; }
body[data-section="accent"] .form-control::placeholder,
body[data-section="accent"] .app-input::placeholder { color: #94a3b8 !important; opacity: 1; }
body[data-section="accent"] .form-control:focus::placeholder,
body[data-section="accent"] .app-input:focus::placeholder { color: #cbd5e1 !important; }
body[data-section="accent"] .form-control:disabled,
body[data-section="accent"] .app-input:disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none;
    cursor: not-allowed;
}
/* Search: the native clear (x) is kept, its cancel tint quieter. */
body[data-section="accent"] input[type="search"].form-control::-webkit-search-cancel-button { opacity: .5; cursor: pointer; }
/* Browser autofill: a pale accent tint instead of the default yellow. */
body[data-section="accent"] .form-control:-webkit-autofill,
body[data-section="accent"] .app-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #eff6ff inset !important;
    -webkit-text-fill-color: #0f172a;
}

/* File picker: the "Choose file" part reads as a secondary button. */
body[data-section="accent"] input[type="file"].form-control {
    border-radius: .5625rem !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    cursor: pointer;
}
body[data-section="accent"] input[type="file"].form-control::file-selector-button {
    background: #f8fafc;
    color: #334155;
    font-weight: 500;
    border-right: 1px solid #e2e8f0;
    transition: background-color .12s ease, color .12s ease;
}
body[data-section="accent"] input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
    background: #f1f5f9;
    color: #0f172a;
}

/* Input-group addons: a quiet light segment, same radius. */
body[data-section="accent"] .input-group-text {
    background: #f8fafc;
    color: #475569;
    font-size: .875rem;
}
body[data-section="accent"] .input-group > .form-control,
body[data-section="accent"] .input-group > .input-group-text { box-shadow: none; }
body[data-section="accent"] .input-group > :first-child { border-top-left-radius: .5625rem !important; border-bottom-left-radius: .5625rem !important; }
body[data-section="accent"] .input-group > :last-child  { border-top-right-radius: .5625rem !important; border-bottom-right-radius: .5625rem !important; }
body[data-section="accent"] .input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body[data-section="accent"] .input-group > .form-control:not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Cap accented-section page content to a reading-friendly width on
   large monitors. Without this, .container-fluid stretches to 100%
   so filters + paste textareas + file pickers feel infinite on a
   1920+ display. 92rem (~1472px) is wide enough that data-heavy
   tables (PKI chain, EE, devices, audit logs) rarely trigger
   horizontal scroll, narrow enough that single-column forms
   (Decoder, KDF, Signature) still feel focused. .table-responsive
   handles overflow gracefully if a future column ever needs more
   width. */
body[data-section="accent"] .app-page > .container-fluid {
    max-width: 92rem;
    margin-left: auto;
    margin-right: auto;
}
.app-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
    display: flex;
    align-items: center;
}
.app-card-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.app-card-body  { padding: 1.25rem; }

/* ── Stat Widgets ────────────────────────────────────────── */
.stat-widget {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
}
.stat-widget:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.sw-icon {
    width: 48px; height: 48px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-widget-blue   .sw-icon { background: #dbeafe; color: #2563eb; }
.stat-widget-green  .sw-icon { background: #d1fae5; color: #059669; }
.stat-widget-red    .sw-icon { background: #fee2e2; color: #dc2626; }
.stat-widget-amber  .sw-icon { background: #fef3c7; color: #d97706; }
.stat-widget-purple .sw-icon { background: #ede9fe; color: #7c3aed; }
.stat-widget-cyan   .sw-icon { background: #cffafe; color: #0891b2; }
.stat-widget-orange .sw-icon { background: #ffedd5; color: #ea580c; }
.stat-widget-teal   .sw-icon { background: #ccfbf1; color: #0d9488; }

.stat-widget-blue   { border-left: 3px solid #3b82f6; background: #eff6ff; }
.stat-widget-green  { border-left: 3px solid #10b981; background: #ecfdf5; }
.stat-widget-red    { border-left: 3px solid #ef4444; background: #fef2f2; }
.stat-widget-amber  { border-left: 3px solid #f59e0b; background: #fffbeb; }
.stat-widget-purple { border-left: 3px solid #7c3aed; background: #f5f3ff; }
.stat-widget-cyan   { border-left: 3px solid #06b6d4; background: #ecfeff; }
.stat-widget-orange { border-left: 3px solid #ea580c; background: #fff7ed; }
.stat-widget-teal   { border-left: 3px solid #14b8a6; background: #f0fdfa; }

/* Stat group: pairs two widgets visually */
.stat-group {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.stat-group .stat-widget {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.stat-group .stat-widget.stat-widget-blue   { border-left: 3px solid #3b82f6; }
.stat-group .stat-widget.stat-widget-green  { border-left: 3px solid #10b981; }
.stat-group .stat-widget.stat-widget-red    { border-left: 3px solid #ef4444; }
.stat-group .stat-widget.stat-widget-amber  { border-left: 3px solid #f59e0b; }
.stat-group .stat-widget.stat-widget-purple { border-left: 3px solid #7c3aed; }
.stat-group .stat-widget.stat-widget-cyan   { border-left: 3px solid #06b6d4; }
.stat-group .stat-widget.stat-widget-orange { border-left: 3px solid #ea580c; }
.stat-group .stat-widget.stat-widget-teal   { border-left: 3px solid #14b8a6; }
.stat-group .stat-widget:first-child {
    border-bottom: 1px solid var(--border);
}
.stat-group .stat-widget:hover { transform: none; }

.sw-number { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.sw-label  { font-size: .8rem;  font-weight: 600; color: var(--text-muted); margin-top: .15rem; }
.sw-sub    { font-size: .72rem; color: #94a3b8; }

/* Compact security activity tiles (dashboard row under main stats) */
.sec-tile-icon {
    width: 38px; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.sec-trend { font-size: .72rem; font-weight: 600; line-height: 1; }
.sec-trend i { font-size: .9rem; vertical-align: -2px; }

/* Mobile-only combined Securitate card (3 mini items stacked) */
.sec-combined .sec-mini { border-bottom: 1px solid var(--border, #e5e7eb); }
.sec-combined .sec-mini:last-child { border-bottom: 0; }
.sec-tile-icon-sm {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}

/* Security tile tones — match the stat-widget palette (subtle bg + colored
   left border + tinted icon) for consistency with the cards above. */
.sec-tone-red  { border-left: 3px solid #ef4444; background: #fef2f2; }
.sec-tone-cyan { border-left: 3px solid #06b6d4; background: #ecfeff; }
.sec-tone-blue { border-left: 3px solid #3b82f6; background: #eff6ff; }
.sec-tone-red  .sec-tile-icon, .sec-tone-red  .sec-tile-icon-sm { background: #fee2e2; color: #dc2626; }
.sec-tone-cyan .sec-tile-icon, .sec-tone-cyan .sec-tile-icon-sm { background: #cffafe; color: #0891b2; }
.sec-tone-blue .sec-tile-icon, .sec-tone-blue .sec-tile-icon-sm { background: #dbeafe; color: #2563eb; }

/* ── Tables ──────────────────────────────────────────────── */
.app-table {
    color: var(--text-primary);
    border-color: var(--border);
    margin: 0;
}
.app-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem 1rem;
}
.app-table tbody td {
    border-bottom: 1px solid var(--border);
    padding: .85rem 1rem;
    vertical-align: middle;
    color: var(--text-primary);
}
.app-table tbody td { font-variant-numeric: tabular-nums; }
/* Hover goes through Bootstrap's --bs-table-bg-state overlay (painted as
   an inset shadow on top of the cell's own background), never through
   `background`: that shorthand wiped every row tint (.table-warning,
   .domain-row-*, …) and the layered background of sticky cells. */
.app-table tbody tr:hover > td { --bs-table-bg-state: rgba(15,23,42,.03); }
.app-table tbody tr:last-child td { border-bottom: none; }

/* Accent variant — used on cert-management tables (PKI list etc.)
   and auto-applied to EVERY .app-table under accented sections via
   body[data-section="accent"] (same rationale as .app-card-accent).
   The outline stays --accent so a table reads as part of the same
   action surface as the buttons around it; inside it everything is
   lighter: a soft blue header with a hairline under it, faint blue row
   dividers, roomier first/last columns.

   border-collapse: separate is what lets the rounded corners show —
   under the reboot's `collapse` the table's border-radius was ignored
   and the corners were always square. Cells only draw a bottom border,
   so nothing doubles up.

   Row hover and selected rows (a checked row checkbox) are an overlay
   (--bs-table-bg-state), so tinted rows (.table-danger / .table-warning
   on the PKI chain, .domain-row-*, .syslog-row-*, .alert-row-*) keep
   their colour and only gain a blue wash. */
.app-table-accent,
body[data-section="accent"] .app-table {
    border: 1px solid var(--accent);
    border-radius: .75rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.app-table-accent thead th,
body[data-section="accent"] .app-table thead th {
    background: #eff6ff;
    border-bottom: 1px solid #93c5fd;
    color: #1d4ed8;
    font-size: .72rem;
    letter-spacing: .06em;
    padding-top: .7rem;
    padding-bottom: .7rem;
    white-space: nowrap;
}
.app-table-accent tbody td,
body[data-section="accent"] .app-table tbody td {
    border-bottom-color: #dbeafe;
}
.app-table-accent > :not(caption) > tr > :first-child,
body[data-section="accent"] .app-table > :not(caption) > tr > :first-child { padding-left: 1.25rem; }
.app-table-accent > :not(caption) > tr > :last-child,
body[data-section="accent"] .app-table > :not(caption) > tr > :last-child { padding-right: 1.25rem; }
.app-table-accent tbody tr:hover > td,
body[data-section="accent"] .app-table tbody tr:hover > td { --bs-table-bg-state: rgba(59,130,246,.07); }
.app-table-accent tbody tr:has(> td .form-check-input:checked) > td,
body[data-section="accent"] .app-table tbody tr:has(> td .form-check-input:checked) > td { --bs-table-bg-state: rgba(59,130,246,.12); }
.app-table-accent tbody tr:has(> td .form-check-input:checked):hover > td,
body[data-section="accent"] .app-table tbody tr:has(> td .form-check-input:checked):hover > td { --bs-table-bg-state: rgba(59,130,246,.16); }
/* A table inside a card's edge-to-edge .table-responsive: thin scrollbar. */
body[data-section="accent"] .table-responsive { scrollbar-width: thin; }

.alert-row-danger    td { border-left: 3px solid #fca5a5 !important; background: #fff5f5; }
.alert-row-warning   td { border-left: 3px solid #fcd34d !important; background: #fffbeb; }
.alert-row-info      td { border-left: 3px solid #67e8f9 !important; background: #f0fdff; }
.alert-row-secondary td { border-left: 3px solid #cbd5e1 !important; background: #f8fafc; }

/* ── Badge borders ────────────────────────────────────────
   Bootstrap's .bg-*-subtle classes pair a very light bg with a dark
   text-*-emphasis foreground but no border by default — the chip
   reads as a soft tint that blends into the page. The solid .bg-*
   variants likewise have no border and look "flat" next to bordered
   chips when both appear in the same row. Adding a 1px border in
   the same colour family (lighter shade for solid, mid shade for
   subtle) gives every chip a defined edge without darkening fill.
   Applies project-wide for visual consistency. */
/* Subtle variants — light fill, mid-tone border */
.badge.bg-primary-subtle   { border: 1px solid #93c5fd; }
.badge.bg-success-subtle   { border: 1px solid #86efac; }
.badge.bg-warning-subtle   { border: 1px solid #fcd34d; }
.badge.bg-danger-subtle    { border: 1px solid #fca5a5; }
.badge.bg-info-subtle      { border: 1px solid #67e8f9; }
.badge.bg-secondary-subtle { border: 1px solid #cbd5e1; }
/* Solid variants — slightly darker shade of the same colour */
.badge.bg-primary   { border: 1px solid #0a58ca; }
.badge.bg-success   { border: 1px solid #146c43; }
.badge.bg-warning   { border: 1px solid #cc9a06; }
.badge.bg-danger    { border: 1px solid #b02a37; }
.badge.bg-info      { border: 1px solid #0aa2c0; }
.badge.bg-secondary { border: 1px solid #565e64; }
.badge.bg-dark      { border: 1px solid #1a1d20; }
/* Plain .bg-light badges already use .border in places, but the
   default Bootstrap border is too washed out — bump the colour. */
.badge.bg-light { border: 1px solid #cbd5e1; }

/* ── Alert mobile cards ─────────────────────────────────── */
.alert-mobile-list { display: none; }
.alert-mobile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-bottom: .5rem;
    background: #fff;
    border-left: 3px solid var(--border);
}
.alert-mobile-card.amc-danger    { border-left-color: #fca5a5; background: #fff5f5; }
.alert-mobile-card.amc-warning   { border-left-color: #fcd34d; background: #fffbeb; }
.alert-mobile-card.amc-info      { border-left-color: #67e8f9; background: #f0fdff; }
.alert-mobile-card.amc-secondary { border-left-color: #cbd5e1; background: #f8fafc; }
.alert-mobile-card .amc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.alert-mobile-card .amc-desc {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: .5rem;
    line-height: 1.4;
}
.alert-mobile-card .amc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
}
.alert-mobile-card .amc-meta i { margin-right: .2rem; }
.alert-mobile-card .amc-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}
/* ── JSON viewer with copy button ────────────────────────── */
.json-block {
    position: relative;
}
.json-block .json-copy-btn {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    font-size: .7rem;
    padding: .2rem .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
}
.json-block .json-copy-btn:hover {
    background: rgba(255,255,255,.25);
}

.alert-mobile-card .amc-json-pre {
    background: #1e293b;
    color: #e2e8f0;
    font-size: .72rem;
    line-height: 1.4;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-top: .5rem;
}

/* ── Agent mobile cards ─────────────────────────────────── */
.agent-mobile-list { display: none; }
.agent-mobile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-bottom: .5rem;
    background: #fff;
}
.agent-mobile-card .agmc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}
.agent-mobile-card .agmc-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
}
.agent-mobile-card .agmc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .35rem;
}
.agent-mobile-card .agmc-meta i { margin-right: .2rem; }
.agent-mobile-card .agmc-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}
.agent-mobile-card .agmc-badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

/* ── Domain mobile cards ─────────────────────────────────── */
.domain-mobile-list { display: none; }
.domain-mobile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-bottom: .5rem;
    background: #fff;
    border-left: 3px solid var(--border);
}
.domain-mobile-card.dmc-ok       { border-left-color: #86efac; background: #f0fdf4; }
.domain-mobile-card.dmc-expiring { border-left-color: #fcd34d; background: #fffbeb; }
.domain-mobile-card.dmc-expired  { border-left-color: #fca5a5; background: #fff5f5; }
.domain-mobile-card.dmc-error    { border-left-color: #cbd5e1; background: #f8fafc; }
.domain-mobile-card .dmc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.domain-mobile-card .dmc-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
    word-break: break-all;
    min-width: 0;
}
.domain-mobile-card .dmc-name i { color: var(--text-muted); flex-shrink: 0; }
.domain-mobile-card .dmc-error {
    margin-bottom: .5rem;
    word-break: break-word;
}
.domain-mobile-card .dmc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
}
.domain-mobile-card .dmc-meta i { margin-right: .2rem; }
.domain-mobile-card .dmc-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-status {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 20px;
}
.badge-status-active          { background: #d1fae5; color: #065f46; }
.badge-status-disconnected    { background: #fee2e2; color: #991b1b; }
.badge-status-never_connected { background: #fef3c7; color: #92400e; }

/* ── Agent status dots ───────────────────────────────────── */
.agent-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.agent-dot-lg { width: 12px; height: 12px; }
.status-active          { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.status-disconnected    { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.status-never_connected { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.status-orphan          { background: #d97706; box-shadow: 0 0 0 3px #fff3cd; }

/* Agent row colors by status */
tr.agent-row[data-status="active"] td              { background: #f0fdf4; }
tr.agent-row[data-status="active"]:hover td        { background: #dcfce7; }
tr.agent-row[data-status="disconnected"] td           { background: #fef2f2; }
tr.agent-row[data-status="disconnected"]:hover td     { background: #fee2e2; }
tr.agent-row[data-status="never_connected"] td         { background: #fffbeb; }
tr.agent-row[data-status="never_connected"]:hover td   { background: #fef3c7; }
.agent-mobile-card[data-status="active"]        { background: #f0fdf4; border-left: 3px solid #10b981; }
.agent-mobile-card[data-status="disconnected"]  { background: #fef2f2; border-left: 3px solid #ef4444; }

.agent-chip {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    border: 1px solid #bfdbfe;
    font-weight: 500;
}

.agent-list { display: flex; flex-direction: column; gap: .5rem; }
.agent-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.agent-name { font-size: .875rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-meta { font-size: .75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-info { flex: 1; min-width: 0; }

/* Agent cards */
.agent-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.agent-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.agent-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.agent-card-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.agent-card-body { padding: 1rem 1.25rem; }
.agent-card-actions {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--border);
    background: #fafafa;
}
.agent-desc { margin-bottom: .75rem; color: var(--text-muted); }

.agent-details { display: flex; flex-direction: column; gap: .4rem; }
.detail-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.detail-row i { width: 14px; color: #94a3b8; }

.enrollment-key-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: .75rem;
}
.enrollment-key-text {
    display: block;
    word-break: break-all;
    font-size: .7rem;
    color: #92400e;
    font-family: monospace;
}
.btn-xs { padding: .15rem .35rem; font-size: .7rem; }

/* ── Progress bars ───────────────────────────────────────── */
.app-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
}

/* ── User cell ───────────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: .75rem; }
.user-avatar-sm {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.user-cell-name  { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.user-cell-email { font-size: .75rem; color: var(--text-muted); }

/* ── Compact alert list ──────────────────────────────────── */
.compact-alert-list { display: flex; flex-direction: column; }
.compact-alert-item {
    display: flex;
    align-items: center;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}
.compact-alert-item:last-child { border-bottom: none; }
.compact-alert-item:hover { background: #f8fafc; }

/* ── Upgrade banner ──────────────────────────────────────── */
.upgrade-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: .85rem 1.25rem;
    color: #92400e;
    display: flex;
    align-items: center;
    font-size: .9rem;
}

/* ── Settings page ─────────────────────────────────────── */
.settings-nav { display:flex; flex-direction:column; }
.settings-nav-item {
    display:flex; align-items:center; gap:.65rem;
    padding:.75rem 1rem; color:var(--text-primary);
    text-decoration:none; border-left:3px solid transparent;
    transition: background .15s, border-color .15s;
    font-size:.9rem;
}
.settings-nav-item:hover { background:#f1f5f9; }
.settings-nav-item.active { background:#eff6ff; border-left-color:var(--accent); color:var(--accent); font-weight:600; }
.settings-nav-item.disabled { opacity:.45; pointer-events:none; }
.settings-nav-item i { font-size:1.1rem; width:1.2rem; text-align:center; }

.settings-item {
    display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem;
    padding:1rem 0;
}
.settings-item-info { flex:1; }
.settings-item-title { font-weight:600; font-size:.95rem; color:var(--text-primary); }
.settings-item-desc { font-size:.85rem; color:var(--text-muted); margin-top:.25rem; }
.settings-item-warn { font-size:.8rem; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--radius); padding:.4rem .65rem; }
.settings-item-control { flex-shrink:0; padding-top:.15rem; }

.nav-tabs-sm .nav-link { font-size:.82rem; padding:.4rem .75rem; }

.settings-toggle { width:3rem !important; height:1.5rem !important; cursor:pointer; }
.settings-toggle:checked { background-color:var(--accent); border-color:var(--accent); }
.settings-toggle ~ .form-check-label { cursor:pointer; font-size:.8rem; color:var(--text-muted); }
.settings-toggle:checked ~ .form-check-label .toggle-label-on { display:inline; }
.settings-toggle:checked ~ .form-check-label .toggle-label-off { display:none; }
.settings-toggle:not(:checked) ~ .form-check-label .toggle-label-on { display:none; }
.settings-toggle:not(:checked) ~ .form-check-label .toggle-label-off { display:inline; }

/* ── User management cards ──────────────────────────────── */
.user-mgmt-card { transition: box-shadow .15s; }
.user-mgmt-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.user-card-inactive { opacity: .55; border-left: 3px solid #ef4444; }
.user-card-inactive:hover { opacity: .8; }
.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--border); }
.admin-user-row:last-child { border-bottom:none; }

/* ── Plan management page ───────────────────────────────── */
.plan-card-active { border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.plan-price-tag { display:flex; align-items:baseline; justify-content:center; gap:.35rem; }
.plan-price-amount { font-size:2rem; font-weight:700; color:var(--text-primary); }
.plan-price-currency { font-size:.85rem; color:var(--text-muted); }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    gap: .5rem;
    padding: 2rem;
}
.empty-state i, .empty-state .bi { font-size: 2.5rem; color: #cbd5e1; }
.empty-state h3 { color: var(--text-primary); font-size: 1.1rem; }
/* The big muted icon is the state's own illustration only — icons inside
   its buttons, badges and links keep their normal size and colour. */
.empty-state .btn .bi, .empty-state .badge .bi, .empty-state a .bi,
.empty-state .btn i, .empty-state .badge i { font-size: inherit; color: inherit; }

/* ── Forms / Inputs ──────────────────────────────────────── */
.app-input, .app-select {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: .6rem .9rem;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
}
.app-input:focus, .app-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
}
.app-input::placeholder { color: #94a3b8 !important; }

.input-group-icon { position: relative; }
.input-group-icon > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .9rem;
    pointer-events: none;
    z-index: 2;
}
.input-group-icon .form-control { padding-left: 2.5rem; }

.form-label { color: var(--text-muted); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary-glow {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: #fff;
    font-weight: 600;
    transition: opacity .2s, box-shadow .2s, transform .15s;
    box-shadow: 0 4px 12px rgba(59,130,246,.35);
}
.btn-primary-glow:hover {
    opacity: .92;
    box-shadow: 0 6px 18px rgba(59,130,246,.45);
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border: none; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Accent variant of .btn-ghost — used for "Inapoi" / back-link
   buttons that should read as the primary nav action on the page.
   On hover the colour darkens (accent → accent-hover) and the
   bi-arrow-left icon nudges 3px left to suggest motion. Reusable
   on any sub-page back button — just add `btn-ghost-accent`. */
.btn-ghost-accent {
    color: var(--accent);
    font-weight: 600;
    transition: color .15s ease, background .15s ease;
}
.btn-ghost-accent:hover,
.btn-ghost-accent:focus {
    color: var(--accent-hover);
    background: var(--accent-glow);
}
.btn-ghost-accent .bi-arrow-left { transition: transform .15s ease; }
.btn-ghost-accent:hover .bi-arrow-left,
.btn-ghost-accent:focus .bi-arrow-left { transform: translateX(-3px); }

/* ── Pagination ──────────────────────────────────────────── */
.app-pagination .page-link {
    background: #fff;
    border-color: var(--border);
    color: var(--text-muted);
    font-size: .875rem;
}
.app-pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.app-pagination .page-link:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Modal ───────────────────────────────────────────────── */
.app-modal { background: #fff; border: 1px solid var(--border); color: var(--text-primary); }
.app-modal .modal-header { border-bottom: 1px solid var(--border); background: #fafafa; }
.app-modal .modal-footer { border-top: 1px solid var(--border); background: #fafafa; }
.app-modal .btn-close { filter: none; }

/* ── Install info box ────────────────────────────────────── */
.install-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.install-info-title { font-size: .9rem; color: #1d4ed8; margin-bottom: .75rem; font-weight: 600; }
.install-steps { font-size: .85rem; color: var(--text-muted); padding-left: 1.2rem; }
.install-steps li { margin-bottom: .4rem; }

.code-block {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: var(--radius-sm);
    padding: .5rem .85rem;
    overflow-x: auto;
}
.code-block code { color: #86efac; font-size: .8rem; }

/* ── Plan selector (register) ────────────────────────────── */
.plan-selector { display: flex; gap: .5rem; }
.plan-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .75rem .5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
    background: #fff;
}
.plan-option input[type="radio"] { display: none; }
.plan-option:hover { border-color: var(--accent); background: #eff6ff; }
.plan-option.selected { border-color: var(--accent); background: #eff6ff; }
.plan-opt-icon { font-size: 1.2rem; color: #94a3b8; }
.plan-option.selected .plan-opt-icon { color: var(--accent); }
.plan-opt-name  { font-size: .75rem; font-weight: 600; color: var(--text-primary); }
.plan-opt-price { font-size: .7rem; color: var(--text-muted); }

/* ── Auth pages ──────────────────────────────────────────── */
.auth-body {
    background: #f1f5f9;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
}

.auth-wrapper { display: flex; min-height: 100vh; }

.auth-panel-left {
    flex: 1;
    background: linear-gradient(160deg, #1e3a8a 0%, #1d4ed8 50%, #0369a1 100%);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.auth-left-content { position: relative; z-index: 2; max-width: 440px; width: 100%; text-align: center; }
.auth-hero-title { font-size: 1.7rem; font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: .75rem; }
.auth-hero-sub { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; }

.auth-panel-left .auth-brand { color: #0f172a; }
.auth-panel-left .auth-brand .brand-dot { color: #fff; }
.auth-panel-left .auth-brand i { color: #93c5fd; }

.auth-illustration-wrap { margin: 1.5rem 0; }
.auth-illustration { width: 100%; max-width: 360px; height: auto; }

.auth-features { display: flex; flex-wrap: wrap; gap: .5rem .75rem; justify-content: center; }
.auth-feature-item {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    padding: .4rem .85rem; border-radius: 2rem;
}
.auth-feature-item i { color: #93c5fd; font-size: .9rem; }

.auth-pricing-cards { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.auth-plan-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: rgba(255,255,255,.85);
}
.auth-plan-item i { color: #93c5fd; font-size: 1rem; }
.auth-plan-item strong { display: block; font-size: .85rem; color: #fff; }
.auth-plan-item .price { margin-left: auto; color: #7dd3fc; font-weight: 700; }

.auth-panel-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f8fafc;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.auth-brand i          { color: var(--accent); }
.auth-brand .brand-dot { color: var(--accent); }
.auth-title { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); margin-bottom: .25rem; text-align: center; }
.auth-sub   { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .9rem; text-align: center; }
.auth-link  { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-terms-link { text-align:center; margin:-.25rem 0 .75rem; font-size:.8rem; }
.auth-terms-link a { color:var(--text-muted); text-decoration:none; }
.auth-terms-link a:hover { color:var(--accent); text-decoration:underline; }
.auth-footer-links { display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.auth-footer-links a { font-size:.78rem; color:var(--text-muted); text-decoration:none; }
.auth-footer-links a:hover { color:var(--accent); text-decoration:underline; }
.auth-footer-links span { color:var(--border); font-size:.78rem; }

/* ── Brand "SECaaS" inside "PKIPlayground" gets the accent color
   so the brand reads as `app` + `SECaaS` (accent). The token wrap
   is added at runtime by /assets/js/brand-color.js, which walks
   text nodes and substitutes the colored span. Standalone rule
   here so the styling works outside .landing-brand contexts too. */
.brand-dot { color: var(--accent); }

/* ── Language switcher ─────────────────────────────────── */
.btn-lang {
    /* Flag-only language switcher. The button is sized to the SVG flag
       plus a small frame; no text label inside. */
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 .55rem;
    background: var(--bg-hover);
    border: 1px solid var(--border); border-radius: 999px;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.btn-lang:hover { border-color: var(--accent); background: rgba(59,130,246,.06); transform: translateY(-1px); }
.btn-lang .lang-flag {
    /* Inline SVG flag — uniform render across OSes (Unicode emoji flags
       fall apart on Windows / minimal-font Linux, displaying as two
       letter-boxes which looked like the badge was duplicated). */
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* ── Google Sign-In button ───────────────────────────────── */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #dadce0;
    color: #3c4043;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: #3c4043;
    border-color: #c6c9cc;
}
.btn-google svg { flex-shrink: 0; }

/* ── Google disabled state ───────────────────────────────── */
.btn-google-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-google-disabled svg { opacity: .4; flex-shrink: 0; }
.google-disabled-badge {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    padding: .15rem .5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── GitHub button ───────────────────────────────────────── */
.btn-github {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #dadce0;
    color: #3c4043;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-github:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: #3c4043;
    border-color: #c6c9cc;
}
.btn-github-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-github-disabled .bi-github { opacity: .4; }

/* Microsoft OAuth button */
.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #2f2f2f;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    transition: all .2s;
}
.btn-microsoft:hover {
    background: #f0f6ff;
    border-color: #00a4ef;
    color: #00a4ef;
}
.btn-microsoft-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    cursor: not-allowed;
    position: relative;
}
.btn-microsoft-disabled .bi-microsoft { opacity: .4; }

/* ── AI Analysis ────────────────────────────────────────── */
.ai-analysis-text {
    font-size: .875rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-analysis-text strong { color: var(--text-primary); }

/* ── Auth divider ────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.1rem 0;
    color: #94a3b8;
    font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Method selector (register step 1) ───────────────────── */
.btn-method-local {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .9rem 1rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: .65rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: var(--shadow-sm);
}
.btn-method-local:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: #fafcff;
    color: var(--text-primary);
}
.method-icon {
    width: 40px; height: 40px;
    background: #eff6ff;
    border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    flex-shrink: 0;
}
.method-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.method-title { font-weight: 600; font-size: .9rem; }
.method-sub   { font-size: .77rem; color: var(--text-muted); }
.method-arrow { color: #94a3b8; font-size: .85rem; }

/* ── Back link ───────────────────────────────────────────── */
.btn-back-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: .85rem;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.btn-back-link:hover { color: var(--text-primary); }

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
    background: #fff;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
}
.brand-name-sm { font-weight: 700; font-size: .95rem; color: var(--text-primary); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Responsive ──────────────────────────────────────────── */
/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Layout */
    .app-page { padding: .75rem 0; }
    .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Navbar */
    .app-navbar { padding: .4rem 0; }
    .brand-icon { width: 28px; height: 28px; font-size: .85rem; }
    .brand-name { font-size: .95rem; }
    .app-navbar .nav-link { font-size: .8rem; padding: .5rem .6rem; }
    .navbar-toggler { border: none; padding: .25rem; }
    .navbar-collapse { background: #fff; border-radius: var(--radius); margin-top: .5rem; padding: .5rem; box-shadow: var(--shadow); }
    .navbar-nav .nav-item { border-bottom: 1px solid var(--border); }
    .navbar-nav .nav-item:last-child { border-bottom: none; }
    .btn-user { font-size: .85rem; padding: .35rem .5rem; }
    .user-avatar { width: 28px; height: 28px; font-size: .7rem; }

    /* Page headers */
    .page-header { margin-bottom: 1rem !important; }
    .page-title { font-size: 1.2rem; }
    .page-sub { font-size: .8rem; }

    /* Stat widgets */
    .stat-widget { padding: .75rem; }
    .sw-icon { width: 32px; height: 32px; font-size: .85rem; }
    .sw-number { font-size: 1.3rem; }
    .sw-label { font-size: .7rem; }
    .sw-sub { font-size: .6rem; }

    /* Cards */
    .app-card { border-radius: var(--radius-sm); }
    .app-card-header { padding: .75rem 1rem; }
    .app-card-body { padding: .75rem 1rem; }
    .app-card-title { font-size: .9rem; }

    /* Tables */
    .app-table th { font-size: .7rem; padding: .5rem; }
    .app-table td { font-size: .78rem; padding: .5rem; }
    .agent-chip { font-size: .7rem; padding: .15rem .4rem; }

    /* User management cards */
    .user-mgmt-card .row { gap: .5rem !important; }
    .user-cell-name { font-size: .85rem; }
    .user-cell-email { font-size: .7rem; }
    .user-avatar-sm { width: 30px; height: 30px; font-size: .7rem; }

    /* Buttons */
    .btn-sm { font-size: .75rem; padding: .3rem .5rem; }

    /* Plan selector */
    .plan-selector { flex-direction: column; }
    .plan-option { flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .6rem .75rem; }

    /* Upgrade banner */
    .upgrade-banner { flex-direction: column; gap: .5rem; text-align: center; font-size: .8rem; }

    /* Plan page cards */
    .plan-price-amount { font-size: 1.5rem; }

    /* Settings */
    .settings-item { flex-direction: column; gap: .75rem; }
    .settings-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; white-space: nowrap; padding: .25rem 0; }
    .settings-nav-item { font-size: .75rem; padding: .45rem .6rem; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; gap: .35rem; }
    .settings-nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent); }
    .settings-nav-item i { font-size: .9rem; }
    .settings-nav-item .badge { display: none; }
    /* Webhook/settings cards mobile */
    .wh-card-header { flex-direction: column !important; gap: .75rem; }
    .wh-card-header > .d-flex.gap-1 { flex-wrap: wrap; }
    /* Monospace inputs overflow */
    .font-monospace { font-size: .75rem !important; }
    /* Settings card titles */
    .app-card-header .app-card-title { font-size: .9rem; }
    .app-card-header { flex-wrap: wrap; gap: .5rem; }

    /* Filters bar */
    .app-card .row.g-2 > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }

    /* Alert & Agent mobile cards */
    .alert-desktop-table, .agent-desktop-table { display: none !important; }
    .alert-mobile-list, .agent-mobile-list { display: block !important; padding: .75rem; }
    .alert-mobile-card .amc-meta { gap: .25rem .5rem; }

    /* Domain mobile cards */
    .domain-desktop-table { display: none !important; }
    .domain-mobile-list { display: block !important; padding: .75rem; }
    .domain-mobile-card .dmc-meta { gap: .25rem .5rem; }
    /* Domain settings collapse — auto-width selects expand to fill row on small screens */
    #domainSettings .form-select.app-select.form-select-sm { width: 100% !important; }
    #domainSettings .row.g-2.align-items-center > .col-auto:has(.form-select) { flex: 1 1 100%; }

    /* Mass delete mobile */
    .mass-delete-form .col-md-4,
    .mass-delete-form .col-md-3,
    .mass-delete-form .col-md-2 { flex: 0 0 100%; max-width: 100%; }

    /* Auth pages */
    .auth-panel-left { display: none !important; }
    .auth-panel-right { padding: 1.25rem; }
    .auth-form-wrap { max-width: 100%; }
    .auth-title { font-size: 1.4rem; }
    .auth-sub { font-size: .85rem; }

    /* Footer */
    .app-footer { font-size: .8rem; }

    /* Dropdown menu */
    .dropdown-menu { font-size: .85rem; }
    .app-dropdown { min-width: 240px !important; }
}

/* ── Small mobile (< 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .stat-widget .sw-icon { display: none; }
    .sw-number { font-size: 1.5rem; }
    .page-title { font-size: 1.1rem; }
    .auth-title { font-size: 1.2rem; }
    .auth-panel-right { padding: 1rem; }
    .btn-lg { padding: .6rem 1rem; font-size: .9rem; }
}

/* ── Modern buttons (authenticated app) ───────────────────────────────
   One layer over Bootstrap 5.3's button variables, so every view keeps
   its markup (.btn-sm .btn-outline-secondary …) and only the look
   changes: rounder corners, even heights, a hairline shadow, soft
   tinted variants instead of hollow outlines, and a visible focus ring.
   Scoped to body[data-section="accent"] — both authenticated layouts
   set it; the auth / legal pages keep plain Bootstrap.

   Variants:
     .btn-primary            solid accent, the one main action
     .btn-outline-secondary  white surface, slate hairline (everyday)
     .btn-outline-primary    soft blue tint (secondary-but-important)
     .btn-outline-info|danger|warning|success  soft tints of their hue
   A .btn-check radio keeps a SOLID checked state, so toggle groups
   (Endpoint / Server extern, MAC / Semnatura …) still read as chosen. */
body[data-section="accent"] .btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: .5625rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(59,130,246,.28);
    letter-spacing: -.005em;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
body[data-section="accent"] .btn-sm {
    --bs-btn-padding-y: .34rem;
    --bs-btn-padding-x: .72rem;
    --bs-btn-font-size: .84rem;
    --bs-btn-border-radius: .5rem;
}
body[data-section="accent"] .btn > .bi:first-child:not(:only-child) { margin-right: .4rem !important; }

body[data-section="accent"] .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
    --bs-btn-disabled-bg: #93c5fd;
    --bs-btn-disabled-border-color: #93c5fd;
    box-shadow: 0 1px 2px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
body[data-section="accent"] .btn-outline-secondary {
    --bs-btn-color: #334155;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f8fafc;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #f1f5f9;
    --bs-btn-active-border-color: #94a3b8;
    --bs-btn-disabled-color: #94a3b8;
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
body[data-section="accent"] .btn-outline-primary {
    --bs-btn-color: #1d4ed8;
    --bs-btn-bg: #eff6ff;
    --bs-btn-border-color: #bfdbfe;
    --bs-btn-hover-color: #1e40af;
    --bs-btn-hover-bg: #dbeafe;
    --bs-btn-hover-border-color: #93c5fd;
    --bs-btn-active-color: #1e40af;
    --bs-btn-active-bg: #dbeafe;
    --bs-btn-active-border-color: #93c5fd;
    --bs-btn-disabled-color: #93c5fd;
    --bs-btn-disabled-bg: #f8fafc;
    --bs-btn-disabled-border-color: #dbeafe;
}
body[data-section="accent"] .btn-outline-info {
    --bs-btn-color: #0e7490;
    --bs-btn-bg: #ecfeff;
    --bs-btn-border-color: #a5f3fc;
    --bs-btn-hover-color: #155e75;
    --bs-btn-hover-bg: #cffafe;
    --bs-btn-hover-border-color: #67e8f9;
    --bs-btn-active-color: #155e75;
    --bs-btn-active-bg: #cffafe;
    --bs-btn-active-border-color: #67e8f9;
}
body[data-section="accent"] .btn-outline-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-bg: #fef2f2;
    --bs-btn-border-color: #fecaca;
    --bs-btn-hover-color: #991b1b;
    --bs-btn-hover-bg: #fee2e2;
    --bs-btn-hover-border-color: #fca5a5;
    --bs-btn-active-color: #991b1b;
    --bs-btn-active-bg: #fee2e2;
    --bs-btn-active-border-color: #fca5a5;
}
body[data-section="accent"] .btn-outline-warning {
    --bs-btn-color: #b45309;
    --bs-btn-bg: #fffbeb;
    --bs-btn-border-color: #fde68a;
    --bs-btn-hover-color: #92400e;
    --bs-btn-hover-bg: #fef3c7;
    --bs-btn-hover-border-color: #fcd34d;
    --bs-btn-active-color: #92400e;
    --bs-btn-active-bg: #fef3c7;
    --bs-btn-active-border-color: #fcd34d;
}
body[data-section="accent"] .btn-outline-success {
    --bs-btn-color: #047857;
    --bs-btn-bg: #ecfdf5;
    --bs-btn-border-color: #a7f3d0;
    --bs-btn-hover-color: #065f46;
    --bs-btn-hover-bg: #d1fae5;
    --bs-btn-hover-border-color: #6ee7b7;
    --bs-btn-active-color: #065f46;
    --bs-btn-active-bg: #d1fae5;
    --bs-btn-active-border-color: #6ee7b7;
}
/* Toggle groups: a checked radio is solid, never just a lighter tint. */
body[data-section="accent"] .btn-check:checked + .btn-outline-primary {
    color: #ffffff; background-color: var(--accent); border-color: var(--accent);
}
body[data-section="accent"] .btn-check:checked + .btn-outline-secondary {
    color: #ffffff; background-color: #475569; border-color: #475569;
}
/* Ghost-type buttons stay flat. */
body[data-section="accent"] .btn-link,
body[data-section="accent"] .btn-ghost,
body[data-section="accent"] .btn-ghost-accent { box-shadow: none; }
/* Count badges inside a button read as a small pill, not a grey slab. */
body[data-section="accent"] .btn .badge.bg-secondary {
    background: #f1f5f9 !important;
    color: #475569;
    font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: .22rem .4rem;
    border-radius: .375rem;
    border: 0;
}
body[data-section="accent"] .btn-outline-primary .badge.bg-secondary { background: #dbeafe !important; color: #1e40af; }
/* Button groups: one surface with hairline dividers (segmented). */
body[data-section="accent"] .btn-group > .btn,
body[data-section="accent"] .btn-group > .btn-group > .btn { box-shadow: none; }
body[data-section="accent"] .btn-group.btn-group-seg {
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
body[data-section="accent"] .btn-group.btn-group-seg > .btn + .btn,
body[data-section="accent"] .btn-group.btn-group-seg > .btn-group + .btn,
body[data-section="accent"] .btn-group.btn-group-seg > .btn-group + .btn-group > .btn,
body[data-section="accent"] .btn-group.btn-group-seg > .btn + .btn-group > .btn { border-left-color: #e2e8f0; }
/* Dropdown carets: smaller, quieter. */
body[data-section="accent"] .btn.dropdown-toggle::after { border-top-width: .28em; border-right-width: .28em; border-left-width: .28em; opacity: .55; margin-left: .4em; }

/* Row actions: quiet icon buttons inside tables. No fill or border at
   rest; the icon keeps its variant's colour (red trash, green play, cyan
   eye…) so state-coloured toggles still read at a glance, and the tint
   appears on hover. Opt-in with .btn-row on icon-only buttons. */
body[data-section="accent"] .btn.btn-row {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    min-width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border-color: transparent; box-shadow: none; color: #475569;
}
body[data-section="accent"] .btn.btn-row:hover,
body[data-section="accent"] .btn.btn-row.show { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
body[data-section="accent"] .btn.btn-row:disabled { background: transparent; border-color: transparent; color: #cbd5e1; }
body[data-section="accent"] .btn.btn-row.btn-outline-primary { color: #2563eb; }
body[data-section="accent"] .btn.btn-row.btn-outline-info    { color: #0e7490; }
body[data-section="accent"] .btn.btn-row.btn-outline-danger  { color: #dc2626; }
body[data-section="accent"] .btn.btn-row.btn-outline-warning { color: #b45309; }
body[data-section="accent"] .btn.btn-row.btn-outline-success { color: #059669; }
body[data-section="accent"] .btn.btn-row.btn-outline-primary:hover,
body[data-section="accent"] .btn.btn-row.btn-outline-primary.show  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
body[data-section="accent"] .btn.btn-row.btn-outline-info:hover    { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
body[data-section="accent"] .btn.btn-row.btn-outline-danger:hover  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
body[data-section="accent"] .btn.btn-row.btn-outline-warning:hover { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body[data-section="accent"] .btn.btn-row.btn-outline-success:hover { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
body[data-section="accent"] .btn.btn-row:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow); }

/* Dropdown menus: floating panel, rounded items. */
body[data-section="accent"] .dropdown-menu {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .375rem;
    box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
}
body[data-section="accent"] .dropdown-menu .dropdown-item {
    border-radius: .5rem;
    padding: .45rem .65rem;
    font-size: .875rem;
}
body[data-section="accent"] .dropdown-menu .dropdown-item:hover,
body[data-section="accent"] .dropdown-menu .dropdown-item:focus { background: #f1f5f9; }
body[data-section="accent"] .dropdown-menu .dropdown-item:active { background: #eff6ff; color: #1d4ed8; }
body[data-section="accent"] .dropdown-menu .dropdown-header {
    font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #64748b; padding: .45rem .65rem .25rem;
}
body[data-section="accent"] .dropdown-menu .dropdown-divider { margin: .3rem .25rem; border-top-color: #e2e8f0; }

@media (max-width: 768px) {
    body[data-section="accent"] .btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .78rem; }
}

/* ── Modals ───────────────────────────────────────────────────────────
   Floating panel in the same family as the dropdown menus: larger
   radius, no hard border, a soft deep shadow, a dimmed + lightly
   blurred backdrop, a white header with a quiet close button, a light
   footer strip, and a short rise-in. Works on Bootstrap's --bs-modal-*
   variables, so all 84 modals keep their markup. Also neutralises the
   blue .app-card border that `.modal-content.app-card` picked up from
   the accent-section card rule. */
body[data-section="accent"] .modal {
    --bs-modal-border-radius: 1rem;
    --bs-modal-inner-border-radius: calc(1rem - 1px);
    --bs-modal-border-color: rgba(15,23,42,.08);
    --bs-modal-box-shadow: 0 24px 64px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.08);
    --bs-modal-header-padding: 1rem 1.25rem;
    --bs-modal-header-border-color: #e2e8f0;
    --bs-modal-padding: 1.25rem;
    --bs-modal-footer-border-color: #e2e8f0;
    --bs-modal-footer-gap: .5rem;
    --bs-modal-title-line-height: 1.35;
}
body[data-section="accent"] .modal-backdrop {
    --bs-backdrop-bg: #0f172a;
    --bs-backdrop-opacity: .45;
}
body[data-section="accent"] .modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body[data-section="accent"] .modal-content,
body[data-section="accent"] .modal-content.app-modal,
body[data-section="accent"] .modal-content.app-card {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.08);
    background: #ffffff;
    overflow: hidden;
}
body[data-section="accent"] .modal-header,
body[data-section="accent"] .app-modal .modal-header,
body[data-section="accent"] .modal-header.app-card-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
    gap: .75rem;
}
body[data-section="accent"] .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #0f172a;
    min-width: 0;
}
body[data-section="accent"] .modal-title > .bi:first-child { color: var(--accent); }
body[data-section="accent"] .modal-body { color: #0f172a; }
body[data-section="accent"] .modal-footer,
body[data-section="accent"] .app-modal .modal-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: .85rem 1.25rem;
}
/* Close button: a quiet square that lights up on hover. */
body[data-section="accent"] .modal-header .btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: -.25rem -.4rem -.25rem auto;
    border-radius: .5rem;
    background-size: .7rem;
    opacity: .55;
    flex: none;
    transition: opacity .12s ease, background-color .12s ease;
}
body[data-section="accent"] .modal-header .btn-close:hover { opacity: 1; background-color: #f1f5f9; }
body[data-section="accent"] .modal-header .btn-close:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.28); opacity: 1; }
/* Short rise-in instead of Bootstrap's long slide from the top. */
body[data-section="accent"] .modal.fade .modal-dialog {
    transform: translateY(10px) scale(.985);
    transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
body[data-section="accent"] .modal.show .modal-dialog { transform: none; }
body[data-section="accent"] .modal.modal-static .modal-dialog { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] .modal.fade .modal-dialog { transition: none; transform: none; }
    body[data-section="accent"] .modal-backdrop.show { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Scrollable modals: the body scrolls between a fixed header and footer. */
body[data-section="accent"] .modal-dialog-scrollable .modal-body { scrollbar-width: thin; }
@media (max-width: 576px) {
    body[data-section="accent"] .modal-dialog { margin: .75rem; }
    body[data-section="accent"] .modal { --bs-modal-padding: 1rem; --bs-modal-header-padding: .85rem 1rem; }
}

/* ── Cards ────────────────────────────────────────────────────────────
   Keeps the accent outline (the section's identity) but in the family
   of the other modern controls: a 1rem radius, a soft two-layer shadow,
   a white header over a faint blue hairline, a slightly stronger title.

   Two fixes ride along:
   - a table placed edge-to-edge in a card (.app-card > .table-responsive
     or .app-card-body.p-0 > .table-responsive, ~100 places) drew its own
     accent outline right on top of the card's → doubled blue edges. The
     card now provides the frame and the table drops its outer border.
   - a card nested in another card's body repeated the full accent
     outline; inner cards get a quiet blue-100 hairline instead.
   Stat widgets: the 3px left stripe becomes a full hairline in the
   widget's own hue, on the same tinted background. */
body[data-section="accent"] .app-card {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(59,130,246,.07);
}
body[data-section="accent"] .app-card-header {
    background: #ffffff;
    border-bottom: 1px solid #dbeafe;
    padding: .95rem 1.25rem;
    gap: .75rem;
    flex-wrap: wrap;
}
body[data-section="accent"] .app-card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #0f172a;
}
body[data-section="accent"] .app-card-title > .bi:first-child { color: var(--accent); }
/* Inner cards: a quiet frame, no second shadow. */
body[data-section="accent"] .app-card .app-card {
    border-color: #dbeafe;
    border-radius: .75rem;
    box-shadow: none;
}
/* Edge-to-edge tables: the card is the frame. */
body[data-section="accent"] .app-card > .table-responsive > .app-table,
body[data-section="accent"] .app-card > .app-card-body.p-0 > .table-responsive > .app-table,
body[data-section="accent"] .app-card > .app-card-body.p-0 > .app-table {
    border: 0;
    border-radius: 0;
}
/* Bootstrap .card (a handful of pages): same shape as .app-card. */
body[data-section="accent"] .card {
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
    --bs-card-border-color: #dbeafe;
    --bs-card-cap-bg: #ffffff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(59,130,246,.05);
    overflow: hidden;
}
/* Stat widgets + stat groups. */
body[data-section="accent"] .stat-widget,
body[data-section="accent"] .stat-group { border-radius: 1rem; }
body[data-section="accent"] .stat-widget .sw-icon { border-radius: .75rem; }
body[data-section="accent"] .stat-widget-blue   { border: 1px solid #bfdbfe; }
body[data-section="accent"] .stat-widget-green  { border: 1px solid #a7f3d0; }
body[data-section="accent"] .stat-widget-red    { border: 1px solid #fecaca; }
body[data-section="accent"] .stat-widget-amber  { border: 1px solid #fde68a; }
body[data-section="accent"] .stat-widget-purple { border: 1px solid #ddd6fe; }
body[data-section="accent"] .stat-widget-cyan   { border: 1px solid #a5f3fc; }
body[data-section="accent"] .stat-widget-orange { border: 1px solid #fed7aa; }
body[data-section="accent"] .stat-widget-teal   { border: 1px solid #99f6e4; }
body[data-section="accent"] .stat-group .stat-widget[class*="stat-widget-"] { border: 0; }
body[data-section="accent"] .stat-group .stat-widget:first-child { border-bottom: 1px solid #e2e8f0; }
@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] .stat-widget:hover { transform: none; }
}
@media (max-width: 768px) {
    body[data-section="accent"] .app-card { border-radius: .75rem; }
    body[data-section="accent"] .app-card-header { padding: .75rem 1rem; }
}

/* ── Navbar ───────────────────────────────────────────────────────────
   Both layouts (header.php and the Instrumente misc_header.php) share
   .app-navbar / .nav-link / .app-dropdown / .btn-user, so one block
   covers them. Frosted white bar (translucent + blur) with a hairline
   edge; menu items are quiet slate pills that light up on hover, the
   active section a soft accent pill; the user button becomes a rounded
   chip; nav dropdowns follow the modern menu panel. The branding
   override from settings (`.app-navbar { background: … !important }`)
   still wins: nothing here uses !important on the bar's background. */
body[data-section="accent"] .app-navbar {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 6px 20px -12px rgba(15,23,42,.18);
    padding: .5rem 0;
}
body[data-section="accent"] .app-navbar .navbar-nav { gap: .125rem; }
body[data-section="accent"] .app-navbar .nav-link {
    color: #475569;
    opacity: 1;
    font-weight: 500;
    padding: .45rem .75rem;
    border-radius: .5625rem;
    transition: color .12s ease, background-color .12s ease;
}
body[data-section="accent"] .app-navbar .nav-link > .bi { opacity: .85; }
body[data-section="accent"] .app-navbar .nav-link:hover,
body[data-section="accent"] .app-navbar .nav-link:focus-visible,
body[data-section="accent"] .app-navbar .nav-link.show {
    color: #0f172a;
    background: #f1f5f9;
}
body[data-section="accent"] .app-navbar .nav-link.active {
    color: #1d4ed8;
    background: #eff6ff;
    font-weight: 600;
}
body[data-section="accent"] .app-navbar .nav-link.active > .bi { opacity: 1; }
body[data-section="accent"] .app-navbar .nav-link:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.28); outline: none; }
body[data-section="accent"] .app-navbar .nav-link.dropdown-toggle::after {
    border-top-width: .28em; border-right-width: .28em; border-left-width: .28em;
    opacity: .55; margin-left: .35em; vertical-align: .15em;
}
/* Nav dropdowns: the modern menu panel, a little offset from the bar. */
body[data-section="accent"] .app-navbar .app-dropdown {
    border-radius: .875rem;
    margin-top: .35rem !important;
    min-width: 240px;
}
body[data-section="accent"] .app-navbar .app-dropdown .dropdown-item > .bi { color: #64748b; width: 1.1rem; display: inline-block; text-align: center; }
body[data-section="accent"] .app-navbar .app-dropdown .dropdown-item.active,
body[data-section="accent"] .app-navbar .app-dropdown .dropdown-item:active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}
body[data-section="accent"] .app-navbar .app-dropdown .dropdown-item.active > .bi { color: #2563eb; }
/* User chip. */
body[data-section="accent"] .app-navbar .btn-user {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .2rem .7rem .2rem .25rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    color: #0f172a;
    font-weight: 500;
}
body[data-section="accent"] .app-navbar .btn-user:hover,
body[data-section="accent"] .app-navbar .btn-user.show { background: #f8fafc; border-color: #cbd5e1; }
body[data-section="accent"] .app-navbar .user-avatar { width: 30px; height: 30px; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #dbeafe; }
body[data-section="accent"] .app-navbar .plan-badge { border-radius: 999px; }
/* Mobile toggler + the opened menu as a clean panel. */
body[data-section="accent"] .app-navbar .navbar-toggler {
    border: 1px solid #e2e8f0;
    border-radius: .5625rem;
    padding: .35rem .55rem;
}
body[data-section="accent"] .app-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.28); }
@media (max-width: 991.98px) {
    body[data-section="accent"] .app-navbar .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: .875rem;
        box-shadow: 0 12px 32px rgba(15,23,42,.10);
    }
    body[data-section="accent"] .app-navbar .app-dropdown { box-shadow: none; border-color: #f1f5f9; }
}
/* Tools sub-app navbar (more top-level items than the main one): labels
   and the "back to app" button stay on one line — they used to wrap into
   2–3 line stacks — and the bar collapses into the hamburger below xxl,
   since on one line it needs ~1340px. The collapsed panel gets the same
   card look as the main navbar's below lg. */
body[data-section="accent"] .app-navbar.navbar-expand-xxl .nav-link,
body[data-section="accent"] .app-navbar.navbar-expand-xxl .navbar-nav .btn { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    body[data-section="accent"] .app-navbar.navbar-expand-xxl .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: .875rem;
        box-shadow: 0 12px 32px rgba(15,23,42,.10);
    }
    body[data-section="accent"] .app-navbar.navbar-expand-xxl .app-dropdown { box-shadow: none; border-color: #f1f5f9; }
}
@media (prefers-reduced-transparency: reduce) {
    body[data-section="accent"] .app-navbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Badges ───────────────────────────────────────────────────────────
   One chip shape for all ~960 badges: a small rounded rectangle, 600
   weight, a hairline border in the hue's 200 shade.
   Colour logic:
   - the solid hues people use for state (primary / success / info /
     warning / secondary / light) become soft tints with dark text in
     the same hue — readable, calmer in dense tables;
   - .bg-danger and .bg-dark stay SOLID: they flag what must stand out
     (revoked, critical, error), so they keep their weight.
   - the *-subtle variants already are tints; their borders and text
     are aligned to the same palette.
   Overrides Bootstrap's !important bg utilities, hence !important here;
   text-dark/text-white utilities on a tinted badge are overridden too
   so the text always matches its tint. A badge inside a button keeps
   the count-pill rule from the "Modern buttons" block (more specific). */
body[data-section="accent"] .badge {
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-y: .32em;
    --bs-badge-padding-x: .55em;
    --bs-badge-border-radius: .4rem;
    letter-spacing: .01em;
    line-height: 1.15;
    border: 1px solid transparent;
}
body[data-section="accent"] .badge.rounded-pill { --bs-badge-border-radius: 999px; }
body[data-section="accent"] .badge > .bi { font-size: .95em; vertical-align: -.05em; }

body[data-section="accent"] .badge.bg-primary,
body[data-section="accent"] .badge.bg-primary-subtle   { background-color: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe; }
body[data-section="accent"] .badge.bg-success,
body[data-section="accent"] .badge.bg-success-subtle   { background-color: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0; }
body[data-section="accent"] .badge.bg-info,
body[data-section="accent"] .badge.bg-info-subtle      { background-color: #cffafe !important; color: #155e75 !important; border-color: #a5f3fc; }
body[data-section="accent"] .badge.bg-warning,
body[data-section="accent"] .badge.bg-warning-subtle   { background-color: #fef3c7 !important; color: #92400e !important; border-color: #fde68a; }
body[data-section="accent"] .badge.bg-secondary,
body[data-section="accent"] .badge.bg-secondary-subtle { background-color: #f1f5f9 !important; color: #334155 !important; border-color: #cbd5e1; }
body[data-section="accent"] .badge.bg-light            { background-color: #f8fafc !important; color: #334155 !important; border-color: #e2e8f0; }
body[data-section="accent"] .badge.bg-danger-subtle    { background-color: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca; }
/* Kept solid on purpose. */
body[data-section="accent"] .badge.bg-danger { background-color: #dc2626 !important; color: #ffffff !important; border-color: #dc2626; box-shadow: 0 1px 2px rgba(220,38,38,.25); }
body[data-section="accent"] .badge.bg-dark   { background-color: #1e293b !important; color: #ffffff !important; border-color: #1e293b; }


/* ── Alerts ───────────────────────────────────────────────────────────
   Same palette as the badges: a 50-shade tint, a 200-shade hairline,
   800-shade text, a rounded .75rem panel. Alerts that carry no icon of
   their own (flash messages mostly; ~135 of the ~245 already have one)
   get one automatically, drawn as an SVG mask in the text colour so it
   needs no icon font; .alert is position:relative in Bootstrap, so the
   icon sits absolutely and never disturbs inline or d-flex content.
   Icons that are already there take the variant's mid colour. */
body[data-section="accent"] .alert {
    --bs-alert-border-radius: .75rem;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .8rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body[data-section="accent"] .alert.py-2 { --bs-alert-padding-y: .55rem; }
body[data-section="accent"] .alert:not(:has(.bi))::before {
    content: "";
    position: absolute;
    left: .95rem;
    top: calc(var(--bs-alert-padding-y) + .12em);
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: var(--alert-icon) no-repeat center / contain;
    mask: var(--alert-icon) no-repeat center / contain;
}
body[data-section="accent"] .alert:not(:has(.bi)) { padding-left: 2.6rem; }
body[data-section="accent"] .alert .alert-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body[data-section="accent"] .alert .alert-heading { font-weight: 600; font-size: 1rem; }
body[data-section="accent"] .alert hr { opacity: .2; }
body[data-section="accent"] .alert-dismissible .btn-close {
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    right: .5rem;
    border-radius: .5rem;
    background-size: .6rem;
    opacity: .5;
}
body[data-section="accent"] .alert-dismissible .btn-close:hover { opacity: 1; background-color: rgba(15,23,42,.06); }
body[data-section="accent"] .alert-dismissible { padding-right: 2.75rem; }
body[data-section="accent"] .alert-primary { --bs-alert-bg: #eff6ff; --bs-alert-border-color: #bfdbfe; --bs-alert-color: #1e40af; --bs-alert-link-color: #1e40af; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-primary > .bi:not([class*="text-"]), body[data-section="accent"] .alert-primary > strong > .bi:not([class*="text-"]) { color: #1d4ed8; }
body[data-section="accent"] .alert-info { --bs-alert-bg: #ecfeff; --bs-alert-border-color: #a5f3fc; --bs-alert-color: #155e75; --bs-alert-link-color: #155e75; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-info > .bi:not([class*="text-"]), body[data-section="accent"] .alert-info > strong > .bi:not([class*="text-"]) { color: #0e7490; }
body[data-section="accent"] .alert-success { --bs-alert-bg: #f0fdf4; --bs-alert-border-color: #bbf7d0; --bs-alert-color: #166534; --bs-alert-link-color: #166534; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-success > .bi:not([class*="text-"]), body[data-section="accent"] .alert-success > strong > .bi:not([class*="text-"]) { color: #15803d; }
body[data-section="accent"] .alert-warning { --bs-alert-bg: #fffbeb; --bs-alert-border-color: #fde68a; --bs-alert-color: #92400e; --bs-alert-link-color: #92400e; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-warning > .bi:not([class*="text-"]), body[data-section="accent"] .alert-warning > strong > .bi:not([class*="text-"]) { color: #b45309; }
body[data-section="accent"] .alert-danger { --bs-alert-bg: #fef2f2; --bs-alert-border-color: #fecaca; --bs-alert-color: #991b1b; --bs-alert-link-color: #991b1b; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='m15%209-6%206'/%3E%3Cpath%20d='m9%209%206%206'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-danger > .bi:not([class*="text-"]), body[data-section="accent"] .alert-danger > strong > .bi:not([class*="text-"]) { color: #b91c1c; }
body[data-section="accent"] .alert-secondary { --bs-alert-bg: #f8fafc; --bs-alert-border-color: #e2e8f0; --bs-alert-color: #334155; --bs-alert-link-color: #334155; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-secondary > .bi:not([class*="text-"]), body[data-section="accent"] .alert-secondary > strong > .bi:not([class*="text-"]) { color: #475569; }
body[data-section="accent"] .alert-light { --bs-alert-bg: #ffffff; --bs-alert-border-color: #e2e8f0; --bs-alert-color: #334155; --bs-alert-link-color: #334155; --alert-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E"); }
body[data-section="accent"] .alert-light > .bi:not([class*="text-"]), body[data-section="accent"] .alert-light > strong > .bi:not([class*="text-"]) { color: #475569; }

/* ── Pagination ───────────────────────────────────────────────────────
   Separate rounded buttons with a small gap instead of one joined strip,
   in the modern button style: white + slate hairline + hairline shadow,
   the current page a solid accent button, disabled arrows faded, the
   "…" / "3 / 12" items plain text without a frame. Works through
   Bootstrap's --bs-pagination-* variables, so both .app-pagination and
   plain .pagination lists (32 views) change without markup edits. */
body[data-section="accent"] .pagination {
    --bs-pagination-padding-x: .6rem;
    --bs-pagination-padding-y: .35rem;
    --bs-pagination-font-size: .875rem;
    --bs-pagination-color: #334155;
    --bs-pagination-bg: #ffffff;
    --bs-pagination-border-color: #cbd5e1;
    --bs-pagination-border-radius: .5625rem;
    --bs-pagination-hover-color: #0f172a;
    --bs-pagination-hover-bg: #f8fafc;
    --bs-pagination-hover-border-color: #94a3b8;
    --bs-pagination-focus-color: #0f172a;
    --bs-pagination-focus-bg: #ffffff;
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(59,130,246,.28);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-disabled-color: #cbd5e1;
    --bs-pagination-disabled-bg: #ffffff;
    --bs-pagination-disabled-border-color: #e2e8f0;
    gap: .3rem;
    flex-wrap: wrap;
}
body[data-section="accent"] .pagination .page-link,
body[data-section="accent"] .app-pagination .page-link {
    min-width: 2.125rem;
    height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    border-radius: .5625rem !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
/* The older .app-pagination colour rules are superseded here. */
body[data-section="accent"] .app-pagination .page-link { background: #ffffff; border-color: #cbd5e1; color: #334155; font-size: .875rem; }
body[data-section="accent"] .app-pagination .page-link:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
body[data-section="accent"] .pagination .page-item.active .page-link,
body[data-section="accent"] .app-pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
body[data-section="accent"] .pagination .page-item.disabled .page-link,
body[data-section="accent"] .app-pagination .page-item.disabled .page-link {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #cbd5e1;
    box-shadow: none;
}
/* Text-only items ("…", "3 / 12") rendered as <span class="page-link">. */
body[data-section="accent"] .pagination span.page-link,
body[data-section="accent"] .pagination .page-item.disabled span.page-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #64748b;
    min-width: auto;
}
body[data-section="accent"] .pagination .page-link > .bi { font-size: .8em; }

/* ── Tabs ─────────────────────────────────────────────────────────────
   .nav-tabs (16 groups) → underline tabs: no boxes, a hairline base
   line, slate labels, the active tab in accent text over a 2px accent
   bar; hover shows a faint bar and a light wash. .nav-tabs-sm keeps
   its smaller size.
   .nav-pills (the Vault Personal / Organisation switch) → a segmented
   control: a slate track with the active option raised in white. */
body[data-section="accent"] .nav-tabs {
    --bs-nav-tabs-border-width: 0;
    border-bottom: 1px solid #e2e8f0;
    gap: .25rem;
}
body[data-section="accent"] .nav-tabs .nav-link {
    position: relative;
    border: 0;
    border-radius: .5rem .5rem 0 0;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    padding: .55rem .9rem;
    white-space: nowrap;
    transition: color .12s ease, background-color .12s ease;
}
body[data-section="accent"] .nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background-color .12s ease;
}
body[data-section="accent"] .nav-tabs .nav-link:hover:not(.active):not(:disabled) {
    color: #0f172a;
    background: #f8fafc;
}
body[data-section="accent"] .nav-tabs .nav-link:hover:not(.active):not(:disabled)::after { background: #cbd5e1; }
body[data-section="accent"] .nav-tabs .nav-link.active,
body[data-section="accent"] .nav-tabs .nav-item.show .nav-link {
    color: #1d4ed8;
    background: transparent;
    font-weight: 600;
}
body[data-section="accent"] .nav-tabs .nav-link.active::after,
body[data-section="accent"] .nav-tabs .nav-item.show .nav-link::after { background: var(--accent); }
body[data-section="accent"] .nav-tabs .nav-link > .bi { opacity: .85; }
body[data-section="accent"] .nav-tabs .nav-link.active > .bi { opacity: 1; }
body[data-section="accent"] .nav-tabs .nav-link:disabled,
body[data-section="accent"] .nav-tabs .nav-link.disabled { color: #cbd5e1; }
body[data-section="accent"] .nav-tabs .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.28); }
body[data-section="accent"] .nav-tabs-sm .nav-link { padding: .4rem .75rem; font-size: .82rem; }
body[data-section="accent"] .nav-tabs-sm .nav-link::after { left: .45rem; right: .45rem; }

body[data-section="accent"] .nav-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
}
body[data-section="accent"] .nav-pills .nav-link {
    color: #475569;
    font-weight: 500;
    padding: .4rem .85rem;
    border-radius: .5625rem;
    transition: color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
body[data-section="accent"] .nav-pills .nav-link:hover:not(.active) { color: #0f172a; background: rgba(255,255,255,.6); }
body[data-section="accent"] .nav-pills .nav-link.active,
body[data-section="accent"] .nav-pills .show > .nav-link {
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);
}
body[data-section="accent"] .nav-pills .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.28); }

/* ── Tooltips (see the title="" bubble in assets/js/app.js) ───────────
   Dark slate bubble, small arrow, quick fade; multi-line titles keep
   their line breaks; long ones wrap at 20rem. Above modals (1055). */
.app-tip {
    position: fixed;
    z-index: 1090;
    display: none;
    max-width: 20rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
    background: #0f172a;
    color: #f8fafc;
    font: 500 .78rem/1.4 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: .005em;
    white-space: pre-line;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 24px rgba(15,23,42,.24), 0 1px 3px rgba(15,23,42,.2);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}
.app-tip.show { opacity: 1; transform: none; }
.app-tip[data-side="bottom"] { transform: translateY(-2px); }
.app-tip[data-side="bottom"].show { transform: none; }
.app-tip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #0f172a;
    transform: translateX(-50%) rotate(45deg);
    bottom: -4px;
}
.app-tip[data-side="bottom"] .app-tip-arrow { bottom: auto; top: -4px; }
@media (prefers-reduced-motion: reduce) {
    .app-tip { transition: none; transform: none; }
}

/* ── Global toasts (window.appToast in assets/js/app.js) ──────────────
   Stack top-right under the sticky navbar; white elevated cards with a
   tinted icon by kind, the message, a close button and — for toasts
   that auto-hide — a thin bar showing the time left. Full width on
   phones. Above modals (1055) and the tooltip layer stays on top. */
.app-toast-stack {
    position: fixed;
    top: 4.75rem;
    right: 1rem;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}
.app-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 100%;
    padding: .75rem .6rem .85rem .8rem;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    box-shadow: 0 16px 40px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
    font: 500 .875rem/1.45 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .18s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.app-toast.show { opacity: 1; transform: none; }
.app-toast-icon {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.app-toast-success .app-toast-icon { background: #dcfce7; color: #16a34a; }
.app-toast-info    .app-toast-icon { background: #dbeafe; color: #2563eb; }
.app-toast-warning .app-toast-icon { background: #fef3c7; color: #b45309; }
.app-toast-error   .app-toast-icon { background: #fee2e2; color: #dc2626; }
.app-toast-error { border-color: #fecaca; }
.app-toast-text { flex: 1 1 auto; min-width: 0; padding-top: .22rem; overflow-wrap: anywhere; white-space: pre-line; }
.app-toast-close {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.app-toast-close:hover { background: #f1f5f9; color: #0f172a; }
.app-toast-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.28); }
.app-toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    opacity: .55;
    transform-origin: left center;
    animation: app-toast-time 5000ms linear forwards;
}
.app-toast.paused .app-toast-bar { animation-play-state: paused; }
.app-toast-success .app-toast-bar { background: #16a34a; }
.app-toast-info    .app-toast-bar { background: #2563eb; }
.app-toast-warning .app-toast-bar { background: #d97706; }
@keyframes app-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 576px) {
    .app-toast-stack { top: 4.25rem; right: .75rem; left: .75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .app-toast { transition: none; transform: none; }
    .app-toast-bar { animation: none; display: none; }
}

/* ── Action dropdowns (⋮, Descarca, …) ─────────────────────────────────
   Builds on the "Dropdown menus" panel above: a short open animation,
   a fixed icon column (every item's leading .bi lines up, muted until
   hovered), destructive items in red with a red wash, disabled items
   greyed — and still hoverable, so the title that explains WHY they are
   disabled ("stop the endpoint first…") shows as a tooltip; Bootstrap's
   pointer-events:none used to swallow it. Keyboard focus gets a ring. */
body[data-section="accent"] .dropdown-menu {
    min-width: 13rem;
    max-width: calc(100vw - 1rem);
    font-size: .875rem;
}
body[data-section="accent"] .dropdown-menu.show { animation: app-dd-in .12s cubic-bezier(.2,.8,.2,1); }
/* Animates the individual `translate`/`scale` properties, NOT `transform`:
   Popper positions the menu with `transform: translate(...)`, and a
   keyframe on `transform` overrode that position for the length of the
   animation — the menu flashed at its parent's corner, then jumped into
   place. `translate`/`scale` compose with Popper's transform instead. */
@keyframes app-dd-in { from { opacity: 0; translate: 0 -4px; scale: .98; } to { opacity: 1; translate: none; scale: none; } }
body[data-section="accent"] .dropdown-menu form { margin: 0; }
body[data-section="accent"] .dropdown-menu .dropdown-item {
    color: #0f172a;
    font-weight: 450;
    line-height: 1.35;
    transition: background-color .1s ease, color .1s ease;
}
body[data-section="accent"] .dropdown-menu .dropdown-item > .bi:first-child {
    display: inline-block;
    width: 1.1rem;
    margin-right: .6rem !important;
    text-align: center;
    color: #64748b;
    font-size: .95em;
    transition: color .1s ease;
}
body[data-section="accent"] .dropdown-menu .dropdown-item:hover > .bi:first-child,
body[data-section="accent"] .dropdown-menu .dropdown-item:focus > .bi:first-child { color: #0f172a; }
body[data-section="accent"] .dropdown-menu .dropdown-item:focus-visible {
    outline: none;
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px rgba(59,130,246,.35);
}
/* Destructive. */
body[data-section="accent"] .dropdown-menu .dropdown-item.text-danger,
body[data-section="accent"] .dropdown-menu .dropdown-item.text-danger > .bi:first-child { color: #dc2626 !important; }
body[data-section="accent"] .dropdown-menu .dropdown-item.text-danger:hover,
body[data-section="accent"] .dropdown-menu .dropdown-item.text-danger:focus { background: #fef2f2; color: #b91c1c !important; }
body[data-section="accent"] .dropdown-menu .dropdown-item.text-danger:active { background: #fee2e2; }
/* Disabled: greyed but hoverable for its explanatory tooltip. */
body[data-section="accent"] .dropdown-menu .dropdown-item.disabled,
body[data-section="accent"] .dropdown-menu .dropdown-item:disabled {
    color: #94a3b8 !important;
    background: transparent;
    pointer-events: auto;
    cursor: not-allowed;
}
body[data-section="accent"] .dropdown-menu .dropdown-item.disabled > .bi:first-child,
body[data-section="accent"] .dropdown-menu .dropdown-item:disabled > .bi:first-child { color: #cbd5e1; }
body[data-section="accent"] .dropdown-menu .dropdown-item.disabled:hover { background: #f8fafc; }
body[data-section="accent"] .dropdown-menu .dropdown-item-text { font-size: .8rem; color: #64748b; }
body[data-section="accent"] .dropdown-menu-scrollable { scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] .dropdown-menu.show { animation: none; }
}

/* ── Disclosures (<details> / <summary>) ──────────────────────────────
   The app has no Bootstrap accordions; its collapsible sections are
   native <details> (18 in views, plus the ones the PKI consoles build
   in JS: "Pasi", "Mesaje PKIMessage", "Raspuns brut", …). The browser's
   triangle marker is replaced by a thin chevron that turns when open;
   the summary gets a hover wash and a focus ring. Padding is offset by
   an equal negative margin, so no layout moves. Summaries keep their
   own typography classes (small / text-muted / uppercase). */
body[data-section="accent"] details > summary {
    list-style: none;
    cursor: pointer;
    border-radius: .375rem;
    padding: .2rem .4rem;
    margin: -.2rem -.4rem;
    transition: background-color .12s ease, color .12s ease;
    -webkit-user-select: none;
    user-select: none;
}
body[data-section="accent"] details > summary::-webkit-details-marker { display: none; }
body[data-section="accent"] details > summary::marker { content: ""; }
body[data-section="accent"] details > summary::before {
    content: "";
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .4em;
    vertical-align: -.05em;
    background-color: currentColor;
    opacity: .7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m6%203%205%205-5%205'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m6%203%205%205-5%205'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .15s ease;
    flex: none;
}
body[data-section="accent"] details[open] > summary::before { transform: rotate(90deg); }
/* Summaries that bring their own marker keep it: an inline chevron icon
   (TLS form) gets our rotation instead of a second arrow; details.alg-cat
   (device settings) styles its own "›" and is left alone entirely. */
body[data-section="accent"] details > summary:has(> .bi-chevron-right, > .bi-chevron-down)::before { content: none; }
body[data-section="accent"] details.alg-cat > summary::before {
    content: "\203A";
    width: .75rem;
    height: auto;
    margin-right: 0;
    vertical-align: baseline;
    background: none;
    -webkit-mask: none;
    mask: none;
    opacity: 1;
    color: #64748b;
}
body[data-section="accent"] details.alg-cat > summary { padding: .15rem 0; margin: 0; }
body[data-section="accent"] details > summary > .bi-chevron-right:first-child { display: inline-block; transition: transform .15s ease; }
body[data-section="accent"] details[open] > summary > .bi-chevron-right:first-child { transform: rotate(90deg); }
body[data-section="accent"] details > summary:hover { background: #f1f5f9; color: #0f172a !important; }
body[data-section="accent"] details > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.28); }
body[data-section="accent"] details[open] > summary { color: #0f172a !important; }
@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] details > summary::before { transition: none; }
}

/* ── Progress bars ────────────────────────────────────────────────────
   Thin rounded tracks (8px unless the view sets its own inline height),
   fully rounded fills with a soft top highlight, the fill animating to
   its value. Fills use the same hues as the badges and buttons
   (accent / green / amber / red / cyan / slate) — the views pick the
   colour by threshold (bg-success → bg-warning → bg-danger), which
   still drives it. No bar carries text, so the thin track is safe. */
body[data-section="accent"] .progress {
    --bs-progress-height: .5rem;
    --bs-progress-bg: #e2e8f0;
    --bs-progress-border-radius: 999px;
    --bs-progress-bar-bg: var(--accent);
    --bs-progress-bar-transition: width .5s cubic-bezier(.2,.8,.2,1);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
    overflow: hidden;
}
body[data-section="accent"] .app-progress { border-radius: 999px; }
body[data-section="accent"] .progress-bar {
    border-radius: 999px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0));
}
body[data-section="accent"] .progress-bar.bg-primary { background-color: #3b82f6 !important; }
body[data-section="accent"] .progress-bar.bg-success { background-color: #16a34a !important; }
body[data-section="accent"] .progress-bar.bg-warning { background-color: #f59e0b !important; }
body[data-section="accent"] .progress-bar.bg-danger  { background-color: #dc2626 !important; }
body[data-section="accent"] .progress-bar.bg-info    { background-color: #0891b2 !important; }
body[data-section="accent"] .progress-bar.bg-secondary { background-color: #94a3b8 !important; }
body[data-section="accent"] .progress-bar.bg-dark    { background-color: #334155 !important; }
@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] .progress { --bs-progress-bar-transition: none; }
}

/* ── Spinners ─────────────────────────────────────────────────────────
   103 .spinner-border, mostly inside buttons while an operation runs.
   Modern ring: a faint full track in the current text colour with a
   quarter arc spinning over it, thinner stroke, a steady linear turn.
   Being currentColor-based it works on a solid primary button (white)
   as well as on white buttons and text. The track falls back to a grey
   where color-mix() is not supported. */
body[data-section="accent"] .spinner-border {
    --bs-spinner-border-width: .16em;
    --bs-spinner-animation-speed: .7s;
    border-color: rgba(100,116,139,.25);
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-right-color: color-mix(in srgb, currentColor 22%, transparent);
    vertical-align: -.15em;
}
body[data-section="accent"] .spinner-border-sm {
    --bs-spinner-width: .95rem;
    --bs-spinner-height: .95rem;
    --bs-spinner-border-width: .14em;
}
body[data-section="accent"] .spinner-border:not(.spinner-border-sm) {
    --bs-spinner-width: 2.25rem;
    --bs-spinner-height: 2.25rem;
    --bs-spinner-border-width: .2em;
}
/* Bootstrap already slows spinners to 1.5s under reduced motion. */

/* ── Auth pages (login, register, 2FA, reset, verify, terms, plan) ────
   These pages have their own template (body.auth-body) and get none of
   the accent-section rules, so the modern controls are restated here,
   scoped to .auth-body: the form becomes a white card on a soft page
   with a faint accent glow at the top; inputs, buttons, OAuth buttons,
   checkboxes, alerts and the plan picker take the same shapes and
   colours as inside the app, at touch-friendly heights (44px). The
   structure of the pages is unchanged. */
.auth-body {
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(59,130,246,.12), transparent 62%),
        #f1f5f9;
    -webkit-font-smoothing: antialiased;
}
.auth-body .auth-panel-right { background: transparent; padding: 2.5rem 1.25rem; }
.auth-body .auth-panel-right .auth-form-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 40px rgba(15,23,42,.08);
}
.auth-body .auth-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.auth-body .auth-sub { color: #64748b; }
.auth-body .auth-link { color: #2563eb; }
.auth-body .auth-link:hover { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.auth-body .form-label { color: #334155; font-weight: 600; font-size: .85rem; }

/* Inputs + selects */
.auth-body .form-control,
.auth-body .app-input,
.auth-body .form-select {
    min-height: 2.75rem;
    border: 1px solid #cbd5e1 !important;
    border-radius: .625rem !important;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    font-size: .95rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-body .form-control:hover:not(:focus):not(:disabled),
.auth-body .app-input:hover:not(:focus):not(:disabled),
.auth-body .form-select:hover:not(:focus):not(:disabled) { border-color: #94a3b8 !important; }
.auth-body .form-control:focus,
.auth-body .app-input:focus,
.auth-body .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.28) !important;
}
.auth-body .form-control.is-invalid,
.auth-body .app-input.is-invalid { border-color: var(--red) !important; }
.auth-body .form-control::placeholder,
.auth-body .app-input::placeholder { color: #94a3b8 !important; }
.auth-body .input-group-icon > i { color: #94a3b8; transition: color .12s ease; }
.auth-body .input-group-icon:focus-within > i { color: var(--accent); }

/* Primary action: solid accent, no gradient or lift. */
.auth-body .btn-primary-glow,
.auth-body .btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
    font-weight: 600;
    border-radius: .625rem;
    min-height: 2.875rem;
    box-shadow: 0 1px 2px rgba(37,99,235,.35), 0 6px 16px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.18);
    transform: none;
    opacity: 1;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.auth-body .btn-primary-glow:hover,
.auth-body .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
    transform: none;
    opacity: 1;
    box-shadow: 0 1px 2px rgba(37,99,235,.35), 0 8px 20px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-body .btn-primary-glow:focus-visible,
.auth-body .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }
.auth-body .btn-outline-secondary {
    border-color: #cbd5e1;
    color: #334155;
    border-radius: .625rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.auth-body .btn-outline-secondary:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }

/* OAuth + method buttons: same shape as the inputs; brand colours kept. */
.auth-body .btn-google,
.auth-body .btn-github,
.auth-body .btn-microsoft,
.auth-body .btn-google-disabled,
.auth-body .btn-github-disabled,
.auth-body .btn-microsoft-disabled {
    min-height: 2.75rem;
    border-radius: .625rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.auth-body .btn-google { border: 1px solid #cbd5e1; color: #1f2937; }
.auth-body .btn-google:hover { background: #f8fafc; border-color: #94a3b8; }
.auth-body .btn-method-local { border-radius: .75rem; border-width: 1px; }
.auth-body .btn-method-local:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.auth-body .auth-divider { color: #94a3b8; font-size: .8rem; }
.auth-body .auth-divider::before,
.auth-body .auth-divider::after { background: #e2e8f0; }

/* Checkboxes (terms, remember me). */
.auth-body .form-check-input {
    width: 1.125em;
    height: 1.125em;
    margin-top: .1875em;
    border: 1.5px solid #94a3b8;
    cursor: pointer;
}
.auth-body .form-check-input[type="checkbox"] { border-radius: .3125em; }
.auth-body .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.auth-body .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.28); }
.auth-body .form-check-label { cursor: pointer; }

/* Alerts: the in-app palette. */
.auth-body .alert { border-radius: .75rem; font-size: .9rem; }
.auth-body .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.auth-body .alert-info    { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.auth-body .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.auth-body .alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Plan picker (register). */
.auth-body .plan-option { border-width: 1px; border-color: #cbd5e1; border-radius: .75rem; }
.auth-body .plan-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }

@media (max-width: 576px) {
    .auth-body .auth-panel-right { padding: 1rem .75rem; align-items: flex-start; }
    .auth-body .auth-panel-right .auth-form-wrap { padding: 1.5rem 1.25rem 1.25rem; border-radius: 1rem; }
}

/* ── Error pages (views/errors/error.php, maintenance.php) ────────────
   On the auth-page background: a centred white card with a tinted
   icon tile (amber 403 / maintenance, blue 404, red 500), the status as
   a small chip, a title, a message and the way out. */
.auth-body .error-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-body .error-card {
    width: 100%;
    max-width: 30rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 40px rgba(15,23,42,.08);
    text-align: center;
}
.auth-body .error-brand { justify-content: center; margin-bottom: 1.75rem; font-size: 1.1rem; }
.auth-body .error-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}
.auth-body .error-tone-blue  { background: #dbeafe; color: #2563eb; }
.auth-body .error-tone-amber { background: #fef3c7; color: #b45309; }
.auth-body .error-tone-red   { background: #fee2e2; color: #dc2626; }
.auth-body .error-tone-slate { background: #f1f5f9; color: #475569; }
.auth-body .error-code {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font: 600 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
}
.auth-body .error-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: #0f172a; margin: 0 0 .5rem; }
.auth-body .error-message { color: #64748b; margin: 0 auto 1.5rem; max-width: 24rem; line-height: 1.55; }
.auth-body .error-detail {
    text-align: left;
    max-height: 14rem;
    overflow: auto;
    margin: 0 0 1.5rem;
    padding: .75rem;
    border-radius: .625rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .75rem;
    white-space: pre-wrap;
}
.auth-body .error-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.auth-body .error-actions .btn { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 1.1rem; }
.auth-body .error-eta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: .75rem;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #155e75;
    font-size: .9rem;
}
@media (max-width: 576px) {
    .auth-body .error-card { padding: 1.75rem 1.25rem 1.5rem; border-radius: 1rem; }
    .auth-body .error-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Typography & page chrome ─────────────────────────────────────────
   The pieces on almost every page:
   - page header: a firmer title, its icon in accent, a calmer subtitle;
     the "Inapoi" back link as a quiet pill;
   - empty states: the (inline-styled) icon sits on a soft tile in its
     own colour; heading + text spaced and width-capped;
   - inline <code> (597 uses — CNs, serials, URLs in tables) loses
     Bootstrap's pink for a slate chip; code inside <pre> is reset; <pre>
     blocks get the card radius; a modern monospace stack app-wide;
   - help text under fields slightly smaller/softer; validation messages
     get a small warning icon so they never read as help text;
   - list groups, the footer, scrollbars and text selection aligned. */
body[data-section="accent"] {
    --bs-font-monospace: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}
body[data-section="accent"] ::selection { background: rgba(59,130,246,.22); }

/* Page header */
body[data-section="accent"] .page-header { margin-bottom: 1.5rem; }
body[data-section="accent"] .page-title {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #0f172a;
}
body[data-section="accent"] .page-title > .bi:first-child { color: var(--accent); }
body[data-section="accent"] .page-sub {
    color: #64748b;
    font-size: .925rem;
    line-height: 1.55;
    margin-top: .35rem;
}
body[data-section="accent"] .btn-ghost-accent {
    --bs-btn-padding-x: .6rem;
    --bs-btn-padding-y: .3rem;
    border-radius: .5rem;
    font-size: .875rem !important;
    font-weight: 600;
}
body[data-section="accent"] .btn-ghost-accent:hover,
body[data-section="accent"] .btn-ghost-accent:focus-visible { background: #eff6ff; color: #1d4ed8; }

/* Empty states */
body[data-section="accent"] .empty-state { gap: .6rem; padding: 2.5rem 1.5rem; }
body[data-section="accent"] .empty-state > .bi:first-child,
body[data-section="accent"] .empty-state > i:first-child {
    width: 4.75rem;
    height: 4.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: #f1f5f9;
    background: color-mix(in srgb, currentColor 11%, transparent);
    margin-bottom: .35rem;
    line-height: 1;
}
body[data-section="accent"] .empty-state h3,
body[data-section="accent"] .empty-state h4,
body[data-section="accent"] .empty-state h5 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #0f172a;
    margin: .25rem 0 0;
}
body[data-section="accent"] .empty-state p { max-width: 36rem; margin-left: auto; margin-right: auto; line-height: 1.55; }

/* Code */
body[data-section="accent"] code {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    padding: .08em .35em;
    font-size: .85em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
body[data-section="accent"] pre code,
body[data-section="accent"] .bg-dark code,
body[data-section="accent"] .btn code,
body[data-section="accent"] .badge code {
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
}
body[data-section="accent"] .alert code { background: rgba(255,255,255,.55); border-color: rgba(15,23,42,.08); color: inherit; }
/* Light-text code sits on a dark surface already: no light chip under it. */
body[data-section="accent"] code.text-light,
body[data-section="accent"] code.text-white,
body[data-section="accent"] .text-light code,
body[data-section="accent"] .text-white code { background: transparent; border: 0; padding: 0; }
body[data-section="accent"] pre {
    border-radius: .75rem;
    font-size: .8rem;
    line-height: 1.55;
    scrollbar-width: thin;
}

/* Field help + validation */
body[data-section="accent"] .form-label { color: #334155; font-weight: 600; font-size: .85rem; }
body[data-section="accent"] .form-text { color: #64748b; font-size: .8rem; line-height: 1.45; margin-top: .35rem; }
body[data-section="accent"] .invalid-feedback {
    font-size: .8rem;
    font-weight: 500;
    color: #dc2626;
    margin-top: .35rem;
}
body[data-section="accent"] .invalid-feedback::before {
    content: "";
    display: inline-block;
    width: .95em;
    height: .95em;
    margin-right: .35em;
    vertical-align: -.12em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%208v4'/%3E%3Cpath%20d='M12%2016h.01'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%208v4'/%3E%3Cpath%20d='M12%2016h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* List groups */
body[data-section="accent"] .list-group {
    --bs-list-group-border-color: #e2e8f0;
    --bs-list-group-border-radius: .75rem;
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: .7rem;
    --bs-list-group-action-hover-bg: #f8fafc;
    --bs-list-group-action-hover-color: #0f172a;
    --bs-list-group-action-active-bg: #eff6ff;
    --bs-list-group-active-bg: #eff6ff;
    --bs-list-group-active-border-color: #bfdbfe;
    --bs-list-group-active-color: #1d4ed8;
}
body[data-section="accent"] .list-group-item-action { transition: background-color .1s ease, color .1s ease; }

/* Footer */
body[data-section="accent"] .app-footer {
    background: transparent;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .8rem;
}
body[data-section="accent"] .app-footer a { color: #475569; text-decoration: none; }
body[data-section="accent"] .app-footer a:hover { color: var(--accent); }

/* Scrollbars (Firefox; WebKit already themed above). */
body[data-section="accent"] { scrollbar-color: #cbd5e1 transparent; }

/* ── Status, settings nav, terminals, close buttons, popovers, range ──
   - .badge-status (177 status pills): inline-flex with a hairline in the
     variant's hue; variant pills without their own icon get a leading
     status dot. Pills coloured inline in the views keep their colours.
   - .agent-status-dot: the "active" dot breathes softly (off under
     reduced motion), the rings stay.
   - settings side nav: rounded items instead of the 3px left rule, the
     active one a soft accent pill (on phones too, where the nav is a row).
   - dark terminal <pre> (install commands, Nmap output): slate-900 with a
     hairline, readable light text.
   - .btn-close anywhere: the quiet square of the modal/alert versions.
   - popovers + range sliders in the app palette. */
body[data-section="accent"] .badge-status {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    line-height: 1.2;
    padding: .28rem .65rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
body[data-section="accent"] .badge-status-active          { border-color: #a7f3d0; }
body[data-section="accent"] .badge-status-disconnected    { border-color: #fecaca; }
body[data-section="accent"] .badge-status-never_connected { border-color: #fde68a; }
body[data-section="accent"] .badge-status:is(.badge-status-active, .badge-status-disconnected, .badge-status-never_connected):not(:has(.bi))::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
body[data-section="accent"] .badge-status > .bi { margin-right: 0 !important; }

@keyframes app-status-breathe {
    0%, 100% { box-shadow: 0 0 0 3px #d1fae5; }
    50%      { box-shadow: 0 0 0 5px rgba(16,185,129,.12); }
}
body[data-section="accent"] .agent-status-dot.status-active { animation: app-status-breathe 2.4s ease-in-out infinite; }

body[data-section="accent"] .settings-nav { gap: .125rem; padding: .375rem; }
body[data-section="accent"] .settings-nav-item {
    border-left: 0;
    border-radius: .5625rem;
    padding: .6rem .8rem;
    color: #334155;
    font-weight: 500;
}
body[data-section="accent"] .settings-nav-item > .bi,
body[data-section="accent"] .settings-nav-item > i { color: #64748b; }
body[data-section="accent"] .settings-nav-item:hover { background: #f1f5f9; color: #0f172a; }
body[data-section="accent"] .settings-nav-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
body[data-section="accent"] .settings-nav-item.active > .bi,
body[data-section="accent"] .settings-nav-item.active > i { color: var(--accent); }
@media (max-width: 768px) {
    body[data-section="accent"] .settings-nav { padding: .25rem; }
    body[data-section="accent"] .settings-nav-item { border-radius: .5rem; border-bottom: 0; }
}

body[data-section="accent"] pre.bg-dark {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e293b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body[data-section="accent"] .btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: .5rem;
    background-size: .7rem;
    opacity: .55;
    transition: opacity .12s ease, background-color .12s ease;
}
body[data-section="accent"] .btn-close:hover { opacity: 1; background-color: #f1f5f9; }
body[data-section="accent"] .btn-close:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.28); opacity: 1; }

body[data-section="accent"] .popover {
    --bs-popover-border-color: #e2e8f0;
    --bs-popover-border-radius: .75rem;
    --bs-popover-box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
    --bs-popover-header-bg: #ffffff;
    --bs-popover-font-size: .85rem;
    box-shadow: var(--bs-popover-box-shadow);
}

body[data-section="accent"] .form-range::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 1px 3px rgba(37,99,235,.4); }
body[data-section="accent"] .form-range::-moz-range-thumb      { background: var(--accent); box-shadow: 0 1px 3px rgba(37,99,235,.4); }
body[data-section="accent"] .form-range::-webkit-slider-runnable-track { background: #e2e8f0; }
body[data-section="accent"] .form-range::-moz-range-track      { background: #e2e8f0; }
body[data-section="accent"] .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(59,130,246,.28); }

@media (prefers-reduced-motion: reduce) {
    body[data-section="accent"] .agent-status-dot.status-active { animation: none; }
}

/* ── Fixes from the visual pass (2026-10-03) ──────────────────────────
   - .btn-secondary (the "Inchide"/"Close" button in most modal footers)
     was still Bootstrap's solid grey: it now reads as the neutral
     modern button, like .btn-outline-secondary.
   - On phones, inline <code> in table cells (URLs, DNs) wrapped into a
     stack of tiny chips; it stays on one line there and the table's
     .table-responsive box scrolls sideways instead. */
body[data-section="accent"] .btn-secondary {
    --bs-btn-color: #334155;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f8fafc;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #f1f5f9;
    --bs-btn-active-border-color: #94a3b8;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
@media (max-width: 768px) {
    body[data-section="accent"] .app-table td code {
        white-space: nowrap;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* ── Vivid palette (2026-10-03) ───────────────────────────────────────
   Same hues, one step deeper: accent 500 → 600 (set in :root, so the
   branding colour from settings still overrides it), secondary text
   slate 500 → 600, tints 50/100 → 100/200 with 800–900 text, a cooler
   page ground so white cards stand off it, a filled active nav pill and
   stat tiles with solid icon chips. Every selector starts with "html"
   so it outranks the blocks above at equal specificity. */
html body[data-section="accent"] {
    --text-muted: #475569;
    --bg-primary: #e9eef6;
    --border: #d3dce8;
    --border-light: #b8c4d4;
    --bs-body-color: #0f172a;
    --bs-secondary-color: #475569;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37,99,235;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29,78,216;
    --bs-link-hover-color: #1e3a8a;
    --bs-link-hover-color-rgb: 30,58,138;
    background: var(--bg-primary);
}
html body[data-section="accent"] ::selection { background: rgba(37,99,235,.28); }
html body[data-section="accent"] .text-muted,
html body[data-section="accent"] .text-secondary,
html body[data-section="accent"] .page-sub { color: #475569 !important; }
html body[data-section="accent"] .page-title > .bi:first-child { color: #2563eb; }
html body[data-section="accent"] .brand-dot { color: #2563eb; }

/* Navbar: crisper bar, darker items, a filled active pill. */
html body[data-section="accent"] .app-navbar {
    background: rgba(255,255,255,.94);
    border-bottom-color: #d3dce8;
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.28);
}
html body[data-section="accent"] .app-navbar .nav-link { color: #334155; }
html body[data-section="accent"] .app-navbar .nav-link:hover,
html body[data-section="accent"] .app-navbar .nav-link.show { color: #0f172a; background: #e9eef6; }
html body[data-section="accent"] .app-navbar .nav-link.active {
    color: #ffffff;
    background: var(--accent);
    box-shadow: 0 1px 2px rgba(29,78,216,.35), 0 4px 12px -4px rgba(37,99,235,.55);
}
html body[data-section="accent"] .app-navbar .nav-link.active > .bi { color: #ffffff; }
html body[data-section="accent"] .app-navbar .btn-user { border-color: #cbd5e1; }

/* Buttons. */
html body[data-section="accent"] .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    box-shadow: 0 1px 2px rgba(29,78,216,.4), 0 4px 12px -4px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
html body[data-section="accent"] .btn-outline-secondary {
    --bs-btn-color: #1e293b;
    --bs-btn-border-color: #b8c4d4;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-hover-bg: #f1f5f9;
}
html body[data-section="accent"] .btn-outline-primary {
    --bs-btn-color: #1e40af;
    --bs-btn-bg: #dbeafe;
    --bs-btn-border-color: #93c5fd;
    --bs-btn-hover-color: #1e3a8a;
    --bs-btn-hover-bg: #bfdbfe;
    --bs-btn-hover-border-color: #60a5fa;
}
html body[data-section="accent"] .btn-outline-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-bg: #fee2e2;
    --bs-btn-border-color: #fca5a5;
    --bs-btn-hover-bg: #fecaca;
}
html body[data-section="accent"] .btn-outline-success {
    --bs-btn-color: #047857;
    --bs-btn-bg: #d1fae5;
    --bs-btn-border-color: #6ee7b7;
    --bs-btn-hover-bg: #a7f3d0;
}
html body[data-section="accent"] .btn-outline-info {
    --bs-btn-color: #0e7490;
    --bs-btn-bg: #cffafe;
    --bs-btn-border-color: #67e8f9;
    --bs-btn-hover-bg: #a5f3fc;
}
html body[data-section="accent"] .btn-outline-warning {
    --bs-btn-color: #92400e;
    --bs-btn-bg: #fef3c7;
    --bs-btn-border-color: #fcd34d;
    --bs-btn-hover-bg: #fde68a;
}
html body[data-section="accent"] .btn-misc-back,
html body[data-section="accent"] .btn-misc-forward { background: linear-gradient(135deg, #2563eb, #1e40af); }

/* Cards: deeper frame and shadow, a tinted header strip. */
html body[data-section="accent"] .app-card {
    border-color: #3b82f6;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 20px -6px rgba(37,99,235,.22);
}
html body[data-section="accent"] .app-card-header {
    background: linear-gradient(180deg, #f5f8ff, #ffffff);
    border-bottom-color: #bfdbfe;
}
html body[data-section="accent"] .app-card .app-card { border-color: #bfdbfe; }

/* Tables: a real header band. */
html body[data-section="accent"] .app-table { border-color: #3b82f6; }
html body[data-section="accent"] .app-table thead th {
    background: #dbeafe;
    color: #1e3a8a;
    font-weight: 700;
    border-bottom: 1px solid #60a5fa;
}
html body[data-section="accent"] .app-table tbody td { border-bottom-color: #d6e2f5; }
html body[data-section="accent"] .app-table tbody tr:hover > td { --bs-table-bg-state: rgba(37,99,235,.09); }

/* Form controls. */
html body[data-section="accent"] .form-control,
html body[data-section="accent"] .form-select,
html body[data-section="accent"] .app-input,
html body[data-section="accent"] .app-select,
html body[data-section="accent"] .input-group-text { border-color: #b8c4d4 !important; }
html body[data-section="accent"] .form-control:focus,
html body[data-section="accent"] .form-select:focus,
html body[data-section="accent"] .app-input:focus,
html body[data-section="accent"] .app-select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.22) !important; }
html body[data-section="accent"] .form-label,
html body[data-section="accent"] .app-label { color: #1e293b; }
html body[data-section="accent"] .form-text { color: #475569; }
html body[data-section="accent"] .form-check-input { border-color: #94a3b8; }
html body[data-section="accent"] .form-check-input:checked { background-color: #2563eb; border-color: #2563eb; }

/* Badges: one tint step deeper, darker text. */
html body[data-section="accent"] .badge.bg-primary,
html body[data-section="accent"] .badge.bg-primary-subtle   { background-color: #c7dcfe !important; color: #1e3a8a !important; border-color: #93c5fd; }
html body[data-section="accent"] .badge.bg-success,
html body[data-section="accent"] .badge.bg-success-subtle   { background-color: #bbf7d0 !important; color: #14532d !important; border-color: #86efac; }
html body[data-section="accent"] .badge.bg-info,
html body[data-section="accent"] .badge.bg-info-subtle      { background-color: #bdf0fa !important; color: #164e63 !important; border-color: #67e8f9; }
html body[data-section="accent"] .badge.bg-warning,
html body[data-section="accent"] .badge.bg-warning-subtle   { background-color: #fde68a !important; color: #78350f !important; border-color: #fcd34d; }
html body[data-section="accent"] .badge.bg-secondary,
html body[data-section="accent"] .badge.bg-secondary-subtle { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #b8c4d4; }
html body[data-section="accent"] .badge.bg-light            { background-color: #eef2f7 !important; color: #1e293b !important; border-color: #cbd5e1; }
html body[data-section="accent"] .badge.bg-danger-subtle    { background-color: #fecaca !important; color: #7f1d1d !important; border-color: #fca5a5; }
html body[data-section="accent"] .plan-badge { filter: saturate(1.35); }

/* Inline code chips. */
html body[data-section="accent"] code { color: #0f172a; background: #eaeff6; border-color: #cbd5e1; }

/* Empty states: the icon tile in accent instead of grey. */
html body[data-section="accent"] .empty-state > .bi:first-child,
html body[data-section="accent"] .empty-state > i:first-child {
    color: #2563eb !important;
    background: #dbeafe !important;
}
html body[data-section="accent"] .empty-state p { color: #475569; }

/* Dashboard stat widgets: tinted ground one step deeper, solid icon chip. */
html body[data-section="accent"] .stat-widget .sw-icon { color: #ffffff !important; box-shadow: 0 4px 10px -4px currentColor; }
html body[data-section="accent"] .stat-widget-blue   { background: #e3edff; border-color: #93c5fd; }
html body[data-section="accent"] .stat-widget-green  { background: #dcf7ea; border-color: #6ee7b7; }
html body[data-section="accent"] .stat-widget-red    { background: #fde4e4; border-color: #fca5a5; }
html body[data-section="accent"] .stat-widget-amber  { background: #fdf1cf; border-color: #fcd34d; }
html body[data-section="accent"] .stat-widget-purple { background: #ece7fd; border-color: #c4b5fd; }
html body[data-section="accent"] .stat-widget-cyan   { background: #d5f6fb; border-color: #67e8f9; }
html body[data-section="accent"] .stat-widget-orange { background: #fde8d4; border-color: #fdba74; }
html body[data-section="accent"] .stat-widget-teal   { background: #d3f5ee; border-color: #5eead4; }
html body[data-section="accent"] .stat-widget-blue   .sw-icon { background: #2563eb !important; }
html body[data-section="accent"] .stat-widget-green  .sw-icon { background: #059669 !important; }
html body[data-section="accent"] .stat-widget-red    .sw-icon { background: #dc2626 !important; }
html body[data-section="accent"] .stat-widget-amber  .sw-icon { background: #d97706 !important; }
html body[data-section="accent"] .stat-widget-purple .sw-icon { background: #7c3aed !important; }
html body[data-section="accent"] .stat-widget-cyan   .sw-icon { background: #0891b2 !important; }
html body[data-section="accent"] .stat-widget-orange .sw-icon { background: #ea580c !important; }
html body[data-section="accent"] .stat-widget-teal   .sw-icon { background: #0d9488 !important; }
html body[data-section="accent"] .stat-widget .sw-icon .bi { color: #ffffff !important; }
html body[data-section="accent"] .stat-group .stat-widget[class*="stat-widget-"] { border: 0; }
html body[data-section="accent"] .stat-group .stat-widget:first-child { border-bottom: 1px solid rgba(15,23,42,.08); }
html body[data-section="accent"] .sec-tone-red  { background: #fde4e4; border-color: #fca5a5; }
html body[data-section="accent"] .sec-tone-cyan { background: #d5f6fb; border-color: #67e8f9; }
html body[data-section="accent"] .sec-tone-blue { background: #e3edff; border-color: #93c5fd; }
html body[data-section="accent"] .sec-tone-red  .sec-tile-icon, html body[data-section="accent"] .sec-tone-red  .sec-tile-icon-sm { background: #dc2626; color: #ffffff; }
html body[data-section="accent"] .sec-tone-cyan .sec-tile-icon, html body[data-section="accent"] .sec-tone-cyan .sec-tile-icon-sm { background: #0891b2; color: #ffffff; }
html body[data-section="accent"] .sec-tone-blue .sec-tile-icon, html body[data-section="accent"] .sec-tone-blue .sec-tile-icon-sm { background: #2563eb; color: #ffffff; }

/* Dropdown menus. */
html body[data-section="accent"] .dropdown-item > .bi { color: #475569; }
html body[data-section="accent"] .dropdown-item:hover { background: #e3edff; color: #1e3a8a; }
html body[data-section="accent"] .dropdown-item:hover > .bi { color: #2563eb; }

/* PKI card collapse chevron — /infrastructure/pki chain table and the
   PKI monitoring tab. */
/* Chevron rotation tied to Bootstrap's aria-expanded state — purely
   visual; the actual collapse/expand is handled by Bootstrap. The
   toggle itself is a small round button, like the rest of the modern
   button set in app.css. */
.pki-collapse-toggle {
    width: 1.875rem; height: 1.875rem; padding: 0 !important; margin-top: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0 !important; border-radius: 50% !important;
    background: #ffffff; color: #475569; text-decoration: none;
}
.pki-collapse-toggle:hover { background: #f1f5f9; color: #0f172a; }
.pki-collapse-toggle .bi-chevron-down {
    transition: transform 0.2s ease;
}
.pki-collapse-toggle[aria-expanded="false"] .bi-chevron-down {
    transform: rotate(-90deg);
}

/* ── Collapsed navbar on phones (2026-10-05) ─────────────────────────
   The bar is sticky, and the hamburger panel had no height limit: on a
   small phone (iPhone SE) or in landscape, opening the account menu or
   "Certificate" pushed items below the screen edge, where a sticky bar
   cannot be scrolled to — Log out was unreachable. The panel is now
   capped to the visible viewport (dvh follows the mobile URL bar; vh is
   the fallback) and scrolls on its own. Applies only while collapsed:
   below lg for the main navbar, below xxl for the Tools navbar. */
@media (max-width: 991.98px) {
    .app-navbar.navbar-expand-lg .navbar-collapse {
        max-height: calc(100vh - 4.75rem);
        max-height: calc(100dvh - 4.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1399.98px) {
    .app-navbar.navbar-expand-xxl .navbar-collapse {
        max-height: calc(100vh - 4.75rem);
        max-height: calc(100dvh - 4.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}
/* Narrow phones: keep the hamburger on the brand's line. The brand used
   to take the full row at 375px and push the toggler below it. */
@media (max-width: 420px) {
    .app-navbar .navbar-brand { min-width: 0; max-width: calc(100% - 3.25rem); margin-right: .25rem; }
    .app-navbar .brand-name { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}