/* ============================================================
 * ICII 2026 — Shared design system
 * Used by public pages (home, register, checkout, success, etc.)
 * and admin pages (light overlay on top of admin.css).
 * ============================================================ */

:root {
    /* Dark theme (default) */
    --icii-black: #1b1b1b;
    --icii-black-soft: #232323;
    --icii-black-elev: #2a2a2a;
    --icii-green: #28be3c;
    --icii-green-dark: #1ea031;
    --icii-line: #2e2e2e;
    --icii-line-soft: #3a3a3a;
    --icii-text: #f4f4f4;
    --icii-mute: #9a9a9a;
    --icii-card: #232323;
    --icii-input-text: #ffffff;
    --icii-radius: 14px;
    --icii-radius-sm: 10px;
    --icii-radius-pill: 999px;
}

/* ========================================================
 * LIGHT THEME (opt-in via body[data-theme="light"])
 * Re-binds the design tokens to a light surface palette and
 * overrides every component that hardcoded a dark colour.
 * ======================================================== */
body[data-theme="light"] {
    --icii-black: #ffffff;
    --icii-black-soft: #f7f7f7;
    --icii-black-elev: #f0f0f0;
    --icii-line: #e5e7eb;
    --icii-line-soft: #d1d5db;
    --icii-text: #0f172a;
    --icii-mute: #6b7280;
    --icii-card: #ffffff;
    --icii-input-text: #0f172a;
}

