:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --border-radius: 10px;

  --z-papier: #FCFCFD;
  --z-papier-zwei: #F2F3F4;
  --z-haarlinie: #E6E7E9;
  --z-leise: #575B60;
  --z-text: #3E4146;
  --z-tinte: #14191E;
  --z-signal: #ED6000;
  --z-signal-text: #A93300;
  --z-signal-flaeche: #FFF5ED;
  --z-auf-signal: #090C11;
  --z-haupt: #14191E;
  --z-haupt-hover: #25292F;
  --z-auf-haupt: #FCFCFD;
  --z-gut: #017A4F;
  --z-gut-flaeche: #E8FBEF;
  --z-fehler: #BD0A3D;
  --z-fehler-flaeche: #FFF2F2;
  --z-warnung: #8D5403;
  --z-warnung-flaeche: #FDF7E1;
  --z-schatten: 0 12px 32px rgb(9 12 17 / .12), 0 2px 6px rgb(9 12 17 / .07);
  --z-dauer: 160ms;
  --z-dauer-druck: 120ms;
  --z-kurve: cubic-bezier(.23, 1, .32, 1);
}

html.dark {
  --z-papier: #14191E;
  --z-papier-zwei: #1C2127;
  --z-haarlinie: #2B3037;
  --z-leise: #A5A8AB;
  --z-text: #D2D4D7;
  --z-tinte: #F8F9FA;
  --z-signal-text: #FF843F;
  --z-signal-flaeche: rgb(237 96 0 / .14);
  --z-haupt: #F8F9FA;
  --z-haupt-hover: #E6E7E9;
  --z-auf-haupt: #090C11;
  --z-gut: #3EB881;
  --z-gut-flaeche: rgb(62 184 129 / .14);
  --z-fehler: #F56B7C;
  --z-fehler-flaeche: rgb(245 107 124 / .14);
  --z-warnung: #F9C64E;
  --z-warnung-flaeche: rgb(249 198 78 / .12);
  --z-schatten: 0 12px 32px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
}

html:root { --color-white: #FCFCFD; }

::selection { background: rgb(237 96 0 / .28); }

body { -webkit-font-smoothing: antialiased; }

table td, table th, .tabular-nums { font-variant-numeric: tabular-nums; }

:where(a, button, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--z-signal); outline-offset: 2px; }

html body ol li > a.active { color: var(--z-tinte); }
html body ol li > a.active .material-symbols-outlined { color: var(--z-signal); }
@media (hover: hover) and (pointer: fine) {
  html body ol li > a[class*="hover:text-primary"]:hover { color: var(--z-tinte); }
}
html.dark img[src*="zentrale/micowo."] { border-radius: 22%; box-shadow: 0 0 0 1px var(--z-haarlinie); }

/* Unfolds orange Flaechen werden Tinte: eine Knopffarbe in der ganzen Zentrale */
:is(a, button, input)[class~="bg-primary-600"] { background-color: var(--z-haupt); border-color: transparent; color: var(--z-auf-haupt); }
:is(a, button, input)[class~="bg-primary-600"] * { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  :is(a, button, input)[class~="bg-primary-600"]:hover { background-color: var(--z-haupt-hover); }
}

/* Links im Inhalt: Tinte mit Haarlinie statt Orange */
#main a[class~="text-primary-600"], a.zentrale-link, :where(.readonly) a:not([class]) {
  color: var(--z-tinte); text-decoration: underline; text-decoration-color: var(--z-haarlinie);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  #main a[class~="text-primary-600"]:hover, a.zentrale-link:hover, :where(.readonly) a:not([class]):hover { text-decoration-color: var(--z-tinte); }
}
#main span[class~="text-primary-600"] { color: var(--z-tinte); }

/* Auswahlleiste unter Listen */
#changelist-actions > div { background-color: var(--color-base-900); }
#changelist-actions button[type="submit"] { background-color: var(--color-base-700); }
html.dark #changelist-actions > div { background-color: var(--color-base-700); }
html.dark #changelist-actions button[type="submit"] { background-color: var(--color-base-900); }
#changelist-actions :focus-visible { outline-color: var(--color-white); }

/* Fussleisten deckend statt Milchglas */
[class~="lg:backdrop-blur-xs"], .zentrale-fussleiste { background-color: var(--z-papier); backdrop-filter: none; -webkit-backdrop-filter: none; }
.zentrale-seite-wort, .zentrale-anzahl { color: var(--z-leise); }
.zentrale-seite [class~="text-primary-600"] { font-weight: 600; }
.zentrale-loeschen { background-color: var(--z-papier); color: var(--z-fehler); border-color: color-mix(in oklch, var(--z-fehler) 40%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .zentrale-loeschen:hover { background-color: var(--z-fehler-flaeche); }
}

/* Dialoge */
#modal-overlay { margin-right: 0; }
.zentrale-dialog-ziel { margin: 0; color: var(--z-leise); }
.zentrale-dialog-ziel strong { color: var(--z-tinte); font-weight: 600; }
#dialog-form:not(:has(input:not([type="hidden"]), select, textarea, .zentrale-dialog-ziel)) { display: none; }
#dialog-form:not(:has(input:not([type="hidden"]), select, textarea, .zentrale-dialog-ziel)) + div { border-top-width: 0; }

/* Suchfenster */
#command-results-list li > a > span[class~="w-8"] { flex-shrink: 0; }
#command-results-list li.active > a { background-color: var(--z-haupt); }
#command-results-list li.active > a, #command-results-list li.active > a span { color: var(--z-auf-haupt); }
#command-results-list li.active > a > span[class~="w-8"] { background-color: transparent; border-color: color-mix(in srgb, currentColor 35%, transparent); }
@media (max-width: 640px) {
  div:has(> #command-results-note) > div:not(#command-results-note) { display: none; }
  div:has(> #command-results-note:not(:has(span))) { display: none; }
  #command-results-note { margin-left: 0; }
}

/* Rohdaten (JSON) ohne bunte Einfaerbung */
#main .highlight span { color: inherit; font-weight: 400; }

/* Kopfzeile am Handy: nur die letzte Stufe des Pfads, der Pfeil daneben fuehrt zurueck */
@media (max-width: 640px) {
  h1[class~="text-important"] > :has(~ :not([class~="text-xs"])) { display: none; }
}

/* Untertabellen behalten ihre Spaltenkoepfe auch unter 1024 Pixel */
.inline-related thead[class~="hidden"] { display: table-header-group; }

/* Nutzermenue: gewaehltes Farbschema fett statt orange, die Navigation dahinter tritt zurueck, solange es offen ist */
#nav-sidebar nav a[class~="text-primary-600"] { color: var(--z-tinte); font-weight: 600; }
#nav-sidebar:has(nav[x-show="openUserLinks"]:not([x-cloak]):not([style*="display: none"])) #nav-sidebar-apps { opacity: .25; }

/* Tippflaechen: am Finger mindestens 44 Pixel */
@media (pointer: coarse) {
  :is(input:not([type="checkbox"]):not([type="radio"]), select, button, a)[class~="h-[38px]"] { height: 44px; }
  a[class~="w-[38px]"] { width: 44px; }
  td.field-actions_holder span[x-ref] { height: 44px; width: 44px; align-items: center; margin-block: -8px; }
  body > nav a[class~="max-h-[30px]"] { max-height: none; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  }
}