/* ============================================================================
 * Zanzibar Digital Free Zone — Portal Theme
 * Mirrors the landing site (www_znzfreezone) with a light/dark toggle.
 *
 * Dark theme  : midnight base + frosted glass surfaces + brand accents
 *               (matches the www_znzfreezone landing site).
 * Light theme : clean "jurisdictional" feel — white surfaces, sober borders,
 *               brand accents applied sparingly.
 * ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap");

/* ---------- Brand tokens (shared) ---------- */
:root {
    --zdfz-midnight: #040a14;
    --zdfz-midnight-2: #02060f;
    --zdfz-midnight-3: #050a12;
    --zdfz-ocean: #04a7e8;
    --zdfz-ocean-deep: #0679a5;
    --zdfz-lagoon: #0f9c54;
    --zdfz-sun: #f6c343;
    --zdfz-gradient: linear-gradient(135deg, #0f9c54 0%, #04a7e8 50%, #f6c343 100%);
    --zdfz-gradient-soft: linear-gradient(135deg, rgba(15, 156, 84, 0.12), rgba(4, 167, 232, 0.12));

    /* Brand-color SSOT — source of truth is branding.toml [branding.visual]
     * primary_color / secondary_color. Values below are the ZDFZ default.
     * Other instances override these by shipping a brand.css after main.css
     * (generated from their branding.toml at build time). Auth gradient
     * headers, badges, .gradient-accent / .docs-header etc. all consume
     * --brand-gradient so changing brand colors is a one-token edit. */
    --brand-color-primary: #0099FF;
    --brand-color-secondary: #00CC66;
    --brand-gradient: linear-gradient(135deg, var(--brand-color-primary) 0%, var(--brand-color-secondary) 100%);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Light theme (default) ----------
 * Clean, lawful, jurisdictional feel. White-first surfaces with
 * sober ink for text and subtle brand accents on actionable elements.
 */
:root,
:root[data-bs-theme="light"],
[data-bs-theme="light"] {
    --surface-0: #fafbfc;
    --surface-1: #ffffff;
    --surface-2: #f4f6f8;
    --surface-3: #eef1f4;
    --surface-muted: #f8fafc;

    --ink-1: #040a14;
    --ink-2: #2e3a4a;
    --ink-3: #52606d;
    --ink-4: #8a97a5;
    --ink-inverse: #ffffff;

    --border-1: rgba(4, 10, 20, 0.08);
    --border-2: rgba(4, 10, 20, 0.14);
    --border-strong: rgba(4, 10, 20, 0.22);

    --accent: var(--zdfz-ocean-deep);
    --accent-hover: #055a7e;
    --accent-soft: rgba(6, 121, 165, 0.08);
    --accent-ring: rgba(6, 121, 165, 0.28);
    --success: #0f9c54;
    --success-soft: rgba(15, 156, 84, 0.1);
    --warning: #b78512;
    --warning-soft: rgba(246, 195, 67, 0.18);
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, 0.08);
    --info: #04a7e8;
    --info-soft: rgba(4, 167, 232, 0.1);

    --shadow-sm: 0 1px 2px rgba(4, 10, 20, 0.04);
    --shadow-md: 0 1px 2px rgba(4, 10, 20, 0.04), 0 4px 12px rgba(4, 10, 20, 0.05);
    --shadow-lg: 0 1px 2px rgba(4, 10, 20, 0.04), 0 12px 32px rgba(4, 10, 20, 0.08);

    --page-bg: radial-gradient(circle at 0% 0%, rgba(4, 167, 232, 0.05), transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(15, 156, 84, 0.05), transparent 40%),
        var(--surface-0);

    --sidebar-bg: #ffffff;
    --sidebar-border: var(--border-1);
    --header-bg: rgba(255, 255, 255, 0.8);
    --header-border: var(--border-1);
}

/* ---------- Dark theme ---------- */
:root[data-bs-theme="dark"] {
    --surface-0: var(--zdfz-midnight);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-3: rgba(255, 255, 255, 0.09);
    --surface-muted: rgba(255, 255, 255, 0.02);

    --ink-1: #f3f5f7;
    --ink-2: rgba(255, 255, 255, 0.82);
    --ink-3: rgba(255, 255, 255, 0.62);
    --ink-4: rgba(255, 255, 255, 0.42);
    --ink-inverse: var(--zdfz-midnight);

    --border-1: rgba(255, 255, 255, 0.1);
    --border-2: rgba(255, 255, 255, 0.18);
    --border-strong: rgba(255, 255, 255, 0.3);

    --accent: var(--zdfz-ocean);
    --accent-hover: #3ab9ee;
    --accent-soft: rgba(4, 167, 232, 0.18);
    --accent-ring: rgba(4, 167, 232, 0.35);
    --success: #2fcc7c;
    --success-soft: rgba(15, 156, 84, 0.22);
    --warning: var(--zdfz-sun);
    --warning-soft: rgba(246, 195, 67, 0.18);
    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.14);
    --info: var(--zdfz-ocean);
    --info-soft: rgba(4, 167, 232, 0.18);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    --page-bg:
        radial-gradient(circle at top, rgba(6, 121, 165, 0.25), transparent 45%),
        radial-gradient(circle at 20% 20%, rgba(15, 156, 84, 0.2), transparent 35%),
        linear-gradient(135deg, var(--zdfz-midnight), var(--zdfz-midnight-2) 60%, var(--zdfz-midnight-3));

    --sidebar-bg: rgba(4, 10, 20, 0.65);
    --sidebar-border: var(--border-1);
    --header-bg: rgba(4, 10, 20, 0.55);
    --header-border: var(--border-1);
}

