/* ==========================================================================
   Weidian Dashboard

   Gestaltungsregeln, an die sich alles hier haelt:

   1. EIN Akzentton (--accent). Farbe sonst nur, wenn sie eine Bedeutung
      traegt: Geld rein, Geld weg, Warnung. Vorher hatten die Kennzahlen
      fuenf verschiedene Akzentfarben ohne System, was jede Hierarchie
      unmoeglich machte.
   2. Keine Glows, keine Neon-Raender, keine Farbverlaeufe als Deko.
      Tiefe entsteht ueber Flaechenhelligkeit und duenne Linien.
   3. Hierarchie ueber Schriftgroesse und Abstand, nicht ueber Farbe.
      Drei Kennzahlen sind gross, der Rest ist untergeordnet.
   4. Zahlen immer mit Tabellenziffern (font-variant-numeric), damit
      Spalten untereinander stehen und nicht zappeln.
   ========================================================================== */

:root {
  /* Flaechen, von dunkel nach hell */
  --bg: #0e1013;
  --surface: #15181d;
  --surface-2: #1b1f26;
  --surface-3: #22272f;

  /* Linien */
  --line: #262b33;
  --line-strong: #333a45;

  /* Schrift */
  --text: #e6e9ee;
  --text-2: #98a1ad;
  --text-3: #6a7280;

  /* Der eine Akzent */
  --accent: #4d7cfe;
  --accent-hover: #6a90ff;
  --accent-dim: rgba(77, 124, 254, 0.12);

  /* Bedeutungstraeger, absichtlich entsaettigt */
  --positive: #3fa87a;
  --negative: #d4645f;
  --warning: #c69544;
  --muted-meaning: #6a7280;

  --radius: 8px;
  --radius-sm: 6px;

  /* Maximal zwei Schattenstufen, beide dezent */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lifted: 0 8px 24px rgba(0, 0, 0, 0.45);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  /* Vertikales Scrollen bleibt immer moeglich. Vorher liess sich die
     Seite nach dem Oeffnen des Admin-Panels nicht mehr nach oben
     scrollen. */
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Jede Zahl im Interface */
.num,
.kpi-card__value,
.order-table td,
.stat__value {
  font-variant-numeric: tabular-nums;
}

/* ============================ Anmeldung ============================ */

.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 1000;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.login-title {
  font-size: 19px;
  text-align: center;
  margin-bottom: 28px;
}

.login-error {
  min-height: 18px;
  margin-top: 14px;
  color: var(--negative);
  font-size: 13px;
  text-align: center;
}

/* ============================ Formulare ============================ */

.form-field {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.form-input,
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='date'],
input[type='datetime-local'],
select {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.12s ease;
}

.form-input::placeholder,
input::placeholder {
  color: var(--text-3);
}

.form-input:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Native Kalender- und Auswahlpfeile aufhellen, sonst unsichtbar */
input[type='date'],
input[type='datetime-local'] {
  color-scheme: dark;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* ============================= Schalter ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-2);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn-sm {
  padding: 6px 11px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Gefahr: nur fuer Loeschen und Zuruecksetzen */
.btn-danger {
  background: transparent;
  border-color: rgba(212, 100, 95, 0.4);
  color: var(--negative);
}

.btn-danger:hover {
  background: rgba(212, 100, 95, 0.1);
}

/* Zeitraum- und Quellen-Umschalter */
.btn-period,
.btn-source {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn-period:hover,
.btn-source:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.btn-period.active,
.btn-source.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

/* ============================= Kopfzeile ============================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.navbar__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.navbar__sub {
  color: var(--text-3);
  font-size: 11px;
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar__clock {
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sync-icon {
  display: inline-block;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================== Layout ============================== */

.app-wrapper {
  min-height: 100vh;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* Abschnittsueberschrift: trennt Gruppen ohne einen Kasten zu brauchen */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 12px;
}

.section-head:first-child {
  margin-top: 0;
}

.section-title {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* =============================== Karten =============================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.card__title {
  font-size: 14px;
  font-weight: 600;
}

.card__sub {
  color: var(--text-3);
  font-size: 12px;
}

.card__body {
  padding: 20px;
}

/* Kopfzeile, die nur Bedienelemente traegt: schmaler, weil kein Titel
   darin steht. */
.card__header--tools {
  padding: 11px 20px;
  align-items: center;
}

.card__header--tools .card__sub {
  margin: 0;
}

/* ============================= Kennzahlen =============================

   Zwei Stufen: drei fuehrende Zahlen gross, alles andere klein. Vorher
   standen zehn gleich grosse Karten nebeneinander und man sah nicht,
   was wichtig ist.
   ===================================================================== */

.kpi-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.kpi-primary .kpi-card {
  background: var(--surface);
  padding: 20px 22px;
  border: none;
  border-radius: 0;
}

.kpi-card__label {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}

.kpi-primary .kpi-card__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kpi-card__unit {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 11px;
}

.kpi-card__note {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
}

/* Sekundaerstufe: kompakte Liste, kein Kasten pro Wert */
.kpi-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.kpi-secondary .kpi-card {
  background: var(--surface);
  padding: 14px 16px;
  border: none;
  border-radius: 0;
}

.kpi-secondary .kpi-card__label {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.kpi-secondary .kpi-card__value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-2);
}

.kpi-secondary .kpi-card__unit {
  margin-top: 3px;
  font-size: 10px;
}

/* Bedeutung, sparsam: nur wo das Vorzeichen zaehlt */
.kpi-card--positive .kpi-card__value {
  color: var(--positive);
}

.kpi-card--negative .kpi-card__value {
  color: var(--negative);
}

.kpi-card--attention .kpi-card__value {
  color: var(--warning);
}

/* Die alten Farbbalken unter jeder Karte sind weg. Die Klassen bleiben,
   damit vorhandenes Markup nicht bricht, zeichnen aber nichts mehr. */
.kpi-card__bar,
.kpi-card__bar--amber,
.kpi-card__bar--green,
.kpi-card__bar--indigo,
.kpi-card__bar--red,
.kpi-card__bar--slate,
.kpi-card__bar--shop2 {
  display: none;
}

.kpi-card__top {
  display: block;
}

/* Altes Raster, falls noch irgendwo benutzt */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-grid .kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* ============================== Diagramm ============================== */

.chart-container {
  position: relative;
  height: 300px;
  padding: 4px 0;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* =============================== Filter =============================== */

.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.filter-field {
  min-width: 0;
}

.filter-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}

.filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap; /* sonst laeuft die Zeitraum-Zeile auf dem Handy raus */
}

/* Datumsfelder im Zeitraum-Kasten duerfen schrumpfen */
.filter-actions input[type='date'] {
  flex: 1 1 130px;
  min-width: 0;
}

/* =============================== Tabelle ===============================

   Keine Zebrastreifen, keine senkrechten Linien. Ruhe entsteht durch
   Zeilenhoehe und eine einzige duenne Trennlinie.
   ====================================================================== */

.table-wrapper {
  overflow-x: auto;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.order-table thead th {
  /* Kein position:sticky: .table-wrapper hat overflow-x:auto, wodurch
     nach Spezifikation auch overflow-y zum Scroll-Container wird. Die
     Kopfzeile haette sich dann relativ zum Wrapper verankert und
     Zeilen waeren darueber durchgeblitzt. */
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.order-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
}

.order-table tbody tr:hover td {
  background: var(--surface-2);
}

.order-table tbody tr:last-child td {
  border-bottom: none;
}

/* Geldspalten rechts, damit Dezimalstellen untereinander stehen */
.order-table .num,
.order-table th.num {
  text-align: right;
}

.order-table .cell-strong {
  color: var(--text);
  font-weight: 500;
}

.product-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
}

.product-img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-3);
  cursor: pointer;
}

