/* ============================================================
   SMILE SHOPPING / COMMERCE MASTER UI V2
   Customer Home screenshot = visual source of truth.
   Purpose: same design language across admin without changing logic.
   ============================================================ */

:root {
  --sm-navy-950:#062454;
  --sm-navy-900:#072b63;
  --sm-navy-850:#093472;
  --sm-navy-800:#0b3c83;
  --sm-blue:#0c4b9c;
  --sm-yellow:#ffbd08;
  --sm-yellow-2:#f7b900;
  --sm-bg:#f7f7fa;
  --sm-surface:#ffffff;
  --sm-surface-soft:#f2f4f8;
  --sm-text:#0b2347;
  --sm-muted:#738094;
  --sm-border:#d9dde6;
  --sm-bottom:#f2eafa;
  --sm-shadow:0 2px 4px rgba(6,36,84,.06), 0 12px 28px rgba(6,36,84,.05);
  --sm-radius-xl:34px;
  --sm-radius-lg:28px;
  --sm-radius-md:22px;
  --sm-radius-sm:16px;
  --sm-max:1480px;
}

html {
  background:var(--sm-bg);
  color-scheme:light;
  -webkit-text-size-adjust:100%;
}

body.commerce-master-ui-v2 {
  margin:0 !important;
  background:var(--sm-bg) !important;
  color:var(--sm-text) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.commerce-master-ui-v2 *,
body.commerce-master-ui-v2 *::before,
body.commerce-master-ui-v2 *::after {
  box-sizing:border-box;
}

body.commerce-master-ui-v2 img,
body.commerce-master-ui-v2 svg {
  max-width:100%;
}

/* ---------- shared typography ---------- */
body.commerce-master-ui-v2 h1,
body.commerce-master-ui-v2 h2,
body.commerce-master-ui-v2 h3,
body.commerce-master-ui-v2 .sm-title {
  color:var(--sm-text);
  font-weight:800;
  letter-spacing:-.025em;
}

body.commerce-master-ui-v2 .sm-muted,
body.commerce-master-ui-v2 .subtitle,
body.commerce-master-ui-v2 .sub-title,
body.commerce-master-ui-v2 .description {
  color:var(--sm-muted) !important;
}

/* ---------- login remains same family ---------- */
body.sm-login-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,189,8,.12), transparent 28%),
    linear-gradient(180deg,var(--sm-navy-900) 0 215px,var(--sm-bg) 215px) !important;
}
body.sm-login-page input,
body.sm-login-page select,
body.sm-login-page textarea {
  border:1.5px solid var(--sm-border) !important;
  border-radius:18px !important;
  min-height:54px;
}
body.sm-login-page button[type="submit"],
body.sm-login-page .primary,
body.sm-login-page .btn-primary {
  background:var(--sm-navy-900) !important;
  color:white !important;
  border-radius:18px !important;
  min-height:54px;
  border:0 !important;
}

/* ============================================================
   ADMIN: do NOT replace functional DOM. Only tag + style it.
   ============================================================ */

body.sm-admin-page {
  padding-bottom:106px !important;
  background:var(--sm-bg) !important;
}

/* Header visual DNA from customer home: deep navy, white content, yellow action */
body.sm-admin-page .sm-admin-header {
  background:linear-gradient(180deg,var(--sm-navy-950),var(--sm-navy-800)) !important;
  color:#fff !important;
  padding:28px 30px 26px !important;
  border:0 !important;
  box-shadow:none !important;
}

body.sm-admin-page .sm-admin-header,
body.sm-admin-page .sm-admin-header * {
  color:#fff;
}

body.sm-admin-page .sm-admin-header .sm-header-title {
  font-size:clamp(28px,5vw,42px) !important;
  line-height:1.06 !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  margin:0 0 8px !important;
  color:#fff !important;
}

body.sm-admin-page .sm-admin-header .sm-header-subtitle {
  font-size:clamp(15px,2.6vw,22px) !important;
  line-height:1.25 !important;
  color:rgba(255,255,255,.78) !important;
}

body.sm-admin-page .sm-admin-header a,
body.sm-admin-page .sm-admin-header button {
  font-weight:700;
}

body.sm-admin-page .sm-admin-header .sm-logout,
body.sm-admin-page .sm-admin-header [data-sm-logout="1"] {
  color:var(--sm-yellow) !important;
}

/* Content width / breathing room */
body.sm-admin-page .sm-admin-main {
  width:min(100%,var(--sm-max));
  margin:0 auto;
  padding:18px 30px 32px;
}

/* Command Center row: aligned like marketplace section headings */
body.sm-admin-page .sm-command-row {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:2px 0 18px !important;
}

body.sm-admin-page .sm-command-row .sm-command-title {
  margin:0 !important;
  font-size:clamp(30px,5.2vw,46px) !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
  color:var(--sm-text) !important;
}

body.sm-admin-page .sm-command-row .sm-command-subtitle {
  margin-top:9px !important;
  color:var(--sm-muted) !important;
  font-size:clamp(15px,2.6vw,21px) !important;
  line-height:1.3 !important;
}

body.sm-admin-page .sm-refresh {
  appearance:none;
  border:0 !important;
  background:transparent !important;
  color:var(--sm-navy-900) !important;
  font-weight:800 !important;
  font-size:clamp(16px,2.5vw,22px) !important;
  padding:10px 0 !important;
  white-space:nowrap;
}

/* Metrics = marketplace product-card DNA */
body.sm-admin-page .sm-metric-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px 18px !important;
}

body.sm-admin-page .sm-metric-card {
  background:var(--sm-surface) !important;
  border:1.5px solid var(--sm-border) !important;
  border-radius:var(--sm-radius-lg) !important;
  box-shadow:var(--sm-shadow) !important;
  min-height:176px !important;
  padding:26px 26px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  overflow:hidden !important;
}

body.sm-admin-page .sm-metric-label {
  color:var(--sm-muted) !important;
  font-size:clamp(16px,2.4vw,21px) !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

body.sm-admin-page .sm-metric-value {
  color:var(--sm-navy-900) !important;
  font-size:clamp(44px,7vw,64px) !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}

/* Optional emphasis uses same yellow brand accent as customer hero label */
body.sm-admin-page .sm-metric-card[data-sm-accent="1"] {
  border-color:rgba(255,189,8,.55) !important;
}
body.sm-admin-page .sm-metric-card[data-sm-accent="1"]::before {
  content:"";
  display:block;
  width:70px;
  height:8px;
  border-radius:999px;
  background:var(--sm-yellow);
  margin-bottom:18px;
}

/* Existing buttons/forms/tables under admin */
body.sm-admin-page input,
body.sm-admin-page select,
body.sm-admin-page textarea {
  border:1.5px solid var(--sm-border) !important;
  border-radius:18px !important;
  background:#fff !important;
  color:var(--sm-text) !important;
  min-height:50px;
}

body.sm-admin-page button,
body.sm-admin-page .btn,
body.sm-admin-page [role="button"] {
  border-radius:16px;
}

body.sm-admin-page table {
  width:100%;
  border-collapse:separate !important;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--sm-border);
  border-radius:22px;
  overflow:hidden;
}
body.sm-admin-page th {
  color:var(--sm-muted);
  font-weight:750;
  background:var(--sm-surface-soft);
}

/* ---------- existing bottom nav only; no invented routes ---------- */
body.sm-admin-page .sm-bottom-nav {
  position:fixed !important;
  z-index:9000 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:96px !important;
  padding:10px 12px max(10px,env(safe-area-inset-bottom)) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-around !important;
  gap:4px !important;
  background:rgba(242,234,250,.98) !important;
  border-top:1px solid rgba(11,35,71,.04) !important;
  box-shadow:0 -6px 24px rgba(6,36,84,.04) !important;
  backdrop-filter:blur(16px);
}