/* ---------- Native widget + Bootstrap-component dark-mode coverage ----------
 *
 * `color-scheme` tells the browser which side of the system palette to draw
 * native widgets from — scrollbars, native form controls, the `<select>`
 * dropdown popup. Without it, light-mode-defaults bleed through in dark
 * mode (the Business Activity dropdown bug, see #362).
 *
 * Bootstrap 5.3 components (.card, .modal-content, .dropdown-menu,
 * .list-group-item, .table) consume `--bs-*-bg` / `--bs-*-color` variables
 * which Bootstrap's own dark-mode rules don't always populate the way our
 * brand tokens want. Override them here under `[data-bs-theme="dark"]` so
 * every Bootstrap component picks up an opaque dark surface that's legible.
 *
 * Single source of truth — every component theme follows from these
 * declarations, no per-page overrides needed.
 */
:root {
    color-scheme: light;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Bootstrap component surfaces */
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--ink-1);
    --bs-card-bg: #161d2c;
    --bs-card-color: var(--ink-1);
    --bs-card-border-color: var(--border-1);
    --bs-modal-bg: #161d2c;
    --bs-modal-color: var(--ink-1);
    --bs-modal-border-color: var(--border-1);
    --bs-modal-header-border-color: var(--border-1);
    --bs-modal-footer-border-color: var(--border-1);
    --bs-dropdown-bg: #1a2235;
    --bs-dropdown-color: var(--ink-1);
    --bs-dropdown-border-color: var(--border-1);
    --bs-dropdown-link-color: var(--ink-1);
    --bs-dropdown-link-hover-color: var(--ink-1);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-divider-bg: var(--border-1);
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--ink-1);
    --bs-list-group-border-color: var(--border-1);
    --bs-list-group-action-color: var(--ink-1);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-action-hover-color: var(--ink-1);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-1);
    --bs-table-border-color: var(--border-1);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--ink-1);
    --bs-table-hover-bg: var(--surface-3);
    --bs-table-hover-color: var(--ink-1);
    --bs-border-color: var(--border-1);
    --bs-border-color-translucent: var(--border-1);
    --bs-tertiary-bg: var(--surface-2);
}

/* Defense-in-depth for browsers that don't fully honor color-scheme on
 * <option>: explicit dark-mode option styling. WebKit/Gecko on Linux are
 * the typical offenders — they draw the popup using GTK theme regardless
 * of the page's color-scheme. This rule sits on top, taking precedence. */
[data-bs-theme="dark"] option {
    background-color: #161d2c;
    color: var(--ink-1);
}

/* ---------- Global resets & typography ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--ink-1);
    background: var(--page-bg);
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding-top: 0;
    letter-spacing: 0.005em;
}

::selection {
    background-color: rgba(6, 121, 165, 0.35);
    color: #fff;
}

/* Typography rules below set weight/spacing only — color flows from context.
 * `body` sets `color: var(--ink-1)` (above), so headings inherit ink by
 * default. `.bg-primary` / `.bg-dark` / `.text-white` (below) flip the
 * context for their subtree, and headings + paragraphs + small inherit
 * cleanly without element-selector rules fighting `.text-white`. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Slightly-muted paragraph + small ink for default surfaces. `:where()`
 * gives zero specificity so any utility class (.text-white, .bg-primary
 * via its own color rule, .text-muted, etc.) wins automatically. */
:where(p) {
    color: var(--ink-2);
}

:where(small, .small) {
    color: var(--ink-3);
}

/* Inverse-color contexts (saturated brand surfaces, .text-white containers)
 * override the muted-text defaults — children inherit the parent's white
 * text instead of picking up --ink-3 / --ink-2 which are theme-specific
 * dark/translucent values that read as faded or off-color on teal.
 * Sibling of the :where() rules above to keep the typography model in
 * one place. */
.bg-primary p, .bg-primary small, .bg-primary .small,
.bg-success p, .bg-success small, .bg-success .small,
.bg-warning p, .bg-warning small, .bg-warning .small,
.bg-danger p, .bg-danger small, .bg-danger .small,
.bg-info p, .bg-info small, .bg-info .small,
.bg-dark p, .bg-dark small, .bg-dark .small,
.text-white p, .text-white small, .text-white .small,
/* Custom gradient header containers below behave like inverse-color
 * surfaces (saturated brand gradient, white text). Children should
 * inherit white instead of picking up --ink-2/--ink-3. */
.docs-header p, .docs-header small, .docs-header .small,
.auth-header p, .auth-header small, .auth-header .small,
.pricing-header p, .pricing-header small, .pricing-header .small {
    color: inherit;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
}

hr {
    border: 0;
    border-top: 1px solid var(--border-1);
    opacity: 1;
}

/* ---------- Utility: brand-gradient underline ---------- */
.zdfz-gradient-bar {
    height: 3px;
    border-radius: 3px;
    background: var(--zdfz-gradient);
}

.zdfz-gradient-text {
    background: var(--zdfz-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Bootstrap text overrides ---------- */
.text-primary {
    color: var(--accent) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-muted {
    color: var(--ink-3) !important;
}

.text-secondary {
    color: var(--ink-2) !important;
}

.text-dark {
    color: var(--ink-1) !important;
}

.text-white {
    color: #ffffff !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Saturated brand backgrounds always pair with white text — same as
 * .bg-success / .bg-warning / .bg-danger / .bg-info below. The previous
 * rule used `color: var(--ink-inverse)` which is white in light mode but
 * dark in dark mode (--ink-inverse → --zdfz-midnight); that rendered
 * dark headings + dark subtitles on teal in dark mode (#357 second pass). */
.bg-primary {
    background-color: var(--accent) !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: var(--success) !important;
    color: #ffffff !important;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: #ffffff !important;
}

.bg-danger {
    background-color: var(--danger) !important;
    color: #ffffff !important;
}

.bg-info {
    background-color: var(--info) !important;
    color: #ffffff !important;
}

.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--ink-1) !important;
}

.bg-white {
    background-color: var(--surface-1) !important;
    color: var(--ink-1) !important;
}

.bg-dark {
    background-color: var(--zdfz-midnight) !important;
    color: #fff !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-1) !important;
}

.border-primary {
    border-color: var(--accent) !important;
}

.border-success {
    border-color: var(--success) !important;
}

.border-4 {
    border-width: 4px !important;
}

/* ---------- Cards ---------- */
.card {
    background-color: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    color: var(--ink-1);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease, transform 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

:root[data-bs-theme="dark"] .card {
    background-color: var(--surface-1);
    border-color: var(--border-1);
    color: var(--ink-1);
}

.card.card-glass {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
}

.card-body {
    color: var(--ink-1);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-1);
    color: var(--ink-1);
    padding: 1rem 1.25rem;
}

.card-title,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--ink-1);
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.25rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-sm {
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
}

.btn-lg {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.55;
    color: #ffffff;
}

.btn-success {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
    background: #0c824a;
    border-color: #0c824a;
    color: #ffffff;
}

:root[data-bs-theme="dark"] .btn-success:hover {
    background: #2fcc7c;
    border-color: #2fcc7c;
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

.btn-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #ffffff;
}

.btn-info {
    background: var(--info);
    border-color: var(--info);
    color: #ffffff;
}

.btn-light {
    background: var(--surface-1);
    border-color: var(--border-1);
    color: var(--ink-1);
}

.btn-light:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--ink-1);
}

