/* ═══════════════════════════════════════════════════════════════
   portal.sublimeip.com — Sublime IP Customer Portal
   Multi-theme support with CSS custom properties
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ───────────────────────────────────────────── */

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

/* ── Shared variables (fonts, radii) — apply to all themes ── */

:root {
    --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:'Space Grotesk', 'Inter', sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --radius:      6px;
    --radius-lg:   10px;
}

/* ── Theme: Amethyst (default purple) ─────────────────────── */

[data-theme="amethyst"] {
    --bg:          #f6f5f9;
    --bg-card:     #ffffff;
    --bg-nav:      #1e1533;
    --bg-nav-hi:   rgba(255,255,255,.07);
    --bg-input:    #ffffff;
    --bg-hover:    #f2f0f7;
    --bg-table-hd: #f8f6fc;
    --bg-code:     #edeaf3;

    --text:        #1c1630;
    --text-muted:  #706882;
    --text-inv:    #eae6f4;

    --border:      #ddd8e8;
    --border-focus:#7c3aed;

    --accent:      #7c3aed;
    --accent-hover:#6d28d9;
    --accent-light:rgba(124,58,237,.08);
    --accent-ring: rgba(124,58,237,.18);

    --nav-link:    rgba(234,230,244,.55);
    --nav-link-hi: rgba(234,230,244,.9);
    --nav-active-border: #10b981;
    --nav-hover-border:  rgba(124,58,237,.4);

    --green:       #059669;
    --green-light: #10b981;
    --green-bg:    #d1fae5;
    --yellow:      #b45309;
    --yellow-bg:   #fef3c7;
    --red:         #dc2626;
    --red-bg:      #fee2e2;
    --blue:        #4f46e5;
    --blue-bg:     #e0e7ff;

    --shadow-sm:   0 1px 2px rgba(30,21,51,.06);
    --shadow:      0 1px 3px rgba(30,21,51,.08), 0 1px 2px rgba(30,21,51,.04);
    --shadow-lg:   0 4px 16px rgba(30,21,51,.12);

    --badge-muted-bg: #edeaf3;
}

/* ── Theme: Emerald (green) ───────────────────────────────── */

[data-theme="emerald"] {
    --bg:          #cdc9b1;
    --bg-card:     #dddacc;
    --bg-nav:      #2a2b26;
    --bg-nav-hi:   rgba(197,201,100,.1);
    --bg-input:    #e8e5d8;
    --bg-hover:    #c3c0a8;
    --bg-table-hd: #c3c0a8;
    --bg-code:     #c5c964;

    --text:        #2a2b26;
    --text-muted:  #6b6b56;
    --text-inv:    #ede4c4;

    --border:      #b3b89a;
    --border-focus:#7a8a2e;

    --accent:      #6b7b1e;
    --accent-hover:#545f18;
    --accent-light:rgba(107,123,30,.1);
    --accent-ring: rgba(107,123,30,.2);

    --nav-link:    rgba(237,228,196,.5);
    --nav-link-hi: rgba(237,228,196,.9);
    --nav-active-border: #c5c964;
    --nav-hover-border:  rgba(179,184,138,.5);

    --green:       #6b7b1e;
    --green-light: #8a9a30;
    --green-bg:    #c3d4a9;
    --yellow:      #8a7020;
    --yellow-bg:   #ede4c4;
    --red:         #c53030;
    --red-bg:      #e8c0c0;
    --blue:        #4f46e5;
    --blue-bg:     #d5d2ee;

    --shadow-sm:   0 1px 2px rgba(42,43,38,.08);
    --shadow:      0 1px 3px rgba(42,43,38,.1), 0 1px 2px rgba(42,43,38,.06);
    --shadow-lg:   0 4px 16px rgba(42,43,38,.14);

    --badge-muted-bg: #c3c0a8;
}

/* Wasabi burn accents — just a hint of red heat */
[data-theme="emerald"] .nav-links a.active {
    border-bottom-color: #fc035e;
}
[data-theme="emerald"] .user-badge {
    border-color: rgba(197,48,48,.15) !important;
}
[data-theme="emerald"] .user-badge:hover {
    border-color: rgba(197,48,48,.3) !important;
}

/* ── Theme: Slate (neutral professional) ──────────────────── */

