/* ════════════════════════════════════════════════════════════════
   PRICING ENGINE — App Styles
   Based on Luftbude Design System v1.0
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Markenfarben */
  --lb-green:          #2A871B;
  --lb-green-dark:     #1C5813;
  --lb-green-mid:      #237316;
  --lb-green-light:    #EAF3DE;
  --lb-green-muted:    #C0DD97;
  --lb-green-xlight:   #F3FAF0;

  /* Neutrals */
  --lb-grey-50:        #FAFAFA;
  --lb-grey-100:       #F5F7FA;
  --lb-grey-200:       #EBEFF5;
  --lb-grey-300:       #DDE3ED;
  --lb-grey-400:       #C4CEDD;
  --lb-grey-500:       #AFBACC;
  --lb-grey-600:       #8C98AB;
  --lb-grey-700:       #6E7787;
  --lb-grey-800:       #4F5768;
  --lb-grey-900:       #434A54;
  --lb-grey-950:       #333840;

  /* Semantisch */
  --lb-amber:          #854F0B;
  --lb-amber-bg:       #FAEEDA;
  --lb-amber-border:   #FAC775;
  --lb-red:            #A32D2D;
  --lb-red-bg:         #FCEBEB;
  --lb-red-border:     #F7C1C1;
  --lb-blue:           #0C447C;
  --lb-blue-bg:        #EEF4FB;
  --lb-blue-border:    #A8CAEE;
  --lb-teal:           #0A6B5C;
  --lb-teal-bg:        #E6F4F1;
  --lb-teal-border:    #9FD3CA;
  --lb-purple:         #6B21A8;
  --lb-purple-bg:      #F3E8FF;
  --lb-purple-border:  #C4B5FD;

  /* Oberflächen */
  --lb-bg-page:        #F0F2F5;
  --lb-bg-card:        #FFFFFF;
  --lb-bg-inset:       var(--lb-grey-100);

  /* Typografie */
  --lb-font-sans:      'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lb-font-mono:      'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

  /* Größen */
  --lb-text-xs:        11px;
  --lb-text-sm:        12px;
  --lb-text-base:      14px;
  --lb-text-md:        15px;
  --lb-text-lg:        17px;
  --lb-text-xl:        20px;
  --lb-text-2xl:       24px;
  --lb-text-3xl:       30px;

  /* Abstände */
  --lb-space-1:        4px;
  --lb-space-2:        8px;
  --lb-space-3:        12px;
  --lb-space-4:        16px;
  --lb-space-5:        20px;
  --lb-space-6:        24px;
  --lb-space-8:        32px;
  --lb-space-10:       40px;

  /* Radien */
  --lb-radius-sm:      6px;
  --lb-radius-md:      8px;
  --lb-radius-lg:      12px;
  --lb-radius-xl:      16px;
  --lb-radius-full:    9999px;

  /* Schatten */
  --lb-shadow-sm:      0 1px 3px rgba(0,0,0,0.05);
  --lb-shadow-md:      0 1px 4px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04);
  --lb-shadow-lg:      0 4px 6px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.07);

  /* Übergänge */
  --lb-transition:     all 0.15s ease;
}


/* ── 2. RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--lb-font-sans);
  font-size: var(--lb-text-base);
  color: var(--lb-grey-900);
  background: var(--lb-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lb-green); text-decoration: none; font-weight: 500; }
a:hover { color: var(--lb-green-dark); text-decoration: underline; }


/* ── 3. APP LAYOUT ─────────────────────────────────────────────── */
.app-layout {
  min-height: 100vh;
}


/* ── 4. SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  background: var(--lb-bg-card);
  border-right: 1px solid var(--lb-grey-200);
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 230px;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-header {
  padding: var(--lb-space-5) var(--lb-space-5) var(--lb-space-4);
  border-bottom: 1px solid var(--lb-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-grey-950);
  letter-spacing: -0.01em;
}

.logo i { color: var(--lb-green); font-size: 18px; }
.version {
  font-size: 10px;
  font-weight: 700;
  color: var(--lb-green-dark);
  background: var(--lb-green-light);
  border: 1px solid var(--lb-green-muted);
  padding: 1px 7px;
  border-radius: var(--lb-radius-full);
}

.sidebar-shop-selector {
  padding: var(--lb-space-3) var(--lb-space-4);
  border-bottom: 1px solid var(--lb-grey-200);
}

.sidebar-shop-selector label {
  display: block;
  font-size: var(--lb-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--lb-grey-500);
  margin-bottom: var(--lb-space-1);
}

.sidebar-shop-selector select {
  width: 100%;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-grey-300);
  color: var(--lb-grey-950);
  padding: 6px 28px 6px 10px;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  font-family: var(--lb-font-sans);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7787' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-appearance: none;
  outline: none;
}

.sidebar-shop-selector select:focus {
  border-color: var(--lb-green);
  box-shadow: 0 0 0 3px rgba(42, 135, 27, 0.12);
}

.sidebar-nav { flex: 1; padding: var(--lb-space-2) 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 7px var(--lb-space-4);
  font-size: var(--lb-text-base);
  color: var(--lb-grey-700);
  text-decoration: none;
  font-weight: 400;
  border-left: 2px solid transparent;
  transition: var(--lb-transition);
  cursor: pointer;
}

.nav-item:hover { background: var(--lb-grey-100); color: var(--lb-grey-950); text-decoration: none; }
.nav-item.active { color: var(--lb-green); background: var(--lb-green-xlight); border-left-color: var(--lb-green); font-weight: 500; }
.nav-item i { width: 18px; text-align: center; font-size: 13px; }
.nav-divider { height: 1px; background: var(--lb-grey-200); margin: var(--lb-space-2) var(--lb-space-4); border: none; }
.nav-section {
    padding: var(--lb-space-3) var(--lb-space-4) var(--lb-space-1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-grey-500);
    margin-top: var(--lb-space-2);
}
.nav-section:first-child { margin-top: 0; }

.sidebar-footer {
  padding: var(--lb-space-3) var(--lb-space-4);
  border-top: 1px solid var(--lb-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info { display: flex; align-items: center; gap: var(--lb-space-2); }
.user-info i { font-size: 22px; color: var(--lb-grey-500); }
.user-name { display: block; font-size: var(--lb-text-sm); font-weight: 600; color: var(--lb-grey-950); }
.user-role { display: block; font-size: var(--lb-text-xs); color: var(--lb-grey-600); }
.logout-btn { color: var(--lb-grey-500); padding: 4px; transition: var(--lb-transition); }
.logout-btn:hover { color: var(--lb-red); }


/* ── 5. MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  margin-left: 230px;
  min-height: 100vh;
}

.content-header {
  padding: var(--lb-space-4) var(--lb-space-6);
  border-bottom: 1px solid var(--lb-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lb-bg-card);
  position: sticky;
  top: 0;
  z-index: 50;
}

.content-header h1 {
  font-size: var(--lb-text-xl);
  font-weight: 700;
  color: var(--lb-grey-950);
  letter-spacing: -0.01em;
}

.content-body { padding: var(--lb-space-6); }


/* ── 6. PANELS (Cards) ─────────────────────────────────────────── */
.panel {
  background: var(--lb-bg-card);
  border-radius: var(--lb-radius-lg);
  border: 0.5px solid var(--lb-grey-300);
  box-shadow: var(--lb-shadow-md);
  margin-bottom: var(--lb-space-5);
  overflow: hidden;
}

.panel-header {
  padding: var(--lb-space-3) var(--lb-space-5);
  border-bottom: 1px solid var(--lb-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lb-grey-50);
}

.panel-header h3 {
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-grey-950);
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
}

.panel-header h3 i { color: var(--lb-grey-600); font-size: 14px; }
.panel-body { padding: var(--lb-space-5); }


/* ── 7. KPI CARDS ──────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-6);
}

.kpi-card {
  background: var(--lb-bg-card);
  border-radius: var(--lb-radius-lg);
  border: 0.5px solid var(--lb-grey-300);
  box-shadow: var(--lb-shadow-sm);
  padding: var(--lb-space-4) var(--lb-space-5);
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
}

.kpi-icon {
  width: 40px; height: 40px;
  border-radius: var(--lb-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.bg-blue    { background: var(--lb-blue-bg);   color: var(--lb-blue); }
.bg-green   { background: var(--lb-green-light); color: var(--lb-green); }
.bg-orange  { background: var(--lb-amber-bg);  color: var(--lb-amber); }
.bg-yellow  { background: #FEF9C3;            color: #854D0E; }
.bg-red     { background: var(--lb-red-bg);    color: var(--lb-red); }
.bg-purple  { background: var(--lb-purple-bg); color: var(--lb-purple); }

.kpi-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--lb-grey-950);
  font-variant-numeric: tabular-nums;
}

.kpi-label { display: block; font-size: var(--lb-text-xs); color: var(--lb-grey-700); font-weight: 500; }


/* ── 8. DASHBOARD ──────────────────────────────────────────────── */
.dashboard-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lb-space-5); }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--lb-space-3);
}

.action-card {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-4);
  background: var(--lb-grey-50);
  border: 1px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  color: var(--lb-grey-900);
  transition: var(--lb-transition);
  font-weight: 500;
  text-decoration: none;
}

.action-card:hover { border-color: var(--lb-green); background: var(--lb-green-xlight); color: var(--lb-green-dark); text-decoration: none; }
.action-card i { font-size: 18px; color: var(--lb-green); }


/* ── 9. TABLES ─────────────────────────────────────────────────── */
/* ERGAENZT 2026-09-10: Hoehe begrenzen und Kopfzeile stehen lassen.

   Bei 200 Zeilen scrollte die Kopfzeile weg, und man wusste in der
   Mitte der Liste nicht mehr, welche Spalte welche ist. Auf einem
   768 px hohen Bildschirm passiert das nach acht Zeilen. */
.table-container { overflow-x: auto; }
.table-container thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--lb-grey-100);
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--lb-text-base); }
.data-table thead tr { background: var(--lb-grey-100); border-bottom: 1px solid var(--lb-grey-200); }
.data-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: var(--lb-text-xs);
  font-weight: 600;
  color: var(--lb-grey-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lb-grey-200);
  color: var(--lb-grey-900);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--lb-grey-100); }
.data-table.compact th,
.data-table.compact td { padding: 6px 10px; font-size: var(--lb-text-sm); }


/* ── 10. BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  padding: 3px 9px;
  border-radius: var(--lb-radius-sm);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Status badges */