/* "Acting on behalf" surface — used by the context switcher when the
 * session is operating on behalf of an External Company DR. Solid
 * .btn-warning (saturated yellow + white text) fails WCAG contrast in
 * both themes; this follows the same subtle-tint pattern as
 * .alert-warning so it stays unmissable but readable. Body text uses
 * the theme's primary ink so light/dark mode both pass AA. */
.btn-acting {
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    color: var(--ink-1);
}

.btn-acting:hover,
.btn-acting:focus {
    background: rgba(246, 195, 67, 0.28);
    border-color: var(--warning);
    color: var(--ink-1);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--ink-2);
}

.btn-outline-secondary:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--ink-1);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-outline-danger:hover {
    background: var(--danger);
    color: #ffffff;
}

.btn-link {
    color: var(--accent);
    text-decoration: none;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.btn-link:hover {
    color: var(--accent-hover);
    background: var(--accent-soft);
    text-decoration: none;
}

/* Gradient pill button — used for hero CTAs */
.btn-gradient {
    background: var(--zdfz-gradient);
    color: #ffffff;
    border: none;
    position: relative;
}

.btn-gradient:hover {
    filter: brightness(1.08);
    color: #ffffff;
    transform: translateY(-1px);
}

/* ---------- Forms ---------- */
.form-label {
    color: var(--ink-2);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.form-control,
.form-select {
    background-color: var(--surface-1);
    color: var(--ink-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.9rem;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    /* Bootstrap renders the dropdown chevron in the right padding zone.
       Combined with `width: auto` / `.w-auto`, the box collapses to the
       value text and the chevron overlaps the digits. Keep a floor that
       leaves room for the chevron on every form-select, regardless of
       size variant. */
    min-width: 4.5rem;
}

.form-control::placeholder {
    color: var(--ink-4);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    color: var(--ink-1);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
}

.form-control:disabled {
    background-color: var(--surface-2);
    color: var(--ink-3);
}

.form-text {
    color: var(--ink-3);
    font-size: 0.8rem;
}

.form-check-input {
    border-color: var(--border-2);
    background-color: var(--surface-1);
    cursor: pointer;
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-color: var(--accent);
}

.form-check-label {
    color: var(--ink-2);
}

/* ---------- Auth pages (login, register, forgot/reset password) ----------
 *
 * Single source of truth. The four auth pages used to each carry an inline
 * <style> block with hardcoded #f8f9fa / white / #6c757d colors — that
 * worked in light mode and made every label invisible in dark mode (white
 * card with white-tinted ink). Rules below are theme-aware via the brand
 * tokens, with a dark-mode override for .auth-card because dark-mode
 * --surface-1 is intentionally translucent (designed for the dashboard's
 * layered glass aesthetic) and a translucent standalone card on a dark
 * page-bg would be invisible.
 */
.auth-container {
    min-height: 100vh;
    background: transparent;
}

.auth-card {
    max-width: 520px;
    width: 100%;
    background: var(--surface-1);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-1);
}

[data-bs-theme="dark"] .auth-card {
    background: #161d2c;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .auth-card .form-control,
[data-bs-theme="dark"] .auth-card .input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--ink-1);
}

.auth-header {
    background: var(--brand-gradient);
    border-radius: 16px 16px 0 0;
    padding: 2rem;
    text-align: center;
}

.auth-logo {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.auth-body {
    padding: 2rem;
}

.auth-card .form-floating > .form-control {
    border-radius: 8px;
    border: 1px solid var(--border-1);
    padding: 1rem 0.75rem;
}

.auth-card .form-floating > .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-auth {
    background: var(--brand-gradient);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    width: 100%;
    color: #fff;
    transition: all 0.2s ease;
}

.btn-auth:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 153, 255, 0.3);
    color: #fff;
}

