/*
  Tema admin Lab. Riski — mengikuti docs/TEMA_DAN_WARNA.md ("buku catatan laboratorium").
  Permukaan datar, garis tipis, satu aksen biru, radius kecil, tanpa animasi dekoratif.
  Token warna sama dengan labriski-frontend/src/app/globals.css (OKLCH).
  Dimuat paling akhir, jadi menimpa variabel bawaan Django (light, dark, dan auto).
*/

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Latin.b2c9031d9fd6.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Latin.e9192c2fe0a3.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-Latin.b058178d7f30.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* ---- Token: terang ------------------------------------------------------- */
:root,
html[data-theme="light"] {
    --lab-bg: oklch(0.985 0.004 95);
    --lab-fg: oklch(0.2 0.012 70);
    --lab-card: oklch(1 0 0);
    --lab-muted-bg: oklch(0.96 0.005 90);
    --lab-muted-fg: oklch(0.46 0.012 70);
    --lab-border: oklch(0.88 0.006 90);
    --lab-primary: oklch(0.5 0.2 262);
    --lab-primary-hover: oklch(0.43 0.2 262);
    --lab-on-primary: oklch(0.99 0 0);
    --lab-destructive: oklch(0.55 0.2 27);
    --lab-destructive-hover: oklch(0.47 0.2 27);
    --lab-success-bg: oklch(0.96 0.04 155);
    --lab-warning-bg: oklch(0.96 0.05 95);
    --lab-error-bg: oklch(0.96 0.03 27);
    --lab-selected: oklch(0.93 0.006 90);
    --lab-highlight: oklch(0.95 0.03 262);
    --lab-focus: oklch(0.5 0.2 262 / 0.35);

    --font-family-primary: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-family-monospace: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --lab-font-serif: "Source Serif 4", ui-serif, Georgia, serif;

    --primary: var(--lab-primary);
    --secondary: var(--lab-fg);
    --accent: var(--lab-primary);
    --primary-fg: var(--lab-on-primary);

    --body-fg: var(--lab-fg);
    --body-bg: var(--lab-bg);
    --body-quiet-color: var(--lab-muted-fg);
    --body-medium-color: var(--lab-fg);
    --body-loud-color: var(--lab-fg);

    --header-color: var(--lab-fg);
    --header-branding-color: var(--lab-fg);
    --header-bg: var(--lab-card);
    --header-link-color: var(--lab-fg);

    --breadcrumbs-fg: var(--lab-muted-fg);
    --breadcrumbs-link-fg: var(--lab-primary);
    --breadcrumbs-bg: var(--lab-bg);

    --link-fg: var(--lab-primary);
    --link-hover-color: var(--lab-primary-hover);
    --link-selected-fg: var(--lab-primary);

    --hairline-color: var(--lab-border);
    --border-color: var(--lab-border);

    --error-fg: var(--lab-destructive);
    --message-success-bg: var(--lab-success-bg);
    --message-warning-bg: var(--lab-warning-bg);
    --message-error-bg: var(--lab-error-bg);

    --darkened-bg: var(--lab-muted-bg);
    --selected-bg: var(--lab-selected);
    --selected-row: var(--lab-highlight);

    --button-fg: var(--lab-on-primary);
    --button-bg: var(--lab-primary);
    --button-hover-bg: var(--lab-primary-hover);
    --default-button-bg: var(--lab-primary);
    --default-button-hover-bg: var(--lab-primary-hover);
    --close-button-bg: var(--lab-muted-fg);
    --close-button-hover-bg: var(--lab-fg);
    --delete-button-bg: var(--lab-destructive);
    --delete-button-hover-bg: var(--lab-destructive-hover);

    --object-tools-fg: var(--lab-on-primary);
    --object-tools-bg: var(--lab-primary);
    --object-tools-hover-bg: var(--lab-primary-hover);

    color-scheme: light;
}

/* ---- Token: gelap -------------------------------------------------------- */
html[data-theme="dark"] {
    --lab-bg: oklch(0.17 0.006 70);
    --lab-fg: oklch(0.93 0.006 90);
    --lab-card: oklch(0.2 0.006 70);
    --lab-muted-bg: oklch(0.23 0.006 70);
    --lab-muted-fg: oklch(0.72 0.01 85);
    --lab-border: oklch(0.32 0.007 70);
    --lab-primary: oklch(0.72 0.14 262);
    --lab-primary-hover: oklch(0.8 0.12 262);
    --lab-on-primary: oklch(0.17 0.006 70);
    --lab-destructive: oklch(0.66 0.19 25);
    --lab-destructive-hover: oklch(0.74 0.17 25);
    --lab-success-bg: oklch(0.27 0.05 155);
    --lab-warning-bg: oklch(0.28 0.05 95);
    --lab-error-bg: oklch(0.27 0.06 25);
    --lab-selected: oklch(0.28 0.007 70);
    --lab-highlight: oklch(0.27 0.05 262);
    --lab-focus: oklch(0.72 0.14 262 / 0.45);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --lab-bg: oklch(0.17 0.006 70);
        --lab-fg: oklch(0.93 0.006 90);
        --lab-card: oklch(0.2 0.006 70);
        --lab-muted-bg: oklch(0.23 0.006 70);
        --lab-muted-fg: oklch(0.72 0.01 85);
        --lab-border: oklch(0.32 0.007 70);
        --lab-primary: oklch(0.72 0.14 262);
        --lab-primary-hover: oklch(0.8 0.12 262);
        --lab-on-primary: oklch(0.17 0.006 70);
        --lab-destructive: oklch(0.66 0.19 25);
        --lab-destructive-hover: oklch(0.74 0.17 25);
        --lab-success-bg: oklch(0.27 0.05 155);
        --lab-warning-bg: oklch(0.28 0.05 95);
        --lab-error-bg: oklch(0.27 0.06 25);
        --lab-selected: oklch(0.28 0.007 70);
        --lab-highlight: oklch(0.27 0.05 262);
        --lab-focus: oklch(0.72 0.14 262 / 0.45);
        color-scheme: dark;
    }
}

/* ---- Dasar ----------------------------------------------------------------- */
body {
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
}

h1, h2, h3 {
    font-family: var(--lab-font-serif);
}

h1 {
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--lab-fg);
}

code, pre, kbd, samp, .vTextField.code {
    font-family: var(--font-family-monospace);
}

:focus-visible {
    outline: 2px solid var(--lab-primary);
    outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: var(--lab-primary);
    box-shadow: 0 0 0 3px var(--lab-focus);
}

/* ---- Header & breadcrumbs: permukaan datar -------------------------------- */
#header {
    background: var(--lab-card);
    color: var(--lab-fg);
    border-bottom: 1px solid var(--lab-border);
    box-shadow: none;
}

#header a:link, #header a:visited, #logout-form button {
    color: var(--lab-fg);
}

#user-tools a, #logout-form button {
    border-bottom: 1px solid var(--lab-border);
}

div.breadcrumbs {
    background: var(--lab-bg);
    border-bottom: 1px solid var(--lab-border);
    color: var(--lab-muted-fg);
}

/* ---- Modul, tabel, tombol ---------------------------------------------------- */
.module h2,
.module caption,
.inline-group h2 {
    background: var(--lab-muted-bg);
    color: var(--lab-fg);
    border: 1px solid var(--lab-border);
    border-bottom: none;
    font-family: var(--font-family-primary);
}

.module {
    border: 1px solid var(--lab-border);
    border-radius: 6px;
    background: var(--lab-card);
}

.module h2:first-child,
.module caption:first-child {
    border: none;
    border-bottom: 1px solid var(--lab-border);
    border-radius: 5px 5px 0 0;
}

.button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 4px;
    transition: none;
}

.object-tools a {
    border-radius: 4px;
}

.object-tools a:link, .object-tools a:visited {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    padding: 5px 12px;
}

.object-tools li {
    height: auto;
}

input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=url], input[type=number], input[type=tel], textarea, select,
.vTextField {
    border-radius: 4px;
    background: var(--lab-card);
    color: var(--lab-fg);
}

.errornote {
    border-radius: 4px;
}

ul.messagelist li {
    border: 1px solid var(--lab-border);
    border-radius: 4px;
}

.paginator a:link, .paginator a:visited {
    border-radius: 4px;
}

a:link, a:visited {
    transition: none;
}

/* ---- Tombol tema (terang/gelap/otomatis) ------------------------------------ */
button.theme-toggle {
    background: none;
    border: 1px solid var(--lab-border);
    border-radius: 4px;
    padding: 4px 8px;
    margin-left: 12px;
    color: var(--lab-fg);
    cursor: pointer;
}

button.theme-toggle:hover {
    background: var(--lab-muted-bg);
}

button.theme-toggle svg {
    vertical-align: middle;
}

/* ---- Hormati preferensi gerak ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}