/* ── Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* ── Design tokens — dark (default) ─────────────────────────── */
/*
   Neutrals are tinted toward hue 42 (the brand orange), chroma 0.006–0.012.
   This creates perceptual warmth without visible color — surfaces feel
   intentional rather than lifted from a generic dark-mode template.
   All colors in OKLCH for perceptual uniformity.
*/
:root {
    /* Surfaces */
    --bg:       oklch(0.115 0.008 42);
    --card:     oklch(0.155 0.008 42);
    --card2:    oklch(0.185 0.008 42);
    --overlay:  oklch(0.08 0 0 / 0.70);

    /* Borders */
    --border:   oklch(0.30 0.010 42);
    --border-l: oklch(0.37 0.012 42);

    /* Text */
    --text:     oklch(0.92 0.006 42);
    --muted:    oklch(0.62 0.009 42);
    --dim:      oklch(0.49 0.009 42);

    /* Accent — orange */
    --accent:   oklch(0.70 0.21 42);
    --accent-h: oklch(0.64 0.21 42);

    /* Semantic — operational (green), fault (red), info (blue), attention (yellow) */
    --green:     oklch(0.72 0.175 145);
    --green-bg:  oklch(0.24 0.055 145);
    --red:       oklch(0.64 0.215 25);
    --red-bg:    oklch(0.22 0.060 25);
    --blue:      oklch(0.70 0.145 245);
    --blue-bg:   oklch(0.24 0.055 245);
    --yellow:    oklch(0.78 0.135 85);
    --yellow-bg: oklch(0.23 0.045 85);

    /* Geometry */
    --radius:    8px;
    --radius-s:  5px;
    --sidebar-w: 220px;
    --sidebar-c: 60px;

    /* Spacing — 4pt scale */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Typography */
    --font-body:    'Manrope', system-ui, sans-serif;
    --font-display: 'Barlow Condensed', system-ui, sans-serif;
}

/* ── Light mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:        oklch(0.97 0.004 42);
        --card:      oklch(0.995 0.002 42);
        --card2:     oklch(0.96 0.004 42);
        --overlay:   oklch(0.10 0 0 / 0.50);
        --border:    oklch(0.87 0.007 42);
        --border-l:  oklch(0.81 0.009 42);
        --text:      oklch(0.18 0.012 42);
        --muted:     oklch(0.46 0.012 42);
        --dim:       oklch(0.58 0.010 42);
        --green-bg:  oklch(0.92 0.055 145);
        --red-bg:    oklch(0.93 0.040 25);
        --blue-bg:   oklch(0.93 0.040 245);
        --yellow-bg: oklch(0.93 0.040 85);
    }
}

[data-theme="light"] {
    --bg:        oklch(0.97 0.004 42);
    --card:      oklch(0.995 0.002 42);
    --card2:     oklch(0.96 0.004 42);
    --overlay:   oklch(0.10 0 0 / 0.50);
    --border:    oklch(0.87 0.007 42);
    --border-l:  oklch(0.81 0.009 42);
    --text:      oklch(0.18 0.012 42);
    --muted:     oklch(0.46 0.012 42);
    --dim:       oklch(0.58 0.010 42);
    --green-bg:  oklch(0.92 0.055 145);
    --red-bg:    oklch(0.93 0.040 25);
    --blue-bg:   oklch(0.93 0.040 245);
    --yellow-bg: oklch(0.93 0.040 85);
}

/* ── Scrollbars ──────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-l) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-l); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    /* +0.1 line-height for light text on dark: keeps reading comfortable */
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display font — applied to structural headings, not all h* */
.brand-text,
.mobile-title,
.section-title,
.page-header h1,
.modal-header h2,
.card-title {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

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

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge-green  { background: var(--green-bg);  color: var(--green);  }
.badge-red    { background: var(--red-bg);    color: var(--red);    }
.badge-blue   { background: var(--blue-bg);   color: var(--blue);   }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-muted  { background: var(--card2);     color: var(--muted);  }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-s);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    transition: background 0.10s, color 0.10s, border-color 0.10s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Focus-visible: explicit keyboard focus ring, compliant with WCAG 2.4.7 */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary         { background: var(--accent);  color: oklch(0.99 0 0); }
.btn-primary:hover   { background: var(--accent-h); }
.btn-primary:active  { background: oklch(0.60 0.21 42); }

.btn-secondary       { background: var(--card2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-l); }
.btn-secondary:active { background: var(--bg); }

.btn-ghost           { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover     { color: var(--text); border-color: var(--border-l); }
.btn-ghost:active    { background: oklch(0.70 0.21 42 / 0.07); }

.btn-danger          { background: var(--red-bg); color: var(--red); border: 1px solid transparent; }
.btn-danger:hover    { background: var(--red); color: oklch(0.99 0 0); }
.btn-danger:active   { background: oklch(0.58 0.215 25); color: oklch(0.99 0 0); }

.btn-danger-hover:hover { color: var(--red); }

.btn-sm   { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-icon { padding: 0.4rem; justify-content: center; }

/*
   iconify-icon renders as display:inline by default. Inside a flex button
   this introduces font-metric descent space, shifting the icon down.
   display:block makes it a proper flex item — parent's align-items:center
   then centers it geometrically.
*/
.btn iconify-icon { display: block; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
}

/* ── Form elements ───────────────────────────────────────────── */
label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--sp-1);
    letter-spacing: 0.02em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.5rem 0.7rem;
    color: var(--text);
    font-size: 0.875rem;
    font-family: var(--font-body);
    transition: border-color 0.10s, box-shadow 0.10s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.70 0.21 42 / 0.16);
}

