/* ═══════════════════════════════════════════════════════════════
   Rechnungstool — App-specific styles
   ALMAS Industries Design System Extension
   ═══════════════════════════════════════════════════════════════ */

/* ─── NAV BADGES ─── */
.nav-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.nav-badge:empty { display: none; }

.nav-badge-danger {
  background: var(--danger);
  color: #fff;
}

/* ─── ALERT BAR ─── */
.alert-bar {
  padding: 12px var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.alert-bar a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.alert-bar-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.alert-bar-danger::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── QUICK FILTER BUTTONS ─── */
.quick-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.quick-filter {
  padding: 6px 14px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-filter:hover {
  border-color: var(--almas-red);
  color: var(--almas-red);
}

.quick-filter.active {
  background: var(--almas-red);
  color: #fff;
  border-color: var(--almas-red);
}

/* ─── BATCH ACTIONS BAR ─── */
.batch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background: var(--info-bg);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--info);
}

#batchCount { margin-right: auto; }

/* ─── COLLAPSIBLE UPLOAD SECTION ─── */
.collapsible-section {
  margin-bottom: var(--space-md);
}

.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.collapsible-toggle:hover { color: var(--almas-red); }

.collapsible-toggle svg {
  transition: transform var(--transition-fast);
}

.collapsible-toggle.open svg {
  transform: rotate(180deg);
}

/* ─── UPLOAD ZONES ─── */
.almas-upload-zone { cursor: pointer; }
.almas-upload-zone:active { transform: scale(0.995); }

.upload-progress {
  margin-top: var(--space-md);
}

.upload-progress .upload-status {
  font-size: 13px;
  color: var(--text-secondary);
}

.upload-progress .progress-bar {
  height: 4px;
  background: var(--border-secondary);
  border-radius: 2px;
  margin-top: var(--space-sm);
  overflow: hidden;
}

.upload-progress .progress-fill {
  height: 100%;
  background: var(--almas-red);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}

