/* Lieferantenportal Medical Nights — alles lokal, Systemschriften, hell und dunkel. */
:root {
  --brand: #045c5a;
  --brand-2: #0b7a76;
  --brand-soft: #e3f1f0;
  --bg: #f5f7f7;
  --surface: #ffffff;
  --surface-2: #f0f4f4;
  --text: #182625;
  --muted: #5d6e6d;
  --border: #dce5e4;
  --field-border: #7a8a89;
  --scroll-shadow: rgb(16 24 40 / 16%);
  --ok: #067647;
  --ok-soft: #e6f4ec;
  --info: #175cd3;
  --info-soft: #eaf1fd;
  --warn: #a15c07;
  --warn-soft: #fdf3e2;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --radius: 12px;
  --font: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #5cc2bb;
    --brand-2: #7fd3cd;
    --brand-soft: #173533;
    --bg: #0e1615;
    --surface: #152120;
    --surface-2: #1b2a29;
    --text: #e4eeed;
    --muted: #9db1af;
    --border: #2a3b3a;
    --field-border: #647c7a;
    --scroll-shadow: rgb(0 0 0 / 55%);
    --ok: #4ccf8e;
    --ok-soft: #133426;
    --info: #84adff;
    --info-soft: #182742;
    --warn: #f0b04f;
    --warn-soft: #3a2b12;
    --danger: #ff8a7f;
    --danger-soft: #3d1a17;
    --shadow: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links im Fließtext und in Tabellen nicht nur über die Farbe erkennbar (WCAG 1.4.1) */
p a:not(.btn), dd a:not(.btn), td a:not(.btn), li a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
p { margin: .25rem 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt { margin-top: 1rem; }
.mt-s { margin-top: .9rem; }
.chart-box { position: relative; height: 260px; }
.product-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); float: left; margin-right: 1rem; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.task-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: 0; }
.actionbar { display: flex; gap: .5rem; flex-wrap: wrap; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* Kopfzeile */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; }
.logo { flex: 0 1 auto; min-width: 0; }
.logo img { height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.logo .dark { display: none; }
@media (prefers-color-scheme: dark) { .logo .light { display: none; } .logo .dark { display: block; } }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.nav a { padding: .4rem .65rem; border-radius: 8px; color: var(--text); font-weight: 500; }
.nav a:hover, .nav a.active { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.top-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .55rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.icon-btn:hover { text-decoration: none; background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; display: block; }
.profile-btn .who-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-btn .who-icon { display: none; }
.count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; padding: .5rem; border-bottom: 1px solid var(--border); }
  .nav.open { display: flex; }
}
@media (max-width: 480px) {
  .topbar-inner { gap: .5rem; padding: .5rem .75rem; }
  .top-actions { gap: .3rem; }
  .profile-btn .who-name { display: none; }
  .profile-btn .who-icon { display: block; }
}