/* Page surfaces */
body[data-theme="light"]:has(.icii-fs) { background: #fafbfc; }
body[data-theme="light"] .icii-fs { background: #fafbfc; color: #0f172a; }

/* Top bar + footer translucent backdrops */
body[data-theme="light"] .icii-fs__bar    { background: rgba(255,255,255,0.94); border-bottom-color: #e5e7eb; }
body[data-theme="light"] .icii-fs__footer { background: rgba(255,255,255,0.94); border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-fs__brand { color: #0f172a; }
body[data-theme="light"] .icii-fs__exit  { color: #4b5563; border-color: #e5e7eb; }
body[data-theme="light"] .icii-fs__exit:hover { color: #0f172a; border-color: #d1d5db; background: #f3f4f6; }
body[data-theme="light"] .icii-theme-toggle { border-color: #e5e7eb; color: #4b5563; }
body[data-theme="light"] .icii-theme-toggle:hover { color: #0f172a; border-color: #d1d5db; }

/* Headings / display type */
body[data-theme="light"] .icii-display,
body[data-theme="light"] .icii-stage__title,
body[data-theme="light"] .icii-stage__sub,
body[data-theme="light"] .icii-step__title { color: #0f172a; }
body[data-theme="light"] .icii-tier__name,
body[data-theme="light"] .icii-tier__price,
body[data-theme="light"] .icii-bt__amount,
body[data-theme="light"] .icii-paymethod__body strong,
body[data-theme="light"] .icii-checkout__totals-grand span { color: #0f172a; }
/* Footer total stays green in light mode too — matches the rest of the brand accents and avoids the half-dark, half-green look. */
body[data-theme="light"] .icii-fs__total-amount { color: var(--icii-green-dark); }

/* Body / muted copy */
body[data-theme="light"] .icii-tier__sub,
body[data-theme="light"] .icii-stage__intro,
body[data-theme="light"] .icii-lede,
body[data-theme="light"] .icii-checkout__rows dt,
body[data-theme="light"] .icii-success__rows dt,
body[data-theme="light"] .icii-bt__rows dt,
body[data-theme="light"] .icii-checkout__totals > div,
body[data-theme="light"] .icii-tier__cta { color: #4b5563; }

/* Strong text inside cards */
body[data-theme="light"] .icii-toggle__label,
body[data-theme="light"] .icii-review__value,
body[data-theme="light"] .icii-success__rows dd,
body[data-theme="light"] .icii-checkout__rows dd,
body[data-theme="light"] .icii-bt__rows dd,
body[data-theme="light"] .icii-home-about__facts dd,
body[data-theme="light"] .icii-checkout__members li strong,
body[data-theme="light"] .icii-paymethod__body strong { color: #0f172a; }
body[data-theme="light"] .icii-checkout__totals > div span:last-child { color: #0f172a; }

/* Cards & containers */
body[data-theme="light"] .icii-card,
body[data-theme="light"] .icii-tier,
body[data-theme="light"] .icii-toggle,
body[data-theme="light"] .icii-chip,
body[data-theme="light"] .icii-review__group,
body[data-theme="light"] .icii-paymethod,
body[data-theme="light"] .icii-attendee,
body[data-theme="light"] .icii-fs .consent-check {
    background: #ffffff;
    border-color: #e5e7eb;
}
body[data-theme="light"] .icii-tier:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-color: #d1d5db; }
body[data-theme="light"] .icii-tier.is-selected { background: linear-gradient(180deg, rgba(40,190,60,0.05), #fff); }
body[data-theme="light"] .icii-conditional { background: #f9fafb; border-color: #d1d5db; }
body[data-theme="light"] .icii-invite { border-color: #d1d5db; }
body[data-theme="light"] .icii-invite label { color: #4b5563; }

/* Form inputs */
body[data-theme="light"] .icii-fs .form-input,
body[data-theme="light"] .icii-fs select.form-input,
body[data-theme="light"] .icii-fs textarea.form-input,
body[data-theme="light"] .icii-attendee input,
body[data-theme="light"] .icii-attendee select {
    background: #fff;
    color: #0f172a;
    border-color: #e5e7eb;
}
body[data-theme="light"] .icii-fs .form-input::placeholder,
body[data-theme="light"] .icii-attendee input::placeholder { color: #9ca3af; }
body[data-theme="light"] .icii-fs .form-label { color: #374151; }
body[data-theme="light"] .icii-fs__total-label,
body[data-theme="light"] .icii-eyebrow,
body[data-theme="light"] .icii-stage__eyebrow { color: var(--icii-green-dark); }

/* Toggles & checkboxes */
body[data-theme="light"] .icii-toggle__box { border-color: #d1d5db; }
body[data-theme="light"] .icii-toggle input:checked + .icii-toggle__box { background: var(--icii-green); border-color: var(--icii-green); }
body[data-theme="light"] .icii-toggle input:checked + .icii-toggle__box::after { border-color: #fff; }
body[data-theme="light"] .icii-toggle:hover { border-color: #d1d5db; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
body[data-theme="light"] .icii-toggle--prominent { background: linear-gradient(180deg, rgba(40,190,60,0.05), #fff); border-color: rgba(40,190,60,0.4); }

/* Chips */
body[data-theme="light"] .icii-chip { color: #4b5563; }
body[data-theme="light"] .icii-chip:hover { color: #0f172a; border-color: #d1d5db; }
body[data-theme="light"] .icii-chip.is-on { background: var(--icii-green); border-color: var(--icii-green); color: #ffffff; }

/* Tier cards */
body[data-theme="light"] .icii-tier__benefits li { color: #4b5563; border-bottom-color: rgba(0,0,0,0.05); }
body[data-theme="light"] .icii-tier__pill--comp { background: #f3f4f6; color: #374151; }
body[data-theme="light"] .icii-tier__currency,
body[data-theme="light"] .icii-tier__price small { color: #6b7280; }

/* Marquee on green stays green-on-black; just calm the alternating dots */
body[data-theme="light"] .icii-marquee__track span:nth-child(even) { opacity: 0.5; }

/* Stepper dots — line is now light gray */
body[data-theme="light"] .icii-fs__stepdot { background: #e5e7eb; }
body[data-theme="light"] .icii-fs__stepcount { color: #0f172a; }

/* Review */
body[data-theme="light"] .icii-review__group { box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
body[data-theme="light"] .icii-review__label { color: #6b7280; }
body[data-theme="light"] .icii-review__group--total .icii-review__row:last-child { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-review__group h4 { color: var(--icii-green-dark); }

/* Consent checks */
body[data-theme="light"] .icii-fs .consent-check__text { color: #374151; }

/* Success / cancel */
body[data-theme="light"] .icii-success__rows > div { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-success__hint { color: #6b7280; }

/* Checkout */
body[data-theme="light"] .icii-checkout__rows > div { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-checkout__h { color: #6b7280; }
body[data-theme="light"] .icii-checkout__members li { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-checkout__totals,
body[data-theme="light"] .icii-checkout__totals-grand { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-paymethod.is-on { background: rgba(40,190,60,0.06); }
body[data-theme="light"] .icii-paymethod__body small { color: #6b7280; }

/* Bank transfer */
body[data-theme="light"] .icii-bt__rows > div { border-top-color: #e5e7eb; }
body[data-theme="light"] .icii-bt__h { color: #6b7280; }
body[data-theme="light"] .icii-bt__instructions { color: #374151; }
body[data-theme="light"] .icii-bt__amount span { color: #6b7280; }

/* Home page facts table */
body[data-theme="light"] .icii-home-about,
body[data-theme="light"] .icii-home-about__facts > div,
body[data-theme="light"] .icii-home-about__facts > div:last-child,
body[data-theme="light"] .icii-home-cta,
body[data-theme="light"] .icii-home-foot { border-color: #e5e7eb; }
body[data-theme="light"] .icii-home-about__facts dt { color: #6b7280; }
body[data-theme="light"] .icii-home-foot { color: #6b7280; }
body[data-theme="light"] .icii-home-foot a { color: #6b7280; }
body[data-theme="light"] .icii-home-foot a:hover { color: #0f172a; }

/* Attendees row in group page */
body[data-theme="light"] .icii-attendee__num { background: rgba(40,190,60,0.12); color: var(--icii-green-dark); }
body[data-theme="light"] .icii-attendee__remove { border-color: #e5e7eb; color: #6b7280; }
body[data-theme="light"] .icii-attendee__remove:hover { color: #b91c1c; border-color: #b91c1c; }

/* Secondary action button */
body[data-theme="light"] .icii-fs__secondary { color: var(--icii-green-dark); border-color: var(--icii-green); background: rgba(40,190,60,0.06); }
body[data-theme="light"] .icii-fs__secondary:hover { background: var(--icii-green); color: #ffffff; }

/* Ghost button (e.g. "Compare passes", "Back", "Apply coupon") — needs explicit dark text in light mode */
body[data-theme="light"] .icii-btn--ghost,
body[data-theme="light"] .btn--ghost,
body[data-theme="light"] .btn.btn-secondary,
body[data-theme="light"] .btn.btn--secondary {
    color: #0f172a;
    border-color: #d1d5db;
    background: #ffffff;
}
body[data-theme="light"] .icii-btn--ghost:hover,
body[data-theme="light"] .btn--ghost:hover,
body[data-theme="light"] .btn.btn-secondary:hover,
body[data-theme="light"] .btn.btn--secondary:hover {
    color: #0f172a;
    border-color: var(--icii-green);
    background: #f9fafb;
}

/* Dark/light logo swap: dark logo shows by default (dark theme); light logo only appears when the user opts into light mode.
   `.icii-fs__brand-img` declares `display:block` later in the file with equal specificity, so we use !important to win the cascade.
   `.footer-logo` carries a legacy `filter: brightness(0) invert(1)` from main.css that forces the image to pure white — kill it here so the colored logo can actually appear in light mode. */
.site-logo__img--light,
.icii-fs__brand-img--light,
.footer-logo--light { display: none !important; }
body[data-theme="light"] .site-logo__img--dark,
body[data-theme="light"] .icii-fs__brand-img--dark,
body[data-theme="light"] .footer-logo--dark { display: none !important; }
body[data-theme="light"] .site-logo__img--light,
body[data-theme="light"] .icii-fs__brand-img--light { display: inline-block !important; }
body[data-theme="light"] .footer-logo--light { display: inline-block !important; }
/* main.css declares `filter: brightness(0) invert(1)` on .footer-logo — that was an old hack to force the colored logo to white. We now ship a real white logo (logo-white.png) for dark mode, so the invert filter must be turned off on BOTH variants. */
.footer-logo--dark,
.footer-logo--light { filter: none !important; }

/* Help widget, header, and footer chrome in light mode */
body[data-theme="light"] .site-header { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
body[data-theme="light"] .site-header .header-nav a { color: #0f172a; }
body[data-theme="light"] .site-header .header-nav a:hover { color: var(--icii-green-dark); }
body[data-theme="light"] .site-footer { background: #f9fafb; color: #4b5563; border-top: 1px solid #e5e7eb; }
body[data-theme="light"] .site-footer a { color: #4b5563; }
body[data-theme="light"] .site-footer a:hover { color: #0f172a; }

/* Coupon result */
body[data-theme="light"] .icii-coupon-result { color: #6b7280; }

/* Error banner stays dark red on light page (legible enough) */

/* Sticky footer nav layout — keep right-side breathing room for the help widget */
.icii-fs__footer {
    /* Reserve ~110px on the right for the floating help widget */
    padding-right: 130px !important;
    /* Three-column grid: total | centered buttons | spacer to balance */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    gap: 16px;
}
.icii-fs__footer .icii-fs__total { justify-self: start; }
.icii-fs__footer > div:last-child {
    justify-self: center;
    display: flex;
    gap: 10px;
    align-items: center;
}
@media (max-width: 720px) {
    .icii-fs__footer { padding-right: 20px !important; grid-template-columns: 1fr !important; gap: 8px; }
    .icii-fs__footer .icii-fs__total { justify-self: center; }
    .icii-fs__footer > div:last-child { justify-self: center; }
    .icii-help-widget { bottom: auto !important; top: 8px !important; right: 8px !important; }
    .icii-help-widget__toggle-label { display: none; }
}

/* Theme toggle button */
.icii-theme-toggle {
    background: transparent;
    border: 1px solid var(--icii-line);
    color: var(--icii-mute);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: .15s;
    margin-right: 10px;
}
.icii-theme-toggle:hover { color: var(--icii-text); border-color: var(--icii-line-soft); }
.icii-theme-toggle svg { width: 18px; height: 18px; }
.icii-theme-toggle .icii-icon-moon { display: inline; }
.icii-theme-toggle .icii-icon-sun { display: none; }
body[data-theme="light"] .icii-theme-toggle .icii-icon-moon { display: none; }
body[data-theme="light"] .icii-theme-toggle .icii-icon-sun { display: inline; }

/* Top-bar layout helper for the new logo + actions cluster */
.icii-fs__bar-actions { display: inline-flex; align-items: center; gap: 8px; }
.icii-fs__brand-img { height: 52px; width: auto; display: block; }
@media (max-width: 720px) {
    .icii-fs__brand-img { height: 44px; }
}

/* ----------------------------------------------------------
   Public-facing dark theme (full-screen pages)
   Activated when a page has the .icii-fs class on its root.
   ---------------------------------------------------------- */

/* Hide the legacy site chrome on full-screen pages, but keep the help widget visible. */
body:has(.icii-fs) .site-header,
body:has(.icii-fs) .site-footer { display: none !important; }
body:has(.icii-fs) main { padding: 0 !important; }
body:has(.icii-fs) { background: var(--icii-black); }

.icii-fs {
    background: var(--icii-black);
    color: var(--icii-text);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.icii-fs * { box-sizing: border-box; }

/* Top bar */
.icii-fs__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 36px;
    border-bottom: 1px solid var(--icii-line);
    position: sticky; top: 0;
    background: rgba(27,27,27,0.92); backdrop-filter: blur(10px);
    z-index: 50;
}
.icii-fs__brand {
    display: inline-flex; align-items: center; gap: 12px;
    color: #fff; text-decoration: none;
    font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.icii-fs__brand-logo {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--icii-green); color: var(--icii-black);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900;
}
.icii-fs__exit {
    color: var(--icii-mute); text-decoration: none;
    font-size: 13px; padding: 8px 14px;
    border: 1px solid var(--icii-line); border-radius: var(--icii-radius-pill);
    transition: .15s;
}
.icii-fs__exit:hover { color: #fff; border-color: var(--icii-mute); }

/* Secondary action in the top bar (e.g. "Group registration") */
.icii-fs__secondary {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--icii-green); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--icii-green);
    border-radius: var(--icii-radius-pill);
    background: rgba(40,190,60,0.08);
    transition: .15s;
}
.icii-fs__secondary:hover {
    background: var(--icii-green);
    color: var(--icii-black);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(40,190,60,0.25);
}
.icii-fs__secondary svg { flex-shrink: 0; }

/* Buttons */
.icii-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    border-radius: var(--icii-radius-pill);
    font-weight: 700; font-size: 14px;
    cursor: pointer; border: 0;
    transition: .15s;
    font-family: inherit;
    text-decoration: none;
}
/* `.icii-btn` sets display:inline-flex, which overrides the [hidden] attribute.
   Restore `hidden` precedence so submitBtn / nextBtn / backBtn actually hide. */
.icii-btn[hidden] { display: none !important; }
.icii-btn--primary { background: var(--icii-green); color: var(--icii-black); }
.icii-btn--primary:hover { background: #22a834; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(40,190,60,0.3); }
.icii-btn--ghost { background: transparent; color: #fff; border: 1.5px solid var(--icii-line); }
.icii-btn--ghost:hover { border-color: var(--icii-mute); }
.icii-btn--lg { padding: 18px 36px; font-size: 16px; }
.icii-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Form atoms (dark) — labels intentionally larger than original */
.icii-fs .form-group { margin-bottom: 22px; flex: 1; min-width: 0; }
.icii-fs .form-group--half    { flex-basis: calc(50% - 8px);  min-width: 240px; }
.icii-fs .form-group--quarter { flex-basis: calc(25% - 12px); min-width: 110px; }
.icii-fs .form-group--full    { flex-basis: 100%; }
.icii-fs .form-fields-row     { display: flex; flex-wrap: wrap; gap: 16px; }

.icii-fs .form-label {
    display: block;
    font-size: 14px;        /* up from 11px */
    font-weight: 600;
    letter-spacing: .01em;  /* down from .2em */
    text-transform: none;   /* down from uppercase */
    color: #d4d4d4;
    margin-bottom: 10px;
}

.icii-fs .form-input,
.icii-fs select.form-input,
.icii-fs textarea.form-input {
    width: 100%; padding: 14px 16px;
    background: var(--icii-card);
    border: 1.5px solid var(--icii-line);
    border-radius: var(--icii-radius-sm);
    color: #fff; font-size: 15px;
    font-family: inherit;
    transition: .15s;
}
.icii-fs .form-input:focus { outline: none; border-color: var(--icii-green); box-shadow: 0 0 0 3px rgba(40,190,60,0.18); background: var(--icii-black-soft); }
.icii-fs .form-input::placeholder { color: #555; }
.icii-fs .required { color: var(--icii-green); }

/* Card */
.icii-card {
    background: var(--icii-card);
    border: 1.5px solid var(--icii-line);
    border-radius: var(--icii-radius);
    padding: 28px;
}

/* Pills */
.icii-pill {
    display: inline-block; padding: 4px 11px;
    border-radius: var(--icii-radius-pill);
    font-size: 11px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
}
.icii-pill--green { background: rgba(40,190,60,0.15); color: var(--icii-green); }
.icii-pill--mute  { background: rgba(255,255,255,0.08); color: #fff; }

/* Section eyebrow & big title */
.icii-eyebrow {
    color: var(--icii-green);
    font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
    font-weight: 700; margin-bottom: 18px;
}
.icii-display {
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02; font-weight: 800;
    letter-spacing: -0.02em; margin: 0 0 18px;
    color: #fff;
}
.icii-display em { font-style: normal; color: var(--icii-green); }
.icii-lede {
    color: var(--icii-mute);
    font-size: 16px; line-height: 1.55;
    max-width: 640px; margin: 0 0 36px;
}

/* Tier card (used on home & register step 1) */
.icii-tier {
    position: relative;
    background: var(--icii-card);
    border: 1.5px solid var(--icii-line);
    border-radius: 16px;
    padding: 28px;
    cursor: pointer;
    transition: .2s;
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.icii-tier:hover { border-color: var(--icii-mute); transform: translateY(-2px); }
.icii-tier.is-selected { border-color: var(--icii-green); box-shadow: 0 0 0 1px var(--icii-green), 0 16px 48px rgba(40,190,60,0.18); background: linear-gradient(180deg, rgba(40,190,60,0.08), transparent); }
.icii-tier input { position: absolute; opacity: 0; pointer-events: none; }
.icii-tier__pill { align-self: flex-start; margin-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--icii-radius-pill); background: rgba(40,190,60,0.15); color: var(--icii-green); display: inline-block; }
.icii-tier__pill--comp { background: rgba(255,255,255,0.08); color: #fff; }
.icii-tier__name { font-size: 28px; font-weight: 800; margin: 0 0 14px; color: #fff; line-height: 1.1; letter-spacing: -.01em; }
.icii-tier__price { font-size: 38px; font-weight: 900; color: #fff; margin: 4px 0 4px; line-height: 1; }
.icii-tier__price small { font-size: 13px; color: var(--icii-mute); font-weight: 500; margin-left: 6px; }
.icii-tier__price--free { color: var(--icii-green); }
.icii-tier__sub { color: var(--icii-mute); font-size: 13px; margin-bottom: 22px; min-height: 18px; }
.icii-tier__benefits { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.icii-tier__benefits li { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.45; color: #d4d4d4; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.icii-tier__benefits li:last-child { border-bottom: 0; }
.icii-tier__benefits svg { flex: 0 0 auto; margin-top: 3px; color: var(--icii-green); }
.icii-tier__cta { color: var(--icii-mute); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; margin-top: auto; }
.icii-tier.is-selected .icii-tier__cta,
.icii-tier:hover .icii-tier__cta { color: var(--icii-green); }

/* ----------------------------------------------------------
   Admin re-skin
   Adds the dark/green accent on top of the existing admin.css
   without replacing the entire admin layout (keeps sidebar,
   tables, modals working but feels consistent with the public).
   ---------------------------------------------------------- */

.admin-shell { background: #f4f5f7; }
.admin-sidebar { background: var(--icii-black) !important; color: #d4d4d4; }
.admin-sidebar a, .admin-sidebar .nav-group__toggle { color: #d4d4d4; }
.admin-sidebar a.active,
.admin-sidebar a:hover,
.admin-sidebar .nav-group__toggle:hover { background: rgba(40,190,60,0.12); color: var(--icii-green); }
.admin-sidebar .nav-group__items a.active { color: var(--icii-green); border-left-color: var(--icii-green); }
.admin-sidebar__logout-btn:hover { background: rgba(40,190,60,0.18); color: #fff; }

.admin-header h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

.btn--primary {
    background: var(--icii-green) !important;
    color: var(--icii-black) !important;
    border-color: var(--icii-green) !important;
    border-radius: var(--icii-radius-pill);
    font-weight: 700;
}
.btn--primary:hover { background: var(--icii-green-dark) !important; }
.btn--success { background: var(--icii-green); color: var(--icii-black); border-color: var(--icii-green); border-radius: var(--icii-radius-pill); }

.admin-table thead th { background: #fafafa; color: #1b1b1b; font-weight: 700; }
.admin-table tbody tr:hover td { background: rgba(40,190,60,0.04); }

.admin-card,
.admin-filter-bar,
.admin-table-wrap {
    border-radius: var(--icii-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
}

.stat-card {
    border-radius: var(--icii-radius);
    border-left: 3px solid var(--icii-green);
}
.stat-card__value { color: var(--icii-black); font-weight: 800; }
.stat-card__label { color: #6b7280; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }

/* Status pills — reuse on admin tables */
.status-pill {
    display: inline-block; padding: 4px 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    border-radius: var(--icii-radius-pill);
    background: #f3f4f6; color: #374151;
}
.status-pill--approved, .status-pill--verified, .status-pill--letter_issued, .status-pill--resolved { background: rgba(40,190,60,0.14); color: var(--icii-green-dark); }
.status-pill--pending,  .status-pill--requested, .status-pill--in_progress, .status-pill--awaiting_proof { background: #fef3c7; color: #92400e; }
.status-pill--rejected, .status-pill--cancelled, .status-pill--failed { background: #fee2e2; color: #991b1b; }
.status-pill--new, .status-pill--submitted { background: #dbeafe; color: #1e40af; }
.status-pill--not_required { background: #f3f4f6; color: #6b7280; }

/* Better admin form labels */
.admin-content .form-label { font-size: 13px; font-weight: 600; color: #1f2937; letter-spacing: .01em; text-transform: none; }

/* ─── intl-tel-input dropdown (country picker on phone fields) ───
   The library ships its own default colors that don't survive our theme tokens,
   so the country names ended up invisible (white on white or black on black).
   Pin readable colors for both themes. */
.iti__country-list {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1100;
}
.iti__country { padding: 8px 12px; color: #0f172a; }
.iti__country-name { color: #0f172a; }
.iti__dial-code  { color: #6b7280; }
.iti__country.iti__highlight,
.iti__country:hover { background: #eef7f0 !important; }
.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__country-name { color: var(--icii-green-dark); }
.iti__search-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 10px 12px;
}
.iti__search-input::placeholder { color: #9ca3af; }
.iti__divider { border-bottom-color: #e5e7eb !important; }
/* Selected-country flag bar always sits inside a dark or light input — pin its
   own text/icon colors so it stays legible against either form-input bg. */
.iti__selected-flag { outline: none; }
.iti__selected-dial-code { color: inherit; }
.iti--inline-dropdown .iti__country-list,
.iti__country-list { color: #0f172a; }
body[data-theme="light"] .iti__country-list { background: #ffffff !important; border-color: #e5e7eb !important; }
/* Even in dark mode we keep the dropdown panel light: light bg + dark text is
   the readable, expected pattern for searchable lists and matches what most
   users see in browsers' own native pickers. */