.product-img-placeholder {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.product-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

/* ============================== Abzeichen ==============================

   Alle gleich gebaut, unterschieden nur durch eine gedaempfte Farbe und
   ohne Rand-Glow.
   ====================================================================== */

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-2);
}

.badge--completed {
  background: rgba(63, 168, 122, 0.13);
  color: var(--positive);
}

.badge--refunded {
  background: rgba(212, 100, 95, 0.13);
  color: var(--negative);
}

.badge--pending,
.badge--pending-withdrawal {
  background: rgba(198, 149, 68, 0.13);
  color: var(--warning);
}

.badge--shipped {
  background: var(--accent-dim);
  color: var(--accent-hover);
}

.badge--closed,
.badge--unsettled {
  background: var(--surface-3);
  color: var(--text-3);
}

/* Partner-Kennung in der Tabelle */
.badge--affiliate {
  background: var(--accent-dim);
  color: var(--accent-hover);
}

.badge--unassigned {
  background: rgba(198, 149, 68, 0.13);
  color: var(--warning);
}

/* ============================ Seitenwechsel ============================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.page-btn {
  min-width: 32px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}

.page-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-info {
  margin: 0 8px;
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ============================== Leerzustand ============================== */

.empty-state {
  padding: 56px 20px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 12px;
  font-size: 26px;
  opacity: 0.3;
}