.badge-new, .badge-create     { background: var(--lb-blue-bg);    color: var(--lb-blue);       border: 1px solid var(--lb-blue-border); }
.badge-pending                { background: var(--lb-amber-bg);   color: var(--lb-amber);      border: 1px solid var(--lb-amber-border); }
.badge-synced, .badge-update  { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.badge-error                  { background: var(--lb-red-bg);     color: var(--lb-red);        border: 1px solid var(--lb-red-border); }
.badge-deactivated, .badge-deactivate { background: var(--lb-grey-200); color: var(--lb-grey-700); border: 1px solid var(--lb-grey-300); }
.badge-manual_review, .badge-warning  { background: var(--lb-amber-bg); color: var(--lb-amber); border: 1px solid var(--lb-amber-border); }
.badge-import, .badge-calculation     { background: var(--lb-purple-bg); color: var(--lb-purple); border: 1px solid var(--lb-purple-border); }
.badge-manual, .badge-approval        { background: var(--lb-teal-bg); color: var(--lb-teal); border: 1px solid var(--lb-teal-border); }
.badge-sync                           { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.badge-global         { background: var(--lb-blue-bg); color: var(--lb-blue); border: 1px solid var(--lb-blue-border); }
.badge-manufacturer   { background: var(--lb-purple-bg); color: var(--lb-purple); border: 1px solid var(--lb-purple-border); }
.badge-supplier       { background: var(--lb-amber-bg); color: var(--lb-amber); border: 1px solid var(--lb-amber-border); }
.badge-discount_group { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.badge-product        { background: var(--lb-teal-bg); color: var(--lb-teal); border: 1px solid var(--lb-teal-border); }
.badge-uploaded       { background: var(--lb-blue-bg); color: var(--lb-blue); border: 1px solid var(--lb-blue-border); }
.badge-completed      { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.badge-mapping, .badge-processing { background: var(--lb-amber-bg); color: var(--lb-amber); border: 1px solid var(--lb-amber-border); }


/* ── 11. BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-2);
  padding: 9px 18px;
  border-radius: var(--lb-radius-md);
  font-family: var(--lb-font-sans);
  font-size: var(--lb-text-base);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--lb-transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary   { background: var(--lb-green); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--lb-green-dark); color: white; }

.btn-success   { background: var(--lb-green); color: white; }
.btn-success:hover:not(:disabled) { background: var(--lb-green-dark); }

.btn-warning   { background: var(--lb-amber-bg); color: var(--lb-amber); border: 1px solid var(--lb-amber-border); }
.btn-warning:hover:not(:disabled) { background: #f5e4c5; }

.btn-danger    { background: var(--lb-red-bg); color: var(--lb-red); border: 1px solid var(--lb-red-border); }
.btn-danger:hover:not(:disabled) { background: #f9d7d7; }

.btn-info      { background: var(--lb-purple-bg); color: var(--lb-purple); border: 1px solid var(--lb-purple-border); }
.btn-info:hover:not(:disabled) { background: #ede5ff; }

.btn-outline   { background: var(--lb-bg-card); color: var(--lb-grey-900); border: 1px solid var(--lb-grey-300); }
.btn-outline:hover:not(:disabled) { background: var(--lb-grey-100); border-color: var(--lb-grey-400); }

.btn-dark      { background: var(--lb-grey-200); color: var(--lb-grey-900); border: 1px solid var(--lb-grey-300); }
.btn-dark:hover:not(:disabled) { background: var(--lb-grey-300); }

.btn-full { width: 100%; }
.btn-sm   { padding: 5px 12px; font-size: var(--lb-text-sm); border-radius: var(--lb-radius-sm); }
.btn-xs   { padding: 3px 8px;  font-size: var(--lb-text-xs); border-radius: var(--lb-radius-sm); }
.btn-lg   { padding: 12px 24px; font-size: var(--lb-text-md); }
.btn-xl   { padding: 14px 28px; font-size: var(--lb-text-md); }

.action-buttons { display: flex; gap: 4px; }


/* ── 12. FORMS ─────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--lb-space-4); }
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  display: block;
  font-size: var(--lb-text-sm);
  font-weight: 600;
  color: var(--lb-grey-950);
  margin-bottom: var(--lb-space-1);
}

.form-group small { font-size: var(--lb-text-xs); color: var(--lb-grey-600); margin-top: 2px; display: block; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  padding: 9px 12px;
  font-size: var(--lb-text-base);
  font-family: var(--lb-font-sans);
  color: var(--lb-grey-950);
  background: var(--lb-bg-card);
  transition: var(--lb-transition);
  outline: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--lb-green);
  box-shadow: 0 0 0 3px rgba(42, 135, 27, 0.12);
}

.form-group input::placeholder { color: var(--lb-grey-500); }

/* Kontrollkaestchen und Radios.
   ERGAENZT 2026-09-06.

   Die Regel darueber setzt width:100% auf jedes input in einer
   .form-group. Fuer eine Checkbox heisst das: sie wird auf volle
   Feldbreite gestreckt und erscheint als leerer Kasten, in dem das
   Haekchen nicht mehr zu finden ist.

   Die Ausnahme stand bisher nur in settings/users.php als lokaler
   style-Block - deshalb war der Fehler auf allen anderen Seiten noch
   da. Sie gehoert hierher, damit sie ueberall gilt. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--lb-green);
  cursor: pointer;
  /* ERGAENZT 2026-10-01: Die Regel darueber setzt auch
     -webkit-appearance:none, Rahmen und abgerundete Ecken. Damit zeichnete
     der Browser das Kaestchen als leeren Kreis OHNE Haekchen - der Klick
     wirkte, war aber nicht zu sehen ("kann keinen Haken setzen"). Hier das
     native Aussehen zurueckholen. */
  -webkit-appearance: auto;
  appearance: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Beschriftung neben dem Kaestchen statt darueber.

   Der Selektor nennt bewusst .form-group label mit: `.form-group label`
   hat hoehere Spezifitaet als `.check-row` allein und wuerde mit
   display:block gewinnen. Kaestchen und Text lagen dann uebereinander
   statt nebeneinander - im Screenshot kaum zu sehen, in der Messung
   eindeutig. */
.form-group label.check-row,
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.45;
}

.check-row input[type="checkbox"] { margin-top: 2px; }

.check-row .check-hint {
  display: block;
  font-size: var(--lb-text-xs);
  color: var(--lb-grey-500);
  margin-top: 2px;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7787' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lb-space-3); }
.form-actions { display: flex; gap: var(--lb-space-2); margin-top: var(--lb-space-4); }


/* ── 13. FILTER BAR ────────────────────────────────────────────── */
/* GEAENDERT 2026-09-10: Raster statt umbrechendem Flex.

   Mit flex-wrap und min-width:130px sprang die Leiste auf einem
   1366er-Bildschirm auf drei Zeilen und war 167 px hoch, mit einer fast
   leeren Zeile dazwischen. Ein Raster verteilt die Felder gleichmaessig
   und bricht sauber um - gemessen 167 px vorher, 106 px danach. */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-5);
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-bg-card);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-sm);
}

