@import url('/static/back-control.css');

/* ============================================================
   OptiGate – gemeinsames Schwarz-Gold-Designsystem
   Eingebunden von:
     - Login-Seite      (templates/login.html)
     - Sessions-Dashboard (app.py, /dashboard)
   Bei neuen Seiten: dieses Stylesheet einbinden und nur noch
   seitenspezifische Layout-Regeln ergänzen.
   ============================================================ */

:root{
  --bg:#080809;
  --bg2:#111113;
  --gold:#b8912c;
  --gold-2:#dcbb54;
  --gold-3:#7a621d;
  --gold-dim:#5e4a14;
  --text:#e7e3da;
  --muted:#948f84;
  --danger:#e06565;
  --danger-bg:rgba(224,101,101,.06);
  --danger-border:rgba(224,101,101,.36);
  --danger-bg-hover:rgba(224,101,101,.15);
  --danger-text-hover:#ff8d8d;
  --danger-glow:0 0 12px rgba(224,101,101,.28);
  --gold-fill:linear-gradient(150deg,#f7e6ac,var(--gold-2) 60%,#b8912c);
  --gold-glow:0 0 12px rgba(220,187,84,.3);
  --gold-glow-hover:0 0 20px rgba(240,200,90,.5);
  --gold-border:rgba(184,145,44,.35);
  --gold-bg-hover:rgba(184,145,44,.14);
  --ok:#8ad79a;
  --panel-bg:rgba(18,17,15,.74);
  --panel-border:rgba(184,145,44,.20);
  --radius:20px;
  --modal-bg:rgba(14,13,11,.97);
  --modal-border:rgba(184,145,44,.48);
  --modal-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px rgba(184,145,44,.12) inset;
  --backdrop:rgba(4,4,6,.72);
}
@property --ang{ syntax:"<angle>"; initial-value:0deg; inherits:false; }

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 18%, rgba(184,145,44,.10), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(184,145,44,.08), transparent 45%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  background-size:180% 180%,180% 180%,200% 200%;
  animation:bgpan 26s ease-in-out infinite alternate;
}

/* Layout-Varianten */
body.center{display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}
body.page{padding:1.5rem;height:auto;min-height:100vh;display:flex;flex-direction:column}
body.page>header.topbar{flex-shrink:0}
body.page>.wrap{flex:1;display:flex;flex-direction:column}

/* ---------- Animationen ---------- */
@keyframes bgpan{
  0%{background-position:0% 0%,100% 100%,0% 0%}
  100%{background-position:55% 40%,45% 60%,100% 100%}
}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pulse{
  0%,100%{box-shadow:0 0 18px rgba(184,145,44,.20);transform:scale(1)}
  50%{box-shadow:0 0 34px rgba(184,145,44,.45);transform:scale(1.05)}
}
@keyframes shimmer{to{background-position:220% center}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ringspin{to{--ang:360deg}}

/* ---------- Glas-Panel ---------- */
.panel{
  position:relative;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:2.5rem 2rem 2rem;
  box-shadow:
    0 0 0 1px rgba(184,145,44,.05) inset,
    0 26px 70px rgba(0,0,0,.66);
  backdrop-filter:blur(10px);
  text-align:center;
  animation:cardIn .9s cubic-bezier(.2,.75,.2,1) both;
}

/* ---------- Rotierender Goldring (Rand-Effekt) ----------
   Auf jedes relativ positionierte Element anwendbar:
   <div class="panel gold-ring"> ... </div>                */
.gold-ring{position:relative}
.gold-ring::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang),
    rgba(184,145,44,0) 0deg, rgba(184,145,44,.55) 55deg,
    rgba(220,187,84,.95) 90deg, rgba(184,145,44,.55) 125deg,
    rgba(184,145,44,0) 180deg, rgba(184,145,44,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ringspin 7s linear infinite;pointer-events:none;
  opacity:.9;
}

/* ---------- Marke / Titel ---------- */
.mark{
  width:66px;height:66px;margin:0 auto 1.15rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  background:linear-gradient(145deg,#2a2410,#14110a);
  border:1px solid rgba(184,145,44,.55);
  animation:pulse 3.4s ease-in-out infinite;
}
h1{
  margin:0 0 .35rem;font-size:1.68rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(100deg,var(--gold-3),var(--gold) 35%,var(--gold-2) 50%,var(--gold) 65%,var(--gold-3));
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;
}
.sub{color:var(--muted);margin:0 0 1.9rem;font-size:.95rem}

/* ---------- Buttons ---------- */
/* ---------- Einheitliche Gold-Buttons (zentral, nur hier aendern) ----------
   Outline:  .btn  (+ .sm/.mini Groessen)
   Gefuellt: .btn-gold  .btn.gold  .btn.primary  .btn.active  .tab.active  .uw-btn
   Gefahr:   .btn.danger (s. unten) */
.btn{
  position:relative;overflow:hidden;font:inherit;font-weight:650;letter-spacing:.02em;
  appearance:none;-webkit-appearance:none;background-clip:padding-box;isolation:isolate;
  border-radius:13px;cursor:pointer;
  color:var(--gold-2);border:1px solid var(--gold-border);background-color:rgba(255,255,255,.02);
  transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s,filter .2s,transform .2s;
}
.btn:not(:disabled):hover,.btn:not(:disabled):focus-visible{border-color:var(--gold-2);background-color:var(--gold-bg-hover);box-shadow:0 0 12px rgba(220,187,84,.18)}
.btn:not(:disabled):active{background-color:rgba(184,145,44,.22)}
.btn:disabled{opacity:.4;cursor:default}

.btn-gold,.btn.btn-gold,.btn.gold,.btn.primary,.btn.active,.tab.active,.uw-btn{
  color:#1a1505;background:var(--gold-fill);background-size:140% 100%;background-position:0 0;
  border:1px solid transparent;box-shadow:var(--gold-glow);
  transition:filter .2s,box-shadow .2s,transform .2s,background-position .35s;
}
.btn-gold:not(:disabled):hover,.btn.btn-gold:not(:disabled):hover,.btn.gold:not(:disabled):hover,.btn.primary:not(:disabled):hover,.btn.active:not(:disabled):hover,.tab.active:not(:disabled):hover,.uw-btn:not(:disabled):hover,
.btn-gold:not(:disabled):focus-visible,.btn.btn-gold:not(:disabled):focus-visible,.btn.gold:not(:disabled):focus-visible,.btn.primary:not(:disabled):focus-visible,.btn.active:not(:disabled):focus-visible,.tab.active:not(:disabled):focus-visible,.uw-btn:not(:disabled):focus-visible{
  filter:brightness(1.07);box-shadow:var(--gold-glow-hover);transform:translateY(-1px);background-position:100% 0;border-color:transparent;
}
.btn-gold:not(:disabled):active,.btn.btn-gold:not(:disabled):active,.btn.gold:not(:disabled):active,.btn.primary:not(:disabled):active,.btn.active:not(:disabled):active,.tab.active:not(:disabled):active,.uw-btn:not(:disabled):active{transform:translateY(0);filter:brightness(.97)}
.btn-gold:disabled,.btn.gold:disabled,.btn.primary:disabled,.btn.active:disabled,.tab.active:disabled,.uw-btn:disabled{opacity:.45;cursor:default;filter:none;box-shadow:var(--gold-glow);transform:none}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-gold,.btn.gold,.btn.primary,.btn.active,.tab.active,.uw-btn{transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s!important}
  .btn:hover,.btn:active,.btn:focus-visible,.uw-btn:hover,.tab.active:hover{transform:none!important}
}

/* Gradientfuellungen und Effekte bleiben innerhalb der jeweiligen Rundung. */
.btn,.badge,.chip,.uw-btn,.tab,.subtab{background-clip:padding-box!important}
.badge,.chip{overflow:hidden;isolation:isolate}
.uw-btn,.tab,.subtab{appearance:none;-webkit-appearance:none;overflow:hidden;isolation:isolate}
.btn:focus-visible,.uw-btn:focus-visible,.tab:focus-visible,.subtab:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* ---------- Einheitlicher Schliessen-Button (X) ----------
   <button class="x" aria-label="Schliessen">&times;</button>  (schlicht, ohne Rand)
   Auf goldenen Kopfzeilen zusaetzlich .on-gold (dunkles Symbol). */
.x{cursor:pointer;font-size:1.3rem;color:var(--muted);background:none;border:none;line-height:1}
.x:hover{color:var(--gold-2)}
.x:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:6px}
.x.on-gold{color:#211a08}
.x.on-gold:hover{color:#080809}
.x.on-gold:focus-visible{outline-color:#211a08}

/* ---------- Einheitliche Danger-Buttons (Outline) ----------
   Neue Seiten brauchen nur .danger (z. B. class="btn danger"). */
.btn.danger,.btn-danger,.danger-btn,button.danger,.ofi-drawer button.ofi-danger,.ofi-drawer button.ofi-danger{
  color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);
  transition:color .18s,background .18s,border-color .18s,box-shadow .18s;filter:none;
}
.btn.danger:not(:disabled):hover,.btn.danger:not(:disabled):focus-visible,
.btn-danger:not(:disabled):hover,.btn-danger:not(:disabled):focus-visible,
.danger-btn:not(:disabled):hover,.danger-btn:not(:disabled):focus-visible,
button.danger:not(:disabled):hover,button.danger:not(:disabled):focus-visible,
.ofi-drawer button.ofi-danger:not(:disabled):hover,.ofi-drawer button.ofi-danger:not(:disabled):focus-visible,
.ofi-drawer button.ofi-danger:not(:disabled):hover,.ofi-drawer button.ofi-danger:not(:disabled):focus-visible{
  border-color:var(--danger);background:var(--danger-bg-hover);color:var(--danger-text-hover);box-shadow:var(--danger-glow);filter:none;transform:none;
}
.btn.danger:focus-visible,.btn-danger:focus-visible,.danger-btn:focus-visible,button.danger:focus-visible,.ofi-drawer button.ofi-danger:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.btn.danger:not(:disabled):active,.btn-danger:not(:disabled):active,.danger-btn:not(:disabled):active,button.danger:not(:disabled):active,.ofi-drawer button.ofi-danger:not(:disabled):active{background:rgba(224,101,101,.22);transform:none}
.btn.danger:disabled,.btn-danger:disabled,.danger-btn:disabled,button.danger:disabled,.ofi-drawer button.ofi-danger:disabled{opacity:.4;cursor:default;filter:none;box-shadow:none}
/* gefuellte Variante nur fuer die Hauptaktion in Bestaetigungsdialogen */
.btn.danger.solid,button.danger.solid,.btn-danger.solid{
  background:linear-gradient(150deg,#ff9a9a,var(--danger) 60%,#b34545);color:#1a0505;border-color:transparent;box-shadow:0 0 12px rgba(224,101,101,.3);
}
.btn.danger.solid:not(:disabled):hover,.btn.danger.solid:not(:disabled):focus-visible,button.danger.solid:not(:disabled):hover,button.danger.solid:not(:disabled):focus-visible,.btn-danger.solid:not(:disabled):hover,.btn-danger.solid:not(:disabled):focus-visible{
  background:linear-gradient(150deg,#ff9a9a,var(--danger) 60%,#b34545);color:#1a0505;border-color:transparent;box-shadow:0 0 12px rgba(224,101,101,.3);filter:brightness(1.08);
}

/* ---------- Status / Spinner ---------- */
.status{margin-top:1.5rem;font-size:.98rem;color:var(--muted);min-height:1.4em;line-height:1.5}
.status b{color:var(--ok)}
.status .err{color:var(--danger)}
.status.anim{animation:fadeUp .35s ease both}
.spinner{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:.5rem;
  border:2px solid rgba(184,145,44,.25);border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite;
}

/* ---------- Fußnote ---------- */
.foot,.note{margin-top:1.7rem;font-size:.75rem;color:var(--muted);letter-spacing:.14em;text-align:center}
body.page>.wrap>.note{margin-top:auto}
.foot span,.note span{
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Gemeinsamer Anwaehl-Haken (Ausnahmen: Operator-Schalter, Geyser-Box, .ofi-check) */
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser){appearance:none;-webkit-appearance:none;position:relative;flex:0 0 22px;box-sizing:border-box;width:22px;min-width:22px;height:22px;margin:0;padding:0;border-radius:6px;border:1px solid var(--gold);background:transparent;cursor:pointer;vertical-align:middle;transition:border-color .18s,background .18s,box-shadow .18s}
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser):hover{border-color:var(--gold-2)}
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser):focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser):checked{background:linear-gradient(150deg,#f7e6ac,var(--gold-2) 60%,#b8912c)}
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser):checked::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#1a1505;font-size:.95rem;font-weight:800;line-height:1}
input[type=checkbox]:not(.ofi-check):not([data-pv="operator"]):not(#nw-geyser):disabled{opacity:.45;cursor:not-allowed}