/* ====================================================================
   tokens.css -- gemeinsame Design-Grundlage fuer Admin- und Operator-Panel.

   Beide Panels hatten eigene :root-Bloecke mit abweichenden Werten fuer
   dieselbe Marke (--ink-2 war #123a84 vs #1a4a9a, --muted #5f6b86 vs
   #617190, --border #d9e2f3 vs #d7e1f4). Diese Datei ist jetzt die eine
   Quelle dafuer.

   Bewusst KEINE Layout-Klassen: das Operator-Panel definiert .btn, .card
   und .modal mit eigener Bedeutung: sie kollidieren mit Bootstrap und mit
   app.css. Hier stehen nur Tokens und Bausteine mit eindeutigen Namen.
   ==================================================================== */

    :root {
      --ink: #0f2f6f;
      --ink-2: #123a84;
      --paper: #eef3ff;
      --card: #ffffff;
      --accent: #ff7a1a;
      --accent-2: #2f8fd7;
      --accent-3: #1c4fa3;
      --muted: #5f6b86;
      --border: #d9e2f3;
      --text: #10243f;

      /* Flächen und Rahmen */
      --border-soft: #d7e4f7;
      --border-strong: #c7d6ee;
      --border-input: #bdd2f0;
      --surface-tint: #f8fbff;
      --surface-tint-2: #f6faff;
      --heading: #1f3f78;
      --label: #4b5b7d;

      /* Wiederverwendete Bausteine */
      --radius-card: 12px;
      --radius-panel: 16px;
      --shadow-card: 0 8px 18px rgba(16, 52, 107, 0.06);
      --shadow-panel: 0 10px 22px rgba(16, 52, 107, 0.08);
      --surface-card: linear-gradient(180deg, #ffffff 0%, var(--surface-tint) 100%);
      --brand-gradient: linear-gradient(135deg, var(--ink) 0%, var(--accent-3) 70%, var(--accent) 130%);

      /* Statusfarben */
      --ok: #157347;
      --ok-bg: #e8f6ee;
      --ok-border: #a9ddc0;
      --warn: #8a5300;
      --warn-bg: #fff6e6;
      --warn-border: #ffd79a;
      --danger: #b02a37;
      --danger-bg: #fdecee;
      --danger-border: #f3bcc3;
      --neutral: #4a5b7a;
      --neutral-bg: #eef2f9;
      --neutral-border: #d3dceb;
    }

    /* ==================================================================
       Status-Pillen (Tabellenzellen statt "Ja"/"Nein"-Fliesstext)
       ================================================================== */
    .status-pill {
      display: inline-block;
      border-radius: 999px;
      padding: 2px 9px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.01em;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .status-pill-ok {
      background: var(--ok-bg);
      color: var(--ok);
      border-color: var(--ok-border);
    }
    .status-pill-warn {
      background: var(--warn-bg);
      color: var(--warn);
      border-color: var(--warn-border);
    }
    .status-pill-danger {
      background: var(--danger-bg);
      color: var(--danger);
      border-color: var(--danger-border);
    }
    .status-pill-neutral {
      background: var(--neutral-bg);
      color: var(--neutral);
      border-color: var(--neutral-border);
    }
    .status-pill-muted {
      background: #f4f6fa;
      color: #7a8699;
      border-color: #e0e6f0;
    }
    .status-pill-info {
      background: #eaf3fd;
      color: #1a5c96;
      border-color: #bcd9f2;
    }
    .status-pill-accent {
      background: #fff3e8;
      color: #a24a00;
      border-color: #ffd2ac;
    }

    /* ==================================================================
       Sichtbarer Tastatur-Fokus. Vorher gab es keinen einzigen
       :focus-visible-Stil -- Tab-Navigation war unsichtbar.
       ================================================================== */
    a:focus-visible,
    button:focus-visible,
    .btn:focus-visible,
    .nav-link:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid rgba(47, 143, 215, 0.55);
      outline-offset: 2px;
      border-radius: 8px;
    }
    .form-control:focus-visible,
    .form-select:focus-visible {
      outline: 2px solid rgba(47, 143, 215, 0.45);
      outline-offset: 1px;
    }
    /* Maus-Klicks sollen den Ring nicht zeigen */
    .btn:focus:not(:focus-visible),
    .nav-link:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none;
    }

    /* ==================================================================
       Ladezustand: Skeleton-Zeilen statt Sprung von leer auf voll
       ================================================================== */
    .is-loading-rows tbody {
      position: relative;
    }
    .skeleton-row td {
      padding: 0.45rem !important;
    }
    .skeleton-bar {
      display: block;
      height: 11px;
      border-radius: 999px;
      background: linear-gradient(90deg, #e9eff8 0%, #f5f8fd 40%, #e9eff8 80%);
      background-size: 240% 100%;
      animation: skeleton-shimmer 1.25s ease-in-out infinite;
    }
    @keyframes skeleton-shimmer {
      0% { background-position: 120% 0; }
      100% { background-position: -120% 0; }
    }
    .skeleton-block {
      border-radius: 8px;
      height: 100%;
      min-height: 46px;
      background: linear-gradient(90deg, #e9eff8 0%, #f5f8fd 40%, #e9eff8 80%);
      background-size: 240% 100%;
      animation: skeleton-shimmer 1.25s ease-in-out infinite;
    }

    /* ==================================================================
       Toasts: es gab bisher nur den roten Fehler-Balken, kein
       Erfolgs-Feedback nach dem Speichern.
       ================================================================== */
    #toast-stack {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 1400;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: min(380px, calc(100vw - 32px));
      pointer-events: none;
    }
    .app-toast {
      pointer-events: auto;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 13px;
      border-radius: var(--radius-card);
      border: 1px solid var(--neutral-border);
      background: #fff;
      color: var(--text);
      box-shadow: 0 12px 28px rgba(16, 52, 107, 0.18);
      font-size: 14px;
      animation: toast-in 0.22s ease-out;
    }
    .app-toast .toast-icon {
      flex: 0 0 auto;
      font-size: 16px;
      line-height: 1.35;
    }
    .app-toast .toast-body { flex: 1; min-width: 0; }
    .app-toast .toast-close {
      flex: 0 0 auto;
      border: none;
      background: none;
      color: var(--muted);
      font-size: 17px;
      line-height: 1;
      padding: 0 2px;
      cursor: pointer;
    }
    .app-toast-success {
      border-color: var(--ok-border);
      background: var(--ok-bg);
      color: #0d4f31;
    }
    .app-toast-success .toast-icon { color: var(--ok); }
    .app-toast-error {
      border-color: var(--danger-border);
      background: var(--danger-bg);
      color: #7f1d1d;
    }
    .app-toast-error .toast-icon { color: var(--danger); }
    .app-toast-info {
      border-color: #bcd9f2;
      background: #eaf3fd;
      color: #14456f;
    }
    .app-toast-info .toast-icon { color: var(--accent-2); }
    @keyframes toast-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }
    @media (max-width: 576px) {
      #toast-stack {
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
      }
    }


    /* ==================================================================
       Bewegung reduzieren, wenn das System es verlangt
       ================================================================== */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }