/*
 * =============================================================================
 * FIRMPORTAL DESIGN SYSTEM
 * =============================================================================
 *
 * Aesthetic: Quiet luxury + structured productivity
 * References: Uber, Brex (aesthetic) / Airtable, Canopy (productivity)
 *
 * BRAND: "Ink & Lime" (Palette 008)
 *   Ink:      #0c0c0e (near-black — text, headings, dark rail surface)
 *   Accent:   #84cc16 lime (on light) / #a3e635 (on dark); INK text on lime
 *   Link:     #65a30d
 *
 * NEUTRALS (warm stone palette)
 *   50: #FAFAFA  100: #F5F5F4  200: #E7E5E4  300: #D6D3D1
 *   400: #A8A29E  500: #78716C  600: #57534E  700: #44403C
 *   800: #292524  900: #1C1917
 *
 * FONTS (Google Fonts)
 *   Body/UI:  Plus Jakarta Sans
 *   Display:  Reem Kufi (all headings)
 *   Italic:   Lora (emphasis only)
 *   Wordmark: stacked SVG asset (/img/wordmark-stacked-on-*.svg)
 *   Body size: 15px (0.9375rem)
 *
 * SPACING
 *   Base unit: 8px
 *   Bootstrap mapping: p-1=4px, p-2=8px, p-3=16px, p-4=24px, p-5=48px
 *
 * RADIUS
 *   sm: 6px, md: 8px, lg: 12px
 *
 * LAYOUT
 *   Sidebar width: 260px (desktop), offcanvas (mobile <992px)
 *   Max content width: 1200px
 *
 * FILE STRUCTURE
 *   1. Design tokens (--ip-* custom properties)
 *   2. Bootstrap variable overrides (:root)
 *   3. Base element resets
 *   4. Typography scale
 *   5. Component overrides (buttons, forms, alerts, tables, cards, badges)
 *   6. App layout (sidebar, main content, mobile header, offcanvas)
 *   7. Auth layout (split panel, branding, form area)
 *   8. Custom utilities
 * =============================================================================
 */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
    /* Accent — Ink & Lime (Palette 008) */
    --ip-accent: #84cc16;            /* lime — primary fill, progress, active, focus (light surfaces) */
    --ip-accent-rgb: 132, 204, 22;
    --ip-accent-hover: #6aa312;      /* lime-deep (lime 80% + black) */
    --ip-accent-light: #a3e635;      /* lime on dark surfaces */
    --ip-accent-on-dark: #a3e635;    /* alias for dark-surface lime accents */
    --ip-accent-subtle: #ebf5d0;     /* lime tint (lime 12% + white) */
    --ip-accent-subtle-hover: #e0eebb;
    --ip-on-accent: #0c0c0e;         /* INK text on lime fills — never white */
    --ip-ink: #0c0c0e;               /* near-black brand ink */
    --ip-link: #65a30d;              /* readable lime link on white */

    /* Status palette — cohesive with Ink & Lime.
       positive = done/confirmed (lime); active = in-progress (faint lime tint);
       action = needs-you (amber, kept); neutral = inactive/info; danger = errors only. */
    --ip-positive-bg: #ebf5d0;       /* lime tint */
    --ip-positive-text: #3f5910;     /* deep lime */
    --ip-positive: #84cc16;          /* lime — dots, check circles */
    --ip-active-bg: #f4f9e6;         /* faint lime tint */
    --ip-active-text: #4d7c0f;       /* olive-lime */
    --ip-action-bg: #F6C453;         /* gold pill — action-required badges (matches sidebar count) */
    --ip-action-text: #3D2A06;

    /* Warm stone neutrals */
    --ip-neutral-50: #FAFAFA;
    --ip-neutral-100: #F5F5F4;
    --ip-neutral-200: #E7E5E4;
    --ip-neutral-300: #D6D3D1;
    --ip-neutral-400: #A8A29E;
    --ip-neutral-500: #78716C;
    --ip-neutral-600: #57534E;
    --ip-neutral-700: #44403C;
    --ip-neutral-800: #292524;
    --ip-neutral-900: #1C1917;

    /* Fonts */
    --ip-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* body / UI */
    --ip-font-display: 'Reem Kufi', 'Plus Jakarta Sans', system-ui, sans-serif;  /* headings / display */
    --ip-font-serif: 'Lora', Georgia, serif;                                     /* italic emphasis only */

    /* Spacing */
    --ip-spacing-unit: 8px;

    /* Radius */
    --ip-radius-sm: 6px;
    --ip-radius-md: 8px;
    --ip-radius-lg: 12px;

    /* Layout */
    --ip-sidebar-width: 260px;

    /* Transitions */
    --ip-transition-fast: 150ms ease;
    --ip-transition-normal: 200ms ease;
}


/* =============================================================================
   2. BOOTSTRAP VARIABLE OVERRIDES
   ============================================================================= */

:root,
[data-bs-theme="light"] {
    /* Font */
    --bs-font-sans-serif: var(--ip-font-family);
    --bs-body-font-family: var(--ip-font-family);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    /* Primary = accent */
    --bs-primary: var(--ip-accent);
    --bs-primary-rgb: var(--ip-accent-rgb);
    --bs-primary-text-emphasis: #3f5910;
    --bs-primary-bg-subtle: var(--ip-accent-subtle);
    --bs-primary-border-subtle: #d4e8a8;

    /* Body colors */
    --bs-body-color: var(--ip-neutral-800);
    --bs-body-color-rgb: 41, 37, 36;
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;

    /* Secondary/tertiary */
    --bs-secondary-color: var(--ip-neutral-500);
    --bs-secondary-bg: var(--ip-neutral-100);
    --bs-tertiary-bg: var(--ip-neutral-50);
    --bs-tertiary-color: var(--ip-neutral-400);

    /* Headings */
    --bs-heading-color: var(--ip-neutral-900);

    /* Links — readable lime on white */
    --bs-link-color: var(--ip-link);
    --bs-link-color-rgb: 101, 163, 13;
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--ip-accent-hover);
    --bs-link-hover-color-rgb: 106, 163, 18;

    /* Borders */
    --bs-border-color: var(--ip-neutral-200);
    --bs-border-color-translucent: rgba(41, 37, 36, 0.08);
    --bs-border-radius: var(--ip-radius-md);
    --bs-border-radius-sm: var(--ip-radius-sm);
    --bs-border-radius-lg: var(--ip-radius-lg);

    /* Shadows — minimal */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* Focus ring */
    --bs-focus-ring-color: rgba(132, 204, 22, 0.35);
    --bs-focus-ring-width: 0.2rem;

    /* Semantic colors — muted, sophisticated */
    --bs-success: #4d7c0f;
    --bs-success-rgb: 77, 124, 15;
    --bs-danger: #C53030;
    --bs-danger-rgb: 197, 48, 48;
    --bs-warning: #B7791F;
    --bs-warning-rgb: 183, 121, 31;
    --bs-info: #57534E;
    --bs-info-rgb: 87, 83, 78;
}


