/*
 * Sheriff Department Experience Layer
 * Globale Struktur-/Responsive-Schicht für Dashboard, UCP, HR, Academy und
 * sämtliche Modul-, Login-, Fehler- und Detailseiten.
 *
 * Seit dem BCSD-Redesign trägt diese Datei nur noch Mechanik (Mobile-Nav,
 * Tabellen-Hülle, Systemzustände, Performance-Stufen). Farben kommen aus
 * static/sd-tokens.css, die Optik der Bausteine aus static/sd-components.css.
 */

html { color-scheme:dark; scroll-behavior:smooth; }
body { background-color:var(--bcsd-bg-root); }

/* Ebene 2/3: CSS-Textur statt Bild – feine Gravur-Diagonale, oben kräftiger. */
body::before {
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(201,173,122,.022) 0 1px,transparent 1px 7px,transparent 7px 14px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%);
}
/* Branding-Wasserzeichen (coded by chilluah) – bewusst kaum sichtbar. */
body::after {
  content:"";position:fixed;right:-9vw;bottom:-20vh;width:min(62vw,780px);aspect-ratio:1;
  z-index:-1;pointer-events:none;background:url('/static/branding/chilluah-code.png') center/contain no-repeat;
  opacity:.022;filter:sepia(.7) saturate(.7);
}

/* Universelle Kopfleiste */
:is(body,.bcsd-main) > header, .ams-top { isolation:isolate; }
:is(body,.bcsd-main) > header::after, .ams-top::after {
  content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,170,67,.35),transparent);
}
:is(body,.bcsd-main) > header { position:sticky; }

/* Performance-Schalter – unabhängig von der jeweiligen Seitennavigation. */
.sd-global-perf {
  position:fixed;right:18px;bottom:18px;z-index:10050;display:flex;align-items:center;gap:9px;
  min-height:40px;padding:6px 8px 6px 12px;border:1px solid var(--bcsd-line-gold);
  border-radius:999px;background:var(--bcsd-surface-1);
  color:var(--bcsd-text-1);box-shadow:var(--bcsd-shadow-2);
  font:600 11px/1.1 var(--bcsd-font-ui);letter-spacing:.06em;
}
.sd-global-perf .sd-perf-bolt { color:var(--bcsd-accent-hi);font-size:15px; }
.sd-global-perf .sd-perf-copy { display:flex;flex-direction:column;gap:2px;white-space:nowrap; }
.sd-global-perf .sd-perf-label { color:var(--bcsd-text-4);font-size:8px;letter-spacing:.17em;text-transform:uppercase; }
.sd-global-perf button {
  min-width:68px;border:1px solid var(--bcsd-line-gold);border-radius:999px;padding:7px 10px;
  color:var(--bcsd-text-1);background:var(--bcsd-surface-brand);font:700 10px/1 var(--bcsd-font-ui);
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--bcsd-t-hover) ease;
}
.sd-global-perf button:hover { border-color:var(--bcsd-accent);color:var(--bcsd-accent-hi); }
.sd-global-perf[data-mode="minimal"] { border-color:rgba(79,154,100,.42); }
.sd-global-perf[data-mode="minimal"] button { color:var(--bcsd-success-text);border-color:rgba(79,154,100,.36); }

/* Mobile Navigation für alle alten Header-Navigationsleisten */
.sd-nav-toggle {
  display:none;width:44px;height:44px;border:1px solid var(--bcsd-line-2);border-radius:10px;
  background:var(--bcsd-surface-1);color:var(--bcsd-text-1);font-size:19px;cursor:pointer;
}

:where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  accent-color:var(--bcsd-accent);transition:border-color var(--bcsd-t-hover),box-shadow var(--bcsd-t-hover),background var(--bcsd-t-hover);
}
:where(button,a,.btn,.ams-btn) { -webkit-tap-highlight-color:transparent; }
:where(button,.btn,.ams-btn):active { transform:translateY(1px); }

/* Alle Datentabellen: sticky Kopf, große Datenmengen scrollbar. */
.sd-table-shell { overflow:auto;max-width:100%;border:1px solid var(--bcsd-line);border-radius:12px; }
.sd-table-shell > table { margin:0!important;min-width:100%; }
:where(table:not(.no-sd-table)) { border-collapse:separate;border-spacing:0; }
:where(table:not(.no-sd-table)) thead th { position:sticky;top:0;z-index:3; }
:where(table:not(.no-sd-table)) tbody tr { transition:background var(--bcsd-t-hover); }

/* Dialoge: Glas nur noch auf dem Scrim. */
:where(.modal,.dialog-backdrop,[data-modal-backdrop]) {
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
:where(.modal-content,[role="dialog"]) { animation:sd-dialog-in var(--bcsd-t-modal) var(--bcsd-ease) both; }
@keyframes sd-dialog-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* Kurze Einblendung beim Seitenaufbau; JS setzt nur data-sd-reveal.
   BEWUSST ohne fill-mode „both": läuft die Animation nicht an (gedrosselter
   Hintergrund-Tab, Screenshot-Renderer), bleibt der Inhalt trotzdem sichtbar –
   Lesbarkeit darf nie davon abhängen, dass eine Animation startet. */
