/*
 * Utseende: Modernt (ui-modern). Statisk fil – passerar inte Chrome 101-bygget.
 * Alla regler under html.ui-modern; hex-värdena i styles.css är alltid fallback,
 * och varje modern färg föregås av ett hex-värde så att sidan aldrig blir genomskinlig.
 */
html.ui-modern {
  --background: #f6f7f9; --background: oklch(0.975 0.004 160);
  --foreground: #1a1f1d; --foreground: oklch(0.22 0.012 160);
  --muted: #5d6763; --muted: oklch(0.5 0.012 160);
  --panel: #ffffff;
  --panel-2: #f1f4f2; --panel-2: oklch(0.963 0.006 160);
  --border: #dde3e0; --border: oklch(0.9 0.008 160);
  --primary: #087a45; --primary: oklch(0.52 0.13 155);
  --primary-soft: #e3f3ea; --primary-soft: oklch(0.95 0.035 155);
  --amber: #a15c00; --amber: oklch(0.6 0.14 65);
  --amber-soft: #fff3d8; --amber-soft: oklch(0.96 0.05 85);
  --red: #c0352a; --red: oklch(0.55 0.19 27);
  --red-soft: #fde9e6; --red-soft: oklch(0.95 0.03 25);
  --cyan: #0a7486; --cyan: oklch(0.52 0.09 210);
  --cyan-soft: #e0f3f6; --cyan-soft: oklch(0.95 0.03 210);
  --sidebar: #ffffff; --sidebar: oklch(0.99 0.003 160 / 0.82);
  --sidebar-2: #f1f4f2; --sidebar-2: oklch(0.955 0.008 160);
  --sidebar-foreground: #1a1f1d; --sidebar-foreground: oklch(0.22 0.012 160);
  --sidebar-muted: #5d6763; --sidebar-muted: oklch(0.5 0.012 160);
  --sidebar-border: #e3e8e5; --sidebar-border: oklch(0.92 0.006 160);
  --m-shadow: 0 1px 2px rgba(16,24,20,.05), 0 8px 24px -12px rgba(16,24,20,.12);
  --m-radius: 12px;
}
@media (prefers-color-scheme: dark) {
  html.ui-modern {
    color-scheme: dark;
    --background: #0f1412; --background: oklch(0.17 0.01 160);
    --foreground: #e8eeeb; --foreground: oklch(0.94 0.008 160);
    --muted: #93a19a; --muted: oklch(0.7 0.015 160);
    --panel: #161d1a; --panel: oklch(0.21 0.012 160);
    --panel-2: #1c2421; --panel-2: oklch(0.245 0.012 160);
    --border: #2b3632; --border: oklch(0.32 0.012 160);
    --primary: #2fbf77; --primary: oklch(0.72 0.16 155);
    --primary-soft: #143524; --primary-soft: oklch(0.3 0.06 155);
    --primary-foreground: #06140c;
    --amber: #f0a33a; --amber: oklch(0.78 0.14 70);
    --amber-soft: #3a2a10; --amber-soft: oklch(0.3 0.05 70);
    --red: #f2675b; --red: oklch(0.68 0.18 27);
    --red-soft: #3b1714; --red-soft: oklch(0.29 0.06 25);
    --cyan: #4cc3d6; --cyan: oklch(0.76 0.1 210);
    --cyan-soft: #10313a; --cyan-soft: oklch(0.3 0.05 210);
    --sidebar: #131a17; --sidebar: oklch(0.19 0.011 160 / 0.8);
    --sidebar-2: #1c2421; --sidebar-2: oklch(0.25 0.012 160);
    --sidebar-foreground: #e8eeeb; --sidebar-foreground: oklch(0.94 0.008 160);
    --sidebar-muted: #93a19a; --sidebar-muted: oklch(0.7 0.015 160);
    --sidebar-border: #26302c; --sidebar-border: oklch(0.29 0.012 160);
    --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
  }
  html.ui-modern aside, html.ui-modern [role="dialog"], html.ui-modern [role="menu"], html.ui-modern [role="listbox"], html.ui-modern [data-sonner-toast] { background-color: var(--panel); }
}
html.ui-modern body { background: var(--background); -webkit-font-smoothing: antialiased; }
html.ui-modern .app-root { background-image: none; font-size: 14px; }
html.ui-modern .app-aside {
  width: 16.5rem; background-color: var(--sidebar);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
html.ui-modern .app-aside nav a { border-left-width: 0; border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
html.ui-modern header.sticky {
  background-color: var(--panel);
  background-color: color-mix(in oklab, var(--panel) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html.ui-modern main { max-width: 1440px; width: 100%; margin-inline: auto; }
html.ui-modern main .border.bg-panel, html.ui-modern main section.border, html.ui-modern main .border-2.bg-panel {
  border-radius: var(--m-radius); box-shadow: var(--m-shadow);
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  container-type: inline-size;
}
html.ui-modern .rounded-sm { border-radius: 8px; }
html.ui-modern .rounded-md { border-radius: 10px; }
html.ui-modern .rounded-lg { border-radius: 14px; }
html.ui-modern main button, html.ui-modern main a, html.ui-modern main input, html.ui-modern main select {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
html.ui-modern main input:not([type="checkbox"]):not([type="radio"]), html.ui-modern main select, html.ui-modern main textarea { border-radius: 8px; }
html.ui-modern main :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent); }
html.ui-modern main table thead th { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
html.ui-modern main tbody tr:hover { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
html.ui-modern main section:has(> table) { overflow: hidden; }
html.ui-modern h1.font-display { letter-spacing: -0.01em; }
@container (max-width: 420px) {
  html.ui-modern main .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-modern * { transition: none !important; }
}
html.ui-modern nav a[aria-current="page"], html.ui-modern nav a.active { color: var(--primary-foreground); font-weight: 600; }