/* ─── CHARTS ─── */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ─── ANALYSE / AUSWERTUNGEN ─── */
.analyse-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-sm);
  align-items: start;
}
.heatmap-wrap { overflow-x: auto; padding: 4px; }
.heatmap-table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.heatmap-table th, .heatmap-table td { padding: 6px 10px; text-align: right; border: 1px solid var(--border-color, #e5e5e7); }
.heatmap-table th { background: #f5f5f7; font-weight: 600; white-space: nowrap; }
.heatmap-table th.row-head, .heatmap-table td.row-head { text-align: left; background: #f5f5f7; font-weight: 600; position: sticky; left: 0; z-index: 1; white-space: nowrap; }
.heatmap-table td.zero { color: #c0c0c5; }
.heatmap-table tfoot td { background: #fafafa; font-weight: 600; }
.bar-chart-col.clickable { cursor: pointer; }
.bar-chart-col.clickable:hover .bar-chart-bar { opacity: 0.75; }
.trend-up { color: #c00; }
.trend-down { color: #060; }
.trend-flat { color: #888; }

/* Bar chart (monthly) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  height: 200px;
  padding-top: var(--space-md);
}

.bar-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart-bar {
  width: 100%;
  max-width: 48px;
  background: var(--almas-red);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height var(--transition-slow);
  min-height: 4px;
  position: relative;
}

.bar-chart-bar:hover { opacity: 0.85; }

.bar-chart-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
}

.bar-chart-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Horizontal bars (category) */
.h-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 10px;
}

.h-bar-label {
  width: 120px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
  text-align: right;
}

.h-bar-track {
  flex: 1;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.h-bar-fill {
  height: 100%;
  background: var(--almas-red);
  border-radius: var(--radius-sm);
  transition: width var(--transition-slow);
  min-width: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.h-bar-fill:nth-child(1) { background: var(--almas-red); }

.h-bar-amount {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: var(--space-sm);
  white-space: nowrap;
  flex-shrink: 0;
  width: 90px;
}

/* Alternate bar colors */
.h-bar-row:nth-child(2n) .h-bar-fill { background: var(--almas-purple); }
.h-bar-row:nth-child(3n) .h-bar-fill { background: var(--almas-green); }
.h-bar-row:nth-child(4n) .h-bar-fill { background: var(--warning); }
.h-bar-row:nth-child(5n) .h-bar-fill { background: var(--info); }

/* ─── AMOUNTS ─── */
.amount {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ─── CLICKABLE ROWS ─── */
.clickable { cursor: pointer; }
.clickable:hover { background: var(--bg-tertiary); }

/* ─── STATUS BADGES ─── */
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-approved, .badge-success { background: var(--success-bg); color: var(--success); }
.badge-rejected, .badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-overdue { background: var(--danger-bg); color: var(--danger); font-weight: 700; }

/* ─── LOADING CELL ─── */
.loading-cell { padding: 32px !important; }

/* ─── PDF PREVIEW ─── */
.pdf-preview-inline {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-tertiary);
}

.pdf-iframe {
  width: 100%;
  height: 500px;
  border: none;
}

.pdf-modal {
  max-width: 90vw;
  width: 900px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.pdf-iframe-full {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* ─── AUDIT LOG ─── */
.audit-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-secondary);
  font-size: 13px;
}

.audit-item:last-child { border-bottom: none; }

.audit-item .time {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ─── SPLIT ROWS ─── */
.split-label { font-weight: 600 !important; }

.split-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: 6px;
}

.split-row select,
.split-row input {
  padding: 8px 10px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-family);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.split-row select { flex: 2; }
.split-row input[type="number"] { flex: 1; }
.split-row input[type="text"] { flex: 1.5; }

.split-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
}

.split-remove:hover { color: var(--almas-red); }

/* ─── VENDOR AUTOCOMPLETE ─── */
.almas-form-group { position: relative; }

.vendor-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 180px;
  overflow-y: auto;
  z-index: 500;
}

.vendor-autocomplete .ac-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.vendor-autocomplete .ac-item:hover {
  background: var(--bg-tertiary);
}

/* ─── DETAIL SECTION ACCENT ─── */
.almas-detail-section h3 {
  color: var(--almas-red);
}

/* ─── OVERDUE VIEW ─── */
.overdue-days {
  font-weight: 700;
  color: var(--danger);
}

.due-date-overdue {
  color: var(--danger);
  font-weight: 600;
}

/* ─── PAGINATION ─── */
.pagination-bar {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
}

.table-row-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ─── Row-Action 2x2 Grid ─── */
.row-actions-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  width: max-content;
}

.row-actions-grid .almas-btn-sm {
  padding: 4px 8px;
  min-width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── EXCEL-STYLE TABLE: SORT + FILTER ─── */
.almas-table-excel {
  width: 100%;
  table-layout: fixed;
}

.almas-table-excel th,
.almas-table-excel td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  padding-right: 8px;
}

/* Spaltenbreiten — Summe ~1010px, fits in 1152er Container */
.almas-table-excel th:nth-child(1),
.almas-table-excel td:nth-child(1) { width: 32px; }    /* Checkbox */
.almas-table-excel th:nth-child(2),
.almas-table-excel td:nth-child(2) { width: 100px; }   /* Belegnr */
.almas-table-excel th:nth-child(3),
.almas-table-excel td:nth-child(3) { width: 120px; }   /* Rechnungsnr */
.almas-table-excel th:nth-child(4),
.almas-table-excel td:nth-child(4) { width: 180px; }   /* Lieferant */
.almas-table-excel th:nth-child(5),
.almas-table-excel td:nth-child(5) { width: 90px; }    /* Netto */
.almas-table-excel th:nth-child(6),
.almas-table-excel td:nth-child(6) { width: 90px; }    /* Brutto */
.almas-table-excel th:nth-child(7),
.almas-table-excel td:nth-child(7) { width: 100px; }   /* Status */
.almas-table-excel th:nth-child(8),
.almas-table-excel td:nth-child(8) { width: 110px; }   /* Freigabe */
.almas-table-excel th:nth-child(9),
.almas-table-excel td:nth-child(9) { width: 100px; }   /* Datum */
.almas-table-excel th:nth-child(10),
.almas-table-excel td:nth-child(10) { width: 80px; }   /* Aktionen */

.almas-table-excel th.col-header .col-sortable {
  font-size: 11px;
}

.col-filter-btn {
  margin-left: 2px;
  padding: 0 2px;
}

.almas-table-container {
  overflow-x: auto;
}

/* Invoices-View Container darf volle Breite nehmen */
#invoicesView {
  max-width: none;
}

#invoicesView .almas-table-container {
  width: 100%;
}

.almas-table-excel thead th.col-header {
  white-space: nowrap;
  user-select: none;
}

.almas-table-excel thead th.col-header .col-sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.almas-table-excel thead th.col-header .col-sortable:hover {
  color: var(--almas-red);
}

.col-sort-arrow {
  font-size: 10px;
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}

.col-sort-arrow.active {
  opacity: 1;
  color: var(--almas-red);
}

.col-filter-btn {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-sm);
}

.col-filter-btn:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}

.col-filter-btn.active {
  opacity: 1;
  color: var(--almas-red);
  background: rgba(201, 16, 16, 0.1);
}

/* Dropdown */
.col-filter-dropdown {
  position: fixed;
  z-index: 1000;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
  min-width: 240px;
  max-width: 320px;
}

.col-filter-dropdown-inner {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.col-filter-sort {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 8px;
}

.col-filter-sort-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.col-filter-sort-btn:hover {
  border-color: var(--almas-red);
  color: var(--almas-red);
}

.col-filter-search {
  font-size: 13px;
  padding: 6px 10px;
}

.col-filter-toggle-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 8px;
  cursor: pointer;
}

.col-filter-values {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.col-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.col-filter-item:hover {
  background: var(--bg-tertiary);
}

.col-filter-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-filter-count {
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.col-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid var(--border-secondary);
  padding-top: 8px;
}

/* ─── THREE COL FORM ROW ─── */
.three-col {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* ─── TOOLBAR FILTER WIDTHS ─── */
.almas-toolbar .almas-input,
.almas-toolbar .almas-select {
  max-width: 180px;
}

/* ═══ RESPONSIVE ═══ */

@media (max-width: 1024px) {
  .charts-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  .split-row { flex-wrap: wrap; }
  .split-row select,
  .split-row input { min-width: 100px; }

  .almas-toolbar {
    flex-direction: column;
  }

  .almas-toolbar .almas-input,
  .almas-toolbar .almas-select {
    max-width: 100% !important;
    width: 100%;
  }

  .charts-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr !important; }

  .bar-chart {
    height: 160px;
    gap: var(--space-sm);
  }

  .h-bar-label { width: 80px; font-size: 12px; }

  .quick-filters { gap: 4px; }
  .quick-filter { font-size: 12px; padding: 5px 10px; }

  .batch-bar { flex-wrap: wrap; }

  .pdf-modal {
    max-width: 100%;
    width: 100%;
    height: 90vh;
  }
}

@media (max-width: 480px) {
  .bar-chart { height: 120px; }
}