select option { background: var(--card); color: var(--text); }
textarea { resize: vertical; min-height: 80px; }

.field           { margin-bottom: var(--sp-4); }
.field-hint      { display: block; font-size: 0.75rem; color: var(--dim); margin-top: var(--sp-1); }
.form-group      { margin-bottom: var(--sp-4); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.form-row-check {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    margin-bottom: var(--sp-4);
}

.check-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.check-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ── Shared table ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table thead tr { border-bottom: 1px solid var(--border); }

.table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover         { background: var(--card2); }
.table a                      { color: var(--text); font-weight: 500; }
.table a:hover                { color: var(--accent); }

.td-muted   { color: var(--muted); }
.td-date    { font-size: 0.8rem; color: var(--muted); }
.td-name    { font-weight: 600; }
.td-actions { white-space: nowrap; text-align: right; }

/* ── Modal ───────────────────────────────────────────────────── */
/*
   DataStar controls visibility via style="display:none".
   CSS default must be the VISIBLE state (flex).
*/
.modal-backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .modal-backdrop {
        align-items: flex-start;
        padding: calc(52px + 0.5rem) 0.5rem 0.5rem;
        box-sizing: border-box;
    }

    .modal,
    .modal-wide {
        position: static;
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 52px - 1rem);
    }
}

.modal-wide { max-width: 760px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-header h2 { font-size: 1.1rem; font-weight: 700; }

/* Destructive confirm modals — red title signals irreversibility at a glance */
.modal-confirm .modal-header h2 { color: var(--red); }

.modal form { padding: var(--sp-4) var(--sp-6); }
.modal-form { padding: var(--sp-4) var(--sp-6); }

.modal-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-4);
    color: var(--muted);
}

.empty-state iconify-icon {
    display: block;
    margin: 0 auto var(--sp-4);
    /* Warm accent tint — dim (0.49) is nearly invisible at this size; accent at
       45 % opacity reads as soft orange warmth without fighting the content */
    color: oklch(0.70 0.21 42 / 0.45);
}

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    flex: 1;
    line-height: 1.15;
}

/* ── Touch target enforcement ────────────────────────────────── */
/*
   On touch devices (no hover, coarse pointer) interactive elements
   must meet the 44×44px minimum. We use min-height rather than
   fixed height so content can still expand naturally.
*/
@media (hover: none) and (pointer: coarse) {
    .btn     { min-height: 44px; }
    .btn-sm  { min-height: 38px; } /* small buttons get a slight concession */
    .btn-icon { min-height: 44px; min-width: 44px; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
/*
   Disable non-essential motion for users who've opted out.
   Focus rings and opacity changes are preserved (not layout motion).
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Misc utils ──────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

/* Screen-reader only — visually hidden but announced by assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green  { background: var(--green);  }
.dot-red    { background: var(--red);    }
.dot-yellow { background: var(--yellow); }
.dot-muted  { background: var(--muted);  }

/* ── Mobile responsive tables ──────────────────────────────── */
/*
   Below 600 px the shared .table collapses from a multi-column
   layout into card-style rows:
     • td:first-child and .td-name  → block primary heading
     • .td-muted                    → inline secondary metadata
     • .td-actions                  → absolute right-center of card
   Columns that carry neither class (e.g. badge/icon cells in
   safety checks) stay inline and appear after the muted text.
*/
@media (max-width: 600px) {
    .table-wrap { overflow-x: hidden; }

    .table thead          { display: none; }
    .table,
    .table tbody          { display: block; }

    .table tr {
        position: relative;
        display: block;
        padding: var(--sp-3) var(--sp-4);
        /* Reserve right edge for 2 action icon-buttons (~92 px) */
        padding-right: calc(var(--sp-3) + 96px);
        border-bottom: 1px solid var(--border);
    }

    .table tbody tr:last-child { border-bottom: none; }
    .table tbody tr:hover      { background: var(--card2); }

    /* All cells: strip table layout, flow as inline text by default */
    .table td {
        display: inline;
        padding: 0 2px 0 0;
        border: none;
        font-size: 0.75rem;
        color: var(--muted);
    }

    /* First cell per row — primary identifier (date, name, etc.) */
    .table td:first-child {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        padding: 0;
        margin-bottom: 2px;
    }

    /* Explicit primary cell overrides first-child with same intent */
    .table .td-name {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        padding: 0;
        margin-bottom: 2px;
    }

    /* Secondary text — one field per line so long values (email, address)
       never overflow into the absolutely-positioned action buttons */
    .table .td-muted {
        display: block;
        font-size: 0.75rem;
        color: var(--muted);
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Actions: pinned to right edge, vertically centered in card */
    .table .td-actions {
        position: absolute;
        right: var(--sp-3);
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: var(--sp-1);
        padding: 0;
        white-space: nowrap;
    }
}