/* ============================================================
   Kaveko Lagersystem – Stylesheet
   Handgeschrieben, kein Build-Tool nötig.
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --red-50:  #fef2f2;  --red-100: #fee2e2;  --red-600: #dc2626;  --red-700: #b91c1c;  --red-800: #991b1b;
  --amber-50:#fffbeb;  --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e;
  --blue-50: #eff6ff;  --blue-100:#dbeafe;  --blue-600:#2563eb;  --blue-700:#1d4ed8;  --blue-800:#1e40af;
  --emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-600:#059669;--emerald-700:#047857;--emerald-800:#065f46;
  --purple-100:#f3e8ff;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;

  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  --container: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--slate-50);
  color: var(--slate-800);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; font-size: 14px; }
[hidden], .hidden { display: none !important; }
table { border-collapse: collapse; width: 100%; }

/* --- Layout --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.main { max-width: var(--container); margin: 0 auto; padding: 16px; }

.page-head { max-width: var(--container); margin: 0 auto; padding: 24px 16px 8px; }
.page-title { font-size: 20px; font-weight: 700; color: var(--slate-800); }
.page-subtitle { font-size: 13px; color: var(--slate-500); margin-top: 2px; }

/* --- Navigation --- */
.nav { background: var(--slate-900); color: #fff; }
.nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.nav__logo { width: 32px; height: 32px; background: var(--green-600); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }
.nav__brand-text { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius);
  font-size: 14px; color: var(--slate-300); transition: background .15s, color .15s; }
.nav__link:hover { background: var(--slate-700); color: #fff; }
.nav__link--active { background: var(--green-600); color: #fff; }
.nav__link svg { width: 16px; height: 16px; }
.nav__right { display: flex; align-items: center; gap: 8px; }
.nav__user { color: var(--slate-400); font-size: 12px; }
.nav__logout { color: var(--slate-400); font-size: 12px; padding: 4px 8px; border-radius: var(--radius); }
.nav__logout:hover { color: #fff; background: var(--slate-700); }
.nav__toggle { display: none; padding: 6px; border-radius: var(--radius); color: var(--slate-300); }
.nav__toggle:hover { background: var(--slate-700); }
.nav__toggle svg { width: 20px; height: 20px; }
.nav__mobile { display: none; border-top: 1px solid var(--slate-700); padding: 8px 16px; }
.nav__mobile.open { display: block; }
.nav__mobile .nav__link { padding: 8px 12px; margin-bottom: 2px; }

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}
@media (max-width: 767px) {
  .nav__user { display: none; }
}

/* --- Cards --- */
.card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.card--pad { padding: 20px; }
.card__head { padding: 12px 16px; border-bottom: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: space-between; }
.card__title { font-size: 14px; font-weight: 600; color: var(--slate-700); }
.card__body { padding: 16px; }
.card__section-title { font-size: 14px; font-weight: 600; color: var(--slate-700);
  border-bottom: 1px solid var(--slate-100); padding-bottom: 8px; margin-bottom: 16px; }

/* --- Icons (Standardgröße; kontextuelle Regeln überschreiben) --- */
.ic { width: 20px; height: 20px; flex: none; }

/* --- Tabs / Untermenü --- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--slate-200);
  margin-bottom: 20px; }
.tabs__btn { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--slate-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tabs__btn:hover { color: var(--slate-700); }
.tabs__btn.active { color: var(--green-700); border-bottom-color: var(--green-600); }
.tabs__btn svg { width: 16px; height: 16px; }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 500;
  transition: background .15s, opacity .15s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--green-600); color: #fff; }
.btn--primary:hover { background: var(--green-700); }
.btn--secondary { background: var(--slate-100); color: var(--slate-600); }
.btn--secondary:hover { background: var(--slate-200); }
.btn--dark { background: var(--slate-700); color: #fff; }
.btn--dark:hover { background: var(--slate-800); }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--blue-700); }
.btn--purple { background: var(--purple-600); color: #fff; }
.btn--purple:hover { background: var(--purple-700); }
.btn--amber { background: var(--amber-600); color: #fff; }
.btn--amber:hover { background: var(--amber-700); }
.btn--emerald { background: var(--emerald-600); color: #fff; }
.btn--emerald:hover { background: var(--emerald-700); }
.btn--red { background: var(--red-600); color: #fff; }
.btn--red:hover { background: var(--red-700); }
.btn--ghost { border: 1px solid var(--slate-300); color: var(--slate-600); background: #fff; }
.btn--ghost:hover { background: var(--slate-50); }
.btn--ghost-red { border: 1px solid var(--red-100); color: var(--red-600); background: #fff; }
.btn--ghost-red:hover { background: var(--red-50); }
.btn--lg { padding: 12px 20px; font-size: 16px; font-weight: 700; border-radius: var(--radius-lg); }
.btn--sm { padding: 5px 12px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--rounded { border-radius: var(--radius-xl); padding: 10px 24px; font-weight: 600; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Icon-only action buttons (table rows) */
.icon-btn { display: inline-flex; padding: 6px; border-radius: var(--radius); color: var(--slate-400); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--green-600); }
.icon-btn--blue:hover { color: var(--blue-600); }
.icon-btn--purple:hover { color: var(--purple-600); }

/* --- Badges --- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--radius); font-size: 12px; font-weight: 500; }
.badge--green  { background: var(--emerald-100); color: var(--emerald-800); }
.badge--red    { background: var(--red-100);     color: var(--red-800); }
.badge--amber  { background: var(--amber-100);   color: var(--amber-800); }
.badge--blue   { background: var(--blue-100);    color: var(--blue-800); }
.badge--purple { background: var(--purple-100);  color: var(--purple-800); }
.badge--gray   { background: var(--slate-100);   color: var(--slate-600); }

/* --- Forms --- */
.form-group { margin-bottom: 0; }
.label { display: block; font-size: 14px; font-weight: 500; color: var(--slate-700); margin-bottom: 4px; }
.label--xs { font-size: 12px; color: var(--slate-500); }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--slate-300); border-radius: var(--radius);
  padding: 9px 12px; font-size: 14px; color: var(--slate-800); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}
.input--upper { text-transform: uppercase; }
.input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.input--lg { padding: 12px; font-size: 20px; font-weight: 700; text-align: center; }
.textarea { resize: vertical; }
.field-hint { font-size: 12px; color: var(--slate-400); margin-top: 4px; }
.checkbox { width: 16px; height: 16px; accent-color: var(--green-600); }

/* --- Tables --- */
.table-wrap { overflow-x: auto; }
.table { font-size: 14px; }
.table thead { background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
  color: var(--slate-500); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.table td { padding: 10px 16px; border-top: 1px solid var(--slate-100); }
.table tbody tr:hover { background: var(--slate-50); }
.table .num { text-align: right; }
.cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-600); }
.cell-strong { font-weight: 600; color: var(--slate-800); }
.cell-sub { font-size: 12px; color: var(--slate-400); }

.link-strong { font-weight: 500; color: var(--slate-800); }
.link-strong:hover { color: var(--green-700); }

/* --- Stat cards --- */
.stat-card { border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; }
.stat-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-card__label { font-size: 12px; font-weight: 500; color: var(--slate-500); }
.stat-card__value { font-size: 30px; font-weight: 700; line-height: 1; }
.stat-card svg { width: 20px; height: 20px; }
.stat-card--blue   { background: var(--blue-50); }
.stat-card--blue   .stat-card__value, .stat-card--blue svg   { color: var(--blue-600); }
.stat-card--green  { background: var(--green-50); }
.stat-card--green  .stat-card__value, .stat-card--green svg  { color: var(--green-600); }
.stat-card--amber  { background: var(--amber-50); }
.stat-card--amber  .stat-card__value, .stat-card--amber svg  { color: var(--amber-600); }
.stat-card--red    { background: var(--red-50); }
.stat-card--red    .stat-card__value, .stat-card--red svg    { color: var(--red-600); }

/* --- Lists (dashboard, label picker) --- */
.list { display: flex; flex-direction: column; }
.list__item { padding: 10px 16px; border-top: 1px solid var(--slate-50); display: flex;
  align-items: center; gap: 12px; }
.list__item:first-child { border-top: none; }
.list__item:hover { background: var(--slate-50); }
.list__main { flex: 1; min-width: 0; }

/* --- Flash --- */
.flash { max-width: var(--container); margin: 16px auto 0; padding: 0 16px; }
.flash__inner { display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border-radius: var(--radius-lg); font-size: 14px; }
.flash--success .flash__inner { background: var(--emerald-50); color: var(--emerald-800); border: 1px solid var(--emerald-100); }
.flash--error   .flash__inner { background: var(--red-50);     color: var(--red-800);     border: 1px solid var(--red-100); }
.flash__close { opacity: .6; margin-left: 16px; }
.flash__close:hover { opacity: 1; }

/* --- Alert boxes --- */
.alert { padding: 16px; border-radius: var(--radius-lg); font-size: 14px; }
.alert--error { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-700); }
.alert--success { background: var(--emerald-50); border: 1px solid var(--emerald-100); color: var(--emerald-800); }
.alert--warning { background: var(--amber-50);   border: 1px solid var(--amber-200);  color: var(--amber-800); }
.alert ul { list-style: disc; padding-left: 20px; }
.alert li { margin: 2px 0; }

