/* Design System Foundation - CSS Custom Properties */

/* ============================================================
   Design Tokens (theme-independent)
   ============================================================ */
:root {
    /* Border Radius Scale */
    --radius-sm: 4px;       /* inputs, small buttons, kbd */
    --radius-md: 6px;       /* nav links, search inputs, toasts */
    --radius-lg: 8px;       /* cards, theme toggle, large inputs */
    --radius-xl: 12px;      /* dialogs, auth card */
    --radius-pill: 50rem;   /* pills, chips, badges */
    --radius-full: 50%;     /* circles, avatars */

    /* Font Size Scale */
    --text-2xs: 0.625rem;   /* 10px - sort indicators, tiny labels */
    --text-xs: 0.6875rem;   /* 11px - badges, section labels, kbd */
    --text-sm: 0.75rem;     /* 12px - table headers, action buttons */
    --text-base: 0.8125rem; /* 13px - main text, breadcrumbs, menus */
    --text-md: 0.875rem;    /* 14px - body, form text, help text */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.25rem;     /* 20px - page headings */
}

/* ============================================================
   Light Theme (default)
   ============================================================ */
[data-bs-theme="light"] {
    /* Brand / Primary */
    --primary: #4f46e5;
    --primary-subtle: #e0e7ff;

    /* Surfaces */
    --surface: #ffffff;
    --surface-alt: #f8f9fa;

    /* Borders */
    --border: #dee2e6;

    /* Text */
    --text-primary: #212529;
    --text-secondary: #6c757d;

    /* Semantic (muted to harmonize with indigo primary) */
    --success: #3a8a5c;
    --warning: #b5862e;
    --danger: #be4b44;
    --info: #4d8d9d;

    /* Shell (sidebar + header + footer unified background) */
    --shell-bg: #f0f0f5;

    /* Meta theme color */
    --theme-color: #4f46e5;

    /* Shadows */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.15);

    /* Bootstrap overrides (muted semantic palette) */
    --bs-success: #3a8a5c;
    --bs-success-rgb: 58, 138, 92;
    --bs-success-text-emphasis: #24563a;
    --bs-success-bg-subtle: #e8f2ec;
    --bs-success-border-subtle: #b8d6c4;
    --bs-warning: #b5862e;
    --bs-warning-rgb: 181, 134, 46;
    --bs-warning-text-emphasis: #72541d;
    --bs-warning-bg-subtle: #f5f0e5;
    --bs-warning-border-subtle: #ddd0b0;
    --bs-danger: #be4b44;
    --bs-danger-rgb: 190, 75, 68;
    --bs-danger-text-emphasis: #782f2b;
    --bs-danger-bg-subtle: #f6eaea;
    --bs-danger-border-subtle: #e0b8b5;
    --bs-info: #4d8d9d;
    --bs-info-rgb: 77, 141, 157;
    --bs-info-text-emphasis: #305963;
    --bs-info-bg-subtle: #e8f1f4;
    --bs-info-border-subtle: #b5d2da;
}

/* ============================================================
   Dark Theme
   ============================================================ */
[data-bs-theme="dark"] {
    /* Brand / Primary */
    --primary: #818cf8;
    --primary-subtle: #312e81;

    /* Surfaces */
    --surface: #1a1a2e;
    --surface-alt: #16213e;

    /* Borders */
    --border: #2d3748;

    /* Text */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;

    /* Semantic (muted to harmonize with indigo primary) */
    --success: #6ab882;
    --warning: #d4a64e;
    --danger: #d4766e;
    --info: #68b4c6;

    /* Shell (sidebar + header + footer unified background) */
    --shell-bg: #151521;

    /* Meta theme color */
    --theme-color: #1a1a2e;

    /* Shadows */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Focus Ring */
    --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.15);

    /* Bootstrap overrides (muted semantic palette) */
    --bs-success: #6ab882;
    --bs-success-rgb: 106, 184, 130;
    --bs-success-text-emphasis: #a5d6b5;
    --bs-success-bg-subtle: #1a2e22;
    --bs-success-border-subtle: #2d5a3d;
    --bs-warning: #d4a64e;
    --bs-warning-rgb: 212, 166, 78;
    --bs-warning-text-emphasis: #e4c88f;
    --bs-warning-bg-subtle: #2e2518;
    --bs-warning-border-subtle: #5a4a25;
    --bs-danger: #d4766e;
    --bs-danger-rgb: 212, 118, 110;
    --bs-danger-text-emphasis: #e4a8a3;
    --bs-danger-bg-subtle: #2e1a19;
    --bs-danger-border-subtle: #5a2d2a;
    --bs-info: #68b4c6;
    --bs-info-rgb: 104, 180, 198;
    --bs-info-text-emphasis: #a0d2de;
    --bs-info-bg-subtle: #182a2e;
    --bs-info-border-subtle: #2d545a;
}

