/* =====================================================
   Vinosoma — Dark mode i Shoporama-stil
   Scoped under html.dark — ingen effekt i light mode.

   Farveskala: blåtonet næsten-sort (GitHub Primer-inspireret),
   samme palette som Shoporama-admin. Baggrunden er med vilje
   meget mørk — det er dét, der frigør kontrastbudgettet til tekst
   og borders. Flader adskilles primært af SYNLIGE borders, ikke
   af lysere fyld.

   Skalaen (mørkest → lysest):
     #010409  chrome (topbar, sidebar, footer)
     #0d1117  canvas / body
     #151b23  kort
     #212830  elevated (table-head, inputs, dropdown, modal)

   Teknik: Tailwind kompilerer dark:-utilities til
   `:is(.dark .dark\:bg-gray-800)` = specificitet (0,2,0).
   Reglerne herunder bruger `html.dark .dark\:bg-gray-800`
   = (0,2,1) og vinder derfor UDEN !important. Hover/focus-
   varianter overskrives hver for sig, så de bevarer deres
   egen højere specificitet.
   ===================================================== */

html.dark {
    color-scheme: dark;

    /* Flader */
    --dm-body-bg: #0d1117;
    --dm-card-bg: #151b23;
    --dm-elevated-bg: #212830;
    --dm-chrome-bg: #010409;
    --dm-inset-bg: #010409;
    --dm-hover-bg: #262c36;

    /* Borders */
    --dm-border: #3d444d;
    --dm-border-muted: #21262d;
    --dm-border-strong: #444c56;
    --dm-border-light: #656c76;

    /* Tekst */
    --dm-text-bright: #ffffff;
    --dm-text: #f0f6fc;
    --dm-text-dim: #d1d7e0;
    --dm-text-secondary: #9198a1;
    --dm-text-muted: #8b949e;
    --dm-text-faint: #656c76;

    /* Semantiske par */
    --dm-accent-fg: #4493f8;
    --dm-accent-bright: #79c0ff;
    --dm-accent-emphasis: #1f6feb;
    --dm-accent-subtle: rgba(56, 139, 253, 0.15);
    --dm-accent-muted: rgba(56, 139, 253, 0.40);

    --dm-success-fg: #3fb950;
    --dm-success-bright: #56d364;
    --dm-success-emphasis: #238636;
    --dm-success-subtle: rgba(46, 160, 67, 0.15);
    --dm-success-muted: rgba(46, 160, 67, 0.40);

    --dm-danger-fg: #f85149;
    --dm-danger-bright: #ff7b72;
    --dm-danger-emphasis: #da3633;
    --dm-danger-subtle: rgba(248, 81, 73, 0.15);
    --dm-danger-muted: rgba(248, 81, 73, 0.40);

    --dm-warning-fg: #d29922;
    --dm-warning-bright: #e3b341;
    --dm-warning-emphasis: #9e6a03;
    --dm-warning-subtle: rgba(187, 128, 9, 0.15);
    --dm-warning-muted: rgba(187, 128, 9, 0.40);

    /* Bagudkompatibilitet: override.css' egne dark-variabler
       peger nu på den samme palette. */
    --dark-bg-primary: #0d1117;
    --dark-bg-secondary: #151b23;
    --dark-bg-tertiary: #212830;
    --dark-bg-quaternary: #262c36;
    --dark-border: #3d444d;
    --dark-border-light: #656c76;
    --dark-text-primary: #f0f6fc;
    --dark-text-secondary: #d1d7e0;
    --dark-text-muted: #9198a1;
    --dark-text-disabled: #656c76;
    --dark-btn-bg: #21262d;
    --dark-btn-bg-hover: #30363d;
    --dark-focus-shadow: rgba(68, 147, 248, 0.25);
    --dark-hover-bg: rgba(255, 255, 255, 0.06);
    --dark-active-bg: rgba(255, 255, 255, 0.10);
    --dark-border-accent: rgba(255, 255, 255, 0.18);

    background-color: var(--dm-body-bg);
}

html.dark body {
    background-color: var(--dm-body-bg);
    color: var(--dm-text);
}

/* =====================================================
   1. Flader — bg-gray-*
   ===================================================== */

html.dark .dark\:bg-gray-900 { background-color: var(--dm-body-bg); }
html.dark .dark\:bg-gray-800 { background-color: var(--dm-card-bg); }
html.dark .dark\:bg-gray-700 { background-color: var(--dm-elevated-bg); }
html.dark .dark\:bg-gray-600 { background-color: var(--dm-hover-bg); }
html.dark .dark\:bg-gray-500 { background-color: var(--dm-border); }

html.dark .dark\:bg-gray-900\/80 { background-color: rgba(13, 17, 23, 0.80); }
html.dark .dark\:bg-gray-900\/50 { background-color: rgba(13, 17, 23, 0.50); }
html.dark .dark\:bg-gray-800\/90 { background-color: rgba(21, 27, 35, 0.90); }
html.dark .dark\:bg-gray-800\/50 { background-color: rgba(21, 27, 35, 0.50); }
html.dark .dark\:bg-gray-700\/50 { background-color: rgba(33, 40, 48, 0.50); }

html.dark .dark\:hover\:bg-gray-800:hover      { background-color: var(--dm-card-bg); }
html.dark .dark\:hover\:bg-gray-700:hover      { background-color: var(--dm-elevated-bg); }
html.dark .dark\:hover\:bg-gray-600:hover      { background-color: var(--dm-hover-bg); }
html.dark .dark\:hover\:bg-gray-500:hover      { background-color: var(--dm-border); }
html.dark .dark\:hover\:bg-gray-700\/50:hover  { background-color: rgba(33, 40, 48, 0.50); }
html.dark .dark\:hover\:bg-gray-900\/70:hover  { background-color: rgba(13, 17, 23, 0.70); }
html.dark .dark\:focus\:bg-gray-700:focus      { background-color: var(--dm-elevated-bg); }
html.dark .dark\:group-hover\:bg-gray-700:is(.group:hover *) { background-color: var(--dm-elevated-bg); }
html.dark .dark\:peer-checked\:bg-gray-500:is(.peer:checked ~ *) { background-color: var(--dm-accent-emphasis); }

/* =====================================================
   2. Tekst — text-gray-*
   ===================================================== */

html.dark .dark\:text-gray-100 { color: var(--dm-text); }
html.dark .dark\:text-gray-200 { color: var(--dm-text-dim); }
html.dark .dark\:text-gray-300 { color: var(--dm-text-dim); }
html.dark .dark\:text-gray-400 { color: var(--dm-text-secondary); }
html.dark .dark\:text-gray-500 { color: var(--dm-text-muted); }
html.dark .dark\:text-gray-600 { color: var(--dm-text-faint); }

html.dark .dark\:hover\:text-gray-100:hover { color: var(--dm-text); }
html.dark .dark\:hover\:text-gray-200:hover { color: var(--dm-text-dim); }
html.dark .dark\:hover\:text-gray-300:hover { color: var(--dm-text-dim); }
html.dark .dark\:hover\:text-gray-400:hover { color: var(--dm-text-secondary); }
html.dark .dark\:group-hover\:text-gray-300:is(.group:hover *) { color: var(--dm-text-dim); }

html.dark .dark\:placeholder-gray-400::placeholder      { color: var(--dm-text-muted); }
html.dark .dark\:placeholder-gray-500::placeholder      { color: var(--dm-text-faint); }
html.dark .dark\:placeholder\:text-gray-400::placeholder { color: var(--dm-text-muted); }
html.dark .dark\:placeholder\:text-gray-500::placeholder { color: var(--dm-text-faint); }

/* =====================================================
   3. Borders, dividers og rings — gray
   ===================================================== */

html.dark .dark\:border-gray-700     { border-color: var(--dm-border); }
html.dark .dark\:border-gray-700\/50 { border-color: rgba(61, 68, 77, 0.60); }
html.dark .dark\:border-gray-600     { border-color: var(--dm-border-strong); }
html.dark .dark\:border-gray-500     { border-color: var(--dm-border-light); }

html.dark .dark\:hover\:border-gray-600:hover { border-color: var(--dm-border-light); }
html.dark .dark\:hover\:border-gray-500:hover { border-color: var(--dm-border-light); }
html.dark .dark\:focus\:border-gray-400:focus { border-color: var(--dm-accent-fg); }

html.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }
html.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border-strong); }

html.dark .dark\:ring-gray-700 { --tw-ring-color: var(--dm-border); }
html.dark .dark\:ring-gray-600 { --tw-ring-color: var(--dm-border-strong); }
html.dark .dark\:ring-white\/10 { --tw-ring-color: var(--dm-border); }
html.dark .dark\:focus\:ring-gray-400:focus { --tw-ring-color: var(--dm-accent-muted); }
html.dark .dark\:focus\:ring-gray-500:focus { --tw-ring-color: var(--dm-accent-muted); }
html.dark .dark\:focus\:ring-gray-600:focus { --tw-ring-color: var(--dm-accent-muted); }
html.dark .dark\:peer-focus\:ring-gray-600:is(.peer:focus ~ *) { --tw-ring-color: var(--dm-accent-muted); }

/* =====================================================
   4. Gradient-stop's — gray
   Canvas-gradienten (from-gray-900 → to-gray-800) gøres flad,
   så siden læses som én rolig baggrund med kort ovenpå.
   ===================================================== */

html.dark .dark\:from-gray-900,
html.dark .dark\:from-gray-800 {
    --tw-gradient-from: #0d1117 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(13, 17, 23, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .dark\:from-gray-700,
html.dark .dark\:hover\:from-gray-700:hover {
    --tw-gradient-from: #212830 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(33, 40, 48, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .dark\:from-gray-600 {
    --tw-gradient-from: #262c36 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(38, 44, 54, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.dark .dark\:to-gray-900,
html.dark .dark\:to-gray-800 { --tw-gradient-to: #0d1117 var(--tw-gradient-to-position); }
html.dark .dark\:to-gray-700,
html.dark .dark\:hover\:to-gray-800:hover { --tw-gradient-to: #212830 var(--tw-gradient-to-position); }
html.dark .dark\:hover\:to-gray-600:hover { --tw-gradient-to: #262c36 var(--tw-gradient-to-position); }

html.dark .dark\:via-gray-900 {
    --tw-gradient-to: rgba(13, 17, 23, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #0d1117 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Logoets gradient-tekst: brug den lyse tekstfarve i stedet for
   Tailwinds grå, så "Vinosoma" står skarpt mod chrome-baggrunden. */
html.dark .dark\:from-gray-400 {
    --tw-gradient-from: #f0f6fc var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(240, 246, 252, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .dark\:to-gray-300 { --tw-gradient-to: #d1d7e0 var(--tw-gradient-to-position); }

/* =====================================================
   5. Accent (blå) — knapper, links, fokus
   Tailwinds blue-700 (#1d4ed8) er for mat mod næsten-sort.
   Primer-blå #1f6feb / #4493f8 bærer bedre.
   ===================================================== */

html.dark .dark\:bg-blue-500,
html.dark .dark\:bg-blue-600,
html.dark .dark\:bg-blue-700 { background-color: var(--dm-accent-emphasis); }
html.dark .dark\:bg-blue-800 { background-color: #1158c7; }
html.dark .dark\:bg-blue-900 { background-color: #0d419d; }

html.dark .dark\:bg-blue-900\/10 { background-color: rgba(56, 139, 253, 0.08); }
html.dark .dark\:bg-blue-900\/20 { background-color: var(--dm-accent-subtle); }
html.dark .dark\:bg-blue-900\/30 { background-color: rgba(56, 139, 253, 0.22); }
html.dark .dark\:bg-blue-900\/40 { background-color: rgba(56, 139, 253, 0.28); }
html.dark .dark\:bg-blue-900\/50 { background-color: rgba(56, 139, 253, 0.34); }

html.dark .dark\:hover\:bg-blue-600:hover,
html.dark .dark\:hover\:bg-blue-700:hover,
html.dark .dark\:hover\:bg-blue-800:hover { background-color: var(--dm-accent-fg); }
html.dark .dark\:hover\:bg-blue-900:hover { background-color: var(--dm-accent-emphasis); }
html.dark .dark\:hover\:bg-blue-900\/30:hover { background-color: rgba(56, 139, 253, 0.22); }
html.dark .dark\:hover\:bg-blue-900\/50:hover { background-color: rgba(56, 139, 253, 0.34); }

html.dark .dark\:text-blue-100,
html.dark .dark\:text-blue-200 { color: #cae8ff; }
html.dark .dark\:text-blue-300 { color: var(--dm-accent-bright); }
html.dark .dark\:text-blue-400,
html.dark .dark\:text-blue-500 { color: var(--dm-accent-fg); }
html.dark .dark\:hover\:text-blue-100:hover,
html.dark .dark\:hover\:text-blue-300:hover { color: var(--dm-accent-bright); }
html.dark .dark\:hover\:text-blue-400:hover { color: var(--dm-accent-fg); }
html.dark .dark\:group-hover\:text-blue-300:is(.group:hover *) { color: var(--dm-accent-bright); }

html.dark .dark\:border-blue-400,
html.dark .dark\:border-blue-600 { border-color: var(--dm-accent-fg); }
html.dark .dark\:border-blue-700,
html.dark .dark\:border-blue-800 { border-color: var(--dm-accent-muted); }
html.dark .dark\:hover\:border-blue-400:hover,
html.dark .dark\:hover\:border-blue-600:hover { border-color: var(--dm-accent-fg); }

html.dark .dark\:focus\:ring-blue-400:focus,
html.dark .dark\:focus\:ring-blue-500:focus,
html.dark .dark\:focus\:ring-blue-600:focus { --tw-ring-color: var(--dm-accent-muted); }
html.dark .dark\:focus\:border-blue-400:focus { border-color: var(--dm-accent-fg); }
html.dark .dark\:peer-focus\:ring-blue-800:is(.peer:focus ~ *) { --tw-ring-color: var(--dm-accent-muted); }
html.dark .dark\:accent-blue-400,
html.dark .dark\:accent-blue-500 { accent-color: var(--dm-accent-emphasis); }
html.dark .dark\:accent-gray-400 { accent-color: var(--dm-accent-emphasis); }

html.dark .dark\:from-blue-600,
html.dark .dark\:hover\:from-blue-700:hover {
    --tw-gradient-from: #1f6feb var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(31, 111, 235, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .dark\:to-blue-700,
html.dark .dark\:hover\:to-blue-800:hover { --tw-gradient-to: #1158c7 var(--tw-gradient-to-position); }

/* =====================================================
   6. Danger (rød)
   ===================================================== */

html.dark .dark\:bg-red-500,
html.dark .dark\:bg-red-700 { background-color: var(--dm-danger-emphasis); }
html.dark .dark\:bg-red-900 { background-color: #8e1519; }
html.dark .dark\:bg-red-900\/10 { background-color: rgba(248, 81, 73, 0.08); }
html.dark .dark\:bg-red-900\/20 { background-color: var(--dm-danger-subtle); }
html.dark .dark\:bg-red-900\/30,
html.dark .dark\:bg-red-800\/40 { background-color: rgba(248, 81, 73, 0.22); }
html.dark .dark\:bg-red-900\/40 { background-color: rgba(248, 81, 73, 0.28); }
html.dark .dark\:hover\:bg-red-800:hover { background-color: var(--dm-danger-fg); }
html.dark .dark\:hover\:bg-red-900\/20:hover { background-color: var(--dm-danger-subtle); }

html.dark .dark\:text-red-200 { color: #ffdcd7; }
html.dark .dark\:text-red-300 { color: var(--dm-danger-bright); }
html.dark .dark\:text-red-400 { color: var(--dm-danger-fg); }
html.dark .dark\:hover\:text-red-300:hover { color: var(--dm-danger-bright); }
html.dark .dark\:hover\:text-red-400:hover { color: var(--dm-danger-fg); }

html.dark .dark\:border-red-600 { border-color: var(--dm-danger-fg); }
html.dark .dark\:border-red-800 { border-color: var(--dm-danger-muted); }
html.dark .dark\:focus\:ring-red-600:focus { --tw-ring-color: var(--dm-danger-muted); }

/* =====================================================
   7. Success (grøn)
   ===================================================== */

html.dark .dark\:bg-green-500,
html.dark .dark\:bg-green-600,
html.dark .dark\:bg-green-700 { background-color: var(--dm-success-emphasis); }
html.dark .dark\:bg-green-800 { background-color: #1a7f37; }
html.dark .dark\:bg-green-900 { background-color: #133d21; }
html.dark .dark\:bg-green-900\/10 { background-color: rgba(46, 160, 67, 0.08); }
html.dark .dark\:bg-green-900\/20 { background-color: var(--dm-success-subtle); }
html.dark .dark\:bg-green-900\/30,
html.dark .dark\:bg-green-800\/40 { background-color: rgba(46, 160, 67, 0.22); }
html.dark .dark\:bg-green-900\/40,
html.dark .dark\:bg-green-800\/50 { background-color: rgba(46, 160, 67, 0.28); }
html.dark .dark\:hover\:bg-green-600:hover,
html.dark .dark\:hover\:bg-green-700:hover,
html.dark .dark\:hover\:bg-green-800:hover { background-color: var(--dm-success-fg); }
html.dark .dark\:hover\:bg-green-900:hover { background-color: var(--dm-success-emphasis); }
html.dark .dark\:hover\:bg-green-900\/50:hover { background-color: rgba(46, 160, 67, 0.28); }

html.dark .dark\:text-green-100,
html.dark .dark\:text-green-200 { color: #aff5b4; }
html.dark .dark\:text-green-300 { color: var(--dm-success-bright); }
html.dark .dark\:text-green-400,
html.dark .dark\:text-green-500 { color: var(--dm-success-fg); }
html.dark .dark\:hover\:text-green-200:hover,
html.dark .dark\:hover\:text-green-300:hover { color: var(--dm-success-bright); }
html.dark .dark\:hover\:text-green-400:hover { color: var(--dm-success-fg); }
html.dark .dark\:group-hover\:text-green-300:is(.group:hover *) { color: var(--dm-success-bright); }

html.dark .dark\:border-green-600 { border-color: var(--dm-success-fg); }
html.dark .dark\:border-green-700,
html.dark .dark\:border-green-800 { border-color: var(--dm-success-muted); }
html.dark .dark\:focus\:ring-green-400:focus,
html.dark .dark\:focus\:ring-green-500:focus,
html.dark .dark\:focus\:ring-green-600:focus { --tw-ring-color: var(--dm-success-muted); }

html.dark .dark\:from-green-600,
html.dark .dark\:hover\:from-green-700:hover {
    --tw-gradient-from: #238636 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(35, 134, 54, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .dark\:to-green-700,
html.dark .dark\:hover\:to-green-800:hover { --tw-gradient-to: #1a7f37 var(--tw-gradient-to-position); }

/* =====================================================
   8. Warning (gul/rav)
   ===================================================== */

html.dark .dark\:bg-yellow-900,
html.dark .dark\:bg-amber-900 { background-color: #4d2d00; }
html.dark .dark\:bg-yellow-900\/20,
html.dark .dark\:bg-amber-900\/20 { background-color: var(--dm-warning-subtle); }
html.dark .dark\:bg-yellow-900\/30,
html.dark .dark\:bg-yellow-800\/40 { background-color: rgba(187, 128, 9, 0.22); }
html.dark .dark\:bg-yellow-900\/40 { background-color: rgba(187, 128, 9, 0.28); }
html.dark .dark\:bg-yellow-900\/50 { background-color: rgba(187, 128, 9, 0.34); }
html.dark .dark\:group-hover\:bg-yellow-900\/30:is(.group:hover *) { background-color: rgba(187, 128, 9, 0.22); }

html.dark .dark\:text-yellow-200,
html.dark .dark\:text-amber-200 { color: #f8e3a1; }
html.dark .dark\:text-yellow-300 { color: var(--dm-warning-bright); }
html.dark .dark\:text-yellow-400,
html.dark .dark\:text-amber-400 { color: var(--dm-warning-fg); }

html.dark .dark\:border-yellow-700,
html.dark .dark\:border-yellow-800,
html.dark .dark\:border-amber-700 { border-color: var(--dm-warning-muted); }

/* =====================================================
   9. Chrome — topbar, sidebar og footer
   Som i Shoporama er "rammen" om siden mørkere end selve
   canvas'et, så indholdet træder frem.
   ===================================================== */

html.dark #top-app-bar {
    background-color: var(--dm-chrome-bg);
    background-image: none;
    border-bottom-color: var(--dm-border);
}

html.dark #top-app-bar .topbar-pattern { display: none; }

html.dark #sidebar,
html.dark #sidebar .sidebar-content,
html.dark #sidebar .sidebar-footer {
    background-color: var(--dm-chrome-bg);
    border-color: var(--dm-border);
}

html.dark #sidebar-toggle {
    background-color: var(--dm-elevated-bg);
    border-color: var(--dm-border);
}

/* --- Formularfelter ---
   Templates er uenige om input-baggrunden: 120 felter bruger
   dark:bg-gray-700 og 50 bruger dark:bg-gray-900. I Primer (og i
   Shoporama, jf. --dm-input-bg) er felter NEDSÆNKEDE — canvas, ikke
   elevated. #212830 er knap-fladen, ikke felt-fladen; det var den, der
   gav siderne det grå præg. Alle felter samles derfor på canvas. */
html.dark input.dark\:bg-gray-700,
html.dark select.dark\:bg-gray-700,
html.dark textarea.dark\:bg-gray-700,
html.dark input.dark\:bg-gray-800,
html.dark select.dark\:bg-gray-800,
html.dark textarea.dark\:bg-gray-800 {
    background-color: var(--dm-input-bg);
}

/* --- Semantiske tints der var fladet ud til grå ---
   211 steder i templates står mønstret `bg-green-50 dark:bg-gray-800`
   (og tilsvarende for red/blue/yellow): en farvet tint i light mode, som
   i dark mode blev til en grå plade. Det kostede både farven — succes-
   og fejlbeskeder så ens ud — og gav de grå felter, fx grape-chippen på
   my-wine/view, der i light mode er blå.

   De får deres egen farve tilbage som Primer-subtile tints, præcis som
   Shoporamas `.alert-success { background: var(--dm-success-subtle) }`.
   Specificiteten (0,3,1) slår grå-mappingen ovenfor. */
html.dark .bg-green-50.dark\:bg-gray-900,
html.dark .bg-green-50.dark\:bg-gray-800,
html.dark .bg-green-50.dark\:bg-gray-700,
html.dark .bg-green-50.dark\:bg-gray-600  { background-color: var(--dm-success-subtle); }

html.dark .bg-red-50.dark\:bg-gray-900,
html.dark .bg-red-50.dark\:bg-gray-800,
html.dark .bg-red-50.dark\:bg-gray-700,
html.dark .bg-red-50.dark\:bg-gray-600    { background-color: var(--dm-danger-subtle); }

html.dark .bg-blue-50.dark\:bg-gray-900,
html.dark .bg-blue-50.dark\:bg-gray-800,
html.dark .bg-blue-50.dark\:bg-gray-700,
html.dark .bg-blue-50.dark\:bg-gray-600   { background-color: var(--dm-accent-subtle); }

html.dark .bg-yellow-50.dark\:bg-gray-900,
html.dark .bg-yellow-50.dark\:bg-gray-800,
html.dark .bg-yellow-50.dark\:bg-gray-700,
html.dark .bg-amber-50.dark\:bg-gray-800,
html.dark .bg-amber-50.dark\:bg-gray-700  { background-color: var(--dm-warning-subtle); }

/* Neutrale chips (fx grape-varianter) er grå i BEGGE temaer. Har de i
   forvejen en synlig kant, kan de nøjes med den — samme regel som
   panelerne. Chips uden kant beholder deres fyld, ellers forsvandt de. */
html.dark span.dark\:bg-gray-700[class*="dark:border-gray-"],
html.dark span.dark\:bg-gray-800[class*="dark:border-gray-"] {
    background-color: transparent;
}

/* Kanten skal følge farven, ellers står en grå ramme om en farvet flade. */
html.dark .bg-green-50[class*="dark:border-gray-"]  { border-color: var(--dm-success-muted); }
html.dark .bg-red-50[class*="dark:border-gray-"]    { border-color: var(--dm-danger-muted); }
html.dark .bg-blue-50[class*="dark:border-gray-"]   { border-color: var(--dm-accent-muted); }
html.dark .bg-yellow-50[class*="dark:border-gray-"],
html.dark .bg-amber-50[class*="dark:border-gray-"]  { border-color: var(--dm-warning-muted); }

/* --- Checkbokse og radioknapper ---
   Browseren tegner selv native felter, og dens umarkerede boks er en varm
   grå, der IKKE følger paletten — i tabeller stod de som lysegrå klodser
   midt i det blå-sorte. De tegnes derfor selv, med Primers værdier:
   canvas-fyld, tydelig kant, accent-blå når de er markeret.

   Størrelsen sættes med :where() (specificitet 0), så Tailwinds h-4/w-4,
   h-5/w-5 osv. stadig bestemmer — reglen er kun et sikkerhedsnet for
   felter uden størrelsesklasse. */
:where(html.dark) :where(input[type="checkbox"], input[type="radio"]) {
    width: 1rem;
    height: 1rem;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
    background-color: var(--dm-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--dm-border-light);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

html.dark input[type="radio"] {
    border-radius: 50%;
}

html.dark input[type="checkbox"]:hover:not(:disabled),
html.dark input[type="radio"]:hover:not(:disabled) {
    border-color: var(--dm-text-secondary);
}

html.dark input[type="checkbox"]:checked,
html.dark input[type="checkbox"]:indeterminate,
html.dark input[type="radio"]:checked {
    background-color: var(--dm-accent-emphasis);
    border-color: var(--dm-accent-emphasis);
}

html.dark input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E");
}

html.dark input[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Crect x='4' y='7' width='8' height='2' rx='1'/%3E%3C/svg%3E");
}

html.dark input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
}

html.dark input[type="checkbox"]:focus-visible,
html.dark input[type="radio"]:focus-visible {
    outline: 2px solid var(--dm-accent-fg);
    outline-offset: 1px;
}

html.dark input[type="checkbox"]:disabled,
html.dark input[type="radio"]:disabled {
    background-color: var(--dm-elevated-bg);
    border-color: var(--dm-border);
    cursor: not-allowed;
}

/* Dark mode-kontakten i sidebaren er en .sr-only checkbox, hvis udseende
   tegnes af søsker-diven — den må ikke få boks-stylingen. */
html.dark input[type="checkbox"].sr-only {
    -webkit-appearance: auto;
    appearance: auto;
    border: 0;
    background: none;
}

/* Initial-badgen i brugerknappen havde næsten samme farve som selve
   knappens gradient og forsvandt derfor som flade — "MR" så ud til at
   klistre op ad navnet. Den får sin egen, lysere flade med en tynd
   kant, så den læses som en badge med luft omkring. */
html.dark #user-menu-button > div:first-child {
    background-image: none;
    background-color: #30363d;
    color: var(--dm-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

html.dark #footer .footer-surface {
    background-color: var(--dm-chrome-bg);
    border-top-color: var(--dm-border);
}

html.dark #footer .footer-glow { display: none; }

/* Aktivt menupunkt: accent-tint + venstrestribe, som i Shoporama.
   scripts.js sætter inline styles på det aktive punkt, derfor
   !important her. */
html.dark #sidebar a.active,
html.dark #sidebar button.active {
    background-color: var(--dm-accent-subtle) !important;
    color: var(--dm-text) !important;
    box-shadow: inset 3px 0 0 0 var(--dm-accent-fg);
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track { background: var(--dm-body-bg); }
html.dark ::-webkit-scrollbar-thumb { background: var(--dm-border); }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--dm-border-light); }

html.dark ::selection {
    background-color: var(--dm-accent-emphasis);
    color: #ffffff;
}

/* Skygger er praktisk talt usynlige mod næsten-sort — et kort, der
   kun afgrænses af en skygge, flyder sammen med canvas. Header-kort
   (rounded-2xl shadow-xl) og statistik-kort (rounded-lg shadow) har
   ingen border-klasse i markup'en, så de får en rigtig 1px border
   her. Kort der allerede HAR .border eller en ring springes over,
   så de ikke får dobbelt kant. */
html.dark div.dark\:bg-gray-800[class*="rounded-"][class*="shadow"]:not(.border):not(.border-0):not(.border-2):not([class*="ring-1"]),
html.dark section.dark\:bg-gray-800[class*="rounded-"][class*="shadow"]:not(.border):not(.border-0):not([class*="ring-1"]),
html.dark form.dark\:bg-gray-800[class*="rounded-"][class*="shadow"]:not(.border):not(.border-0):not([class*="ring-1"]) {
    border: 1px solid var(--dm-border);
}

/* Sidens paneler har ingen egen flade.
   Templates pakker kort i kort i kort — alle med `bg-white
   dark:bg-gray-800` (eller -700). I light mode virker det, fordi hvide
   flader adskilles fint af borders; i dark mode blev hvert fyld-trin til
   en grå plade mod den mørke canvas. Vi forsøgte både en stigende og en
   faldende fladeskala — begge gav synlige grå felter.

   Reglen er derfor gennemført: INDE i siden er flader canvas, og struktur
   kommer udelukkende fra borders. Det svarer til Shoporamas melt af
   side-skallen, bare ført helt igennem.

   Kravet om `div` holder knapper, inputs og <tbody> udenfor — de har
   deres egne flader. Modaler undtages nedenfor.

   Specificiteten er nøje sat til (0,2,2): `:where()` tæller nul, `main`
   og `div` er to elementer, og de to `:is()` er to klasser. Det slår
   Tailwinds basisflade (0,2,0), men taber til hover-varianter (0,3,0) —
   en regel med højere specificitet (fx med #main-content) ville slå
   hover ihjel på klikbare paneler. */
:where(html.dark) main div:is(.dark\:bg-gray-800, .dark\:bg-gray-900, .dark\:bg-gray-700):is([class*="rounded-"]) {
    background-color: var(--dm-body-bg);
}

/* Modaler skal netop løfte sig fra siden og beholder kort-fladen. */
html.dark .fixed div:is(.dark\:bg-gray-800, .dark\:bg-gray-700):is([class*="rounded-"]) {
    background-color: var(--dm-card-bg);
}

/* Tabeller har ingen egen flade.
   <thead class="dark:bg-gray-700"> og <tbody class="dark:bg-gray-800">
   gav tabellen en lysere plade midt i det nu mørke side-kort — den læste
   som en grå slab, fordi den hverken har border eller runde hjørner og
   løber helt ud i kortets kant. Tabellen ligger nu direkte på kortet og
   afgrænses udelukkende af sine rækkeskillelinjer, som GitHubs egne
   lister.

   Specificiteten er med vilje (0,2,2): den slår Tailwinds basisflade
   `:is(.dark .dark\:bg-gray-800)` (0,2,0), men taber til hover-varianten
   `:is(.dark .dark\:hover\:bg-gray-700:hover)` (0,3,0). Et ID her ville
   vinde over ALT og slå rækkernes hover ihjel. */
html.dark table.dark\:bg-gray-800,
html.dark table.dark\:bg-gray-700,
html.dark thead.dark\:bg-gray-800,
html.dark thead.dark\:bg-gray-700,
html.dark tbody.dark\:bg-gray-800,
html.dark tbody.dark\:bg-gray-700,
html.dark tr.dark\:bg-gray-800,
html.dark tr.dark\:bg-gray-700 {
    background-color: transparent;
}



html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.6);
    --tw-shadow: var(--tw-shadow-colored);
}

/* =====================================================
   10. Topbar shrink-on-scroll
   Når man scroller ned bliver topbjælken lavere (samme effekt
   som i Shoporama). Højden styres af --topbar-h, som BÅDE
   bjælken, sidebaren og indholdet bruger, så alt skrumper
   synkront uden at efterlade et hul. JS sætter body.topbar-shrink.
   Gælder i BEGGE temaer — derfor uden html.dark.
   ===================================================== */

:root {
    --topbar-h: 3.5rem;   /* svarer til Tailwinds mt-14 */
}

body.topbar-shrink {
    --topbar-h: 2.75rem;
}

#top-app-bar {
    height: var(--topbar-h);
    transition: height 0.25s ease, box-shadow 0.25s ease;
}

#top-app-bar .topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

#top-app-bar .topbar-inner > div {
    width: 100%;
}

body.topbar-shrink #top-app-bar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Kun de geometriske egenskaber der faktisk ændres — ikke `all`,
   så hover-baggrunde stadig skifter med det samme. */
#topbar-logo-box,
#topbar-logo-box img,
#topbar-brand,
#topbar-tagline,
#topbar-user-role,
#top-app-bar .topbar-btn,
#top-app-bar #user-menu-button,
#top-app-bar #user-menu-button > div:first-child {
    transition: width 0.25s ease, height 0.25s ease, padding 0.25s ease,
                font-size 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

body.topbar-shrink #topbar-logo-box {
    width: 2rem;
    height: 2rem;
}

body.topbar-shrink #topbar-logo-box img {
    width: 1.6rem;
    height: 1.6rem;
}

body.topbar-shrink #topbar-brand {
    font-size: 1rem;
    line-height: 1.25rem;
}

body.topbar-shrink #topbar-tagline {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-top: 0;
}

body.topbar-shrink #top-app-bar .topbar-btn {
    padding: 0.4rem;
}

body.topbar-shrink #top-app-bar #user-menu-button {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

body.topbar-shrink #top-app-bar #user-menu-button > div:first-child {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
}

/* Rollen ("Admin") ville ellers holde knappen højere end den
   krympede bjælke — den skjules sammen med taglinen. */
body.topbar-shrink #topbar-user-role {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Indhold, sidebar og sidebar-toggle følger bjælkens højde */
#main-content {
    margin-top: var(--topbar-h);
    transition: margin-top 0.25s ease;
}

#sidebar {
    padding-top: calc(var(--topbar-h) + 1.5rem);
    transition: padding-top 0.25s ease;
}

#sidebar-toggle {
    top: calc(var(--topbar-h) + 2.5rem);
    transition: top 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    #top-app-bar,
    #main-content,
    #sidebar,
    #sidebar-toggle,
    #topbar-logo-box,
    #topbar-brand,
    #topbar-tagline {
        transition: none;
    }
}