/* --- Segmented control (booking tabs) --- */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--slate-100); padding: 4px; border-radius: var(--radius); }
.segmented button { padding: 8px; border-radius: var(--radius); font-size: 13px;
  color: var(--slate-500); text-align: center; transition: all .15s; }
.segmented button.active { background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }
.segmented button.active[data-type="in"]         { color: var(--emerald-700); }
.segmented button.active[data-type="out"]        { color: var(--red-700); }
.segmented button.active[data-type="correction"] { color: var(--amber-700); }

/* --- Dropzone --- */
.dropzone { border: 2px dashed var(--slate-300); background: var(--slate-50);
  border-radius: var(--radius-lg); padding: 32px; text-align: center; cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.dragging { border-color: var(--green-500); background: var(--green-50); }
.dropzone svg { width: 40px; height: 40px; color: var(--slate-300); margin: 0 auto 12px; }
.dropzone__hint { font-size: 14px; color: var(--slate-500); }
.dropzone__hint b { color: var(--green-600); font-weight: 500; }
.dropzone__file { font-size: 12px; color: var(--slate-400); margin-top: 4px; }

/* --- Empty state --- */
.empty { padding: 48px 16px; text-align: center; color: var(--slate-400); }
.empty svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .3; }

/* --- Auth / setup screens --- */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: linear-gradient(135deg, var(--slate-900), var(--slate-800), var(--slate-900)); }
.auth-box { width: 100%; max-width: 380px; }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo__mark { width: 64px; height: 64px; background: var(--green-600); border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  color: #fff; font-weight: 900; font-size: 24px; box-shadow: var(--shadow); }
.auth-logo__title { font-size: 24px; font-weight: 700; color: #fff; }
.auth-logo__sub { color: var(--slate-400); font-size: 14px; margin-top: 4px; }
.auth-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 24px; }
.auth-foot { text-align: center; color: var(--slate-500); font-size: 12px; margin-top: 24px; }

/* --- Filter chips --- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--slate-300); background: #fff; color: var(--slate-600); transition: all .15s; }
.chip:hover { border-color: var(--slate-500); }
.chip--active { background: var(--slate-800); color: #fff; border-color: var(--slate-800); }

/* --- Pagination --- */
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 14px; }
.pagination__nums { display: flex; gap: 4px; align-items: center; }
.page-btn { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--slate-300); color: var(--slate-600); }
.page-btn:hover { background: var(--slate-100); }
.page-info { padding: 6px 12px; color: var(--slate-500); }

/* --- Detail field grid --- */
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 14px; }
.field__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); margin-bottom: 2px; }
.field__value { font-weight: 500; color: var(--slate-700); }
.note-box { background: var(--amber-50); border: 1px solid var(--amber-100); padding: 8px; border-radius: var(--radius); font-size: 14px; color: var(--slate-600); }

/* --- Scanner --- */
#reader { width: 100%; min-height: 280px; }
.scan-result { text-align: center; }
.scan-result__qty { font-size: 30px; font-weight: 800; line-height: 1; }

/* --- Role radio cards --- */
.radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  border: 1px solid var(--slate-200); border-radius: var(--radius); cursor: pointer; }
.radio-card:hover { background: var(--slate-50); }
.radio-card input:checked ~ .radio-card__text,
.radio-card.selected { border-color: var(--green-500); background: var(--green-50); }
.radio-card input { margin-top: 2px; accent-color: var(--green-600); }
.radio-card__title { font-size: 14px; font-weight: 500; color: var(--slate-700); }
.radio-card__desc { font-size: 12px; color: var(--slate-400); }

/* ============================================================
   Utility helpers (klein gehalten, ergänzen die Komponenten)
   ============================================================ */
.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); }
.grid--sidebar { grid-template-columns: 2fr 1fr; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 12px; }

.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.muted { color: var(--slate-500); }
.muted-2 { color: var(--slate-400); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t-green  { color: var(--green-600); }
.t-emerald{ color: var(--emerald-600); }
.t-red    { color: var(--red-600); }
.t-amber  { color: var(--amber-600); }
.t-blue   { color: var(--blue-600); }
.t-slate  { color: var(--slate-800); }

.max-lg { max-width: 512px; }
.max-xl { max-width: 672px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.qr-img { border-radius: var(--radius); }
.qr-box { text-align: center; }
.qr-box img { margin: 0 auto; width: 176px; height: 176px; }

/* --- Responsive --- */
.show-mobile { display: none; }
@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4, .grid--sidebar { grid-template-columns: 1fr; }
  .grid--stat { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: block; }
}
@media (min-width: 768px) {
  .grid--stat { grid-template-columns: repeat(4, 1fr); }
  .hide-desktop { display: none !important; }
}
@media (max-width: 639px) {
  .field-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Print --- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .label { break-inside: avoid; }
}