/* ==========================================================================
   soplis-theme.css — visual refresh (October 2026)

   Injected into every page by scripts/build-site.mjs, after the page's own
   styles, so one file gives public pages and dashboards the same look.
   Presentation only: no layout that scripts depend on is hidden or moved,
   and no ids, data attributes or text are changed here.

   Brand: indigo #4f46e5 → violet #6d28d9/#7c3aed (see soplis-logo.svg).
   ========================================================================== */

:root {
  --t-brand: #6d28d9;
  --t-brand-600: #7c3aed;
  --t-brand-50: #f5f3ff;
  --t-brand-100: #ede9fe;
  --t-indigo: #4f46e5;
  --t-grad: linear-gradient(120deg, #4338ca 0%, #6d28d9 55%, #7c3aed 100%);
  --t-ink: #0f172a;
  --t-body: #334155;
  --t-muted: #64748b;
  --t-line: #e7e8f0;
  --t-canvas: #f6f6fb;
  --t-surface: #ffffff;
  --t-radius: 16px;
  --t-radius-sm: 10px;
  --t-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --t-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(30, 27, 75, .06);
  --t-shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 40px rgba(49, 46, 129, .12);
  --t-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-display: 'Syne', 'DM Sans', system-ui, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--t-font);
  color: var(--t-body);
  background-color: var(--t-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.bg-gray-50, body.bg-gray-100, body.bg-white { background-color: var(--t-canvas); }
h1, h2, h3 { color: var(--t-ink); }
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.01em; }
::selection { background: #ddd6fe; color: #1e1b4b; }
img { image-rendering: auto; }

/* ---------- Header ---------- */
body > nav:first-of-type,
body > header:first-of-type {
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--t-line);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 6px 20px -16px rgba(30, 27, 75, .25) !important;
}
body > nav:first-of-type > div > a[href="index.html"]:first-child,
body > nav:first-of-type a[href="index.html"].font-extrabold {
  font-family: var(--t-display);
  letter-spacing: -0.03em;
  background: var(--t-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
#megaMenuBtn { border-radius: 12px; }

/* Bottom section bar is a phone pattern; desktop already shows the same links in the header. */
@media (min-width: 1024px) {
  .soplis-bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}
.soplis-bottom-nav {
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--t-line) !important;
}

/* ---------- Buttons & form controls ---------- */
:where(button, .btn, a[class*="rounded"]) { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s; }
:where(.bg-purple-600, .bg-purple-700, .bg-indigo-600):is(button, a) {
  background-image: var(--t-grad);
  box-shadow: 0 6px 16px -8px rgba(76, 29, 149, .55);
}
:where(.bg-purple-600, .bg-purple-700, .bg-indigo-600):is(button, a):hover {
  box-shadow: 0 10px 22px -10px rgba(76, 29, 149, .6);
  transform: translateY(-1px);
}
:where(button, a):active { transform: translateY(0); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
  border-color: #dfe1ea;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
select:focus, textarea:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .12) !important;
  outline: none;
}

/* ---------- Cards ---------- */
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg).shadow,
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg).shadow-sm,
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg).shadow-md,
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg).shadow-lg {
  box-shadow: var(--t-shadow) !important;
  border: 1px solid var(--t-line);
}
.product-card, .sop-card, .soplis-card, .item-card, .job-card, .service-card {
  border-radius: var(--t-radius);
  border-color: var(--t-line);
  box-shadow: var(--t-shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover, .sop-card:hover, .soplis-card:hover, .item-card:hover, .job-card:hover, .service-card:hover {
  box-shadow: var(--t-shadow-lg);
  border-color: #ddd6fe;
  transform: translateY(-2px);
}

/* ---------- Homepage ---------- */
.sop-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--t-grad);
  padding: 28px 0 26px;
}
.sop-hero::before, .sop-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.sop-hero::before { width: 420px; height: 420px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(196, 181, 253, .45), transparent 65%); }
.sop-hero::after { width: 360px; height: 360px; left: -140px; bottom: -220px; background: radial-gradient(circle, rgba(129, 140, 248, .5), transparent 65%); }
.sop-hero__inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 16px; text-align: center; }
.sop-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.sop-hero__eyebrow i { color: #c4b5fd; }
.sop-hero h1 {
  color: #fff;
  font-family: var(--t-display);
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 6px;
}
.sop-hero__lead { color: #ddd6fe; font-size: clamp(13px, 1.4vw, 15px); max-width: 560px; margin: 0 auto; }
.sop-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.sop-hero__cta a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none;
}
.sop-hero__primary { background: #fff; color: var(--t-brand) !important; box-shadow: 0 10px 24px -10px rgba(15, 10, 60, .55); }
.sop-hero__primary:hover { transform: translateY(-1px); background: #faf5ff; }
.sop-hero__secondary { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.sop-hero__secondary:hover { background: rgba(255, 255, 255, .12); }
.sop-hero__tiles {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  max-width: 760px; margin: 28px auto 0;
}
.sop-hero__tiles a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px; border-radius: 14px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px; font-weight: 600;
}
.sop-hero__tiles a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.sop-hero__tiles i { font-size: 18px; color: #e9d5ff; }
.sop-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; font-size: 13px; }
.sop-hero__links a, .sop-hero__links button {
  color: #ede9fe; text-decoration: underline; text-decoration-color: rgba(237, 233, 254, .4);
  text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
}
.sop-hero__links a:hover, .sop-hero__links button:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 640px) {
  .sop-hero { padding: 22px 0 20px; }
  .sop-hero__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  .sop-hero__tiles a { padding: 10px 2px; font-size: 11px; border-radius: 12px; }
  .sop-hero__tiles i { font-size: 16px; }
  .sop-hero__cta a { min-height: 44px; padding: 0 18px; font-size: 14px; }
}

.page-index .section-wrap, .page-index .section-alt, .page-index .section-green,
.page-index .section-indigo, .page-index .section-emerald {
  border-radius: 20px;
}
.page-index .section-wrap > div:first-child h2,
.page-index .section-alt > div:first-child h2,
.page-index .section-green > div:first-child h2,
.page-index .section-indigo > div:first-child h2,
.page-index .section-emerald > div:first-child h2 {
  font-size: 18px;
}
.page-index :is(.section-wrap, .section-alt, .section-green, .section-indigo, .section-emerald) > div:first-child > a {
  font-size: 13px; font-weight: 600;
}

/* ---------- Footer ---------- */
footer.bg-gray-900, body > footer {
  background: #0f0d1f !important;
  background-image: radial-gradient(800px 200px at 15% 0%, rgba(109, 40, 217, .18), transparent 70%) !important;
}
footer a { transition: color .15s; }
footer a:hover { color: #c4b5fd !important; }

/* ---------- Modals & toasts ---------- */
.toast-message { border-radius: 14px; box-shadow: var(--t-shadow-lg); background: #1e1b4b; }

/* ==========================================================================
   Dashboards (body.soplis-dashboard)
   ========================================================================== */
body.soplis-dashboard {
  background: var(--t-canvas) !important;
  background-image: radial-gradient(1200px 360px at 50% -120px, #ede9fe 0%, transparent 70%) !important;
  background-repeat: no-repeat !important;
}
/* Page banners: one gradient family for every role. */
body.soplis-dashboard main > div:first-child[class*="bg-gradient-to-r"],
body.soplis-dashboard main > section:first-child[class*="bg-gradient-to-r"],
body.soplis-dashboard .dashboard-hero {
  background-image: var(--t-grad) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px -20px rgba(67, 56, 202, .55) !important;
  position: relative;
  overflow: hidden;
}
body.soplis-dashboard main > div:first-child[class*="bg-gradient-to-r"]::after {
  content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 181, 253, .35), transparent 65%); pointer-events: none;
}
body.soplis-dashboard main > div:first-child[class*="bg-gradient-to-r"] > * { position: relative; z-index: 1; }
body.soplis-dashboard main > div:first-child[class*="bg-gradient-to-r"] h1,
body.soplis-dashboard main > div:first-child[class*="bg-gradient-to-r"] h2 { color: #fff; }

/* Surfaces */
body.soplis-dashboard main :is(.bg-white.rounded-xl, .bg-white.rounded-2xl, .section-card, .kpi-card) {
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-sm) !important;
  border-radius: var(--t-radius);
}
body.soplis-dashboard .stat-card {
  border: 1px solid var(--t-line) !important;
  border-radius: var(--t-radius) !important;
  background: #fff;
  box-shadow: var(--t-shadow-sm) !important;
}
body.soplis-dashboard .stat-card:hover {
  transform: translateY(-2px);
  border-color: #c4b5fd !important;
  box-shadow: var(--t-shadow-lg) !important;
}
body.soplis-dashboard .stat-card i { transition: transform .2s; }
body.soplis-dashboard .stat-card:hover i { transform: scale(1.08); }

/* Tables */
body.soplis-dashboard table thead th, body.soplis-dashboard table thead td {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--t-muted) !important; font-weight: 700;
}
body.soplis-dashboard table tbody tr { transition: background-color .12s; }
body.soplis-dashboard table tbody tr:hover { background: #faf9ff; }

/* Tabs */
body.soplis-dashboard [role=tab][aria-selected=true] { box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .25); }

/* Admin sidebar */
body.soplis-dashboard #adminSidebar { border-right: 1px solid var(--t-line); }
body.soplis-dashboard #adminSidebar .tab-btn { border-radius: 10px; }
body.soplis-dashboard #adminSidebar .tab-btn[aria-current=page],
body.soplis-dashboard #adminSidebar .tab-btn.active {
  background: var(--t-brand-50) !important; color: var(--t-brand) !important; font-weight: 700;
  box-shadow: inset 3px 0 0 var(--t-brand-600);
}

/* Modals */
body.soplis-dashboard .modal > div, body.soplis-dashboard [role=dialog] > div:first-child {
  border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .product-card, .sop-card, .soplis-card, .item-card, .job-card, .service-card,
  body.soplis-dashboard .stat-card, .sop-hero__tiles a { transition: none !important; transform: none !important; }
}

/* Customer profile card shows an action instead of a count. */
body.soplis-dashboard .stat-card .sop-card-action { font-size: 14px !important; line-height: 2.25rem !important; font-weight: 600 !important; }
/* Keep the vendor/courier header on one line on phones. */
@media (max-width: 640px) {
  body.soplis-dashboard #vendor-nav-actions, body.soplis-dashboard #delivery-nav-actions { gap: 10px; }
  body.soplis-dashboard #messageAdminBtn { padding: 8px 10px; }
  body.soplis-dashboard #messageAdminBtn i { margin-right: 0; }
}

/* Info pages (about, contact, FAQ…): logo · links · back. On phones the links get their own scrollable row. */
@media (max-width: 640px) {
  body > nav:first-of-type > div.justify-between:has(> div.flex.gap-4.text-sm) { flex-wrap: wrap; row-gap: 8px; }
  body > nav:first-of-type > div.justify-between > div.flex.gap-4.text-sm {
    order: 3; width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding-bottom: 2px;
  }
  body > nav:first-of-type > div.justify-between > div.flex.gap-4.text-sm::-webkit-scrollbar { display: none; }
  body > nav:first-of-type > div.justify-between > a { white-space: nowrap; }
}

/* Maps: keep Leaflet's internal layers (z-index 400–1000) inside the map box so they never
   paint over the sticky header or bottom bar while scrolling. */
.leaflet-container { isolation: isolate; }