/* ============================================================
   iamNK Catalogue — DARK theme overlay
   Loaded only when theme = dark (data-theme-sheet="dark").
   Strategy: override the CSS custom properties defined in
   catalogue.css so the whole UI cascades to dark, then patch
   the few hardcoded light surfaces.
   ============================================================ */

:root {
  /* Re-tuned grayscale ramp for dark surfaces */
  --gray-50:  #161b27;
  --gray-100: #1b2130;
  --gray-200: #232a3b;
  --gray-300: #364056;
  --gray-400: #6b7691;
  --gray-500: #8a94ad;
  --gray-600: #aeb6c9;
  --gray-700: #c7cddb;
  --gray-800: #e2e6f0;
  --gray-900: #f4f6fb;

  /* Surfaces & text */
  --bg-body: #0c1018;
  --bg-card: #141a26;
  --text-primary: #f1f4fb;
  --text-secondary: #b7c0d4;
  --text-muted: #7a8499;
  --border-color: #262e40;

  /* Tints stay but read well on dark */
  --primary-light: rgba(234, 88, 12, 0.16);
  --success-light: rgba(22, 163, 74, 0.16);
  --warning-light: rgba(217, 119, 6, 0.16);
  --danger-light: rgba(220, 38, 38, 0.16);
  --info-light: rgba(8, 145, 178, 0.16);

  /* Shadows: deeper, wider on dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 2px 6px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.6);
}

/* ── Body: deep gradient with a subtle accent glow ───────────── */
body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(234, 88, 12, 0.10), transparent 60%),
    radial-gradient(900px 560px at 0% 110%, rgba(234, 88, 12, 0.06), transparent 55%),
    #0c1018;
  color: var(--text-primary);
}

/* Watermark: faint warm tint instead of near-black */
.watermark { color: rgba(255, 255, 255, 0.022); }

/* ── Header: darker glass ────────────────────────────────────── */
.catalogue-header {
  background: rgba(14, 18, 28, 0.78);
  border-bottom-color: var(--border-color);
}
.header-brand .brand-text h1 { color: var(--text-primary); }
.header-brand .brand-text p { color: var(--text-secondary); }

/* Search bar */
.search-bar {
  background: var(--gray-100);
  border-color: var(--border-color);
}
.search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.18);
}
.search-bar input { color: var(--text-primary); }
.search-bar input::placeholder { color: var(--text-muted); }
.search-icon { color: var(--text-muted); }

