/* Mint Go theme + side drawer. Light is the default; dark = html.dark */

/* ---------- Light theme overrides (applies unless html.dark) ---------- */
html:not(.dark) { color-scheme: light; }
html:not(.dark) body { background: linear-gradient(180deg,#E6F8F0 0%,#F4F7F6 260px) fixed; background-color: #F4F7F6; color: #1E293B; }

html:not(.dark) .bg-darkbg-900, html:not(.dark) .bg-darkbg-900\/90, html:not(.dark) .bg-darkbg-900\/95,
html:not(.dark) .bg-darkbg-900\/60 { background-color: rgba(255,255,255,.96); }
html:not(.dark) .bg-darkbg-card, html:not(.dark) .bg-darkbg-card\/80 { background-color: #FFFFFF; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
html:not(.dark) .bg-darkbg-800, html:not(.dark) .bg-darkbg-800\/80, html:not(.dark) .bg-gray-800 { background-color: #F1F5F9; }
html:not(.dark) .bg-darkbg-700, html:not(.dark) .bg-gray-700 { background-color: #E2E8F0; }
html:not(.dark) .hover\:bg-darkbg-800:hover, html:not(.dark) .hover\:bg-gray-800:hover,
html:not(.dark) .hover\:bg-darkbg-800\/50:hover { background-color: #E8EEF3; }
html:not(.dark) .hover\:bg-gray-700:hover { background-color: #DDE5EC; }

html:not(.dark) .border-gray-800, html:not(.dark) .border-gray-800\/80, html:not(.dark) .divide-gray-800\/80 > * + *,
html:not(.dark) .border-darkbg-card { border-color: #E2E8F0; }
html:not(.dark) .border-gray-700, html:not(.dark) .hover\:border-gray-700:hover { border-color: #CBD5E1; }
html:not(.dark) .border-gray-600, html:not(.dark) .hover\:border-gray-600:hover { border-color: #94A3B8; }

html:not(.dark) .text-white, html:not(.dark) .hover\:text-white:hover { color: #0F172A; }
html:not(.dark) .text-gray-200 { color: #1E293B; }
html:not(.dark) .text-gray-300, html:not(.dark) .hover\:text-gray-300:hover { color: #475569; }
html:not(.dark) .text-gray-400 { color: #64748B; }
html:not(.dark) .text-gray-500 { color: #64748B; }
html:not(.dark) .text-gray-600 { color: #94A3B8; }
html:not(.dark) .text-mint-accent, html:not(.dark) .hover\:text-mint-accent:hover { color: #059669; }
html:not(.dark) .text-yellow-400 { color: #B45309; }
html:not(.dark) .text-red-400 { color: #DC2626; }

/* solid coloured surfaces keep light text / dark text as designed */
html:not(.dark) .bg-mint-500.text-white, html:not(.dark) .bg-mint-600.text-white,
html:not(.dark) .bg-red-500.text-white, html:not(.dark) .bg-red-600.text-white,
html:not(.dark) .peer-checked\:bg-mint-500 .text-white { color: #fff; }
html:not(.dark) .bg-mint-accent, html:not(.dark) .bg-mint-accent .text-mint-accent { color: #052e22; }
html:not(.dark) .bg-mint-accent.text-darkbg-900 { color: #052e22; }
html:not(.dark) .hover\:bg-mint-accent:hover.text-mint-accent { color: #052e22; }
html:not(.dark) .bg-mint-500\/10, html:not(.dark) .bg-mint-500\/20 { background-color: rgba(16,185,129,.12); }

html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea { color: #0F172A; }
html:not(.dark) ::-webkit-scrollbar-track { background: #F4F7F6; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #CBD5E1; }
html:not(.dark) input[type=range]::-webkit-slider-runnable-track { background: #CBD5E1; }

/* map: real colours in light mode, inverted tiles only in dark */
html:not(.dark) .mg-map { background: #E5E7EB; }
html:not(.dark) .mg-map .leaflet-tile-pane { filter: none; }
html:not(.dark) .mg-map .leaflet-control-attribution { background: rgba(255,255,255,.85) !important; color: #475569 !important; }
html:not(.dark) .mg-map .leaflet-control-attribution a { color: #059669 !important; }
html:not(.dark) .mg-map .leaflet-control-zoom a { background: #fff !important; color: #0F172A !important; border-color: #CBD5E1 !important; }

/* ---------- Side drawer ---------- */
:root { --mg-rail: 64px; --mg-drawer: 248px; }
#mgDrawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: var(--mg-drawer);
  display: flex; flex-direction: column; background: #fff; color: #0F172A;
  border-right: 1px solid #E2E8F0; box-shadow: 4px 0 24px rgba(15,23,42,.08);
  transform: translateX(-100%); transition: transform .25s ease, width .25s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.dark #mgDrawer { background: #0D131D; color: #E5E7EB; border-color: #1F2937; box-shadow: 4px 0 24px rgba(0,0,0,.5); }
#mgDrawer.open { transform: translateX(0); }
#mgDrawerScrim { position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
#mgDrawerScrim.show { opacity: 1; pointer-events: auto; }
.mgd-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid #E2E8F0; min-height: 64px; }
html.dark .mgd-head { border-color: #1F2937; }
.mgd-head img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.mgd-brand { font-weight: 800; font-size: 17px; white-space: nowrap; }
.mgd-brand span { color: #059669; }
html.dark .mgd-brand span { color: #00E699; }
.mgd-nav { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.mgd-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 600; text-align: left; color: #475569; background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
html.dark .mgd-item { color: #9CA3AF; }
.mgd-item:hover { background: #ECFDF5; color: #047857; }
html.dark .mgd-item:hover { background: #162235; color: #00E699; }
.mgd-item i { width: 20px; text-align: center; font-size: 15px; flex: none; }
.mgd-sep { height: 1px; background: #E2E8F0; margin: 8px 6px; }
html.dark .mgd-sep { background: #1F2937; }
.mgd-item.danger { color: #DC2626; }
.mgd-item.danger:hover { background: #FEF2F2; color: #B91C1C; }
html.dark .mgd-item.danger:hover { background: #2a1517; }
.mgd-foot { padding: 8px; border-top: 1px solid #E2E8F0; }
html.dark .mgd-foot { border-color: #1F2937; }

#mgMenuBtn {
  width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid #CBD5E1; background: #F1F5F9; color: #0F172A; cursor: pointer; font-size: 16px;
}
html.dark #mgMenuBtn { border-color: #374151; background: #111827; color: #E5E7EB; }
#mgMenuBtn:hover { border-color: #10B981; }

/* Desktop: docked, collapsible to an icon rail */
@media (min-width: 1024px) {
  #mgDrawer { transform: none; }
  #mgDrawerScrim { display: none; }
  body.mg-has-drawer { padding-left: var(--mg-drawer); transition: padding-left .25s ease; }
  body.mg-has-drawer.mg-collapsed { padding-left: var(--mg-rail); }
  body.mg-collapsed #mgDrawer { width: var(--mg-rail); }
  body.mg-collapsed .mgd-brand, body.mg-collapsed .mgd-label { display: none; }
  body.mg-collapsed .mgd-item { justify-content: center; padding: 11px 0; }
  body.mg-collapsed .mgd-head { justify-content: center; padding: 14px 0 10px; }
  body.mg-has-drawer #clientBottomNav, body.mg-has-drawer #barberBottomNav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { #mgDrawer, body.mg-has-drawer { transition: none; } }

/* ---------- Colour: mint identity in light mode ---------- */
html:not(.dark) header.sticky { background: linear-gradient(135deg,#10B981 0%,#059669 100%); border-bottom: 0; box-shadow: 0 4px 16px rgba(5,150,105,.25); }
html:not(.dark) header.sticky .text-white, html:not(.dark) header.sticky .text-mint-accent,
html:not(.dark) header.sticky .text-gray-400, html:not(.dark) header.sticky .text-gray-300 { color: #fff; }
html:not(.dark) header.sticky #roleBadge { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }
html:not(.dark) header.sticky button:not(#mgMenuBtn):not(#logoutBtn) { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); color: #fff; }
html:not(.dark) header.sticky #authHeaderBtn { background: #fff; color: #047857; }
html:not(.dark) header.sticky #mgMenuBtn { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
html:not(.dark) header.sticky #logoutBtn { background: #fff; color: #DC2626; border-color: #fff; }
html:not(.dark) .bg-darkbg-card { border-top: 3px solid #34D399; }
html:not(.dark) .bg-darkbg-card .bg-darkbg-card { border-top-width: 1px; }
html:not(.dark) .bg-mint-accent { background-color: #10B981; color: #fff; }
html:not(.dark) .bg-mint-accent.text-darkbg-900, html:not(.dark) .bg-mint-accent .text-darkbg-900 { color: #fff; }
html:not(.dark) .hover\:bg-mint-400:hover { background-color: #059669; }
html:not(.dark) .bg-mint-accent, html:not(.dark) .bg-mint-accent .text-mint-accent { color: #fff; }
html:not(.dark) #clientBottomNav, html:not(.dark) #barberBottomNav { background: #fff; border-top: 2px solid #A7F3D0; }
html:not(.dark) .mgd-head { background: linear-gradient(135deg,#10B981,#059669); border: 0; }
html:not(.dark) .mgd-head .mgd-brand, html:not(.dark) .mgd-head .mgd-brand span { color: #fff; }
html:not(.dark) .mgd-item:hover { background: #D1FAE5; }

/* =====================================================================
   PREMIUM LAYER v2 — barbershop identity
   ink #0B1210 (the logo's black) · pole #00E699 (neon signal) · green #0A7C59 (action)
   The one memorable device is the barber-pole stripe: header edge, hero ribbon,
   live-job progress bar. Everything else stays quiet.
   ===================================================================== */
:root {
  --ink: #0B1210; --ink-2: #121B18; --pole: #00E699; --green: #0A7C59; --green-d: #075F45;
  --chalk: #F3F6F4; --line: #E1E8E4; --muted: #5E6E67;
  --shadow-1: 0 1px 2px rgba(11,18,16,.05), 0 6px 18px rgba(11,18,16,.06);
  --shadow-2: 0 2px 4px rgba(11,18,16,.06), 0 18px 40px rgba(11,18,16,.14);
  --ss: 31.113px;
  --stripes: repeating-linear-gradient(-45deg, #00E699 0 7px, #0B1210 7px 11px, #ffffff 11px 18px, #0B1210 18px 22px);
}
html body, html button, html input, html select, html textarea {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html h1, html h2, html h3, html .mg-hero-title, html #offerInput {
  font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; letter-spacing: -.02em;
}
html:not(.dark) body { background: var(--chalk); }

/* ---- header: ink bar with the pole stripe as its bottom edge ---- */
html:not(.dark) header.sticky, html.dark header.sticky {
  background: var(--ink); border: 0; box-shadow: 0 8px 24px rgba(11,18,16,.25); padding-top: 10px; padding-bottom: 13px;
}
header.sticky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--stripes); background-size: var(--ss) var(--ss); }
header.sticky img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(0,230,153,.35), 0 0 18px rgba(0,230,153,.25); }
header.sticky .text-xl { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 21px; line-height: 1; white-space: nowrap; color: #fff; }
header.sticky p.text-gray-400, html:not(.dark) header.sticky p.text-gray-400 { color: rgba(255,255,255,.62); font-size: 11px; margin-top: 3px; white-space: nowrap; }
@media (max-width: 520px) { header.sticky p.text-gray-400 { display: none; } }
header.sticky #roleBadge, html:not(.dark) header.sticky #roleBadge { background: transparent; border: 1px solid rgba(0,230,153,.55); color: var(--pole); font-size: 10px; letter-spacing: .04em; padding: 2px 8px; }
header.sticky button, html:not(.dark) header.sticky button:not(#mgMenuBtn):not(#logoutBtn) { white-space: nowrap; }
html:not(.dark) header.sticky button:not(#mgMenuBtn):not(#logoutBtn):not(#authHeaderBtn) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
html:not(.dark) header.sticky #authHeaderBtn, html.dark header.sticky #authHeaderBtn { background: var(--pole); color: var(--ink); border: 0; font-weight: 800; }
html:not(.dark) header.sticky #logoutBtn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
html:not(.dark) header.sticky #mgMenuBtn, html.dark header.sticky #mgMenuBtn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; }
#mgMenuBtn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(0,230,153,.55); outline-offset: 2px; }

/* ---- hero: the one bold surface ---- */
.mg-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 26px; padding: 22px 20px 20px; box-shadow: var(--shadow-2); }
.mg-hero::before { content: ''; position: absolute; top: -18px; right: 22px; width: 30px; height: 170px; border-radius: 15px; background: repeating-linear-gradient(135deg, #00E699 0 8px, #0B1210 8px 12px, #ffffff 12px 20px, #0B1210 20px 24px); box-shadow: 0 0 0 3px #0B1210, 0 0 0 4px rgba(255,255,255,.28), 0 0 26px rgba(0,230,153,.35); }
.mg-hero::after { content: ''; position: absolute; top: -26px; right: 17px; width: 40px; height: 14px; border-radius: 8px; background: #d9e3df; }
.mg-hero > * { position: relative; }
.mg-hero-title { font-size: 26px; line-height: 1.08; font-weight: 800; max-width: 10em; color: #fff !important; padding-right: 64px; }
.mg-hero-sub { font-size: 13px; color: rgba(255,255,255,.7) !important; margin-top: 8px; max-width: 24em; line-height: 1.45; padding-right: 64px; }
.mg-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-hero-row .mg-hero-title { font-size: 22px; max-width: 8em; padding-right: 0; }
.mg-hero-row .mg-hero-sub { max-width: 14em; padding-right: 0; }
.mg-hero-row::before, .mg-hero-row::after { display: none; }
.mg-loc { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 700; max-width: 100%; }
.mg-loc i { color: var(--pole); }
.mg-loc span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-hero .peer:checked ~ div, .mg-hero label div { box-shadow: none; }

/* ---- cards ---- */
html:not(.dark) .bg-darkbg-card, html:not(.dark) .bg-darkbg-card\/80 { background: #fff; border: 1px solid var(--line); border-top-width: 1px; border-radius: 20px; box-shadow: var(--shadow-1); }
html:not(.dark) .bg-darkbg-card .bg-darkbg-card { border-top-width: 1px; box-shadow: none; }
html.dark .bg-darkbg-card { border-radius: 20px; }
h2.text-base, h2.text-sm { font-weight: 800; }

/* ---- service tiles: the chosen one turns ink ---- */
.service-card { border-radius: 18px; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.service-card:active { transform: scale(.97); }
html:not(.dark) .service-card.bg-darkbg-800 { background: var(--ink); border-color: var(--ink); box-shadow: 0 10px 22px rgba(11,18,16,.22); }
html:not(.dark) .service-card.bg-darkbg-800 h3 { color: #fff; }
html:not(.dark) .service-card.bg-darkbg-800 p { color: rgba(255,255,255,.65); }
html:not(.dark) .service-card.bg-darkbg-800 .text-mint-accent { color: var(--pole); }
html:not(.dark) .service-card.bg-darkbg-800 > div:first-child { background: rgba(0,230,153,.12); border-color: rgba(0,230,153,.4); }
html.dark .service-card.bg-darkbg-800 { border-color: var(--pole); box-shadow: 0 0 0 1px var(--pole), 0 10px 24px rgba(0,230,153,.12); }

/* ---- primary actions ---- */
html:not(.dark) .bg-mint-accent { background-color: var(--green); color: #fff; border-radius: 14px; box-shadow: 0 8px 18px rgba(10,124,89,.28); }
html:not(.dark) .hover\:bg-mint-400:hover { background-color: var(--green-d); }
html.dark .bg-mint-accent { color: var(--ink); }
button { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: translateY(1px); }

/* ---- inputs ---- */
html:not(.dark) input.bg-darkbg-800, html:not(.dark) select.bg-darkbg-800, html:not(.dark) textarea.bg-darkbg-800 { background: #fff; border-color: #D3DDD8; }
input.rounded-xl, select.rounded-xl, textarea.rounded-xl { min-height: 44px; transition: box-shadow .15s ease, border-color .15s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(0,230,153,.2); border-color: var(--green) !important; outline: none; }
#offerInput { font-size: 34px; font-weight: 800; height: 66px; padding-left: 46px; letter-spacing: -.03em; }
#offerInput + *, #offerInput ~ * { }
.relative > .absolute.inset-y-0 { padding-left: 16px; font-size: 18px; }
input[type=range]::-webkit-slider-thumb { background: var(--pole); border: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(11,18,16,.35); height: 24px; width: 24px; margin-top: -8px; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, rgba(10,124,89,.25), rgba(10,124,89,.1)); }
html.dark input[type=range]::-webkit-slider-runnable-track { background: #1F2937; }

/* ---- chips (offer shortcuts, add-ons) ---- */
#offerChips button, #addonChips button { transition: background-color .12s ease, border-color .12s ease; }
#addonChips { margin-top: -8px; }

/* ---- barber list rows ---- */
#nearestBarbersList > div { gap: 12px; padding: 14px; }
#nearestBarbersList > div > div:first-child { min-width: 0; flex: 1 1 auto; }
#nearestBarbersList > div > div:last-child { flex: none; }
#nearestBarbersList .flex.items-center.gap-1\.5 { flex-wrap: wrap; row-gap: 2px; }
#nearestBarbersList p.text-xs.font-bold { font-size: 14px; font-weight: 800; }
#nearestBarbersList button[onclick^="directRequestBarber"] { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 12px; padding: 8px 16px; }
html.dark #nearestBarbersList button[onclick^="directRequestBarber"] { background: var(--pole); color: var(--ink); border-color: var(--pole); }

/* ---- floating bottom nav ---- */
#clientBottomNav, #barberBottomNav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0 !important; width: auto; max-width: 26rem;
  border: 1px solid var(--line) !important; border-radius: 22px; box-shadow: 0 14px 34px rgba(11,18,16,.22);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html.dark #clientBottomNav, html.dark #barberBottomNav { background: rgba(13,19,29,.94); border-color: #1F2937 !important; }
#clientBottomNav button, #barberBottomNav button { padding: 4px 0; font-size: 11px; position: relative; }
#clientBottomNav button.text-mint-accent::after, #barberBottomNav button.text-mint-accent::after { content: ''; position: absolute; top: -10px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 4px 4px; background: var(--stripes); background-size: var(--ss) var(--ss); }

/* ---- live job: moving pole as the "searching" signal ---- */
.mg-pole { height: 8px; border-radius: 999px; background: var(--stripes); background-size: var(--ss) var(--ss); animation: mg-pole 1.1s linear infinite; }
@keyframes mg-pole { to { background-position: var(--ss) 0; } }
#activeJobWidget > div { border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-2); }
html.dark #activeJobWidget > div { border: 1px solid var(--pole); }
#activeJobTitle { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 18px; letter-spacing: -.02em; }

/* ---- modals + toasts ---- */
.fixed.inset-0 > .bg-darkbg-card { border-radius: 26px; box-shadow: var(--shadow-2); }
#toastContainer { left: 16px; right: 16px; top: 76px; align-items: center; }
#toastContainer > div { background: var(--ink) !important; color: #fff !important; border: 0 !important; border-left: 4px solid var(--pole) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(11,18,16,.35); max-width: 28rem; }
#toastContainer > div.border-red-500 { border-left-color: #F87171 !important; }
#toastContainer > div i { color: var(--pole); }
#toastContainer > div.border-red-500 i { color: #F87171; }

/* ---- drawer ---- */
html:not(.dark) .mgd-head, html.dark .mgd-head { background: var(--ink); border: 0; position: relative; }
.mgd-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stripes); background-size: var(--ss) var(--ss); }
.mgd-brand, html:not(.dark) .mgd-brand { color: #fff; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; }
html:not(.dark) .mgd-brand span, .mgd-brand span { color: var(--pole); }
.mgd-item { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) { .mg-pole { animation: none; } .service-card, #offerChips button { transition: none; } }

/* ---- layering + hero controls ---- */
.mg-map { isolation: isolate; }
.z-\[500\] { z-index: 5 !important; }
.mg-hero button:not(.mg-loc) { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
html.dark .mg-hero { background: linear-gradient(160deg, #0F1D18 0%, #0A120F 100%); border: 1px solid rgba(0,230,153,.22); }
html.dark header.sticky { border-bottom: 0; }
html:not(.dark) header.sticky #authHeaderBtn, html.dark header.sticky #authHeaderBtn { background: var(--pole) !important; color: var(--ink) !important; border: 0 !important; }
html:not(.dark) header.sticky #logoutBtn, html.dark header.sticky #logoutBtn { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; }
html:not(.dark) header.sticky #mgMenuBtn, html.dark header.sticky #mgMenuBtn { background: rgba(255,255,255,.08) !important; color: #fff !important; }

/* ---- barber request cards: price first, three clear actions ---- */
#barberRequestsContainer .pt-2.border-t { flex-wrap: wrap; gap: 12px; }
#barberRequestsContainer .pt-2.border-t > span { flex: 1 0 100%; display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
#barberRequestsContainer .pt-2.border-t > span .text-mint-accent { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 26px; letter-spacing: -.02em; }
#barberRequestsContainer .pt-2.border-t > div { flex: 1 0 100%; display: grid; grid-template-columns: auto auto 1fr; gap: 8px; }
#barberRequestsContainer .pt-2.border-t > div button { min-height: 42px; border-radius: 12px; }
html:not(.dark) .text-yellow-500 { color: #A16207; } html:not(.dark) .border-yellow-500\/50, html:not(.dark) .border-yellow-500\/40 { border-color: #E5C770; }

/* =====================================================================
   LIGHT MODE = ALL LIGHT. No black surfaces anywhere in the light theme.
   The barber-pole stripe stays, in green / white / mint.
   ===================================================================== */
html:not(.dark) {
  --stripes: repeating-linear-gradient(-45deg, #10B981 0 7px, #ffffff 7px 11px, #A7F3D0 11px 18px, #ffffff 18px 22px);
  --ink: #0F3D2E;
}
/* header */
html:not(.dark) header.sticky { background: #ffffff; box-shadow: 0 6px 20px rgba(15,61,46,.10); border-bottom: 1px solid var(--line); }
html:not(.dark) header.sticky .text-xl, html:not(.dark) header.sticky .text-white { color: #0F3D2E; }
html:not(.dark) header.sticky .text-mint-accent { color: #0A7C59; }
html:not(.dark) header.sticky p.text-gray-400 { color: #5E6E67; }
html:not(.dark) header.sticky img { box-shadow: 0 2px 8px rgba(15,61,46,.18); }
html:not(.dark) header.sticky #roleBadge { background: #E6F7EF; border: 1px solid #A7F3D0; color: #0A7C59; }
html:not(.dark) header.sticky button:not(#mgMenuBtn):not(#logoutBtn):not(#authHeaderBtn) { background: #F1F6F3 !important; border-color: var(--line) !important; color: #0F3D2E !important; }
html:not(.dark) header.sticky #mgMenuBtn { background: #F1F6F3 !important; border: 1px solid var(--line) !important; color: #0F3D2E !important; }
html:not(.dark) header.sticky #authHeaderBtn { background: var(--green) !important; color: #fff !important; }
html:not(.dark) header.sticky #logoutBtn { background: #fff !important; color: #B42318 !important; border: 1px solid #F3C9C5 !important; }
/* hero */
html:not(.dark) .mg-hero { background: linear-gradient(150deg, #E4F7EE 0%, #F7FCF9 70%); color: #0F3D2E; border: 1px solid #CDEBDD; box-shadow: var(--shadow-1); }
html:not(.dark) .mg-hero-title { color: #0F3D2E !important; }
html:not(.dark) .mg-hero-sub { color: #4A5F57 !important; }
html:not(.dark) .mg-hero::before { background: repeating-linear-gradient(135deg, #10B981 0 8px, #ffffff 8px 12px, #A7F3D0 12px 20px, #ffffff 20px 24px); box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px #BFE6D4, 0 6px 16px rgba(16,185,129,.25); }
html:not(.dark) .mg-hero::after { background: #BFE6D4; }
html:not(.dark) .mg-loc { background: #ffffff; border: 1px solid #BFE6D4; color: #0F3D2E; }
html:not(.dark) .mg-loc i { color: #0A7C59; }
html:not(.dark) .mg-hero button:not(.mg-loc) { background: #ffffff !important; border-color: #BFE6D4 !important; color: #0A7C59 !important; }
/* service tiles: chosen one is a mint fill */
html:not(.dark) .service-card.bg-darkbg-800 { background: #DDF5EA; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 8px 18px rgba(16,185,129,.18); }
html:not(.dark) .service-card.bg-darkbg-800 h3 { color: #0F3D2E; }
html:not(.dark) .service-card.bg-darkbg-800 p { color: #4A5F57; }
html:not(.dark) .service-card.bg-darkbg-800 .text-mint-accent { color: #0A7C59; }
html:not(.dark) .service-card.bg-darkbg-800 > div:first-child { background: #fff; border-color: #A7F3D0; }
/* list buttons, slider, toasts, scrims, drawer */
html:not(.dark) #nearestBarbersList button[onclick^="directRequestBarber"] { background: var(--green); color: #fff; border-color: var(--green); }
html:not(.dark) input[type=range]::-webkit-slider-thumb { background: #10B981; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(16,185,129,.45); }
html:not(.dark) #toastContainer > div { background: #ffffff !important; color: #0F3D2E !important; border: 1px solid var(--line) !important; border-left: 4px solid #10B981 !important; box-shadow: 0 10px 26px rgba(15,61,46,.16); }
html:not(.dark) #toastContainer > div i { color: #0A7C59; }
html:not(.dark) #toastContainer > div.border-red-500 { border-left-color: #EF4444 !important; }
html:not(.dark) #toastContainer > div.border-red-500 i { color: #DC2626; }
html:not(.dark) .bg-black\/80, html:not(.dark) .bg-black\/85, html:not(.dark) .bg-black\/90, html:not(.dark) .bg-black\/70, html:not(.dark) .bg-black\/60, html:not(.dark) .bg-black\/50 { background-color: rgba(232,243,238,.82); }
html:not(.dark) #mgDrawerScrim { background: rgba(232,243,238,.75); }
html:not(.dark) .mgd-head { background: #ffffff; border-bottom: 1px solid var(--line); }
html:not(.dark) .mgd-brand, html:not(.dark) .mgd-brand span { color: #0F3D2E; }
html:not(.dark) .mgd-brand span { color: #0A7C59; }
html:not(.dark) #mgDrawer { box-shadow: 4px 0 28px rgba(15,61,46,.12); }
html:not(.dark) #activeJobWidget > div { border-color: #CDEBDD; }
html:not(.dark) .bg-gray-900, html:not(.dark) .bg-gray-950, html:not(.dark) .bg-black, html:not(.dark) .bg-slate-900 { background-color: #F1F6F3; }
html:not(.dark) .text-darkbg-900 { color: #0F3D2E; }
html:not(.dark) .mgd-head .mgd-brand { color: #0F3D2E; }
html:not(.dark) .mgd-head .mgd-brand span { color: #0A7C59; }

/* Accessibility: honour reduced-motion everywhere (animations, spinners, smooth scroll). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   GLASS LAYER v3 — soft light glass · green accent · pill navigation
   3D-style charts · clean Inter typography. Light is the default; dark
   (html.dark) is the optional night version of the same design.
   Appended last on purpose: it overrides the earlier layers.
   Performance: blur is used only on a few floating surfaces (header, nav,
   modals, drawer, toasts). Cards are translucent without blur so lists
   stay smooth on cheap phones.
   ===================================================================== */
:root {
  --g1: #34D399; --g2: #10B981; --g3: #059669; --g4: #047857; --gink: #0B3D2E;
  --glass: rgba(255,255,255,.62); --glass-strong: rgba(255,255,255,.78);
  --glass-brd: rgba(255,255,255,.85); --glass-line: rgba(16,94,66,.10);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(16,94,66,.10), 0 2px 6px rgba(16,94,66,.06);
  --txt: #0F2A22; --txt-2: #4B635A; --blur: blur(18px) saturate(1.5);
}
html.dark {
  --glass: rgba(255,255,255,.055); --glass-strong: rgba(18,30,26,.72);
  --glass-brd: rgba(255,255,255,.10); --glass-line: rgba(255,255,255,.08);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 14px 36px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --txt: #ECF5F1; --txt-2: #9DB2A9;
}

/* ---- typography: one clean family, tight headings, tidy numerals ---- */
html body, html button, html input, html select, html textarea {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'calt';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
html h1, html h2, html h3, html .mg-hero-title, html #offerInput, html #activeJobTitle, html .mgd-brand,
html header.sticky .text-xl { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.022em; font-weight: 800; }
html h2.text-base, html h2.text-sm { letter-spacing: -.015em; }
html .font-extrabold, html .font-black { letter-spacing: -.012em; }
html #offerInput, html .mg-stat, html b, html .tabular { font-variant-numeric: tabular-nums; }
html p, html label, html td { line-height: 1.5; }

/* ---- backdrop: soft mesh that the glass sits on ---- */
html:not(.dark) body {
  color: var(--txt); background-color: #F3FAF7;
  background-image:
    radial-gradient(900px 520px at 8% -8%, #CFF5E4 0%, rgba(207,245,228,0) 62%),
    radial-gradient(760px 520px at 105% 6%, #DDEFFB 0%, rgba(221,239,251,0) 58%),
    radial-gradient(900px 640px at 50% 112%, #E8F7D6 0%, rgba(232,247,214,0) 60%);
  background-attachment: fixed;
}
html.dark body {
  color: var(--txt); background-color: #070D0B;
  background-image:
    radial-gradient(900px 520px at 6% -10%, rgba(16,185,129,.20) 0%, rgba(16,185,129,0) 62%),
    radial-gradient(760px 520px at 104% 4%, rgba(56,132,200,.16) 0%, rgba(56,132,200,0) 60%),
    radial-gradient(900px 640px at 50% 115%, rgba(16,185,129,.10) 0%, rgba(16,185,129,0) 62%);
  background-attachment: fixed;
}

/* ---- glass cards ---- */
html:not(.dark) .bg-darkbg-card, html:not(.dark) .bg-darkbg-card\/80,
html.dark .bg-darkbg-card, html.dark .bg-darkbg-card\/80 {
  background: var(--glass); border: 1px solid var(--glass-brd); border-top-width: 1px;
  border-radius: 22px; box-shadow: var(--glass-shadow);
}
html:not(.dark) .bg-darkbg-card .bg-darkbg-card, html.dark .bg-darkbg-card .bg-darkbg-card { box-shadow: none; border-radius: 16px; background: var(--glass); }
html:not(.dark) .bg-darkbg-800, html:not(.dark) .bg-darkbg-800\/80 { background-color: rgba(255,255,255,.55); }
html.dark .bg-darkbg-800, html.dark .bg-darkbg-800\/80 { background-color: rgba(255,255,255,.06); }
html:not(.dark) .border-gray-800, html:not(.dark) .border-gray-800\/80, html:not(.dark) .border-gray-700 { border-color: var(--glass-line); }
html.dark .border-gray-800, html.dark .border-gray-800\/80, html.dark .border-gray-700 { border-color: var(--glass-line); }
html:not(.dark) .text-white { color: var(--txt); }
html:not(.dark) .text-gray-400, html:not(.dark) .text-gray-500 { color: var(--txt-2); }

/* floating surfaces get the real blur */
html:not(.dark) header.sticky, html.dark header.sticky {
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; border-bottom: 1px solid var(--glass-brd); box-shadow: 0 8px 28px rgba(16,94,66,.10);
}
html.dark header.sticky { box-shadow: 0 8px 28px rgba(0,0,0,.45); }
header.sticky::after { display: none; }
html:not(.dark) header.sticky .text-xl, html:not(.dark) header.sticky .text-white { color: var(--txt); }
html.dark header.sticky .text-xl, html.dark header.sticky .text-white { color: var(--txt); }
html:not(.dark) header.sticky .text-mint-accent, html:not(.dark) header.sticky #roleBadge { color: var(--g3); }
html:not(.dark) header.sticky p.text-gray-400, html.dark header.sticky p.text-gray-400 { color: var(--txt-2); }
html:not(.dark) header.sticky #roleBadge { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); }
html.dark header.sticky #roleBadge { background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.35); color: var(--g1); }
header.sticky button, header.sticky #roleBadge { border-radius: 999px !important; }
html:not(.dark) header.sticky button:not(#mgMenuBtn):not(#logoutBtn):not(#authHeaderBtn),
html:not(.dark) header.sticky #mgMenuBtn { background: rgba(255,255,255,.7) !important; border: 1px solid var(--glass-brd) !important; color: var(--txt) !important; box-shadow: 0 2px 8px rgba(16,94,66,.08); }
html.dark header.sticky button:not(#logoutBtn):not(#authHeaderBtn), html.dark header.sticky #mgMenuBtn { background: rgba(255,255,255,.07) !important; border: 1px solid var(--glass-brd) !important; color: var(--txt) !important; }
html:not(.dark) header.sticky #authHeaderBtn, html.dark header.sticky #authHeaderBtn { background: linear-gradient(180deg, var(--g1), var(--g3)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(5,150,105,.35), inset 0 1px 0 rgba(255,255,255,.35); }
html:not(.dark) header.sticky #logoutBtn, html.dark header.sticky #logoutBtn { background: rgba(255,255,255,.7) !important; color: #B42318 !important; border: 1px solid rgba(240,68,56,.3) !important; }
html.dark header.sticky #logoutBtn { background: rgba(240,68,56,.1) !important; color: #FDA29B !important; }
#mgMenuBtn { border-radius: 999px; }

html:not(.dark) #mgDrawer { background: rgba(255,255,255,.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: 1px solid var(--glass-brd); }
html.dark #mgDrawer { background: rgba(10,18,15,.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: 1px solid var(--glass-brd); color: var(--txt); }
html:not(.dark) .mgd-head, html.dark .mgd-head { background: transparent; border-bottom: 1px solid var(--glass-line); }
html:not(.dark) .mgd-head::after, html.dark .mgd-head::after { display: none; }
html:not(.dark) .mgd-brand, html.dark .mgd-brand { color: var(--txt); }
html:not(.dark) .mgd-brand span, html.dark .mgd-brand span { color: var(--g3); }
html.dark .mgd-brand span { color: var(--g1); }
.mgd-item { border-radius: 999px; padding: 10px 14px; color: var(--txt-2); }
html:not(.dark) .mgd-item:hover, html.dark .mgd-item:hover { background: rgba(16,185,129,.14); color: var(--g3); }
html.dark .mgd-item:hover { color: var(--g1); }
html:not(.dark) .mgd-sep, html.dark .mgd-sep { background: var(--glass-line); }

/* modals + toasts */
.fixed.inset-0 > .bg-darkbg-card { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 28px; box-shadow: 0 30px 80px rgba(8,50,36,.25), var(--glass-shadow); }
html:not(.dark) .bg-black\/80, html:not(.dark) .bg-black\/70, html:not(.dark) .bg-black\/60, html:not(.dark) .bg-black\/85, html:not(.dark) .bg-black\/90 { background-color: rgba(214,236,226,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.dark) #toastContainer > div, html.dark #toastContainer > div { background: var(--glass-strong) !important; color: var(--txt) !important; border: 1px solid var(--glass-brd) !important; border-left: 4px solid var(--g2) !important; border-radius: 999px !important; padding-left: 16px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 12px 30px rgba(16,94,66,.18); }
#toastContainer > div i { color: var(--g3); } html.dark #toastContainer > div i { color: var(--g1); }

/* hero */
html:not(.dark) .mg-hero { background: linear-gradient(150deg, rgba(209,250,229,.85) 0%, rgba(255,255,255,.7) 70%); border: 1px solid var(--glass-brd); border-radius: 30px; box-shadow: var(--glass-shadow); color: var(--txt); }
html.dark .mg-hero { background: linear-gradient(150deg, rgba(16,185,129,.20), rgba(255,255,255,.04) 70%); border: 1px solid var(--glass-brd); border-radius: 30px; box-shadow: var(--glass-shadow); }
.mg-hero::before, .mg-hero::after { display: none; }
html:not(.dark) .mg-hero-title { color: var(--txt) !important; } html.dark .mg-hero-title { color: var(--txt) !important; }
html:not(.dark) .mg-hero-sub { color: var(--txt-2) !important; } html.dark .mg-hero-sub { color: var(--txt-2) !important; }
html:not(.dark) .mg-loc { background: rgba(255,255,255,.75); border: 1px solid var(--glass-brd); color: var(--txt); }
html.dark .mg-loc { background: rgba(255,255,255,.08); border: 1px solid var(--glass-brd); color: var(--txt); }
html:not(.dark) .mg-loc i, html.dark .mg-loc i { color: var(--g3); }

/* service tiles */
.service-card { border-radius: 20px; }
html:not(.dark) .service-card.bg-darkbg-800, html.dark .service-card.bg-darkbg-800 { background: linear-gradient(160deg, rgba(52,211,153,.28), rgba(16,185,129,.12)); border-color: var(--g2); box-shadow: 0 0 0 1px var(--g2), 0 12px 26px rgba(16,185,129,.22); }

/* ---- primary actions: green gradient pills ---- */
html:not(.dark) button.bg-mint-accent, html.dark button.bg-mint-accent, html:not(.dark) a.bg-mint-accent, html.dark a.bg-mint-accent {
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%); color: #fff; border: 0; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(5,150,105,.32), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(4,120,87,.4);
  letter-spacing: -.005em;
}
html:not(.dark) button.bg-mint-accent:hover:not(:disabled), html.dark button.bg-mint-accent:hover:not(:disabled) { filter: brightness(1.05); }
html:not(.dark) button.bg-mint-accent:active:not(:disabled), html.dark button.bg-mint-accent:active:not(:disabled) { box-shadow: 0 3px 8px rgba(5,150,105,.3), inset 0 2px 4px rgba(4,120,87,.4); }
html.dark button.bg-mint-accent .text-darkbg-900, html:not(.dark) button.bg-mint-accent .text-darkbg-900 { color: #fff; }
button.bg-mint-accent:disabled { opacity: .55; filter: saturate(.6); }
html:not(.dark) #nearestBarbersList button[onclick^="directRequestBarber"], html.dark #nearestBarbersList button[onclick^="directRequestBarber"] { background: linear-gradient(180deg, var(--g1), var(--g3)); color: #fff; border: 0; border-radius: 999px; box-shadow: 0 6px 14px rgba(5,150,105,.28); }
html:not(.dark) .text-mint-accent { color: var(--g3); } html.dark .text-mint-accent { color: var(--g1); }

/* inputs: frosted */
html:not(.dark) input.bg-darkbg-800, html:not(.dark) select.bg-darkbg-800, html:not(.dark) textarea.bg-darkbg-800 { background: rgba(255,255,255,.72); border-color: var(--glass-line); border-radius: 14px; }
html.dark input.bg-darkbg-800, html.dark select.bg-darkbg-800, html.dark textarea.bg-darkbg-800 { background: rgba(255,255,255,.06); border-color: var(--glass-line); border-radius: 14px; color: var(--txt); }
html:not(.dark) input:focus, html:not(.dark) select:focus, html:not(.dark) textarea:focus, html.dark input:focus, html.dark select:focus, html.dark textarea:focus { box-shadow: 0 0 0 4px rgba(16,185,129,.22); border-color: var(--g2) !important; }

/* ---- PILL NAVIGATION ---- */
/* floating bottom bars (client, barber, agent) */
#clientBottomNav, #barberBottomNav, #tabBar {
  left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px !important; width: auto; max-width: 26rem; margin-left: auto; margin-right: auto;
  border: 1px solid var(--glass-brd) !important; border-radius: 999px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 16px 40px rgba(16,94,66,.20), inset 0 1px 0 rgba(255,255,255,.8);
}
html.dark #clientBottomNav, html.dark #barberBottomNav, html.dark #tabBar { box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
#tabBar { position: fixed; }
#clientBottomNav > div, #barberBottomNav > div, #tabBar > div { padding-top: 0 !important; padding-bottom: 0 !important; gap: 4px; }
#clientBottomNav button, #barberBottomNav button, #tabBar button { border-radius: 999px; padding: 8px 0 !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; color: var(--txt-2); }
#clientBottomNav button.text-mint-accent, #barberBottomNav button.text-mint-accent, #tabBar button.text-mint-accent {
  color: #fff !important; background: linear-gradient(180deg, var(--g1), var(--g3)); box-shadow: 0 6px 16px rgba(5,150,105,.38), inset 0 1px 0 rgba(255,255,255,.4);
}
#clientBottomNav button.text-mint-accent::after, #barberBottomNav button.text-mint-accent::after { display: none; }
#clientBottomNav button:not(.text-mint-accent):hover, #barberBottomNav button:not(.text-mint-accent):hover, #tabBar button:not(.text-mint-accent):hover { background: rgba(16,185,129,.12); color: var(--g3); }
#tabBar button.text-gray-400 { color: var(--txt-2); }
body:has(#tabBar:not(.hidden)) main, body:has(#tabBar:not(.hidden)) #app { padding-bottom: 96px; }

/* segmented tab strips (welcome tabs, barber login tabs, admin side tabs) */
[id^="wtab-"] { border-radius: 999px; border-bottom-width: 0 !important; padding: 8px 14px !important; margin: 6px 3px; }
[id^="wtab-"].text-mint-accent, [id^="wtab-"].border-mint-accent { background: linear-gradient(180deg, var(--g1), var(--g3)); color: #fff !important; box-shadow: 0 6px 14px rgba(5,150,105,.3); border-color: transparent !important; }
[id^="wtab-"].text-mint-accent *, [id^="wtab-"].border-mint-accent * { color: #fff !important; }
[id^="bsub-"] { border-radius: 999px; border-bottom-width: 0 !important; padding: 9px 4px !important; }
[id^="bsub-"].text-mint-accent, [id^="bsub-"].border-mint-accent { background: linear-gradient(180deg, var(--g1), var(--g3)); color: #fff !important; box-shadow: 0 6px 14px rgba(5,150,105,.3); }
#bsub-login, #bsub-login ~ button { }
[id^="atab-"] { border-radius: 999px !important; }
[id^="atab-"].bg-mint-accent { background: linear-gradient(180deg, var(--g1), var(--g3)) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(5,150,105,.3); }
[id^="atab-"].bg-mint-accent * { color: #fff !important; }

/* pill chips everywhere buttons are small + bordered */
html:not(.dark) #offerChips button, html:not(.dark) #addonChips button, html.dark #offerChips button, html.dark #addonChips button { border-radius: 999px; }

/* ---- 3D-STYLE CHARTS ---- */
.mg-b3-wrap { position: relative; width: 62%; margin-right: 6px; display: block; }
.mg-b3 {
  position: relative; display: block; width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px; transform-origin: bottom;
  background: linear-gradient(90deg, #6EE7B7 0%, #10B981 45%, #059669 100%);
  box-shadow: 0 10px 14px -6px rgba(5,150,105,.45), inset 0 -10px 14px -8px rgba(4,90,64,.55), inset 0 6px 8px -4px rgba(255,255,255,.55);
  animation: mg-b3-grow .7s cubic-bezier(.2,.9,.3,1) both;
}
.mg-b3::before { /* lit top face */
  content: ''; position: absolute; left: 0; width: 100%; top: -6px; height: 6px; background: linear-gradient(180deg, #D1FAE5, #6EE7B7);
  transform: skewX(-45deg); transform-origin: bottom left; border-radius: 3px 3px 0 0;
}
.mg-b3::after { /* shaded side face */
  content: ''; position: absolute; top: 0; left: 100%; width: 6px; height: 100%; background: linear-gradient(180deg, #059669, #064E3B);
  transform: skewY(-45deg); transform-origin: left top; border-radius: 0 3px 3px 0;
}
.mg-b3--blue { background: linear-gradient(90deg, #BAE6FD 0%, #38BDF8 45%, #0284C7 100%); box-shadow: 0 10px 14px -6px rgba(2,132,199,.4), inset 0 -10px 14px -8px rgba(3,70,110,.5), inset 0 6px 8px -4px rgba(255,255,255,.55); }
.mg-b3--blue::before { background: linear-gradient(180deg, #E0F2FE, #7DD3FC); }
.mg-b3--blue::after { background: linear-gradient(180deg, #0284C7, #0C4A6E); }
@keyframes mg-b3-grow { from { transform: scaleY(.04); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
.mg-chart-floor { border-bottom: 1px solid var(--glass-line); background: linear-gradient(180deg, transparent 70%, rgba(16,185,129,.07)); border-radius: 0 0 10px 10px; padding: 0 4px; }
html.dark .mg-b3 { box-shadow: 0 10px 16px -6px rgba(16,185,129,.35), inset 0 -10px 14px -8px rgba(0,0,0,.5), inset 0 6px 8px -4px rgba(255,255,255,.3); }

/* meters: glossy, inset track with a raised fill */
.mg-track { height: 12px; border-radius: 999px; background: rgba(16,94,66,.10); box-shadow: inset 0 2px 4px rgba(16,94,66,.18); overflow: hidden; margin-top: 6px; }
html.dark .mg-track { background: rgba(255,255,255,.07); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.mg-fill { height: 100%; border-radius: 999px; background: linear-gradient(180deg, #6EE7B7 0%, #10B981 50%, #047857 100%); box-shadow: 0 0 10px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.6); animation: mg-fill-grow .8s cubic-bezier(.2,.9,.3,1) both; transform-origin: left; }
.mg-fill--warn { background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 50%, #B91C1C 100%); box-shadow: 0 0 10px rgba(239,68,68,.4), inset 0 1px 0 rgba(255,255,255,.5); }
@keyframes mg-fill-grow { from { transform: scaleX(.02); } to { transform: scaleX(1); } }

/* stat tiles get a raised "slab" feel */
.mg-tile, .grid > .bg-darkbg-card.text-center { transition: transform .15s ease, box-shadow .15s ease; }
.mg-tile:hover, .grid > .bg-darkbg-card.text-center:hover { transform: translateY(-2px); }

/* no blur / flat fallback where the browser can't do glass or the user asks for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.dark) header.sticky, html:not(.dark) #mgDrawer, html:not(.dark) #clientBottomNav, html:not(.dark) #barberBottomNav, html:not(.dark) #tabBar,
  html:not(.dark) .fixed.inset-0 > .bg-darkbg-card, html:not(.dark) #toastContainer > div { background: rgba(255,255,255,.96) !important; }
  html.dark header.sticky, html.dark #mgDrawer, html.dark #clientBottomNav, html.dark #barberBottomNav, html.dark #tabBar,
  html.dark .fixed.inset-0 > .bg-darkbg-card, html.dark #toastContainer > div { background: rgba(14,24,20,.97) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255,255,255,.94); --glass-strong: rgba(255,255,255,.98); }
  html.dark { --glass: rgba(24,36,31,.96); --glass-strong: rgba(14,24,20,.98); }
}
@media (prefers-reduced-motion: reduce) { .mg-b3, .mg-fill { animation: none; } }

/* glass v3 polish */
.mg-b3-wrap[style*="height:0%"] .mg-b3 { display: none; }
body:has(#tabBar:not(.hidden)), body:has(#clientBottomNav:not(.hidden)), body:has(#barberBottomNav:not(.hidden)) { padding-bottom: 96px; }
[id^="wtab-"]:not(.text-mint-accent):not(.border-mint-accent), [id^="bsub-"]:not(.text-mint-accent):not(.border-mint-accent) { background: rgba(255,255,255,.5); border: 1px solid var(--glass-line); color: var(--txt-2); }
html.dark [id^="wtab-"]:not(.text-mint-accent):not(.border-mint-accent), html.dark [id^="bsub-"]:not(.text-mint-accent):not(.border-mint-accent) { background: rgba(255,255,255,.06); }
#inboxCount { top: 2px; right: calc(50% - 26px); }

/* =====================================================================
   RESPONSIVE HEADER FIX — appended last so it wins over earlier layers.
   Before: on phones the logo, role badge, About button and Sign In/Logout
   competed for ~330px, so the badge wrapped over the buttons and
   "Sign In / Auth" ran off the screen edge.
   ===================================================================== */
header.sticky > div { min-width: 0; }
header.sticky > div > div { min-width: 0; }
header.sticky #roleBadge { white-space: nowrap; flex: none; }
header.sticky #authHeaderBtn, header.sticky #logoutBtn { flex: none; }
@media (max-width: 520px) {
  /* About & Legal is already in the side menu — drop the duplicate icon button here */
  header.sticky button[onclick*="openWelcomeModal"] { display: none; }
  header.sticky { padding-left: 12px; padding-right: 12px; }
  header.sticky > div { gap: 8px; }
  header.sticky > div > div:first-child { gap: 8px; }
  header.sticky > div > div:first-child > div { gap: 8px; }
  header.sticky img { width: 32px; height: 32px; }
  header.sticky .text-xl { font-size: 18px; }
  header.sticky #roleBadge, html:not(.dark) header.sticky #roleBadge { padding: 2px 6px; font-size: 9px; }
  #mgMenuBtn { width: 36px; height: 36px; }
}
@media (max-width: 370px) {
  header.sticky .text-xl { display: none; }   /* logo + role badge are enough on very small phones */
  header.sticky #authHeaderBtn, header.sticky #logoutBtn { padding-left: 10px; padding-right: 10px; }
}

/* charts/canvases must never be wider than their card (caused sideways scroll on 320px phones) */
canvas { max-width: 100%; height: auto; }