/* ════════════════════════════════════════════════════════════════════════════
   Gemeinsame Grundlage für Büro, Technikeransicht und Kundenportal.
   Wird in allen drei Layouts VOR style.css / technik.css geladen.
   Farben nur über diese Variablen – keine Hex-Werte in Views oder Seiten-CSS.
   Plan: docs/ui-plan.md
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marke */
  --pt-grey: #58595B;
  --pt-grey-dark: #414244;
  --pt-yellow: #FBD100;
  --pt-yellow-dark: #d9b400;
  --pt-yellow-soft: #fffbea;

  /* Neutrale Flächen und Schrift (Kontrast auf Weiss: ink 15:1, muted 6.4:1) */
  --pt-ink: #23242a;
  --pt-muted: #5c5d62;
  --pt-subtle: #8a8b8f;      /* nur für Beschriftungen ab 14 px, nicht für Fliesstext */
  --pt-line: #dcdee0;
  --pt-line-soft: #eaebec;
  --pt-bg: #f2f3f5;
  --pt-surface: #ffffff;

  /* Status – feste Bedeutung, überall gleich */
  --pt-ok: #1e7a45;          /* erledigt, verfügbar, läuft */
  --pt-ok-bg: #e3f3ea;
  --pt-warn: #8a5a00;        /* offen, wartet, Pause – Text */
  --pt-warn-fill: #e8a300;   /* Pause – Fläche/Rahmen */
  --pt-warn-bg: #fff4d6;
  --pt-danger: #c62828;      /* Fehler, defekt, überfällig */
  --pt-danger-bg: #fbe5e5;
  --pt-info: #3d5a80;        /* neutral hervorgehoben */
  --pt-info-bg: #e7eef6;
  --pt-idle: #8a8b8f;        /* inaktiv, nicht am Arbeiten */

  /* Form */
  --pt-radius-sm: 8px;
  --pt-radius: 12px;
  --pt-radius-lg: 16px;
  --pt-focus: 0 0 0 3px rgba(251, 209, 0, .55);
  --pt-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -8px rgba(16,24,40,.10);

  /* Bedienung */
  --pt-touch: 44px;          /* Mindesthöhe Büro (Handy/Tablet) */
  --pt-touch-lg: 56px;       /* Technikeransicht, handschuhtauglich */

  /* Systemschrift */
  --pt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap auf die Marke umstellen */
  --bs-body-font-family: var(--pt-font);
  --bs-body-color: var(--pt-ink);
  --bs-body-bg: var(--pt-bg);
  --bs-secondary-color: var(--pt-muted);
  --bs-border-color: var(--pt-line);
  --bs-link-color: var(--pt-grey-dark);
  --bs-link-color-rgb: 65, 66, 68;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-success: var(--pt-ok);
  --bs-success-rgb: 30, 122, 69;
  --bs-danger: var(--pt-danger);
  --bs-danger-rgb: 198, 40, 40;
  --bs-warning: var(--pt-warn-fill);
  --bs-warning-rgb: 232, 163, 0;
  --bs-focus-ring-color: rgba(251, 209, 0, .55);
}

body { background: var(--pt-bg); color: var(--pt-ink); }

/* «hidden» gilt immer, auch bei Elementen mit display:flex/grid */
[hidden] { display: none !important; }

/* ── Knöpfe: Gelb ist überall die Hauptaktion ───────────────────────────── */
.btn-primary {
  --bs-btn-color: var(--pt-ink);
  --bs-btn-bg: var(--pt-yellow);
  --bs-btn-border-color: var(--pt-yellow);
  --bs-btn-hover-color: var(--pt-ink);
  --bs-btn-hover-bg: var(--pt-yellow-dark);
  --bs-btn-hover-border-color: var(--pt-yellow-dark);
  --bs-btn-active-color: var(--pt-ink);
  --bs-btn-active-bg: var(--pt-yellow-dark);
  --bs-btn-active-border-color: var(--pt-yellow-dark);
  --bs-btn-disabled-color: var(--pt-ink);
  --bs-btn-disabled-bg: var(--pt-yellow);
  --bs-btn-disabled-border-color: var(--pt-yellow);
  --bs-btn-focus-shadow-rgb: 251, 209, 0;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--pt-grey-dark);
  --bs-btn-border-color: var(--pt-grey);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pt-grey);
  --bs-btn-hover-border-color: var(--pt-grey);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pt-grey-dark);
  --bs-btn-active-border-color: var(--pt-grey-dark);
  --bs-btn-focus-shadow-rgb: 251, 209, 0;
}
.btn-success {
  --bs-btn-bg: var(--pt-ok); --bs-btn-border-color: var(--pt-ok);
  --bs-btn-hover-bg: #17633a; --bs-btn-hover-border-color: #17633a;
  --bs-btn-active-bg: #17633a; --bs-btn-active-border-color: #17633a;
  --bs-btn-disabled-bg: var(--pt-ok); --bs-btn-disabled-border-color: var(--pt-ok);
}
.btn-outline-success {
  --bs-btn-color: var(--pt-ok); --bs-btn-border-color: var(--pt-ok);
  --bs-btn-hover-bg: var(--pt-ok); --bs-btn-hover-border-color: var(--pt-ok);
  --bs-btn-active-bg: var(--pt-ok); --bs-btn-active-border-color: var(--pt-ok);
}
.btn-danger {
  --bs-btn-bg: var(--pt-danger); --bs-btn-border-color: var(--pt-danger);
  --bs-btn-hover-bg: #a52020; --bs-btn-hover-border-color: #a52020;
  --bs-btn-active-bg: #a52020; --bs-btn-active-border-color: #a52020;
  --bs-btn-disabled-bg: var(--pt-danger); --bs-btn-disabled-border-color: var(--pt-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--pt-danger); --bs-btn-border-color: var(--pt-danger);
  --bs-btn-hover-bg: var(--pt-danger); --bs-btn-hover-border-color: var(--pt-danger);
  --bs-btn-active-bg: var(--pt-danger); --bs-btn-active-border-color: var(--pt-danger);
}
/* Warnknopf: Orange-Fläche mit dunkler Schrift (weiss wäre zu kontrastarm) */
.btn-warning {
  --bs-btn-color: var(--pt-ink); --bs-btn-bg: var(--pt-warn-fill); --bs-btn-border-color: var(--pt-warn-fill);
  --bs-btn-hover-color: var(--pt-ink); --bs-btn-hover-bg: #cf9100; --bs-btn-hover-border-color: #cf9100;
  --bs-btn-active-color: var(--pt-ink); --bs-btn-active-bg: #cf9100; --bs-btn-active-border-color: #cf9100;
}
.btn-secondary {
  --bs-btn-bg: var(--pt-grey); --bs-btn-border-color: var(--pt-grey);
  --bs-btn-hover-bg: var(--pt-grey-dark); --bs-btn-hover-border-color: var(--pt-grey-dark);
  --bs-btn-active-bg: var(--pt-grey-dark); --bs-btn-active-border-color: var(--pt-grey-dark);
}
.btn-outline-secondary {
  --bs-btn-color: var(--pt-grey-dark); --bs-btn-border-color: var(--pt-line);
  --bs-btn-hover-color: var(--pt-ink); --bs-btn-hover-bg: #eceded; --bs-btn-hover-border-color: #c9cbcd;
  --bs-btn-active-color: var(--pt-ink); --bs-btn-active-bg: #e2e3e5; --bs-btn-active-border-color: #c9cbcd;
}

/* ── Status-Hintergründe und -Schrift ────────────────────────────────────── */
.text-success { color: var(--pt-ok) !important; }
.text-danger { color: var(--pt-danger) !important; }
.text-warning { color: var(--pt-warn) !important; }
.bg-success { background-color: var(--pt-ok) !important; }
.bg-danger { background-color: var(--pt-danger) !important; }
.bg-warning { background-color: var(--pt-warn-fill) !important; color: var(--pt-ink) !important; }
.badge.bg-warning, .badge.text-bg-warning { color: var(--pt-ink) !important; }
.alert-success { --bs-alert-color: #134d2c; --bs-alert-bg: var(--pt-ok-bg); --bs-alert-border-color: #b9e0c9; }
.alert-warning { --bs-alert-color: #5c3c00; --bs-alert-bg: var(--pt-warn-bg); --bs-alert-border-color: #f3dc9b; }
.alert-danger  { --bs-alert-color: #7a1717; --bs-alert-bg: var(--pt-danger-bg); --bs-alert-border-color: #f1bcbc; }
.alert-info    { --bs-alert-color: #263a55; --bs-alert-bg: var(--pt-info-bg); --bs-alert-border-color: #c6d5e6; }

/* ── Formulare: gelber Fokus statt Bootstrap-Blau ────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--pt-yellow-dark);
  box-shadow: var(--pt-focus);
}
.form-check-input:checked { background-color: var(--pt-grey); border-color: var(--pt-grey); }
.form-check-input:focus { border-color: var(--pt-yellow-dark); box-shadow: var(--pt-focus); }
.form-label, label { color: var(--pt-ink); }

/* ── Tastatur-Fokus immer sichtbar ───────────────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pt-yellow-dark);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Tabellen: ein einheitlicher, kompakter Stil ─────────────────────────── */
.table {
  --bs-table-color: var(--pt-ink);
  --bs-table-border-color: var(--pt-line-soft);
  --bs-table-hover-bg: #f7f8f9;
  --bs-table-striped-bg: transparent;
}
.table > thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pt-muted); font-weight: 600;
  border-bottom: 1px solid var(--pt-line);
  vertical-align: bottom;
}
.table > tbody td { vertical-align: middle; }

/* ── Status-Punkte und -Plaketten (einheitliche Bedeutung) ───────────────── */
.status-dot.gruen { background-color: var(--pt-ok); }
.status-dot.grau  { background-color: var(--pt-idle); }
.status-dot.rot   { background-color: var(--pt-danger); }
.status-dot.gelb  { background-color: var(--pt-warn-fill); }
.status-verfuegbar  { background: var(--pt-ok); }
.status-ausgecheckt { background: var(--pt-warn-fill); color: var(--pt-ink) !important; }
.status-werkstatt   { background: var(--pt-grey); }
.status-defekt      { background: var(--pt-danger); }

/* ── Weniger Bewegung, wenn im System so eingestellt ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}