/* =========================================
   DASHBOARD DARK THEME (data-theme="dash")
   Base: #090909 background, modern glass cards
   Palette: Neon Yellow (#efff02) + Grays
   ========================================= */

/* Enable dark color-scheme for UA components */
:root,
[data-theme="dash"] {
    color-scheme: dark;
}

/* -------------------------------
   THEME TOKENS
   ------------------------------- */
[data-theme="dash"] {
    /* Background */
    --bg: #090909;
    /* Surfaces */
    --surface-1: #0d0d0d;
    --surface-2: #111111;
    --surface-3: #161616;
    --surface-4: #1b1b1b;
    /* Text colors */
    --text-1: #eef1f4; /* high-emphasis */
    --text-2: #b8bcc4; /* medium */
    --text-3: #8b8f98; /* low */
    /* Lines & separators */
    --border: #ffffff22;
    --border-strong: #ffffff33;
    --muted: #ffffff11;
    --muted-2: #ffffff08;
    /* Brand & states (NO BLUES) */
    --highlight: #efff02; /* neon yellow */
    --highlight-ink: #0b0b0b; /* legible text on neon */
    --primary: var(--highlight); /* global primary -> neon yellow */
    --accent: #9ca3af; /* neutral gray accent */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    /* Radii & shadows */
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 20px;
    --shadow-1: 0 1px 0 #ffffff0d inset, 0 6px 24px #00000066, 0 0 0 1px #ffffff0a inset;
    --shadow-2: 0 2px 0 #ffffff12 inset, 0 12px 30px #00000088, 0 0 0 1px #ffffff14 inset;
    /* Focus ring (neon) */
    --focus: 0 0 0 3px color-mix(in oklch, var(--highlight) 30%, transparent), 0 0 0 1px var(--highlight);
    /* Typography families */
    --font-primary: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-secondary: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    /* Back-compat */
    --font-sans: var(--font-primary);
    /* Type scale (fluid) */
    --fs-display: clamp(34px, 4vw, 48px);
    --fs-h1: clamp(28px, 3vw, 36px);
    --fs-h2: clamp(22px, 2.4vw, 28px);
    --fs-h3: clamp(18px, 2vw, 22px);
    --fs-h4: clamp(16px, 1.7vw, 18px);
    --fs-h5: 15px;
    --fs-h6: 13px;
    --fs-body: 15px;
    --fs-small: 12px;
    /* Line heights */
    --lh-tight: 1.15;
    --lh-snug: 1.25;
    --lh-normal: 1.6;
    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* Legacy tokens mapping */
    --fs-1: var(--fs-h2);
    --fs-2: var(--fs-h4);
    --fs-3: var(--fs-small);
    /* Brand background gloss (neon + neutral) */
    --brand-gradient: radial-gradient(1200px 600px at 10% -10%, color-mix(in oklch, var(--highlight) 8%, transparent) 0%, transparent 60%), radial-gradient(1000px 500px at 95% 0%, color-mix(in oklch, #ffffff 6%, transparent) 0%, transparent 60%);
}

/* Progressive enhancement for better surface tinting */
@supports (color: color-mix(in oklch, #000, #fff)) {
    [data-theme="dash"] {
        --surface-1: color-mix(in oklch, var(--bg) 92%, white);
        --surface-2: color-mix(in oklch, var(--bg) 89%, white);
        --surface-3: color-mix(in oklch, var(--bg) 85%, white);
        --surface-4: color-mix(in oklch, var(--bg) 80%, white);
    }
}

/* -------------------------------
   BASE
   ------------------------------- */
[data-theme="dash"] body,
[data-theme="dash"] .page-wrap {
    background: var(--bg);
    background-image: var(--brand-gradient);
    color: var(--text-1);
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}

/* Paragraphs & small text */
[data-theme="dash"] p {
    margin: 0 0 .9rem 0;
    color: var(--text-2);
    font-size: var(--fs-body);
}

    [data-theme="dash"] p.lead {
        font-size: clamp(16px, 1.8vw, 20px);
        color: var(--text-1);
    }

[data-theme="dash"] small,
[data-theme="dash"] .small {
    font-size: var(--fs-small);
    color: var(--text-3);
}

/* Links (use neon primary) */
[data-theme="dash"] a {
    color: var(--primary);
    text-decoration: none;
}

    [data-theme="dash"] a:hover {
        text-decoration: underline;
    }

/* -------------------------------
   HEADINGS (h1–h6) & UTILITIES
   ------------------------------- */
[data-theme="dash"] h1, [data-theme="dash"] h2, [data-theme="dash"] h3,
[data-theme="dash"] h4, [data-theme="dash"] h5, [data-theme="dash"] h6,
[data-theme="dash"] .h1, [data-theme="dash"] .h2, [data-theme="dash"] .h3,
[data-theme="dash"] .h4, [data-theme="dash"] .h5, [data-theme="dash"] .h6 {
    color: var(--text-1);
    font-family: var(--font-secondary);
    margin: 0 0 .5rem 0;
    letter-spacing: .2px;
    text-wrap: balance;
}

[data-theme="dash"] h1, [data-theme="dash"] .h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
}

[data-theme="dash"] h2, [data-theme="dash"] .h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
}

[data-theme="dash"] h3, [data-theme="dash"] .h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
}

