/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: var(--transition);
  white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803d; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; }
.btn-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-primary); text-decoration: underline; font-size: inherit; }
.btn-link:hover { color: var(--color-primary-hover); }

/* ===== FORMS ===== */
.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.form-group label .required { color: var(--color-danger); margin-left: 2px; }

input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="url"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); font-size: 0.9rem;
  color: var(--color-text); background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
input.error, select.error { border-color: var(--color-danger); }
.form-hint { font-size: 0.8rem; color: var(--color-text-muted); }
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 2rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* ===== CARDS ===== */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-title { font-size: 1rem; font-weight: 600; }

/* ===== TABLES ===== */
.table-wrapper { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--color-border); position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead { background: var(--color-bg); }
th { padding: 0.6rem 0.85rem; text-align: left; font-weight: 600; color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); white-space: nowrap; position: sticky; top: 0; z-index: 1; background: var(--color-bg); }
td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-bg); }
.table-clickable tbody tr { cursor: pointer; }
.table-clickable tbody tr:hover { background: var(--color-primary-light); }
/* Scroll-Indikator: zeigt Fading-Overlay wenn Tabelle horizontal scrollbar */
.table-wrapper::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--color-surface)); pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; }

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.55rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.badge-green  { background: var(--color-success-light); color: var(--color-success); }
.badge-yellow { background: var(--color-warning-light); color: var(--color-warning); }
.badge-red    { background: var(--color-danger-light);  color: var(--color-danger);  }
.badge-blue   { background: var(--color-primary-light); color: var(--color-primary); }
.badge-gray   { background: var(--color-border);        color: var(--color-text-muted); }
.badge-cyan   { background: var(--color-info-light);    color: var(--color-info); }

/* ===== KACHELN (Dashboard) ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.kpi-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow); cursor: pointer; transition: var(--transition);
}
.kpi-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.kpi-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: 0.4rem; }
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-card.danger  .kpi-value { color: var(--color-danger); }
.kpi-card.warning .kpi-value { color: var(--color-warning); }
.kpi-card.success .kpi-value { color: var(--color-success); }
.kpi-card.info    .kpi-value { color: var(--color-info); }
.kpi-sub { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.25rem; }

/* ===== MODAL ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 920px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}
.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--color-border);
  display: flex; gap: 0.75rem; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--color-surface);
}

/* ===== DETAIL-MODAL (zentriertes 80%-Fenster) ===== */
/* z-index 900: über Sidebar (200) und Header (100), aber UNTER Modal (1000) —
   so liegt ein aus dem Detail geöffnetes Modal (z.B. Positionen bearbeiten) korrekt darüber. */
.detail-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center; z-index: 900;
  visibility: hidden; transition: background 0.2s ease, visibility 0s linear 0.2s;
}
.detail-modal-backdrop.open {
  visibility: visible; background: rgba(0,0,0,0.5);
  transition: background 0.2s ease;
}
.detail-modal-panel {
  background: var(--color-surface);
  width: 80vw; max-width: 1100px; height: 80vh;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  overflow: hidden;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.detail-modal-backdrop.open .detail-modal-panel { opacity: 1; transform: scale(1); }
.detail-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); flex-shrink: 0;
}
.detail-modal-title { font-size: 1.05rem; font-weight: 600; }
.detail-modal-body { padding: 1.25rem 1.5rem; flex: 1; overflow-y: auto; }
@media (max-width: 768px) {
  .detail-modal-panel { width: 95vw; height: 90vh; }
}

/* ===== TOAST ===== */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 9999; pointer-events: none;
}
.toast {
  background: var(--color-text); color: #fff; padding: 0.75rem 1.1rem;
  border-radius: var(--radius); font-size: 0.875rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 0.5rem;
  animation: slideIn 0.2s ease; pointer-events: all;
  max-width: 360px;
}
.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); }
.toast.info    { background: var(--color-primary); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== UTILS ===== */
.hidden { display: none !important; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.8rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.fw-600 { font-weight: 600; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex { display: flex; }
.w-full { width: 100%; }
.empty-state {
  text-align: center; padding: 3rem 1rem; color: var(--color-text-muted);
}
.empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--color-border);
  border-top-color: var(--color-primary); border-radius: 50%;
  animation: spin 0.6s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; gap: 0.75rem; color: var(--color-text-muted);
}

/* ===== SEARCH BAR ===== */
.search-bar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: 0.4rem 0.75rem; flex: 1; max-width: 360px;
}
.search-bar input {
  border: none; background: none; padding: 0; font-size: 0.9rem;
  flex: 1; color: var(--color-text);
}
.search-bar input:focus { outline: none; box-shadow: none; }

/* ===== FILTER ROW ===== */
.filter-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.filter-row select { width: auto; min-width: 140px; }

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem;
}
.page-header h1 { font-size: 1.35rem; }

