/* ============================================================================
   App-shell polish — applied site-wide (NOT scoped to .ds) to give the whole
   Sneat theme a calmer, Apple-ish feel: hairlines instead of heavy borders,
   softer radii, restrained shadows, tighter type. Visual only — no layout JS
   assumptions changed.
   ============================================================================ */

:root {
  --bs-border-radius:        12px;
  --bs-border-radius-sm:     9px;
  --bs-border-radius-lg:     16px;
  --bs-border-radius-xl:     20px;
  --bs-border-radius-pill:   999px;
  /* Drop the theme's leading "Public Sans" — if it happens to be installed
     locally (common on design machines) Chromium resolves it asynchronously,
     painting the system fallback first and reflowing the WHOLE page to
     Public Sans a beat later ("the fonts reset on refresh"). Leading with the
     OS system font = one paint, no swap, no download. */
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* `html` (not just `body`) needs the theme background: iOS Safari/WKWebView's
   elastic overscroll ("rubber-band") bounce scrolls the viewport past the
   body's own box, revealing whatever `html` is painted with. Left unset it
   defaults to white, which flashes behind the fixed bottom tab bar whenever
   you scroll past the top/bottom in dark mode. */
html {
  background: var(--ds-bg) !important;
}
body {
  background: var(--ds-bg) !important;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* headings: tighter, fewer heavy weights */
h1, h2, h3, .h1, .h2, .h3, .fw-bold { letter-spacing: -0.018em; }
h4, h5, h6, .h4, .h5, .h6 { letter-spacing: -0.011em; }

/* --- cards: hairline + soft shadow --- */
.card {
  border: 1px solid var(--ds-hairline-2) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.card .card-header {
  border-bottom: 1px solid var(--ds-hairline-2);
  background: transparent;
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--ds-shadow) !important; }

/* --- buttons: Puppertino-ish (rounder, subtle shadow) --- */
.btn {
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .08s var(--ds-ease), filter .15s, background-color .15s, box-shadow .15s;
}
.btn:active { transform: scale(.975); }
.btn:not([class*="btn-label-"]):not(.btn-link):not([class*="btn-outline-"]) {
  box-shadow: 0 1px 0.375px rgba(0,0,0,.05), 0 0.25px 0.375px rgba(0,0,0,.15);
}
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark {
  box-shadow: var(--p-prim-shadow);
}
.btn-lg { border-radius: 12px; }
.btn-sm { border-radius: 8px; }
.btn.rounded-pill, .btn.rounded-5 { border-radius: var(--ds-radius-pill); }

/* --- form controls: Puppertino .p-form-text --- */
.form-control, .form-select, .input-group-text {
  border-radius: 8px;
  border-color: var(--p-input-bd);
}
.form-control:focus, .form-select:focus {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  border-color: var(--ds-blue);
  box-shadow: none;
}
.form-switch .form-check-input { border-radius: 999px; }

/* --- keyboard focus: one ring for every tabbable thing in the modern shell
   that doesn't already define its own :focus-visible treatment. Keyboard-only
   (:focus-visible), low specificity so component rules still win, offset so it
   clears the component's own border-radius. --- */
.layout-wrapper a:focus-visible,
.layout-wrapper button:focus-visible,
.layout-wrapper [role="button"]:focus-visible,
.layout-wrapper [tabindex="0"]:focus-visible,
.layout-wrapper summary:focus-visible,
.layout-wrapper .menu-link:focus-visible,
.layout-wrapper .nav-link:focus-visible,
.layout-wrapper .dropdown-item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* --- badges / pills --- */
.badge { border-radius: 7px; font-weight: 640; letter-spacing: -0.003em; }
.badge.rounded-pill { border-radius: 999px; }

/* --- tables: quiet --- */
.table > :not(caption) > * > * { border-bottom-color: var(--ds-hairline-2); }
.table thead th {
  text-transform: uppercase; font-size: .7rem; letter-spacing: .04em;
  color: var(--ds-text-3); font-weight: 640; border-bottom: 1px solid var(--ds-hairline-2);
}

/* --- navbar: frosted, hairline --- */
.layout-navbar {
  backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--ds-surface) 78%, transparent) !important;
  border: 1px solid var(--ds-hairline-2) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
/* Sneat's "detached" (floating) navbar reserves 1.625rem of side margin and
   1.5rem of inner padding — tighten both so the mobile top bar sits closer
   to the screen edges and its content has less dead space around it. */
.layout-navbar.navbar-detached {
  inline-size: calc(100% - 1rem * 2);
  padding-inline: 1rem;
}

/* --- sidebar / menu --- */
.menu.menu-vertical, #layout-menu {
  border-right: 1px solid var(--ds-hairline-2);
  background: var(--ds-surface) !important;
}
.menu-vertical .menu-item .menu-link {
  border-radius: 10px;
  font-weight: 450;
  letter-spacing: -0.005em;
}
.menu-vertical .menu-item.active > .menu-link {
  background: rgba(var(--bs-primary-rgb), .10) !important;
  color: var(--bs-primary) !important;
  box-shadow: none;
  font-weight: 560;
}
.menu-vertical .menu-item .menu-link:hover { background: var(--ds-surface-2); }
.menu-vertical .menu-sub .menu-link { font-weight: 420; }
.menu-header .menu-header-text {
  text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; color: var(--ds-text-3);
}
.menu-icon { color: var(--ds-text-2); }
.menu-item.active > .menu-link .menu-icon { color: var(--bs-primary); }

/* --- app-brand --- */
.app-brand .app-brand-text { letter-spacing: -0.02em; font-weight: 700; }

/* --- dropdowns / modals / offcanvas --- */
.dropdown-menu, .modal-content, .offcanvas {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-hairline-2);
  box-shadow: var(--ds-shadow) !important;
}
.dropdown-item { border-radius: 8px; }
.dropdown-menu { padding: 6px; }

/* --- misc quieting --- */
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ds-hairline-2) !important; }
hr { border-color: var(--ds-hairline); opacity: 1; }
.text-muted { color: var(--ds-text-2) !important; }
.bg-body, .bg-white { background: var(--ds-surface) !important; }
.shadow, .shadow-sm { box-shadow: var(--ds-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--ds-shadow) !important; }

/* Sneat's demo customizer launcher — hidden (replaced by Settings → Appearance) */
.template-customizer, #template-customizer, .template-customizer-open-btn { display: none !important; }

/* --- dark theme: lean on Bootstrap 5.3 tokens; our toggle also sets data-bs-theme --- */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--ds-bg) !important; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .menu.menu-vertical,
:root[data-theme="dark"] #layout-menu,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas {
  background: var(--ds-surface) !important;
  color: var(--ds-text);
}
:root[data-theme="dark"] .layout-navbar {
  background: color-mix(in srgb, var(--ds-surface) 78%, transparent) !important;
}
:root[data-theme="dark"] .text-heading,
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--ds-text); }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select { background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-hairline); }