/*
 * RETRO BOXING e. V. – gemeinsames UI-System v1375
 * Eine Bedeutung, eine Farb-/Abstandsquelle – für Website und Verwaltung.
 * Keine seitenbezogenen Sonderklassen: vorhandene Komponenten (.section-card,
 * .btn, .badge, .notice, .table) nutzen dieselben Tokens und Statusklassen.
 */
:root{
  --rb-ui-space-1:4px;
  --rb-ui-space-2:8px;
  --rb-ui-space-3:12px;
  --rb-ui-space-4:16px;
  --rb-ui-space-5:20px;
  --rb-ui-space-6:24px;
  --rb-ui-radius-sm:10px;
  --rb-ui-radius-md:14px;
  --rb-ui-radius-lg:18px;
  --rb-ui-radius-xl:24px;
  --rb-ui-focus:#bc2625;
  --rb-ui-brand:#bc2625;
  --rb-ui-brand-strong:#98201f;
  --rb-ui-brand-soft:rgba(188,38,37,.10);
  --rb-ui-success:#55b879;
  --rb-ui-warning:#d59a38;
  --rb-ui-danger:#d15b58;
  --rb-ui-neutral:#8e9aa6;
}
html[data-rb-theme="dark"]{
  --rb-ui-page:#090a0c;
  --rb-ui-shell:#101216;
  --rb-ui-surface:#15181c;
  --rb-ui-surface-2:#1b1f24;
  --rb-ui-surface-3:#242930;
  --rb-ui-surface-raised:#1f242a;
  --rb-ui-border:rgba(255,255,255,.09);
  --rb-ui-border-strong:rgba(255,255,255,.15);
  --rb-ui-text:#f1f3f5;
  --rb-ui-muted:#a7b0ba;
  --rb-ui-faint:#7f8994;
  --rb-ui-hover:rgba(255,255,255,.05);
  --rb-ui-shadow:0 12px 34px rgba(0,0,0,.24);
  --rb-ui-success-soft:rgba(69,158,99,.11);
  --rb-ui-warning-soft:rgba(205,143,42,.11);
  --rb-ui-danger-soft:rgba(188,38,37,.11);
  --rb-ui-neutral-soft:rgba(132,145,158,.08);
  --rb-ui-media-bg:#11151a;
  --rb-ui-field-bg:#15191e;
  --rb-ui-field-border:rgba(255,255,255,.15);
}
html[data-rb-theme="light"]{
  --rb-ui-page:#e3e9ed;
  --rb-ui-shell:#edf1f4;
  --rb-ui-surface:#fbfcfd;
  --rb-ui-surface-2:#edf1f3;
  --rb-ui-surface-3:#e1e7eb;
  --rb-ui-surface-raised:#ffffff;
  --rb-ui-border:#7f8c96;
  --rb-ui-border-strong:#596873;
  --rb-ui-text:#111920;
  --rb-ui-muted:#2d3c47;
  --rb-ui-faint:#4c5c68;
  --rb-ui-hover:#dce4e8;
  --rb-ui-shadow:0 9px 25px rgba(31,44,54,.07);
  --rb-ui-success:#287b49;
  --rb-ui-warning:#9b6412;
  --rb-ui-danger:#a93230;
  --rb-ui-neutral:#5d6b76;
  --rb-ui-success-soft:rgba(40,123,73,.08);
  --rb-ui-warning-soft:rgba(155,100,18,.085);
  --rb-ui-danger-soft:rgba(169,50,48,.075);
  --rb-ui-neutral-soft:rgba(93,107,118,.065);
  --rb-ui-media-bg:#e4eaee;
  --rb-ui-field-bg:#fbfcfd;
  --rb-ui-field-border:#71808b;
}


/* v1375: gemeinsame Typografie-Hierarchie statt seitenbezogener Weiß-/Grauwerte. */
:root{
  --rb-ui-text-strong:var(--rb-ui-text);
  --rb-ui-text-secondary:var(--rb-ui-muted);
  --rb-ui-text-meta:var(--rb-ui-faint);
}
/* Ein Status bedeutet systemweit dasselbe. Die konkrete Komponente bleibt bestehen. */
:is(.section-card,.admin-card,.notice,.badge,tr,.rb-status-surface).is-success{--rb-ui-state:var(--rb-ui-success);--rb-ui-state-soft:var(--rb-ui-success-soft)}
:is(.section-card,.admin-card,.notice,.badge,tr,.rb-status-surface).is-warning{--rb-ui-state:var(--rb-ui-warning);--rb-ui-state-soft:var(--rb-ui-warning-soft)}
:is(.section-card,.admin-card,.notice,.badge,tr,.rb-status-surface).is-danger{--rb-ui-state:var(--rb-ui-danger);--rb-ui-state-soft:var(--rb-ui-danger-soft)}
:is(.section-card,.admin-card,.notice,.badge,tr,.rb-status-surface).is-neutral{--rb-ui-state:var(--rb-ui-neutral);--rb-ui-state-soft:var(--rb-ui-neutral-soft)}

.badge:is(.is-success,.is-warning,.is-danger,.is-neutral){
  color:var(--rb-ui-state)!important;
  border-color:color-mix(in srgb,var(--rb-ui-state) 42%,transparent)!important;
  background:var(--rb-ui-state-soft)!important;
}
.notice:is(.is-success,.is-warning,.is-danger,.is-neutral),
.section-card:is(.is-success,.is-warning,.is-danger,.is-neutral),
.admin-card:is(.is-success,.is-warning,.is-danger,.is-neutral){
  border-color:color-mix(in srgb,var(--rb-ui-state) 34%,var(--rb-ui-border))!important;
}
.notice:is(.is-success,.is-warning,.is-danger,.is-neutral){
  box-shadow:inset 3px 0 0 var(--rb-ui-state);
  background:linear-gradient(90deg,var(--rb-ui-state-soft),transparent 36%),var(--rb-ui-surface)!important;
}
.table tr:is(.is-success,.is-warning,.is-danger,.is-neutral)>td:first-child,
tr.rb-status-surface:is(.is-success,.is-warning,.is-danger,.is-neutral)>td:first-child{
  box-shadow:inset 3px 0 0 var(--rb-ui-state);
}
.table tr:is(.is-success,.is-warning,.is-danger,.is-neutral)>td{
  background-image:linear-gradient(90deg,var(--rb-ui-state-soft),transparent 58%);
}