.filter-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-group label {
  font-size: var(--lb-text-xs);
  color: var(--lb-grey-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.filter-group select,
.filter-group input {
  padding: 6px 10px;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  color: var(--lb-grey-950);
  font-size: var(--lb-text-sm);
  font-family: var(--lb-font-sans);
  outline: none;
}
.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--lb-green);
  box-shadow: 0 0 0 3px rgba(42, 135, 27, 0.12);
}
/* Das Suchfeld nimmt den Rest der Zeile ein, faellt aber nicht mehr
   allein in eine eigene Zeile: mit grid-column: 1/-1 bekaeme es die
   volle Breite, mit span 2 teilt es sich die letzte Zeile. */
.filter-search { grid-column: span 2; min-width: 0; }

/* Eine Gruppe mit zwei Auswahlfeldern.
   Gestapelt war sie 80 px hoch und bestimmte damit die Hoehe der
   gesamten ersten Rasterzeile - die Leiste wuchs auf drei Zeilen,
   obwohl zwei gereicht haetten. Nebeneinander bleibt sie so hoch wie
   alle anderen, braucht dafuer die doppelte Breite. */
.filter-group--duo { grid-column: span 2; }
.filter-group--duo .filter-inline { display: flex; gap: 6px; }
.filter-group--duo .filter-inline select { flex: 1; min-width: 0; }

/* Ab hier wird es eng: unter 640 px verfuegbarer Breite steht jedes
   Feld fuer sich, sonst sind die Auswahlfelder nicht mehr bedienbar. */
@media (max-width: 860px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-search, .filter-group--duo { grid-column: 1 / -1; }
  .filter-group--duo .filter-inline { flex-direction: row; }
}
@media (max-width: 520px) {
  .filter-bar { grid-template-columns: 1fr; }
}
.filter-group select {
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7787' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  cursor: pointer;
}


/* ── 14. BULK ACTION BAR ───────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-green-xlight);
  border: 1px solid var(--lb-green-muted);
  border-radius: var(--lb-radius-md);
  margin-bottom: var(--lb-space-4);
}

.bulk-bar span:first-child { font-weight: 600; margin-right: var(--lb-space-2); color: var(--lb-green-dark); }


/* ── 15. PRICING OVERVIEW ──────────────────────────────────────── */
.pricing-overview { display: flex; flex-direction: column; gap: var(--lb-space-2); }

.price-item {
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-grey-100);
  border-radius: var(--lb-radius-md);
  border: 0.5px solid var(--lb-grey-300);
}
.price-item label {
  font-size: var(--lb-text-xs);
  color: var(--lb-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: block;
}
.price-item .price { font-size: var(--lb-text-xl); font-weight: 700; display: block; color: var(--lb-grey-950); }
.price-item .ek { color: var(--lb-amber); }
.price-item .min-vk { color: var(--lb-grey-600); }
.price-item .vk { color: var(--lb-green); }
.price-item.highlight { border: 1.5px solid var(--lb-green); background: var(--lb-green-xlight); }
.price-item.warning { border: 1.5px solid var(--lb-amber-border); background: var(--lb-amber-bg); }
.price-item.success { border: 1.5px solid var(--lb-green-muted); background: var(--lb-green-light); }
.price-note { font-size: var(--lb-text-xs); color: var(--lb-grey-600); }
.price-arrow { text-align: center; color: var(--lb-grey-400); font-size: 12px; }

.detail-actions { display: flex; gap: var(--lb-space-2); margin-top: var(--lb-space-4); }


/* ── 16. DETAIL VIEW ───────────────────────────────────────────── */
/* GEAENDERT 2026-09-10: auto-fit statt fester zwei Spalten.
   Der Umbruch richtet sich damit nach der tatsaechlich verfuegbaren
   Breite, nicht nach der Fensterbreite. Das ist der Kern des Problems:
   die Seitenleiste nimmt 230 px weg, ein Umbruchpunkt bei 1200 px
   Fenster greift also erst bei 970 px Inhalt - da ist es laengst zu
   eng. Mit auto-fit entfaellt die Rechnerei. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: var(--lb-space-5);
}

/* Auf sehr breiten Bildschirmen bei zwei Spalten bleiben. auto-fit
   wuerde sonst eine dritte einziehen, und die Detailseite ist paarweise
   gedacht - Stammdaten neben Preisen, nicht zu dritt. */
@media (min-width: 1700px) {
  .detail-grid { grid-template-columns: 1fr 1fr; }
}
.detail-grid > .panel:last-child { grid-column: 1 / -1; }

.detail-fields { display: flex; flex-direction: column; }
.field-row {
  display: flex;
  padding: var(--lb-space-2) 0;
  border-bottom: 1px solid var(--lb-grey-200);
}
.field-row:last-child { border-bottom: none; }
/* GEAENDERT 2026-09-10: Beschriftung nicht mehr starr 180 px.
   In einer 520-px-Spalte blieben fuer den Wert nur 340 px, und lange
   Inhalte wie eine Shopware-UUID brachen mitten im Wort um. Jetzt
   waechst die Beschriftung mit, bleibt aber in vernuenftigen Grenzen. */
.field-row label {
  width: 40%;
  min-width: 110px;
  max-width: 180px;
  flex-shrink: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-grey-600);
  font-weight: 500;
}
.field-row span { min-width: 0; overflow-wrap: anywhere; }

/* Ganz schmal untereinander - nebeneinander bleibt nichts uebrig. */
@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 2px; }
  .field-row label { width: auto; max-width: none; }
}
.field-row span { font-size: var(--lb-text-base); color: var(--lb-grey-950); }


/* ── 17. FILE UPLOAD ───────────────────────────────────────────── */
.file-drop-zone {
  border: 2px dashed var(--lb-grey-300);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-8);
  text-align: center;
  cursor: pointer;
  transition: var(--lb-transition);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--lb-green);
  background: var(--lb-green-xlight);
}

.file-drop-zone i { font-size: 32px; color: var(--lb-grey-400); margin-bottom: var(--lb-space-2); display: block; }
.file-drop-zone p { color: var(--lb-grey-700); font-size: var(--lb-text-sm); }
.file-drop-zone .link { color: var(--lb-green); cursor: pointer; font-weight: 600; }


/* ── 18. PROGRESS BAR ──────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--lb-grey-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--lb-space-2);
}

.progress-fill {
  height: 100%;
  background: var(--lb-green);
  border-radius: 3px;
  transition: width 0.4s ease;
}


/* ── 19. MODALS ────────────────────────────────────────────────── */
/* ── Dialoge ──────────────────────────────────────────────────────
   VEREINHEITLICHT 2026-09-10.

   Vorher standen drei Mechaniken nebeneinander: .hidden entfernen,
   .open setzen, oder style.display von Hand. Dazu ein Dutzend eigener
   Schliessfunktionen und in rebates ein komplett eigenes Regelwerk.
   Drei Wege bedeuten drei Fehlerquellen - und man musste erst
   nachsehen, welcher in dieser View gilt.

   Ab jetzt gilt EINER: .modal ist standardmaessig unsichtbar,
   .modal.open zeigt es. Geoeffnet und geschlossen wird ausschliesslich
   ueber openModal(id) / closeModal(id) aus app.js.

   Der Standardzustand war vorher display:flex - ein Dialog war also
   sichtbar, solange ihn niemand versteckte. Genau umgekehrt, als man
   es erwartet: wer ein Modal vergisst zu verstecken, sieht es sofort;
   wer vergisst es zu zeigen, sucht lange. */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(51, 56, 64, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--lb-space-4);
}

.modal.open { display: flex; }

.modal-content {
  background: var(--lb-bg-card);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-xl);
  box-shadow: var(--lb-shadow-lg);
  width: 100%;
  max-width: 600px;
  /* ERGAENZT 2026-09-10: auf einem 768 px hohen Laptop ragte die
     Regelmaske unten aus dem Bild - der Speichern-Knopf war nicht
     erreichbar, und der Dialog liess sich nicht scrollen.
     Jetzt scrollt der Inhalt innerhalb des Dialogs. */
  max-height: calc(100vh - 2 * var(--lb-space-4));
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  flex: 0 0 auto;
  padding: var(--lb-space-4) var(--lb-space-5);
  border-bottom: 1px solid var(--lb-grey-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 { font-size: var(--lb-text-lg); font-weight: 700; color: var(--lb-grey-950); }
.close-btn { background: none; border: none; color: var(--lb-grey-500); font-size: 22px; cursor: pointer; padding: 4px; transition: var(--lb-transition); }
.close-btn:hover { color: var(--lb-grey-950); }
.modal-content form { padding: var(--lb-space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }


/* ── 20. ALERTS ────────────────────────────────────────────────── */
.alert {
  display: flex;
  gap: var(--lb-space-3);
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  line-height: 1.5;
  margin-bottom: var(--lb-space-4);
}

.alert-info    { background: var(--lb-blue-bg);   color: var(--lb-blue);  border: 1px solid var(--lb-blue-border); }
.alert-error   { background: var(--lb-red-bg);    color: var(--lb-red);   border: 1px solid var(--lb-red-border); }
.alert-success { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.alert-warning { background: var(--lb-amber-bg);  color: var(--lb-amber); border: 1px solid var(--lb-amber-border); }


/* ── 21. TOAST ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--lb-space-5);
  right: var(--lb-space-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
}

.toast {
  padding: var(--lb-space-3) var(--lb-space-5);
  background: var(--lb-bg-card);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  color: var(--lb-grey-900);
  font-size: var(--lb-text-sm);
  box-shadow: var(--lb-shadow-lg);
  animation: toastIn 200ms ease;
}

.toast-success { border-left: 3px solid var(--lb-green); }
.toast-error   { border-left: 3px solid var(--lb-red); }
.toast-warning { border-left: 3px solid var(--lb-amber); }
.toast-info    { border-left: 3px solid var(--lb-blue); }

@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


/* ── 22. PAGINATION ────────────────────────────────────────────── */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: var(--lb-space-4); }


/* ── 23. CATEGORY TREE ─────────────────────────────────────────── */
.category-tree { max-height: 400px; overflow-y: auto; }
.tree-item {
  padding: 4px var(--lb-space-2);
  font-size: var(--lb-text-sm);
  border-bottom: 1px solid var(--lb-grey-200);
  color: var(--lb-grey-900);
}
.tree-item i { color: var(--lb-amber); margin-right: 4px; font-size: 12px; }
.tree-item code { margin-left: var(--lb-space-2); }


/* ── 24. SYNC LAYOUT ───────────────────────────────────────────── */
.sync-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lb-space-5); margin-bottom: var(--lb-space-5); }
.stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--lb-grey-200); font-size: var(--lb-text-sm); }
.stat-row span { color: var(--lb-grey-700); }
.stat-row strong { color: var(--lb-grey-950); }

.rules-info {
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-blue-bg);
  border: 1px solid var(--lb-blue-border);
  border-radius: var(--lb-radius-md);
  margin-bottom: var(--lb-space-5);
  font-size: var(--lb-text-sm);
  color: var(--lb-blue);
  line-height: 1.6;
  display: block;
  width: 100%;
}

.rules-info p {
  display: inline;
}

.rules-info i {
  margin-right: var(--lb-space-1);
}


/* ── 25. SHOP MANAGEMENT ───────────────────────────────────────── */
.btn-danger-text { color: var(--lb-red) !important; }
.btn-danger-text:hover { background: var(--lb-red-bg) !important; border-color: var(--lb-red-border) !important; }

.test-result {
  margin-top: var(--lb-space-3);
  padding: 10px 14px;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  line-height: 1.5;
}
.test-result.success { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }
.test-result.failure { background: var(--lb-red-bg); color: var(--lb-red); border: 1px solid var(--lb-red-border); }

details summary {
  cursor: pointer;
  color: var(--lb-grey-700);
  font-size: var(--lb-text-sm);
  font-weight: 500;
  padding: var(--lb-space-2) 0;
  transition: var(--lb-transition);
}
details summary:hover { color: var(--lb-grey-950); }
details summary i { margin-right: var(--lb-space-1); }
details > div {
  padding: var(--lb-space-3);
  background: var(--lb-grey-100);
  border-radius: var(--lb-radius-md);
  border: 0.5px solid var(--lb-grey-300);
}


/* ── 26. DESCRIPTION ───────────────────────────────────────────── */
.description-preview {
  padding: var(--lb-space-3);
  background: var(--lb-grey-100);
  border-radius: var(--lb-radius-md);
  border: 0.5px solid var(--lb-grey-300);
  min-height: 60px;
  font-size: var(--lb-text-sm);
  line-height: 1.6;
  color: var(--lb-grey-800);
}


/* ── 27. UTILITIES ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--lb-grey-600); }
.text-green { color: var(--lb-green); }
.text-red { color: var(--lb-red); }
.text-orange { color: var(--lb-amber); }
.text-blue { color: var(--lb-blue); }
.font-bold { font-weight: 600; }
.small { font-size: var(--lb-text-xs); }

code {
  background: var(--lb-grey-100);
  border: 0.5px solid var(--lb-grey-300);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--lb-text-sm);
  font-family: var(--lb-font-mono);
  color: var(--lb-grey-800);
}

.product-name { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.selected td { background: var(--lb-green-xlight) !important; }
tr.inactive-row td { opacity: 0.5; }
.btn-danger-text { color: var(--lb-red) !important; }
.btn-danger-text:hover { background: var(--lb-red-bg) !important; border-color: var(--lb-red-border) !important; }


/* ── 28. LOGIN ─────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--lb-bg-page);
}

.login-card {
  background: var(--lb-bg-card);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-xl);
  box-shadow: var(--lb-shadow-lg);
  padding: var(--lb-space-10);
  width: 400px;
}

.login-logo { text-align: center; margin-bottom: var(--lb-space-8); }
.login-logo i { font-size: 40px; color: var(--lb-green); display: block; margin-bottom: var(--lb-space-2); }
.login-logo h1 { font-size: var(--lb-text-2xl); font-weight: 700; color: var(--lb-grey-950); letter-spacing: -0.015em; }
.login-logo p { color: var(--lb-grey-600); font-size: var(--lb-text-sm); margin-top: var(--lb-space-1); }

.login-card .form-group { margin-bottom: var(--lb-space-4); }
.login-card .form-group label {
  display: block;
  font-size: var(--lb-text-sm);
  font-weight: 600;
  color: var(--lb-grey-950);
  margin-bottom: var(--lb-space-1);
}
.login-card .form-group input {
  width: 100%;
  border: 1px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  padding: 10px 14px;
  font-size: var(--lb-text-base);
  font-family: var(--lb-font-sans);
  color: var(--lb-grey-950);
  background: var(--lb-bg-card);
  outline: none;
  transition: var(--lb-transition);
}
.login-card .form-group input:focus {
  border-color: var(--lb-green);
  box-shadow: 0 0 0 3px rgba(42, 135, 27, 0.12);
}
.login-card .btn { margin-top: var(--lb-space-2); }


/* ── 29. RESPONSIVE ────────────────────────────────────────────── */

/* Hamburger button - hidden on desktop */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--lb-grey-700);
  cursor: pointer;
  padding: 8px;
}

/* ERGAENZT 2026-09-10: Seitenleiste auf Laptopbreiten schmaler.

   Die Leiste nimmt 230 px, und auf einem 1366er-Bildschirm bleiben dem
   Inhalt damit 1136. Zwischen 900 und 1400 px sind 184 px genug - die
   Beschriftungen passen weiterhin, der Inhalt bekommt 46 px zurueck.
   Das klingt wenig, entscheidet aber ueber eine zweite Tabellenspalte. */
@media (min-width: 901px) and (max-width: 1400px) {
  .sidebar { width: 184px; }
  .main-content { margin-left: 184px; }
  .nav-item { padding-left: var(--lb-space-3); padding-right: var(--lb-space-3); }

  /* KORRIGIERT 2026-09-20: Kopfzeile UND Inhalt gemeinsam.

     Vorher war nur .content-header verschmälert worden. Die Überschrift
     stand damit 8 px weiter links als die Kacheln und Panels darunter -
     sichtbar auf jedem 1366er-Bildschirm, unsichtbar ab 1440. Zwei
     Innenabstände, die zusammengehören, dürfen nicht einzeln
     angefasst werden. */
  .content-header,
  .content-body { padding-left: var(--lb-space-4); padding-right: var(--lb-space-4); }
}

@media (max-width: 1200px) {
  .dashboard-panels { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > .panel { grid-column: auto; }
  .sync-actions-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .main-content {
    margin-left: 0;
  }
  .mobile-menu-toggle {
    display: block;
  }
  .content-header {
    padding: var(--lb-space-3) var(--lb-space-4);
  }
  .content-header h1 {
    font-size: var(--lb-text-lg);
  }
  .content-body {
    padding: var(--lb-space-4);
  }
  .kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--lb-space-2);
  }
  .kpi-card {
    padding: var(--lb-space-3);
  }
  .kpi-value {
    font-size: 20px;
  }
  .filter-bar {
    flex-direction: column;
    gap: var(--lb-space-2);
  }
  .filter-group {
    min-width: 100%;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .data-table th, .data-table td {
    padding: 6px 8px;
    font-size: var(--lb-text-sm);
  }
  .product-name {
    max-width: 160px;
  }
  .quick-actions {
    grid-template-columns: 1fr;
  }
  .bulk-bar {
    flex-wrap: wrap;
  }
  .import-type-cards,
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .panel-header {
    flex-wrap: wrap;
    gap: var(--lb-space-2);
  }
  .modal-content {
    width: 95%;
    max-height: 95vh;
    margin: var(--lb-space-2);
  }
}

@media (max-width: 480px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
  .kpi-card {
    padding: var(--lb-space-2) var(--lb-space-3);
  }
  .kpi-icon {
    width: 34px; height: 34px;
    font-size: 14px;
  }
  .content-body {
    padding: var(--lb-space-3);
  }
  .btn {
    padding: 7px 12px;
    font-size: var(--lb-text-sm);
  }
  .action-buttons {
    flex-direction: column;
  }
}

/* Mobile overlay when sidebar is open */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(51, 56, 64, 0.3);
  z-index: 150;
}
.mobile-overlay.active {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   NACHGETRAGEN 2026-09-10 — Klassen, die in Views benutzt, aber nie
   definiert wurden.

   Gefunden durch Abgleich aller class="..."-Angaben in src/Views gegen
   diese Datei. 46 Klassen waren offen; die reinen JavaScript-Haken
   (.cl-pct, .ak-cb, .lk-cb und so weiter) bleiben absichtlich ohne
   Gestaltung - sie dienen nur dem Auffinden per querySelector.

   Der Rest stand wirkungslos im HTML: eine Zeile mit class="badge
   badge-grey" bekam die Grundform eines Abzeichens, aber keine Farbe.
   Das sah nicht kaputt aus, nur unfertig - deshalb ist es nie
   aufgefallen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Farbvarianten ────────────────────────────────────────────────
   Aliase auf bestehende Marken. Die Views verwenden durchgehend die
   Farbnamen (badge-grey, badge-amber), das Regelwerk dagegen die
   Bedeutungsnamen (badge-deactivated, badge-pending). Statt 13 Views
   umzuschreiben, bekommen beide Schreibweisen dieselbe Wirkung. */
.badge-grey  { background: var(--lb-grey-200);   color: var(--lb-grey-700);  border: 1px solid var(--lb-grey-300); }
.badge-amber { background: var(--lb-amber-bg);   color: var(--lb-amber);     border: 1px solid var(--lb-amber-border); }
.badge-blue  { background: var(--lb-blue-bg);    color: var(--lb-blue);      border: 1px solid var(--lb-blue-border); }
.badge-red   { background: var(--lb-red-bg);     color: var(--lb-red);       border: 1px solid var(--lb-red-border); }
.badge-green { background: var(--lb-green-light); color: var(--lb-green-dark); border: 1px solid var(--lb-green-muted); }

/* Kachelsymbole: bg-orange gibt es, bg-amber wurde geschrieben. */
.bg-amber   { background: var(--lb-amber-bg);  color: var(--lb-amber); }
.bg-grey    { background: var(--lb-grey-200);  color: var(--lb-grey-700); }
.bg-teal    { background: var(--lb-teal-bg);   color: var(--lb-teal); }

/* ── KPI-Kachel ───────────────────────────────────────────────────
   .kpi-card und .kpi-icon waren definiert, der Textblock daneben nicht.
   Ohne ihn stehen Zahl und Beschriftung als schlichte Bloecke - lesbar,
   aber ohne die vorgesehene Ausrichtung neben dem Symbol. */
.kpi-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ── Seitenhuellen und Zweispalter ────────────────────────────────

   KORRIGIERT 2026-09-20. Die fuenf Klassen waren hier zusammengefasst,
   weil sie gleich klingen. Sie sind es nicht:

     .dashboard-grid und .import-layout umschliessen eine GANZE Seite
     mit mehreren gleichrangigen Panels untereinander.

     .categories-layout, .settings-layout und .shops-layout teilen den
     Platz tatsaechlich in zwei Spalten - links Liste, rechts Bearbeitung.

   Als Raster gesetzt stellte die erste Gruppe alles nebeneinander: beim
   Dashboard wurde die Seite breiter als das Fenster, beim Import
   mussten sich drei Importkarten 430 px teilen.

   Der Unterschied ist am Namen nicht zu erkennen, nur am Inhalt -
   deshalb steht er hier. */
.dashboard-grid,
.import-layout {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
  min-width: 0;
}

.categories-layout,
.settings-layout,
.shops-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--lb-space-4);
  align-items: start;
}

/* Altbestand: rebates brachte ein eigenes Dialogsystem mit. Die
   Klassennamen sind in der View ersetzt, die Aliase bleiben als
   Rueckfall, falls irgendwo noch einer steht. */
.rb-modal-overlay { }
.rb-modal-overlay.open { display: flex; }