.btn-auth:disabled {
    opacity: 0.7;
    transform: none;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-1);
}

.auth-divider span {
    padding: 0 1rem;
    color: var(--ink-3);
    font-size: 0.875rem;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0.25rem;
    z-index: 5;
}

.password-toggle:hover {
    color: var(--accent);
}

/* ---------- Docs pages (canonical SSOT) ----------
 *
 * Used across every docs/* route: index landing card grid + sub-page
 * content layout (right-rail nav). Each docs sub-page may still carry
 * its own page-specific inline styles for one-off cards (e.g. .faq-card,
 * .accounting-header, .module-card) but the eight classes here are
 * always the same shape, so they live in main.css with brand tokens
 * to keep dark mode working without per-page overrides.
 */

/* Hero gradient banner at the top of the docs index. Saturated brand
 * colors — same gradient as .auth-header / .btn-auth. */
.docs-header {
    background: var(--brand-gradient);
    border-radius: 16px;
    padding: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
}

/* Card-link grid item on the docs index. Uses surface tokens so the
 * card surface flips in dark mode. */
.docs-card {
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--surface-1);
}

.docs-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* Icon tile inside .docs-card — caller sets the per-card color via
 * inline `style="background: <gradient>"`. */
.docs-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

/* Quick-action row on docs index, also reused inside docs sub-pages. */
.quick-link {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--surface-2);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.quick-link:hover {
    background: var(--surface-3);
}

/* Docs sub-page content column — narrower than container-fluid for
 * readable line length on long-form prose. */
.docs-content {
    max-width: 900px;
}

/* Breadcrumb above the page title in docs sub-pages. Bootstrap default
 * breadcrumb has a colored bg; the docs version is flush with the page. */
.docs-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

/* Right-rail nav inside docs sub-pages — sticky list of section links. */
.nav-section {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 1.5rem;
    position: sticky;
    top: 1rem;
}

.nav-link-docs {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    color: var(--ink-2);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.nav-link-docs:hover {
    background: var(--surface-2);
    color: var(--accent);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.3em 0.65em;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

.bg-primary.bg-opacity-10 {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

.bg-success.bg-opacity-10 {
    background-color: var(--success-soft) !important;
    color: var(--success) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.bg-info.bg-opacity-10 {
    background-color: var(--info-soft) !important;
    color: var(--info) !important;
}

.bg-secondary.bg-opacity-10 {
    background-color: var(--surface-2) !important;
    color: var(--ink-3) !important;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-1);
    padding: 0.9rem 1rem;
}

.alert-success {
    background-color: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.alert-warning {
    background-color: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-danger {
    background-color: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-info {
    background-color: var(--info-soft);
    border-color: var(--info);
    color: var(--info);
}

.alert-light {
    background-color: var(--surface-2);
    border-color: var(--border-1);
    color: var(--ink-2);
}

/* ---------- Nav & tabs ---------- */
.nav-link {
    color: var(--ink-2);
}

.nav-link:hover {
    color: var(--ink-1);
}

.nav-link.active {
    color: var(--ink-1);
}

.dropdown-menu {
    background-color: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--ink-1);
    padding: 0.5rem;
}

/* Dark-mode --surface-1 is translucent (rgba 0.04) for the layered glass
 * aesthetic, but a translucent dropdown over the sidebar lets sidebar
 * items bleed through and read as overlapping text. Use the same opaque
 * slate as auth-card / Bootstrap --bs-dropdown-bg override. */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1a2235;
}

.dropdown-item {
    color: var(--ink-1);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--accent-soft);
    color: var(--ink-1);
}

.dropdown-divider {
    border-top: 1px solid var(--border-1);
    margin: 0.3rem 0;
}

/* ---------- Tables ---------- */
.table {
    color: var(--ink-1);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--border-1);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-2);
}

/* Theme table headers — Bootstrap's .table-light ships a hardcoded
 * light background with dark text, which becomes unreadable in dark
 * mode. Override so thead (with or without .table-light) follows the
 * active theme surfaces/ink. */
.table > thead,
.table > thead > tr > th,
.table-light,
.table > thead.table-light,
.table > thead.table-light > tr > th {
    background-color: var(--surface-2);
    color: var(--ink-2);
    border-bottom-color: var(--border-2);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-2);
}