/* Header icon buttons */
.btn-brands, .btn-cart, .btn-theme-toggle {
  background: var(--gray-100);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.btn-brands:hover, .btn-cart:hover, .btn-theme-toggle:hover {
  background: var(--gray-200);
  border-color: var(--primary);
}
.cart-badge { background: var(--primary); }

/* ── Working hours banner ────────────────────────────────────── */
.working-hours-banner {
  background: var(--gray-100);
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}
.working-hours-status.open { color: var(--success); }

/* ── Company / category nav ──────────────────────────────────── */
.company-nav {
  background: rgba(14, 18, 28, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-color);
}
.company-pill {
  background: var(--gray-100);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.company-pill:hover {
  background: var(--gray-200);
  color: var(--text-primary);
}
.company-pill.active {
  background: linear-gradient(135deg, var(--primary), #f97316);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.35);
}

/* ── Category section titles ─────────────────────────────────── */
.category-title { color: var(--text-primary); border-bottom-color: var(--primary); }
.category-title .category-count { color: var(--text-muted); }

/* ── Product cards ───────────────────────────────────────────── */
.product-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: var(--shadow);
}
.product-card:hover {
  border-color: rgba(234, 88, 12, 0.5);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(234,88,12,0.25);
}
/* Image placeholder background — softer on dark */
.product-card-image {
  background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
}
.product-card-image svg { color: var(--gray-300); }
.product-card-name { color: var(--text-primary); }
.product-card-desc { color: var(--text-muted); }
.product-card-category { color: #fb923c; }
.price-current { color: var(--text-primary); }
.price-original { color: var(--text-muted); }

/* Stock / availability labels */
.product-stock.in-stock { color: var(--success); }
.product-stock.low-stock { color: var(--warning); }
.product-stock.out-stock { color: var(--danger); }

/* Product buttons */
.btn-add-cart {
  background: linear-gradient(135deg, var(--primary), #f97316);
  color: #fff;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}
.btn-add-cart:hover { box-shadow: 0 8px 20px rgba(234, 88, 12, 0.45); }
.btn-add-proforma {
  background: var(--gray-200);
  color: var(--text-primary);
}
.btn-add-proforma:hover { background: var(--gray-300); }

/* Brand group headers (company-grouped products) */
.company-group-header {
  background: linear-gradient(135deg, var(--gray-100), transparent);
  border-color: var(--border-color);
}
.company-group-name { color: var(--text-primary); }
.company-group-count { color: var(--text-muted); }

/* ── Empty / loading states ──────────────────────────────────── */
.empty-state { color: var(--text-secondary); }
.empty-state h3 { color: var(--text-primary); }
.spinner { border-color: var(--gray-300); border-top-color: var(--primary); }

/* ── Cart sidebar ────────────────────────────────────────────── */
.cart-sidebar {
  background: var(--bg-card);
  border-left-color: var(--border-color);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.cart-header { border-bottom-color: var(--border-color); }
.cart-header h2 { color: var(--text-primary); }
.cart-empty { color: var(--text-muted); }
.cart-empty svg { color: var(--gray-300); }
.cart-item {
  background: var(--gray-100);
  border-color: var(--border-color);
}
.cart-item-name { color: var(--text-primary); }
.cart-item-price { color: var(--primary); }
.cart-item-qty-btn {
  background: var(--gray-200);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.cart-item-qty-btn:hover { background: var(--gray-300); }
.cart-summary { border-top-color: var(--border-color); }
.summary-row { color: var(--text-secondary); }
.summary-row.total { color: var(--text-primary); }
.cart-actions { border-top-color: var(--border-color); }
.customer-info input,
.customer-info select {
  background: var(--gray-100);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.customer-info input::placeholder { color: var(--text-muted); }
.cart-mode-tabs { border-bottom-color: var(--border-color); }
.mode-tab { color: var(--text-muted); }
.mode-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Cart action buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #f97316);
  color: #fff;
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(234,88,12,0.4); }
.btn-secondary {
  background: var(--gray-200);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover { background: var(--gray-300); }
.btn-accent {
  background: linear-gradient(135deg, var(--success), #22c55e);
  color: #fff;
}
.btn-accent:hover { box-shadow: 0 8px 22px rgba(22,163,74,0.4); }
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-outline:hover { background: var(--gray-100); }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay { background: rgba(4, 7, 13, 0.72); backdrop-filter: blur(4px); }
.modal {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: var(--shadow-xl);
}
.modal-header { border-bottom-color: var(--border-color); }
.modal-header h2, .modal-header h3 { color: var(--text-primary); }
.btn-modal-close {
  background: var(--gray-100);
  color: var(--text-secondary);
}
.btn-modal-close:hover { background: var(--gray-200); color: var(--text-primary); }
.modal-body { color: var(--text-secondary); }
.modal-footer { border-top-color: var(--border-color); }

/* Product detail modal */
.product-detail-meta { color: var(--text-muted); }
.product-detail-info h3 { color: var(--text-primary); }
.qr-code-info { color: var(--text-secondary); }

/* After-hours modal */
.after-hours-content { color: var(--text-secondary); }

/* ── Promo sidebar ───────────────────────────────────────────── */
.promo-sidebar {
  background: var(--bg-card);
  border-left-color: var(--border-color);
  box-shadow: -16px 0 48px rgba(0,0,0,0.5);
}
.promo-sidebar-toggle {
  background: linear-gradient(135deg, var(--primary), #f97316);
  color: #fff;
}
.promo-sidebar-header { border-bottom-color: var(--border-color); color: var(--text-primary); }
.promo-card {
  background: var(--gray-100);
  border-color: var(--border-color);
}
.promo-card:hover { border-color: var(--primary); }

/* ── Toasts ──────────────────────────────────────────────────── */
.toast {
  background: var(--gray-100);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

/* ── Inputs / selects (any native form controls) ─────────────── */
input, select, textarea {
  background: var(--gray-100);
  border-color: var(--border-color);
  color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}

/* ── Scrollbars (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; border: 3px solid var(--bg-body); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }