/* ====== Base ====== */
:root{
  --bg:#f3f5f7;
  --card:#ffffff;
  --fg:#222;
  --muted:#6b7280;
  --brand:#007c91;
  --brand-2:#00acc1;
  --border:#e5e7eb;
  --shadow:0 2px 8px rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--fg)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:10}
h1{margin:0;font-size:1.4rem;color:var(--brand)}
.header-actions{display:flex;gap:8px;align-items:center}
button,.import-label{border:1px solid var(--border);background:#fff;color:var(--fg);padding:8px 12px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}
button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
button.ghost{background:#fff;color:var(--fg)}
button:disabled{opacity:.6;cursor:not-allowed}
.import-label{display:inline-flex;gap:8px;align-items:center}
.import-label input{display:none}


main{padding:16px;max-width:none;margin:0}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:980px){.grid.two{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.card.compact{padding:10px}
h2{margin:0 0 12px;color:var(--brand)}
h3{margin:0 0 10px;color:var(--brand-2)}
.form{display:grid;gap:10px}
.form .row{display:flex;gap:10px;flex-wrap:wrap}
.row{display:flex;gap:10px;align-items:center}
.scan-row input:first-child{flex:1}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #ffe08a;background:#fffdf3}
.table{display:flex;flex-direction:column;gap:6px}
.table .row{display:grid;gap:8px;align-items:center}
.table .row .cell{padding:8px 10px;background:#fff;border:1px solid var(--border);border-radius:10px}
.table .row .cell.actions{display:flex;gap:6px;justify-content:flex-end}
.hint{color:var(--muted);font-size:.9rem}
.totals{display:flex;justify-content:flex-end;padding:6px 0}
.tab{display:none}
.tab.active{display:block}
.app-footer{padding:12px 16px;color:var(--muted);text-align:center}
#openOrders,#archive{max-height:700px;overflow:auto}
#productList{max-height:700px;overflow:auto}
#supplierList{max-height:700px;overflow:auto}

/* ======== Tabellen-Optimierungen ======== */
#orderItems .row {
  grid-template-columns: 1fr 2fr 0.5fr 0.8fr 0.8fr 1fr !important;
  align-items:center;
}
#orderItems .row .cell input {
  max-width:60px;
  padding:4px 6px;
}
#archive .cell:first-child {
  background-color: #f0f7ff;
  font-weight: bold;
  border-radius: 6px;
  padding: 6px;
}
#openOrders .cell:first-child,
#openOrders .cell:nth-child(3) {
  background-color: #f0f7ff;
  font-weight: bold;
  border-radius: 6px;
  padding: 6px;
}
#productList .row{
  grid-template-columns: 1fr 2fr 0.8fr 1.2fr 0.6fr 0.6fr 1fr !important;
}
.cell.kabine,.cell.verkauf{
  text-align:center;
  font-size:1.1rem;
}

/* ======== Buttons ======== */
#btnSend { background: var(--brand); color:#fff; font-weight:600; }
#btnMailto { background: var(--brand-2); color:#fff; }
#btnCopyBody { background:#fff; color:var(--fg); border:1px solid var(--border); }



/* Hover */
.tabs button:hover {
  background: #3b5c73;
  transform: translateX(4px);
}

/* Aktiver Eintrag */
.tabs button.active {
  background: #02bcd4;        /* Türkis */
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transform: translateX(6px);
}

/* Klick */
.tabs button:active {
  transform: translateX(2px);
}

main {
  margin-left: 240px;
  padding: 20px;
}


/* ================================================= */
/* ============  SIDEBAR – TOOL BUTTONS  ============ */
/* ============  (ALTE SCHÖNE VERSION)  ============== */
/* ================================================= */

.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 14px 0;
}

.sidebar-tools {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* Grundform aller Tool-Buttons */
.tool-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  white-space: normal;
}

/* Türkis – Download */
#btnExportCsv {
  background: #02bcd4;
}
#btnExportCsv:hover {
  background: #019cb2;
}

/* Dunkelgrau – Upload */
label.tool-btn {
  background: #52616b !important;
  color: #fff !important;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
label.tool-btn:hover {
  background: #455058 !important;
}

/* Grün – Vorlage */
#btnTemplateCsv {
  background: #39b86e;
}
#btnTemplateCsv:hover {
  background: #2fa75f;
}

/* ================================================= */
/*                      POPUP                        */
/* ================================================= */

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important;
}
.popup.hidden { display: none !important; }

.popup-content {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  min-width: 320px;
  max-width: 90%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  animation: fadeIn 0.25s ease;
}
.popup-content h3 { color: var(--brand); }

.popup-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9);}
  to   { opacity: 1; transform: scale(1);}
}
/* ======== Sidebar – Navigation (NEUES DESIGN) ======== */
.tabs {
  position: fixed;
  top: 60px;
  left: 0;
  width: 220px;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  background: #2c3e50;
  padding: 10px;
  gap: 10px;
  box-shadow: var(--shadow);
}