/* ---------- Progress ---------- */
.progress {
    background-color: var(--surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-bar {
    background: var(--zdfz-gradient);
}

.progress-bar.bg-success {
    background: var(--success) !important;
}

/* ---------- Spinner ---------- */
.spinner-border {
    color: var(--accent);
}

/* ---------- Modals ---------- */
.modal-content {
    /* surface-1 is translucent in dark mode (rgba white @ 4%),
     * which leaves the modal body visibly see-through over the
     * page backdrop. Use the page base (surface-0) so the modal
     * is opaque in both themes. */
    background: var(--surface-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    color: var(--ink-1);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border-1);
    padding: 1.1rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--border-1);
}

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

/* Bootstrap's .bg-light is a static light color that stays bright in
 * dark mode. Scope it to themed elements where we use it as a soft
 * surface (cards/modals/list rows) so it tracks the theme. */
.modal-content .bg-light,
.card-footer.bg-light,
.card-header.bg-light,
.list-group-item.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--ink-2);
}

/* ---------- Dashboard layout ---------- */
.dashboard-layout {
    display: flex;
    min-height: 100vh;
    background: transparent;
    position: relative;
}

.desktop-sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    height: 100vh;
    overflow: visible;
    z-index: 1000;
    position: fixed;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    height: 100vh;
    overflow-y: auto;
}

.sidebar .nav-link {
    color: var(--ink-2);
    border-radius: var(--radius-md);
    margin: 2px 10px;
    padding: 0.55rem 0.85rem !important;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border: none !important;
}

.sidebar .nav-link:hover {
    background-color: var(--surface-2);
    color: var(--ink-1);
}

.sidebar .nav-link.active {
    background-color: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    border-left: none !important;
}

:root[data-bs-theme="dark"] .sidebar .nav-link.active {
    background-color: var(--accent-soft);
    color: #ffffff;
}

.sidebar .nav-link i {
    width: 1.3rem;
    margin-right: 0.6rem;
    text-align: center;
    font-size: 1.05rem;
    opacity: 0.85;
}

.sidebar hr {
    border-color: var(--border-1);
    opacity: 1;
}

.main-content {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    transition: margin-left 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content.sidebar-hidden {
    margin-left: 0;
}

.top-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.content-area {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

/* Theme segmented control — sits at the bottom of the user dropdown.
 * Three buttons (light / dark / system) with the active mode highlighted. */
.theme-seg {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
    width: 100%;
}

.theme-seg-btn {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    border-radius: calc(var(--radius-md) - 2px);
    padding: 0.4rem 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-seg-btn:hover {
    color: var(--ink-1);
}

.theme-seg-btn.active {
    background: var(--surface-1);
    color: var(--ink-1);
    box-shadow: var(--shadow-sm);
}

/* User chip */
.user-button {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    color: var(--ink-1);
    padding: 0.45rem 0.9rem 0.45rem 0.55rem;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.user-button:hover {
    background: var(--surface-3);
    color: var(--ink-1);
    border-color: var(--border-2);
}

.user-button .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--zdfz-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Weather chip */
.weather-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    background: var(--surface-2);
    font-size: 0.8rem;
}

.weather-chip i {
    color: var(--accent);
    font-size: 1rem;
}

/* Balance chip (small) */
.balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.35rem 0.3rem 0.9rem;
    color: var(--ink-1);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.balance-chip:hover {
    border-color: var(--accent);
    color: var(--ink-1);
}

.balance-chip .label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: -0.2rem;
}

.balance-chip .amount {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ink-1);
}

.balance-chip .btn-topup {
    background: var(--zdfz-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.28rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: filter 0.2s ease;
}

.balance-chip .btn-topup:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* ---------- Dashboard widgets ---------- */
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.section-title .title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.section-title .action {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
}

.widget-card {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget-card:hover {
    border-color: var(--border-2);
}

/* Quick action tile */
.action-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-1);
    background: var(--surface-1);
    color: var(--ink-1);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    height: 100%;
}

.action-tile:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink-1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.action-tile .icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.action-tile .title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-1);
}

.action-tile .subtitle {
    font-size: 0.78rem;
    color: var(--ink-3);
}

