/* ============================================================
   IntoActiv — Portal Page Shell
   Shared chrome for every Admin / Ad Manager listing page:
     - Page header (.ia-page-head)
     - Tab strip          (.ia-tabs)
     - Action button       (.ia-btn / .ia-btn--primary / .ia-btn--ghost)
     - Form select         (.ia-form-select)
     - Toggle switch       (.ia-toggle)
     - Field input         (.ia-input)
     - Modal restyling     (.ia-page .modal)

   Depends on: portals/tokens.css
   Mirrors v2 design system (mobile app v2.1)
   ============================================================ */

/* ============================================================
   1. PAGE WRAPPER
   ============================================================
   ⚠ CRITICAL — MODAL PLACEMENT RULE
   .ia-page intentionally creates a stacking context (position:
   relative + z-index:1) to keep page content under the topbar
   notification dropdown. Bootstrap modals appended to the DOM
   inside this wrapper get TRAPPED in that context — the
   body-level .modal-backdrop (z-index 1050) ends up rendering
   ABOVE them,
blocking all clicks.

   👉 In every portal blade file,
modals MUST be siblings of
      .ia-page,
never descendants. Place them between the
      closing </div> of .ia-page and the @endsection.
   ============================================================ */
.ia-page {
    /* Horizontal breathing room so the shell never touches either
       viewport edge. 60px clears the fixed sidebar rail; the gutter
       is applied on BOTH sides (margin-right + reserved in width). */
    --ia-shell-gutter: 24px;
    background: var(--ia-bg);
    min-height: calc(100vh - var(--ia-topbar-h, 80px));
    padding: 28px 32px 56px 32px;
    width: calc(100vw - 60px - (var(--ia-shell-gutter) * 2));
    margin-left: auto;
    margin-right: var(--ia-shell-gutter);
    color: var(--ia-ink);
    font-family: var(--ia-font-sans);
    -webkit-font-smoothing: antialiased;
    position: relative;
    z-index: 1;
}

/* Defensive — if a modal does end up trapped,
at least raise it
   well above the topbar (z-index 1000) so the only remaining
   issue is the backdrop,
which is easier to spot in QA than a
   completely silent modal. */
body.gray-bg .modal { z-index: 1200; }
body.gray-bg .modal-backdrop { z-index: 1190; }
@media (max-width: 1024px) { .ia-page { padding: 24px; --ia-shell-gutter: 20px; } }
@media (max-width: 640px) { .ia-page { padding: 16px; --ia-shell-gutter: 12px; } }

/* ============================================================
   2. PAGE HEADER
   ============================================================ */
.ia-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ia-page-head-left { min-width: 0; }

.ia-page-eyebrow {
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-eyebrow);
    font-weight: var(--ia-fw-eyebrow);
    letter-spacing: var(--ia-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ia-ink-2);
    margin-bottom: 8px;
}

/* H1 — sans-serif on listing pages (DM Serif Display is reserved for
   screen-level "moment" titles per v2 §1; a recurring listing screen
   title doesn't qualify). */
.ia-page-head h1 {
    margin: 0;
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-h1);
    line-height: var(--ia-lh-h1);
    font-weight: var(--ia-fw-h1);
    color: var(--ia-ink);
    letter-spacing: -.005em;
}
.ia-page-head .ia-page-sub {
    margin: 6px 0 0;
    color: var(--ia-ink-2);
    font-size: var(--ia-fs-body);
    line-height: var(--ia-lh-body);
}

.ia-page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================================
   3. BUTTONS
   v2 §7: Primary 52px ink fill r14 · Outline 52px 1.5px borderMid r14
   Desktop uses a slightly tighter 40px height for inline page actions.
   ============================================================ */
.ia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ia-r-lg);
    font-family: var(--ia-font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--ia-ink);
    white-space: nowrap;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}
.ia-btn:active {
    transform: scale(var(--ia-press-scale));
}
.ia-btn:focus-visible {
    outline: 2px solid var(--ia-ink);
    outline-offset: 2px;
}
.ia-btn i { font-size: 13px; }

/* Primary — v2 ink fill */
.ia-btn--primary {
    background: var(--ia-ink);
    color: var(--ia-ink-inverse);
    border-color: var(--ia-ink);
    box-shadow: var(--ia-shadow-btn);
}
.ia-btn--primary:hover { background: #000; border-color: #000; color: var(--ia-ink-inverse); }
.ia-btn--primary i { color: var(--ia-ink-inverse); }

/* Outline — v2 outline button */
.ia-btn--outline {
    background: var(--ia-surface);
    color: var(--ia-ink);
    border-color: var(--ia-border-strong);
}
.ia-btn--outline:hover {
    background: var(--ia-surface-2);
    border-color: var(--ia-ink);
    color: var(--ia-ink);
}

/* Ghost — minimal,
transparent */
.ia-btn--ghost {
    background: transparent;
    color: var(--ia-ink);
    border-color: transparent;
}
.ia-btn--ghost:hover { background: var(--ia-surface-2); }

/* Danger */
.ia-btn--danger {
    background: var(--ia-danger);
    color: var(--ia-ink-inverse);
    border-color: var(--ia-danger);
}
.ia-btn--danger:hover { background: #C03A39; border-color: #C03A39; }

/* Size variants */
.ia-btn.is-sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--ia-r-md); }
.ia-btn.is-lg { height: 52px; padding: 0 24px; font-size: 15px; }   /* matches v2 mobile primary */

.ia-btn[disabled],
.ia-btn.is-disabled {
    opacity: .55;
    pointer-events: none;
    box-shadow: none;
}