[data-theme="slate"] {
    --bg:          #f8fafc;
    --bg-card:     #ffffff;
    --bg-nav:      #0f172a;
    --bg-nav-hi:   rgba(255,255,255,.06);
    --bg-input:    #ffffff;
    --bg-hover:    #f1f5f9;
    --bg-table-hd: #f8fafc;
    --bg-code:     #e2e8f0;

    --text:        #0f172a;
    --text-muted:  #64748b;
    --text-inv:    #cbd5e1;

    --border:      #e2e8f0;
    --border-focus:#3b82f6;

    --accent:      #3b82f6;
    --accent-hover:#2563eb;
    --accent-light:rgba(59,130,246,.06);
    --accent-ring: rgba(59,130,246,.18);

    --nav-link:    rgba(203,213,225,.55);
    --nav-link-hi: rgba(203,213,225,.9);
    --nav-active-border: #3b82f6;
    --nav-hover-border:  rgba(59,130,246,.4);

    --green:       #059669;
    --green-light: #10b981;
    --green-bg:    #d1fae5;
    --yellow:      #b45309;
    --yellow-bg:   #fef3c7;
    --red:         #dc2626;
    --red-bg:      #fee2e2;
    --blue:        #4f46e5;
    --blue-bg:     #e0e7ff;

    --shadow-sm:   0 1px 2px rgba(15,23,42,.05);
    --shadow:      0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --shadow-lg:   0 4px 16px rgba(15,23,42,.1);

    --badge-muted-bg: #e2e8f0;
}

/* ── Theme: Foundry (Palantir-style dark) ─────────────────── */

[data-theme="foundry"] {
    --bg:          #111317;
    --bg-card:     #1a1d23;
    --bg-nav:      #0d0f12;
    --bg-nav-hi:   rgba(255,255,255,.05);
    --bg-input:    #1e2128;
    --bg-hover:    #22262e;
    --bg-table-hd: #1e2128;
    --bg-code:     #22262e;

    --text:        #c8cdd5;
    --text-muted:  #7a8290;
    --text-inv:    #c8cdd5;

    --border:      #2d323b;
    --border-focus:#3b82f6;

    --accent:      #3b82f6;
    --accent-hover:#60a5fa;
    --accent-light:rgba(59,130,246,.1);
    --accent-ring: rgba(59,130,246,.25);

    --nav-link:    rgba(200,205,213,.4);
    --nav-link-hi: rgba(200,205,213,.85);
    --nav-active-border: #3b82f6;
    --nav-hover-border:  rgba(59,130,246,.4);

    --green:       #34d399;
    --green-light: #6ee7b7;
    --green-bg:    rgba(52,211,153,.12);
    --yellow:      #fbbf24;
    --yellow-bg:   rgba(251,191,36,.12);
    --red:         #f87171;
    --red-bg:      rgba(248,113,113,.12);
    --blue:        #818cf8;
    --blue-bg:     rgba(129,140,248,.12);

    --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
    --shadow:      0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25);
    --shadow-lg:   0 4px 16px rgba(0,0,0,.5);

    --badge-muted-bg: #2d323b;
}

/* ── Theme: Obsidian (deep purple dark) ───────────────────── */

[data-theme="obsidian"] {
    --bg:          #0f0a1a;
    --bg-card:     #171023;
    --bg-nav:      #0a0612;
    --bg-nav-hi:   rgba(255,255,255,.05);
    --bg-input:    #1c1430;
    --bg-hover:    #201838;
    --bg-table-hd: #1c1430;
    --bg-code:     #201838;

    --text:        #d0c8e4;
    --text-muted:  #8878a8;
    --text-inv:    #d0c8e4;

    --border:      #2e2548;
    --border-focus:#a78bfa;

    --accent:      #a78bfa;
    --accent-hover:#c4b5fd;
    --accent-light:rgba(167,139,250,.1);
    --accent-ring: rgba(167,139,250,.25);

    --nav-link:    rgba(208,200,228,.4);
    --nav-link-hi: rgba(208,200,228,.85);
    --nav-active-border: #a78bfa;
    --nav-hover-border:  rgba(167,139,250,.4);

    --green:       #34d399;
    --green-light: #6ee7b7;
    --green-bg:    rgba(52,211,153,.12);
    --yellow:      #fbbf24;
    --yellow-bg:   rgba(251,191,36,.12);
    --red:         #f87171;
    --red-bg:      rgba(248,113,113,.12);
    --blue:        #818cf8;
    --blue-bg:     rgba(129,140,248,.12);

    --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
    --shadow:      0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:   0 4px 16px rgba(0,0,0,.6);

    --badge-muted-bg: #2e2548;
}

