/* =========================================================
   Albers & Sieberts – internes Verwaltungssystem
   Mobile-First, klare Strukturen, große Touch-Ziele
   ========================================================= */

:root{
  --c-primary:#0f3057;
  --c-primary-d:#0a2240;
  --c-accent:#2e7dff;
  --c-bg:#f4f6fa;
  --c-surface:#ffffff;
  --c-border:#dfe3ea;
  --c-text:#1c2330;
  --c-muted:#5a6473;
  --c-warn:#ffb020;
  --c-danger:#dc2f3a;
  --c-ok:#1e9e57;
  --r:8px;
  --space:14px;
  --tap:48px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.4;
}
a{color:var(--c-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 14px}
h2{font-size:1.2rem;margin:24px 0 10px}
h3{font-size:1.05rem;margin:18px 0 8px}
small{color:var(--c-muted)}

/* ---------- App-Layout: Sidebar + Main ---------- */
body.app{display:flex;min-height:100vh;align-items:stretch}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column}
.container{max-width:1200px;margin:0 auto;padding:18px 18px 80px;width:100%}
.site-footer{padding:16px;text-align:center;color:var(--c-muted)}

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px;flex:0 0 230px;
  background:var(--c-primary);color:#dde6f0;
  display:flex;flex-direction:column;
  padding:12px 0;
  transition:width .2s ease,flex-basis .2s ease;
  position:sticky;top:0;height:100vh;
  z-index:40;
}
body[data-sidebar="collapsed"] .sidebar{width:38px;flex-basis:38px;padding:12px 0}

.sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body[data-sidebar="collapsed"] .sb-head{padding:6px 0;border-bottom:0;justify-content:center}
.sb-brand{font-size:.85rem;font-weight:600;color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
body[data-sidebar="collapsed"] .sb-brand{display:none}

.sb-toggle{
  background:rgba(255,255,255,.08);color:#fff;border:0;
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  font-size:.85rem;line-height:1;flex:0 0 28px;
}
.sb-toggle:hover{background:rgba(255,255,255,.16)}

.sb-body{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}
body[data-sidebar="collapsed"] .sb-body{display:none}

.sb-section{
  font-size:.7rem;color:rgba(255,255,255,.4);
  padding:14px 16px 6px;text-transform:uppercase;letter-spacing:.08em;
}

.nv{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;color:#cdd9e8;font-size:.88rem;
  text-decoration:none;line-height:1.2;cursor:pointer;user-select:none;
  border:0;background:transparent;width:100%;text-align:left;
}
.nv:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nv.active{background:rgba(255,255,255,.12);color:#fff;border-left:3px solid var(--c-accent);padding-left:13px}
.nv .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.nv .chev{font-size:.75rem;color:rgba(255,255,255,.5);transition:transform .15s}
.nv.open .chev{transform:rotate(90deg)}
.nv.planned{color:rgba(255,255,255,.4);cursor:not-allowed}
.nv.user-info{color:rgba(255,255,255,.55);font-size:.78rem;cursor:default}
.nv.user-info:hover{background:transparent;color:rgba(255,255,255,.55)}

.sub{background:rgba(0,0,0,.16);padding:4px 0 6px}
.sub a{
  display:flex;align-items:center;gap:10px;
  padding:7px 16px 7px 32px;color:#b8c8db;font-size:.83rem;
  text-decoration:none;
}
.sub a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.sub a.cur{color:#fff;font-weight:500;background:rgba(46,125,255,.16)}
.sub a .bullet{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);flex:0 0 5px}
.sub a.cur .bullet{background:var(--c-accent)}

.sb-spacer{flex:1}
.sb-foot{padding:8px 0 4px;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- Mobile-Burger + Drawer ---------- */
.mobile-burger{
  display:none;
  position:fixed;top:10px;left:10px;z-index:60;
  width:44px;height:44px;border-radius:8px;border:0;cursor:pointer;
  background:var(--c-primary);color:#fff;
  font-size:1.25rem;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.mobile-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;
}

@media (max-width: 720px){
  body.app{flex-direction:column}
  .mobile-burger{display:flex;align-items:center;justify-content:center}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;
    width:240px;flex-basis:240px;
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:0 0 30px rgba(0,0,0,.35);
  }
  body[data-mobile-open="1"] .sidebar{transform:translateX(0)}
  body[data-mobile-open="1"] .mobile-backdrop{display:block}
  body[data-sidebar="collapsed"] .sidebar{width:240px;flex-basis:240px}  /* auf Mobile immer voll */
  body[data-sidebar="collapsed"] .sb-body{display:flex}
  body[data-sidebar="collapsed"] .sb-brand{display:block}
  body[data-sidebar="collapsed"] .sb-head{padding:6px 14px 14px;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
  .sb-toggle{display:none}                                /* auf Mobile schließt der Backdrop */
  .main-area{padding-top:50px}                            /* Platz für den fixed Burger */
  .container{padding:8px 14px 80px}
}

/* ---------- Cards / KPIs ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media (min-width: 700px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{
  display:flex;flex-direction:column;gap:6px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r);padding:14px;color:var(--c-text);
  min-height:110px;
}
.card:hover{text-decoration:none;border-color:var(--c-accent)}
.card-title{color:var(--c-muted);font-size:.85rem}
.card-value{font-size:1.7rem;font-weight:700;color:var(--c-primary)}
.quick-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r)}
table.data{width:100%;border-collapse:collapse;min-width:560px}
table.data th,table.data td{
  padding:10px 12px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:top;
}
table.data th{background:#f1f4f8;font-weight:600;font-size:.92rem;color:var(--c-muted);position:sticky;top:0}
table.data tr:last-child td{border-bottom:0}
table.data .num{text-align:right;white-space:nowrap}
table.data .actions{white-space:nowrap}

/* Stack-Tabelle für sehr schmale Geräte */
@media (max-width: 540px){
  table.responsive thead{display:none}
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive td{display:block;width:100%}
  table.responsive tr{
    border-bottom:1px solid var(--c-border);padding:10px 12px;
  }
  table.responsive td{
    border:0;padding:4px 0;
  }
  table.responsive td::before{
    content:attr(data-label);
    display:block;font-size:.78rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.4px;
  }
}

/* ---------- Forms ---------- */
form label{display:block;margin:10px 0 4px;color:var(--c-muted);font-size:.9rem}
form input[type=text],
form input[type=password],
form input[type=email],
form input[type=number],
form input[type=date],
form input[type=tel],
form select,
form textarea{
  width:100%;padding:12px 12px;border:1px solid var(--c-border);
  border-radius:var(--r);background:#fff;color:var(--c-text);
  font-size:1rem;min-height:var(--tap);
}
form textarea{min-height:96px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{
  outline:0;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(46,125,255,.18)
}
.form-grid{display:grid;grid-template-columns:1fr;gap:6px 14px}
@media (min-width:760px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid .full{grid-column:1/-1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 16px;border-radius:var(--r);
  background:#e8edf4;color:var(--c-text);border:1px solid var(--c-border);
  font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;
  gap:6px;
}
.btn:hover{background:#dde4ee;text-decoration:none}
.btn-primary{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.btn-primary:hover{background:#1e6cf0}
.btn-danger{background:#fde6e7;color:var(--c-danger);border-color:#f4c5c8}
.btn-danger:hover{background:#fbcfd2}
.btn-ok{background:#dff5e8;color:var(--c-ok);border-color:#bfe6cf}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 10px;font-size:.85rem}

/* ---------- Alerts / Badges ---------- */
.alert{
  padding:12px 14px;border-radius:var(--r);margin-bottom:12px;border:1px solid transparent;
}
.alert-success{background:#e7f7ee;border-color:#bfe6cf;color:#1e7641}
.alert-error  {background:#fdecee;border-color:#f4c5c8;color:#a02029}
.alert-info   {background:#e8f0fe;border-color:#bcd2f7;color:#143b8a}

.badge{
  display:inline-block;padding:3px 8px;border-radius:999px;font-size:.75rem;
  background:#e8edf4;color:var(--c-text);
}
.badge-warn  {background:#fff1d6;color:#7a5300}
.badge-danger{background:#fde6e7;color:#a02029}
.badge-ok    {background:#dff5e8;color:#176c3a}
.badge-muted {background:#eceff5;color:var(--c-muted)}

/* ---------- Login ---------- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f3057,#0a2240);padding:20px}
.login-card{background:#fff;padding:28px 24px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.login-card h1{margin:0;font-size:1.4rem}
.login-card .muted{color:var(--c-muted);margin:0 0 18px}

/* ---------- Stock controls (Lager) ---------- */
.stock-row{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:10px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r);margin-bottom:8px;
}
.stock-row .name{font-weight:600}
.stock-row .meta{color:var(--c-muted);font-size:.85rem}
.stock-controls{display:flex;gap:6px}
.stock-controls .btn{min-width:48px;font-size:1.1rem}

/* ---------- Toolbar / Filter ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:160px}
.toolbar input[type=search]{padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--r);width:100%;font-size:1rem;min-height:var(--tap)}

/* ---------- Diverses ---------- */
.muted{color:var(--c-muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hr{height:1px;background:var(--c-border);border:0;margin:18px 0}
hr{height:1px;background:var(--c-border);border:0;margin:18px 0}

.totals{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r);
  padding:14px;margin-top:14px;max-width:420px;margin-left:auto;
}
.totals .row{display:flex;justify-content:space-between;padding:4px 0}
.totals .row.total{font-weight:700;border-top:1px solid var(--c-border);margin-top:6px;padding-top:8px;font-size:1.1rem}

.invoice-line{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r);
  padding:12px;margin-bottom:10px;
}
.invoice-line .grid{display:grid;grid-template-columns:1fr;gap:6px 12px}
@media(min-width:760px){.invoice-line .grid{grid-template-columns:2fr .6fr 1fr 1fr 1fr auto}}

.tv-mask{font-family:monospace;letter-spacing:2px}

/* Mehrere Ansprechpartner pro Kunde */
.contact-row{
  display:grid;grid-template-columns: 1.2fr 1fr 1.4fr 1fr 1fr 1.2fr auto;
  gap:8px;margin-bottom:8px;align-items:center;
}
.contact-row input{font-size:.9rem;padding:8px 10px;height:36px;min-height:0}
@media (max-width: 900px){
  .contact-row{grid-template-columns:1fr 1fr auto}
}
@media (max-width: 540px){
  .contact-row{grid-template-columns:1fr}
  .contact-row .contact-remove{justify-self:end}
}

/* Einrichtungspauschale-Box im Rechnungs-Formular */
.setup-fee-box{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:#f5f8fc;border:1px dashed var(--c-border);border-radius:var(--r);
  padding:10px 14px;margin:14px 0;
}
.setup-fee-box label{margin:0}
.setup-fee-box .setup-fee-cb{display:flex;align-items:center;gap:8px;cursor:pointer}
.setup-fee-box .setup-fee-cb input[type=checkbox]{width:auto;min-height:auto;margin:0}
.setup-fee-box input[type=number]{width:140px}
.setup-fee-box small{flex-basis:100%;margin-top:4px}

/* Komponenten-Picker im System-Form */
.comp-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-top:6px}
.comp-group{background:#fff;border:1px solid var(--c-border);border-radius:var(--r);padding:8px 10px}
.comp-group-head{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);font-weight:600;padding:4px 4px 8px;border-bottom:1px solid var(--c-border);margin-bottom:4px}
.comp-row{
  display:grid;grid-template-columns:auto 1fr 70px;align-items:center;gap:8px;
  padding:6px 4px;border-radius:6px;cursor:pointer;
}
.comp-row:hover{background:#f5f7fc}
.comp-row .comp-cb{width:auto;min-height:auto;margin:0}
.comp-row .comp-name{font-size:.92rem}
.comp-row .comp-qty{padding:4px 8px;height:32px;min-height:0;font-size:.9rem;text-align:center}

/* ---------- Dashboard ---------- */
.dash-greet{font-size:1.4rem;font-weight:600;margin:6px 0 2px;color:var(--c-text)}
.dash-sub{color:var(--c-muted);margin:0 0 18px;font-size:.95rem}
.dash-section{
  font-size:.72rem;color:var(--c-muted);margin:18px 0 8px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}

/* Alerts */
.dash-alerts{display:flex;flex-direction:column;gap:6px}
.dash-alert{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--r);font-size:.92rem;
  border:1px solid transparent;text-decoration:none;color:inherit;
}
.dash-alert:hover{text-decoration:none;filter:brightness(.97)}
.dash-alert .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.dash-alert .lab{flex:1}
.dash-alert .cnt{font-weight:700}
.al-danger{background:#fdecee;border-color:#f4c5c8;color:#a02029}
.al-danger .dot{background:#dc2f3a}
.al-warn  {background:#fff5d8;border-color:#f5d97f;color:#7a5300}
.al-warn  .dot{background:#e0a300}
.al-info  {background:#e8f0fe;border-color:#bcd2f7;color:#143b8a}
.al-info  .dot{background:#2e7dff}
.dash-alerts-ok{
  background:#e7f7ee;border:1px solid #bfe6cf;color:#1e7641;
  padding:12px 14px;border-radius:var(--r);font-size:.92rem;
}

/* Kategorie-Kacheln */
.dash-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.dash-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r);padding:14px 16px;min-height:120px;
  display:flex;flex-direction:column;gap:4px;color:var(--c-text);text-decoration:none;
}
.dash-card:hover{text-decoration:none;border-color:var(--c-accent)}
.dash-card.planned{background:#f8f9fc;border-style:dashed;color:var(--c-muted);cursor:default}
.dash-card.planned:hover{border-color:var(--c-border)}
.dash-card .dc-top{display:flex;justify-content:flex-end;margin-bottom:2px}
.dash-card .dc-title{font-size:1.02rem;font-weight:600;color:var(--c-text)}
.dash-card.planned .dc-title{color:var(--c-muted)}
.dash-card .dc-desc{font-size:.85rem;color:var(--c-muted);line-height:1.45}
.dash-card .dc-kpi{margin-top:auto;font-size:.78rem;color:var(--c-muted);padding-top:6px}
.pill{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:999px;background:#dde8ff;color:#143b8a;font-weight:600}
.pill-soon{background:#eceff5;color:var(--c-muted)}