/* ===== TABS ===== */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 1.5rem; }
.tab-btn {
  padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 500;
  color: var(--color-text-muted); background: none; border: none;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: var(--transition);
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== STOCK INDICATOR ===== */
.stock-ok      { color: var(--color-success); font-weight: 600; }
.stock-low     { color: var(--color-warning); font-weight: 600; }
.stock-empty   { color: var(--color-danger);  font-weight: 600; }
.row-low       td { background: var(--color-warning-light) !important; }
.row-empty     td { background: var(--color-danger-light) !important; }
.location-free td { background: var(--color-success-light) !important; }

/* ===== DYNAMIC ITEM ROWS (Bestellung, WE) ===== */
.item-rows .item-row {
  display: grid; gap: 0.5rem; align-items: start; padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.item-rows .item-row:last-child { border-bottom: none; }
.item-row-remove {
  background: none; border: none; cursor: pointer;
  color: var(--color-danger); padding: 0.5rem; font-size: 1.2rem;
  line-height: 1; align-self: center;
}

/* ===== MIKRO-INTERAKTIONEN ===== */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn { transition: background var(--transition), border-color var(--transition), transform 80ms ease, box-shadow var(--transition); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(37,99,235,0.03); }

/* ===== BUTTON LOADING STATE ===== */
.btn.is-loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}
.btn-secondary.is-loading::after { border-color: rgba(0,0,0,0.15); border-top-color: var(--color-text); }

/* ===== TOAST PROGRESS BAR ===== */
.toast { overflow: hidden; position: relative; }
.toast-progress {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: rgba(255,255,255,0.4);
  animation: toastProgress linear forwards;
}
.toast.success .toast-progress { background: rgba(255,255,255,0.5); }
.toast.error   .toast-progress { background: rgba(255,255,255,0.5); }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }

/* ===== MOBILE MODAL BOTTOM SHEET ===== */
@media (max-width: 600px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    animation: slideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .modal-header::before {
    content: '';
    display: block; width: 36px; height: 4px;
    background: var(--color-border-strong); border-radius: 2px;
    margin: 0 auto 0.75rem;
  }
  .modal-header { flex-direction: column; align-items: center; padding-top: 0.75rem; }
  .modal-footer { flex-direction: column-reverse; gap: 0.5rem; }
  .modal-footer .btn { width: 100%; justify-content: center; }
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Toast auf Mobile: über Bottom-Nav */
@media (max-width: 768px) {
  #toast-container { bottom: calc(var(--bottom-nav-height) + 1rem); right: 1rem; left: 1rem; }
  .toast { max-width: 100%; }
}

/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; gap: 0.3rem; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
.pager-info { font-size: 0.8rem; color: var(--color-text-muted); margin-right: 0.5rem; }
.pager-btn { min-width: 32px; height: 32px; padding: 0 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; cursor: pointer; }
.pager-btn:hover:not(:disabled):not(.active) { background: var(--color-bg); }
.pager-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); pointer-events: none; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-ellipsis { color: var(--color-text-muted); padding: 0 0.2rem; line-height: 32px; }

/* ===== MOBILE: Sekundäre Tabellenspalten ausblenden ===== */
@media (max-width: 480px) {
  /* Artikel: Behalten col 1(Name) 2(Herst.nr) 4(Bestand) 6(Lieferant) — Ausblenden 3(Einheit) 5(Meldebest.) 7(Lagerplatz) */
  #articlesThead th:nth-child(3), #articlesTbody td:nth-child(3),
  #articlesThead th:nth-child(5), #articlesTbody td:nth-child(5),
  #articlesThead th:nth-child(7), #articlesTbody td:nth-child(7) { display: none; }
  /* Bestellungen: Behalten col 1(Nr) 2(Lieferant) 6(Status) — Ausblenden 3(Datum) 4(ETA) 5(Pos.) */
  #ordersThead th:nth-child(3), #ordersTbody td:nth-child(3),
  #ordersThead th:nth-child(4), #ordersTbody td:nth-child(4),
  #ordersThead th:nth-child(5), #ordersTbody td:nth-child(5) { display: none; }
  /* CP8-D Material am Auftrag: Behalten col 1(Artikel) 4(Rest) 6(Entnehmen) 7(Hinweis) —
     Ausblenden 2(Benötigt) 3(Entnommen) 5(Verfügbar) 8(Entfernen).
     Auf dem Handy zählt, WAS noch raus muss und die Möglichkeit, es zu entnehmen. Die
     Herleitung (benötigt minus entnommen) und der Gesamtbestand sind Nachschlagewerte und
     stehen ab Tablet wieder da. Ohne diese Auswahl müsste der Lagerist quer durch acht
     Spalten scrollen, bevor er das Häkchen überhaupt sieht. Der Lagerplatz geht dabei
     nicht verloren — er steht auch in der Entnehmen-Spalte ("von BOX-…"). */
  #woItemsThead th:nth-child(2), #woItemsTbody td:nth-child(2),
  #woItemsThead th:nth-child(3), #woItemsTbody td:nth-child(3),
  #woItemsThead th:nth-child(5), #woItemsTbody td:nth-child(5),
  #woItemsThead th:nth-child(8), #woItemsTbody td:nth-child(8) { display: none; }
}

/* ===== INVENTUR SPREADSHEET ===== */
.inventur-loc-header td { background: var(--color-bg); font-size: 0.875rem; }
.inventur-loc-header.loc-confirmed td { background: var(--color-success-light) !important; }
.qty-stepper { display: flex; align-items: center; gap: 0.25rem; }
.qty-stepper input { text-align: center; }
.btn-xs { font-size: 0.75rem; padding: 0.2rem 0.45rem; line-height: 1.3; }
#invAreaTabsWrap { margin-bottom: 0; }
#invAreaTabsWrap .tabs { margin-bottom: 1rem; }

/* ===== SKELETON LOADING ===== */
.skeleton-cell {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg,
    var(--color-border) 25%,
    var(--color-bg) 50%,
    var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===== STOCK TABLE HIGHLIGHTING ===== */
.row-highlight {
  background: var(--color-primary-light) !important;
  font-weight: 600;
}
.row-dimmed {
  opacity: 0.45;
}