/* ── Layout ─────────────────────────────────────────────────────────────── */

body {
  background-color: #0d1117;
  color: #e6edf3;
  min-height: 100vh;
}

.wrapper {
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  width: 220px;
  min-height: 100vh;
  background-color: #161b22;
  border-right: 1px solid #30363d;
  flex-shrink: 0;
}

.sidebar-brand {
  color: #e6edf3;
}

.sidebar-brand:hover {
  color: #58a6ff;
}

.sidebar .nav-link {
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar .nav-link:hover:not(.active) {
  background-color: #21262d;
  color: #e6edf3 !important;
}

.sidebar .nav-link.active {
  background-color: #1f6feb;
  color: #fff !important;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  background-color: #161b22;
  min-height: 52px;
}

/* ── Main content ────────────────────────────────────────────────────────── */

.main-content {
  background-color: #0d1117;
  overflow-y: auto;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
}

.card-header {
  background-color: #1c2128;
  border-bottom: 1px solid #30363d;
  padding: 0.875rem 1.25rem;
}

.card-footer {
  padding: 0.875rem 1.25rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

.table-header th {
  background-color: #1c2128;
  color: #8b949e;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #30363d;
}

.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #21262d;
  vertical-align: middle;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-control-dark,
.form-select-dark {
  background-color: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  border-radius: 6px;
}

.form-control-dark:focus,
.form-select-dark:focus {
  background-color: #0d1117;
  border-color: #58a6ff;
  color: #e6edf3;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.25);
}

.form-control-dark::placeholder {
  color: #484f58;
}

.form-check-input {
  background-color: #21262d;
  border-color: #30363d;
}

.form-check-input:checked {
  background-color: #1f6feb;
  border-color: #1f6feb;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.status-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.6em;
  border-radius: 4px;
}

/* ── Nav tabs ────────────────────────────────────────────────────────────── */

.nav-tabs {
  border-bottom: 1px solid #30363d;
}

.nav-tabs .nav-link {
  color: #8b949e;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 0.5rem 1rem;
  transition: color 0.15s;
}

.nav-tabs .nav-link:hover {
  color: #e6edf3;
  border-bottom-color: #58a6ff;
}

.nav-tabs .nav-link.active {
  color: #58a6ff;
  border-bottom-color: #58a6ff;
  background: none;
}

/* ── Misc ────────────────────────────────────────────────────────────────── */

code {
  background-color: #1c2128;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Marketplace badges ───────────────────────────────────────────────────── */

.badge-amazon   { background-color: #ff9900; color: #111; }
.badge-walmart  { background-color: #0071ce; color: #fff; }
.badge-ebay     { background-color: #e53238; color: #fff; }
.badge-michaels { background-color: #e8572a; color: #fff; }
.badge-shopify  { background-color: #96bf48; color: #111; }
.badge-manual   { background-color: #21262d; color: #8b949e; border: 1px solid #30363d; }

/* ── Order status badges ─────────────────────────────────────────────────── */

.status-pending         { background-color: #21262d; color: #8b949e; }
.status-verified        { background-color: rgba(31, 111, 235, 0.15); color: #58a6ff; }
.status-packaged        { background-color: rgba(139, 92, 246, 0.12); color: #c4b5fd; }
.status-label_purchased { background-color: rgba(139, 92, 246, 0.20); color: #a78bfa; }
.status-shipped         { background-color: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.status-voided          { background-color: rgba(239, 68, 68, 0.15);  color: #f87171; }
.status-cancelled       { background-color: rgba(239, 68, 68, 0.10);  color: #f87171; }
.status-removed         { background-color: #21262d; color: #484f58; }
.status-error           { background-color: rgba(239, 68, 68, 0.20);  color: #f87171; }

/* ── Ship-by date urgency ────────────────────────────────────────────────── */

.urgency-overdue { color: #ef4444; font-weight: 600; }
.urgency-today   { color: #f97316; font-weight: 600; }
.urgency-soon    { color: #eab308; }

tr.urgency-overdue td { background-color: rgba(239, 68, 68, 0.12) !important; }
tr.urgency-today   td { background-color: rgba(249, 115, 22, 0.12) !important; }
tr.urgency-soon    td { background-color: rgba(234, 179, 8, 0.06) !important; }

/* ── Stat cards (dashboard) ──────────────────────────────────────────────── */

.stat-card {
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.stat-card .stat-number {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #e6edf3;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Health indicators (card left border) ────────────────────────────────── */

.health-ok    { border-left: 3px solid #22c55e; }
.health-warn  { border-left: 3px solid #f59e0b; }
.health-error { border-left: 3px solid #ef4444; background-color: rgba(239, 68, 68, 0.04); }

/* ── Modal ───────────────────────────────────────────────────────────────── */

.modal-content {
  background-color: #161b22;
  border: 1px solid #30363d;
}

.modal-header {
  background-color: #1c2128;
  border-bottom: 1px solid #30363d;
}

.modal-footer {
  background-color: #1c2128;
  border-top: 1px solid #30363d;
}