.action-tile.action-tile-primary .icon-wrap {
    background: var(--zdfz-gradient);
    color: #fff;
}

/* Journey steps */
.journey-step {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    transition: all 0.2s ease;
}

.journey-step:hover {
    border-color: var(--border-2);
}

.journey-step.completed {
    border-color: var(--success);
    background: var(--success-soft);
}

.journey-step.available {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.journey-step.locked {
    opacity: 0.55;
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--ink-3);
}

.step-icon.completed {
    background: var(--success);
    color: #fff;
}

.step-icon.available {
    background: var(--accent);
    color: #fff;
}

.step-icon.locked {
    background: var(--surface-2);
    color: var(--ink-4);
}

/* Pending actions list */
.pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pending-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    transition: border-color 0.2s ease;
}

.pending-item:hover {
    border-color: var(--accent);
}

.pending-item .pending-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pending-item .pending-icon.urgent {
    background: var(--danger-soft);
    color: var(--danger);
}

.pending-item .pending-icon.warn {
    background: var(--warning-soft);
    color: var(--warning);
}

.pending-item .pending-icon.info {
    background: var(--accent-soft);
    color: var(--accent);
}

.pending-item .pending-body {
    flex: 1;
    min-width: 0;
}

.pending-item .pending-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-1);
}

.pending-item .pending-subtitle {
    font-size: 0.78rem;
    color: var(--ink-3);
}

/* Company status row */
.company-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--border-1);
}

.company-row:last-child {
    border-bottom: none;
}

.company-row .logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--zdfz-gradient-soft);
    border: 1px solid var(--border-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.company-row .name {
    font-weight: 600;
    color: var(--ink-1);
    font-size: 0.92rem;
}

.company-row .meta {
    font-size: 0.76rem;
    color: var(--ink-3);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 1.25rem 1rem;
    color: var(--ink-3);
    font-size: 0.88rem;
}

.empty-state > i {
    font-size: 1.6rem;
    color: var(--ink-4);
    display: block;
    margin-bottom: 0.4rem;
}

/* Greeting block */
.greeting-block .hello {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ink-1);
    letter-spacing: -0.01em;
    margin: 0;
}

.greeting-block .sub {
    color: var(--ink-3);
    font-size: 0.92rem;
    margin: 0.25rem 0 0;
}

/* ---------- Residency card (portal) ----------
 * Shown prominently on the right of the dashboard. Uses the brand
 * gradient band for the header and stays legible in both themes.
 */
.residency-card {
    max-width: 380px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

:root[data-bs-theme="dark"] .residency-card {
    background: rgba(4, 10, 20, 0.6);
}

.residency-card .rc-header {
    padding: 1.25rem 1.4rem;
    background: var(--zdfz-gradient);
    color: #ffffff;
    position: relative;
}

.residency-card .rc-header .rc-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
    font-weight: 600;
}

.residency-card .rc-header .rc-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.residency-card .rc-body {
    padding: 1.25rem 1.4rem 1.4rem;
}

.residency-card .rc-field {
    margin-bottom: 0.95rem;
}

.residency-card .rc-field-label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 0.1rem;
}

.residency-card .rc-field-value {
    color: var(--ink-1);
    font-weight: 500;
    font-size: 0.95rem;
    word-break: break-word;
}

.residency-card .rc-field-value.mono {
    font-family: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
    font-size: 0.78rem;
}

.residency-card .rc-qr-box {
    display: inline-flex;
    padding: 0.5rem;
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-1);
}

/* ---------- Loading spinner (boot) ---------- */
.portal-boot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--ink-2);
}

.portal-boot .spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--border-1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: portal-spin 0.9s linear infinite;
}

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