[data-theme="dash"] h4, [data-theme="dash"] .h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    color: var(--text-2);
}

[data-theme="dash"] h5, [data-theme="dash"] .h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-snug);
    font-weight: var(--fw-medium);
    color: var(--text-2);
}

[data-theme="dash"] h6, [data-theme="dash"] .h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-snug);
    font-weight: var(--fw-medium);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Display/hero heading */
[data-theme="dash"] .display-hero {
    font-family: var(--font-secondary);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: .2px;
}

/* Eyebrow (section kicker) */
[data-theme="dash"] .eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font-secondary);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .18em;
}

/* Muted text utility */
[data-theme="dash"] .text-muted {
    color: var(--text-3) !important;
}

/* Font utilities */
[data-theme="dash"] .font-primary {
    font-family: var(--font-primary) !important;
}

[data-theme="dash"] .font-secondary {
    font-family: var(--font-secondary) !important;
}

/* -------------------------------
   LAYOUT HELPERS
   ------------------------------- */
[data-theme="dash"] .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

[data-theme="dash"] .grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 992px) {
    [data-theme="dash"] .grid.cols-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    [data-theme="dash"] .grid.cols-2 {
        grid-template-columns: 2fr 1fr;
    }
}

/* -------------------------------
   CARDS
   ------------------------------- */
[data-theme="dash"] .card {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
    color: var(--text-1);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    [data-theme="dash"] .card:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-2);
    }

[data-theme="dash"] .card-header {
    background: linear-gradient(180deg, color-mix(in hsl, var(--surface-2), white 2%), var(--surface-2));
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-weight: 600;
}

[data-theme="dash"] .card-body {
    color: var(--text-1);
}

[data-theme="dash"] .card .divider {
    height: 1px;
    background: var(--muted);
    margin: 8px 0;
}

/* Glass variant */
[data-theme="dash"] .glass {
    background: linear-gradient(180deg, #ffffff0a, #ffffff05);
    border: 1px solid #ffffff2a;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* -------------------------------
   KPI TILES
   ------------------------------- */
[data-theme="dash"] .kpi {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}

    [data-theme="dash"] .kpi .kpi-label {
        color: var(--text-3);
        font-size: var(--fs-small);
    }

    [data-theme="dash"] .kpi .kpi-value {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    [data-theme="dash"] .kpi .kpi-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--border);
        background: #ffffff10;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 12px;
        color: var(--text-2);
    }

/* -------------------------------
   BUTTONS
   ------------------------------- */
[data-theme="dash"] .btn {
    --btn-bg: var(--surface-3);
    --btn-bd: var(--border);
    --btn-fg: var(--text-1);
    background: linear-gradient(180deg, color-mix(in hsl, var(--btn-bg), white 6%), var(--btn-bg));
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    [data-theme="dash"] .btn:hover {
        transform: translateY(-1px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-1);
    }

    [data-theme="dash"] .btn:focus-visible {
        outline: none;
        box-shadow: var(--focus);
    }

/* Variants (primary -> neon) */
[data-theme="dash"] .btn-primary {
    --btn-bg: color-mix(in oklch, var(--primary) 55%, black);
    --btn-bd: color-mix(in oklch, var(--primary) 70%, black);
    --btn-fg: var(--highlight-ink);
    background: linear-gradient(180deg, var(--btn-bg), color-mix(in oklch, var(--btn-bg) 92%, black));
    color: var(--btn-fg);
}

/* Subtle */
[data-theme="dash"] .btn-subtle {
    --btn-bg: var(--surface-2);
    --btn-bd: var(--border);
    --btn-fg: var(--text-2);
}

/* -------------------------------
   FORMS
   ------------------------------- */
[data-theme="dash"] .form-control,
[data-theme="dash"] input[type="date"],
[data-theme="dash"] input[type="text"],
[data-theme="dash"] select {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    [data-theme="dash"] .form-control::placeholder {
        color: var(--text-3);
    }

    [data-theme="dash"] .form-control:focus {
        border-color: var(--border-strong);
        box-shadow: var(--focus);
    }

/* -------------------------------
   TABLES
   ------------------------------- */
[data-theme="dash"] table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-1);
}

[data-theme="dash"] thead th {
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--text-2);
    background: var(--surface-2);
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

[data-theme="dash"] tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--muted);
}