/* When this scope contains legacy .btn.primary-btn / .btn.outline-btn,
bring them in line with the system without changing JS hooks. */
.ia-page .btn.primary-btn,
.ia-page .btn-ly.primary-btn,
body.gray-bg .modal .btn.primary-btn,
body.gray-bg .modal .btn-ly.primary-btn {
    background: var(--ia-ink) !important;
    color: var(--ia-ink-inverse) !important;
    border: 1.5px solid var(--ia-ink) !important;
    border-radius: var(--ia-r-lg) !important;
    height: 40px;
    padding: 0 18px;
    font: 500 14px/1 var(--ia-font-sans);
    box-shadow: var(--ia-shadow-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}
.ia-page .btn.primary-btn:hover,
body.gray-bg .modal .btn.primary-btn:hover { background: #000 !important; border-color: #000 !important; }
.ia-page .btn.primary-btn:active,
body.gray-bg .modal .btn.primary-btn:active { transform: scale(var(--ia-press-scale)); }

.ia-page .btn.outline-btn,
body.gray-bg .modal .btn.outline-btn,
.ia-page .btn-ly.outline-btn,
body.gray-bg .modal .btn-ly.outline-btn {
    background: var(--ia-surface) !important;
    color: var(--ia-ink) !important;
    border: 1.5px solid var(--ia-border-strong) !important;
    border-radius: var(--ia-r-lg) !important;
    height: 40px;
    padding: 0 18px;
    font: 500 14px/1 var(--ia-font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}
.ia-page .btn.outline-btn:hover,
body.gray-bg .modal .btn.outline-btn:hover {
    background: var(--ia-surface-2) !important;
    border-color: var(--ia-ink) !important;
}
.ia-page .btn.outline-btn:active,
body.gray-bg .modal .btn.outline-btn:active { transform: scale(var(--ia-press-scale)); }

/* ============================================================
   IN-TABLE ACTION BUTTONS — unified icon-button shape
   These four legacy classes are rendered by various
   admin/admanager DataTables (registrationRequests.js,
manageCampaign.js,
etc.) and each previously inherited a
   different rule,
giving rows of mismatched-size buttons.
   We flatten them all to the same 32×32 square icon-button and
   differentiate by hover tint per semantic intent.

   IMPORTANT: this block must come AFTER the .ia-page .btn.outline-btn
   rule above so the hold-btn override wins on equal specificity.
   ============================================================ */
/* SHAPE — every JS-rendered in-table action button across all admin pages.
   Whatever combo of secondary classes it ships with (.btn-primary, .primary-btn,
   .outline-btn, .max-width, etc.), it lands here as a uniform 32px outline
   icon-button with consistent text padding for buttons that include a label. */
.ia-page .btn.view-btn,
body.gray-bg .modal .btn.view-btn,
.ia-page .btn.view-message,
.ia-page .btn.approve-btn,
body.gray-bg .modal .btn.approve-btn,
.ia-page .btn.reject-btn,
body.gray-bg .modal .btn.reject-btn,
.ia-page .btn.hold-btn,
body.gray-bg .modal .btn.hold-btn,
.ia-page .btn.accept-campaign-btn,
.ia-page .btn.reject-campaign-btn,
.ia-page .btn.cancel-live-campaign-btn,
.ia-page .btn.accept-program-btn,
.ia-page .btn.reject-program-btn,
.ia-page .btn.reason-btn,
.ia-page .btn.view-reason,
.ia-page .btn.view-program-rejection-reason,
.ia-page .btn.chat-btn,
.ia-page .btn.admin-campaign-chat-btn,
.ia-page .btn.renew-campaign {
    height: 32px !important;
    min-width: 32px;
    padding: 0 12px !important;
    font-family: var(--ia-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: var(--ia-r-md) !important;
    border: 1.5px solid var(--ia-border-strong) !important;
    background: var(--ia-surface) !important;
    color: var(--ia-ink) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    margin: 0 !important;
    text-decoration: none;
    transition: background var(--ia-dur-1) var(--ia-ease),
                border-color var(--ia-dur-1) var(--ia-ease),
                color var(--ia-dur-1) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}
/* Press feedback */
.ia-page .btn.view-btn:active,
.ia-page .btn.view-message:active,
.ia-page .btn.approve-btn:active,
.ia-page .btn.reject-btn:active,
.ia-page .btn.hold-btn:active,
.ia-page .btn.accept-campaign-btn:active,
.ia-page .btn.reject-campaign-btn:active,
.ia-page .btn.cancel-live-campaign-btn:active,
.ia-page .btn.accept-program-btn:active,
.ia-page .btn.reject-program-btn:active,
.ia-page .btn.reason-btn:active,
.ia-page .btn.view-reason:active,
.ia-page .btn.view-program-rejection-reason:active,
.ia-page .btn.chat-btn:active,
.ia-page .btn.admin-campaign-chat-btn:active,
.ia-page .btn.renew-campaign:active,
body.gray-bg .modal .btn.view-btn:active,
body.gray-bg .modal .btn.approve-btn:active,
body.gray-bg .modal .btn.reject-btn:active,
body.gray-bg .modal .btn.hold-btn:active {
    transform: scale(var(--ia-press-scale));
}
/* Inline icon size — slightly smaller than label */
.ia-page .btn.view-btn i,
.ia-page .btn.view-message i,
.ia-page .btn.approve-btn i,
.ia-page .btn.reject-btn i,
.ia-page .btn.hold-btn i,
.ia-page .btn.accept-campaign-btn i,
.ia-page .btn.reject-campaign-btn i,
.ia-page .btn.cancel-live-campaign-btn i,
.ia-page .btn.accept-program-btn i,
.ia-page .btn.reject-program-btn i,
.ia-page .btn.reason-btn i,
.ia-page .btn.view-reason i,
.ia-page .btn.view-program-rejection-reason i,
.ia-page .btn.chat-btn i,
.ia-page .btn.admin-campaign-chat-btn i,
.ia-page .btn.renew-campaign i,
body.gray-bg .modal .btn.view-btn i,
body.gray-bg .modal .btn.approve-btn i,
body.gray-bg .modal .btn.reject-btn i,
body.gray-bg .modal .btn.hold-btn i {
    font-size: 12px;
    line-height: 1;
}

/* SEMANTIC HOVER TINTS — by intent ─────────────────────────────────────── */

/* View / read-only — neutral ink hover */
.ia-page .btn.view-btn:hover,
.ia-page .btn.view-message:hover,
.ia-page .btn.reason-btn:hover,
.ia-page .btn.view-reason:hover,
.ia-page .btn.view-program-rejection-reason:hover,
.ia-page .btn.chat-btn:hover,
.ia-page .btn.admin-campaign-chat-btn:hover {
    background: var(--ia-surface-2) !important;
    border-color: var(--ia-ink) !important;
    color: var(--ia-ink) !important;
}

/* Approve / accept / renew — success */
.ia-page .btn.approve-btn:hover,
.ia-page .btn.accept-campaign-btn:hover,
.ia-page .btn.accept-program-btn:hover,
.ia-page .btn.renew-campaign:hover,
body.gray-bg .modal .btn.approve-btn:hover {
    background: var(--ia-success-bg) !important;
    border-color: var(--ia-success) !important;
    color: var(--ia-success-fg) !important;
}

/* Reject / cancel — danger */
.ia-page .btn.reject-btn:hover,
.ia-page .btn.reject-campaign-btn:hover,
.ia-page .btn.reject-program-btn:hover,
.ia-page .btn.cancel-live-campaign-btn:hover,
body.gray-bg .modal .btn.reject-btn:hover {
    background: var(--ia-danger-bg) !important;
    border-color: var(--ia-danger) !important;
    color: var(--ia-danger-fg) !important;
}

/* Hold — warn */
.ia-page .btn.hold-btn:hover,
body.gray-bg .modal .btn.hold-btn:hover {
    background: var(--ia-warn-bg) !important;
    border-color: var(--ia-warning) !important;
    color: var(--ia-warn-fg) !important;
}

/* Retrofit Bootstrap .alert.alert-* (used by various admin JS for inline
   callouts: validation feedback, page-level success/error alerts, modal
   helpers) to match v2 .ia-callout styling. No JS change required. */
.ia-page .alert,
body.gray-bg .modal .alert,
body.gray-bg .alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 10px 14px !important;
    border-radius: var(--ia-r-md) !important;
    border: 1px solid transparent !important;
    font-family: var(--ia-font-sans);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 8px;
    box-shadow: none;
}
.ia-page .alert.alert-success,
body.gray-bg .alert.alert-success {
    background: var(--ia-success-bg) !important;
    color: var(--ia-success-fg) !important;
    border-color: var(--ia-success-bd) !important;
}
.ia-page .alert.alert-danger,
body.gray-bg .alert.alert-danger {
    background: var(--ia-danger-bg) !important;
    color: var(--ia-danger-fg) !important;
    border-color: var(--ia-danger-bd) !important;
}
.ia-page .alert.alert-warning,
body.gray-bg .alert.alert-warning {
    background: var(--ia-warn-bg) !important;
    color: var(--ia-warn-fg) !important;
    border-color: var(--ia-warn-bd) !important;
}
.ia-page .alert.alert-info,
body.gray-bg .alert.alert-info {
    background: var(--ia-info-bg) !important;
    color: var(--ia-info-fg) !important;
    border-color: var(--ia-info-bd) !important;
}
/* Dismiss "×" inside an alert */
.ia-page .alert .btn-close,
body.gray-bg .alert .btn-close {
    width: 18px; height: 18px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 3 L9 9 M9 3 L3 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
    opacity: .7;
    margin-left: auto;
    padding: 0;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
}
.ia-page .alert .btn-close:hover,
body.gray-bg .alert .btn-close:hover { opacity: 1; }

/* Bootstrap .btn-outline-secondary (legacy gray outline button) →
   match v2 outline-btn so JS that renders this class still looks right. */
.ia-page .btn.btn-outline-secondary,
body.gray-bg .modal .btn.btn-outline-secondary {
    background: var(--ia-surface) !important;
    color: var(--ia-ink) !important;
    border: 1.5px solid var(--ia-border-strong) !important;
    border-radius: var(--ia-r-md) !important;
    height: 44px;
    padding: 0 16px;
    font: 500 13px/1 var(--ia-font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}
.ia-page .btn.btn-outline-secondary:hover,
body.gray-bg .modal .btn.btn-outline-secondary:hover {
    background: var(--ia-surface-2) !important;
    border-color: var(--ia-ink) !important;
}
.ia-page .btn.btn-outline-secondary:active,
body.gray-bg .modal .btn.btn-outline-secondary:active { transform: scale(var(--ia-press-scale)); }

/* Bootstrap .input-group inside modals — input + button join cleanly:
   matching border color, no internal seam, contained focus ring. */
body.gray-bg .modal .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}
body.gray-bg .modal .input-group > .form-control,
body.gray-bg .modal .input-group > input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 44px !important;
}
/* Suppress the standalone focus ring inside an input-group — the whole
   group tints together via :focus-within below. */
body.gray-bg .modal .input-group > .form-control:focus,
body.gray-bg .modal .input-group > input:focus {
    box-shadow: none !important;
    border-color: var(--ia-border-focus) !important;
    outline: none;
    z-index: 2;             /* sit on top so the focused border draws clean */
}
/* Trailing button — matches the input's border color (NOT the stronger
   button outline) so the seam between input + button reads as one
   continuous shape. Left border removed so input's right border is the
   only seam. Bootstrap's -1px overlap margin is neutralised. */
body.gray-bg .modal .input-group > .btn,
body.gray-bg .modal .input-group > .btn:last-child,
body.gray-bg .modal .input-group > .btn.btn-outline-secondary,
body.gray-bg .modal .input-group > .btn.btn-outline-secondary:last-child {
    height: 44px !important;
    margin-left: 0 !important;
    border: 1.5px solid var(--ia-border) !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--ia-r-md) !important;
    border-bottom-right-radius: var(--ia-r-md) !important;
    background: var(--ia-surface-2) !important;
    color: var(--ia-ink) !important;
    padding: 0 16px !important;
    font: 500 13px/1 var(--ia-font-sans);
    flex-shrink: 0;
    box-shadow: none !important;
}
body.gray-bg .modal .input-group > .btn:hover,
body.gray-bg .modal .input-group > .btn.btn-outline-secondary:hover {
    background: var(--ia-surface) !important;
    border-color: var(--ia-ink) !important;
    color: var(--ia-ink) !important;
}
/* When the input is focused, the joined button tints to match — the
   group reads as one focused control. */
body.gray-bg .modal .input-group:focus-within > .btn {
    border-color: var(--ia-border-focus) !important;
}

/* Bootstrap .is-invalid red-border state — use the v2 danger token */
.ia-page .form-control.is-invalid,
body.gray-bg .modal .form-control.is-invalid,
body.gray-bg .modal input.is-invalid,
body.gray-bg .modal textarea.is-invalid {
    border-color: var(--ia-danger) !important;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, .12) !important;
}

/* Retrofit Bootstrap status badges (rendered by various admin DataTables JS
   as `<span class="badge bg-success">Approved</span>` etc.) to match the
   v2 pill spec — same look as .ia-pill, no JS change required. */