/* =============================================================================
   3. BASE ELEMENT RESETS
   ============================================================================= */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    letter-spacing: -0.011em;
}


/* =============================================================================
   4. TYPOGRAPHY SCALE
   ============================================================================= */

/* All headings use the Reem Kufi display face (Ink & Lime brand) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--ip-font-display); }

h1, .h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2, .h2 { font-size: 1.5rem;   font-weight: 700; letter-spacing: -0.02em;  line-height: 1.25; }
h3, .h3 { font-size: 1.25rem;  font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
h4, .h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
h5, .h5 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
h6, .h6 {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-500);
    line-height: 1.4;
}

/* Italic emphasis — Lora, in lime (brand convention) */
em {
    font-family: var(--ip-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ip-accent);
}


/* =============================================================================
   5. COMPONENT OVERRIDES
   ============================================================================= */

/* ----- Buttons ----- */

.btn {
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: all var(--ip-transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    --bs-btn-color: var(--ip-on-accent);
    --bs-btn-bg: var(--ip-accent);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-on-accent);
    --bs-btn-hover-bg: var(--ip-accent-hover);
    --bs-btn-hover-border-color: var(--ip-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
    --bs-btn-active-color: var(--ip-on-accent);
    --bs-btn-active-bg: var(--ip-accent-hover);
    --bs-btn-active-border-color: var(--ip-accent-hover);
    --bs-btn-disabled-color: var(--ip-on-accent);
    --bs-btn-disabled-bg: var(--ip-accent);
    --bs-btn-disabled-border-color: var(--ip-accent);
    --bs-btn-disabled-opacity: 0.5;
}

.btn-outline-primary {
    --bs-btn-color: var(--ip-accent-hover);
    --bs-btn-border-color: var(--ip-accent);
    --bs-btn-hover-color: var(--ip-on-accent);
    --bs-btn-hover-bg: var(--ip-accent);
    --bs-btn-hover-border-color: var(--ip-accent);
    --bs-btn-active-color: var(--ip-on-accent);
    --bs-btn-active-bg: var(--ip-accent-hover);
    --bs-btn-active-border-color: var(--ip-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ip-accent-rgb);
}

/* Action button — the primary CTA INSIDE an amber action card/panel (e.g. Confirm
   Elections). Gold to match the count/status pills, so the action zone reads as one
   cohesive amber module. Lime stays reserved for non-action primary buttons. */
.btn-action {
    --bs-btn-color: var(--ip-action-text);
    --bs-btn-bg: var(--ip-action-bg);
    --bs-btn-border-color: var(--ip-action-bg);
    --bs-btn-hover-color: var(--ip-action-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ip-action-bg) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ip-action-bg) 88%, black);
    --bs-btn-active-color: var(--ip-action-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--ip-action-bg) 82%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ip-action-bg) 82%, black);
    --bs-btn-disabled-color: var(--ip-action-text);
    --bs-btn-disabled-bg: var(--ip-action-bg);
    --bs-btn-disabled-border-color: var(--ip-action-bg);
    --bs-btn-disabled-opacity: 0.5;
}

.btn-secondary {
    --bs-btn-color: var(--ip-neutral-700);
    --bs-btn-bg: var(--ip-neutral-100);
    --bs-btn-border-color: var(--ip-neutral-200);
    --bs-btn-hover-color: var(--ip-neutral-800);
    --bs-btn-hover-bg: var(--ip-neutral-200);
    --bs-btn-hover-border-color: var(--ip-neutral-300);
    --bs-btn-active-color: var(--ip-neutral-900);
    --bs-btn-active-bg: var(--ip-neutral-200);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 0.9375rem;
    border-radius: var(--ip-radius-md);
}

/* ----- Form Controls ----- */

.form-control {
    padding: 10px 14px;
    font-size: 0.9375rem;
    border-color: var(--ip-neutral-300);
    border-radius: var(--ip-radius-md);
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.form-control:hover {
    border-color: var(--ip-neutral-400);
}

.form-control:focus {
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

.form-control::placeholder {
    color: var(--ip-neutral-400);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ip-neutral-700);
    margin-bottom: 6px;
}

/* Floating labels */
.form-floating > .form-control {
    padding: 1.25rem 0.875rem 0.625rem;
    height: auto;
    min-height: 3.25rem;
}

.form-floating > label {
    padding: 1rem 0.875rem;
    color: var(--ip-neutral-500);
    font-weight: 400;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--ip-link);
    font-weight: 500;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Checkboxes */
.form-check-input:checked {
    background-color: var(--ip-accent);
    border-color: var(--ip-accent);
}

.form-check-input:focus {
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--ip-neutral-600);
}

/* Radios INSIDE the amber elections card use the gold action color (gold fill +
   dark ink dot) so the whole action zone is one cohesive amber module — matching
   the .btn-action CTA. Lime stays the default check color everywhere else. */
.elections-action-card .form-check-input:checked {
    background-color: var(--ip-action-bg);
    border-color: color-mix(in srgb, var(--ip-action-bg) 75%, black);
}

.elections-action-card .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%233D2A06'/%3e%3c/svg%3e");
}