[data-theme="dash"] tbody tr:hover {
    background: color-mix(in hsl, var(--surface-2), white 3%);
}

/* -------------------------------
   BADGES / STATUS
   ------------------------------- */
[data-theme="dash"] .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: #ffffff10;
    color: var(--text-2);
}

    [data-theme="dash"] .badge.success {
        border-color: #22c55e55;
        color: #86efac;
        background: #22c55e12;
    }

    [data-theme="dash"] .badge.warning {
        border-color: #f59e0b55;
        color: #fde68a;
        background: #f59e0b12;
    }

    [data-theme="dash"] .badge.danger {
        border-color: #ef444455;
        color: #fca5a5;
        background: #ef444412;
    }

/* Neon badge utility */
[data-theme="dash"] .badge-neon {
    border-color: color-mix(in oklch, var(--highlight) 60%, black);
    background: color-mix(in oklch, var(--highlight) 12%, #000);
    color: var(--text-1);
}

/* -------------------------------
   SECTION TITLE
   ------------------------------- */
[data-theme="dash"] .section-title {
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

    [data-theme="dash"] .section-title::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        opacity: 0.8;
        border-radius: 2px;
    }
    /* Neon underline variant */
    [data-theme="dash"] .section-title.neon::after {
        background: linear-gradient(90deg, var(--highlight), var(--accent));
    }

/* -------------------------------
   CHART CONTAINER
   ------------------------------- */
[data-theme="dash"] .chart-card {
    padding: 14px;
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}

/* -------------------------------
   MISC UTILITIES
   ------------------------------- */
[data-theme="dash"] .rule {
    height: 1px;
    background: var(--muted);
    border: 0;
    margin: 12px 0;
}

[data-theme="dash"] .focusable:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

@media (hover: hover) {
    [data-theme="dash"] .lift:hover {
        transform: translateY(-2px);
    }

    [data-theme="dash"] .tilt:hover {
        transform: translateY(-1px) rotate(-0.25deg);
    }
}

/* Text selection highlight (neon) */
[data-theme="dash"] ::selection {
    background: color-mix(in oklch, var(--highlight) 55%, transparent);
    color: var(--highlight-ink);
}

/* Scrollbars (WebKit) */
[data-theme="dash"] ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: var(--surface-2);
}

[data-theme="dash"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffffff2a, #ffffff1a);
    border: 2px solid var(--surface-2);
    border-radius: 10px;
}

/* ===============================
   NEON UTILITIES (buttons/links)
   =============================== */

/* Global neon accent toggle (optional):
   <html data-theme="dash" data-accent="neon"> */
[data-theme="dash"][data-accent="neon"] {
    --primary: var(--highlight);
    --focus: 0 0 0 3px color-mix(in oklch, var(--highlight) 30%, transparent), 0 0 0 1px var(--highlight);
}