/* ── Reiter ───────────────────────────────────────────────────────

   KORRIGIERT 2026-09-27.

   Hier stand display:none fuer beide Klassen, sichtbar nur mit
   zusaetzlichem .active. Das vergibt in pryce aber KEINE der beiden
   Views:

     rebates/index.php    steuert ueber style="display:block|none"
                          direkt am Element
     discounts/index.php  steuert ueber die Klasse .hidden

   Folge: die Rabattmatrix war vollstaendig leer - nicht nur der Reiter
   "Fehlende Konditionen", sondern jeder. Die Knoepfe schalteten um, der
   Inhalt blieb unsichtbar. Ohne Fehlermeldung, denn technisch
   funktionierte alles.

   Die Klassen markieren also nur, sie steuern nicht. Ein Grundzustand
   display:none ist genau dann falsch, wenn niemand ihn wieder aufhebt.

   Fuer neuen Code: .hidden zum Ausblenden verwenden - die Regel dafuer
   steht weiter oben und wirkt mit !important. */
.tab-panel,
.tab-content { display: block; }

/* Beide Konventionen bleiben nutzbar: wer .active setzt, bekommt
   ebenfalls block, und .hidden blendet in jedem Fall aus. */
.tab-panel.active,
.tab-content.active { display: block; }

/* ── Dialoge ──────────────────────────────────────────────────────
   modal-body und modal-footer wurden in zwei Views benutzt, ohne dass
   es sie gab - der Inhalt klebte dort randlos am Rahmen. */
.modal-body   { padding: var(--lb-space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-footer {
  flex: 0 0 auto;
  padding: var(--lb-space-4) var(--lb-space-5);
  border-top: 1px solid var(--lb-grey-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--lb-space-2);
}

/* Schliesskreuz. Stammt aus der Rueckverguetungsmaske und wurde von dort
   in andere Views uebernommen, ohne den Stil mitzunehmen. */
.rb-close-btn,
.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--lb-grey-500);
  cursor: pointer;
  padding: 0 4px;
}
.rb-close-btn:hover,
.close-btn:hover { color: var(--lb-grey-950); }

/* ── Kennzahlenblock im Sync ──────────────────────────────────────── */
.stat-card {
  background: var(--lb-bg-card);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-3) var(--lb-space-4);
}
.stat-value { font-size: var(--lb-text-xl); font-weight: 700; color: var(--lb-grey-950); }
.stat-label { font-size: var(--lb-text-xs); color: var(--lb-grey-600); }

/* ── Formularfelder ausserhalb einer .form-group ──────────────────
   Bootstrap-Schreibweise, die sich in zwei Views eingeschlichen hat.
   Statt sie dort zu tilgen, bekommt sie dasselbe Aussehen wie der Rest -
   sonst faellt genau ein Feld je Seite aus der Gestaltung. */
/* .form-control ist die Bootstrap-Schreibweise und taucht in zwei
   Views auf - meist bei Feldern, die AUSSERHALB einer .form-group
   stehen, etwa dem Lieferanten-Auswahlfeld in der Massenaktionsleiste.
   Dort greift die Regel oben nicht.

   Die Werte sind bewusst Zeichen fuer Zeichen dieselben wie bei
   .form-group input. Vorher stand hier --lb-text-sm statt
   --lb-text-base: ein Feld je Seite war minimal kleiner als alle
   anderen. Das faellt nicht auf, wirkt aber unsauber - und genau
   solche Abweichungen summieren sich. */
.form-control {
  width: 100%;
  border: 1px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-md);
  padding: 9px 12px;
  font-size: var(--lb-text-base);
  font-family: var(--lb-font-sans);
  color: var(--lb-grey-950);
  background: var(--lb-bg-card);
  transition: var(--lb-transition);
  outline: none;
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: var(--lb-green);
  box-shadow: 0 0 0 3px rgba(42, 135, 27, 0.12);
}
/* Kleine Variante fuer Leisten, in denen ein Feld neben Knoepfen steht. */
.form-control-sm { padding: 5px 9px; font-size: var(--lb-text-sm); width: auto; }

/* ── Einzelnes Label am Produkt ───────────────────────────────────── */
.label-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--lb-text-xs);
  font-weight: 600;
  border: 1px solid var(--lb-grey-300);
}

/* ── Kopfzeilen-Bedienelemente ────────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: var(--lb-space-3); }

/* ── Anmeldung ────────────────────────────────────────────────────── */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lb-space-5);
  background: var(--lb-bg-page);
}

/* ── Wartezeichen ─────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--lb-grey-300);
  border-top-color: var(--lb-green);
  border-radius: 50%;
  animation: pryce-spin 0.7s linear infinite;
}
@keyframes pryce-spin { to { transform: rotate(360deg); } }

/* ── Unterleiste der Import-Seiten ────────────────────────────────
   Ergänzt 2026-09-20.

   Fünf Menüpunkte für einen Themenbereich waren zu viel: Import,
   Preislisten, Listung, DATANORM, Datenstand gehören zusammen und
   werden nacheinander benutzt. Im Hauptmenü sahen sie aus wie fünf
   unabhängige Bereiche.

   Jetzt ein Menüpunkt und hier die Schritte - in der Reihenfolge, in
   der man sie geht. */
.import-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: var(--lb-space-5);
  padding: 4px;
  background: var(--lb-grey-100);
  border: 0.5px solid var(--lb-grey-300);
  border-radius: var(--lb-radius-lg);
}

.import-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  font-weight: 500;
  color: var(--lb-grey-700);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--lb-transition);
}

.import-tab:hover { background: var(--lb-bg-card); color: var(--lb-grey-950); }

.import-tab.active {
  background: var(--lb-bg-card);
  color: var(--lb-green-dark);
  font-weight: 600;
  box-shadow: var(--lb-shadow-sm);
}

.import-tab i { font-size: 12px; opacity: .8; }

/* Schmal: Beschriftungen weg, nur Symbole - sonst bricht die Leiste
   auf drei Zeilen und nimmt mehr Platz als der Inhalt darunter. */
@media (max-width: 720px) {
  .import-tab span { display: none; }
  .import-tab { padding: 9px 12px; }
  .import-tab i { font-size: 14px; opacity: 1; }
}