body.sm-admin-page .sm-bottom-nav a,
body.sm-admin-page .sm-bottom-nav button,
body.sm-admin-page .sm-bottom-nav .sm-nav-item {
  flex:1 1 0;
  min-width:0;
  max-width:150px;
  min-height:72px;
  border:0 !important;
  background:transparent !important;
  color:var(--sm-muted) !important;
  text-decoration:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  padding:5px 4px !important;
  font-size:14px !important;
  font-weight:650 !important;
  line-height:1.05 !important;
  text-align:center;
}

body.sm-admin-page .sm-bottom-nav .sm-nav-active,
body.sm-admin-page .sm-bottom-nav [aria-current="page"] {
  color:var(--sm-navy-900) !important;
  font-weight:800 !important;
}

body.sm-admin-page .sm-bottom-nav .sm-nav-active::before,
body.sm-admin-page .sm-bottom-nav [aria-current="page"]::before {
  content:"";
  position:absolute;
  width:72px;
  height:52px;
  border-radius:26px;
  background:#e8def8;
  z-index:-1;
  transform:translateY(-3px);
}

body.sm-admin-page .sm-bottom-nav a,
body.sm-admin-page .sm-bottom-nav button,
body.sm-admin-page .sm-bottom-nav .sm-nav-item {
  position:relative;
  z-index:1;
}

/* ---------- desktop / TV ---------- */
@media (min-width:760px) {
  body.sm-admin-page {
    padding-bottom:0 !important;
  }
  body.sm-admin-page .sm-admin-header {
    padding:30px 42px !important;
  }
  body.sm-admin-page .sm-admin-main {
    padding:26px 42px 48px;
  }
  body.sm-admin-page .sm-metric-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:22px !important;
  }
  body.sm-admin-page .sm-metric-card {
    min-height:168px !important;
  }
  body.sm-admin-page .sm-bottom-nav {
    position:sticky !important;
    bottom:auto !important;
    height:auto !important;
    margin:0 auto 26px !important;
    width:min(calc(100% - 84px),var(--sm-max)) !important;
    border-radius:26px !important;
    padding:10px !important;
  }
}

@media (min-width:1180px) {
  body.sm-admin-page .sm-metric-grid {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
  body.sm-admin-page .sm-metric-card {
    min-height:185px !important;
    padding:26px !important;
  }
}

@media (min-width:1700px) {
  :root { --sm-max:1800px; }
  body.sm-admin-page .sm-admin-header {
    padding:40px 64px !important;
  }
  body.sm-admin-page .sm-admin-main {
    padding:38px 64px 64px;
  }
  body.sm-admin-page .sm-command-row .sm-command-title {
    font-size:54px !important;
  }
  body.sm-admin-page .sm-metric-card {
    min-height:220px !important;
    border-radius:32px !important;
  }
  body.sm-admin-page .sm-metric-label {
    font-size:24px !important;
  }
  body.sm-admin-page .sm-metric-value {
    font-size:76px !important;
  }
}

@media (min-width:2200px) {
  :root { --sm-max:2180px; }
  body.sm-admin-page .sm-metric-grid {
    gap:30px !important;
  }
  body.sm-admin-page .sm-metric-card {
    min-height:260px !important;
    padding:34px !important;
  }
}

@media (max-width:520px) {
  body.sm-admin-page .sm-admin-header {
    padding:23px 30px 24px !important;
  }
  body.sm-admin-page .sm-admin-main {
    padding:12px 30px 24px;
  }
  body.sm-admin-page .sm-command-row {
    gap:10px !important;
  }
  body.sm-admin-page .sm-metric-grid {
    gap:22px 18px !important;
  }
  body.sm-admin-page .sm-metric-card {
    min-height:176px !important;
    padding:25px 25px 22px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.commerce-master-ui-v2 *,
  body.commerce-master-ui-v2 *::before,
  body.commerce-master-ui-v2 *::after {
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* CUSTOMER_HOME_VISUAL_SOURCE=YES */