/* ============================================================
   Theme-Aware Logo Display
   ============================================================ */
[data-bs-theme="light"] .logo-dark-only { display: none !important; }
[data-bs-theme="dark"] .logo-light-only { display: none !important; }

/* ============================================================
   Sidebar — light in light mode, dark in dark mode
   ============================================================ */
[data-bs-theme="light"] {
    --sidebar-bg: #f0f0f5;
    --sidebar-text: #212529;
    --sidebar-text-secondary: #6c757d;
    --sidebar-hover: rgba(0, 0, 0, 0.04);
    --sidebar-active-indicator: #4f46e5;
    --sidebar-border: #dee2e6;
    --sidebar-active-bg: rgba(79, 70, 229, 0.08);
}

[data-bs-theme="dark"] {
    --sidebar-bg: #151521;
    --sidebar-text: #e2e8f0;
    --sidebar-text-secondary: #94a3b8;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active-indicator: #818cf8;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-active-bg: rgba(129, 140, 248, 0.12);
}

/* ============================================================
   Typography
   ============================================================ */
:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --font-size-base: var(--text-md); /* 14px */
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.font-mono {
    font-family: var(--font-mono) !important;
}

/* ============================================================
   Utility Classes
   ============================================================ */

/* Font size utilities (matching design token scale) */
.text-2xs { font-size: var(--text-2xs) !important; }
.text-xs  { font-size: var(--text-xs) !important; }
.text-sm  { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }

/* Progress bar height variants */
.progress-thin { height: 4px; }
.progress-sm   { height: 6px; }

/* Text handling for technical content */
.text-break-all { word-break: break-all; }

/* Max-width for content columns */
.max-w-content { max-width: 300px; }

/* Status indicator dot (10×10 circle) */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

/* Badge variant: info-light (forwarding, PTR, etc.) */
.badge-info-subtle {
    background: rgba(77, 141, 157, 0.1);
    color: var(--info);
}

[data-bs-theme="dark"] .badge-info-subtle {
    background: rgba(104, 180, 198, 0.12);
}

/* ============================================================
   Button Icon Alignment
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Component Overrides
   ============================================================ */

/* Cards: no shadow, reduced padding */
.card {
    border-radius: var(--radius-lg);
    box-shadow: none;
    border-color: var(--border);
    overflow: hidden;
}

.card-body {
    padding: 1rem;
}

/* Remove card-header bottom border when its collapsible sibling is closed,
   preventing it from stacking with the card's own bottom border. */
.card-header:has(+ .collapse:not(.show)) {
    border-bottom: none;
}

/* Badges: pill shape, icon-aligned */
.badge {
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    /* Bootstrap sizes badges at .75em, so one sitting in a 12px table cell
       computes to 9px — and the mobile rules shrink those tables further, down
       to 7.9px in places. Hold the design system's badge size as a floor
       without enlarging badges that already sit above it. */
    font-size: max(0.75em, var(--text-xs));
}

/* Tables: subtle borders, no zebra, hover highlight */
.table {
    --bs-table-border-color: var(--border);
}

.table > thead > tr > th {
    border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover {
    background-color: var(--primary-subtle);
}

/* Compact table rows */
.table > :not(caption) > * > * {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ============================================================
   Theme Toggle Widget (Settings page)
   ============================================================ */
#theme-toggle .theme-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================================================
   Header Bar
   ============================================================ */
.header-bar {
    background: var(--shell-bg);
    border-bottom: none;
    padding: 0 1.25rem;
    height: 48px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

/* ── Breadcrumbs ── */
/* The trail is the only item here that can be arbitrarily long, so it is also
   the one that has to give. With flex-shrink: 0 it instead pushed the search
   box and the user menu out of .header-inner, and .content-column's
   overflow: hidden cropped them away — which at tablet widths, where the
   sidebar still claims 240px, hid the whole user menu. (#114) */
.header-breadcrumbs {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.header-breadcrumbs .breadcrumb {
    font-size: var(--text-base);
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.header-breadcrumbs .breadcrumb-item {
    flex-shrink: 0;
}

/* Only the current page's label truncates. An overflow rule on the others
   would crop the home <svg>, and shortening an ancestor to one letter tells
   the reader nothing. */
.header-breadcrumbs .breadcrumb-item:last-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-breadcrumbs .breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}

.header-breadcrumbs .breadcrumb-item a:hover {
    color: var(--primary);
}

.header-breadcrumbs .breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.header-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* ── Search ── */
.header-search {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
}

.header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 1;
}

.header-search-input {
    min-width: 0; /* inputs default to ~180px intrinsic; without this the field refuses to shrink */
    padding-left: 2rem;
    padding-right: 4rem;
    height: 34px;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    border-color: var(--border);
    background: var(--surface);
}

.header-search-input:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    background: var(--surface);
}

.header-search-kbd {
    position: absolute;
    right: 0.5rem;
    font-size: var(--text-xs);
    padding: 0.125rem 0.375rem;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    line-height: 1.3;
    pointer-events: none;
}

/* ── Actions (right side) ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Admin badge */
.header-admin-badge {
    background: var(--warning);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

/* User menu */
.header-user-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
    max-width: 220px;
}

.header-user-btn:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--text-primary);
}