.elections-action-card .form-check-input:focus {
    border-color: color-mix(in srgb, var(--ip-action-bg) 75%, black);
    box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.35);
}

/* Validation states */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-danger);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1);
}

.text-danger {
    color: var(--bs-danger) !important;
    font-size: 0.8125rem;
}

/* Focus ring — unified */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15);
}

/* ----- Input Groups ----- */

.input-group .btn {
    border-color: var(--ip-neutral-300);
    color: var(--ip-neutral-500);
    transition: all var(--ip-transition-fast);
}

.input-group .btn:hover {
    color: var(--ip-neutral-700);
    background-color: var(--ip-neutral-50);
}

/* ----- Alerts ----- */

.alert {
    border: none;
    border-radius: var(--ip-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 3px solid;
}

.alert-danger {
    background-color: #FDF2F2;
    color: #9B2C2C;
    border-left-color: var(--bs-danger);
}

.alert-success {
    background-color: var(--ip-positive-bg);
    color: var(--ip-positive-text);
    border-left-color: var(--bs-success);
}

.alert-warning {
    background-color: #FFFFF0;
    color: #975A16;
    border-left-color: var(--bs-warning);
}

.alert-info {
    background-color: var(--ip-neutral-100);
    color: var(--ip-neutral-700);
    border-left-color: var(--ip-neutral-400);
}

/* Positive badge (Bootstrap's success contextual) — lime tint, not solid green.
   Keeps the "ink on lime / lime = positive" story instead of white-on-green. */
.text-bg-success {
    background-color: var(--ip-positive-bg) !important;
    color: var(--ip-positive-text) !important;
}

/* ----- Tables ----- */

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ip-neutral-50);
    font-size: 0.875rem;
}

.table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-500);
    border-bottom-width: 1px;
    border-bottom-color: var(--ip-neutral-200);
    padding: 10px 16px;
}

.table > tbody > tr > td {
    padding: 12px 16px;
    border-bottom-color: var(--ip-neutral-100);
    vertical-align: middle;
}

.table > tbody > tr {
    transition: background-color var(--ip-transition-fast);
}

.table > tbody > tr:hover {
    background-color: var(--ip-neutral-50);
}

/* QRE matrix: categories down the left, taxing authorities across the top.
   Lives inside a bg-neutral-50 card, so the default row-hover would be
   invisible — suppress it. Row headers (the category names) opt out of the
   uppercase column-header treatment and get a quieter medium weight. The
   table sizes to its content (not full-width) so the columns pack to the
   left; .table-responsive supplies horizontal scroll when there are enough
   taxing authorities to overflow. The Total row gets a 2px rule above to
   separate the rolled-up per-authority totals from the line items, and
   inter-row hairlines are suppressed so the matrix reads as a clean grid. */
.qre-matrix {
    width: auto;
}

.qre-matrix > tbody > tr:hover {
    background-color: transparent;
}

.qre-matrix > tbody > tr > th[scope="row"] {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ip-neutral-800);
    padding: 2px 16px;
    white-space: nowrap;
}

.qre-matrix > tbody > tr > td,
.qre-matrix > tbody > tr > th {
    border-bottom: none;
    white-space: nowrap;
}

.qre-matrix > tbody > tr > td {
    font-variant-numeric: tabular-nums;
    padding: 2px 16px;
}

/* Total row sits beneath the 2px separator; give it a bit of extra top
   padding so the rule has breathing room from the Computer Rental row above
   and from the Total figure below. */
.qre-matrix > tbody > tr.qre-matrix-total > th,
.qre-matrix > tbody > tr.qre-matrix-total > td {
    border-top: 2px solid var(--ip-neutral-200);
    border-bottom: none;
    font-weight: 600;
    color: var(--ip-neutral-900);
    padding-top: 8px;
    padding-bottom: 2px;
}

/* ----- Cards ----- */

.card {
    --bs-card-border-color: var(--ip-neutral-200);
    --bs-card-border-width: 1px;
    --bs-card-border-radius: var(--ip-radius-lg);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: #fff;
    box-shadow: none;
}

.card-header {
    border-bottom-color: var(--ip-neutral-100);
    padding: 20px 24px 16px;
}

.card-body {
    padding: 20px 24px;
}

/* ----- Badges ----- */

.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    padding: 4px 8px;
}

/* ----- Nav Pills ----- */

.nav-pills .nav-link {
    color: var(--ip-neutral-600);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--ip-radius-sm);
    transition: all var(--ip-transition-fast);
}

.nav-pills .nav-link:hover {
    color: var(--ip-neutral-800);
    background-color: var(--ip-neutral-100);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ip-accent);
}

/* ----- Nav Tabs Underline (detail pages) ----- */

.nav-tabs-underline {
    border-bottom: 2px solid var(--ip-neutral-200);
    gap: 0;
}

.nav-tabs-underline .nav-link {
    color: var(--ip-neutral-500);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 10px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: all var(--ip-transition-fast);
}

.nav-tabs-underline .nav-link:hover {
    color: var(--ip-neutral-800);
    background: none;
    border-bottom-color: var(--ip-neutral-300);
}

.nav-tabs-underline .nav-link.active {
    color: var(--ip-accent);
    background: none;
    border-bottom-color: var(--ip-accent);
    font-weight: 600;
}

/* Attention-grabbing tab treatment: applied when the user has an open action
   on this tab (e.g., elections awaiting confirmation). Stays within the
   AwaitingElection warm-yellow palette used elsewhere in the app so the
   treatment reads as part of the system, not a bolt-on. */
.nav-tabs-underline .nav-link.requires-action {
    background: #FFF9DB;
    color: #975A16;
    font-weight: 600;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding-left: 16px;
    padding-right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-tabs-underline .nav-link.requires-action:hover {
    color: #6B3E0E;
    background: #FFF4BC;
    border-bottom-color: transparent;
}

.nav-tabs-underline .nav-link.requires-action.active {
    color: #975A16;
    background: #FFF9DB;
    border-bottom-color: #D97706;
}

/* Broadcasting amber dot. Uses an animated box-shadow ring rather than a
   pseudo-element so we don't fight the parent's stacking. Pulse rests when
   the tab is active (user has arrived — no need to keep pulling them in) and
   degrades to a soft static halo for reduced-motion users. */
.elections-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D97706;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
    animation: elections-tab-pulse 2.4s ease-out infinite;
}