.ia-page .badge.bg-warning,
.ia-page .badge.bg-success,
.ia-page .badge.bg-danger,
.ia-page .badge.bg-info,
.ia-page .badge.bg-secondary,
.ia-page .badge.bg-primary,
body.gray-bg .modal .badge.bg-warning,
body.gray-bg .modal .badge.bg-success,
body.gray-bg .modal .badge.bg-danger,
body.gray-bg .modal .badge.bg-info,
body.gray-bg .modal .badge.bg-secondary,
body.gray-bg .modal .badge.bg-primary {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    padding: 3px 8px !important;
    border-radius: var(--ia-r-xs) !important;
    font-family: var(--ia-font-sans) !important;
    font-size: var(--ia-fs-badge) !important;
    font-weight: var(--ia-fw-badge) !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
    letter-spacing: .01em;
    text-shadow: none;
}
.ia-page .badge.bg-warning,
body.gray-bg .modal .badge.bg-warning {
    background: var(--ia-warn-bg) !important;
    color: var(--ia-warn-fg) !important;
    border-color: var(--ia-warn-bd) !important;
}
.ia-page .badge.bg-success,
body.gray-bg .modal .badge.bg-success {
    background: var(--ia-success-bg) !important;
    color: var(--ia-success-fg) !important;
    border-color: var(--ia-success-bd) !important;
}
.ia-page .badge.bg-danger,
body.gray-bg .modal .badge.bg-danger {
    background: var(--ia-danger-bg) !important;
    color: var(--ia-danger-fg) !important;
    border-color: var(--ia-danger-bd) !important;
}
.ia-page .badge.bg-info,
body.gray-bg .modal .badge.bg-info {
    background: var(--ia-info-bg) !important;
    color: var(--ia-info-fg) !important;
    border-color: var(--ia-info-bd) !important;
}
.ia-page .badge.bg-secondary,
.ia-page .badge.bg-primary,
body.gray-bg .modal .badge.bg-secondary,
body.gray-bg .modal .badge.bg-primary {
    background: var(--ia-neutral-bg) !important;
    color: var(--ia-neutral-fg) !important;
    border-color: var(--ia-neutral-bd) !important;
}

/* Action-cell wrapper — the inline-style flex div JS injects.  Some pages use
   .ia-td-actions on the th, others don't put any class on the td. We catch
   both: any flex container ending in justify-content-end/start inside an
   .ia-table cell gets consistent gap + alignment. */
.ia-page .ia-table td.ia-td-actions > div,
.ia-page .ia-dt table.ia-table td.ia-td-actions > div {
    justify-content: flex-end !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap;
}
.ia-page .ia-table td > .d-flex,
.ia-page .ia-dt .ia-table td > .d-flex {
    gap: 6px;
    align-items: center;
}

/* ============================================================
   4. CARD  (page content card — wraps tab content)
   ============================================================ */
.ia-card {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-lg);
    box-shadow: var(--ia-shadow-1);
    overflow: hidden;
}
.ia-card.is-flush { padding: 0; }
.ia-card-section { padding: 20px 24px; }
.ia-card-section + .ia-card-section { border-top: 1px solid var(--ia-border); }

/* ============================================================
   5. TAB STRIP  (premium segmented header that bootstrap nav-tabs
   adopts via the .ia-tabs companion class)
   ============================================================ */
.ia-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--ia-surface-2);
    border-bottom: 1px solid var(--ia-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.ia-tabs::-webkit-scrollbar { display: none; }

.ia-tabs .nav-item { list-style: none; }

.ia-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--ia-r-md);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ia-ink-2);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ia-dur-2) var(--ia-ease),
                color var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease);
}
.ia-tabs .nav-link:hover {
    color: var(--ia-ink);
    background: var(--ia-surface);
}
.ia-tabs .nav-link.active,
.ia-tabs .nav-link.custom-nav-link.active {
    background: var(--ia-surface);
    color: var(--ia-ink);
    font-weight: 600;
    border-color: var(--ia-border);
    box-shadow: var(--ia-shadow-1);
}

/* Underline tab strip — v2 §5 "Horizontal content tabs"
   Use for sub-navigation inside MODALS or nested cards where pill /
   full-width tabs don't fit the context. Active tab gets a 2px ink
   underline on a 1px hairline rail. */
.ia-tabs.is-underline {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ia-border);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 16px;
    gap: 0;
    width: 100%;
    overflow-x: auto;
}
.ia-tabs.is-underline .nav-item { list-style: none; }
.ia-tabs.is-underline .nav-link {
    height: 44px;
    padding: 0 16px;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ia-ink-3);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 500;
    position: relative;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--ia-dur-1) var(--ia-ease);
}
.ia-tabs.is-underline .nav-link:hover {
    color: var(--ia-ink-2);
    background: transparent !important;
}
.ia-tabs.is-underline .nav-link.active,
.ia-tabs.is-underline .nav-link.custom-nav-link.active {
    color: var(--ia-ink) !important;
    font-weight: 600;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* 2px ink underline indicator */
.ia-tabs.is-underline .nav-link.active::after,
.ia-tabs.is-underline .nav-link.custom-nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;            /* sit on top of the 1px container border */
    height: 2px;
    background: var(--ia-ink);
}

/* Compact pill-style tab strip — for detail pages with only 2-3 tabs.
   Self-contained pill bar that doesn't fight a sibling card. */
.ia-tabs.is-pill {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-pill);
    box-shadow: var(--ia-shadow-1);
    padding: 6px;
    margin-bottom: 20px;
    width: max-content;
    max-width: 100%;
    border-bottom: 1px solid var(--ia-border);
}
.ia-tabs.is-pill .nav-link {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--ia-r-pill);
}
.ia-tabs.is-pill .nav-link.active,
.ia-tabs.is-pill .nav-link.custom-nav-link.active {
    background: var(--ia-ink);
    color: var(--ia-ink-inverse);
    border-color: var(--ia-ink);
    box-shadow: none;
}

/* Optional badge in a tab (e.g. unread count) */
.ia-tabs .nav-link .ia-tab-count {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--ia-r-pill);
    background: var(--ia-neutral-bg);
    color: var(--ia-neutral-fg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.ia-tabs .nav-link.active .ia-tab-count {
    background: var(--ia-ink);
    color: var(--ia-ink-inverse);
}

/* ============================================================
   6. FORM CONTROLS  (v2 §7 form field input)
   Height 50,
radius 12,
border 1.5px borderLight,
focus border ink
   For desktop list filters we use a tighter 40px equivalent.
   ============================================================ */
.ia-input,
.ia-page input[type="text"].ia-input,
.ia-page input[type="email"].ia-input,
.ia-page input[type="search"].ia-input,
.ia-form-select {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--ia-r-md);
    border: 1.5px solid var(--ia-border);
    background: var(--ia-surface);
    color: var(--ia-ink);
    font-family: var(--ia-font-sans);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--ia-dur-1) var(--ia-ease),
                box-shadow var(--ia-dur-1) var(--ia-ease);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 180px;
    max-width: 100%;
}
.ia-input:focus,
.ia-form-select:focus {
    border-color: var(--ia-border-focus);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .10);
}
.ia-input::placeholder { color: var(--ia-ink-4); }

/* Native select arrow */
.ia-form-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Inline filter row  (label + select on the same line) */
.ia-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ia-border);
    background: var(--ia-surface);
}
.ia-filter-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-ink);
    margin: 0;
}

/* Bootstrap form-select inside the page → adopt our look */
.ia-page select.form-select {
    height: 40px;
    padding: 0 36px 0 14px;
    border-radius: var(--ia-r-md);
    border: 1.5px solid var(--ia-border);
    background-color: var(--ia-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--ia-ink);
    font: 400 14px/1.4 var(--ia-font-sans);
    box-shadow: none;
}
.ia-page select.form-select:focus {
    border-color: var(--ia-border-focus);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .10);
    outline: none;
}

/* Modal form fields */
.ia-page .modal input[type="text"],
.ia-page .modal input[type="email"],
body.gray-bg .modal input[type="email"],
.ia-page .modal input[type="number"],
body.gray-bg .modal input[type="number"],
.ia-page .modal input[type="search"],
body.gray-bg .modal input[type="search"],
.ia-page .modal input[type="password"],
body.gray-bg .modal input[type="password"],
.ia-page .modal input[type="url"],
body.gray-bg .modal input[type="url"],
.ia-page .modal textarea,
body.gray-bg .modal textarea,
.ia-page .modal select,
body.gray-bg .modal select {
    width: 100%;
    height: 44px !important;
    max-width: none !important;
    padding: 0 14px;
    border-radius: var(--ia-r-md);
    border: 1.5px solid var(--ia-border);
    background: var(--ia-surface);
    font: 400 14px/1.4 var(--ia-font-sans);
    color: var(--ia-ink);
}
.ia-page .modal textarea,
body.gray-bg .modal textarea {
    height: auto !important;
    min-height: 96px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}
.ia-page .modal input:focus,
body.gray-bg .modal input:focus,
.ia-page .modal textarea:focus,
body.gray-bg .modal textarea:focus,
.ia-page .modal select:focus,
body.gray-bg .modal select:focus {
    border-color: var(--ia-border-focus);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .10);
    outline: none;
}

/* ============================================================
   6.4  INPUT POLISH  (universal hover/focus/valid/invalid states +
                       micro-animation tokens, applies to every
                       input that lives inside .ia-form-field)
   ============================================================ */

/* Subtle hover lift on idle inputs — gives the field a sense of
   responsiveness before the user even clicks. */
.ia-form-field input[type="text"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="number"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="email"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="password"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="url"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="tel"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="search"]:hover:not(:focus):not(.is-invalid),
.ia-form-field input[type="date"]:hover:not(:focus):not(.is-invalid),
.ia-form-field textarea:hover:not(:focus):not(.is-invalid),
.ia-form-field select:hover:not(:focus):not(.is-invalid) {
    border-color: var(--ia-border-strong) !important;
}

/* Number input — strip spinner on Chromium for a cleaner look. The
   value is still editable; users keep the keyboard arrows. */
.ia-form-field input[type="number"]::-webkit-outer-spin-button,
.ia-form-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ia-form-field input[type="number"] { -moz-appearance: textfield; }

/* Valid state — green check fades in inside the field once the
   wrapper is marked .is-valid (set by JS after a successful remote
   or local check). The input gets a subtle green border too. */
.ia-form-field.is-valid input,
.ia-form-field.is-valid textarea,
.ia-form-field.is-valid select {
    border-color: var(--ia-success) !important;
    padding-right: 38px !important;
}
.ia-form-field.is-valid::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 32px;
    color: var(--ia-success);
    font-size: 12px;
    pointer-events: none;
    animation: ia-fade-in .2s var(--ia-ease) both;
}
.ia-form-field { position: relative; }

/* "Checking..." spinner inside the field while a remote validation
   call is in flight (set by JS via .is-checking). */