/* Gemeinsamer, ruhiger Fokus – Website und Verwaltung. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid color-mix(in srgb,var(--rb-ui-focus) 34%,transparent);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){*,
*::before,
*::after{scroll-behavior:auto!important}}

/* Dieselbe dezente Statuskante funktioniert auch bei Listen-/Detailzeilen ohne eigene Komponente. */
.rb-status-surface:is(.is-success,.is-warning,.is-danger,.is-neutral){
  box-shadow:inset 3px 0 0 var(--rb-ui-state);
  background-image:linear-gradient(90deg,var(--rb-ui-state-soft),transparent 42%);
}


/* v1379 – gemeinsame, dezente „Warum?“-Komponente: Erklärung nur auf Wunsch. */
.rb-why{margin:0;padding:0;border:0;background:transparent;color:var(--rb-ui-text)}
.rb-why>summary{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 8px;border:1px solid var(--rb-ui-border);border-radius:9px;background:var(--rb-ui-surface-2);color:var(--rb-ui-muted);font-size:.72rem;font-weight:800;cursor:pointer;list-style:none}
.rb-why>summary::before{content:"i";display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-size:.66rem;line-height:1}
.rb-why[open]>summary{color:var(--rb-ui-text);border-color:var(--rb-ui-border-strong);background:var(--rb-ui-hover)}
.rb-why>.rb-why-body{margin-top:8px;color:var(--rb-ui-muted);font-size:.76rem;line-height:1.5}

/* v1381 – gemeinsame Komponentenbasis: Abstände, Controls und Status sind zentral definiert. */
:root{
  --rb-ui-space-section:var(--rb-ui-space-4);
  --rb-ui-space-stack:var(--rb-ui-space-3);
  --rb-ui-space-actions:var(--rb-ui-space-2);
  --rb-ui-card-padding:20px;
  --rb-ui-card-padding-compact:14px;
  --rb-ui-control-height:42px;
  --rb-ui-control-height-sm:34px;
  --rb-ui-table-pad-y:11px;
  --rb-ui-table-pad-x:13px;
  --rb-ui-info:#5b8fbd;
  --rb-ui-info-soft:rgba(91,143,189,.11);
  --rb-ui-new:var(--rb-ui-brand);
  --rb-ui-new-soft:var(--rb-ui-brand-soft);
}
html[data-rb-theme="light"]{
  --rb-ui-info:#376f9f;
  --rb-ui-info-soft:rgba(55,111,159,.09);
  --rb-ui-new:#9d2928;
  --rb-ui-new-soft:rgba(157,41,40,.075);
}

/* Eine Bedeutung = eine Statusfarbe, unabhängig von Seite oder Modul. */
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card).status-new{--rb-ui-state:var(--rb-ui-new);--rb-ui-state-soft:var(--rb-ui-new-soft)}
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card):is(.status-open,.status-waiting,.status-pending,.status-busy){--rb-ui-state:var(--rb-ui-warning);--rb-ui-state-soft:var(--rb-ui-warning-soft)}
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card):is(.status-contacted,.status-in_progress,.is-info){--rb-ui-state:var(--rb-ui-info);--rb-ui-state-soft:var(--rb-ui-info-soft)}
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card):is(.status-answered,.status-active,.status-done,.status-paid,.is-success){--rb-ui-state:var(--rb-ui-success);--rb-ui-state-soft:var(--rb-ui-success-soft)}
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card):is(.status-closed,.status-paused,.status-cancelled,.is-neutral){--rb-ui-state:var(--rb-ui-neutral);--rb-ui-state-soft:var(--rb-ui-neutral-soft)}
:is(.badge,.notice,.rb-status-surface,.section-card,.admin-card):is(.status-cancelled_immediate,.status-danger,.is-danger){--rb-ui-state:var(--rb-ui-danger);--rb-ui-state-soft:var(--rb-ui-danger-soft)}

.badge:is(.status-new,.status-open,.status-waiting,.status-pending,.status-busy,.status-contacted,.status-in_progress,.status-answered,.status-active,.status-done,.status-paid,.status-closed,.status-paused,.status-cancelled,.status-cancelled_immediate,.status-danger,.is-info,.is-success,.is-warning,.is-danger,.is-neutral){
  color:var(--rb-ui-state)!important;
  border-color:color-mix(in srgb,var(--rb-ui-state) 44%,var(--rb-ui-border))!important;
  background:var(--rb-ui-state-soft)!important;
}
/* Klassische Notice-Klassen werden auf dieselbe Semantik abgebildet. */
.notice.success{--rb-ui-state:var(--rb-ui-success);--rb-ui-state-soft:var(--rb-ui-success-soft)}
.notice.warning{--rb-ui-state:var(--rb-ui-warning);--rb-ui-state-soft:var(--rb-ui-warning-soft)}
.notice.info{--rb-ui-state:var(--rb-ui-info);--rb-ui-state-soft:var(--rb-ui-info-soft)}
.notice.danger{--rb-ui-state:var(--rb-ui-danger);--rb-ui-state-soft:var(--rb-ui-danger-soft)}