/* NEON BUTTON (filled) */
[data-theme="dash"] .btn-neon {
    --btn-bg: color-mix(in oklch, var(--highlight) 82%, black);
    --btn-bd: color-mix(in oklch, var(--highlight) 90%, black);
    --btn-fg: var(--highlight-ink);
    background: linear-gradient(180deg, var(--btn-bg), color-mix(in oklch, var(--btn-bg) 92%, black));
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    box-shadow: 0 0 0 1px var(--btn-bd) inset, 0 6px 24px color-mix(in oklch, var(--highlight) 35%, transparent);
    text-shadow: none;
}

    [data-theme="dash"] .btn-neon:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 0 1px var(--btn-bd) inset, 0 10px 28px color-mix(in oklch, var(--highlight) 35%, transparent);
    }

    [data-theme="dash"] .btn-neon:active {
        transform: translateY(0);
        box-shadow: 0 0 0 1px var(--btn-bd) inset, 0 4px 16px color-mix(in oklch, var(--highlight) 35%, transparent);
    }

    [data-theme="dash"] .btn-neon:focus-visible {
        outline: none;
        box-shadow: var(--focus);
    }

/* NEON BUTTON (outline) */
[data-theme="dash"] .btn-outline-neon {
    --btn-bg: transparent;
    --btn-bd: var(--highlight);
    --btn-fg: var(--text-1);
    background: linear-gradient(180deg, transparent, transparent);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
}

    [data-theme="dash"] .btn-outline-neon:hover {
        background: linear-gradient(180deg, color-mix(in oklch, var(--highlight) 12%, #000), transparent 40%);
        border-color: color-mix(in oklch, var(--highlight) 85%, black);
    }

/* NEON LINK */
[data-theme="dash"] .link-neon {
    color: var(--highlight);
    text-decoration-color: color-mix(in oklch, var(--highlight) 60%, transparent);
}

    [data-theme="dash"] .link-neon:hover {
        text-decoration-thickness: 2px;
    }

/* KPI (emphasis border) */
[data-theme="dash"] .kpi.is-up {
    border-color: color-mix(in oklch, var(--highlight) 35%, black);
}

/* Optional neon bg glow */
[data-theme="dash"].bg-neon {
    background-image: var(--brand-gradient), radial-gradient(800px 400px at 80% 120%, color-mix(in oklch, var(--highlight) 12%, transparent), transparent 60%);
}

/* ===============================
   AUTH (Login page)
   =============================== */

.auth-shell {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 0;
}

.auth-card {
    width: min(920px, 96%);
    display: grid;
    grid-template-columns: 1.15fr 1fr; /* left: hero, right: form */
    border-radius: var(--radius-l);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    box-shadow: var(--shadow-2);
    overflow: hidden;
    margin: 0 auto; /* center horizontally */
    max-height: 100svh; /* avoid overflow */
}

@media (max-width: 900px) {
    .auth-card {
        grid-template-columns: 1fr;
        margin: 0 12px;
    }
}

@media (max-height: 680px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .hero {
        display: none;
    }
    /* hide hero only on very short heights */
}

.hero {
    padding: 32px 28px;
    background: linear-gradient(180deg, #ffffff08, #ffffff03), radial-gradient(700px 360px at 0% 0%, color-mix(in oklch, var(--highlight) 12%, transparent), transparent 60%), var(--surface-3);
    border-right: 1px solid var(--border);
}

    .hero .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

.brand-badge {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in oklch, var(--highlight) 20%, #000);
    border: 1px solid color-mix(in oklch, var(--highlight) 60%, #000);
    box-shadow: 0 8px 32px color-mix(in oklch, var(--highlight) 25%, transparent);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 14px;
}

.mini-kpi {
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 12px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

    .mini-kpi .lbl {
        color: var(--text-3);
        font-size: var(--fs-small);
    }

    .mini-kpi .val {
        font-weight: 700;
        font-size: 18px;
    }

.form-side {
    padding: 32px 24px;
    display: grid;
    align-content: center;
    gap: 16px;
}

.title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between; /* keep on one row: title + badge */
    gap: 12px;
    flex-wrap: nowrap;
}

.field {
    display: grid;
    gap: 6px;
}

.label {
    color: var(--text-3);
    font-size: var(--fs-small);
}

.input-wrap {
    position: relative;
}

    .input-wrap .icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        opacity: .75;
    }
    /* text won't overlap icons */
    .input-wrap input {
        padding-left: 52px !important;
        padding-right: 46px;
    }

.eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
}

    .eye:hover {
        border-color: var(--border-strong);
    }

.actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.err {
    border: 1px solid #ef444455;
    background: #ef444412;
    color: #fca5a5;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--fs-small);
}

.foot {
    text-align: center;
    margin-top: 6px;
    color: var(--text-3);
    font-size: var(--fs-small);
}

/* ensure any leftover .tilt has no effect */
.tilt, .tilt:hover {
    transform: none !important;
}

/* ==== Dark table background & stripes (Bootstrap table vars) ==== */
[data-theme="dash"] .table {
    --bs-table-color: var(--text-1);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--muted);
    --bs-table-striped-bg: color-mix(in hsl, var(--surface-2), white 2%);
    --bs-table-striped-color: var(--text-1);
    --bs-table-hover-bg: color-mix(in hsl, var(--surface-2), white 4%);
    --bs-table-hover-color: var(--text-1);
}

/* ==== Dark dropdown ==== */
[data-theme="dash"] .dropdown-menu,
[data-theme="dash"] .dropdown-menu.dropdown-menu-dark {
    background: var(--surface-2);
    color: var(--text-1);
    border: 1px solid var(--border);
}

    [data-theme="dash"] .dropdown-menu .dropdown-item {
        color: var(--text-1);
    }

        [data-theme="dash"] .dropdown-menu .dropdown-item:hover,
        [data-theme="dash"] .dropdown-menu .dropdown-item:focus {
            background: color-mix(in hsl, var(--surface-2), white 4%);
            color: var(--text-1);
        }

/* ==== Dark selects (Bootstrap .form-select beyaz olmasın) ==== */
[data-theme="dash"] .form-select,
[data-theme="dash"] select.form-select,
[data-theme="dash"] select {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 10px;
    padding: 10px 12px;
}

    [data-theme="dash"] .form-select:focus,
    [data-theme="dash"] select:focus {
        border-color: var(--border-strong);
        box-shadow: var(--focus);
    }

    [data-theme="dash"] .form-select option,
    [data-theme="dash"] select option {
        background: var(--surface-2);
        color: var(--text-1);
    }

/* ==== Disable tilt everywhere ==== */
[data-theme="dash"] .tilt,
[data-theme="dash"] .tilt:hover {
    transform: none !important;
}
[data-theme="dash"] .recent-activity {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-1);
}

    [data-theme="dash"] .recent-activity .card-header {
        background: linear-gradient(180deg, color-mix(in hsl, var(--surface-2), white 2%), var(--surface-2));
        border-bottom: 1px solid var(--border);
    }