@keyframes elections-tab-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(217, 119, 6, 0.55); }
    80%  { box-shadow: 0 0 0 12px rgba(217, 119, 6, 0);    }
    100% { box-shadow: 0 0 0 12px rgba(217, 119, 6, 0);    }
}

.nav-tabs-underline .nav-link.requires-action.active .elections-tab-dot {
    animation: none;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .elections-tab-dot {
        animation: none;
        box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
    }
}

/* ----- Status Dots ----- */

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-provided {
    background-color: var(--ip-positive);
}

.status-dot-pending {
    background-color: var(--ip-neutral-300);
}

/* ----- Dropdowns ----- */

.dropdown-menu {
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 4px;
    font-size: 0.875rem;
}

.dropdown-item {
    border-radius: var(--ip-radius-sm);
    padding: 7px 12px;
    color: var(--ip-neutral-700);
    transition: background-color var(--ip-transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ip-neutral-100);
    color: var(--ip-neutral-900);
}

.dropdown-divider {
    border-color: var(--ip-neutral-100);
    margin: 4px 0;
}

.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* ----- Form Select ----- */

.form-select {
    font-size: 0.9375rem;
    border-color: var(--ip-neutral-300);
    border-radius: var(--ip-radius-md);
    padding: 10px 14px;
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.form-select:hover {
    border-color: var(--ip-neutral-400);
}

.form-select:focus {
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

/* ----- Searchable Combobox ----- */

.ip-combobox {
    position: relative;
    display: inline-block;
}

.ip-combobox-input {
    width: 100%;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ip-neutral-900);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23A8A29E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 12px;
    border: 1px solid var(--ip-neutral-300);
    border-radius: var(--ip-radius-md);
    padding: 10px 36px 10px 14px;
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.ip-combobox-input::placeholder {
    color: var(--ip-neutral-500);
}

.ip-combobox-input:hover {
    border-color: var(--ip-neutral-400);
}

.ip-combobox-input:focus {
    outline: none;
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

/* When a value is selected, hide the chevron — the clear button takes its slot */
.ip-combobox:has([data-combobox-value]:not([value=""])) .ip-combobox-input {
    background-image: none;
}

.ip-combobox-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ip-neutral-400);
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    transition: color var(--ip-transition-fast), background-color var(--ip-transition-fast);
}

.ip-combobox-clear:hover {
    color: var(--ip-neutral-700);
    background-color: var(--ip-neutral-50);
}

.ip-combobox-clear[hidden] {
    display: none;
}

.ip-combobox-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.ip-combobox-panel[hidden] {
    display: none;
}

.ip-combobox-panel li {
    padding: 8px 12px;
    font-size: 0.9375rem;
    color: var(--ip-neutral-700);
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    transition: background-color var(--ip-transition-fast);
}

.ip-combobox-panel li.is-active,
.ip-combobox-panel li:hover {
    background-color: var(--ip-neutral-50);
    color: var(--ip-neutral-900);
}

.ip-combobox-panel li[hidden] {
    display: none;
}

.ip-combobox-no-match {
    color: var(--ip-neutral-400) !important;
    font-style: italic;
    cursor: default !important;
    background-color: transparent !important;
}

/* ----- Form Switch ----- */

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--ip-accent);
    border-color: var(--ip-accent);
}

/* Bootstrap bakes a blue thumb into the switch's background-image on focus.
   Keep the off-state focused thumb neutral (matching the resting thumb) so it
   never flashes brand-foreign blue. Checked+focused still gets Bootstrap's white
   thumb, and our lime focus ring (from .form-check-input:focus) is unaffected. */
.form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.25%29'/%3e%3c/svg%3e");
}

/* ----- Breadcrumbs ----- */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ip-neutral-400);
    --bs-breadcrumb-item-active-color: var(--ip-neutral-600);
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--ip-neutral-500);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--ip-accent);
}

/* ----- Progress Bars ----- */

.progress {
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.4s ease;
}

/* ----- Modals ----- */

.modal-backdrop.show {
    opacity: 0.3;
}

.modal-content {
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ----- Accordion ----- */

.accordion {
    --bs-accordion-border-color: var(--ip-neutral-200);
    --bs-accordion-border-radius: var(--ip-radius-md);
    --bs-accordion-btn-padding-x: 20px;
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-body-padding-x: 20px;
    --bs-accordion-body-padding-y: 16px;
    --bs-accordion-active-bg: var(--ip-neutral-50);
    --bs-accordion-active-color: var(--ip-neutral-900);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

.accordion-button {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ip-neutral-800);
}

/* ----- Promo Banner ----- */

.comarketing-promo-inner {
    display: flex;
    border-radius: var(--ip-radius-lg);
    background: linear-gradient(135deg, var(--ip-accent-subtle) 0%, #fff 100%);
    border: 1px solid var(--ip-accent-subtle-hover);
    overflow: hidden;
}

.comarketing-promo-accent {
    width: 4px;
    flex-shrink: 0;
    background-color: var(--ip-accent);
}

.comarketing-promo-content {
    padding: 20px 24px;
}

.comarketing-promo-headline {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ip-neutral-900);
    margin-bottom: 6px;
}

.comarketing-promo-body {
    font-size: 0.8125rem;
    color: var(--ip-neutral-600);
    line-height: 1.6;
    margin-bottom: 16px;
}


.accordion-button:not(.collapsed) {
    color: var(--ip-neutral-900);
    font-weight: 600;
}

.accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

.accordion-body {
    font-size: 0.875rem;
    color: var(--ip-neutral-600);
    line-height: 1.7;
    border-top: 1px solid var(--ip-neutral-100);
}

.faq-short-answer {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ip-neutral-800);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ip-neutral-100);
}