/* ⭐ Neues, modernes Button-Design */
.tabs button {
  border: none;
  background: #34495e;
  color: #ecf0f1;
  text-align: left;
  padding: 14px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s;
  font-size: 1em;
  font-weight: 600;
  display: block;
}

/* Hover-Effekt */
.tabs button:hover {
  background: #3b5c73;
  transform: translateX(4px);
}

/* Aktiver Button */
.tabs button.active {
  background: #02bcd4;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transform: translateX(6px);
}

/* Klick */
.tabs button:active {
  transform: translateX(2px);
}
/* ============================================
   Bestell-Eingabe zusammenfassen (NEU)
   ============================================ */

/* Oberer Bereich: Lieferant + EAN in einer Zeile */
.order-top-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

/* Hauptbereich: Artikel suchen / auswählen / Person / Button */
.order-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;

  background: #e7f8ff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #b9e6ff;
}

/* Inputs im neuen Block */
.order-grid input,
.order-grid select {
  height: 42px;
  border-radius: 10px;
  border: 1px solid #a7d5f0;
  background: white;
}

/* Grüner "Hinzufügen"-Button */
.order-grid button {
  background: #39b86e !important;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 18px;
  height: 42px;
}

.order-grid button:hover {
  background: #2fa75f !important;
}
#infoPopup {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #2c3e50;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-weight: 600;
  max-width: 300px;
  text-align: center;   /* schöner in der Mitte */
}

/* Typen */
#infoPopup.success { background:#28a745; }
#infoPopup.warning { background:#f0ad4e; }
#infoPopup.error   { background:#d9534f; }

/* Animationshilfe */
#infoPopup.show { opacity: 1; }
/* ============================= */
/* 🔴 Roter Block – EINZEILIG    */
/* ============================= */

.red-block {
  display: grid;
  grid-template-columns: 1.7fr 0.5fr 0.5fr 1fr 1fr;
  /* 1.7 = Eingabefeld, 0.5 + 0.5 = Checkboxen, 1 = Für wen, 1 = Button */
  gap: 16px;
  background: #fdeaea;
  border: 1px solid #f5b5b5;
  border-radius: 10px;
  padding: 14px;
  align-items: end;
}

.red-block label {
  font-weight: 600;
  color: #660000;
}

.red-block input[type="text"],
.red-block input[type="checkbox"] {
  height: 38px;
}

.red-block input[type="text"] {
  background: #fff5f5;
  border: 1px solid #f1aaaa;
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
}

/* Checkbox schön mittig */
.red-block .check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.9em;
  color: #660000;
}

/* Button rechts */
.red-block button {
  background: #d46a6a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  height: 42px;
  width: 100%;
}

.red-block button:hover {
  background: #c95a5a;
}
/* =============================== */
/*   BUTTON-FARBEN IN BESTELLUNG   */
/* =============================== */

/* 🟩 Grün – Speichern */
#btnSaveOpen {
  background-color: #28a745;
  border: 1px solid #1e7e34;
  color: white;
  font-weight: 600;
}
#btnSaveOpen:hover {
  background-color: #218838;
}

/* 🟨 Gelb – Formular leeren */
#btnCopyBody {
  background-color: #ffe08a;
  border: 1px solid #ffd35e;
  color: #6b4e00;
  font-weight: 600;
}
#btnCopyBody:hover {
  background-color: #ffd35e;
}

/* 🟥 Rot – PDF ansehen */
#btnPreviewPDF {
  background-color: #dc3545;
  border: 1px solid #b02a37;
  color: white;
  font-weight: 600;
}
#btnPreviewPDF:hover {
  background-color: #c82333;
}
/* ===================================================== */
/* 🔵 Bessere Übersicht: Positionen farbig hinterlegen   */
/* ===================================================== */

/* Jede Zeile in orderItems */
#orderItems .row.table-row {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}



/* Optional: Inputs etwas hervorheben */
#orderItems .row.table-row input,
#orderItems .row.table-row select {
  background: #ffffff;
}
/* ========================================== */
/* 🔵 Lieferanten-Header in "Offene Bestellungen"
      hellgrün hervorheben                     */
/* ========================================== */

#openOrders .cell:first-child,
#openOrders .supplier-header {
  background-color: #e8fbe8 !important; /* hellgrün */
  color: #0a5318 !important;            /* dunkler grüner Text */
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 4px;
}
/* ===========================
   Lieferanten – Name hellgrün
   =========================== */
#supplierList .cell.name {
  background-color: #dff6dd;      /* hellgrün */
  color: #215732;                 /* dunkles Grün */
  font-weight: 600;
  padding: 10px 14px !important;
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid #c3e6cb;
}
/* ============================= */
/* HELLGELB – Lieferant-Feld */
/* ============================= */
.order-top-yellow select {
  background: #fff9d9 !important;
  border-color: #e6dba8 !important;
}

/* ============================= */
/* HELLGRÜN – EAN-Feld */
/* ============================= */
.order-top-green input {
  background: #e7fbe7 !important;
  border-color: #a7d8a7 !important;
}