.ia-form-field.is-checking::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 36px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ia-border);
    border-top-color: var(--ia-ink);
    animation: ia-spin .8s linear infinite;
    color: transparent;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }
@keyframes ia-fade-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Invalid state — soft horizontal nudge once on blur to draw the eye
   without being abrasive. Triggered by JS adding .is-shake briefly. */
.ia-form-field input.is-shake,
.ia-form-field textarea.is-shake {
    animation: ia-input-shake .35s var(--ia-ease);
}
@keyframes ia-input-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

/* ============================================================
   6.5  CHECKBOX  ·  PRIMITIVE  (custom box, SVG check-draw)
   ============================================================
   Markup pattern (use this everywhere — admin, ad-manager, modals):

     <label class="ia-checkbox">
         <input type="checkbox" name="x" value="1">
         <span class="ia-checkbox__box">
             <svg class="ia-checkbox__tick" viewBox="0 0 14 12" aria-hidden="true">
                 <polyline points="1.5,6.5 5.5,10 12.5,2"></polyline>
             </svg>
         </span>
         <span class="ia-checkbox__label">Label text</span>
     </label>

   Variants:
     .ia-checkbox.is-brand   — brand-red fill (terms, marketing-opt-in)
     .ia-checkbox.is-block   — full-width row layout (settings)
     .ia-checkbox.is-card    — boxed card row with hover state
   ============================================================ */
.ia-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ia-font-sans);
    font-size: 13px;
    color: var(--ia-ink-2);
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
/* Visually hide the native input, keep it accessible & form-serializable. */
.ia-checkbox > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
}
.ia-checkbox__box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--ia-border-strong);
    background: var(--ia-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-dur-1) var(--ia-ease);
}
.ia-checkbox:hover .ia-checkbox__box { border-color: var(--ia-ink); }
.ia-checkbox:active .ia-checkbox__box { transform: scale(.92); }
.ia-checkbox > input[type="checkbox"]:focus-visible ~ .ia-checkbox__box {
    outline: 2px solid var(--ia-border-focus);
    outline-offset: 2px;
}

/* SVG checkmark — drawn with stroke-dashoffset so it animates in. */
.ia-checkbox__tick {
    width: 12px;
    height: 10px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    transition: stroke-dashoffset .25s var(--ia-ease) .05s;
}
.ia-checkbox > input[type="checkbox"]:checked ~ .ia-checkbox__box {
    background: var(--ia-ink);
    border-color: var(--ia-ink);
}
.ia-checkbox > input[type="checkbox"]:checked ~ .ia-checkbox__box .ia-checkbox__tick {
    stroke-dashoffset: 0;
}
.ia-checkbox > input[type="checkbox"]:disabled ~ .ia-checkbox__box {
    background: var(--ia-bg-soft);
    border-color: var(--ia-border);
    cursor: not-allowed;
}
.ia-checkbox > input[type="checkbox"]:disabled ~ .ia-checkbox__label {
    color: var(--ia-ink-3);
    cursor: not-allowed;
}

.ia-checkbox__label {
    display: inline;
    color: var(--ia-ink-2);
    transition: color var(--ia-dur-1) var(--ia-ease);
}
.ia-checkbox:hover .ia-checkbox__label { color: var(--ia-ink); }
.ia-checkbox > input[type="checkbox"]:checked ~ .ia-checkbox__label {
    color: var(--ia-ink);
    font-weight: 500;
}

/* Brand-red variant — for "I agree to terms" / opt-in moments. */
.ia-checkbox.is-brand > input[type="checkbox"]:checked ~ .ia-checkbox__box {
    background: var(--ia-logo);
    border-color: var(--ia-logo);
}

/* Block variant — fills the row, nice for settings pages. */
.ia-checkbox.is-block { display: flex; width: 100%; }

/* Card variant — boxed row that highlights on hover/check. */
.ia-checkbox.is-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ia-r-md);
    border: 1.5px solid var(--ia-border);
    background: var(--ia-surface);
    transition: background var(--ia-dur-1) var(--ia-ease),
                border-color var(--ia-dur-1) var(--ia-ease);
}
.ia-checkbox.is-card:hover { border-color: var(--ia-border-strong); }
.ia-checkbox.is-card:has(input:checked) {
    background: var(--ia-bg-soft);
    border-color: var(--ia-ink);
}
.ia-checkbox.is-card .ia-checkbox__box { margin-top: 1px; }

/* ============================================================
   6.6  RADIO  ·  PRIMITIVE  (.ia-radio-pick)
   The existing .ia-radio (below) is a card-style wrapper for
   forms; this is the bare custom-styled radio for inline use.

   Markup:
     <label class="ia-radio-pick">
         <input type="radio" name="g" value="a">
         <span class="ia-radio-pick__dot"></span>
         <span class="ia-radio-pick__label">Option</span>
     </label>
   ============================================================ */
.ia-radio-pick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ia-font-sans);
    font-size: 13px;
    color: var(--ia-ink-2);
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
.ia-radio-pick > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
}
.ia-radio-pick__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--ia-border-strong);
    background: var(--ia-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-dur-1) var(--ia-ease);
}
.ia-radio-pick__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ia-ink);
    transform: scale(.3);
    opacity: 0;
    transition: transform var(--ia-dur-2) cubic-bezier(.34, 1.56, .64, 1),
                opacity var(--ia-dur-1) var(--ia-ease);
}
.ia-radio-pick:hover .ia-radio-pick__dot { border-color: var(--ia-ink); }
.ia-radio-pick:active .ia-radio-pick__dot { transform: scale(.92); }
.ia-radio-pick > input[type="radio"]:focus-visible ~ .ia-radio-pick__dot {
    outline: 2px solid var(--ia-border-focus);
    outline-offset: 2px;
}
.ia-radio-pick > input[type="radio"]:checked ~ .ia-radio-pick__dot {
    border-color: var(--ia-ink);
}
.ia-radio-pick > input[type="radio"]:checked ~ .ia-radio-pick__dot::after {
    transform: scale(1);
    opacity: 1;
}
.ia-radio-pick.is-brand > input[type="radio"]:checked ~ .ia-radio-pick__dot {
    border-color: var(--ia-logo);
}
.ia-radio-pick.is-brand > input[type="radio"]:checked ~ .ia-radio-pick__dot::after {
    background: var(--ia-logo);
}
.ia-radio-pick > input[type="radio"]:disabled ~ .ia-radio-pick__dot {
    background: var(--ia-bg-soft);
    border-color: var(--ia-border);
    cursor: not-allowed;
}
.ia-radio-pick__label {
    display: inline;
    color: var(--ia-ink-2);
    transition: color var(--ia-dur-1) var(--ia-ease);
}
.ia-radio-pick:hover .ia-radio-pick__label { color: var(--ia-ink); }
.ia-radio-pick > input[type="radio"]:checked ~ .ia-radio-pick__label {
    color: var(--ia-ink);
    font-weight: 500;
}

/* Reduced-motion: collapse all the spring/draw animations. */
@media (prefers-reduced-motion: reduce) {
    .ia-checkbox__box,
    .ia-checkbox__tick,
    .ia-checkbox__label,
    .ia-radio-pick__dot,
    .ia-radio-pick__dot::after,
    .ia-form-field input,
    .ia-form-field textarea {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   6.5  RADIO GROUP  (card-style radios for forms / modals)
   ============================================================ */
.ia-radio-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ia-radio-stack.is-row {
    flex-direction: row;
    flex-wrap: wrap;
}
.ia-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ia-r-md);
    border: 1.5px solid var(--ia-border);
    background: var(--ia-surface);
    cursor: pointer;
    transition: background var(--ia-dur-1) var(--ia-ease),
                border-color var(--ia-dur-1) var(--ia-ease);
    margin: 0;
    font-family: var(--ia-font-sans);
}
.ia-radio:hover { border-color: var(--ia-border-strong); }
.ia-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ia-ink);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.ia-radio span,
.ia-radio label {
    margin: 0 !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ia-ink) !important;
    line-height: 1.3;
}
.ia-radio:has(input:checked) {
    background: var(--ia-surface-2);
    border-color: var(--ia-ink);
}

/* ============================================================
   6.7  FORM LAYOUT  (settings / config pages)
   Reusable for admin profile, global control, manage admins,
   country payment, etc. Field group + label + helper + input
   that auto-styles standard text/number/email/textarea/select.
   ============================================================ */
.ia-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ia-form-grid.is-2col { grid-template-columns: repeat(2, 1fr); }
.ia-form-grid.is-1col { grid-template-columns: 1fr; }
@media (max-width: 960px) {
    .ia-form-grid               { grid-template-columns: repeat(2, 1fr); }
    .ia-form-grid.is-2col       { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ia-form-grid               { grid-template-columns: 1fr; }
}

.ia-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ia-form-field.is-full { grid-column: 1 / -1; }

.ia-form-label {
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-ink);
    margin: 0;
    line-height: 1.3;
}
.ia-form-label .ia-required {
    color: var(--ia-danger);
    margin-left: 2px;
}

.ia-form-help {
    font-family: var(--ia-font-sans);
    font-size: 12px;
    color: var(--ia-ink-3);
    line-height: 1.5;
    margin: -2px 0 4px;
}

/* Inline form errors.
   ----------------------------------------------------------
   Targets both the design-system class (.ia-form-error /
   .ia-form-field .error) AND the legacy `.error-message`
   class that the existing JS / Laravel @error blocks
   render across the codebase.

   ⚠ The legacy global `.error-message { position: absolute;
   top: 96%; }` rule in style.css anchors errors to the
   nearest positioned ancestor — which on un-positioned pages
   ends up at the very bottom of the page. Forcing
   `position: static` here puts every error inline directly
   under its input, the moment a page lives inside any
   design-system container (.ia-form-field, .ia-page, .ia-auth,
   .ia-modal, .ia-detail-card). Specificity 0,2,0 beats the
   legacy 0,1,0 so the override wins. */