[data-sd-reveal] { animation:sd-reveal .22s var(--bcsd-ease);animation-delay:var(--sd-delay,0ms); }
@keyframes sd-reveal { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Systemzustände (leer / lädt) */
.sd-state-enhanced { min-height:116px!important;display:grid!important;place-items:center!important;text-align:center!important;
  padding:26px!important;border:1px dashed var(--bcsd-line-2)!important;border-radius:12px!important;background:var(--bcsd-surface-1)!important; }
.sd-state-enhanced::before { content:attr(data-sd-state-icon);display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;
  border:1px solid var(--bcsd-line-gold);border-radius:50%;background:var(--bcsd-surface-2);color:var(--bcsd-accent);font-size:17px; }
.sd-loading-enhanced::before { content:"";width:25px;height:25px;border-radius:50%;border:2px solid var(--bcsd-line);
  border-top-color:var(--bcsd-accent);background:none;animation:sd-spin .75s linear infinite; }
@keyframes sd-spin { to{transform:rotate(360deg)} }

/* Bereichsspezifische Hero-Kompositionen (Layout; Optik in sd-components.css) */
.sd-area-hero {
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  margin:0 0 22px;padding:26px 28px;border:1px solid var(--bcsd-line-gold);border-radius:14px;
}
.sd-area-hero > * { position:relative;z-index:1; }
.sd-area-hero .sd-kicker { color:var(--bcsd-accent);font:600 10px/1.2 var(--bcsd-font-mono);letter-spacing:.24em;text-transform:uppercase;margin-bottom:9px; }
.sd-area-hero h2 { font-size:clamp(22px,3vw,32px)!important;text-transform:none!important;margin:0 0 8px!important; }
.sd-area-hero h2::before { display:none!important; }
.sd-area-hero p { line-height:1.55;max-width:650px;font-size:15px; }
.sd-area-hero .sd-hero-meta { display:flex;gap:9px;flex-wrap:wrap;margin-top:15px; }
.sd-area-hero .sd-hero-chip { border:1px solid var(--bcsd-line-gold);border-radius:999px;padding:6px 10px;
  font:500 11px/1 var(--bcsd-font-mono);letter-spacing:.04em; }
.sd-area-hero .sd-seal { width:92px;height:92px;margin:0 5px 0 0; }
.sd-area-hero .sd-seal .seal-star { width:46px;height:46px; }

/* Performance-Stufen gelten über alle Bereiche, nicht nur UCP. */
html[data-sd-spare] :where(.sd-seal .seal-glow,.bcsd-sunset *) { animation:none!important; }
html[data-sd-perf="minimal"] body::before,html[data-sd-perf="minimal"] body::after,
html[data-sd-perf="minimal"] .bcsd-sunset { display:none!important; }
html[data-sd-perf="minimal"] [data-sd-reveal],html[data-sd-perf="minimal"] .sd-loading-enhanced::before { animation:none!important; }
html[data-sd-perf="minimal"] :where(.card,.ams-card,.hr-kpi,.modal-content,[role="dialog"]) { box-shadow:none!important;transition:none!important; }

@media (max-width:840px) {
  :is(body,.bcsd-main) > header .sd-nav-toggle { display:grid;place-items:center;order:2; }
  :is(body,.bcsd-main) > header:has(.sd-nav-toggle) { flex-wrap:wrap; }
  :is(body,.bcsd-main) > header:has(.sd-nav-toggle) .nav { display:none;width:100%;order:4;padding:10px 0 2px;border-top:1px solid var(--bcsd-line); }
  :is(body,.bcsd-main) > header:has(.sd-nav-toggle).sd-nav-open .nav { display:flex;animation:sd-dialog-in .2s var(--bcsd-ease) both; }
  :is(body,.bcsd-main) > header:has(.sd-nav-toggle) .nav > a { min-height:44px;display:flex;align-items:center; }
  .sd-area-hero { grid-template-columns:1fr;padding:23px 22px; }
  .sd-area-hero .sd-seal { display:none; }
}
@media (max-width:560px) {
  :is(body,.bcsd-main) > header { padding-left:14px!important;padding-right:14px!important;gap:10px!important; }
  :is(body,.bcsd-main) > header h1 { min-width:0;font-size:13px!important;letter-spacing:.08em!important; }
  :is(body,.bcsd-main) > header .back { max-width:100%;display:flex;flex-wrap:wrap;gap:5px; }
  main { max-width:100%!important; }
  .card { padding:20px 16px!important; }
  .row { flex-wrap:wrap!important; }
  .row > .field { flex:1 1 210px!important;min-width:0!important; }
  .rank-entry { display:flex!important;flex-wrap:wrap!important;padding:10px!important; }
  .rank-entry .rank-pos { flex:0 0 22px!important; }
  .rank-entry .rank-name { flex:1 1 calc(100% - 34px)!important;min-width:0!important; }
  .rank-entry .rank-roles { flex:1 1 calc(100% - 104px)!important;min-width:0!important; }
  .rank-entry .rank-btns { margin-left:auto!important; }
  .rs,.rs-btn,.rs-tags { min-width:0!important;max-width:100%!important; }
  .rs-tags { overflow:hidden!important; }
  .rs-tag { max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere; }
  .sd-global-perf { right:10px;bottom:10px; }
  body:has(#sd-presence) .sd-global-perf { bottom:52px; }
  body:has(.bcsd-bottomnav) .sd-global-perf { bottom:76px; }
  .sd-global-perf .sd-perf-copy { display:none; }
  .sd-global-perf button { min-width:60px; }
  .sd-area-hero { border-radius:12px; }
}

/* prefers-reduced-motion: ein Block, global. Dauer statt „animation:none“,
   damit Bausteine mit fill-mode im Endzustand stehen statt unsichtbar. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}