/* ==========================================================================
   IndoLinessa Market — "Premium Dark + Emerald"
   Lapisan terakhir, dimuat setelah app.css dan glass.css.

   Palet profesional (hex):
     Latar    #070B0F · #0B0F14 · #0E141A · #111820 · #151D26 · #1A242E
     Garis    #1E2A35 · #2B3947
     Teks     #E9EFF5 · #9BA9B7 · #6E7C8A
     Emerald  #6EE7B7 · #34D399 · #10B981 · #059669 · #04130D
     Gold     #D4A853 (highlight sekunder)
   ========================================================================== */

:root {
    color-scheme: dark;

    --ink-950: #070B0F;
    --ink-900: #0B0F14;
    --ink-850: #0E141A;
    --ink-800: #111820;
    --ink-750: #151D26;
    --ink-700: #1A242E;

    --line-1: #1E2A35;
    --line-2: #2B3947;

    --bg: var(--ink-900);
    --bg-2: var(--ink-850);
    --panel: var(--ink-800);
    --panel-2: var(--ink-750);
    --panel-3: var(--ink-700);
    --input: var(--ink-850);

    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);

    --text: #E9EFF5;
    --muted: #9BA9B7;
    --muted-2: #6E7C8A;

    --emerald-300: #6EE7B7;
    --emerald-400: #34D399;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-ink: #04130D;

    --accent: var(--emerald-400);
    --accent-hover: var(--emerald-300);
    --accent-ink: var(--emerald-ink);
    --accent-dim: rgba(52, 211, 153, 0.11);
    --accent-line: rgba(52, 211, 153, 0.30);

    --green: var(--emerald-400);
    --green-dim: rgba(52, 211, 153, 0.11);
    --red: #F87171;
    --red-dim: rgba(248, 113, 113, 0.10);
    --gold: #D4A853;

    --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.92);
    --shadow-soft: 0 8px 24px -20px rgba(0, 0, 0, 0.9);

    --obsidian: var(--ink-900);
    --obsidian-2: var(--ink-850);
    --glass-bg: rgba(13, 19, 26, 0.56);
    --glass-bg-hi: rgba(17, 24, 32, 0.72);
    --glass-line: rgba(255, 255, 255, 0.075);
    --glass-line-hi: rgba(52, 211, 153, 0.28);
}

html { scrollbar-color: var(--line-2) var(--ink-900); scrollbar-width: thin; }
body { background: var(--ink-900); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border: 2px solid var(--ink-900);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #3A4B5C; }

::selection { background: var(--emerald-400); color: var(--emerald-ink); }

:focus-visible {
    outline: 2px solid var(--emerald-400);
    outline-offset: 2px;
}

/* ---------- Tombol ---------- */

.btn-primary {
    box-shadow: 0 10px 26px -18px rgba(52, 211, 153, 0.65);
}

.btn-green:hover {
    background: var(--emerald-300);
    border-color: var(--emerald-300);
}

.btn-soft:hover {
    background: rgba(52, 211, 153, 0.17);
    border-color: rgba(52, 211, 153, 0.50);
}

.btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Navigasi ---------- */

.nav-links a.active {
    color: var(--emerald-300);
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.nav-links a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.045);
}

.nav-login-link:hover { color: var(--emerald-300); }

/* ---------- Permukaan ---------- */

.card {
    background: var(--ink-800);
    border-color: var(--line-1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.card-head { border-bottom-color: var(--line-1); }

.table-wrap { border-color: var(--line-1); }

th {
    color: var(--muted-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

tbody tr:hover { background: rgba(52, 211, 153, 0.035); }

.hero {
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(16, 185, 129, 0.09), transparent 62%),
        var(--ink-900);
}

.hero-chip,
.badge {
    border-color: var(--line-1);
}

.badge-ok {
    background: var(--accent-dim);
    border-color: var(--accent-line);
    color: var(--emerald-300);
}

.hero-badge {
    border-color: var(--accent-line);
    background: var(--accent-dim);
    color: var(--emerald-300);
}

.foot {
    border-top: 1px solid var(--line-1);
    background: var(--ink-950);
}

.foot-col a:hover { color: var(--emerald-300); }

/* ---------- Angka & status ---------- */

.up { color: var(--emerald-400) !important; }
.down { color: var(--red) !important; }

.stat-value { font-variant-numeric: tabular-nums; }

.mono,
code { font-variant-numeric: tabular-nums; }

/* ---------- Gerak ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}