/* ===== ServerPanel — design tokens + small custom layer on top of Tailwind ===== */

/* CSS variables exposed as RGB triplets so Tailwind's `<alpha-value>` syntax works,
   e.g. `bg-surface/50` resolves to rgb(var(--c-surface) / 0.5) */
:root {
    --c-bg: 250 250 250;            /* zinc-50 */
    --c-surface: 255 255 255;       /* white */
    --c-surface-2: 244 244 245;     /* zinc-100 */
    --c-surface-3: 228 228 231;     /* zinc-200 */
    --c-border: 228 228 231;        /* zinc-200 */
    --c-border-strong: 212 212 216; /* zinc-300 */
    --c-text: 24 24 27;             /* zinc-900 */
    --c-text-muted: 82 82 91;       /* zinc-600 */
    --c-text-subtle: 113 113 122;   /* zinc-500 */
    --c-brand: 99 102 241;          /* indigo-500 */
    --c-brand-strong: 67 56 202;    /* indigo-700 (active text in light) */

    color-scheme: light;
}
.dark {
    --c-bg: 9 9 11;                 /* zinc-950 */
    --c-surface: 24 24 27;          /* zinc-900 */
    --c-surface-2: 39 39 42;        /* zinc-800 */
    --c-surface-3: 63 63 70;        /* zinc-700 */
    --c-border: 39 39 42;           /* zinc-800 */
    --c-border-strong: 63 63 70;    /* zinc-700 */
    --c-text: 244 244 245;          /* zinc-100 */
    --c-text-muted: 161 161 170;    /* zinc-400 */
    --c-text-subtle: 113 113 122;   /* zinc-500 */
    --c-brand: 99 102 241;          /* indigo-500 */
    --c-brand-strong: 199 210 254;  /* indigo-200 (active text in dark) */

    color-scheme: dark;
}

html, body { height: 100%; }
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    background: rgb(var(--c-bg));
    color: rgb(var(--c-text));
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-surface-3)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-border-strong)); }

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}
input[type=checkbox] { accent-color: rgb(var(--c-brand)); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgb(var(--c-brand));
    outline-offset: 2px;
}

/* Sidebar nav active marker */
.nav-active {
    background: rgb(var(--c-brand) / 0.12);
    color: rgb(var(--c-brand-strong));
    box-shadow: inset 2px 0 0 rgb(var(--c-brand));
}

/* Toast slide-in */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast { animation: toast-in 0.18s ease-out; }

/* Code blocks */
code, kbd, pre {
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* Slide toggle (input[type=checkbox] styled as switch) */
.toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    background: rgb(var(--c-surface-3));
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
    border: 1px solid rgb(var(--c-border));
}
.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, background 0.15s ease;
}
.toggle:checked {
    background: rgb(16 185 129);  /* emerald-500 */
    border-color: rgb(16 185 129);
}
.toggle:checked::after {
    transform: translateX(16px);
}
.toggle:disabled { opacity: 0.5; cursor: wait; }

/* Row whose desired state hasn't been reconciled yet — soft pulse on the toggle. */
@keyframes applying-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}
tr.is-applying .toggle { animation: applying-pulse 1.4s ease-out infinite; }
/* The "applying" badge stays inside the Expires cell's fixed-width column
   (set via <colgroup>), so the Active column to its right never shifts when
   the badge appears/disappears — important for rapid toggle clicks. */
tr.is-applying td.expires-cell::after {
    content: 'applying…';
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(245, 158, 11, 0.12);
    color: rgb(180, 83, 9);
    border: 1px solid rgba(245, 158, 11, 0.35);
    white-space: nowrap;
}
.dark tr.is-applying td.expires-cell::after { color: rgb(252, 211, 77); }