/* ============================================================
   Voila Admin — gemeinsames Stylesheet (Designsystem-Tokens)
   ============================================================ */
:root{
  --c-primary:#2C5F7C; --c-primary-dark:#1F4659; --c-primary-soft:#DCEAF1;
  --c-peach:#E8A87C; --c-mauve:#C38D9E; --c-bg:#FCEEE4; --c-card:#FFFFFF;
  --c-muted:#E5D5C3; --c-ink:#1F4659; --c-ok:#4F8C3F; --c-warn:#C77A1B; --c-danger:#A8392E;
  --r-sm:10px; --r-md:20px; --r-lg:28px;
  --shadow-press:0 4px 0 0 var(--c-primary-dark);
  --shadow-card:0 6px 0 0 var(--c-muted);
  --shadow-btn:0 3px 0 0 var(--c-muted);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--c-bg);color:var(--c-primary-dark);
  font-family:'Nunito',system-ui,sans-serif;}
a{color:var(--c-primary);text-decoration:none}
code{font-family:ui-monospace,Consolas,monospace;background:#fff;border:1px solid var(--c-muted);
  border-radius:6px;padding:1px 6px;word-break:break-all}

h1,h2,h3,.display{font-family:'Fredoka',system-ui,sans-serif}
h1{font-size:1.9rem;margin:.1em 0;color:var(--c-primary-dark)}
h2{font-size:1.2rem;margin:0 0 .6rem;color:var(--c-primary-dark)}
.muted{color:rgba(31,70,89,.6)}
.small{font-size:.85rem}
.danger-text{color:var(--c-danger)}
.ok-text{color:var(--c-ok)}
.warn-text{color:var(--c-warn)}
.req{color:var(--c-danger)}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:260px;flex:0 0 260px;background:#fff;border-right:1px solid rgba(229,213,195,.6);
  min-height:100vh;padding:20px;display:flex;flex-direction:column}
.brand{font-family:'Fredoka';font-size:1.6rem;line-height:1;color:var(--c-primary-dark)}
.brand .bang{color:var(--c-mauve)}
.brand-sub{font-size:.72rem;color:rgba(31,70,89,.6);margin-top:-2px}
.content{flex:1;padding:32px;max-width:1100px}
.nav{flex:1;margin-top:24px;display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-sm);
  font-family:'Fredoka';font-size:.92rem;color:var(--c-ink)}
.nav a:hover{background:var(--c-bg)}
.nav a.active{background:var(--c-primary);color:#fff;box-shadow:var(--shadow-press)}
.nav .ico{width:20px;text-align:center}
.sidebar-foot{border-top:1px solid rgba(229,213,195,.6);padding-top:8px;display:flex;flex-direction:column;gap:8px}

/* Cards */
.card{background:var(--c-card);border:1px solid rgba(229,213,195,.4);border-radius:var(--r-md);
  box-shadow:var(--shadow-card);padding:20px;margin-bottom:20px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Forms */
label.lbl{display:block;font-size:.85rem;font-weight:700;color:rgba(31,70,89,.8);margin-bottom:4px}
.input{width:100%;padding:9px 12px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--c-muted);
  color:var(--c-ink);font:inherit}
.input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(44,95,124,.18)}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;
  border-radius:var(--r-sm);font-family:'Fredoka';font-weight:600;border:0;cursor:pointer;font-size:.9rem;
  transition:transform .05s}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--c-primary);color:#fff;box-shadow:var(--shadow-press)}
.btn-primary:hover{background:var(--c-primary-dark)}
.btn-ghost{background:#fff;color:var(--c-primary-dark);border:1px solid var(--c-muted);box-shadow:var(--shadow-btn)}
.btn-ghost:hover{background:var(--c-bg)}
.btn-danger{background:var(--c-danger);color:#fff;box-shadow:0 4px 0 0 #7d2a22}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-xs{padding:5px 10px;font-size:.78rem}

/* Tables */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{font-family:'Fredoka';font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:rgba(31,70,89,.6);text-align:left;padding:8px 10px;border-bottom:1px solid var(--c-muted)}
table.tbl td{padding:11px 10px;border-bottom:1px solid rgba(229,213,195,.6);vertical-align:middle}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:.72rem;font-weight:700;
  background:var(--c-primary-soft);color:var(--c-primary-dark)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot-on{background:var(--c-ok);box-shadow:0 0 0 3px rgba(79,140,63,.18)}
.dot-off{background:var(--c-muted)}

/* Auth screens (login/setup) */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:420px}
.flash{padding:10px 12px;border-radius:var(--r-sm);font-size:.9rem;margin-bottom:12px}
.flash-err{background:#fbeae8;color:var(--c-danger);border:1px solid rgba(168,57,46,.3)}
.flash-ok{background:#eaf3e6;color:var(--c-ok);border:1px solid rgba(79,140,63,.3)}
.stack>*+*{margin-top:14px}
.kpi .k-label{font-family:'Fredoka';font-size:.72rem;text-transform:uppercase;color:rgba(31,70,89,.6)}
.kpi .k-val{font-family:'Fredoka';font-size:1.8rem;color:var(--c-primary-dark);margin-top:2px}
.logo-box{margin-top:16px;border:1px solid var(--c-muted);border-radius:var(--r-md);background:#fff;
  box-shadow:var(--shadow-btn);padding:8px;display:flex;align-items:center;gap:12px;min-height:64px}
.logo-badge{width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-primary);color:#fff;
  font-family:'Fredoka';font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px var(--c-mauve)}
.logo-box img{max-height:48px;max-width:100%;object-fit:contain}

/* Password visibility toggle */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:42px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;color:rgba(31,70,89,.45)}
.pw-toggle:hover{color:var(--c-primary)}