/* ── Theme: Venom (dark lime/green) ─────────────────────────── */

[data-theme="venom"] {
    --bg:          #0a0f0a;
    --bg-card:     #111a11;
    --bg-nav:      #060b06;
    --bg-nav-hi:   rgba(180,220,80,.06);
    --bg-input:    #162016;
    --bg-hover:    #1a261a;
    --bg-table-hd: #162016;
    --bg-code:     #1a261a;

    --text:        #c8d8c0;
    --text-muted:  #7a9470;
    --text-inv:    #c8d8c0;

    --border:      #243024;
    --border-focus:#84cc16;

    --accent:      #84cc16;
    --accent-hover:#a3e635;
    --accent-light:rgba(132,204,22,.1);
    --accent-ring: rgba(132,204,22,.2);

    --nav-link:    rgba(200,216,192,.4);
    --nav-link-hi: rgba(200,216,192,.85);
    --nav-active-border: #84cc16;
    --nav-hover-border:  rgba(132,204,22,.35);

    --green:       #4ade80;
    --green-light: #86efac;
    --green-bg:    rgba(74,222,128,.12);
    --yellow:      #facc15;
    --yellow-bg:   rgba(250,204,21,.12);
    --red:         #f87171;
    --red-bg:      rgba(248,113,113,.12);
    --blue:        #67e8f9;
    --blue-bg:     rgba(103,232,249,.1);

    --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
    --shadow:      0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
    --shadow-lg:   0 4px 16px rgba(0,0,0,.65);

    --badge-muted-bg: #243024;
}

/* ═══════════════════════════════════════════════════════════════
   Component styles (theme-aware via variables)
   ═══════════════════════════════════════════════════════════════ */

html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
}
h1 { font-size: 1.7rem; margin-bottom: .3rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

code, .mono { font-family: var(--font-mono); font-size: 0.875em; }
.muted { color: var(--text-muted); }

/* ── Layout ─────────────────────────────────────────────────── */

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

main.container {
    flex: 1;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* ── Navigation ─────────────────────────────────────────────── */

.topnav {
    background: var(--bg-nav);
    color: var(--text-inv);
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-brand {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    margin-right: 2rem;
    letter-spacing: .01em;
}
.nav-brand:hover { color: #fff; }

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    border-radius: 6px;
    letter-spacing: 0;
}

.nav-links {
    display: flex;
    gap: 1px;
    flex: 1;
    height: 100%;
    align-items: stretch;
}

.nav-links a {
    display: flex;
    align-items: center;
    color: var(--nav-link);
    padding: 0 .9rem;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .01em;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .2s;
}
.nav-links a:hover {
    color: var(--nav-link-hi);
    border-bottom-color: var(--nav-hover-border);
}
.nav-links a.active {
    color: #fff;
    border-bottom-color: var(--nav-active-border);
}

/* ── Nav User Dropdown ─────────────────────────────────────── */

.nav-user {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 100%;
}

.user-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 500;
    font-family: var(--font);
    padding: .35rem .75rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: rgba(234,230,244,.85);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.user-badge:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}

.caret {
    font-size: .6em;
    opacity: .5;
    transition: transform .15s;
}
.user-dropdown.open .caret { transform: rotate(180deg); opacity: .8; }

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: .4rem 0;
    z-index: 200;
    animation: dropIn .12s ease-out;
}
.user-dropdown.open .dropdown-menu { display: block; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    font-size: .84rem;
    color: var(--text);
    transition: background .1s;
    font-weight: 400;
}
.dropdown-menu a:hover { background: var(--bg-hover); color: var(--text); }
.dropdown-menu a strong { font-weight: 600; color: var(--accent); }

.menu-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: .55;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: .3rem .75rem;
}

/* ── Theme Picker ──────────────────────────────────────────── */