.empty-title {
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

.empty-sub {
  color: var(--text-3);
  font-size: 13px;
}

.placeholder-row td {
  padding: 40px 20px;
  color: var(--text-3);
  text-align: center;
}

/* ================================ Banner ================================ */

.banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.banner--info {
  background: var(--accent-dim);
  color: var(--text);
}

.banner--success {
  background: rgba(63, 168, 122, 0.12);
  color: var(--positive);
}

.banner--error {
  background: rgba(212, 100, 95, 0.12);
  color: var(--negative);
}

/* ================================ Dialoge ================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 900;
}

.modal-content {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lifted);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.modal-close {
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--text);
}

/* ============================== Auszahlung ============================== */

.withdraw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.withdraw-row:last-child {
  border-bottom: none;
}

.withdraw-cb {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.withdraw-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  margin-top: 4px;
}

.withdraw-sum__value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.warning-text {
  color: var(--warning);
  font-size: 12px;
}

/* ============================== Admin-Bereich ============================== */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  padding: 20px;
}

.admin-block__title {
  margin-bottom: 12px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.client-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.client-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.client-table tr:last-child td {
  border-bottom: none;
}

.inline-edit-input {
  width: 100%;
  min-width: 62px;
  padding: 5px 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.inline-edit-input:focus {
  outline: none;
  border-color: var(--accent);
}

.input-text {
  text-align: left;
}

.goal-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;
}

.goal-item:last-child {
  margin-bottom: 0;
}

.delete-goal-btn {
  position: absolute;
  top: 11px;
  right: 13px;
  padding: 2px 5px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}

.delete-goal-btn:hover {
  color: var(--negative);
}

.goal-title {
  margin-bottom: 10px;
  font-weight: 600;
}

.goal-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.goal-countdown {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.goal-bar {
  height: 4px;
  margin-top: 9px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}

.goal-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ============================== Hinweis unten ============================== */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  min-width: 240px;
  max-width: calc(100vw - 40px);
  padding: 12px 18px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lifted);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  z-index: 1100;
}

.toast.show {
  visibility: visible;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ============================== Bildansicht ============================== */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1200;
  cursor: zoom-out;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  object-fit: contain;
}

/* ================================ Fusszeile ================================ */

.footer {
  padding: 24px 20px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* =========================== Filter einklappen ===========================

   Der Filterblock ist auf dem Handy fast 500px hoch. Eingeklappt muss man
   ihn nicht jedes Mal durchscrollen, um an die Tabelle zu kommen.
   ======================================================================== */

.filters-collapsed .filters-row {
  display: none;
}

#toggleFiltersBtn {
  display: none; /* auf breiten Bildschirmen bleibt der Filter offen */
}

/* ============================== Handy / schmal ==============================

   Gemessen bei 375px vor dem Umbau:
     Seitenhoehe      6340px
     Filterblock       483px  (musste man jedes Mal durchscrollen)
     Kopfzeile          95px  sticky, also dauerhaft 12% des Bildschirms
     Tabellenbreite    950px  in 347px Container -> ~600px Seitwaertsscrollen
   ========================================================================= */

