/* ===== Kundendashboard — styles.css ===== */

:root {
  --bg:#f0f6fc; --card:#ffffff; --ink:#2b2b2b; --muted:#3A3A3A; --line:#dde6ee;
  --accent:rgb(47,62,139); --accent-ink:#ffffff; --link:rgb(47,62,139);
  --radius:12px; --gap:14px;
  --surface:#f8fbff; --surface-2:#ffffff; --thead:#f0f6fc;
}

[data-theme="dark"] {
  --bg:#0f1720; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --line:#243244;
  --accent:#60a5fa; --accent-ink:#0b1220; --link:#93c5fd;
  --surface:#0b1220; --surface-2:#111827; --thead:#0b1220;
}
[data-theme="gelb"] {
  --bg:#fff7d1; --card:#ffffff; --ink:#2b2b1a; --muted:#6f6542; --line:#f6dfa2;
  --accent:#ca8a04; --accent-ink:#1a1606; --link:#b45309;
}
[data-theme="gruen"] {
  --bg:#eafaf2; --card:#ffffff; --ink:#0f2419; --muted:#4b6b58; --line:#c6ead7;
  --accent:#0f9d58; --accent-ink:#ffffff; --link:#0b7a43;
}
[data-theme="rot"] {
  --bg:#fff1f1; --card:#ffffff; --ink:#1f1b1b; --muted:#6b5a5a; --line:#f2c2c2;
  --accent:#c81e1e; --accent-ink:#ffffff; --link:#991b1b;
  --thead:#d64b4b; --thead-ink:#ffffff;
  --zebra:#fff8f8; --badge-bg:#fde2e2; --badge-ink:#991b1b;
}
[data-theme="rosa"] {
  --bg:#fff1f7; --card:#ffffff; --ink:#2b2430; --muted:#7a6b7a; --line:#ffd6e7;
  --accent:#ec4899; --accent-ink:#ffffff; --link:#be185d;
}

* { box-sizing:border-box }

html, body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.35; max-width:100%; overflow-x:hidden; font-size:16px;
}

a { color:var(--link); text-decoration:none }
a:hover { text-decoration:underline }

.container {
  width:100%; padding:24px clamp(16px,2vw,32px); display:grid; gap:var(--gap);
}

/* ========= HEADER ========= */
.header {
  display:flex; align-items:center; justify-content:flex-start;
  padding:14px 16px; border-radius:12px;
  background:#2f3e8b; border:1px solid #2f3e8b; color:#fff; gap:20px;
}
.title {
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700; color:#fff;
}
.title img { height:28px; width:auto; display:block }

.actions { display:flex; gap:10px; align-items:center; margin-left:auto }
.search-group { display:flex; align-items:center; gap:10px }
.header a { color:#fff }

.searchbox {
  max-width:240px; width:100%; padding:8px 10px;
  border:1px solid rgba(255,255,255,.35); border-radius:8px;
  background:#fff; font-size:14px; color:#1f2937;
}

.theme-btn {
  height:32px; width:32px;
  border:1px solid rgba(255,255,255,.35); background:transparent;
  color:#fff; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer;
}
.theme-btn:hover { background:rgba(255,255,255,.12) }

.theme-select {
  height:32px; border:1px solid rgba(255,255,255,.35);
  background:#fff; color:#111; border-radius:8px;
  padding:0 8px; font-size:13px;
}

.hidden { display:none!important }

.icon-btn img { height:32px; width:32px; display:block; position:relative; top:2px }

/* ===== Pfeil-Button ===== */
.vgnr-wrap { position:relative; display:inline-block }
.vgnr-wrap .searchbox { padding-right:34px }
.searchbox-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  height:22px; width:22px; border:0; border-radius:6px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.searchbox-btn:active { transform:translateY(-50%) scale(.96) }

/* Tooltip Kundennummer */
.kdnr-tooltip-wrap { position:relative; display:inline-block }
.kdnr-tooltip {
  position:absolute; left:0; top:calc(100% + 6px);
  background:#222; color:#fff; font-size:12px; padding:6px 8px;
  border-radius:6px; white-space:nowrap;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  transition-delay:0ms; z-index:9999;
}
.kdnr-tooltip-wrap:hover .kdnr-tooltip,
.kdnr-tooltip-wrap:focus-within .kdnr-tooltip {
  opacity:1; transform:translateY(0);
}

/* Number spinners aus */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
input[type="number"] { -moz-appearance:textfield; appearance:textfield }

/* ===== Cards & Tables ===== */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.02); padding:16px 18px;
}
.card h4 {
  margin:0 0 8px; font-size:14px; color:var(--muted);
  letter-spacing:.3px; text-transform:uppercase;
}
.card-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 8px;
}

.edit-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-size:16px; line-height:1;
  color:var(--link); text-decoration:none;
}
.edit-link:hover { opacity:.75; text-decoration:none }

/* Form / Fields */
.form { display:grid; gap:8px }
.frow { display:grid; grid-template-columns:140px 1fr 140px 1fr; gap:8px }
.frow.single { grid-template-columns:140px 1fr }
.frow.double { grid-template-columns:140px 1fr 1fr }
.frow .lbl { color:var(--muted); font-size:13px; align-self:center }
.field {
  border:1px solid var(--line); background:#f8fbff; border-radius:8px;
  padding:8px 10px; min-height:32px; display:flex; align-items:center;
}
[data-theme="dark"] .field { background:#0b1220 }

/* Tabellen */
.table { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed }
.table th, .table td {
  padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; overflow-wrap:anywhere; word-wrap:break-word;
}
.table thead th {
  text-align:left; color:var(--muted); font-weight:700;
  background:#f0f6fc; position:sticky; top:0; z-index:1;
}
[data-theme="dark"]  .table thead th { background:#0b1220 }
[data-theme="gelb"]  .table thead th { background:#ffe08a }
[data-theme="gruen"] .table thead th { background:#e6f6ea }
[data-theme="rosa"]  .table thead th { background:#ffe3ef }
[data-theme="rot"]   .table thead th { background:var(--thead); color:var(--thead-ink) }

.table-wrap { max-height:360px; overflow:auto }

/* Grid */
.grid { display:grid; gap:var(--gap) }
.cols-2 { grid-template-columns:1fr 1fr }

@media (max-width:1100px) {
  .cols-2 { grid-template-columns:1fr }
  .frow { grid-template-columns:140px 1fr }
}

/* ===== Longtext-Button & Overlay ===== */
.longtext-btn {
  border:1px solid var(--line); background:var(--surface);
  border-radius:6px; padding:4px 6px; font-size:15px;
  cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.longtext-btn:hover { filter:brightness(.97) }
.longtext-btn.is-empty {
  opacity:.25; cursor:not-allowed; pointer-events:none; background:transparent;
}

.longtext-btn.longtext-pill {
  width:fit-content; max-width:320px; padding:6px 10px;
  border-radius:8px; background:#fff; font-size:16px; line-height:1.2;
  color:var(--ink); justify-content:flex-start;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="dark"] .longtext-btn.longtext-pill { background:var(--surface-2) }

/* Vollbild-Overlay */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:9999;
}
.overlay.hidden { display:none!important }

.overlay-card {
  width:min(1100px, 96vw); max-height:90vh; overflow:auto;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  padding:18px 20px 16px; position:relative;
}
.overlay-title {
  font-size:14px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px;
}
.overlay-text { font-size:16px; white-space:pre-wrap; line-height:1.45 }
.overlay-close {
  position:absolute; top:10px; right:10px; border:none;
  background:transparent; font-size:22px; cursor:pointer;
  color:var(--muted); line-height:1;
}
.overlay-close:hover { color:var(--ink) }

/* ===== Rabattklassifikationen ===== */
.rabatt-scroll-x {
  overflow-x:auto; overflow-y:hidden; padding-top:26px; position:relative;
}
.rabatt-table thead th {
  position:relative!important; top:auto!important; overflow:visible; z-index:2;
}
.rabatt-table .tooltip { position:relative; display:inline-block; cursor:help; font-weight:700 }
.rabatt-table .tooltip .tooltiptext {
  visibility:hidden; opacity:0; position:absolute;
  left:50%; bottom:100%; transform:translateX(-50%) translateX(28px);
  margin-bottom:10px; background:rgba(0,0,0,.85); color:#fff;
  padding:6px 8px; border-radius:6px; font-size:10px; white-space:nowrap;
  z-index:99999; transition:opacity .15s ease, visibility .15s ease;
  pointer-events:none;
}
.rabatt-table .tooltip:hover .tooltiptext { visibility:visible; opacity:1 }

#longtextOverlay .overlay-card { max-width:95vw!important; width:fit-content!important }
#longtextOverlay .overlay-text { overflow-x:auto }

/* ===== Badge ===== */
.badge {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:12px; font-weight:700; background:var(--surface); color:var(--accent);
  border:1px solid var(--line); vertical-align:middle; margin-left:6px;
}
.badge:empty { display:none }