/* ---------- Setup footer (dev/mock banner) ---------- */
.setup-footer {
    padding: 0.55rem 1.5rem;
    background-color: var(--warning-soft);
    border-top: 1px solid var(--warning);
    color: var(--warning);
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------- Toasts ---------- */
.toast {
    background-color: var(--surface-1);
    border: 1px solid var(--border-1);
    color: var(--ink-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 320px;
    margin-bottom: 0.5rem;
}

.toast-header {
    background: transparent;
    border-bottom: 1px solid var(--border-1);
    color: var(--ink-1);
    padding: 0.55rem 0.85rem;
}

.toast-body {
    color: var(--ink-2);
    padding: 0.8rem 0.85rem;
}

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .desktop-sidebar { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .hamburger-button { display: inline-flex !important; }
    .desktop-logo { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-menu-container { display: none !important; }
    .main-content { margin-left: 260px !important; }
}

/* ---------- Misc legacy bits we still want to keep ---------- */
.compact-card { max-height: 150px; overflow-y: auto; }
.compact-card .card-body { padding: 0.75rem; }

.transition-all { transition: all 0.5s ease-in-out; }

/* Stripe Elements */
#payment-element {
    min-height: 40px;
    padding: 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background-color: var(--surface-1);
}

.payment-ready {
    border-color: var(--success) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem var(--success-soft) !important;
}

.payment-loading {
    opacity: 0.7;
    pointer-events: none;
}

#payment-errors {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: none;
}

/* Message markdown */
.message-body-markdown { line-height: 1.5; }
.message-body-markdown p { margin-bottom: 0.5rem; }
.message-body-markdown p:last-child { margin-bottom: 0; }
.message-body-markdown strong { font-weight: 600; color: var(--ink-1); }
.message-body-markdown code {
    background: var(--surface-2);
    color: var(--accent);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}
.message-body-markdown pre {
    background: var(--surface-2);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-1);
}
.message-body-markdown pre code { background: transparent; padding: 0; }
.message-body-markdown a { color: var(--accent); text-decoration: underline; }
.message-body-markdown ul,
.message-body-markdown ol { margin-bottom: 0.5rem; padding-left: 1.5rem; color: var(--ink-2); }
.message-body-markdown blockquote {
    border-left: 3px solid var(--border-2);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--ink-3);
}

/* Focus outline */
.nav-link:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Narrow-mobile responsive (#358 MOB-* fixes) ----------
   Bootstrap's xs breakpoint (<576px) is where most of our cards run out
   of horizontal room. Rules here are scoped strictly to that range so
   tablet/desktop layout is untouched.
*/
@media (max-width: 575.98px) {
    /* MOB-2 — journey step cards: stack icon / text / CTA vertically.
       At desktop the row is `[icon | title+desc | CTA]`. On <576px the
       middle column compresses and titles like "Become a Digital
       Resident" wrap to 3 lines and CTA pills wrap their own labels. */
    .journey-step {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .journey-step .step-icon { align-self: flex-start; }
    .journey-step .btn,
    .journey-step .badge { align-self: flex-start; }

    /* MOB-5 — inbox row: drop the timestamp under the subject so a
       1-line subject doesn't wrap to 4 lines next to a long datetime. */
    .widget-card .d-flex.w-100.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.15rem;
    }

    /* MOB-9 — profile email + other long values: allow wrap at any point
       so a single 30-char string doesn't blow past the row width. Scoped
       to dl/list-group rows and definition-style values, not bulk text. */
    .list-group-item .text-break,
    dd, dt,
    .profile-value,
    .profile-row code { overflow-wrap: anywhere; }

    /* MOB-11 — sticky top header: solid background so cards don't ghost
       behind it as the user scrolls. --surface-0 is opaque in both themes
       (light=#fafbfc, dark=midnight); --surface-1 is translucent in dark. */
    .top-header {
        background: var(--surface-0) !important;
        backdrop-filter: none !important;
    }
}

/* MOB-7 — sidebar drawer icon/label spacing: applies at all viewports
   so the desktop drawer reads the same as mobile. The bi-* icons sit
   flush against the label by default; force a small gap so labels
   don't read as `<icon><label>` welded together. */
.mobile-menu-container .nav-link i.bi,
.desktop-sidebar .nav-link i.bi { margin-right: 0.5rem; }

/* MOB-8 — locked-state "Back to Dashboard" pill at narrow viewport: the
   pill sits inside a fixed-width centered container; allow the label to
   take a wider pill on small screens so it stays one line. */
@media (max-width: 575.98px) {
    .locked-state-cta,
    .locked-state .btn { white-space: nowrap; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---------- Print ---------- */
@media print {
    .desktop-sidebar,
    .top-header,
    .setup-footer { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
}