/* =============================================================================
   6. APP LAYOUT (sidebar + main content)
   ============================================================================= */

/* ----- Wrapper ----- */

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

/* ----- Sidebar ----- */

.app-sidebar {
    width: var(--ip-sidebar-width);
    flex-shrink: 0;
    flex-direction: column;
    background:
        linear-gradient(134deg, rgba(12, 12, 14, 0) 70%, rgba(0, 0, 0, 0.55) 94%),
        radial-gradient(circle at 16px 180px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.30) 760px),
        radial-gradient(circle at 50% 0%, #161617 0%, #0c0c0e 70%);
    border-right: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    overflow-y: auto;
}

.app-sidebar-header {
    padding: 50px 20px 16px 30px;
}

/* Logo — stacked SVG wordmark; light/dark variant chosen per surface in markup */
.app-logo {
    display: inline-flex;
    text-decoration: none;
}

.app-logo img {
    display: block;
    width: auto;
    height: 30px;
}

.auth-brand-panel .app-logo img { height: 76px; }

.app-sidebar-nav {
    flex: 1;
    padding: 0 20px;
    overflow-y: auto;
}

.app-sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----- Sidebar Nav Items ----- */

.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px 12px;
}

.sidebar-nav-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    padding: 24px 12px 6px;
}

.sidebar-nav-item {
    margin-bottom: 2px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--ip-radius-sm);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ip-transition-fast), color var(--ip-transition-fast);
}

.sidebar-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar-nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
}

.sidebar-nav-link.active svg {
    color: var(--ip-accent-on-dark);
}

/* ----- Sidebar User Menu ----- */

.sidebar-user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    border-radius: var(--ip-radius-sm);
    transition: opacity var(--ip-transition-fast);
}

.sidebar-user-link:hover {
    opacity: 0.8;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-org {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-form {
    flex-shrink: 0;
}

.sidebar-logout-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--ip-radius-sm);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color var(--ip-transition-fast), background-color var(--ip-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logout-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ----- Main Content Area ----- */

.app-main {
    flex: 1;
    margin-left: var(--ip-sidebar-width);
    min-height: 100vh;
}

.app-content {
    padding: 40px 48px;
    max-width: 1200px;
}

/* ----- Mobile Header ----- */

.app-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ip-neutral-200);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-menu-toggle {
    background: none;
    border: none;
    padding: 6px;
    color: var(--ip-neutral-700);
    cursor: pointer;
    border-radius: var(--ip-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ip-transition-fast);
}

.app-menu-toggle:hover {
    background-color: var(--ip-neutral-100);
}

/* ----- Offcanvas Sidebar ----- */

.app-sidebar-offcanvas {
    width: var(--ip-sidebar-width) !important;
    background:
        linear-gradient(134deg, rgba(12, 12, 14, 0) 70%, rgba(0, 0, 0, 0.55) 94%),
        radial-gradient(circle at 16px 180px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.30) 760px),
        radial-gradient(circle at 50% 0%, #161617 0%, #0c0c0e 70%);
}

.app-sidebar-offcanvas .btn-close {
    filter: invert(1);
}

.app-sidebar-offcanvas .offcanvas-header {
    padding: 20px 20px 12px;
    border-bottom: none;
}

.app-sidebar-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
}

.app-sidebar-offcanvas .offcanvas-body .sidebar-nav-list {
    flex: 1;
}

/* ----- Responsive ----- */

@media (max-width: 991.98px) {
    .app-main {
        margin-left: 0;
    }

    .app-content {
        padding: 24px 16px;
    }
}


/* =============================================================================
   7. AUTH LAYOUT (split panel)
   ============================================================================= */

.auth-body {
    background-color: #fff;
}

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

/* Left branding panel */
.auth-brand-panel {
    width: 45%;
    max-width: 600px;
    background: linear-gradient(29deg, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}

.auth-brand-content {
    position: relative;
    z-index: 1;
}


.auth-brand-tagline {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Right form panel */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

/* Auth typography */
.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ip-neutral-900);
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 0.9375rem;
    color: var(--ip-neutral-500);
    margin-bottom: 32px;
}

.auth-link-small {
    font-size: 0.8125rem;
    color: var(--ip-link);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--ip-transition-fast);
}

.auth-link-small:hover {
    text-decoration: underline;
    color: var(--ip-accent-hover);
}

/* Auth mobile */
@media (max-width: 767.98px) {
    .auth-form-panel {
        padding: 32px 20px;
    }

    .auth-form-container {
        max-width: 100%;
    }
}


/* =============================================================================
   7b. ONBOARDING LAYOUT (focused, no navigation)
   ============================================================================= */

.onboarding-body {
    background-color: #fff;
}

.onboarding-header {
    border-bottom: none;
    background:
        linear-gradient(134deg, rgba(12, 12, 14, 0) 70%, rgba(0, 0, 0, 0.55) 94%),
        radial-gradient(circle at 16px 180px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.30) 760px),
        radial-gradient(circle at 50% 0%, #161617 0%, #0c0c0e 70%);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.onboarding-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px;
}

.onboarding-brand {
    display: flex;
    align-items: center;
}

.onboarding-firm-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.onboarding-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

@media (max-width: 575.98px) {
    .onboarding-content {
        padding: 32px 16px 64px;
    }

    .onboarding-header-inner {
        padding: 14px 16px;
    }
}


/* =============================================================================
   8. CUSTOM UTILITIES
   ============================================================================= */

/* Neutral text */
.text-neutral-400 { color: var(--ip-neutral-400) !important; }
.text-neutral-500 { color: var(--ip-neutral-500) !important; }
.text-neutral-600 { color: var(--ip-neutral-600) !important; }
.text-neutral-700 { color: var(--ip-neutral-700) !important; }
.text-neutral-900 { color: var(--ip-neutral-900) !important; }

/* Neutral backgrounds */
.bg-neutral-50  { background-color: var(--ip-neutral-50) !important; }
.bg-neutral-100 { background-color: var(--ip-neutral-100) !important; }
.bg-accent-subtle { background-color: var(--ip-accent-subtle) !important; }