[data-theme="dash"] .recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-theme="dash"] .recent-item {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--muted);
    transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease, background .15s ease;
    background: transparent;
}

    [data-theme="dash"] .recent-item:hover {
        box-shadow: 0 0 0 1px color-mix(in oklch, var(--highlight) 32%, transparent) inset;
        border-color: color-mix(in oklch, var(--highlight) 32%, black);
        background: color-mix(in oklch, var(--surface-2) 96%, var(--highlight) 4%);
        border-radius: 12px;
        transform: translateY(-1px);
    }

    [data-theme="dash"] .recent-item:last-child {
        border-bottom: 0;
    }

[data-theme="dash"] .ri-left .small {
    color: var(--text-3);
}

[data-theme="dash"] .recent-item.empty:hover {
    box-shadow: none;
    background: transparent;
    transform: none;
}

@media (max-width: 700px) {
    [data-theme="dash"] .recent-item {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    [data-theme="dash"] .ri-right {
        justify-self: start;
        text-align: left !important;
    }
}
/* ==== Compact action buttons & rows (global) ==== */
.actions-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap
}

    .actions-inline form {
        margin: 0
    }

.btn-compact {
    padding: 8px 14px;
    font-size: 13.5px;
    line-height: 1.2;
    border-radius: 10px
}
    /* If you use .btn-sm together with .btn-compact, keep it tidy */
    .btn-compact.btn-sm {
        padding: 6px 12px;
        font-size: 13px
    }

.cell-actions {
    min-width: 400px
}