.ia-form-error,
.ia-form-field .error,
.ia-form-field .error-message,
.ia-page .error-message,
.ia-auth .error-message,
.ia-modal .error-message,
.ia-detail-card .error-message,
.ia-reg .error-message {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    font-family: var(--ia-font-sans);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ia-danger-fg) !important;
    margin: 4px 0 0;
    min-height: 0;
    width: auto;
}
/* Hide when empty so an empty <span class="error-message"></span>
   doesn't create a phantom 4px gap. */
.ia-form-field .error-message:empty,
.ia-page .error-message:empty,
.ia-auth .error-message:empty,
.ia-modal .error-message:empty,
.ia-detail-card .error-message:empty,
.ia-reg .error-message:empty {
    display: none;
}

/* Auto-style native inputs INSIDE a .ia-form-field — overrides the
   legacy global `input { height: 50px !important; ... }` rule. */
.ia-form-field input[type="text"],
.ia-form-field input[type="number"],
.ia-form-field input[type="email"],
.ia-form-field input[type="password"],
.ia-form-field input[type="url"],
.ia-form-field input[type="tel"],
.ia-form-field input[type="search"],
.ia-form-field input[type="date"],
.ia-form-field textarea,
.ia-form-field select {
    height: 44px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 14px !important;
    border-radius: var(--ia-r-md) !important;
    border: 1.5px solid var(--ia-border) !important;
    background: var(--ia-surface) !important;
    color: var(--ia-ink) !important;
    font-family: var(--ia-font-sans) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: border-color var(--ia-dur-1) var(--ia-ease),
                box-shadow var(--ia-dur-1) var(--ia-ease);
    outline: none;
}
.ia-form-field textarea {
    height: auto !important;
    min-height: 96px;
    padding: 12px 14px !important;
    line-height: 1.55 !important;
    resize: vertical;
}
.ia-form-field input:focus,
.ia-form-field textarea:focus,
.ia-form-field select:focus {
    border-color: var(--ia-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, .10) !important;
}
.ia-form-field input.is-invalid,
.ia-form-field textarea.is-invalid {
    border-color: var(--ia-danger) !important;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, .12) !important;
}
.ia-form-field input::placeholder,
.ia-form-field textarea::placeholder {
    color: var(--ia-ink-4);
}

/* Percentage / unit suffix — `<div class="ia-input-suffix"><input ...><span>%</span></div>` */
.ia-input-suffix {
    position: relative;
    display: block;
}
.ia-input-suffix input {
    padding-right: 42px !important;
}
.ia-input-suffix .ia-suffix-label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-ink-3);
    pointer-events: none;
    line-height: 1;
}

/* Sticky form footer with action buttons */
.ia-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 0 0;
    margin-top: 24px;
    border-top: 1px solid var(--ia-border);
}
.ia-form-footer.is-spread {
    justify-content: space-between;
}
.ia-form-footer .ia-form-meta {
    font-size: 12px;
    color: var(--ia-ink-3);
    line-height: 1.5;
}

/* ============================================================
   7. STATUS TOGGLE  (the "Active / Inactive" switch in tables)
   ============================================================ */
.ia-page .switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 28px;
    vertical-align: middle;
}
.ia-page .switch input { display: none; }
.ia-page .switch .slider {
    position: absolute;
    inset: 0;
    background: var(--ia-neutral-bg);
    border: 1px solid var(--ia-neutral-bd);
    border-radius: var(--ia-r-pill);
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 8px;
}
.ia-page .switch .slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px; height: 22px;
    border-radius: var(--ia-r-circle);
    background: var(--ia-surface);
    box-shadow: var(--ia-shadow-1);
    transition: transform var(--ia-dur-2) var(--ia-ease);
    z-index: 1;
}
.ia-page .switch input:checked + .slider {
    background: var(--ia-success);
    border-color: var(--ia-success);
}
.ia-page .switch input:checked + .slider::before {
    transform: translateX(52px);
}
.ia-page .switch .slider-text {
    color: var(--ia-ink-inverse) !important;
    font-size: 11px;
    font-weight: 600;
    margin-left: 0;
    z-index: 0;
    text-transform: capitalize;
    font-family: var(--ia-font-sans);
}
.ia-page .switch .slider-text.inactive-class {
    margin-left: 0;
    color: var(--ia-ink-2) !important;
}

/* ============================================================
   8. BOOTSTRAP MODAL — dressed in v2
   ============================================================ */
.ia-page .modal-content,
body.gray-bg .modal-content {
    border-radius: var(--ia-r-lg);
    border: 1px solid var(--ia-border);
    background: var(--ia-surface);
    box-shadow: var(--ia-shadow-3);
    overflow: hidden;
}
body.gray-bg .modal-header {
    border-bottom: 1px solid var(--ia-border);
    padding: 18px 24px;
    background: var(--ia-surface);
    justify-content: space-between;
}
body.gray-bg .modal-header .modal-title {
    font: 600 18px/1.3 var(--ia-font-sans);
    color: var(--ia-ink);
    margin: 0;
}
body.gray-bg .modal-body {
    padding: 20px 24px;
    color: var(--ia-ink);
    font: 400 14px/1.55 var(--ia-font-sans);
}
body.gray-bg .modal-body label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-ink);
    margin: 0 0 6px;
    display: block;
}
body.gray-bg .modal-footer {
    border-top: 1px solid var(--ia-border);
    padding: 16px 24px;
    background: var(--ia-surface);
    gap: 8px;
}
body.gray-bg .modal-footer .button-container {
    display: flex;
    gap: 8px;
}

/* When a button row sits INSIDE the modal-body (because the submit button
   must remain inside the <form> for HTML form submission), give it the
   same visual footer-band treatment as a real .modal-footer — a top
   border separator above right-aligned buttons. Keeps every modal across
   the system feeling identical regardless of whether buttons live in
   the body or in a separate footer block. */
body.gray-bg .modal .modal-body .button-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 24px 0 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ia-border);
    float: none !important;
    width: auto !important;
}

/* Close button — small ink chevron */
body.gray-bg .modal-header .btn-close {
    width: 28px; height: 28px;
    border-radius: var(--ia-r-sm);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 3 L11 11 M11 3 L3 11' stroke='%236B6760' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: background-color var(--ia-dur-1) var(--ia-ease);
    margin: 0;
    padding: 0;
}
body.gray-bg .modal-header .btn-close:hover {
    background-color: var(--ia-surface-2);
}

/* ============================================================
   9. DETAIL PAGE PRIMITIVES
   Reusable building blocks for any "single record" detail
   screen (company,
consultant,
program,
campaign,
etc.).
   ============================================================ */

/* ---- Back / breadcrumb link sitting above the page header ---- */
.ia-page-breadcrumb {
    margin-bottom: 12px;
}
.ia-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ia-ink-2);
    text-decoration: none;
    padding: 6px 10px 6px 0;
    border-radius: var(--ia-r-sm);
    transition: color var(--ia-dur-1) var(--ia-ease),
                gap var(--ia-dur-2) var(--ia-ease);
}
.ia-back-link:hover {
    color: var(--ia-ink);
    gap: 12px;
}
.ia-back-link i { font-size: 11px; }
.ia-back-link .ia-back-sep { color: var(--ia-ink-3); margin: 0 4px; }
.ia-back-link .ia-back-current { color: var(--ia-ink); font-weight: 600; }

/* Inline pill alongside the page H1 (e.g. "ABC Co [Deleted]") */
.ia-page-head h1 .ia-pill {
    margin-left: 12px;
    vertical-align: middle;
    font-size: 11px;
    transform: translateY(-3px);
}

/* ---- Detail grid ---- */
.ia-detail-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
.ia-detail-grid.is-2col { grid-template-columns: 1fr; }
@media (min-width: 1280px) {
    .ia-detail-grid.is-2col { grid-template-columns: 1fr 1fr; }
}

/* ---- Detail card ---- */
.ia-detail-card {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-lg);
    box-shadow: var(--ia-shadow-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ia-detail-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ia-border);
    background: var(--ia-surface);
}
.ia-detail-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--ia-r-sm);
    background: var(--ia-surface-2);
    color: var(--ia-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ia-detail-card-title {
    margin: 0;
    font-family: var(--ia-font-sans);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ia-ink);
    letter-spacing: -.005em;
}
.ia-detail-card-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ia-ink-3);
    line-height: 1.4;
}
.ia-detail-card-body {
    padding: 22px 24px;
}

/* ---- Sub-section eyebrow inside a detail card ---- */
.ia-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-eyebrow);
    font-weight: var(--ia-fw-eyebrow);
    letter-spacing: var(--ia-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ia-ink-2);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ia-border);
}
.ia-section-eyebrow::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--ia-ink);
    border-radius: 2px;
    flex-shrink: 0;
}
.ia-detail-section + .ia-detail-section {
    margin-top: 28px;
}

/* ---- Key/value grid ---- */
.ia-kv-list {
    display: grid;
    gap: 18px 32px;
    grid-template-columns: 1fr 1fr;
}
.ia-kv-list.is-1col { grid-template-columns: 1fr; }
@media (max-width: 720px) {
    .ia-kv-list { grid-template-columns: 1fr; gap: 16px; }
}

.ia-kv-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ia-kv-row.is-full { grid-column: 1 / -1; }

.ia-kv-label {
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-eyebrow);
    font-weight: var(--ia-fw-eyebrow);
    letter-spacing: var(--ia-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ia-ink-3);
}

.ia-kv-value {
    font-family: var(--ia-font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ia-ink);
    line-height: 1.5;
    word-break: break-word;
    min-height: 21px;
}
.ia-kv-value.is-empty { color: var(--ia-ink-3); font-weight: 400; }

.ia-kv-value a {
    color: var(--ia-ink);
    text-decoration: underline;
    text-decoration-color: var(--ia-border-strong);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--ia-dur-1) var(--ia-ease);
}
.ia-kv-value a:hover { text-decoration-color: var(--ia-ink); }

/* ---- Inline callout (alerts inside a detail card) ---- */
.ia-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--ia-r-md);
    border: 1px solid transparent;
    font-family: var(--ia-font-sans);
    font-size: 13px;
    line-height: 1.55;
}
.ia-callout + .ia-callout { margin-top: 8px; }
.ia-callout-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 20px;
    margin-top: 1px;
}
.ia-callout-body { min-width: 0; flex: 1; }
.ia-callout-title {
    font-weight: 700;
    color: inherit;
    margin: 0;
    font-size: 13px;
}
.ia-callout-text {
    color: inherit;
    opacity: .85;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
}
.ia-callout.is-danger { background: var(--ia-danger-bg);  color: var(--ia-danger-fg);  border-color: var(--ia-danger-bd); }
.ia-callout.is-warn { background: var(--ia-warn-bg);    color: var(--ia-warn-fg);    border-color: var(--ia-warn-bd); }
.ia-callout.is-info { background: var(--ia-info-bg);    color: var(--ia-info-fg);    border-color: var(--ia-info-bd); }
.ia-callout.is-success { background: var(--ia-success-bg); color: var(--ia-success-fg); border-color: var(--ia-success-bd); }

/* ---- Document / inline action row ---- */
.ia-doc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ia-doc-actions .ia-pill {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--ia-r-md);
    font-size: 12px;
}

/* The accept/reject buttons in POA + similar flows. They use the
   shared .btn.outline-btn style and add a data-type semantic tint. */
.ia-page .poa-btn.btn.outline-btn[data-type="accept"]:hover,
.ia-page .btn.outline-btn[data-type="accept"]:hover,
body.gray-bg .modal .btn.outline-btn[data-type="accept"]:hover {
    background: var(--ia-success-bg) !important;
    border-color: var(--ia-success) !important;
    color: var(--ia-success-fg) !important;
}
.ia-page .poa-btn.btn.outline-btn[data-type="reject"]:hover,
body.gray-bg .modal .poa-btn.btn.outline-btn[data-type="reject"]:hover,
.ia-page .btn.outline-btn[data-type="reject"]:hover,
body.gray-bg .modal .btn.outline-btn[data-type="reject"]:hover,
.ia-page .btn.btn-outline-danger:hover,
body.gray-bg .modal .btn.btn-outline-danger:hover {
    background: var(--ia-danger-bg) !important;
    border-color: var(--ia-danger) !important;
    color: var(--ia-danger-fg) !important;
}
/* Bootstrap's .btn-outline-danger fallback (still used in the JS source) */
.ia-page .btn.btn-outline-danger {
    background: var(--ia-surface) !important;
    color: var(--ia-danger-fg) !important;
    border: 1.5px solid var(--ia-danger-bd) !important;
    border-radius: var(--ia-r-lg) !important;
    height: 40px;
    padding: 0 18px;
    font: 500 14px/1 var(--ia-font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
}

/* Sized down for inline detail-card use (matches v2 small btn) */
.ia-page .btn.btn-sm {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: var(--ia-r-md) !important;
}

/* The dynamically-injected POA loader overlay — match v2 chrome */
.ia-page .poa-loader-overlay {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--ia-ink) !important;
    border-radius: var(--ia-r-md) !important;
    box-shadow: var(--ia-shadow-2) !important;
    font-family: var(--ia-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid var(--ia-border);
}

/* ============================================================
   10. IDENTITY STRIP  (hero of any detail page)
   Premium "who is this" header with avatar/logo,
name,
status
   pill,
meta-chip row,
and quick-action buttons.
   ============================================================ */
.ia-id-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-lg);
    box-shadow: var(--ia-shadow-1);
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .ia-id-card {
        grid-template-columns: auto 1fr;
        gap: 16px;
    }
    .ia-id-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.ia-id-avatar {
    width: 72px; height: 72px;
    border-radius: var(--ia-r-circle);
    background: var(--ia-surface-2);
    color: var(--ia-ink);
    border: 1px solid var(--ia-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ia-font-sans);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.01em;
    overflow: hidden;
    flex-shrink: 0;
}
.ia-id-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.ia-id-body { min-width: 0; }
.ia-id-eyebrow {
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-eyebrow);
    font-weight: var(--ia-fw-eyebrow);
    letter-spacing: var(--ia-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ia-ink-3);
    margin-bottom: 4px;
}
.ia-id-title {
    margin: 0;
    font: 700 22px/1.2 var(--ia-font-sans);
    color: var(--ia-ink);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    word-break: break-word;
}
.ia-id-title .ia-pill {
    font-size: 11px;
    transform: translateY(-1px);
}

/* Meta-chip row — inline horizontal stats list */
.ia-meta-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 10px;
    color: var(--ia-ink-2);
    font-size: 13px;
    line-height: 1.4;
}
.ia-meta-chips > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid var(--ia-border);
}
.ia-meta-chips > span:first-child { padding-left: 0; }
.ia-meta-chips > span:last-child { border-right: 0; }
.ia-meta-chips i {
    font-size: 11px;
    color: var(--ia-ink-3);
    line-height: 1;
}
.ia-meta-chips .is-empty { color: var(--ia-ink-3); }
@media (max-width: 540px) {
    .ia-meta-chips > span {
        padding: 4px 0;
        border-right: 0;
        border-bottom: 1px dashed var(--ia-border);
        flex-basis: 100%;
    }
    .ia-meta-chips > span:last-child { border-bottom: 0; }
}

/* Quick-action buttons (right side of identity strip) */
.ia-id-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Compact variant — for use INSIDE modals or nested cards.
   No shadow,
surface-2 background,
smaller avatar,
no eyebrow. */
.ia-id-card.is-sm {
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--ia-surface-2);
    border-color: var(--ia-border);
    box-shadow: none;
}
.ia-id-card.is-sm .ia-id-avatar {
    width: 48px; height: 48px;
    font-size: 16px;
    border-radius: var(--ia-r-md);
}
.ia-id-card.is-sm .ia-id-eyebrow { display: none; }
.ia-id-card.is-sm .ia-id-title {
    font-size: 17px;
    line-height: 1.25;
    gap: 8px;
}
.ia-id-card.is-sm .ia-meta-chips {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ia-ink-3);
}
.ia-id-card.is-sm .ia-meta-chips > span {
    padding: 0 10px;
}
.ia-id-card.is-sm .ia-meta-chips > span:first-child { padding-left: 0; }

/* ============================================================
   KPI STRIP  — at-a-glance summary tiles below a detail-page hero
   ============================================================ */
.ia-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 960px) {
    .ia-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ia-kpi-strip { grid-template-columns: 1fr; }
}
.ia-kpi-tile {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 78px;
    justify-content: center;
}
.ia-kpi-tile-eyebrow {
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-eyebrow);
    font-weight: var(--ia-fw-eyebrow);
    letter-spacing: var(--ia-ls-eyebrow);
    text-transform: uppercase;
    color: var(--ia-ink-3);
    line-height: 1;
}
.ia-kpi-tile-value {
    font-family: var(--ia-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ia-ink);
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.ia-kpi-tile-value.is-big {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.ia-kpi-tile-value.is-empty { color: var(--ia-ink-3); font-weight: 500; }

/* ---- Inline chip group (countries, specialities, tags) ---- */
.ia-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Vertical link stack (social URLs,
file lists,
etc.) ---- */
.ia-link-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ia-link-stack-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--ia-r-md);
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    color: var(--ia-ink);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    word-break: break-all;
    transition: background var(--ia-dur-1) var(--ia-ease),
                border-color var(--ia-dur-1) var(--ia-ease),
                color var(--ia-dur-1) var(--ia-ease);
}
.ia-link-stack-item:hover {
    background: var(--ia-surface-2);
    border-color: var(--ia-ink);
    color: var(--ia-ink);
}
.ia-link-stack-item i {
    font-size: 11px;
    color: var(--ia-ink-3);
    flex-shrink: 0;
}
.ia-link-stack-item:hover i { color: var(--ia-ink); }

/* ============================================================
   11. STATUS BANNER  (high-priority inline alert at page top)
   ============================================================ */
.ia-status-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: var(--ia-r-lg);
    border: 1px solid;
    margin-bottom: 24px;
    font-family: var(--ia-font-sans);
}
.ia-status-banner-icon {
    width: 36px; height: 36px;
    border-radius: var(--ia-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .55);
}
.ia-status-banner-body { flex: 1; min-width: 0; }
.ia-status-banner-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}
.ia-status-banner-text {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: inherit;
    opacity: .85;
}
.ia-status-banner-cta {
    flex-shrink: 0;
}

.ia-status-banner.is-info {
    background: var(--ia-info-bg);
    color: var(--ia-info-fg);
    border-color: var(--ia-info-bd);
}
.ia-status-banner.is-warn {
    background: var(--ia-warn-bg);
    color: var(--ia-warn-fg);
    border-color: var(--ia-warn-bd);
}
.ia-status-banner.is-danger {
    background: var(--ia-danger-bg);
    color: var(--ia-danger-fg);
    border-color: var(--ia-danger-bd);
}
.ia-status-banner.is-success {
    background: var(--ia-success-bg);
    color: var(--ia-success-fg);
    border-color: var(--ia-success-bd);
}

/* CTA button inside banner — inherit semantic color,
dark text on light bg */
.ia-status-banner .ia-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--ia-r-md);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-ink-inverse);
    background: var(--ia-ink);
    border: 1px solid var(--ia-ink);
    text-decoration: none;
    transition: background var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-press-dur) var(--ia-ease);
    cursor: pointer;
}
.ia-status-banner .ia-banner-btn:hover { background: #000; }
.ia-status-banner .ia-banner-btn:active { transform: scale(var(--ia-press-scale)); }
.ia-status-banner .ia-banner-btn i { font-size: 11px; }

/* ============================================================
   12. ANCHOR NAV  (sticky in-page sub-navigation)
   ============================================================ */
.ia-anchor-nav {
    /* Intentionally NOT sticky — it scrolls away with the page content
       on the company-details screen (its only consumer). */
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-r-pill);
    box-shadow: var(--ia-shadow-1);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: max-content;
    max-width: 100%;
    transition: box-shadow var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease);
}
/* No pinned cue — the nav is not sticky, so .is-stuck (still toggled by
   the page's scroll JS) must look identical to the resting state. */
