@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f6f6f6;
  --bg2:      #ffffff;
  --bg3:      #f5f5f5;
  --border:   #e0e0e0;
  --border2:  #cccccc;
  --text:     #1c1b18;
  --muted:    #666666;
  --accent:   #00a8c8;
  --accent2:  #0090aa;
  --orange:   #b5651d;
  --danger:   #c0392b;
  --success:  #1e8a4a;
  --info:     #1d6fa4;
  --radius:   0px;
  --mono:     'DM Mono', monospace;
  --sans:     'DM Sans', sans-serif;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; }

/* ── LAYOUT ── */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.nav {
  display: flex; gap: 2px; padding: 10px 20px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  overflow-x: auto; position: sticky; top: 52px; z-index: 99;
}

.main { flex: 1; padding: 24px 20px; max-width: 1100px; width: 100%; margin: 0 auto; }

/* ── LOGIN ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-box {
  width: 100%; max-width: 380px; padding: 40px 36px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
}
.login-logo { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; margin-bottom: 32px; }
.login-box h1 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.login-box p  { font-size: 13px; color: var(--muted); margin-bottom: 28px; }

/* ── FORMS ── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .04em; margin-bottom: 6px; text-transform: uppercase; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text); font-family: var(--sans);
  font-size: 14px; padding: 10px 12px; transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer;
}
.field input.error, .field select.error { border-color: var(--danger); }

/* Alle Auswahlfelder (auch Filter außerhalb von .field) einheitlich: eckig, mit eigenem Pfeil */
select {
  background-color: var(--bg2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
  border: 1px solid var(--border2); border-radius: 0; color: var(--text);
  font-family: var(--sans); font-size: 13px; padding: 7px 30px 7px 10px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }
.field select { background-color: var(--bg3); background-position: right 12px center; padding-right: 34px; font-size: 14px; }

/* ── Seitentitel mit Bereichs-Icon (gleiche Farbe wie die Kachel auf der Startseite) ── */
.kc-seitentitel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.kc-seitentitel h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.kc-seitentitel-icon {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--kc-farbe, var(--accent)); color: #fff;
}
.kc-seitentitel-icon svg { width: 21px; height: 21px; }
.kc-seitentitel-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field .err-msg { font-size: 12px; color: var(--danger); margin-top: 4px; display: none; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius); border: none;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn-primary  { background: var(--accent); color: #000; }
.btn-primary:hover  { background: var(--accent2); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .85; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── ALERTS ── */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; border-left: 3px solid; }
.alert-danger  { background: rgba(192,57,43,.12); border-color: var(--danger); color: #e74c3c; }
.alert-success { background: rgba(39,174,96,.12); border-color: var(--success); color: #2ecc71; }
.alert-info    { background: rgba(41,128,185,.12); border-color: var(--info); color: #3498db; }

/* ── CARDS ── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card-title  { font-size: 14px; font-weight: 600; }
.card-sub    { font-size: 12px; color: var(--muted); }

/* ── TABLES ── */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 310px); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { position: sticky; top: 0; z-index: 10; }
thead th {
  background: var(--bg3); color: var(--muted); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; padding: 10px 14px;
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; background: #ffffff; }
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: #f7f6f4; }
tbody tr:hover { background: #f5f4f2; }
.sz-monatstabelle tbody tr:hover { background: #f0ede8 !important; }
.sz-tagezeile:hover { background: #f0ede8 !important; }
tbody td { padding: 11px 14px; vertical-align: middle; }

/* Urlaubskonten (Urlaubsverwaltung): viele Zahlenspalten → kompakter */
.url-konten thead th { padding: 10px 8px; letter-spacing: .02em; }
.url-konten tbody td { padding: 9px 8px; }

/* Lagerort: Varianten für schmale Bildschirme (siehe @media unten) */
.lagerort-tabelle .lo-plan-inline, .lagerort-tabelle .lo-kurz { display: none; }

/* ── BADGES ── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 0;   /* eckig wie der Rest */
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.5;
}
.badge-ok      { background: rgba(39,174,96,.15); color: #2ecc71; }
.badge-warn    { background: rgba(194,96,10,.15); color: var(--orange); }
.badge-danger  { background: rgba(192,57,43,.15); color: #e74c3c; }
.badge-neutral { background: var(--bg3); color: var(--muted); }
.badge-info    { background: rgba(29,111,164,.15); color: var(--info); }

/* ── STATUS DOTS (Produktionsschritte) ── */
.steps { display: flex; gap: 4px; align-items: center; }
.step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border2); }
.step-dot.done { background: var(--success); }
.step-dot.active { background: var(--orange); }

/* ── SPINNER ── */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── MODAL ── */
.modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-title  { font-size: 15px; font-weight: 600; }
.modal-body   { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.modal-close  { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px; }
.modal-close:hover { color: var(--text); }
/* ── SEARCH / FILTER BAR ── */

.search-input {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius);
  color: var(--text); font-family: var(--sans); font-size: 13px;
  padding: 8px 12px; width: 240px; transition: border-color .15s;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-input::placeholder { color: var(--muted); }

/* ── STATS GRID ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stat-val { font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── MOBILE ── */
@media (max-width: 600px) {
  .main { padding: 12px 10px; }
  .nav { padding: 6px 10px; gap: 2px; }
  .search-input { width: 100%; }

  .modal-bg { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; min-width: 80px; padding: 10px 12px; font-size: 13px; }

  .table-wrap { max-height: none; overflow-x: auto; }
  tbody td { padding: 9px 10px; font-size: 12px; }
  thead th { padding: 8px 10px; font-size: 10px; }
  /* Lagerort ohne seitliches Scrollen: Plan wandert unter die Teilenummer, Köpfe dürfen umbrechen */
  .lagerort-tabelle thead th { padding: 8px 5px; letter-spacing: 0; white-space: normal; }
  .lagerort-tabelle tbody td { padding: 8px 5px; font-size: 12px !important; }
  .lagerort-tabelle thead th:first-child, .lagerort-tabelle tbody td:first-child { padding-left: 8px; }
  .lagerort-tabelle .badge { padding: 1px 5px; font-size: 10px; }
  .lagerort-tabelle .lo-plan { display: none; }
  .lagerort-tabelle .lo-plan-inline { display: block; margin-top: 3px; }
  .lagerort-tabelle .lo-lang { display: none; }
  .lagerort-tabelle .lo-kurz { display: inline; }

  div[id^="row-"] { grid-template-columns: 1fr !important; gap: 6px !important; }

  .card { padding: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-val { font-size: 22px; }
  .btn { min-height: 40px; }
  .pg-prev, .pg-next { padding: 8px 14px !important; font-size: 12px !important; }

  /* ── Globaler Kopfbereich (Logo, Name, Abmelden): auf schmalen Screens läuft er sonst über den Rand ── */
  .kc-header-inner { padding: 8px 10px !important; gap: 8px; }
  .kc-header-logo  { height: 34px !important; }
  .kc-header-right { gap: 8px !important; }
  .kc-header-user  { display: none; }

  /* ── Stempeluhr-Statuszeile (Einstempeln/Pause/Ausstempeln): untereinander statt nebeneinander ── */
  .sz-status-row  { flex-wrap: wrap; }
  .sz-status-seit { flex: 1 1 100%; margin-left: 20px !important; }
  .sz-status-btns { margin-left: 0 !important; flex: 1 1 100%; }
  .sz-status-btns .btn { flex: 1; padding: 10px 4px; font-size: 12px; white-space: normal; }

  /* ── Formulare mit mehrspaltigem Grid (Bearbeiten-Popups, Korrekturen, …): untereinander statt gequetscht ── */
  .modal-body div[style*="grid-template-columns"]:not(.stats-grid),
  #main-content div[style*="grid-template-columns"]:not(.stats-grid) {
    grid-template-columns: 1fr !important;
  }

  /* ── Benachrichtigungs-Panel nie breiter als der Bildschirm ── */
  #kc-notif-panel { width: auto !important; left: 12px; right: 12px !important; top: 70px !important; }

  .modal-title { word-break: break-word; }

  /* ── Button-Zeilen mit mehr als 2 Aktionen (z.B. Begleitschein-Popup): umbrechen statt abschneiden ── */
  .kc-modal-actions { justify-content: stretch !important; }
  .kc-modal-actions .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* ── Kennzahl-Kacheln mit fester Spaltenzahl (Tagespopup, Monatsübersicht-Summe): 2 statt 4 pro Zeile ── */
  .stats-grid[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .kc-header-logo { height: 28px !important; }
}

/* ── Hilfe (hilfe.js) ── */
.hilfe-text ol, .hilfe-text ul { margin: 4px 0 8px; padding-left: 22px; }
.hilfe-text li { margin-bottom: 3px; }
.hilfe-text p { margin: 4px 0 8px; }
.hilfe-text code { font-family: var(--mono); font-size: 12px; background: var(--bg3); padding: 1px 4px; }