@media (max-width: 720px) {
  /* --- Kopfzeile: nicht mehr klebend, eine Reihe --- */
  .navbar {
    position: static;
    height: auto;
    min-height: 52px;
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Der Titel weicht: Marke (260px) und Knopfgruppe (220px) passen
     zusammen nicht in 375px und brachen in zwei Reihen um. Das Logo
     identifiziert die Anwendung ausreichend. */
  .navbar__title,
  .navbar__sub,
  .navbar__clock,
  .logout-text {
    display: none;
  }

  .navbar__brand {
    gap: 9px;
  }

  /* Marke (140px) und Knopfgruppe (220px) passen zusammen nicht in die
     347px Inhaltsbreite. Statt eines zufaellig wirkenden Umbruchs wird
     die zweite Reihe zu einer Werkzeugleiste ueber die ganze Breite. */
  .navbar__right {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .navbar__right .btn {
    flex: 1 1 auto;
  }

  /* "Sync" nur als Symbol, spart Platz */
  #syncBtn {
    padding: 6px 9px;
  }

  #syncBtn .sync-label {
    display: none;
  }

  .main-content {
    padding: 14px 12px 40px;
  }

  /* --- Kennzahlen kompakter --- */
  .kpi-primary {
    grid-template-columns: 1fr;
  }

  .kpi-primary .kpi-card {
    padding: 13px 15px;
  }

  .kpi-primary .kpi-card__value {
    font-size: 24px;
  }

  .kpi-primary .kpi-card__label {
    margin-bottom: 4px;
  }

  /* Einheit weglassen: sie steht identisch an jeder Karte und der
     Betrag traegt das Zeichen ohnehin. */
  .kpi-primary .kpi-card__unit,
  .kpi-secondary .kpi-card__unit {
    display: none;
  }

  .kpi-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-secondary .kpi-card {
    padding: 11px 13px;
  }

  .kpi-secondary .kpi-card__value {
    font-size: 15px;
  }

  .card__header,
  .filters-row,
  .admin-grid,
  .card__body {
    padding: 13px 14px;
  }

  .filters-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #toggleFiltersBtn {
    display: inline-flex;
  }

  /* --- Diagramm --- */
  .chart-container {
    height: 210px;
  }

  .chart-controls {
    gap: 5px;
  }

  /* ------------------------------------------------------------------
     Tabelle wird zur Kartenliste.

     Acht Spalten sind auf 375px nicht darstellbar. Jede Zeile wird zu
     einem Block aus drei Reihen:

       Produktname                      (ganze Breite, max. 2 Zeilen)
       Provision      Abrechnung  Status
       Bestellwert    Datum       Zuordnung

     Die Beschriftungen sind bewusst winzig und dichtgesetzt: mit
     normaler Zeilenhoehe wurde jede Karte 253px hoch.
     ------------------------------------------------------------------ */
  .table-wrapper {
    overflow-x: visible;
  }

  .order-table,
  .order-table tbody,
  .order-table tr {
    display: block;
  }

  .order-table thead {
    display: none;
  }

  .order-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto auto;
    gap: 4px 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
  }

  /* Der Selektor braucht die gleiche Spezifitaet wie die Platzierungen
     unten, sonst gewinnt er gegen display:none bei .col-rate. */
  .order-table tbody td {
    padding: 0;
    border: none;
    min-width: 0;
  }

  .order-table tbody tr:hover td {
    background: none;
  }

  /* Beschriftung ueber dem Wert, damit ohne Tabellenkopf klar ist,
     was die Zahl bedeutet. */
  .order-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--text-3);
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .order-table .col-product {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .order-table .col-product .product-name {
    max-width: none;
    white-space: normal;
    /* Hoechstens zwei Zeilen: ein langer chinesischer Produktname
       wuerde die Karte sonst zerreissen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }

  .order-table .col-commission {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    font-size: 16px;
    text-align: left;
  }

  .order-table .col-settlement {
    grid-row: 2;
    grid-column: 2;
    align-self: center;
  }

  .order-table .col-status {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  .order-table .col-price {
    grid-row: 3;
    grid-column: 1;
    text-align: left;
  }

  .order-table .col-date {
    grid-row: 3;
    grid-column: 2;
    text-align: left;
  }

  .order-table .col-affiliate {
    grid-row: 3;
    grid-column: 3;
    justify-self: end;
    align-self: end;
  }

  /* Badges brauchen keine Beschriftung, die Farbe und der Text sagen es. */
  .order-table .col-commission::before,
  .order-table .col-status::before,
  .order-table .col-settlement::before,
  .order-table .col-affiliate::before {
    display: none;
  }

  /* Der Satz laesst sich aus Bestellwert und Provision ablesen und
     kostet auf dem Handy nur Platz. Auf breiten Bildschirmen bleibt er.
     Der Selektor muss `.order-table tbody td` uebertreffen. */
  .order-table tbody td.col-rate {
    display: none;
  }

  /* --- Admin-Tabellen: waagerecht scrollbar, das ist hier ehrlicher
         als ein Umbau, den man nicht mehr bedienen kann --- */
  .client-table {
    min-width: 560px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* --- Dialog nutzt die ganze Hoehe --- */
  .modal-overlay {
    padding: 0;
  }

  .modal-content {
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    border: none;
    border-radius: 0;
  }

  .withdraw-sum__value {
    font-size: 19px;
  }

  /* --- Seitenwechsel gut treffbar --- */
  .page-btn {
    min-width: 44px;
    padding: 9px 13px;
  }

  .pagination {
    padding: 14px;
  }
}

/* Ganz schmale Geraete.

   Der Grenzwert liegt bewusst bei 340px und nicht bei 380px: 375px ist
   die haeufigste Handybreite, und einspaltig wurden die sieben
   Nebenkennzahlen dort 477px hoch statt 268px. */
@media (max-width: 340px) {
  .kpi-secondary {
    grid-template-columns: 1fr;
  }
}

/* Fuellt die letzte Nebenkennzahl die Reihe, wenn ihre Anzahl ungerade
   ist. Wird in main.js gesetzt, weil sich nach Rolle unterscheidet,
   welche Karten sichtbar sind. */
@media (max-width: 720px) {
  .kpi-secondary .kpi-card--fills-row {
    grid-column: 1 / -1;
  }

  /* Zeitraumwahl: zwei Datumsfelder nebeneinander, der Knopf darunter.
     Ohne das landete jedes der vier Elemente auf einer eigenen Zeile. */
  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .section-tools {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }

  .section-tools .form-input {
    width: 100%;
    padding: 8px 9px;
  }

  .section-tools > #btnApplyKpiDate {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  /* Datum darf in der Kartenliste auf zwei Zeilen */
  .order-table tbody td.col-date {
    white-space: normal;
    line-height: 1.3;
  }
}

/* ====================== Bestellnummern in Auszahlungen ======================

   Der Admin braucht die Nummern im Klartext, um den Betrag beim Shop
   einzufordern. Vorher stand dort nur "12 Stück", womit der Antrag nicht
   nutzbar war.
   ========================================================================== */

/* Auszahlungsantraege als Karten */
.request-list {
  display: grid;
  gap: 12px;
}

.request-card {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.request-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.request-card__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.request-card__figures .kpi-card__label {
  margin-bottom: 2px;
}

.request-orders__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.order-ids {
  max-width: none;
  max-height: 112px;
  overflow-y: auto;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  user-select: all; /* ein Klick markiert alles */
}

.order-ids__copy {
  margin-top: 5px;
}

/* ============================ Eingabe-Zoom (iOS) ============================

   Safari auf dem iPhone zoomt die Seite automatisch hinein, sobald ein
   Eingabefeld mit weniger als 16px Schriftgroesse den Fokus bekommt --
   und zoomt danach nicht von allein zurueck. Genau das passierte beim
   Anmelden. 16px verhindert es, ohne dem Nutzer das Zoomen per Finger zu
   verbieten (user-scalable=no waere die schlechtere Loesung).
   ========================================================================== */

@media (max-width: 860px) {
  .form-input,
  .inline-edit-input,
  input[type='text'],
  input[type='password'],
  input[type='number'],
  input[type='email'],
  input[type='date'],
  input[type='datetime-local'],
  select,
  textarea {
    font-size: 16px;
  }

  /* Etwas weniger Innenabstand, damit die groessere Schrift die Felder
     nicht aufblaeht. */
  .form-input,
  input,
  select {
    padding: 9px 10px;
  }

  .inline-edit-input {
    padding: 6px 7px;
  }

  .order-ids {
    font-size: 12px;
  }
}

/* ========================= Gliederung und Kontext =========================

   Die Seite war ein Stapel gleichwertiger Kaesten ohne Anker fuer das
   Auge. Abschnittsueberschriften, eine hervorgehobene Leitzahl und
   Bezugsgroessen geben ihr eine Ordnung, ohne dass Farbe dafuer
   herhalten muss.
   ========================================================================= */

.section-note {
  color: var(--text-3);
  font-size: 12px;
}

.section-head__left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Bedienelemente, die zu einem Abschnitt gehoeren, stehen in seiner
   Kopfzeile statt in einem eigenen Kasten darueber. */
.section-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.section-tools .form-input {
  width: auto;
  padding: 5px 9px;
  font-size: 12px;
}

/* ------------------------------- Leitzahl ------------------------------- */

.kpi-card--hero {
  /* Der Akzentstreifen macht ohne zusaetzliche Farbe klar, welche Zahl
     die wichtigste ist. */
  box-shadow: inset 3px 0 0 var(--accent);
}

.kpi-primary .kpi-card--hero .kpi-card__value {
  font-size: 34px;
}

.payout-progress {
  margin-top: 12px;
}

.payout-progress__bar {
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.payout-progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.35s ease;
}

.payout-progress__fill--ready {
  background: var(--positive);
}

.payout-progress__text {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 11.5px;
}

/* ----------------------------- Veraenderung ----------------------------- */

.delta {
  display: inline-block;
  margin-left: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delta--up {
  color: var(--positive);
}

.delta--down {
  color: var(--negative);
}

.delta--neutral {
  color: var(--text-3);
}

/* --------------------------- Statusverteilung ---------------------------

   Hier tragen mehrere Farben Bedeutung: sie kodieren den Zustand einer
   Bestellung. Das ist Datenkodierung, keine Dekoration, und damit der
   einzige Ort neben den Abzeichen, an dem die Palette breiter wird.
   ----------------------------------------------------------------------- */

.mix-bar {
  display: flex;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.mix-bar__part {
  min-width: 3px;
  transition: opacity 0.12s ease;
}

.mix-bar__part:hover {
  opacity: 0.82;
}

.mix--completed {
  background: var(--positive);
}

.mix--shipped {
  background: var(--accent);
}

.mix--pending {
  background: var(--warning);
}

.mix--unpaid {
  background: #8a6fc4;
}

.mix--refunded {
  background: var(--negative);
}

.mix--closed {
  background: var(--line-strong);
}

.mix-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 4px 26px;
  margin-top: 16px;
}

.mix-legend__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.mix-legend__dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 2px;
  transform: translateY(-1px);
}

.mix-legend__label {
  color: var(--text-2);
  font-size: 13px;
}

.mix-legend__value {
  margin-left: auto;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mix-legend__share {
  min-width: 66px;
  color: var(--text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------- Sortierbare Spalten ------------------------- */

.th-sort {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.12s ease;
}

.th-sort:hover {
  color: var(--text-2);
}

/* Ein dezenter Platzhalter, damit die Spalte beim Sortieren nicht
   springt. */
.th-sort::after {
  content: '↕';
  margin-left: 5px;
  opacity: 0.25;
  font-size: 10px;
}

.th-sort--asc::after {
  content: '↑';
  opacity: 1;
  color: var(--accent);
}

.th-sort--desc::after {
  content: '↓';
  opacity: 1;
  color: var(--accent);
}

/* --------------------------------- Handy --------------------------------- */

@media (max-width: 720px) {
  .kpi-primary .kpi-card--hero .kpi-card__value {
    font-size: 28px;
  }

  .kpi-card--hero {
    box-shadow: inset 0 3px 0 var(--accent);
  }

  .mix-legend {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 13px;
  }

  .mix-bar {
    height: 22px;
  }

  .section-head {
    margin: 24px 0 10px;
  }

  /* Auf dem Handy ist die Tabelle eine Kartenliste, da gibt es keine
     Spaltenkoepfe zum Sortieren. */
  .th-sort::after {
    content: none;
  }
}