@charset "UTF-8";



:root {
    --color-nobackground: #f5f7fb;
    --color-background: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-strong: #eef2f7;
    --color-surface-hover: #f3f6fb; /* pick what you want */
    --color-surface-strong-hover: #e6ecf5; /* optional if you use it */
    --color-border: #d7dde5;
    /* Design system v2: refined hairline used by cards, tables, and app
       chrome. --color-border stays for form controls where the stronger line
       aids affordance. */
    --color-border-subtle: #e2e8f0;
    --color-sidebar-bg: #fbfcfe;          /* v2 light sidebar */
    --color-table-head-bg: #f8fafc;       /* v2 light table header band */
    --color-table-foot-bg: #fbfcfd;       /* v2 table footer strip */
    --color-primary: #0b3b68;
    --color-primary-strong: #0f4f86;
    --color-on-primary: #ffffff;
    --color-secondary: #1f6f8b;
    --color-accent: #2b9ad0;
    --color-text: #1f2937;
    --color-text-muted: #5b6b7a;
    --color-success: #118c4f;
    --color-on-success: #ffffff;
    /* Warning (Yellow) */
    --color-warning: #f2c200;
    --color-warning-strong: #d9ad00;
    --color-on-warning: #111827;
    /* Attention (Orange) */
    --color-attention: #f97316;
    --color-attention-strong: #ea580c;
    --color-on-attention: #ffffff;
    /* Destructive (Red) */
    --color-danger: #c0353d;
    --color-danger-strong: #a42d33;
    --color-on-danger: #ffffff;
    --color-info: #0f7fbf;
    /* Badge/pill text colours — darker shades used for text on the light 10% tint
       fills so warning/info badges meet WCAG AA (4.5:1); the base hues (#f2c200,
       #0f7fbf) fail on a near-white tint (#989). Success/danger already pass. */
    --color-badge-warning-text: #8a6300;
    --color-badge-info-text: #0b6699;
    /* Overlay/Transparency Colors (for headers, dropdowns, overlays on primary/dark backgrounds) */
    --color-overlay-light-00: rgba(255, 255, 255, 0); /* transparent white — gradient fade stop (≠ the `transparent` keyword, which is transparent black) */
    --color-overlay-light-15: rgba(255, 255, 255, 0.15);
    --color-overlay-light-18: rgba(255, 255, 255, 0.18);
    --color-overlay-light-10: rgba(255, 255, 255, 0.10);
    --color-overlay-light-14: rgba(255, 255, 255, 0.14);
    --color-overlay-light-20: rgba(255, 255, 255, 0.20);
    --color-overlay-light-22: rgba(255, 255, 255, 0.22);
    --color-overlay-light-25: rgba(255, 255, 255, 0.25);
    --color-overlay-light-30: rgba(255, 255, 255, 0.30);
    --color-overlay-light-35: rgba(255, 255, 255, 0.35);
    --color-overlay-light-40: rgba(255, 255, 255, 0.40);
    --color-overlay-light-50: rgba(255, 255, 255, 0.50);
    --color-overlay-light-60: rgba(255, 255, 255, 0.60);
    --color-overlay-light-75: rgba(255, 255, 255, 0.75);
    --color-overlay-light-90: rgba(255, 255, 255, 0.90);
    --color-overlay-dark-08: rgba(11, 59, 104, 0.08);
    --color-overlay-dark-15: rgba(11, 59, 104, 0.15);
    --color-overlay-dark-18: rgba(0, 0, 0, 0.18);
    --color-overlay-dark-20: rgba(0, 0, 0, 0.20);
    --color-overlay-dark-25: rgba(0, 0, 0, 0.25);
    --color-overlay-dark-55: rgba(0, 0, 0, 0.55);
    --color-overlay-dark-60: rgba(0, 0, 0, 0.60);
    /* Mobile action bar upward shadow colour (slate-900 tint). */
    --color-mobile-bar-shadow: rgba(15, 23, 42, 0.14);
    /* Status/Indicator Colors */
    --color-slip-available: #10b981;
    --color-slip-occupied: #ef4444;
    --color-slip-reserved: #f59e0b;
    --color-slip-maintenance: #f97316;
    --color-slip-out-of-service: #6b7280;
    /* Infrastructure marker colors — marina-map point markers by asset type. Some asset types
       intentionally share --color-infra-default (Dock, Pier, and the unknown-type fallback).
       Kept as dedicated semantic vars, not reused slip-status vars, so they can diverge later. */
    --color-infra-electrical: #f59e0b;
    --color-infra-water: #3b82f6;
    --color-infra-pumpout: #8b5cf6;
    --color-infra-fuel: #ef4444;
    --color-infra-gangway: #10b981;
    --color-infra-bulkhead: #6b7280;
    --color-infra-breakwater: #475569;
    --color-infra-default: #0ea5e9;
    /* Marina map print view — neutral, ink-friendly slip marker (all slips one colour on print). */
    --color-map-print-slip-fill: #c7d2fe;
    --color-map-print-slip-stroke: #475569;
    /* Marina map viewer canvas backdrop (behind the rendered map SVG). */
    --color-map-canvas-bg: #f8f9fa;
    --color-white: #ffffff;
    --color-error-bg: #fffbe6;
    /* Impersonation banner amber ramp (#997). Values kept exact — ImpersonationRegressionTests
       asserts the computed banner background is rgb(245,158,11) = #f59e0b. */
    --color-impersonation-bg: #f59e0b;
    --color-impersonation-border: #d97706;
    --color-impersonation-btn-text: #92400e;
    --color-impersonation-btn-hover-bg: #fffbeb;
    --color-impersonation-btn-hover-border: #b45309;
    /* Refunded status (purple) — badge + status-badge text (#997). */
    --color-refunded-text: #7c3aed;
    /* Inverse-section (dark hero) heading greys (#997). */
    --color-inverse-heading-2: rgba(210, 210, 210, 0.9);
    --color-inverse-heading-3: rgba(180, 180, 180, 0.9);
    /* Row Highlight Colors - Subtle backgrounds for visual grouping/emphasis */
    --color-highlight-info: rgba(59, 130, 246, 0.05);
    --color-highlight-warning: rgba(245, 158, 11, 0.05);
    --color-highlight-success: rgba(16, 185, 129, 0.05);
    --color-highlight-neutral: rgba(107, 114, 128, 0.03);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --shadow-sm: 0 4px 12px rgba(12, 21, 36, 0.06);
    --shadow-md: 0 10px 30px rgba(12, 21, 36, 0.12);
    /* Design system v2 shadow tiers: card = near-flat layered resting shadow,
       pop = floating chrome (menus, drawers, popovers, toasts). */
    --shadow-card: 0 1px 2px rgba(12, 21, 36, 0.05), 0 1px 3px rgba(12, 21, 36, 0.04);
    --shadow-pop: 0 10px 30px rgba(12, 21, 36, 0.14), 0 2px 8px rgba(12, 21, 36, 0.08);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-text-hero: 0 6px 18px var(--color-overlay-dark-60);
    --line-height: 1.6;
    /* Design system v2 app type scale (comfortable density). Marketing surfaces
       keep the 1rem body; app tables/chrome opt in via these tokens. */
    --fs-body: 13.5px;
    --fs-sm: 12.5px;

    --hl-surface: var(--color-surface);
    --hl-border: var(--color-border);
    --hl-primary: var(--color-primary);
    --hl-accent: var(--color-accent);
    --hl-danger: var(--color-danger);
    --hl-success: var(--color-success);
    --hl-text: var(--color-text);
    --hl-text-muted: var(--color-text-muted);
    --hl-text-secondary: var(--color-text-muted);
    --hl-radius: var(--radius-md);

    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-muted: var(--color-text-muted);
    --surface-color: var(--color-surface);
    --surface-muted: var(--color-surface-strong);
    --primary: var(--color-primary);
    --success: var(--color-success);
    --bg-secondary: var(--color-surface-strong);
    --bg-accent: var(--color-highlight-info);
}

.hl-overlay {
    background: var(--color-overlay-dark-60);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--color-background);
    color: var(--color-text);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 640px) {
    button,
    a.hl-btn,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hl-text-shadow-hero {
    text-shadow: var(--shadow-text-hero);
}

/* Allow inverse sections (heroes, dark banners) to control heading color */
.hl-inverse h1,
.hl-inverse h2,
.hl-inverse h3,
.hl-inverse h4,
.hl-inverse h5,
.hl-inverse h6 {
    color: inherit;
}

/* Inverse section default text color */
.hl-inverse h1 {
    color: var(--color-overlay-light-90);
}

.hl-inverse h2 {
    color: var(--color-inverse-heading-2);
}

.hl-inverse h3 {
    color: var(--color-inverse-heading-3);
}

p {
    margin: 0;
    color: var(--color-text-muted);
}

a:not(.hl-btn) {
    color: var(--color-primary);
    text-decoration: none;
}

    a:not(.hl-btn):hover {
        color: var(--color-primary-strong);
        text-decoration: underline;
    }


.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-top: 1rem;
}

/* Design system v2 KPI card: quiet label, large tabular value, subtle lift. */
.stat-card {
    padding: 1rem 1.15rem;
    display: grid;
    gap: 0.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .stat-card:hover {
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.stat-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* S4b drill-down: card-as-link (HlCard Href, .card/.stat-card anchors).
   Resets the global a:not(.hl-btn) color/underline so card text keeps its own
   colors; hover = lift + border strengthen (variant-agnostic — never fights a
   variant's resting shadow). Must sit after the a:not(.hl-btn) rules so the
   equal-specificity tie breaks this way. */
a.hl-card-link,
a.hl-card-link:hover {
    color: inherit;
    text-decoration: none;
}

a.hl-card-link {
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    a.hl-card-link:hover {
        transform: translateY(-1px);
        border-color: var(--color-border);
    }

    /* Outline (not box-shadow) so the ring composes with the card's resting
       elevation shadow instead of replacing it; outlines aren't clipped by the
       element's own overflow (same approach as .hl-chart-wrapper). */
    a.hl-card-link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

/* Forced-colors (Windows High Contrast): keep a real outline in CanvasText. */
@media (forced-colors: active) {
    a.hl-card-link:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
}

/* S4d section nav: the INK for HlSectionNav's links (color, hover, current, touch floor).
   Layout, spacing and overflow stay in Tailwind on the component.

   Unlayered here on purpose, and for the same reason as a.hl-card-link above.
   tailwind.output.css wraps everything in @layer utilities while theme.css is unlayered and
   loads first; under cascade-layer rules unlayered author styles beat layered ones regardless
   of specificity, so the a:not(.hl-btn) rule would repaint every link in the strip
   primary-blue and no text-[var(--color-text-muted)] utility could take it back. Specificity
   against a:not(.hl-btn) is a tie (0,1,1 each), so this block must also sit AFTER it. */
a.hl-section-nav__link {
    /* inline-flex, not the default inline: gives the min-height floor below something to
       stretch, and centers the label inside it. */
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    text-decoration: none;
    /* Top corners only, so the current-section underline stays a straight line. */
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

    a.hl-section-nav__link:hover {
        color: var(--color-text);
        background: var(--color-surface-hover);
        text-decoration: none;
    }

    /* Driven off aria-current rather than a separate class, so the visual current section and
       the announced one cannot drift apart.
       Inset box-shadow, not border-bottom: a border grows the link's box, which would push the
       current tab 2px out of line with its neighbours. */
    a.hl-section-nav__link[aria-current="page"] {
        color: var(--color-primary);
        font-weight: 600;
        box-shadow: inset 0 -2px 0 var(--color-primary);
    }

    /* Inset ring (outline-offset is NEGATIVE here, unlike a.hl-card-link). The strip is an
       overflow-x scroll container, and setting one axis to auto computes the other to auto too,
       so an outward-offset ring would be clipped at the top and bottom edges of the scroll box. */
    a.hl-section-nav__link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

@media (forced-colors: active) {
    a.hl-section-nav__link:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }
}

@media (max-width: 640px) {
    /* S7 touch floor. The global 44px rule above covers button / a.hl-btn / input / select /
       textarea — a plain <a> is not in that list, so the strip needs its own. */
    a.hl-section-nav__link {
        min-height: 44px;
    }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--color-surface-strong);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.section {
    margin-top: 1.25rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.section-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
}

/* Horizontal-scroll wrapper emitted by HlDataTable so wide tables degrade to
   scroll on narrow viewports instead of clipping controls off-screen (#974). */
.hl-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hl-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    /* Tabular figures so currency/quantities align down a column (S2, #986). */
    font-variant-numeric: tabular-nums;
}

/* Opt-in right-alignment for numeric/currency columns (S2, #986):
   mark the <th>/<td> with data-hl-cell="numeric". */
.hl-table th[data-hl-cell="numeric"],
.hl-table td[data-hl-cell="numeric"] {
    text-align: right;
}

    /* Design system v2: light header band with small uppercase labels replaces
       the navy thead; rows tighten up and inherit the app type scale. */
    .hl-table thead {
        background: var(--color-table-head-bg);
        color: var(--color-text-muted);
    }

    .hl-table th, .hl-table td {
        padding: 0.72rem 1rem;
        text-align: left;
        border-bottom: 1px solid var(--color-border-subtle);
        font-size: var(--fs-body);
    }

    .hl-table th {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        white-space: nowrap;
    }

    /* Sortable-header buttons (#988) render as plain header labels in v2:
       chrome-less, inheriting the uppercase band treatment. Padding is kept
       (with compensating negative margin so the label stays flush with the
       band) to preserve a comfortable click/tap target. */
    .hl-table thead th button {
        font: inherit;
        text-transform: inherit;
        letter-spacing: inherit;
        color: inherit;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0.4rem 0.5rem;
        margin: -0.4rem -0.5rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

        .hl-table thead th button:hover,
        .hl-table thead th button:active {
            color: var(--color-text);
            background: transparent;
            transform: none;
            box-shadow: none;
        }

        /* Inset focus ring — .hl-table clips overflow, so the browser's
           default outline could be cut off at the table edge. */
        .hl-table thead th button:focus-visible {
            outline: none;
            color: var(--color-text);
            box-shadow: inset 0 0 0 2px var(--color-primary);
        }

        /* Forced-colors (Windows High Contrast) suppresses box-shadow, so
           restore a real outline there; negative offset keeps it inside the
           clipped table edge. */
        @media (forced-colors: active) {
            .hl-table thead th button:focus-visible {
                outline: 2px solid CanvasText;
                outline-offset: -2px;
            }
        }

        .hl-table th[data-hl-cell="actions"],
        .hl-table td[data-hl-cell="actions"] {
            width: 1%;
            white-space: nowrap;
        }

    .hl-table tbody tr {
        transition: background 0.1s ease;
    }

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

    .hl-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* v2 table footer strip (totals/summary rows rendered via HlDataTable's
       Footer fragment). */
    .hl-table tfoot td,
    .hl-table tfoot th {
        background: var(--color-table-foot-bg);
        border-top: 1px solid var(--color-border-subtle);
        border-bottom: none;
        font-size: var(--fs-sm);
        color: var(--color-text-muted);
    }

    /* HlDataTable: Actions cell layout (do not apply flex to <td>) */
    .hl-table td[data-hl-cell="actions"] {
        text-align: right;
        white-space: nowrap;
    }

        .hl-table td[data-hl-cell="actions"] > [data-hl-actions] {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem; /* matches your padding scale */
        }

        .hl-table td[data-hl-cell="actions"] > [data-hl-actions] {
            justify-content: flex-end;
            /*width: 100%;*/
        }




.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

    /* Design system v2: status dot rendered in CSS so existing `.badge success`
       markup (asserted by regression tests) needs no structural change.
       Non-status badges opt out with the `.no-dot` escape hatch below. */
    .badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    /* Opt-out for CSS-based badges that aren't status indicators (mirrors
       HlBadge's ShowDot="false"). */
    .badge.no-dot::before,
    .status-badge.no-dot::before {
        display: none;
    }

    .badge.success {
        background: rgba(17, 140, 79, 0.1);
        color: var(--color-success);
    }

    .badge.warning {
        background: rgba(201, 115, 17, 0.12);
        color: var(--color-badge-warning-text);
    }

    .badge.danger {
        background: rgba(192, 53, 61, 0.12);
        color: var(--color-danger);
    }

    .badge.info {
        background: rgba(15, 127, 191, 0.12);
        color: var(--color-badge-info-text);
    }

    .badge.neutral {
        background: rgba(31, 111, 139, 0.1);
        color: var(--color-secondary);
    }

    .badge.default {
        background: rgba(91, 107, 122, 0.12);
        color: var(--color-text-muted);
    }

    .badge.refunded {
        background: rgba(139, 92, 246, 0.12);
        color: var(--color-refunded-text);
    }

.map-placeholder {
    height: 260px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: repeating-linear-gradient( 45deg, rgba(11, 59, 104, 0.03), rgba(11, 59, 104, 0.03) 10px, rgba(31, 111, 139, 0.05) 10px, rgba(31, 111, 139, 0.05) 20px );
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    font-weight: 600;
}

.placeholder-content {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

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

.flex-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.muted {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.grid-two {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.section-card {
    padding: 1.25rem;
}

/* NOTE: .filter-select is defined in app.css (max-width: 240px) */

.form-hint {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* ==========================================
   Impersonation Banner
   ========================================== */
.impersonation-banner {
    background: var(--color-impersonation-bg); /* #f59e0b — matches test expectations */
    color: var(--color-text);
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid var(--color-impersonation-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 999;
}

.impersonation-banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.impersonation-icon {
    font-size: 1.5rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.impersonation-text {
    flex: 1;
    font-size: 0.95rem;
}

    .impersonation-text strong {
        font-weight: 700;
        margin-right: 0.5rem;
    }

/* Lockout note inside the impersonation banner. Its own line: it is a sentence, not a suffix to
   the email address, and it must not push the Stop Impersonation button off a narrow screen. */
.impersonation-subscription {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* App-shell billing warning. Sits directly under the header (and under the impersonation banner
   when both are present), full width, ahead of the sidebar and content. */
.billing-banner {
    padding: 0.75rem 1.5rem 0;
}

.impersonation-banner .button {
    background: white;
    color: var(--color-impersonation-btn-text); /* dark amber for contrast */
    border: 1px solid var(--color-impersonation-border);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

    .impersonation-banner .button:hover {
        background: var(--color-impersonation-btn-hover-bg); /* light amber tint */
        border-color: var(--color-impersonation-btn-hover-border);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: auto !important;
}

.modal-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    max-height: 90vh;
    overflow: auto;
    width: 100%;
    margin: 1rem;
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    .modal-header h3 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

.billing-confirmation-modal .modal-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 600px;
    width: calc(100% - 2rem);
    max-height: 90vh;
}

.list-item {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    transition: background 0.15s;
}

    .list-item:hover {
        background: var(--color-surface-strong);
    }

/* Status Badges — v2 dot-pill treatment, matching .badge. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

    .status-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .status-badge.status-draft {
        background: rgba(15, 127, 191, 0.1);
        color: var(--color-badge-info-text);
    }

    .status-badge.status-active {
        background: rgba(17, 140, 79, 0.1);
        color: var(--color-success);
    }

    .status-badge.status-expired {
        background: rgba(192, 53, 61, 0.1);
        color: var(--color-danger);
    }

    .status-badge.status-paid {
        background: rgba(17, 140, 79, 0.1);
        color: var(--color-success);
    }

    .status-badge.status-overdue {
        background: rgba(192, 53, 61, 0.12);
        color: var(--color-danger);
    }

    .status-badge.status-void {
        background: rgba(192, 53, 61, 0.12);
        color: var(--color-danger);
    }

    .status-badge.status-issued {
        background: rgba(15, 127, 191, 0.12);
        color: var(--color-badge-info-text);
    }

    .status-badge.status-refunded {
        background: rgba(139, 92, 246, 0.12);
        color: var(--color-refunded-text);
    }

    .status-badge.status-open {
        background: rgba(15, 127, 191, 0.12);
        color: var(--color-badge-info-text);
    }

    .status-badge.status-canceled {
        background: rgba(192, 53, 61, 0.12);
        color: var(--color-danger);
    }

    .status-badge.status-succeeded {
        background: rgba(17, 140, 79, 0.1);
        color: var(--color-success);
    }

    .status-badge.status-pending {
        background: rgba(201, 115, 17, 0.12);
        color: var(--color-badge-warning-text);
    }




/* Form Sections */
.form-section {
    margin-bottom: 2rem;
}

    .form-section:last-child {
        margin-bottom: 0;
    }

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

/* Form Card Container */
.form-card {
    padding: 2rem;
    max-width: 900px;
    margin: 1.25rem auto 0;
}

@media (max-width: 768px) {
    .form-card {
        padding: 1.25rem;
    }
}

/* Form Grid Layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Form Field Container */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Form Labels */
.form-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

    .form-label .required {
        color: var(--color-danger);
        margin-left: 0.25rem;
    }

/* Form Inputs */
.form-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease-in-out;
}

    .form-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(11, 59, 104, 0.1);
    }

/* ==========================================================================
   HlDetailField - Read-only label/value pairs for detail pages
   ========================================================================== */

.hl-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-strong);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
    transition: background 0.15s ease-in-out;
    margin: 0; /* reset default <dl> margin (element is now a <dl>, #991) */
}

    .hl-detail-field:hover {
        background: linear-gradient(to right, var(--color-surface-strong), var(--color-surface));
    }

.hl-detail-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.hl-detail-field-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}

.hl-detail-field-value--emphasized {
    font-size: 1.125rem;
    font-weight: 600;
}

.hl-detail-field-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875rem;
    background: var(--color-surface);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* Inline variant: label and value on same line */
.hl-detail-field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    padding: 0.75rem 0;
}

    .hl-detail-field--inline:hover {
        background: transparent;
    }

    .hl-detail-field--inline .hl-detail-field-label {
        text-transform: none;
        font-size: 0.875rem;
        letter-spacing: normal;
    }

    .hl-detail-field--inline .hl-detail-field-value {
        text-align: right;
    }

/* Stacked variant: extra emphasis for key data points */
.hl-detail-field--stacked {
    border-left-width: 4px;
    padding: 1rem 1.25rem;
}

.form-input:disabled {
    background: var(--color-surface-strong);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Input Group (for prefix/suffix) */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix {
    position: absolute;
    left: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    pointer-events: none;
}

.input-group .form-input {
    padding-left: 2rem;
}

/* Form Actions (button container) */
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .form-actions button,
        .form-actions .btn {
            width: 100%;
        }
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}

    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn.primary {
        background: var(--color-primary);
        color: var(--color-surface);
        border-color: var(--color-primary);
        box-shadow: var(--shadow-sm);
    }

        .btn.primary:hover:not(:disabled) {
            background: var(--color-primary-strong);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

    .btn.ghost {
        background: var(--color-surface);
        color: var(--color-text);
        border-color: var(--color-border);
    }

        .btn.ghost:hover:not(:disabled) {
            background: var(--color-surface-strong);
            border-color: var(--color-primary);
        }

/* Validation Styles */
.field-validation-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.validation-errors {
    background: rgba(192, 53, 61, 0.1);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

    .validation-errors ul {
        margin: 0;
        padding-left: 1.25rem;
        color: var(--color-danger);
    }