/* static/css/mk-theme.css */
:root{
  /* Brand / tokens */
  --mk-accent:#2196F3;
  --mk-bg:#F6F8FB;
  --mk-surface:#FFFFFF;
  --mk-border:#E7ECF3;
  --mk-text:#0F172A;
  --mk-muted:#475569;
  --mk-shadow-soft: 0 10px 24px rgba(15,23,42,.05);

  --mk-radius-card:16px;
  --mk-radius-input:12px;
  --mk-radius-pill:999px;

  /* Bootstrap variable nudges */
  --bs-primary: var(--mk-accent);
  --bs-primary-rgb: 33,150,243;
  --bs-link-color: var(--mk-accent);
  --bs-link-hover-color: #1d84d9;
  --bs-border-color: var(--mk-border);
  --bs-focus-ring-color: rgba(33,150,243,.35);

  --bs-body-bg: var(--mk-bg);
  --bs-body-color: var(--mk-text);
}

/* ✅ Dark mode variables */
html[data-bs-theme="dark"]{
  --mk-bg:#0B1220;
  --mk-surface:#0F172A;
  --mk-border: rgba(148,163,184,.18);
  --mk-text:#E2E8F0;
  --mk-muted:#94A3B8;
  --mk-shadow-soft: 0 12px 26px rgba(0,0,0,.35);

  --bs-body-bg: var(--mk-bg);
  --bs-body-color: var(--mk-text);
  --bs-border-color: var(--mk-border);
  --bs-secondary-color: var(--mk-muted);
  --bs-tertiary-color: rgba(226,232,240,.72);
  --bs-focus-ring-color: rgba(33,150,243,.45);
}

body{
  background: var(--mk-bg);
  color: var(--mk-text);
}

/* ✅ Reusable “surface” card */
.mk-surface{
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-card);
  box-shadow: var(--mk-shadow-soft);
}

.mk-muted{ color: var(--mk-muted) !important; }

/* ✅ Forms */
.form-control, .form-select, .input-group-text{
  border-color: var(--mk-border) !important;
  border-radius: var(--mk-radius-input) !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text{
  background-color: rgba(255,255,255,.04) !important;
  color: var(--mk-text) !important;
}

/* ✅ Icon chip */
.mk-iconchip{
  width: 40px; height: 40px;
  border-radius: var(--mk-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(33,150,243,0.12);
  border: 1px solid rgba(33,150,243,0.25);
  color: var(--mk-accent);
}

/* -------------------------------------------------------
   ✅ IMPORTANT FIXES (this is why your cards stayed white)
   ------------------------------------------------------- */

/* Make Bootstrap components follow our surface colors */
.card, .dropdown-menu, .modal-content, .offcanvas, .list-group-item{
  background: var(--mk-surface) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

/* If your shop/category cards use bg-white/bg-light/text-dark → fix in dark mode */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light{
  background-color: var(--mk-surface) !important;
}

html[data-bs-theme="dark"] .text-dark{
  color: var(--mk-text) !important;
}

html[data-bs-theme="dark"] .text-muted{
  color: var(--mk-muted) !important;
}

/* Footer always follows theme */
footer, .mk-footer{
  background: var(--mk-surface) !important;
  border-top: 1px solid var(--mk-border) !important;
  color: var(--mk-text) !important;
}

/* Nice hover for category tiles */
.mk-tile{
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mk-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(33,150,243,.35) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
}

/* -------------------------------------------------------
   DARK MODE PATCH for SHOP / CATEGORY / PRODUCT CARDS
   (Fixes "cards stay white" + footer not changing)
------------------------------------------------------- */

/* If your templates use Bootstrap bg utilities, force them to follow theme */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body,
html[data-bs-theme="dark"] .bg-body-tertiary,
html[data-bs-theme="dark"] .bg-body-secondary{
  background-color: var(--mk-surface) !important;
}

/* ✅ Catch common inline white backgrounds (very common in ecommerce cards) */
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background-color:#fff"],
html[data-bs-theme="dark"] [style*="background-color: #fff"],
html[data-bs-theme="dark"] [style*="background:white"],
html[data-bs-theme="dark"] [style*="background: white"],
html[data-bs-theme="dark"] [style*="background-color:white"],
html[data-bs-theme="dark"] [style*="background-color: white"]{
  background-color: var(--mk-surface) !important;
}

/* ✅ Force card-like containers to use theme colors */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .mk-surface,
html[data-bs-theme="dark"] .shadow-sm,
html[data-bs-theme="dark"] .shadow,
html[data-bs-theme="dark"] .shadow-lg{
  background-color: var(--mk-surface) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

/* ✅ Fix titles/prices inside cards if they inherited light text */
html[data-bs-theme="dark"] .card .card-title,
html[data-bs-theme="dark"] .card .card-text,
html[data-bs-theme="dark"] .card a:not(.btn){
  color: var(--mk-text) !important;
}

html[data-bs-theme="dark"] .text-muted{
  color: var(--mk-muted) !important;
}

/* ✅ Footer always follows theme */
html[data-bs-theme="dark"] footer{
  background: var(--mk-surface) !important;
  border-top: 1px solid var(--mk-border) !important;
  color: var(--mk-text) !important;
}