/* ── DevDad palette ──────────────────────────────────────────── */
:root {
  --card-radius: 0.75rem;
  --dd-bg:      #0f172a;
  --dd-nav:     #111827;
  --dd-card:    #1e293b;
  --dd-accent:  #38bdf8;
  --dd-text:    #f1f5f9;
  --dd-muted:   #cbd5e1;
  --dd-border:  #334155;
}

/* Bootstrap 5.3 dark-mode variable overrides */
[data-bs-theme="dark"] {
  --bs-body-bg:          var(--dd-bg);
  --bs-body-color:       var(--dd-text);
  --bs-secondary-color:  var(--dd-muted);
  --bs-secondary-bg:     var(--dd-card);
  --bs-tertiary-bg:      var(--dd-card);
  --bs-card-bg:          var(--dd-card);
  --bs-modal-bg:         var(--dd-card);
  --bs-primary:          var(--dd-accent);
  --bs-primary-rgb:      56, 189, 248;
  --bs-link-color:       var(--dd-accent);
  --bs-link-hover-color: #7dd3fc;
  --bs-border-color:     var(--dd-border);
  --bs-emphasis-color:   #fff;
}

body {
  background-color: var(--dd-bg) !important;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar { background-color: var(--dd-nav) !important; }

/* ── Primary colour overrides ────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                 var(--dd-accent);
  --bs-btn-border-color:       var(--dd-accent);
  --bs-btn-color:              var(--dd-bg);
  --bs-btn-hover-bg:           #7dd3fc;
  --bs-btn-hover-border-color: #7dd3fc;
  --bs-btn-hover-color:        var(--dd-bg);
  --bs-btn-active-bg:          #7dd3fc;
  --bs-btn-active-color:       var(--dd-bg);
  --bs-btn-disabled-bg:        var(--dd-accent);
  --bs-btn-disabled-border-color: var(--dd-accent);
}

.btn-outline-primary {
  --bs-btn-color:         var(--dd-accent);
  --bs-btn-border-color:  var(--dd-accent);
  --bs-btn-hover-bg:      var(--dd-accent);
  --bs-btn-hover-color:   var(--dd-bg);
  --bs-btn-active-bg:     var(--dd-accent);
  --bs-btn-active-color:  var(--dd-bg);
}

.text-primary           { color: var(--dd-accent) !important; }
.bg-primary             { background-color: var(--dd-accent) !important; }

/* Warning badge text readable on yellow */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .text-dark { color: #0f172a !important; }

/* ── Item cards ──────────────────────────────────────────────── */
.item-card {
  border: none;
  border-radius: var(--card-radius);
  background: var(--dd-card);
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
  color: var(--dd-text);
}
.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.item-card .card-body,
.item-card .card-footer {
  background: transparent;
  border-color: var(--dd-border);
}
.item-card .card-actions {
  opacity: 0;
  transition: opacity .15s;
}
.item-card:hover .card-actions { opacity: 1; }
.item-card .card-actions .btn-link { font-size: .85rem; line-height: 1; }
.item-card .card-cat-bar   { height: 4px; width: 100%; }
.item-card .qty-badge      { font-size: 1.4rem; font-weight: 700; }
.item-card .card-title     { color: var(--dd-text); }
.item-card.low-stock       { border-left: 4px solid #ffc107; }
.item-card.out-of-stock    { border-left: 4px solid #dc3545; opacity: .8; }
.item-card.reorder-flag    { border-left: 4px dashed #fd7e14; }

/* ── QR canvas in detail modal ───────────────────────────────── */
#qrCanvas { display: block; margin: 0 auto; }

/* ── QR canvas white background (needed on dark modal) ────────── */
#qrCanvas canvas,
#qrCanvas img { background: #fff; border-radius: 4px; }

/* ── Scanner ─────────────────────────────────────────────────── */
#scannerRegion        { width: 100%; min-height: 280px; }
#scannerRegion video  { border-radius: 0; }

/* ── Print: suppress everything (labels print in their own window) */
@media print { body { display: none !important; } }

/* ── Label designer ──────────────────────────────────────────── */
.label-type-card {
  display: flex;
  align-items: flex-start;
  border: 2px solid var(--dd-border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.label-type-card.active {
  border-color: var(--dd-accent);
  background: rgba(56, 189, 248, .1);
}
.label-type-card label { cursor: pointer; }

/* Preview container — white background intentional (label paper is white) */
.label-preview-wrap {
  border: 1.5px solid var(--dd-border);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.label-preview-wrap.qr-tag  { width: 144px; height: 144px; }
.label-preview-wrap.inv-tag { width: 306px; height: 144px; }
.label-preview-wrap.fil-tag { width: 216px; height: 108px; }
.label-preview-wrap * { font-family: Arial, sans-serif; }

/* ── Pagination ──────────────────────────────────────────────── */
#pagination .page-link { cursor: pointer; }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 576px) { .navbar-brand { font-size: .95rem; } }

/* ── Transaction history table ───────────────────────────────── */
.history-table td, .history-table th { font-size: .85rem; padding: .4rem .6rem; }
.badge-in  { background: #198754; }
.badge-out { background: #dc3545; }
.badge-adj { background: #6c757d; }