/* Modern Dark UI – clean, mobile-first, Inter Font */
:root{
  --bg:#0b0f14; 
  --bg-soft:#0e131a;
  --card:#111827; 
  --muted:#9ca3af; 
  --text:#e5e7eb; 
  --accent:#7c3aed;
  --accent-2:#5b21b6;
  --focus:#5b86ff;
  --border:#1f2937; 
  --ok:#22c55e; 
  --warn:#f59e0b; 
  --err:#ef4444;

  /* Neue Kategorien */
  --fwd:#1BE8F5; /* Weiterleiten – türkis */
  --ext:#3b82f6; /* Extern – blau */
  --park:#592453;/* Parking – pflaume */

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --space:16px;
  --space-lg:24px;
  --space-xl:32px;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.bg{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg) 60%,var(--bg-soft));
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-14);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.container{max-width:1120px;margin:var(--space-lg) auto;padding:0 var(--space)}
.center-wrap{min-height:100%;display:grid;place-items:center;padding:var(--space-lg)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:calc(var(--space) + 4px);
  box-shadow:var(--shadow);
}
.w-420{width:100%;max-width:440px}
.title{margin:0 0 10px;font-weight:700;font-size:var(--fs-20);line-height:1.25;letter-spacing:.2px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px var(--space);
  border-bottom:1px solid var(--border);
  background:rgba(11,15,20,.75);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
}
.top-title{margin:0;font-weight:700;font-size:var(--fs-18)}

/* Brand / Logo */
.logo{
  height:60px;
  width:auto;
  display:block;
}
@media (max-width:560px){
  .logo{height:46px}
}

.vstack{display:flex;flex-direction:column}
.hstack{display:flex;align-items:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}

.grid{display:grid;gap:12px}
.form-grid{grid-template-columns:1fr 1fr}
.span-2{grid-column:1 / -1}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

.label{
  display:flex;flex-direction:column;gap:6px;
  font-weight:500;font-size:var(--fs-13);color:#c7cad1;
}

/* Inputs / Buttons */
.input{
  height:44px; /* bessere Touch-Ziele */
  background:#0f1620;
  border:1px solid #223043;
  color:#e8eaee;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  width:100%;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 4px rgba(91,134,255,.18);
  background:#101a27;
}
input[type="date"].input,
input[type="number"].input,
select.input{padding-right:14px}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:#121a24;
  color:var(--text);
  border-radius:12px;
  padding:12px 16px;
  text-decoration:none;
  font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .06s ease,border-color .15s ease, background .15s ease;
  touch-action:manipulation;
}
.btn:hover{border-color:#2b3b52;background:#141f2b}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-color:#4c1d95;
}
.btn.outline{background:transparent}
.btn.small{padding:8px 12px;font-size:var(--fs-13)}
.btn.danger{background:#3b0f12;border-color:#5b1a1f;color:#fca5a5}

.alert{
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0;
  font-size:var(--fs-14);
}
.alert-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac}
.alert-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fecaca}
.foot-note{margin-top:12px;color:#9ca3af;font-size:var(--fs-12)}
.link{color:#a78bfa;text-decoration:none}
.link:hover{text-decoration:underline}

/* Toolbar */
.toolbar{
  display:grid;
  grid-template-columns:1fr 220px 220px;
  gap:10px;
  margin-bottom:12px;
}
@media (max-width:900px){.toolbar{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.toolbar{grid-template-columns:1fr;position:sticky;top:64px;z-index:10}}

/* Table */
.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.table{
  width:100%;
  min-width:880px; /* behält Layout, aber weichere Scrollbar */
  border-collapse:separate;
  border-spacing:0;
  color:#e5e7eb;
  font-size:var(--fs-14);
}
.table th,.table td{
  padding:12px 14px;
  border-bottom:1px solid #1f2937;
  text-align:left;
  white-space:nowrap;
}
.table th{
  font-weight:600;color:#cbd5e1;cursor:pointer;position:sticky;top:0;background:#0f1620;
}
.table tr:hover{background:#0f1520}

/* Row status indicator */
.row-green{ box-shadow:inset 4px 0 0 var(--ok) }
.row-amber{ box-shadow:inset 4px 0 0 var(--warn) }
.row-red{   box-shadow:inset 4px 0 0 var(--err)  }
/* Neue Kategorien */
.row-teal{  box-shadow:inset 4px 0 0 var(--fwd) } /* Weiterleiten */
.row-blue{  box-shadow:inset 4px 0 0 var(--ext) } /* Extern */
.row-park{  box-shadow:inset 4px 0 0 var(--park) }/* Parking  */

/* Badges */
.badge{
  padding:.28rem .6rem;
  border-radius:999px;
  font-size:12px;
  border:1px solid transparent;
  font-weight:600;
  letter-spacing:.2px;
}
.badge.green{ background:rgba(34,197,94,.15);  border-color:rgba(34,197,94,.35);  color:#86efac }
.badge.amber{ background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.4);   color:#fcd34d }
.badge.red{   background:rgba(239,68,68,.15);  border-color:rgba(239,68,68,.4);   color:#fca5a5 }
/* Neue Kategorien */
.badge.teal{  background:rgba(27,232,245,.15); border-color:rgba(27,232,245,.35); color:#99f6e4 } /* Weiterleiten */
.badge.blue{  background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.35); color:#93c5fd } /* Extern */
.badge.park{  background:rgba(89,36,83,.15);   border-color:rgba(89,36,83,.35);   color:#f0abfc } /* Parking */

/* Restlaufzeit Farben */
.rest-ok{color:#a7f3d0}
.rest-low{color:#fde68a}
.rest-expired{color:#fecaca}

/* Empty state */
.empty{
  padding:18px;
  border:1px dashed #334155;
  border-radius:12px;
  color:#94a3b8;
  text-align:center;
}

/* Topbar buttons */
.topbar .btn{font-size:var(--fs-14);height:44px}

/* Better focus visibility for accessibility */
:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 4px rgba(91,134,255,.25) !important;
  border-color:var(--focus) !important;
  transition:none;
}

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

/* iOS tap highlight remove */
*{-webkit-tap-highlight-color:transparent}