/* Inhalt */
main { max-width: 1440px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.footer { max-width: 1440px; margin: 0 auto; padding: 1rem; color: var(--muted); font-size: .85rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .9rem; border-radius: 10px; border: 1px solid transparent; background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; }
@media (prefers-color-scheme: dark) { .btn { color: #0e1615; } }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.danger, .count { color: #0e1615; } }
.btn.small { min-height: 32px; padding: .25rem .6rem; font-size: .85rem; }
.btn.link { background: none; border: 0; color: var(--brand); padding: 0 .25rem; min-height: 24px; min-width: 24px; font-weight: 500; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Ladezustand: HTMX setzt .htmx-request am auslösenden Element; Doppelklick wirkungslos */
.btn.htmx-request, form.htmx-request { opacity: .65; pointer-events: none; }
body.htmx-request { cursor: progress; }
@media (pointer: coarse) {
  .btn.small { min-height: 44px; }
  .btn.link { min-height: 44px; padding: 0 .5rem; }
  .icon-btn { min-width: 44px; height: 44px; }
  .nav a { padding: .7rem .8rem; }
  .lang-switch button { min-height: 44px; min-width: 44px; }
}
form.inline { display: inline; }

/* Status-Marken */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge.muted { background: var(--surface-2); color: var(--muted); }

/* Meldungen */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.messages li { padding: .65rem .9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.messages .success { border-color: var(--ok); background: var(--ok-soft); }
.messages .warning { border-color: var(--warn); background: var(--warn-soft); }
.messages .error { border-color: var(--danger); background: var(--danger-soft); }
.alert { padding: .65rem .9rem; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--warn); margin: .5rem 0; }
.alert.danger { background: var(--danger-soft); border-color: var(--danger); }
.alert.info { background: var(--info-soft); border-color: var(--info); }

/* Tabellen */
/* Breite Tabellen: Schatten am Rand zeigt, dass seitlich mehr kommt */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll var(--surface);
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
dl.facts { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
dl.facts dt, dl.facts dd { overflow-wrap: anywhere; min-width: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
@media (max-width: 560px) {
  dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.facts dt { margin-top: .55rem; font-size: .82rem; }
  dl.facts dt:first-child { margin-top: 0; }
}
/* Am Handy: Tabellenzeilen als Blöcke, Spaltenname aus data-label */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: .55rem 0; border-bottom: 1px solid var(--border); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: .15rem 0; text-align: left; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  table.stack td.cell-empty { display: none; }
}

/* Formulare */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1rem; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .88rem; }
.field .help { color: var(--muted); font-size: .8rem; }
.field .errors, .form-errors { color: var(--danger); font-size: .85rem; margin: 0; padding: 0; list-style: none; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: .55rem .65rem; border-radius: 9px; border: 1px solid var(--field-border); background: var(--surface); color: var(--text); font: inherit; min-height: 42px;
}
/* iOS zoomt bei Eingabefeldern unter 16 px ins Bild */
@media (max-width: 760px) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], input[type=search], select, textarea { font-size: 16px; }
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--brand); outline-offset: 1px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.check { flex-direction: row; align-items: center; gap: .5rem; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.dropzone { border: 2px dashed var(--field-border); border-radius: 10px; padding: .75rem; text-align: center; color: var(--muted); }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
progress { width: 100%; height: 8px; }

/* Dialog */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgb(0 0 0 / 30%); }
dialog::backdrop { background: rgb(10 20 20 / 45%); }
.dialog-head { display: flex; align-items: center; justify-content: flex-end; padding: .4rem .4rem 0; }
.dialog-head .btn.link { min-width: 44px; min-height: 44px; color: var(--text); }
.dialog-head svg { width: 20px; height: 20px; display: block; }
.dialog-body { padding: 0 1.1rem 1.1rem; overflow-y: auto; }
summary { cursor: pointer; min-height: 32px; padding: .25rem 0; }

/* Kennzahlen */
.process { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.process a { flex: 1 0 110px; display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); position: relative; }
.process a:hover { border-color: var(--brand); text-decoration: none; }
.process .n { font-size: 1.35rem; font-weight: 700; }
.process .l { font-size: .78rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .75rem; }
.tile { display: block; padding: .85rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); }
.tile:hover { border-color: var(--brand); text-decoration: none; }
.tile .n { font-size: 1.7rem; font-weight: 750; line-height: 1.1; }
.tile .l { color: var(--muted); font-size: .85rem; }
.tile .d { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.tile.alert-on { border-color: var(--danger); }
.tile.alert-on .n { color: var(--danger); }

/* Zeitstrahl (SVG) */
.timeline svg { width: 100%; display: block; }
.timeline .bar { fill: var(--brand); opacity: .85; }
.timeline .bar.late { fill: var(--danger); stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.timeline .today { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.timeline text { fill: var(--text); font-size: 11px; font-family: var(--font); }
.timeline .row:hover .bar { opacity: 1; }

/* Board */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filters .field { min-width: 160px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 1rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .2rem .7rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .85rem; font-weight: 600; }
.chip:hover { text-decoration: none; filter: brightness(.97); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.column { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; min-height: 120px; }
.column-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .85rem; padding: .1rem .2rem .5rem; }
.column-head h2 { font-size: inherit; margin: 0; }
.column-body { display: grid; gap: .5rem; min-height: 60px; }
.column.drop-ok { outline: 2px dashed var(--brand); }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; box-shadow: var(--shadow); cursor: grab; }
.kcard.late, .kcard.flag { border-left: 4px solid var(--danger); }
.kcard .t { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; }
.kcard .meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.kcard .next { margin-top: .5rem; display: none; }
/* Ohne Ziehen bedienbar: Tastatur (Fokus in der Karte), Touch und Handy zeigen „Nächste Stufe“ */
.kcard:focus-within .next { display: block; }
@media (max-width: 760px), (pointer: coarse) {
  .kcard .next { display: block; }
  .kcard .next .btn { width: 100%; }
}
@media (max-width: 760px) {
  .board { grid-auto-flow: row; grid-auto-columns: auto; }
  .kcard { cursor: default; }
  .column { min-height: 0; }
  .column.empty { display: none; }
}

/* Fotos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.photo { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo .cap { padding: .35rem .5rem; font-size: .78rem; }
.photo.rejected { outline: 3px solid var(--danger); }

/* Sprechblasen */
.thread { border: 1px solid var(--border); border-radius: 10px; padding: .75rem; }
.thread + .thread { margin-top: .75rem; }
.bubble { background: var(--surface-2); border-radius: 12px; padding: .5rem .75rem; margin: .4rem 0; max-width: 92%; }
.bubble.mine { background: var(--brand-soft); margin-left: auto; }
.bubble .who { font-size: .75rem; color: var(--muted); }
.translation { border-left: 3px solid var(--brand); padding-left: .5rem; color: var(--muted); }

/* Anmeldung */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; box-shadow: var(--shadow); }
.auth-card .logo img { height: 46px; margin: 0 auto .75rem; }
.auth-card .logo { display: flex; justify-content: center; }
.auth-links { display: flex; justify-content: center; gap: 1rem; font-size: .85rem; margin-top: 1rem; }
.lang-switch { display: flex; justify-content: center; gap: .35rem; margin-bottom: 1rem; }
.lang-switch button { background: none; border: 1px solid var(--border); border-radius: 8px; padding: .2rem .6rem; color: var(--text); cursor: pointer; font: inherit; }
.lang-switch button.active { border-color: var(--brand); color: var(--brand); font-weight: 700; }

/* Druck */
@media print { .topbar, .footer, .actions, .btn, .filters { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }