/* Light / dark theme — toggle, transition and hand-tuned dark surfaces.
   Bulk colour remapping lives in theme-dark.generated.css / theme-dark-admin.generated.css. */

html { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --almond: #0f0f13;
  --cream: #15151b;
  --page: #0f0f13;
  --ink: #ededf2;
  --mute: #9d9da8;
  --chip: rgba(255, 92, 115, 0.12);
  --line: rgba(255, 255, 255, 0.09);
  --brand-glow: rgba(232, 25, 58, 0.38);
  --grad-brand: linear-gradient(135deg, #E8193A 0%, #C8102E 52%, #9E0C24 100%);
  --grad-page: linear-gradient(175deg, #121217 0%, #0f0f13 45%, #0b0b0e 100%);
  --dk-red-text: #ff5c73;
  --dk-surface: #1b1b22;
  --dk-surface-2: #22222b;
  --admin-ink: #ededf2;
  --admin-muted: #a1a1ab;
  --admin-bg: #0f0f13;
}

/* ---------- Toggle ---------- */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 16, 46, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: #C8102E;
  box-shadow: 0 3px 10px rgba(200, 16, 46, 0.1);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.theme-toggle:active { transform: scale(0.88); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.28s ease;
  will-change: transform, opacity;
}
.theme-toggle .theme-ico-moon path { fill: currentColor; stroke: none; }
.theme-toggle .theme-ico-sun circle { fill: currentColor; }
.theme-ico-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-ico-moon { opacity: 0; transform: rotate(-100deg) scale(0.3); }
html[data-theme="dark"] .theme-toggle {
  background: rgba(34, 34, 43, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFD37A;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .theme-ico-sun { opacity: 0; transform: rotate(100deg) scale(0.3); }
html[data-theme="dark"] .theme-ico-moon { opacity: 1; transform: rotate(0) scale(1); }

.topbar .theme-toggle--end { margin-left: auto; }
.svc-topbar .theme-toggle { margin-left: auto; }
.topbar-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.home-header-user .theme-toggle,
.provider-header-actions .theme-toggle { width: 32px; height: 32px; }

.admin-topbar-actions .theme-toggle { width: 38px; height: 38px; }

/* Theme choice row (Menu page) */
.theme-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(200, 16, 46, 0.07);
  border: 1px solid rgba(200, 16, 46, 0.1);
}
.theme-seg button {
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme-mode="light"] .theme-seg [data-theme-set="light"],
html[data-theme-mode="dark"] .theme-seg [data-theme-set="dark"],
html[data-theme-mode="system"] .theme-seg [data-theme-set="system"],
html:not([data-theme-mode]) .theme-seg [data-theme-set="system"] {
  background: #fff;
  color: #C8102E;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.14);
}
html[data-theme="dark"] .theme-seg { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"][data-theme-mode="light"] .theme-seg [data-theme-set="light"],
html[data-theme="dark"][data-theme-mode="dark"] .theme-seg [data-theme-set="dark"],
html[data-theme="dark"][data-theme-mode="system"] .theme-seg [data-theme-set="system"] {
  background: #2b2b35;
  color: #ff7a8c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.menu-item--theme { cursor: default; }
.menu-item--theme .theme-seg { margin-left: auto; flex-shrink: 0; }
.menu-item--theme::after { display: none !important; }

/* ---------- Switch animation ---------- */
/* Colours must land instantly under the circle reveal; element fades would show as a blink inside it. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }
/* Only the named shell parts would otherwise be captured outside the root snapshot. */
html.theme-vt #app-stage,
html.theme-vt .tabs { view-transition-name: none !important; }
html.theme-vt::view-transition-group(root) { animation: none; }
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { mix-blend-mode: normal; animation: none; opacity: 1; }
html.theme-vt::view-transition-old(root) { z-index: 1; }
html.theme-vt::view-transition-new(root) {
  z-index: 2;
  will-change: clip-path;
  animation: edoor-theme-reveal 0.56s cubic-bezier(0.32, 0, 0.18, 1) both;
}
@keyframes edoor-theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 0%)); }
  to { clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 50%) var(--theme-y, 0%)); }
}
html.theme-fade body,
html.theme-fade #app-stage,
html.theme-fade .topbar,
html.theme-fade .tabs,
html.theme-fade .card-box,
html.theme-fade .pro-card,
html.theme-fade .menu-item,
html.theme-fade .admin-card {
  transition: background-color 0.26s ease, color 0.26s ease, border-color 0.26s ease !important;
}

/* Inactive tab art loads after the page is ready (html.art-all) so it never delays first paint. */
html:not(.art-all) .app-art-bg:not([data-art="home"]) .app-art-layer--home,
html:not(.art-all) .app-art-bg:not([data-art="services"]) .app-art-layer--services,
html:not(.art-all) .app-art-bg:not([data-art="menu"]) .app-art-layer--menu { background-image: none !important; }

/* Address auto-filled from PIN / GPS: brief highlight so the change is noticed. */
.addr-filled { animation: addr-filled-flash 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes addr-filled-flash {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); background-color: rgba(22, 163, 74, 0.1); }
  60% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .addr-filled { animation: none; } }
/* Language switch: whole-page crossfade, no element morphing so nothing jumps */
html.lang-vt * { view-transition-name: none !important; }
html.lang-vt::view-transition-group(root) { animation: none; }
html.lang-vt::view-transition-old(root) { animation: edoor-lang-out 0.16s ease-out both; }
html.lang-vt::view-transition-new(root) { animation: edoor-lang-in 0.2s ease-out both; }
@keyframes edoor-lang-out { to { opacity: 0; } }
@keyframes edoor-lang-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.theme-vt::view-transition-new(root) { animation: none; }
  .theme-toggle svg { transition: none; }
}

/* ---------- Dark: app shell ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body { background: #0f0f13; color: #ededf2; }

html[data-theme="dark"] .app-art-bg::after {
  background:
    radial-gradient(ellipse 82% 60% at 50% 46%, rgba(13, 13, 17, 0.9) 0%, rgba(13, 13, 17, 0.8) 58%, rgba(13, 13, 17, 0.66) 100%);
}
html[data-theme="dark"] .app-art-bg[data-art="home"] ~ #app-stage .topbar--home.safe {
  background: linear-gradient(180deg, rgba(13, 13, 17, 0.7) 0%, rgba(13, 13, 17, 0) 100%);
}
html[data-theme="dark"] .app-art-bg[data-art="home"] ~ #app-stage .sec h2,
html[data-theme="dark"] .app-art-bg[data-art="services"] ~ #app-stage .svc-group-title,
html[data-theme="dark"] .app-art-bg[data-art="menu"] ~ #app-stage .menu-item strong {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .app-art-bg[data-art="menu"] ~ #app-stage > .hint {
  background: rgba(27, 27, 34, 0.86);
  color: #a1a1ab;
}

html[data-theme="dark"] .sheet-grab { background: rgba(255, 255, 255, 0.18); }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color: #ededf2; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #1d1d25;
  border-color: rgba(255, 255, 255, 0.1);
  color: #ededf2;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: #22222b;
  border-color: rgba(255, 92, 115, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 92, 115, 0.16);
}
html[data-theme="dark"] ::placeholder { color: #75757f; opacity: 1; }
html[data-theme="dark"] .text-muted { color: #9d9da8 !important; }
html[data-theme="dark"] .text-danger { color: #ff7a8c !important; }
html[data-theme="dark"] [style*="color:var(--red)"],
html[data-theme="dark"] [style*="color: var(--red)"] { color: var(--dk-red-text) !important; }
html[data-theme="dark"] hr { border-color: rgba(255, 255, 255, 0.1); }

html[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.92) saturate(0.7);
}
html[data-theme="dark"] .leaflet-control-attribution,
html[data-theme="dark"] .leaflet-bar a {
  background: rgba(27, 27, 34, 0.9) !important;
  color: #c9c9d2 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .leaflet-control-attribution a { color: #ff8c9c !important; }

html[data-theme="dark"] .edoor-net-toast { background: #2a2a33; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }

html[data-theme="dark"] img.svc-img,
html[data-theme="dark"] .cat-ico img { filter: brightness(0.94); }

/* ---------- Dark: admin (Bootstrap 5.1 has no dark mode) ---------- */
html[data-theme="dark"] .admin-body { background: #0f0f13; color: #ededf2; }
html[data-theme="dark"] .admin-body .card,
html[data-theme="dark"] .admin-body .modal-content,
html[data-theme="dark"] .admin-body .offcanvas,
html[data-theme="dark"] .admin-body .dropdown-menu,
html[data-theme="dark"] .admin-body .list-group-item,
html[data-theme="dark"] .admin-body .accordion-item,
html[data-theme="dark"] .admin-body .accordion-button,
html[data-theme="dark"] .admin-body .popover,
html[data-theme="dark"] .admin-body .toast {
  background-color: #1b1b22;
  color: #ededf2;
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .admin-body .accordion-button:not(.collapsed) { background-color: #2a1a20; color: #ff8c9c; }
html[data-theme="dark"] .admin-body .card-header,
html[data-theme="dark"] .admin-body .card-footer,
html[data-theme="dark"] .admin-body .modal-header,
html[data-theme="dark"] .admin-body .modal-footer {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .admin-body .dropdown-item { color: #ededf2; }
html[data-theme="dark"] .admin-body .dropdown-item:hover,
html[data-theme="dark"] .admin-body .dropdown-item:focus { background-color: #26262f; color: #fff; }
html[data-theme="dark"] .admin-body .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .admin-body .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: #ededf2;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: #ededf2;
  --bs-table-active-bg: rgba(255, 255, 255, 0.07);
  color: #ededf2;
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .admin-body .table > :not(caption) > * > * { border-bottom-color: rgba(255, 255, 255, 0.07); }
html[data-theme="dark"] .admin-body .table-light,
html[data-theme="dark"] .admin-body .table-light > * > * { --bs-table-bg: #22222b; background-color: #22222b; color: #ededf2; }
html[data-theme="dark"] .admin-body .bg-white,
html[data-theme="dark"] .admin-body .bg-light { background-color: #1b1b22 !important; }
html[data-theme="dark"] .admin-body .text-dark,
html[data-theme="dark"] .admin-body .text-body { color: #ededf2 !important; }
html[data-theme="dark"] .admin-body .text-secondary { color: #a1a1ab !important; }
html[data-theme="dark"] .admin-body .border,
html[data-theme="dark"] .admin-body .border-top,
html[data-theme="dark"] .admin-body .border-bottom,
html[data-theme="dark"] .admin-body .border-start,
html[data-theme="dark"] .admin-body .border-end { border-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .admin-body .btn-light { background-color: #26262f; border-color: #26262f; color: #ededf2; }
html[data-theme="dark"] .admin-body .btn-outline-secondary { color: #c9c9d2; border-color: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .admin-body .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .admin-body .form-check-input { background-color: #1d1d25; border-color: rgba(255, 255, 255, 0.2); }
html[data-theme="dark"] .admin-body .form-check-input:checked { background-color: #E8193A; border-color: #E8193A; }
html[data-theme="dark"] .admin-body .input-group-text { background-color: #22222b; border-color: rgba(255, 255, 255, 0.1); color: #c9c9d2; }
html[data-theme="dark"] .admin-body .page-link { background-color: #1b1b22; border-color: rgba(255, 255, 255, 0.08); color: #ff8c9c; }
html[data-theme="dark"] .admin-body .page-item.active .page-link { background-color: #C8102E; border-color: #C8102E; color: #fff; }
html[data-theme="dark"] .admin-body .page-item.disabled .page-link { background-color: #17171d; color: #6b6b75; }
html[data-theme="dark"] .admin-body .nav-tabs { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .admin-body .nav-tabs .nav-link.active { background-color: #1b1b22; border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) #1b1b22; color: #ededf2; }
html[data-theme="dark"] .admin-body .badge.bg-light { background-color: #2b2b35 !important; color: #ededf2 !important; }
html[data-theme="dark"] .admin-body .alert-light { background-color: #1b1b22; border-color: rgba(255, 255, 255, 0.08); color: #ededf2; }
html[data-theme="dark"] .admin-body .modal-backdrop.show { opacity: 0.7; }