/* Section spacing */
.section-gap { margin-bottom: 48px; }

/* Divider */
.divider {
    border: none;
    border-top: 1px solid var(--ip-neutral-200);
    margin: 24px 0;
}

/* Truncation */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide number input spinners */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinners {
    -moz-appearance: textfield;
}

/* ===== Stepper (multi-step flows) ===== */

.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepper-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all var(--ip-transition-normal);
}

.stepper-step.is-complete .stepper-indicator {
    background-color: var(--ip-accent);
    color: var(--ip-on-accent);
}

.stepper-step.is-active .stepper-indicator {
    background-color: var(--ip-accent);
    color: var(--ip-on-accent);
    box-shadow: 0 0 0 4px var(--ip-accent-subtle);
}

.stepper-step.is-upcoming .stepper-indicator {
    background-color: var(--ip-neutral-200);
    color: var(--ip-neutral-500);
}

.stepper-label {
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color var(--ip-transition-normal);
}

.stepper-step.is-complete .stepper-label {
    color: var(--ip-neutral-700);
}

.stepper-step.is-active .stepper-label {
    color: var(--ip-neutral-900);
}

.stepper-step.is-upcoming .stepper-label {
    color: var(--ip-neutral-400);
}

.stepper-line {
    flex: 1;
    height: 1px;
    margin: 0 16px;
    transition: background-color var(--ip-transition-normal);
}

.stepper-line.is-complete {
    background-color: var(--ip-accent);
}

.stepper-line.is-incomplete {
    background-color: var(--ip-neutral-200);
}

/* Stepper responsive */
@media (max-width: 575.98px) {
    .stepper-label {
        display: none;
    }

    .stepper-line {
        margin: 0 8px;
    }
}

/* ===== Focused Flow Container ===== */

.flow-container {
    max-width: 640px;
}

.flow-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32px;
    margin-top: 40px;
    border-top: 1px solid var(--ip-neutral-200);
}

/* ===== Selection Cards (radio-style choices) ===== */

.selection-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-lg);
    cursor: pointer;
    transition: border-color var(--ip-transition-fast), background-color var(--ip-transition-fast);
}

.selection-card:hover {
    border-color: var(--ip-neutral-300);
    background-color: var(--ip-neutral-50);
}

.selection-card.is-selected {
    border-color: var(--ip-accent);
    background-color: var(--ip-accent-subtle);
}

.selection-card .form-check-input {
    margin-top: 2px;
    flex-shrink: 0;
}

.selection-card-content {
    flex: 1;
}

.selection-card-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ip-neutral-800);
    margin-bottom: 2px;
}

.selection-card-description {
    font-size: 0.8125rem;
    color: var(--ip-neutral-500);
    line-height: 1.5;
}

.selection-card-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-accent);
    background-color: var(--ip-accent-subtle);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

/* ===== Client List (searchable selection list) ===== */

.client-list-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 150ms ease;
    border-bottom: 1px solid var(--ip-neutral-100);
}

.client-list-item:last-of-type {
    border-bottom: none;
}

.client-list-item:hover {
    background-color: var(--ip-neutral-50);
}

.client-list-item:active {
    background-color: var(--ip-neutral-100);
}

/* ===== Action Step (CTA + skip pattern) ===== */

.action-step-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.btn-skip {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ip-neutral-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ip-radius-sm);
    transition: color var(--ip-transition-fast);
    text-decoration: none;
}

.btn-skip:hover {
    color: var(--ip-accent);
}

/* ===== Confirmation Modal (Are you sure?) ===== */

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 24px;
}

.confirm-modal-overlay.is-visible {
    display: flex;
}

.confirm-modal {
    background: #fff;
    border-radius: var(--ip-radius-lg);
    border: 1px solid var(--ip-neutral-200);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    max-width: 440px;
    width: 100%;
    padding: 28px;
}

.confirm-modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ip-neutral-900);
    margin-bottom: 8px;
}

.confirm-modal-message {
    font-size: 0.875rem;
    color: var(--ip-neutral-500);
    line-height: 1.6;
    margin-bottom: 24px;
}

.confirm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== Billing Rate Table ===== */

.billing-rate-table {
    width: 100%;
    font-size: 0.875rem;
}

.billing-rate-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-500);
    padding: 10px 16px;
    border-bottom: 1px solid var(--ip-neutral-200);
    text-align: left;
}

.billing-rate-table th:last-child {
    text-align: right;
}

.billing-rate-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ip-neutral-100);
    vertical-align: middle;
    color: var(--ip-neutral-800);
}

.billing-rate-table td:last-child {
    text-align: right;
}

.billing-rate-table .rate-input-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.billing-rate-table .rate-input {
    width: 76px;
    padding: 6px 10px;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
    border: 1px solid var(--ip-neutral-300);
    border-radius: var(--ip-radius-sm);
    color: var(--ip-neutral-800);
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

.billing-rate-table .rate-input:hover {
    border-color: var(--ip-neutral-400);
}

.billing-rate-table .rate-input:focus {
    outline: none;
    border-color: var(--ip-accent);
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

.billing-rate-table .rate-suffix {
    font-size: 0.875rem;
    color: var(--ip-neutral-500);
    font-weight: 500;
}

/* ===== Import Modal Steps ===== */

.import-step {
    display: none;
}

.import-step.is-active {
    display: block;
}

.import-column-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;
    gap: 6px 24px;
}

.import-column-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    padding: 4px 0;
}

.import-column-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.import-column-dot.is-required {
    background-color: var(--ip-accent);
}

.import-column-dot.is-optional {
    background-color: var(--ip-neutral-300);
}

.import-column-name {
    color: var(--ip-neutral-700);
}

.import-column-name.is-optional {
    color: var(--ip-neutral-400);
}

.import-upload-zone {
    border: 2px dashed var(--ip-neutral-300);
    border-radius: var(--ip-radius-lg);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ip-transition-fast), background-color var(--ip-transition-fast);
}

.import-upload-zone:hover,
.import-upload-zone.is-dragover {
    border-color: var(--ip-accent);
    background-color: var(--ip-accent-subtle);
}