.dropdown-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: .45rem 1rem .2rem;
}

.theme-picker {
    display: flex;
    gap: .35rem;
    padding: .3rem 1rem .5rem;
}

.theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    position: relative;
}
.theme-dot:hover {
    transform: scale(1.15);
    border-color: var(--accent);
}
.theme-dot.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.theme-dot.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.dot-amethyst  { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.dot-emerald   { background: linear-gradient(135deg, #b3b88a, #c5c964 70%, #c53030 100%); }
.dot-slate     { background: linear-gradient(135deg, #3b82f6, #64748b); }
.dot-foundry   { background: linear-gradient(135deg, #1a1d23, #3b82f6); }
.dot-obsidian  { background: linear-gradient(135deg, #171023, #a78bfa); }
.dot-venom     { background: linear-gradient(135deg, #0a0f0a, #84cc16); }

/* ── Page Header ────────────────────────────────────────────── */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.back-link {
    font-size: .84rem;
    color: var(--text-muted);
    display: inline-block;
    margin-bottom: .25rem;
    transition: color .15s;
}
.back-link:hover { color: var(--accent); }

.zone-subtitle { color: var(--text-muted); margin-top: .15rem; }

/* ── Zone Meta ──────────────────────────────────────────────── */

.zone-meta {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.meta-item {
    font-size: .78rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .2rem .7rem;
}
.meta-item.never { color: var(--yellow); }

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1.1rem;
    font-size: .84rem;
    font-weight: 500;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); color: var(--text); }

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

.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent-light); color: var(--accent); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger-ghost { border-color: transparent; background: transparent; color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-bg); }

.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-xs { padding: .15rem .5rem; font-size: .75rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Badges ─────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge-warning { background: var(--yellow-bg); color: var(--yellow); }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-info    { background: var(--blue-bg); color: var(--blue); }
.badge-muted   { background: var(--badge-muted-bg); color: var(--text-muted); }

/* ── Dashboard Cards ────────────────────────────────────────── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.zone-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: box-shadow .2s, border-color .2s;
    text-decoration: none;
    color: var(--text);
}
.zone-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
    color: var(--text);
}

.zone-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zone-card-header h2 { font-size: 1.05rem; font-weight: 600; font-family: var(--font); }

.record-count {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.zone-desc { font-size: .84rem; color: var(--text-muted); }

.zone-card-footer { margin-top: auto; }

.sync-time { font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); }
.sync-time.never { color: var(--yellow); }

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty-state code {
    background: var(--bg-code);
    padding: .15rem .4rem;
    border-radius: 3px;
}

/* ── Tables ─────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table th {
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: .6rem .85rem;
    border-bottom: 2px solid var(--border);
    background: var(--bg-table-hd);
}

.table td {
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-hover); }

.table-compact th { padding: .45rem .7rem; }
.table-compact td { padding: .35rem .7rem; font-size: .8rem; }

.cell-name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-rdata { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-actions { white-space: nowrap; }
.cell-actions .inline-form { display: inline; }

.btn-icon { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.action-icon { width: 14px; height: 14px; min-width: 14px; min-height: 14px; flex-shrink: 0; display: inline-block; }

/* ── Pagination ───────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 .5rem;
    gap: 1rem;
}
.pagination-info {
    font-size: .82rem;
    color: var(--text-muted);
}
.pagination-links {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: var(--radius);
    font-size: .82rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all .15s;
}
a.page-num:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.page-num.active {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2rem;
    font-size: .82rem;
    color: var(--text-muted);
    opacity: .5;
}
.btn-danger-ghost .action-icon { opacity: .7; }
.btn-danger-ghost:hover .action-icon { opacity: 1; }
.detail-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.empty-cell { text-align: center; color: var(--text-muted); padding: 2rem !important; }

.inline-form { display: inline; }

.row-pending td { background: rgba(254,243,199,.2); }

/* ── Record Type Badges ─────────────────────────────────────── */

.rdtype-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .02em;
    background: var(--badge-muted-bg);
    color: var(--text-muted);
}
.rdtype-A      { background: #e0e7ff; color: #3730a3; }
.rdtype-AAAA   { background: #e0e7ff; color: #3730a3; }
.rdtype-CNAME  { background: var(--green-bg); color: var(--green); }
.rdtype-MX     { background: #fce7f3; color: #9d174d; }
.rdtype-TXT    { background: var(--yellow-bg); color: var(--yellow); }
.rdtype-NS     { background: #ede9fe; color: #5b21b6; }
.rdtype-SRV    { background: #fae8ff; color: #7e22ce; }
.rdtype-CAA    { background: #f1f5f9; color: #475569; }
.rdtype-SOA    { background: #f1f5f9; color: #475569; }
.rdtype-PTR    { background: #ecfdf5; color: #065f46; }

/* Dark themes: lighten rdtype badges */
[data-theme="foundry"] .rdtype-A,
[data-theme="foundry"] .rdtype-AAAA   { background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-theme="foundry"] .rdtype-CNAME  { background: rgba(52,211,153,.12); color: #6ee7b7; }
[data-theme="foundry"] .rdtype-MX     { background: rgba(244,114,182,.12); color: #f9a8d4; }
[data-theme="foundry"] .rdtype-TXT    { background: rgba(251,191,36,.12); color: #fcd34d; }
[data-theme="foundry"] .rdtype-NS     { background: rgba(139,92,246,.12); color: #c4b5fd; }
[data-theme="foundry"] .rdtype-SRV    { background: rgba(192,132,252,.12); color: #d8b4fe; }
[data-theme="foundry"] .rdtype-CAA    { background: rgba(148,163,184,.1); color: #94a3b8; }
[data-theme="foundry"] .rdtype-SOA    { background: rgba(148,163,184,.1); color: #94a3b8; }
[data-theme="foundry"] .rdtype-PTR    { background: rgba(52,211,153,.1); color: #6ee7b7; }

[data-theme="obsidian"] .rdtype-A,
[data-theme="obsidian"] .rdtype-AAAA   { background: rgba(129,140,248,.12); color: #a5b4fc; }
[data-theme="obsidian"] .rdtype-CNAME  { background: rgba(52,211,153,.12); color: #6ee7b7; }
[data-theme="obsidian"] .rdtype-MX     { background: rgba(244,114,182,.12); color: #f9a8d4; }
[data-theme="obsidian"] .rdtype-TXT    { background: rgba(251,191,36,.12); color: #fcd34d; }
[data-theme="obsidian"] .rdtype-NS     { background: rgba(167,139,250,.12); color: #c4b5fd; }
[data-theme="obsidian"] .rdtype-SRV    { background: rgba(192,132,252,.12); color: #d8b4fe; }
[data-theme="obsidian"] .rdtype-CAA    { background: rgba(148,163,184,.1); color: #94a3b8; }
[data-theme="obsidian"] .rdtype-SOA    { background: rgba(148,163,184,.1); color: #94a3b8; }
[data-theme="obsidian"] .rdtype-PTR    { background: rgba(52,211,153,.1); color: #6ee7b7; }

[data-theme="venom"] .rdtype-A,
[data-theme="venom"] .rdtype-AAAA   { background: rgba(132,204,22,.1); color: #bef264; }
[data-theme="venom"] .rdtype-CNAME  { background: rgba(74,222,128,.1); color: #86efac; }
[data-theme="venom"] .rdtype-MX     { background: rgba(244,114,182,.1); color: #f9a8d4; }
[data-theme="venom"] .rdtype-TXT    { background: rgba(250,204,21,.1); color: #fde047; }
[data-theme="venom"] .rdtype-NS     { background: rgba(103,232,249,.1); color: #67e8f9; }
[data-theme="venom"] .rdtype-SRV    { background: rgba(132,204,22,.08); color: #a3e635; }
[data-theme="venom"] .rdtype-CAA    { background: rgba(148,163,184,.08); color: #94a3b8; }
[data-theme="venom"] .rdtype-SOA    { background: rgba(148,163,184,.08); color: #94a3b8; }
[data-theme="venom"] .rdtype-PTR    { background: rgba(74,222,128,.08); color: #86efac; }

/* ── Sync Badges ────────────────────────────────────────────── */

.sync-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.sync-pending_add, .sync-add    { background: var(--green-bg); color: var(--green); }
.sync-pending_update, .sync-update { background: var(--blue-bg); color: var(--blue); }
.sync-pending_delete, .sync-delete { background: var(--red-bg); color: var(--red); }

/* ── Action Badges (audit log) ──────────────────────────────── */

.action-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 4px;
    text-transform: uppercase;
    background: var(--badge-muted-bg);
    color: var(--text-muted);
}
.action-create    { background: var(--green-bg); color: var(--green); }
.action-update    { background: var(--blue-bg); color: var(--blue); }
.action-delete    { background: var(--red-bg); color: var(--red); }
.action-sync_push { background: #ede9fe; color: #5b21b6; }
.action-sync_pull { background: #fae8ff; color: #7e22ce; }

[data-theme="foundry"] .action-sync_push { background: rgba(139,92,246,.12); color: #c4b5fd; }
[data-theme="foundry"] .action-sync_pull { background: rgba(192,132,252,.12); color: #d8b4fe; }
[data-theme="obsidian"] .action-sync_push { background: rgba(167,139,250,.12); color: #c4b5fd; }
[data-theme="obsidian"] .action-sync_pull { background: rgba(192,132,252,.12); color: #d8b4fe; }

[data-theme="venom"] .action-sync_push { background: rgba(132,204,22,.1); color: #bef264; }
[data-theme="venom"] .action-sync_pull { background: rgba(74,222,128,.1); color: #86efac; }

/* ── Filter Bar ─────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.search-form {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.input-search {
    flex: 1;
    max-width: 320px;
    padding: .42rem .75rem;
    font-size: .84rem;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input-search:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.type-filters {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.type-pill {
    padding: .22rem .6rem;
    font-size: .76rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--bg-card);
    transition: all .15s;
}
.type-pill:hover { border-color: var(--accent); color: var(--accent); }
.type-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill-count { font-size: .68rem; opacity: .65; }

/* ── Forms ───────────────────────────────────────────────────── */

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    max-width: 600px;
    box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--text);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="email"],
.field input[type="date"],
.field select {
    width: 100%;
    padding: .52rem .75rem;
    font-size: .88rem;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.field-hint { font-size: .76rem; color: var(--text-muted); margin-top: .25rem; }
.field-static { padding: .52rem 0; font-size: .88rem; color: var(--text-muted); }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
}

.record-form select { appearance: auto; }

/* ── Auth (Login) ───────────────────────────────────────────── */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-header h1 { font-size: 1.35rem; font-weight: 700; margin-top: .5rem; }
.auth-subtitle { color: var(--text-muted); font-size: .88rem; }

.auth-form .field { margin-bottom: 1.25rem; }

/* ── TOTP Setup ─────────────────────────────────────────────── */

.totp-card { max-width: 560px; }

.totp-steps {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.totp-step {
    display: flex;
    gap: 1rem;
}

.step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 50%;
}

.totp-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.totp-step p { font-size: .84rem; color: var(--text-muted); }

.qr-container {
    margin: 1rem 0;
    display: inline-block;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.totp-secret-display { margin: .75rem 0; }

.totp-key {
    font-size: 1rem;
    padding: .5rem .85rem;
    background: var(--bg-code);
    border-radius: var(--radius);
    user-select: all;
    letter-spacing: .05em;
}

.input-totp {
    max-width: 180px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .15em;
}

.totp-verify-form { margin-top: .75rem; }
.totp-verify-form .field { margin-bottom: .75rem; }

/* ── Sync Section ───────────────────────────────────────────── */

.sync-section { max-width: 900px; }

.sync-changeset {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.sync-changeset h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .3rem; }

.sync-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

.sync-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.sync-pull-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.sync-pull-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .3rem; }

/* ── Audit Section ──────────────────────────────────────────── */

.audit-section { margin-top: 2.5rem; }
.audit-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .75rem; }

/* ── Flash Messages ─────────────────────────────────────────── */

.flash-messages { margin-bottom: 1rem; }

.flash {
    padding: .6rem 1rem;
    border-radius: var(--radius);
    font-size: .84rem;
    margin-bottom: .5rem;
    border: 1px solid;
}
.flash-success { background: var(--green-bg); color: var(--green); border-color: #a7f3d0; }
.flash-error   { background: var(--red-bg); color: var(--red); border-color: #fecaca; }
.flash-warning { background: var(--yellow-bg); color: var(--yellow); border-color: #fde68a; }
.flash-info    { background: var(--blue-bg); color: var(--blue); border-color: #c7d2fe; }

/* Dark theme flash border adjustments */
[data-theme="foundry"] .flash-success { border-color: rgba(52,211,153,.2); }
[data-theme="foundry"] .flash-error   { border-color: rgba(248,113,113,.2); }
[data-theme="foundry"] .flash-warning { border-color: rgba(251,191,36,.2); }
[data-theme="foundry"] .flash-info    { border-color: rgba(129,140,248,.2); }
[data-theme="obsidian"] .flash-success { border-color: rgba(52,211,153,.2); }
[data-theme="obsidian"] .flash-error   { border-color: rgba(248,113,113,.2); }
[data-theme="obsidian"] .flash-warning { border-color: rgba(251,191,36,.2); }
[data-theme="obsidian"] .flash-info    { border-color: rgba(129,140,248,.2); }

[data-theme="venom"] .flash-success { border-color: rgba(74,222,128,.2); }
[data-theme="venom"] .flash-error   { border-color: rgba(248,113,113,.2); }
[data-theme="venom"] .flash-warning { border-color: rgba(250,204,21,.2); }
[data-theme="venom"] .flash-info    { border-color: rgba(132,204,22,.2); }

/* ── Profile ───────────────────────────────────────────────── */

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 780px;
}
.profile-panel {
    padding: 1.25rem 1.5rem;
}
.profile-panel-wide {
    grid-column: 1 / -1;
}
.profile-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.profile-fields {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.profile-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.profile-field-label {
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    opacity: .7;
}
.profile-field-value {
    font-size: .95rem;
    color: var(--text);
    min-height: 1.6em;
}
.profile-field-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.profile-input {
    width: 100%;
    font-family: var(--font);
    font-size: .9rem;
    padding: .35rem .55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.profile-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
@media (max-width: 640px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-field-trio { grid-template-columns: 1fr; }
}

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.site-footer .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    width: 100%;
    padding: 0;
}

.footer-text {
    font-size: .76rem;
    color: var(--text-muted);
    opacity: .45;
}

.footer-tagline {
    font-family: var(--font-heading);
    font-size: .76rem;
    color: var(--text-muted);
    opacity: .35;
    letter-spacing: .04em;
}

/* ── Invoice Detail ──────────────────────────────────────────── */

.invoice-meta {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem 1.5rem;
}

.meta-pair { display: flex; flex-direction: column; gap: .15rem; }
.meta-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.meta-value { font-size: .88rem; }

.invoice-items-section {
    margin-bottom: 1.5rem;
}
.invoice-items-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .75rem; }

.table tfoot td {
    padding: .5rem .85rem;
    border-bottom: none;
    border-top: 1px solid var(--border);
}

.add-item-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}
.add-item-form h3 { font-size: .88rem; font-weight: 600; margin-bottom: .6rem; }

.item-row-form {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}
.item-row-form .field { margin-bottom: 0; }
.item-row-form input {
    width: 100%;
    padding: .4rem .6rem;
    font-size: .84rem;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    outline: none;
}
.item-row-form input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.invoice-status-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.invoice-status-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }

.status-form {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.status-select {
    padding: .4rem .6rem;
    font-size: .84rem;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
    outline: none;
    appearance: auto;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    .nav-inner { padding: 0 1rem; }
    .nav-brand { margin-right: 1rem; }
    .nav-links a { padding: 0 .55rem; font-size: .78rem; }
    .page-header { flex-direction: column; }
    .header-actions { width: 100%; }
    .field-row { grid-template-columns: 1fr; gap: .5rem; }
    .card-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 2rem 1.25rem; }
    .form-card { padding: 1.25rem; }
    .dropdown-menu { min-width: 170px; }
}

/* ── Smooth theme transitions ───────────────────────────────── */

body, .topnav, .btn, .btn-primary, .form-card, .zone-card,
.table, .table th, .table td, .auth-card, .badge,
.flash, .site-footer, .dropdown-menu, .meta-item,
.sync-changeset, .sync-empty, .sync-pull-section,
.invoice-meta, .add-item-form, .invoice-status-section,
.input-search, .type-pill {
    transition: background-color .2s, color .2s, border-color .2s;
}