.header-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-dropdown {
    min-width: 220px;
    font-size: var(--text-base);
}

.header-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    font-size: var(--text-base);
    padding: 0.375rem 0.75rem;
}

.header-version-row {
    font-size: var(--text-xs);
    padding: 0.125rem 0.75rem;
}

/* Shown only on phones, where the button next to it is avatar-only. */
.header-user-email-row {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-primary);
}

/* ── Mobile header (matches the sidebar drawer breakpoint) ──
   Even with the trail shrinking, 320-430px cannot hold breadcrumbs, a 480px
   search field and an email address at once — the overflow used to fall off
   the right edge, taking the whole user menu (Settings, Support, Sign out)
   with it. Shorten the trail, collapse search to its magnifier (tapping it
   opens the command palette either way) and show the avatar in place of the
   address, so every control stays reachable down to 320px. (#114) */
@media (max-width: 767.98px) {
    .header-bar {
        padding: 0 0.75rem;
    }

    .header-inner {
        gap: 0.5rem;
    }

    /* Keep the trail to home + parent + current page; ellipsising every level
       instead just turns the ancestors into unreadable single letters. */
    .header-breadcrumbs .breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
        display: none;
    }

    .header-search {
        flex: 0 0 auto;
        width: 2.25rem;
        margin: 0;
    }

    .header-search-input {
        width: 2.25rem;
        padding-right: 0.25rem;
    }

    .header-search-kbd {
        display: none;
    }

    .header-admin-badge .header-admin-label {
        display: none;
    }

    .header-admin-badge .bi {
        margin-right: 0 !important;
    }

    .header-user-btn {
        max-width: none;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================================
   MFA Code Input (shared component)
   ============================================================ */
.mfa-code-input {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mfa-code-input:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.mfa-code-input::placeholder {
    letter-spacing: 0.5em;
    opacity: 0.3;
}

/* ============================================================
   Auth Info Box (shared component)
   ============================================================ */
.auth-info {
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    font-size: var(--text-md);
    margin-bottom: 1.5rem;
}

[data-bs-theme="light"] .auth-info {
    background: var(--primary-subtle);
    color: #3730a3;
}

[data-bs-theme="dark"] .auth-info {
    background: var(--primary-subtle);
    color: #c7d2fe;
}

/* ============================================================
   Auth Resend Link (shared component)
   ============================================================ */
.auth-resend {
    text-align: center;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.auth-resend .btn-link {
    font-size: var(--text-base);
    color: var(--primary);
    text-decoration: none;
    padding: 0;
}

.auth-resend .btn-link:hover {
    text-decoration: underline;
}

/* ============================================================
   Form Action Bar
   ============================================================ */
.sticky-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
    background: inherit;
}

/* ============================================================
   Required Field Asterisk
   ============================================================ */
.required > label::after,
.required > .form-label::after,
.required > .form-check > .form-check-label::after {
    content: " *";
    color: var(--danger);
    font-weight: 600;
}

/* ============================================================
   Form Help Text
   ============================================================ */
.form-text {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

/* ============================================================
   Reusable Table Component (zl-table)
   ============================================================ */
.zl-table {
    font-size: var(--text-base);
    margin-bottom: 0;
}

.zl-table--fixed {
    table-layout: fixed;
}

.zl-table--fixed td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.zl-table > thead > tr > th {
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.625rem;
}

.zl-table > tbody > tr > td {
    padding: 0.4375rem 0.625rem;
    vertical-align: middle;
    border-bottom-color: var(--border);
}

.zl-table > tbody > tr {
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.zl-table > tbody > tr:last-child {
    border-bottom: none;
}

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

/* Sort Headers */
.zl-table th a {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.zl-table th a:hover {
    color: var(--primary);
}

.zl-sort-indicator {
    font-size: var(--text-2xs);
    opacity: 0.7;
}

/* ============================================================
   Stacked Table — mobile card layout (#1429)
   ============================================================ */
/* Below md a table.table-stack stops being a grid: the thead is hidden and
   each row renders as a card of "label: value" lines, using the column
   header text that table-stack.js copies into data-label on every cell.
   The primary list views are 750-1250px wide as tables, so on a phone the
   alternative is 2-3.5x horizontal scrolling. */
@media (max-width: 767.98px) {
    table.table-stack,
    table.table-stack > tbody {
        display: block;
        width: 100%;
    }

    table.table-stack > thead {
        display: none;
    }

    table.table-stack > tbody > tr {
        display: block;
        position: relative;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--border);
    }

    table.table-stack > tbody > tr:last-child {
        border-bottom: none;
    }

    table.table-stack > tbody > tr > td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.625rem;
        padding: 0.1875rem 0;
        border: none;
        box-shadow: none;
        min-width: 0;
        max-width: none;
        width: auto;
        overflow-wrap: anywhere;
        /* Column alignment (text-center/text-end) is meaningless in a card
           and would skew the label inside its fixed-width box. */
        text-align: left !important;
    }

    table.table-stack > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-secondary);
    }

    /* Cells without a column header (unlabelled) and spanning cells (empty
       states) get the full card width and no label prefix. */
    table.table-stack > tbody > tr > td:not([data-label]),
    table.table-stack > tbody > tr > td[colspan] {
        display: block;
    }

    table.table-stack > tbody > tr > td:not([data-label])::before,
    table.table-stack > tbody > tr > td[colspan]::before {
        content: none;
    }

    /* A row-select checkbox sits in the card's top-right corner instead of
       occupying a line of its own (classes set by table-stack.js). */
    table.table-stack > tbody > tr.table-stack-has-select {
        padding-right: 2.75rem;
    }

    table.table-stack > tbody > tr > td.table-stack-select {
        position: absolute;
        top: 0.625rem;
        right: 0.875rem;
        width: auto;
        padding: 0;
    }

    /* Values such as TXT record data may be long; in a card they get the
       full width and wrap instead of being clamped (#1429 item 2). */
    table.table-stack td .zd-record-content,
    table.table-stack td.record-content,
    table.table-stack td .record-content {
        max-width: none;
    }
}

/* ============================================================
   Scroll Shadow Indicators for Responsive Tables
   ============================================================ */
.table-responsive {
    position: relative;
}

.table-responsive::before,
.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.table-responsive::before {
    left: 0;
    background: linear-gradient(to right, var(--surface) 0%, transparent 100%);
}

.table-responsive::after {
    right: 0;
    background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
}

.table-responsive.is-scrollable-right::after {
    opacity: 1;
}

.table-responsive.is-scrollable-left::before {
    opacity: 1;
}

/* ============================================================
   Status Dot
   ============================================================ */
.zl-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.zl-status-dot--enabled {
    background: var(--success);
}

.zl-status-dot--disabled {
    background: var(--danger);
}

.zl-status-dot--default {
    background: var(--text-secondary);
}

/* ============================================================
   Page Header
   ============================================================ */
.zl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.zl-header h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

/* ============================================================
   Inline Actions
   ============================================================ */
.zl-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.zl-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    line-height: 1.5;
}

.zl-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

.zl-action-btn svg {
    flex-shrink: 0;
}

/* Action button color variants */
.zl-action-btn--danger {
    border-color: rgba(190, 75, 68, 0.3);
    color: var(--danger);
}

.zl-action-btn--danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(190, 75, 68, 0.08);
}

.zl-action-btn--success {
    border-color: var(--success);
    color: var(--success);
}

.zl-action-btn--success:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(58, 138, 92, 0.08);
}

/* ── Icon-only Action Button ── */
.zl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.zl-icon-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

.zl-icon-btn--danger {
    color: var(--danger);
    border-color: rgba(190, 75, 68, 0.25);
}

.zl-icon-btn--danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(190, 75, 68, 0.08);
}

[data-bs-theme="dark"] .zl-icon-btn--danger:hover {
    background: rgba(212, 118, 110, 0.12);
}

/* ============================================================
   Overflow Menu
   ============================================================ */
.zl-overflow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.zl-overflow-btn:hover,
.zl-overflow-btn[aria-expanded="true"] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

.zl-overflow-menu {
    font-size: var(--text-sm);
    min-width: 180px;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.zl-overflow-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: background 0.1s, color 0.1s;
}

.zl-overflow-menu .dropdown-item:hover,
.zl-overflow-menu .dropdown-item:focus {
    background: var(--primary-subtle);
    color: var(--primary);
}