.import-upload-zone.has-file {
    border-style: solid;
    border-color: var(--ip-accent);
    background-color: var(--ip-accent-subtle);
}

.import-mapping-table {
    width: 100%;
    font-size: 0.875rem;
}

.import-mapping-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-neutral-500);
    padding: 10px 12px;
    border-bottom: 1px solid var(--ip-neutral-200);
}

.import-mapping-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ip-neutral-100);
    vertical-align: middle;
}

.import-mapping-table .field-name {
    font-weight: 500;
    color: var(--ip-neutral-800);
}

.import-mapping-table .field-optional {
    font-size: 0.6875rem;
    color: var(--ip-neutral-400);
    font-weight: 400;
    margin-left: 4px;
}

.import-mapping-table .form-select {
    font-size: 0.8125rem;
    padding: 6px 10px;
    min-width: 200px;
}

.import-mapping-table tr.is-matched td {
    background-color: var(--ip-neutral-50);
}

.import-mapping-table .match-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-left: 8px;
}

.import-mapping-table .match-indicator.is-exact {
    color: var(--bs-success);
}

.import-mapping-table .match-indicator.is-fuzzy {
    color: var(--bs-warning);
}

.import-mapping-table tr.is-unmatched-required td:first-child {
    color: var(--bs-danger);
}

.import-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.import-blocking-error {
    text-align: center;
    padding: 32px 24px;
}

.import-loading {
    display: none;
    text-align: center;
    padding: 48px 24px;
}

.import-loading.is-visible {
    display: block;
}

.import-loading-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid var(--ip-neutral-200);
    border-top-color: var(--ip-accent);
    border-radius: 50%;
    animation: import-spin 0.7s linear infinite;
    margin: 0 auto 16px;
}

@keyframes import-spin {
    to { transform: rotate(360deg); }
}

.import-loading-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ip-neutral-700);
    margin-bottom: 4px;
}

.import-loading-subtext {
    font-size: 0.8125rem;
    color: var(--ip-neutral-400);
}

/* ===== Elections — Action Required card + form ===== */
/* "Your Action Required" heading rendered as the gold action pill — same treatment
   as the study's status badge, so the panel heading and the status badge agree. */
.action-required-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--ip-action-bg);
    color: var(--ip-action-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.action-required-flag svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.elections-action-card {
    background: #FFFFF0;
    border-radius: 24px;
    padding: 36px;
    max-width: 460px;
}

/* ===== Filings — Action Required panel =====
   Same warm-yellow palette as the Elections action card so the two
   action-required moments read as part of the same system. The panel sits at
   the natural width of its content (rather than .elections-action-card's
   460px cap) because the filings list is grouped, multi-line, and benefits
   from horizontal room when there are many taxing authorities / entities.

   Each group renders as: a bold header ("{Authority} for {Entity}") followed
   by a 2-column grid of "{Year} return" labels and their action button. The
   grid is built with justify-content: start so labels and buttons pack
   together on the left rather than stretching to the panel edges. */
.filings-action-panel {
    background: #FFFFF0;
    border-radius: 24px;
    padding: 36px;
    width: fit-content;
    max-width: 100%;
}

.filings-deliverables-link,
.elections-credit-determination-link,
.stalled-cancel-link,
.stalled-client-inputs-link {
    color: #975A16;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.filings-deliverables-link:hover,
.filings-deliverables-link:focus,
.elections-credit-determination-link:hover,
.elections-credit-determination-link:focus,
.stalled-cancel-link:hover,
.stalled-cancel-link:focus,
.stalled-client-inputs-link:hover,
.stalled-client-inputs-link:focus {
    color: #6B3E0E;
}

/* ===== Stalled — Action Required panel =====
   Same warm-yellow palette as the Elections action card and the Filings
   action panel so all three action-required surfaces read as part of the
   same system. Sized at fit-content so the panel hugs its copy rather than
   stretching to fill the page; the max-width cap prevents the long
   paragraph from running edge-to-edge on wide viewports. */
.stalled-action-panel {
    background: #FFFFF0;
    border-radius: 24px;
    padding: 36px;
    width: fit-content;
    max-width: 640px;
}

.filings-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.filings-group-header {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ip-neutral-900);
    margin-bottom: 8px;
}

.filings-rows {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 12px;
    row-gap: 6px;
    justify-content: start;
    align-items: center;
}

.filings-row-year {
    font-size: 0.875rem;
    color: var(--ip-neutral-700);
    white-space: nowrap;
}

.filings-row-action {
    margin: 0;
}

/* Inline download icon for the deliverable associated with a filing
   requirement. Echoes the inline row-action pattern from §14 of the design
   guide (14px stroke icon, no label), but tinted with the warm-amber accent
   used elsewhere in the filings panel so it reads as part of this surface
   rather than the standard neutral row-action treatment. */
.filings-deliverable-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #975A16;
    transition: color var(--ip-transition-fast);
    flex-shrink: 0;
}

.filings-deliverable-download:hover,
.filings-deliverable-download:focus {
    color: #6B3E0E;
    outline: none;
}

/* Filed chip: small lime pill that doubles as an un-toggle button. Echoes
   the project's positive-tinted badge palette (lime tint bg / deep-lime text)
   with an inset 1px border to read as interactive — hover/focus deepens both
   the background and the border so it's clear the chip is clickable. */
.filings-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--ip-transition-fast),
                border-color var(--ip-transition-fast),
                color var(--ip-transition-fast);
}

.filings-chip-filed {
    background-color: var(--ip-positive-bg);
    color: var(--ip-positive-text);
    border-color: #cfe89a;
}

.filings-chip-filed:hover,
.filings-chip-filed:focus {
    background-color: var(--ip-accent-subtle-hover);
    border-color: #b6d97a;
    color: var(--ip-positive-text);
    outline: none;
}

.filings-chip-filed svg {
    flex-shrink: 0;
}

.elections-radio,
.elections-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    font-size: 0.875rem;
}

.elections-radio .form-check-input,
.elections-checkbox .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.elections-tooltip-trigger {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ip-neutral-400);
    display: inline-flex;
    align-items: center;
    transition: color var(--ip-transition-fast);
}

.elections-tooltip-trigger:hover,
.elections-tooltip-trigger:focus {
    color: var(--ip-neutral-600);
    outline: none;
}

.elections-tooltip {
    z-index: 1080;
    max-width: 360px;
    background: #fff;
    color: var(--ip-neutral-700);
    border: 1px solid var(--ip-neutral-200);
    border-radius: var(--ip-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 16px 18px;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-y: auto;
}

.elections-tooltip-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ip-neutral-900);
    margin-bottom: 10px;
}

.elections-tooltip-section + .elections-tooltip-section {
    margin-top: 12px;
}

.elections-tooltip-subhead {
    font-weight: 600;
    color: var(--ip-neutral-900);
    margin-bottom: 4px;
}

.elections-tooltip p {
    margin: 0 0 8px 0;
}

.elections-tooltip p:last-child {
    margin-bottom: 0;
}

.elections-tooltip ul {
    margin: 0;
    padding-left: 18px;
}

.elections-tooltip ul li + li {
    margin-top: 4px;
}

/* ===== Dashboard "Action Required" cards =====
   Surfaces the studies the firm must act on at the top of the dashboard. Reuses the
   warm-amber action-required palette of the in-study cards (#FFFFF0 / #E6D78A / #975A16
   / #D97706) so the dashboard, the study detail, and the nav badge all read as one
   system. Each card is a link to the study detail, where the matching action UI lives. */
.action-required-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* On the dashboard the "Action Required" flag sits inline with the count pill —
   drop the flag's own bottom margin so the two pills align. */
.action-required-header .action-required-flag {
    margin-bottom: 0;
}

.action-required-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #8A5212;
    margin: 0;
}

.action-required-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ip-action-text);
    background: var(--ip-action-bg);
    border-radius: 999px;
    /* Pulses gold, matching the sidebar count and the action-status badges */
    box-shadow: 0 0 0 0 rgba(246, 196, 83, 0.55);
    animation: status-badge-pulse 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .action-required-count {
        animation: none;
        box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.22);
    }
}

/* Broadcasting amber dot — same technique as .elections-tab-dot (animated box-shadow
   ring), tuned a touch larger for the dashboard headline. */
.action-required-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D97706;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
    animation: action-required-pulse 2.4s ease-out infinite;
}

@keyframes action-required-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(217, 119, 6, 0.5); }
    80%  { box-shadow: 0 0 0 12px rgba(217, 119, 6, 0);   }
    100% { box-shadow: 0 0 0 12px rgba(217, 119, 6, 0);   }
}

.action-required-sub {
    font-size: 0.875rem;
    color: var(--ip-neutral-500);
    margin: 0 0 16px;
}

.action-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.action-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: #FFFFF0;
    border-radius: var(--ip-radius-lg);
    text-decoration: none;
    transition: background-color var(--ip-transition-fast),
                box-shadow var(--ip-transition-fast),
                transform var(--ip-transition-fast);
}

.action-card:hover,
.action-card:focus-visible {
    background: #FFFDE7;
    box-shadow: 0 6px 20px rgba(180, 83, 9, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.action-card-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #975A16;
}

.action-card-client {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ip-neutral-900);
    line-height: 1.3;
}

.action-card-desc {
    font-size: 0.8125rem;
    color: var(--ip-neutral-600);
    line-height: 1.5;
}

.action-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #B45309;
    transition: gap var(--ip-transition-fast);
}

.action-card:hover .action-card-cta,
.action-card:focus-visible .action-card-cta {
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .action-required-pulse {
        animation: none;
        box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
    }

    .action-card:hover,
    .action-card:focus-visible {
        transform: none;
    }
}

/* ===== Sidebar nav badge (pending firm actions) =====
   Amber count pill on a nav item against the dark sidebar. Pulses to draw the eye,
   resting to a soft static halo when the item is active/hovered or for reduced-motion
   users. Mirrors the dashboard action-required accent so the two surfaces agree. */
.sidebar-nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: #3D2A06;
    background: #F6C453;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(246, 196, 83, 0.6);
    animation: sidebar-nav-badge-pulse 2.6s ease-out infinite;
}

@keyframes sidebar-nav-badge-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(246, 196, 83, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(246, 196, 83, 0);    }
    100% { box-shadow: 0 0 0 8px rgba(246, 196, 83, 0);    }
}

.sidebar-nav-link.active .sidebar-nav-badge,
.sidebar-nav-link:hover .sidebar-nav-badge {
    animation: none;
    box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-nav-badge {
        animation: none;
        box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.22);
    }
}

/* ===== Action-required status badge (Studies list) =====
   When a study has an open firm action (Election / Filing / Stalled), its status badge
   gains a pulsing dot so the list page carries the same attention signal as the dashboard
   cards and the study detail. The dot uses currentColor (the badge's own status color), so
   the ripple is amber for Election/Filing and red for Stalled without recoloring the badge —
   completing the dashboard → list → detail attention path. */
/* Action-required status badge — a solid GOLD pill matching the sidebar "Studies"
   count badge (#F6C453). The whole pill pulses (like the nav badge) rather than
   carrying a separate inner dot, so the nav badge, the dashboard count pill, and the
   status badges all read as one gold "attention" signal. */
.study-status-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 0 0 rgba(246, 196, 83, 0.55);
    animation: status-badge-pulse 2.6s ease-out infinite;
}

/* The inner dot is redundant now the whole pill pulses — hide it (markup keeps it). */
.study-status-action .study-status-action-dot {
    display: none;
}

/* Explicit rgba (not color-mix) so the ring actually interpolates — color-mix does
   not animate reliably inside a keyframed box-shadow. */
@keyframes status-badge-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(246, 196, 83, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(246, 196, 83, 0);    }
    100% { box-shadow: 0 0 0 8px rgba(246, 196, 83, 0);    }
}

@media (prefers-reduced-motion: reduce) {
    .study-status-action {
        animation: none;
        box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.22);
    }
}