/*
 * The panel's designs (Settings > Appearance, chosen by an admin for everyone): each sets the
 * tokens styles.css is built from. Each design is either dark or light, never both; the server
 * stamps <html data-design="..." data-theme="dark|light"> (services/appearance.py). styles.css has
 * no colours of its own: badges, notices and filled buttons use the tints below, which suit every design.
 *
 *   control-room  dark operator console: blue-grey, amber accent, IBM Plex
 *   workbench     calm and light: green-grey neutrals, grass-green accent, Manrope
 *   biome         Minecraft-flavoured dark stone: grass and gold, square corners, pixel headings
 */
@import url('/vendor/fonts/fonts.css');

/* ---------- Control room (dark) ---------- */
:root[data-design="control-room"] {
    --console-bg: #0b0f14;
    --console-text: #d8dee7;
    color-scheme: dark;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --font-display: 'IBM Plex Sans', system-ui, sans-serif;
    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;

    --accent: #e8a33d;
    --accent-hover: #f0b45a;
    --accent-contrast: #1a1205;
    --accent-text: #e8a33d;
    --accent-soft: rgba(232, 163, 61, 0.14);
    --state-running: #4cc38a;
    --state-busy: #e8a33d;
    --state-stopped: #8a96a6;

    --bg-body: #10151c;
    --bg-main: #10151c;
    --bg-card: #151c25;
    --bg-card-alt: #19212c;
    --bg-input: #151c25;
    --bg-hover: #1c2632;
    --bg-modal: #151c25;
    --bg-sidebar: #0b0f14;
    --bg-code: #0b0f14;
    --navbar-bg: #0b0f14;
    --navbar-text: #d8dee7;
    --navbar-border: #243041;

    --text-primary: #d8dee7;
    --text-secondary: #a3adba;
    --text-muted: #7f8b9b;
    --text-heading: #eef2f7;
    --text-light: #8a96a6;
    --border-color: #243041;
    /* Graphs (Chart.js reads these, so plain hex) */
    --chart-1: #e8a33d;
    --chart-2: #4fb3d9;
    --chart-3: #4cc38a;
    --chart-4: #a78bfa;
    --chart-5: #7f8b9b;
    --chart-limit: #e5484d;
    --border-light: #1c2632;
    --border-input: #2c3a4e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ---------- Workbench (light) ---------- */
:root[data-design="workbench"] {
    --console-bg: #1f2a24;
    --console-text: #e4ece6;
    color-scheme: light;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --font-display: 'Manrope', system-ui, sans-serif;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;

    --accent: #2f7d4f;
    --accent-hover: #276942;
    --accent-contrast: #ffffff;
    --accent-text: #2a6f46;
    --accent-soft: #e5f1e9;
    --state-running: #2f7d4f;
    --state-busy: #b7791f;
    --state-stopped: #69736c;

    --bg-body: #f6f7f5;
    --bg-main: #f6f7f5;
    --bg-card: #ffffff;
    --bg-card-alt: #f9faf8;
    --bg-input: #ffffff;
    --bg-hover: #eef2ee;
    --bg-modal: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-code: #f3f5f2;
    --navbar-bg: #ffffff;
    --navbar-text: #1f2a24;
    --navbar-border: #e3e6e1;

    --text-primary: #1f2a24;
    --text-secondary: #4d5952;
    --text-muted: #69736c;
    --text-heading: #141c17;
    --text-light: #6f7a72;
    --border-color: #e3e6e1;
    /* Graphs (Chart.js reads these, so plain hex) */
    --chart-1: #2f7d4f;
    --chart-2: #3b6fb6;
    --chart-3: #b7791f;
    --chart-4: #8a5a9e;
    --chart-5: #69736c;
    --chart-limit: #c53030;
    --border-light: #edf0ec;
    --border-input: #d5dad3;

    --shadow-sm: 0 1px 2px rgba(31, 42, 36, 0.06);
    --shadow-md: 0 4px 12px rgba(31, 42, 36, 0.08);
    --shadow-lg: 0 16px 40px rgba(31, 42, 36, 0.16);
}

/* ---------- Block & biome (dark stone) ---------- */
:root[data-design="biome"] {
    --console-bg: #1f231f;
    --console-text: #eef0e8;
    color-scheme: dark;
    --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --font-display: 'Pixelify Sans', 'Rubik', system-ui, sans-serif;
    --radius-sm: 0;
    --radius: 2px;
    --radius-lg: 2px;

    --accent: #6fbf4a;
    --accent-hover: #82cf5d;
    --accent-contrast: #142310;
    --accent-text: #8ad466;
    --accent-soft: rgba(111, 191, 74, 0.16);
    --state-running: #6fbf4a;
    --state-busy: #f2c14e;
    --state-stopped: #a9b0a3;

    --bg-body: #2b2f2a;
    --bg-main: #2b2f2a;
    --bg-card: #363b35;
    --bg-card-alt: #3d433c;
    --bg-input: #252925;
    --bg-hover: #41473f;
    --bg-modal: #323731;
    --bg-sidebar: #222622;
    --bg-code: #1f231f;
    --navbar-bg: #222622;
    --navbar-text: #eef0e8;
    --navbar-border: #1a1d1a;

    --text-primary: #eef0e8;
    --text-secondary: #c3c9bd;
    --text-muted: #a9b0a3;
    --text-heading: #f6f8f1;
    --text-light: #a9b0a3;
    --border-color: #4a5048;
    /* Graphs (Chart.js reads these, so plain hex) */
    --chart-1: #6fbf4a;
    --chart-2: #4a90d9;
    --chart-3: #f2c14e;
    --chart-4: #a77bd9;
    --chart-5: #a9b0a3;
    --chart-limit: #e2695f;
    --border-light: #41473f;
    --border-input: #565d53;

    --shadow-sm: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 0 0 3px #1a1d1a, 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* ---------- Shared: tokens styles.css still reads by their older names ---------- */
:root[data-design] {
    --primary-color: var(--accent);
    --primary-hover: var(--accent-hover);
    --primary-gradient-start: var(--accent);
    --primary-gradient-end: var(--accent);
    --tab-active: var(--accent-text);

    /* Badge and notice tints: a hue mixed into the design's surface (styles.css) */
    --tint-red: #e5484d;
    --tint-amber: var(--state-busy);
    --tint-green: var(--state-running);
    --tint-blue: #4f8fe8;
    --tint-purple: #9d7ce8;
    --tint-pink: #d9669e;

    /* Notices and status messages (older names, from the tints) */
    --success-bg: color-mix(in srgb, var(--tint-green) 14%, transparent);
    --success-color: color-mix(in srgb, var(--tint-green) 80%, var(--text-primary));
    --success-border: var(--tint-green);
    --error-bg: color-mix(in srgb, var(--tint-red) 14%, transparent);
    --error-color: color-mix(in srgb, var(--tint-red) 80%, var(--text-primary));
    --error-border: var(--tint-red);
    --warning-bg: color-mix(in srgb, var(--tint-amber) 14%, transparent);
    --warning-color: color-mix(in srgb, var(--tint-amber) 80%, var(--text-primary));
    --warning-border: var(--tint-amber);
    --info-bg: color-mix(in srgb, var(--tint-blue) 14%, transparent);
    --info-color: color-mix(in srgb, var(--tint-blue) 80%, var(--text-primary));
    --tab-text: var(--text-muted);
    --tab-border: var(--border-color);
}
/* Text on a solid tint (filled success/danger/warning buttons): the dark designs' tints are light */
:root[data-design="workbench"] {
    --on-tint: #ffffff;
}
:root[data-design="control-room"],
:root[data-design="biome"] {
    --on-tint: #10140f;
}

/* ---------- Icons (vendor/icons.svg) ---------- */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-icon .icon,
.btn-action .icon {
    vertical-align: middle;
}

/* ---------- Type ---------- */
button, input, select, textarea {
    font: inherit;                      /* form controls take the design's typeface too */
}
h1, h2, h3,
.section > h2 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
:root[data-design="biome"] h1,
:root[data-design="biome"] h2,
:root[data-design="biome"] h3 {
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* The pixel font's capital C and 2 read as O and 8 below about 24px: smaller headings use Rubik */
:root[data-design="biome"] h3 {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0;
}
code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* ---------- Status badges: a dot instead of emoji ---------- */
.server-status::before,
.status-indicator::before {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.45em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.08em;
}
:root[data-design="biome"] .server-status::before,
:root[data-design="biome"] .status-indicator::before {
    border-radius: 0;
}

/* ---------- Settings > Appearance ---------- */
.design-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.design-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
}
.design-option:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.design-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.design-option input:focus-visible ~ .design-name {
    text-decoration: underline;
}
.design-swatch {
    grid-row: span 2;
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.design-swatch i {
    width: 14px;
    height: 34px;
}
.design-name {
    font-weight: 600;
    color: var(--text-heading);
}
.design-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ---------- Status pills and buttons with icons ---------- */
.server-status.running { color: var(--state-running); background: color-mix(in srgb, var(--state-running) 14%, transparent); }
.server-status.starting { color: var(--state-busy); background: color-mix(in srgb, var(--state-busy) 16%, transparent); }
.server-status.stopped { color: var(--state-stopped); background: color-mix(in srgb, var(--state-stopped) 14%, transparent); }
:root[data-design] .server-status { border-radius: var(--radius-sm); }
:root[data-design="workbench"] .server-status { border-radius: 99px; }

/* No specificity: an element's own display (e.g. display: none until a breakpoint) always wins */
:where(button:has(> svg.icon)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    white-space: nowrap;
}

/* Icon-only danger buttons sit on a card: a red icon, not white */
.btn-icon.btn-danger {
    color: var(--error-border, #dc2626);
}
.btn-icon.btn-danger:hover {
    background: color-mix(in srgb, var(--error-border, #dc2626) 12%, transparent);
}