.ia-anchor-nav.is-stuck {
    box-shadow: var(--ia-shadow-1);
    border-color: var(--ia-border);
}
.ia-anchor-nav::-webkit-scrollbar { display: none; }

.ia-anchor-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--ia-r-pill);
    font-family: var(--ia-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ia-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ia-dur-1) var(--ia-ease),
                color var(--ia-dur-1) var(--ia-ease);
}
.ia-anchor-nav a:hover {
    background: var(--ia-surface-2);
    color: var(--ia-ink);
}
.ia-anchor-nav a.is-active {
    background: var(--ia-ink);
    color: var(--ia-ink-inverse);
    font-weight: 600;
}
.ia-anchor-nav a i { font-size: 11px; }

/* Per-section scroll offset so anchored jumps clear the sticky anchor nav.
   Smooth-scroll behavior is intentionally NOT global — handled in JS on
   the .ia-anchor-nav links so it doesn't affect form-validation scrolls or
   other unrelated programmatic scrolling on other pages. */
.ia-page [id^="sec-"] { scroll-margin-top: 110px; }


/* ============================================================
   13. TOPBAR  (admin / ad-manager portal header)
   ============================================================
   Light-surface chrome that replaces the legacy black .admin-header.
   Anatomy:  [brand]  [greeting + user + role chip]   [date · bell · profile]

   Surface : --ia-topbar-bg (#FFFFFF) over cream pageBg
   Divider : --ia-topbar-border (#E8E4DC) bottom hairline
   Height  : --ia-topbar-h (64px)

   Compatibility note:
   The blade template still keeps `.admin-header` on the root element so
   the existing notification dropdown rules in notifications.css (which
   are scoped to `.admin-header .ia-notif ...`) keep working. The dark
   trigger-button styles from that file are explicitly neutralised below
   when `.ia-topbar` is also present.
   ============================================================ */
.ia-topbar {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: var(--ia-topbar-bg);
    border-bottom: 1px solid var(--ia-topbar-border);
    box-shadow: var(--ia-shadow-1);
    font-family: var(--ia-font-sans);
}

/* Override the legacy `.admin-header { background: #000 }` in style.css.
   Specificity: .ia-topbar.admin-header (0,2,0) > .admin-header (0,1,0). */
.ia-topbar.admin-header,
.ia-topbar.ad-manager-header {
    background: var(--ia-topbar-bg);
    box-shadow: var(--ia-shadow-1);
}
/* Same trick for the legacy white `h3 { color:#fff }` rule. */
.ia-topbar.admin-header h3,
.ia-topbar.ad-manager-header h3 {
    color: var(--ia-ink);
    font-family: var(--ia-font-sans);
    font-size: var(--ia-fs-h2);
    font-weight: var(--ia-fw-h2);
    line-height: 1.3;
    letter-spacing: -.005em;
}

.ia-topbar-inner {
    height: var(--ia-topbar-h, 64px);
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 28px 0 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

@media (max-width: 1024px) {
    .ia-topbar-inner { padding: 0 18px; gap: 12px; }
}

/* ── Brand mark + product/role label ─────────────────────────── */
.ia-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 6px;
    margin-left: -6px;
    border-radius: var(--ia-r-md);
    text-decoration: none;
    color: var(--ia-ink);
    flex-shrink: 0;
    transition: background var(--ia-dur-1) var(--ia-ease);
}
.ia-topbar-brand:hover {
    background: var(--ia-bg-soft);
    color: var(--ia-ink);
    text-decoration: none;
}
.ia-topbar-brand:focus-visible {
    outline: 2px solid var(--ia-border-focus);
    outline-offset: 2px;
}

.ia-topbar-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ia-ink);
    color: var(--ia-ink-inverse);
    font-family: var(--ia-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 36px;
    text-align: center;
    letter-spacing: -.02em;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ia-topbar-brand__mark img{
    width: 25px;
}

.ia-topbar-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.ia-topbar-brand__product {
    font-size: 14px;
    font-weight: 700;
    color: var(--ia-ink);
    letter-spacing: -.005em;
}
.ia-topbar-brand__role {
    font-size: 10px;
    font-weight: 600;
    color: var(--ia-ink-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 3px;
}

@media (max-width: 720px) {
    .ia-topbar-brand__text { display: none; }
}

/* ── Greeting / who-is-signed-in cluster ─────────────────────── */
.ia-topbar-context {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--ia-border);
    overflow: hidden;
}
.ia-topbar-greeting {
    color: var(--ia-ink-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.ia-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ia-topbar-name {
    color: var(--ia-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.ia-topbar-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--ia-r-pill);
    background: var(--ia-bg-soft);
    color: var(--ia-ink-2);
    border: 1px solid var(--ia-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}
.ia-topbar-role-chip i { font-size: 10px; color: var(--ia-ink-2); }

@media (max-width: 920px) {
    .ia-topbar-context { padding-left: 12px; gap: 8px; }
    .ia-topbar-greeting { display: none; }
}
@media (max-width: 720px) {
    .ia-topbar-context { padding-left: 0; border-left: 0; }
    .ia-topbar-role-chip { display: none; }
}

/* ── Right cluster: date pill + bell + profile ───────────────── */
.ia-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.ia-topbar-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--ia-r-pill);
    background: var(--ia-bg-soft);
    border: 1px solid var(--ia-border);
    color: var(--ia-ink-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.ia-topbar-date i { color: var(--ia-ink-3); font-size: 12px; }

@media (max-width: 920px) { .ia-topbar-date { display: none; } }

/* ── Light-mode override of notifications.css dark-trigger styles ──
   notifications.css scopes its bell/avatar styling to `.admin-header`
   assuming a dark topbar. We're now light, so re-paint them.
   Specificity: 0,3,0 vs original 0,2,0 → wins. */
.ia-topbar.admin-header .ia-notif.notifications-icon,
.ia-topbar.ad-manager-header .ia-notif.notifications-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ia-r-md);
    background: var(--ia-surface);
    border: 1px solid var(--ia-border-strong);
    color: var(--ia-ink);
    box-shadow: var(--ia-shadow-1);
}
.ia-topbar.admin-header .ia-notif.notifications-icon:hover,
.ia-topbar.ad-manager-header .ia-notif.notifications-icon:hover {
    background: var(--ia-bg-soft);
    border-color: var(--ia-border-strong);
    color: var(--ia-ink);
    transform: translateY(-1px);
}
.ia-topbar.admin-header .ia-notif.notifications-icon:focus-visible,
.ia-topbar.ad-manager-header .ia-notif.notifications-icon:focus-visible {
    outline: 2px solid var(--ia-border-focus);
    outline-offset: 2px;
}

/* Unread count: keep ink-fill but border in surface so it cuts cleanly
   against the white topbar (matches `.is-light` recipe in notifications.css). */
.ia-topbar .ia-notif .notification-count {
    border-color: var(--ia-surface);
}

/* ── Profile button (avatar + chevron) ───────────────────────── */
.ia-topbar.admin-header .user-profile,
.ia-topbar.ad-manager-header .user-profile {
    width: auto !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 3px 10px 3px 3px;
    border-radius: var(--ia-r-md) !important;
    background: var(--ia-surface) !important;
    border: 1px solid var(--ia-border-strong) !important;
    color: var(--ia-ink);
    box-shadow: var(--ia-shadow-1);
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.ia-topbar.admin-header .user-profile:hover,
.ia-topbar.ad-manager-header .user-profile:hover {
    background: var(--ia-bg-soft) !important;
    border-color: var(--ia-border-strong) !important;
    transform: translateY(-1px);
}
.ia-topbar.admin-header .user-profile:focus-visible,
.ia-topbar.ad-manager-header .user-profile:focus-visible {
    outline: 2px solid var(--ia-border-focus);
    outline-offset: 2px;
}

/* The avatar img sits in a 32px square; chevron sits to its right. */
.ia-topbar.admin-header .user-profile img,
.ia-topbar.ad-manager-header .user-profile img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.ia-topbar-profile-caret {
    color: var(--ia-ink-3);
    font-size: 10px;
    transition: transform var(--ia-dur-2) var(--ia-ease), color var(--ia-dur-2) var(--ia-ease);
    flex-shrink: 0;
}
.ia-topbar.admin-header .user-profile:hover .ia-topbar-profile-caret,
.ia-topbar.ad-manager-header .user-profile:hover .ia-topbar-profile-caret {
    color: var(--ia-ink);
}
/* Rotate caret when the menu is open — driven by the `.show` class that
   the existing JS already toggles on the sibling settings container. */
.ia-topbar .user-profile:has(.admin-header-settings-container.show) .ia-topbar-profile-caret,
.ia-topbar .user-profile:has(.ad-manager-header-settings-container.show) .ia-topbar-profile-caret {
    transform: rotate(180deg);
    color: var(--ia-ink);
}


/* ============================================================
   14. SIDEBAR  (admin / ad-manager portal navigation)
   ============================================================
   Design-system layer for the existing legacy sidebar markup
   (.sidebar > .nav.admin-sidebar > .nav__container > ...).

   The blade template now also carries `.ia-sidenav`, which scopes
   every rule below. Specificity is intentionally one class higher
   than the legacy rules in style.css so we can override the
   blood-red gradient + #9D0B0E active states (which violate v2
   design rule #2 — "9D0B0E is logo-only — never on UI elements")
   without touching style.css.

   v2 charcoal nav recipe (mirrored from tokens.css):
     bg            : --ia-nav-bg            (#1A1A1A)
     bg hover/lift : --ia-nav-bg-2          (#232120)
     idle text     : --ia-nav-ink           (#C4BEB8)
     active text   : --ia-nav-ink-active    (#FFFFFF)
     active bg     : --ia-nav-active-bg     (rgba(255,255,255,.06))
     active rail   : --ia-nav-active-bar    (#FFFFFF, 3px on left)
   ============================================================ */

/* Outer wrapper — flat ink fills the gradient legacy. Specificity 0,2,0
   beats the legacy `.admin-sidebar { background: var(--admin-sidebar-color) }`
   at 0,1,0. */
.ia-sidenav.admin-sidebar,
.ia-sidenav.ad-manager-sidebar {
    background: var(--ia-nav-bg);
}
.ia-sidenav .nav__container {
    background: transparent;
    padding-bottom: 24px;
    font-family: var(--ia-font-sans);
}

/* Subtle right-edge separator so the white topbar/page meets the dark
   sidebar with a clean line, not a hard cliff. */
.ia-sidenav.admin-sidebar,
.ia-sidenav.ad-manager-sidebar {
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}

/* ── Top bar inside the sidebar: hamburger toggle + "Admin Console" label ──
   Replaces the legacy logo + eyebrow stack. The hamburger pins / unpins the
   sidebar; the label only renders when the sidebar is expanded so the
   collapsed 60px column shows the icon dead-center. */
.ia-sidenav .nav__topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 10px;
    margin: 0;
    height: 64px;                              /* matches --ia-topbar-h so sidebar/topbar baselines align */
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ia-sidenav-toggle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ia-r-md);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--ia-nav-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--ia-dur-2) var(--ia-ease),
                border-color var(--ia-dur-2) var(--ia-ease),
                color var(--ia-dur-2) var(--ia-ease),
                transform var(--ia-dur-2) var(--ia-ease);
}
.ia-sidenav-toggle:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    color: var(--ia-nav-ink-active);
    transform: translateY(-1px);
}
.ia-sidenav-toggle:focus-visible {
    outline: 2px solid var(--ia-nav-ink-active);
    outline-offset: 2px;
}
.ia-sidenav-toggle:active { transform: scale(.96); }

