:root {
  --card-bg: #ffffff;
  --body-bg: #f4f7f6;
  --text-color: #212529;
  --border-color: #dee2e6;
}

body {
  background-color: var(--body-bg);
  color: var(--text-color);
  transition: background-color .2s ease, color .2s ease;
}

body.dark-mode {
  --card-bg: #1e2126;
  --body-bg: #14161a;
  --text-color: #e9ecef;
  --border-color: #33373d;
}

body.dark-mode .card,
body.dark-mode .table,
body.dark-mode .modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
}

body.dark-mode .table {
  --bs-table-bg: var(--card-bg);
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--border-color);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #2a2e35;
  color: var(--text-color);
  border-color: var(--border-color);
}

body.dark-mode .form-control::placeholder { color: #8a8f98; }

.card { border: none; border-radius: .75rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.status-badge { font-size: .78rem; padding: .35em .7em; border-radius: 999px; }

.stat-card { border-radius: 1rem; }
.stat-card .icon { font-size: 1.8rem; opacity: .85; }

.workflow-step { text-align: center; flex: 1; min-width: 110px; }
.workflow-step .circle {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto .35rem; background: #e9ecef; color: #6c757d; font-weight: 600;
}
.workflow-step.active .circle { background: #198754; color: #fff; }
.workflow-step.done .circle { background: #20c997; color: #fff; }
.workflow-step .label { font-size: .78rem; color: #6c757d; }

.timeline { list-style: none; padding-left: 0; }
.timeline li { position: relative; padding-left: 1.6rem; padding-bottom: 1.1rem; border-left: 2px solid #dee2e6; margin-left: .5rem; }
.timeline li:last-child { border-color: transparent; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #198754; }

.product-row { border: 1px dashed var(--border-color); border-radius: .6rem; padding: .9rem; margin-bottom: .8rem; }

@media print {
  nav, footer, .no-print { display: none !important; }
}