/*
 * CS2-Panel Design-System (mobile-first, Dark-Theme als Standard).
 * Propshaft bindet über `stylesheet_link_tag :app` diese Datei und components/*.css ein.
 * Diese Datei enthält Tokens, Reset und Typografie; Komponenten liegen in components/.
 * Breakpoints: ab 600px Buttons inline, ab 900px Seitenleiste statt unterer Navigation.
 */
:root {
  color-scheme: dark;

  --color-bg: #0e1116;
  --color-surface: #171b22;
  --color-surface-2: #1f252e;
  --color-border: #2f3947;
  --color-text: #e8ecf2;
  --color-muted: #a3adbb;
  --color-link: #8ab8ff;

  --color-primary: #2f6fe0;
  --color-primary-hover: #2a62c8;
  --color-on-primary: #fff;
  --color-danger: #c62828;
  --color-danger-hover: #ae2222;
  --color-on-danger: #fff;
  --color-focus: #ffd24a;

  --color-ok-bg: #12301f;
  --color-ok-text: #7be3a6;
  --color-warn-bg: #3a2d0c;
  --color-warn-text: #ffd36e;
  --color-error-bg: #3b1417;
  --color-error-text: #ffa7a2;
  --color-info-bg: #14283f;
  --color-info-text: #a9cdff;

  --color-status-online: #3ddc84;
  --color-status-offline: #ff5a52;
  --color-status-unknown: #8892a0;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgb(0 0 0 / 40%);
  --touch-target: 48px;

  --appbar-height: 56px;
  --bottomnav-height: 64px;
  --sidebar-width: 15rem;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-bg: #f2f4f7;
    --color-surface: #fff;
    --color-surface-2: #e9ecf1;
    --color-border: #c5cbd5;
    --color-text: #161a20;
    --color-muted: #4d5663;
    --color-link: #1a55b8;

    --color-primary: #1a5fd0;
    --color-primary-hover: #154fb0;
    --color-focus: #8a5a00;

    --color-ok-bg: #e3f4e8;
    --color-ok-text: #145a2b;
    --color-warn-bg: #fff1cc;
    --color-warn-text: #6b4800;
    --color-error-bg: #fdecea;
    --color-error-text: #8c1d18;
    --color-info-bg: #e3eefc;
    --color-info-text: #123f85;

    --color-status-online: #1e9e5a;
    --color-status-offline: #d33a32;
    --shadow: 0 1px 3px rgb(0 0 0 / 15%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-link); }
code, kbd { font-family: var(--font-mono); }
img, svg { max-width: 100%; }
dl { margin: 0; }
dt { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-3); }
dd { margin: 0; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.muted { color: var(--color-muted); }
.muted-block { color: var(--color-muted); display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

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