/* Three-bar hamburger glyph — 18px wide, 2px bars, 4px gaps. */
.ia-sidenav-toggle__bars {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-block;
}
.ia-sidenav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--ia-dur-3) var(--ia-ease),
                opacity var(--ia-dur-2) var(--ia-ease),
                top var(--ia-dur-3) var(--ia-ease);
}
.ia-sidenav-toggle__bars span:nth-child(1) { top: 0; }
.ia-sidenav-toggle__bars span:nth-child(2) { top: 6px; }
.ia-sidenav-toggle__bars span:nth-child(3) { top: 12px; }

/* When pinned, morph the bars into an "X" so the toggle reads as
   "click again to unpin / collapse". */
.ia-sidenav.nav--pinned .ia-sidenav-toggle__bars span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}
.ia-sidenav.nav--pinned .ia-sidenav-toggle__bars span:nth-child(2) {
    opacity: 0;
}
.ia-sidenav.nav--pinned .ia-sidenav-toggle__bars span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}
.ia-sidenav.nav--pinned .ia-sidenav-toggle {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: var(--ia-nav-ink-active);
}

/* "Admin Console" label next to the hamburger — only visible on expand. */
.ia-sidenav .nav__topbar .nav__header-name {
    color: var(--ia-ink-3) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    padding-inline: 0 !important;
    white-space: nowrap;
    transition: opacity var(--ia-dur-3) var(--ia-ease) !important;
    opacity: 0;
    visibility: hidden;
}
.ia-sidenav.nav--pinned .nav__topbar .nav__header-name,
.ia-sidenav.active-walkthrough .nav__topbar .nav__header-name {
    opacity: 1;
    visibility: visible;
}

/* ── Nav list scaffolding ──────────────────────────────────── */
.ia-sidenav .nav__list {
    padding: 0 8px;
    display: flex !important;
    flex-direction: column;
    row-gap: 0 !important;
}
.ia-sidenav .nav__items {
    display: flex !important;
    flex-direction: column;
    row-gap: 2px !important;
}

/* ── Section eyebrow — "Overview / Operations / Configuration / Reports" ── */
.ia-sidenav .nav__section {
    margin: 14px 4px 6px;
    padding: 10px 8px 4px;
    height: 28px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.ia-sidenav .nav__section:first-child {
    border-top: 0;
    margin-top: 6px;
    padding-top: 4px;
    height: 22px;
}
.ia-sidenav .nav__section span {
    color: var(--ia-ink-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 12px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity var(--ia-dur-3) var(--ia-ease),
                transform var(--ia-dur-3) var(--ia-ease);
}
.ia-sidenav.nav--pinned .nav__section span,
.ia-sidenav.active-walkthrough .nav__section span {
    opacity: 1;
    transform: translateX(0);
}

/* ── Nav item links — replace red active/hover with ink overlay ──
   Specificity: 0,3,0 with !important overrides the legacy
   `.admin-sidebar .nav__link.active { ... !important }` at 0,3,0
   thanks to the cascade-order tie-break (this file loads after style.css). */
.ia-sidenav .nav__link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    border-radius: var(--ia-r-md) !important;
    color: var(--ia-nav-ink) !important;
    background: transparent !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--ia-dur-2) var(--ia-ease),
                color var(--ia-dur-2) var(--ia-ease);
}
.ia-sidenav .nav__link .fixed-width-icon {
    width: 20px !important;
    font-size: 14px;
    color: var(--ia-nav-ink);
    transition: color var(--ia-dur-2) var(--ia-ease);
    flex-shrink: 0;
    text-align: center;
}
.ia-sidenav .nav__link .nav__name {
    color: var(--ia-nav-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--ia-dur-2) var(--ia-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ----- HOVER ----- */
.ia-sidenav.admin-sidebar .nav__link:hover,
.ia-sidenav.ad-manager-sidebar .nav__link:hover {
    background: var(--ia-nav-bg-2) !important;
    color: var(--ia-nav-ink-active) !important;
}
.ia-sidenav .nav__link:hover .fixed-width-icon,
.ia-sidenav .nav__link:hover .nav__name {
    color: var(--ia-nav-ink-active) !important;
}

/* ----- ACTIVE ----- brand red fill with white text/icon + white left rail.
   Brand red (--ia-logo) is the iA wordmark color; using it on the active
   nav item ties navigation to the brand. White rail anchors the row to
   the sidebar edge so the user always sees "you are here". */
.ia-sidenav.admin-sidebar .nav__link.active,
.ia-sidenav.ad-manager-sidebar .nav__link.active {
    background: var(--ia-logo) !important;
    color: var(--ia-nav-ink-active) !important;
    box-shadow: 0 6px 18px -8px rgba(157, 11, 14, .55);
}
.ia-sidenav .nav__link.active .fixed-width-icon,
.ia-sidenav .nav__link.active .nav__name {
    color: var(--ia-nav-ink-active) !important;
}
.ia-sidenav .nav__link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ia-nav-ink-active);
    box-shadow: 0 0 12px 0 rgba(255, 255, 255, .35);
}

/* Hover on the already-active item — slightly darker red so the click
   feels responsive without losing the active state. */
.ia-sidenav.admin-sidebar .nav__link.active:hover,
.ia-sidenav.ad-manager-sidebar .nav__link.active:hover {
    background: #840A0C !important;
    color: var(--ia-nav-ink-active) !important;
}

/* Focus ring for keyboard navigation. */
.ia-sidenav .nav__link:focus-visible {
    outline: 2px solid var(--ia-nav-ink-active);
    outline-offset: 2px;
}

/* ── Inline counter pill (e.g. unread campaign messages) ───── */
.ia-sidenav .nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--ia-r-pill);
    background: var(--ia-nav-ink-active);
    color: var(--ia-ink);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Hide the legacy nav__name visibility hack — we use opacity instead so
   spacing stays predictable when collapsed. */
.ia-sidenav .nav__link span {
    visibility: visible !important;
    opacity: 0;
    transition: opacity var(--ia-dur-3) var(--ia-ease) !important;
}
.ia-sidenav.nav--pinned .nav__link span,
.ia-sidenav.active-walkthrough .nav__link span {
    opacity: 1;
}

/* ── Kill the legacy hover-expand on .ia-sidenav ─────────────
   style.css ships `.sidebar .nav:hover { width: 100% }` plus visibility
   rules that auto-show labels on hover. We want click-only toggling, so
   neutralise them when `.ia-sidenav` is present. The only paths that
   expand the sidebar are now `.nav--pinned` (hamburger click) and the
   `.active-walkthrough` class used by the ad-manager onboarding tour. */
.sidebar .ia-sidenav.nav:hover {
    width: 60px;
}
.sidebar .ia-sidenav.nav.nav--pinned {
    width: 261px;
}
.sidebar .ia-sidenav.nav:hover .nav__header-name {
    visibility: hidden;
}
.sidebar .ia-sidenav.nav.nav--pinned .nav__header-name,
.sidebar .ia-sidenav.nav.nav--pinned .nav__link span,
.sidebar .ia-sidenav.nav.active-walkthrough .nav__header-name,
.sidebar .ia-sidenav.nav.active-walkthrough .nav__link span {
    visibility: visible;
}


/* Custom scrollbar for the nav container — quiet on the dark surface. */
.ia-sidenav .nav__container::-webkit-scrollbar { width: 6px; }
.ia-sidenav .nav__container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}
.ia-sidenav .nav__container::-webkit-scrollbar-track { background: transparent; }

/* Reduce-motion: drop the slide-in transition. */
@media (prefers-reduced-motion: reduce) {
    .ia-sidenav .nav__link span,
    .ia-sidenav .nav__section span,
    .ia-sidenav .nav__header-name {
        transition: none !important;
    }
}