/* Both the `.disabled` class and the `disabled` attribute — a
   <button class="dropdown-item" disabled> was only styled by the former, so
   unavailable actions rendered at full opacity and looked clickable (#496). */
.zl-overflow-menu .dropdown-item.disabled,
.zl-overflow-menu .dropdown-item:disabled {
    color: var(--text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* keep the title tooltip reachable */
}

.zl-overflow-menu .dropdown-item.disabled:hover,
.zl-overflow-menu .dropdown-item.disabled:focus,
.zl-overflow-menu .dropdown-item:disabled:hover,
.zl-overflow-menu .dropdown-item:disabled:focus {
    background: transparent;
    color: var(--text-secondary);
}

.zl-overflow-menu .dropdown-item--danger {
    color: var(--danger);
}

.zl-overflow-menu .dropdown-item--danger:hover {
    background: rgba(190, 75, 68, 0.08);
    color: var(--danger);
}

[data-bs-theme="dark"] .zl-overflow-menu .dropdown-item--danger:hover {
    background: rgba(212, 118, 110, 0.12);
}

.zl-overflow-menu .dropdown-divider {
    border-color: var(--border);
    margin: 0.25rem 0;
}

/* Dropdown overflow inside table-responsive is fixed via
   dropdown-fix.js (Popper strategy: 'fixed'). */

/* ============================================================
   Empty State (legacy)
   ============================================================ */
.zl-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.zl-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

/* ============================================================
   Empty State (enhanced with CTA)
   ============================================================ */
.zl-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.zl-empty-state-icon {
    margin-bottom: 1rem;
    opacity: 0.3;
    color: var(--text-secondary);
}

.zl-empty-state-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.zl-empty-state-description {
    font-size: var(--text-md);
    max-width: 400px;
    margin: 0 auto 1.5rem;
    color: var(--text-secondary);
}

.copy-flash {
    animation: copy-flash 0.4s ease-out;
}

@keyframes copy-flash {
    0%   { background-color: var(--primary-subtle); }
    100% { background-color: transparent; }
}

/* ============================================================
   Reusable Component Dark Theme Overrides
   ============================================================ */
[data-bs-theme="dark"] .zl-overflow-menu {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

[data-bs-theme="dark"] .zl-action-btn:hover {
    background: var(--primary-subtle);
}

[data-bs-theme="dark"] .zl-icon-btn:hover {
    background: var(--primary-subtle);
}

/* ============================================================
   Reusable Component Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .zl-action-btn span {
        display: none;
    }

    .zl-action-btn {
        padding: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .zl-table {
        font-size: var(--text-sm);
    }

    .zl-actions {
        gap: 0.25rem;
    }
}

/* ============================================================
   Transfer Wizard
   ============================================================ */

/* ── Stepper ── */
.tw-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.tw-step {
    display: flex;
    align-items: flex-start;
}

.tw-step-dot {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.tw-step-dot--pending {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.tw-step-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-align: center;
    white-space: nowrap;
}

.tw-step-label--active {
    font-weight: 600;
    color: var(--text-primary);
}

.tw-step-line {
    width: 40px;
    height: 2px;
    /* Anchor the connector to the vertical centre of the 28px dot
       (14px) regardless of the label height below it, so the line always
       lines up with the dots instead of drifting (#496). */
    margin: 13px 0.5rem 0;
    background: var(--border);
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.tw-step-line--completed {
    background: var(--success);
}

/* ── Direction Selector ── */
.tw-direction-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.tw-direction-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.tw-direction-option:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.tw-direction-option i {
    font-size: 1.25rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.tw-direction-option:hover i {
    color: var(--primary);
}

.tw-direction-label {
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-primary);
}

.tw-direction-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Step Navigation ── */
.tw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* ── Step Title ── */
.tw-step-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
    .tw-direction-options {
        grid-template-columns: 1fr;
    }

    .tw-step-label {
        font-size: var(--text-2xs);
    }

    .tw-step-line {
        width: 24px;
        margin: 13px 0.25rem 0;
    }
}

/* ── Status Icons (checkout success/failure states) ── */
.tw-status-icon {
    font-size: 3rem;
}

.tw-status-spinner {
    width: 3rem;
    height: 3rem;
}