/* Tibolin Portal 2026
 * Gemeinsame, additive Darstellungsschicht für Mitarbeiter- und Adminbereich.
 * Fachlogik und bestehende Datenstrukturen bleiben unberührt.
 */
:root{
  --tp-ink:#101828;
  --tp-ink-soft:#344054;
  --tp-muted:#667085;
  --tp-line:#e4e7ec;
  --tp-line-strong:#d0d5dd;
  --tp-canvas:#f5f7fb;
  --tp-surface:#ffffff;
  --tp-surface-soft:#f9fafb;
  --tp-brand:#6d38e0;
  --tp-brand-dark:#5123b5;
  --tp-brand-soft:#f1ecff;
  --tp-accent:#ff6230;
  --tp-success:#14804a;
  --tp-warning:#b54708;
  --tp-danger:#c4320a;
  --tp-info:#175cd3;
  --tp-radius-xs:10px;
  --tp-radius-sm:14px;
  --tp-radius:20px;
  --tp-radius-lg:28px;
  --tp-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 3px 10px rgba(16,24,40,.05);
  --tp-shadow:0 12px 32px rgba(16,24,40,.08);
  --tp-shadow-lg:0 24px 65px rgba(16,24,40,.13);
  --tp-focus:0 0 0 4px rgba(109,56,224,.18);
  --tp-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html{color-scheme:light;scroll-behavior:smooth}
body{
  margin:0;
  color:var(--tp-ink);
  background:
    radial-gradient(circle at 8% 0,rgba(109,56,224,.075),transparent 28rem),
    radial-gradient(circle at 96% 4%,rgba(255,98,48,.065),transparent 25rem),
    var(--tp-canvas);
  font-family:var(--tp-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea{font-family:var(--tp-font)}
img,svg,video,canvas{max-width:100%}
a{color:var(--tp-brand-dark);text-underline-offset:3px}
a:hover{color:var(--tp-brand)}

h1,h2,h3,h4{
  color:var(--tp-ink);
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.08}
h2{font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.18}
p{line-height:1.62}

.main{min-width:0}
.main>.wrap,.main>.page,.main>.container,.wrap,.page{
  width:min(100%,1320px);
  box-sizing:border-box;
}
.hero,.page-head,.top,.mf-head{
  position:relative;
  border-radius:var(--tp-radius-lg);
}
.page-head,.top,.mf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.hero{
  overflow:hidden;
  border:1px solid rgba(109,56,224,.12);
  background:
    radial-gradient(circle at 95% 0,rgba(255,98,48,.15),transparent 18rem),
    linear-gradient(135deg,#fff,#f7f4ff);
  box-shadow:var(--tp-shadow);
}
.hero h1,.page-head h1,.top h1,.mf-head h1{margin-top:0}
.muted,.sub,.hint,.mf-muted{color:var(--tp-muted);line-height:1.55}
.grid,.mf-grid{gap:16px}
.field{min-width:0}
.field>label,.field label{display:block;margin-bottom:6px}
.empty{
  padding:24px;
  border:1px dashed var(--tp-line-strong);
  border-radius:var(--tp-radius);
  background:var(--tp-surface-soft);
  color:var(--tp-muted);
  text-align:center;
}

.card,.panel,.box,.section,.content-card,.admin-card,.stat-card,.kpi,.tile{
  border-color:var(--tp-line);
  border-radius:var(--tp-radius);
  box-shadow:var(--tp-shadow-sm);
}
.card,.panel,.content-card,.admin-card,.tile{background:rgba(255,255,255,.96)}
.card,.panel,.content-card,.admin-card,.tile{padding:24px}
.mf-card{
  border:1px solid var(--tp-line);
  border-radius:var(--tp-radius);
  background:rgba(255,255,255,.96);
  box-shadow:var(--tp-shadow-sm);
}

button,.btn,a.btn,input[type="submit"],input[type="button"]{
  min-height:44px;
  border-radius:var(--tp-radius-sm);
  font-weight:750;
  letter-spacing:-.01em;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
button,input[type="submit"],input[type="button"],.btn,a.btn{
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--tp-brand-dark),var(--tp-brand));
  color:#fff;
  padding:11px 17px;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
button:not(:disabled):hover,.btn:hover,input[type="submit"]:hover,input[type="button"]:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(16,24,40,.12);
}
button:active,.btn:active,input[type="submit"]:active,input[type="button"]:active{transform:translateY(0)}
button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.58}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{
  min-height:46px;
  border:1px solid var(--tp-line-strong);
  border-radius:var(--tp-radius-sm);
  background:#fff;
  color:var(--tp-ink);
  padding:11px 13px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--tp-brand);
  box-shadow:var(--tp-focus);
}
label{color:var(--tp-ink-soft);font-weight:700}

table{border-spacing:0}
.table-wrap,.employee-table-scroll,.table-responsive{overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--tp-radius)}
.admin-table,table.data-table,table.table{
  width:100%;
  background:var(--tp-surface);
  border:1px solid var(--tp-line);
  border-radius:var(--tp-radius);
  box-shadow:var(--tp-shadow-sm);
}
.mf-table{width:100%;border-collapse:separate;border-spacing:0}
.mf-table th{color:var(--tp-muted);background:var(--tp-surface-soft);font-size:.74rem;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.mf-table th,.mf-table td{padding:13px 14px;border-bottom:1px solid var(--tp-line);text-align:left;vertical-align:top}
.mf-table tbody tr:hover{background:#faf9ff}
.admin-table th,table.data-table th,table.table th{
  color:var(--tp-muted);
  background:var(--tp-surface-soft);
  font-size:.74rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.admin-table th,.admin-table td,table.data-table th,table.data-table td,table.table th,table.table td{
  padding:13px 14px;
  border-bottom:1px solid var(--tp-line);
}
.admin-table tbody tr:hover,table.data-table tbody tr:hover,table.table tbody tr:hover{background:#faf9ff}

.badge,.pill,.chip,.status{
  border-radius:999px;
  font-weight:750;
  line-height:1.2;
}
.success,.notice-success{background:#ecfdf3;border-color:#abefc6;color:#067647}
.error,.notice-error{background:#fef3f2;border-color:#fecdca;color:#b42318}
.notice,.warning,.notice-warning{background:#fffaeb;border-color:#fedf89;color:#93370d}

/* Navigationsrahmen */
.portal-shell{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh;background:transparent}
.portal-sidebar{padding:22px 16px;box-sizing:border-box;color:#fff;box-shadow:12px 0 38px rgba(16,24,40,.14)}
.portal-sidebar .brand{display:flex;align-items:center;gap:12px;padding:2px 4px 20px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.portal-sidebar .mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;font-size:1.25rem;font-weight:850}
.portal-sidebar .brand strong{display:block;color:#fff;font-size:1.08rem}.portal-sidebar .brand span{display:block;margin-top:2px;color:#aaa6c0;font-size:.78rem}
.portal-sidebar>.nav{display:flex;flex-direction:column;gap:7px}
.admin-shell{min-height:100vh;background:transparent!important}
.admin-standalone-desktop-nav{
  position:fixed;
  inset:0 auto 0 0;
  z-index:9998;
  display:block;
  width:286px;
  padding:22px 16px;
  overflow:hidden;
  box-sizing:border-box;
  color:#fff;
  box-shadow:12px 0 38px rgba(16,24,40,.16);
}
.admin-standalone-desktop-nav .brand{display:flex;align-items:center;gap:12px;padding:2px 4px 20px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-standalone-desktop-nav .brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;font-size:1.25rem;font-weight:850}
.admin-standalone-desktop-nav .brand strong{display:block;color:#fff}.admin-standalone-desktop-nav .brand span{display:block;margin-top:2px;color:#aaa6c0;font-size:.78rem}
.admin-standalone-desktop-nav .tibo-clean-nav{display:flex!important;flex-direction:column!important;gap:7px!important;max-height:calc(100vh - 96px);overflow:auto}
.admin-standalone-desktop-nav~*:not(.admin-standalone-mobile-nav):not(script):not(style){margin-left:310px!important;margin-right:24px!important;max-width:calc(100vw - 340px)!important;box-sizing:border-box}
.admin-standalone-desktop-nav~.wrap{
  width:calc(100vw - 334px)!important;
  max-width:none!important;
  margin-left:310px!important;
  margin-right:24px!important;
}
.admin-standalone-mobile-nav{display:none}
.admin-main,.admin-shell>.main{min-width:0;padding:30px!important}
.admin-main>.wrap,.admin-main>.page,.admin-main>.container{width:min(100%,1380px);margin-inline:auto;box-sizing:border-box}
.admin-main .top,.admin-main .head,.admin-main .page-head{
  margin-bottom:20px;
  padding:22px 24px;
  border:1px solid var(--tp-line);
  border-radius:var(--tp-radius-lg);
  background:rgba(255,255,255,.92);
  box-shadow:var(--tp-shadow-sm);
}
.kpis,.stats,.stat-grid,.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.kpi,.stat,.metric{
  border:1px solid var(--tp-line);
  border-radius:var(--tp-radius);
  background:var(--tp-surface);
  box-shadow:var(--tp-shadow-sm);
}
.kpi strong,.stat strong,.metric strong{color:var(--tp-ink);font-variant-numeric:tabular-nums}
.panel.live-box{
  background:linear-gradient(135deg,#15102d,#111b2f)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.08)!important;
}
.panel.live-box h2,.panel.live-box strong{color:#fff!important}
.panel.live-box small{color:#cbd5e1!important}
.section-head,.card-head,.headrow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.tabs,.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tab,.filter-chip{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border:1px solid var(--tp-line-strong);
  border-radius:999px;
  background:#fff;
  color:var(--tp-ink-soft);
  font-weight:750;
  text-decoration:none;
}
.tab.active,.filter-chip.active{border-color:var(--tp-brand);background:var(--tp-brand-soft);color:var(--tp-brand-dark)}

/* TiboSpin: hochwertiger Fokus statt überladener Spielhallenoptik */
.spin-hero{
  padding:28px 30px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:var(--tp-radius-lg)!important;
  background:
    radial-gradient(circle at 88% 10%,rgba(255,122,80,.24),transparent 18rem),
    radial-gradient(circle at 8% 0,rgba(139,92,246,.3),transparent 20rem),
    linear-gradient(135deg,#15102d,#111b2f 70%)!important;
  box-shadow:var(--tp-shadow-lg)!important;
}
.spin-hero:after{right:18px!important;top:-30px!important;opacity:.045!important}
.spin-hero h1{font-size:clamp(2rem,4vw,3.35rem)!important;letter-spacing:-.045em!important;color:#fff!important}
.spin-hero p{max-width:640px!important;color:#cec9df!important}
.spin-balance{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.rarity-strip{gap:6px!important}.rarity-pill{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.09)!important;color:#e9e7f5!important}
.spin-layout{gap:18px!important}
.wheel-card,.wins-card{
  border:1px solid var(--tp-line)!important;
  border-radius:var(--tp-radius-lg)!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:var(--tp-shadow)!important;
}
.wheel-stage{min-height:580px!important}
.wheel-shell{
  width:min(500px,78vw)!important;
  padding:10px!important;
  background:linear-gradient(145deg,#20193d,#111827)!important;
  box-shadow:0 26px 60px rgba(16,24,40,.24),inset 0 0 0 1px rgba(255,255,255,.28)!important;
}
.wheel-shell:before{inset:-5px!important;opacity:.19!important;filter:blur(18px)!important}
#wheel{box-shadow:inset 0 0 0 6px rgba(255,255,255,.8),inset 0 0 28px rgba(15,23,42,.2)!important}
.wheel-center{
  background:linear-gradient(145deg,#fff,#f0edff)!important;
  border-color:#fff!important;
  box-shadow:0 14px 34px rgba(16,24,40,.26),inset 0 0 0 1px rgba(109,56,224,.12)!important;
}
.wheel-center strong{color:var(--tp-brand-dark)!important;letter-spacing:.07em!important}
.wheel-center span{color:var(--tp-muted)!important}
.phase-label{
  top:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:#17152f!important;
  color:#f4f3f8!important;
  box-shadow:0 8px 20px rgba(16,24,40,.18)!important;
}
.sound-toggle{border-color:var(--tp-line)!important;background:#fff!important;color:var(--tp-ink-soft)!important;box-shadow:var(--tp-shadow-sm)!important}
.spin-hint,.no-spin{border-radius:var(--tp-radius-sm)!important}
.wins-grid{gap:10px!important}.win-card{border-color:var(--tp-line)!important;border-radius:var(--tp-radius-sm)!important;box-shadow:none!important}
.spin-result{border-radius:var(--tp-radius-lg)!important;box-shadow:0 30px 100px rgba(2,6,23,.38)!important}
.spin-result button{border-radius:var(--tp-radius-sm)!important;background:linear-gradient(135deg,var(--tp-brand-dark),var(--tp-brand))!important}
.portal-sidebar,.admin-sidebar,.admin-standalone-desktop-nav{
  background:
    radial-gradient(circle at 20% 0,rgba(139,92,246,.28),transparent 22rem),
    linear-gradient(180deg,#15102d 0%,#17152f 48%,#0e1728 100%)!important;
}
.portal-sidebar .mark,.admin-standalone-desktop-nav .brand-mark{
  background:linear-gradient(145deg,var(--tp-accent),#ff8a65 42%,var(--tp-brand))!important;
  box-shadow:0 10px 24px rgba(255,98,48,.22);
}
.portal-sidebar .nav a,.portal-sidebar .nav a:visited,
.tibo-clean-nav a,.tibo-clean-nav a:visited{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#e9e7f5!important;
  text-decoration:none!important;
  font-weight:690!important;
}
.portal-sidebar .nav a:hover,.tibo-clean-nav a:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.075)!important;
}
.portal-sidebar .nav a.active,.tibo-clean-nav a.active{
  background:linear-gradient(135deg,rgba(255,98,48,.2),rgba(109,56,224,.34))!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 3px 0 0 #ff7a50;
}
.portal-sidebar .nav a.logout,.tibo-clean-nav a.logout{
  margin-top:4px;
  background:rgba(240,68,56,.12)!important;
  color:#fecaca!important;
}
.employee-nav-group{
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.employee-nav-group>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:9px 11px;
  color:#aaa6c0;
  cursor:pointer;
  list-style:none;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.employee-nav-group>summary::-webkit-details-marker{display:none}
.employee-nav-group>summary:after{content:"+";font-size:1rem;color:#8f8aa6}
.employee-nav-group[open]>summary:after{content:"–"}
.employee-nav-group .employee-nav-group-links{display:grid;gap:3px;padding:0 6px 7px}

@media (max-width:1180px){
  .portal-shell{display:block;min-height:auto}
  .main{padding:18px 16px 34px!important}
  .admin-main,.admin-shell>.main{padding:18px 16px 34px!important}
  .admin-standalone-desktop-nav{display:none!important}
  .admin-standalone-desktop-nav~*:not(.admin-standalone-mobile-nav):not(script):not(style){margin-left:auto!important;margin-right:auto!important;max-width:none!important}
  .admin-standalone-desktop-nav~.wrap{width:100%!important;margin-left:auto!important;margin-right:auto!important}
  .admin-standalone-mobile-nav{display:block!important;position:sticky;top:0;z-index:9999;padding:10px 12px;background:#15102d;box-shadow:0 10px 28px rgba(16,24,40,.18)}
  .portal-sidebar,.admin-standalone-mobile-nav{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .employee-nav-group{grid-column:1/-1}
  .employee-nav-group .employee-nav-group-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}

@media (max-width:680px){
  body{background:var(--tp-canvas)}
  .main{padding:12px 12px 28px!important}
  h1{font-size:clamp(1.65rem,8vw,2.2rem)}
  .page-head,.top,.mf-head{flex-direction:column;align-items:stretch}
  .admin-main .top,.admin-main .head,.admin-main .page-head{padding:17px;border-radius:19px}
  .section-head,.card-head,.headrow{flex-direction:column;align-items:stretch}
  .page-head .actions,.top .actions,.mf-head .actions{width:100%}
  .card,.panel,.content-card,.admin-card,.wheel-card,.wins-card{border-radius:18px!important;padding:16px!important}
  .employee-nav-group .employee-nav-group-links{grid-template-columns:1fr}
  .admin-table th,.admin-table td,table.data-table th,table.data-table td,table.table th,table.table td{padding:11px 10px}
  button,.btn,a.btn,input[type="submit"],input[type="button"]{min-height:46px}
  .actions{align-items:stretch}
  .actions>.btn,.actions>button,.actions>form{width:100%}
  .actions>form>button{width:100%}
  .spin-hero{padding:22px 20px!important;border-radius:21px!important}
  .spin-hero h1{font-size:2.15rem!important}
  .spin-hero:after{font-size:7rem!important}
  .rarity-strip{display:none!important}
  .wheel-stage{min-height:410px!important}
  .wheel-shell{width:min(350px,86vw)!important;padding:8px!important}
  .wheel-card,.wins-card{padding:14px!important;border-radius:20px!important}
  .phase-label{top:-5px!important;max-width:70%;overflow:hidden;text-overflow:ellipsis}
  .sound-toggle{top:24px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  .portal-sidebar,.admin-sidebar,.admin-standalone-desktop-nav,.admin-standalone-mobile-nav,.employee-mobile-menu{display:none!important}
  body{background:#fff!important}
  .main{padding:0!important}
}