/* ---------------- Brand typography ----------------------------------
 * Two brand faces ship with SynoForce:
 *
 *   - Montserrat, the primary UI face. Clean geometric sans, renders
 *     well at body sizes, ships with a full weight range. We load the
 *     weights actually used (300/400/500/600/700 + italic variants
 *     400/700) and wire it as the :root body font so every Bootstrap
 *     component inherits it for free.
 *
 *   - SynoForce, the display / logo face. Looks great on brand
 *     accents (hero H1s, dashboard greeting, marketing titles) but
 *     would hurt readability as an app-wide body font. We expose it
 *     as a `.font-brand` utility so templates opt in on specific
 *     elements only.
 *
 * All files live under /webfonts/{montserrat,synoforce}/ and the
 * woff2 variants are the only ones we ship, every browser we care
 * about supports woff2, and the legacy formats triple the download
 * size for zero gain. */

/* Montserrat, weights 300/400/500/600/700 + matching italics.
 * Note: the SynoForce branding kit does NOT ship a
 * `montserrat-regular.woff2` file, only weights 100/200/300/500/
 * 600/700/800/900 and a 400 italic. For weight 400 (the Bootstrap
 * body default) we point at `montserrat-medium.woff2` so there is
 * always a real file behind `font-weight: 400`. The visual shift
 * between true-400 and medium is small at body sizes and keeps
 * the UI coherent. For italic-400 we use the actual italic file.
 *
 * Extra weights in the woff2 folder (thin/extralight/extrabold/
 * black) are left on disk for future design exploration but not
 * declared here so the browser doesn't hunt for files it won't use. */
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-light-italic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: local("Montserrat"), local("Montserrat-Regular"),
         url("/webfonts/montserrat/montserrat-medium.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-medium-italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-semibold-italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/webfonts/montserrat/montserrat-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* SynoForce, display face for brand accents only (see `.font-brand`). */
@font-face {
    font-family: "SynoForce";
    src: url("/webfonts/synoforce/synoforce-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "SynoForce";
    src: url("/webfonts/synoforce/synoforce-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.font-brand {
    font-family: var(--sf-font-brand, "SynoForce", "Montserrat", system-ui, sans-serif);
}

/* =====================================================================
 * synoforce.css
 *
 * SynoForce brand skin. Loaded after smartapp.min.css so its rules and
 * CSS-variable overrides win without us having to rebuild the vendor
 * stylesheet. Keep all SynoForce-specific colour, gradient, and chrome
 * tweaks here so the upstream UI-kit assets remain pristine and
 * trivially upgradable.
 *
 * Palette reference (see SynoForce Branding Color Guidelines):
 *   Primary       #01A2FD   Brand blue
 *   Light Primary #4ABCFE   Hover / secondary
 *   Dark          #253E74   Titles, UI chrome
 *   Darker        #0E182E   Headers, nav, hero
 *   Darkest       #070C17   Footers, dark mode base
 *   Accent        #2DE2E6   Highlights, focus rings
 *   Success       #10B981
 *   Warning       #F59E0B
 *   Error         #EF4444
 *   Info          #3B82F6
 * ===================================================================== */

/* ──────────────────────────────────────────────────────────────────────
   Brand tokens, defined at :root so they exist in BOTH light and dark
   modes. The previous version of this file scoped them with
   `:root:not([data-bs-theme="dark"])`, which made `var(--sf-primary)`
   resolve to `unset` in dark mode and silently broke .btn-primary
   styling. Don't repeat that, keep the colour palette here, and
   put per-mode overrides for Bootstrap tokens in the dedicated
   blocks below.
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Force brand BLUE onto Bootstrap primary tokens at :root level
       so SmartAdmin's :root overrides (purple #886ab5) don't silently
       revert them. Per brand guide: blue is the dominant colour (70-80%
       of UI), orange is reserved exclusively for CTAs (5-10%). */
    --bs-primary:        #01A2FD;
    --bs-primary-rgb:    1, 162, 253;
    --bs-link-color:     #01A2FD;
    --bs-link-color-rgb: 1, 162, 253;

    --sf-primary:        #01A2FD;
    --sf-primary-light:  #4ABCFE;
    --sf-dark:           #253E74;
    --sf-darker:         #0E182E;
    --sf-darkest:        #070C17;

    --sf-accent:         #2DE2E6;
    --sf-success:        #10B981;
    --sf-warning:        #F59E0B;
    --sf-error:          #EF4444;
    --sf-info:           #3B82F6;

    /* CTA Orange — reserved EXCLUSIVELY for revenue actions
       ("Get a Quote", "Sign Up", "Contact"). Never use in nav,
       core UI, or as a system warning colour. Target ratio is 5–10%
       of the surface area; blue must remain dominant. */
    --sf-cta:            #F97316;
    --sf-cta-hover:      #FB923C;
    --sf-cta-soft:       #FED7AA;

    --sf-bg-light:       #F7FAFC;
    --sf-bg-alt:         #EDF2F7;
    --sf-surface:        #FFFFFF;
    --sf-border:         #E2E8F0;
    --sf-border-hover:   #CBD5E1;
    --sf-text-muted:     #6B7280;
    --sf-disabled:       #A0AEC0;

    /* Shadow scale (level 1 = cards, 2 = hover, 3 = modals). */
    --sf-shadow-1:       0 1px 3px rgba(0, 0, 0, 0.05);
    --sf-shadow-2:       0 4px 8px rgba(0, 0, 0, 0.08);
    --sf-shadow-3:       0 10px 30px rgba(0, 0, 0, 0.15);
    --sf-shadow:         rgba(0, 0, 0, 0.12);

    --sf-text-primary:   #0E182E;
    --sf-text-secondary: #253E74;
    --sf-text-inverse:   #FFFFFF;

    --sf-overlay-tint:   rgba(1, 162, 253, 0.10);
    --sf-btn-shadow:     0 4px 12px rgba(1, 162, 253, 0.30);
    --sf-cta-shadow:     0 4px 14px rgba(249, 115, 22, 0.35);
    --sf-radius:         8px;

    --sf-gradient-sky:   linear-gradient(135deg, #01A2FD 0%, #4ABCFE 100%);
    --sf-gradient-night: linear-gradient(135deg, #0E182E 0%, #070C17 100%);
    --sf-gradient-aqua:  linear-gradient(135deg, #01A2FD 0%, #2DE2E6 100%);
    --sf-gradient-cta:   linear-gradient(135deg, #F97316 0%, #FB923C 100%);

    /* Brand font stacks. Montserrat is the app-wide body face; every
       Bootstrap component inherits it for free via --bs-body-font-family
       + --bs-font-sans-serif. SynoForce is reserved for the `.font-brand`
       accent utility. Both stacks fall through to a system-ui chain so
       the UI never hard-breaks if a font file 404s. */
    --sf-font-body:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-font-brand: "SynoForce", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --bs-body-font-family: var(--sf-font-body);
    --bs-font-sans-serif:  var(--sf-font-body);
}

/* Push the body font into html/body so anything that reads from the
   cascade (vendor UI-kit classes, plain text nodes) picks up Montserrat
   without depending on Bootstrap's --bs-body-font-family variable. */
html,
body {
    font-family: var(--sf-font-body);
}

/* Light-mode (default) Bootstrap variable overrides. The brand tokens
   above are global; only the BS-specific tokens are scoped per mode
   so dark mode can re-point body/text/border colours independently. */
[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    /* --- Bootstrap variable overrides --------------------------------- */
    /* Map Bootstrap's semantic tokens onto the SynoForce palette so that
       every BS-built component (.btn-primary, .text-primary, .alert-*,
       .bg-primary, etc.) inherits the brand without per-component CSS. */
    --bs-primary:                #01A2FD;
    --bs-primary-rgb:            1, 162, 253;
    --bs-primary-text-emphasis:  #0E182E;
    --bs-primary-bg-subtle:      #E6F5FF;
    --bs-primary-border-subtle:  #B8E0FE;

    --bs-success:                #10B981;
    --bs-success-rgb:            16, 185, 129;
    --bs-warning:                #F59E0B;
    --bs-warning-rgb:            245, 158, 11;
    --bs-danger:                 #EF4444;
    --bs-danger-rgb:             239, 68, 68;
    --bs-info:                   #3B82F6;
    --bs-info-rgb:               59, 130, 246;

    --bs-link-color:             #01A2FD;
    --bs-link-color-rgb:         1, 162, 253;
    --bs-link-hover-color:       #4ABCFE;
    --bs-link-hover-color-rgb:   74, 188, 254;

    --bs-body-color:             #0E182E;
    --bs-body-color-rgb:         14, 24, 46;
    --bs-body-bg:                #F7FAFC;
    --bs-body-bg-rgb:            247, 250, 252;

    --bs-border-color:           #E2E8F0;
    --bs-secondary-color:        #6B7280;
    --bs-tertiary-bg:            #F7FAFC;

    --bs-focus-ring-color:       rgba(1, 162, 253, 0.25);
    --bs-border-radius:          0.5rem;   /* 8px */

    /* --- UI-kit chrome variables (LIGHT mode) -------------------------
       With `set-nav-dark` removed from <html>, the sidebar and header
       use the vendor's default light styling. We override the chrome
       tokens for a white sidebar/header surface.

       IMPORTANT: --primary-900 must stay a dark colour because the
       vendor uses it in gradient + contrast calculations throughout
       the UI kit. Setting it to white breaks sidebar gradients and
       makes text invisible. Only --app-nav-background and
       --app-header-background control the actual surface colour. */
    --primary-900:               #0E182E;
    --app-nav-bg:                #FFFFFF;
    --app-nav-background:        #FFFFFF;
    --app-header-background:     #FFFFFF;
    --app-content-background:    #F7FAFC;

    /* Collapse icon: dark borders on a light header background. */
    --collapse-icon-border:       rgba(0, 0, 0, 0.25);
    --collapse-icon-border-hover: var(--sf-cta);
}

/* ---------------- Dark mode (data-bs-theme="dark") --------------------
   Mirrors the "Dark Mode Variants" block of the brand guide. The toggle
   button in the header flips `data-bs-theme` on <html>, so every token
   below kicks in atomically.

   Important: the vendor UI-kit paints the main content area from
   `--app-content-background` (NOT `--bs-body-bg`), and the cards use
   `--app-card-bg`. We have to override those too, otherwise dark mode
   only changes Bootstrap text colours and the body still looks light. */
[data-bs-theme="dark"] {
    /* Keep brand blue as primary in dark mode (links use lighter variant). */
    --bs-primary:                #01A2FD;
    --bs-primary-rgb:            1, 162, 253;
    --bs-primary-text-emphasis:  #FFFFFF;
    --bs-primary-bg-subtle:      #0a1f33;
    --bs-primary-border-subtle:  #0d3a66;

    --bs-body-bg:                #070C17;
    --bs-body-bg-rgb:            7, 12, 23;
    --bs-body-color:             #FFFFFF;
    --bs-body-color-rgb:         255, 255, 255;
    --bs-emphasis-color:         #FFFFFF;
    --bs-emphasis-color-rgb:     255, 255, 255;
    --bs-secondary-color:        #A0AEC0;
    --bs-secondary-bg:           #0E182E;
    --bs-tertiary-bg:            #0E182E;
    --bs-border-color:           #1a253f;
    --bs-heading-color:          #FFFFFF;

    --bs-link-color:             #4ABCFE;
    --bs-link-color-rgb:         74, 188, 254;
    --bs-link-hover-color:       #01A2FD;
    --bs-link-hover-color-rgb:   1, 162, 253;

    /* UI-kit chrome (DARK mode): dark navy sidebar/header. */
    --primary-900:               #070C17;
    --app-nav-bg:                #070C17;
    --app-nav-background:        #070C17;
    --app-header-background:     #070C17;
    --app-content-background:    #0E182E;
    --app-card-bg:               #0E182E;
    --app-panel-bg:              #0E182E;
    --app-dropdown-bg:           #0E182E;
    --app-layout-border-color:   #1a253f;

    /* Collapse icon flips to white on the dark header. */
    --collapse-icon-border:       rgba(255, 255, 255, 0.3);
    --collapse-icon-border-hover: var(--sf-cta);

    /* SynoForce surface tokens flipped for dark mode. The light
       defaults (#EDF2F7 / #0E182E) up at the top of this file are
       perfect for tiny badges where the contrast actually reads
       (light pill on dark page = visible tag), but they fall over
       on larger blocks: a `<pre class="bg-sf-alt">` rendered in
       a dark UI used to be a near-white panel that hurt to look
       at. Overriding inside the dark theme keeps the badge
       readable AND makes block-scale uses recede into the chrome. */
    --sf-bg-alt:         #1a253f;  /* slight contrast above card bg #0E182E */
    --sf-text-primary:   #FFFFFF;  /* match body color in dark mode */
}

/* Body background override, the vendor stylesheet paints <body> from
   a couple of different rules; force the dark navy so nothing slips
   through. */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-wrap,
[data-bs-theme="dark"] .app-body,
[data-bs-theme="dark"] .app-content {
    background-color: #070C17;
    color: #FFFFFF;
}

[data-bs-theme="dark"] .card {
    background-color: #0E182E;
    border-color: #1a253f;
    color: #FFFFFF;
}
[data-bs-theme="dark"] .card .card-title,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .subheader-title {
    color: #FFFFFF;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0E182E;
    border-color: #1a253f;
    color: #FFFFFF;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #A0AEC0;
}

/* Buttons in dark mode, Bootstrap's defaults inherit the light-mode
   palette via --bs-primary, but the tokens we set in [data-bs-theme=dark]
   above don't override --bs-primary, so the button looks fine in colour.
   What's NOT fine is the .btn-primary box-shadow we apply globally
   (the brand "lift" shadow looks washed-out on a dark surface) and the
   .btn-outline-primary border colour (still navy from the light theme,
   barely visible on the dark card). Re-skin both here. */
[data-bs-theme="dark"] .btn-primary {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(1, 162, 253, 0.45);
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active {
    background-color: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    background-color: transparent;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: #FFFFFF;
}
[data-bs-theme="dark"] .btn-secondary {
    background-color: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    color: var(--sf-darker);
}
[data-bs-theme="dark"] .btn-secondary:hover {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: #FFFFFF;
}

/* SmartAdmin hardcodes .btn-primary and .btn-outline-primary to
   purple (#886ab5) via inline --bs-btn-* variables. We must override
   them here with the brand BLUE. These rules must appear AFTER
   smartapp.min.css to win the cascade. */
.btn-primary {
    --bs-btn-bg:             var(--sf-primary);
    --bs-btn-border-color:   var(--sf-primary);
    --bs-btn-hover-bg:       var(--sf-primary-light);
    --bs-btn-hover-border-color: var(--sf-primary-light);
    --bs-btn-active-bg:      #0088d4;
    --bs-btn-active-border-color: #0088d4;
    --bs-btn-focus-shadow-rgb: 1, 162, 253;
    --bs-btn-disabled-bg:    var(--sf-primary);
    --bs-btn-disabled-border-color: var(--sf-primary);
    box-shadow: 0 2px 6px 0 rgba(1, 162, 253, 0.35);
}
.btn-outline-primary {
    --bs-btn-color:          var(--sf-primary);
    --bs-btn-border-color:   var(--sf-primary);
    --bs-btn-hover-bg:       var(--sf-primary);
    --bs-btn-hover-border-color: var(--sf-primary);
    --bs-btn-hover-color:    #fff;
    --bs-btn-active-bg:      var(--sf-primary);
    --bs-btn-active-border-color: var(--sf-primary);
    --bs-btn-focus-shadow-rgb: 1, 162, 253;
    --bs-btn-disabled-color: var(--sf-primary);
    --bs-btn-disabled-border-color: var(--sf-primary);
}
.text-primary { color: var(--sf-primary) !important; }
a { color: var(--sf-primary); }
a:hover { color: var(--sf-primary-light); }

/* Override remaining SmartAdmin purple (#886ab5) in form controls,
   nav pills, progress bars, and list groups. */
.form-check-input:checked {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}
.form-check-input:focus {
    border-color: var(--sf-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(1, 162, 253, 0.25);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--sf-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(1, 162, 253, 0.25);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--sf-primary);
}
.list-group-item.active {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}
.progress-bar {
    background-color: var(--sf-primary);
}
.bg-trans-gradient {
    background: var(--sf-gradient-sky) !important;
}
.page-item.active .page-link {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}
/* .badge.bg-primary and .border-primary already inherit the correct
   orange via --bs-primary-rgb set at :root. Do NOT force
   background-color here with !important, it will kill Bootstrap's
   .bg-opacity-* utilities (used for muted pill badges in tables). */

/* =====================================================================
 * Component-level brand polish
 * Each block here either re-skins a vendor UI-kit class that doesn't
 * pick up the BS variables on its own, or adds something the brand
 * guide explicitly calls out (gradients, shadows, focus rings).
 * ===================================================================== */

/* Page chrome --------------------------------------------------------
 * The header and sidebar are styled by the vendor `set-nav-dark` system
 * via the --app-nav-bg / --app-header-background tokens we override at
 * :root above. Don't set background here, the UI-kit layers a subtle
 * info-tinted gradient on top of those tokens, and overriding `background`
 * directly wipes that gradient and leaves the sidebar looking flat.
 *
 * The footer isn't covered by `set-nav-dark`, so we still skin it
 * explicitly. */
/* Light-mode footer: subtle grey. Dark-mode override below. */
.app-footer {
    background: var(--sf-bg-alt);
    color: var(--sf-text-muted);
    border-top: 1px solid var(--sf-border);
}
[data-bs-theme="dark"] .app-footer {
    background: var(--sf-darkest);
    color: var(--sf-disabled);
    border-top-color: var(--app-layout-border-color, #1a253f);
}

/* Brand logo sizing + theme-aware swap --------------------------------
 * Two logo <img>s sit in the DOM: .logo-light (blue on transparent,
 * for the light header) and .logo-dark (white on transparent, for
 * the dark header). CSS toggles visibility based on data-bs-theme
 * so the swap is instant with no JS and no flicker. */
.app-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1rem;
}
.app-logo img {
    max-height: 2.25rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.navbar-dark .navbar-brand img {
    max-height: 2.25rem;
    width: auto;
}

/* Logo visibility: four variants controlled by theme + sidebar state.
 * Expanded sidebar: full wordmark (logo-full-*).
 * Collapsed sidebar (set-nav-minified): coat icon (logo-coat-*).
 * Light mode: blue variants. Dark mode: white variants. */

/* ── Logo visibility ──────────────────────────────────────────────
 * Four logo variants. Controlled by:
 *   - data-bs-theme on <html>: light vs dark
 *   - .set-nav-minified on <html>: expanded vs collapsed sidebar
 *
 * The set-nav-minified class is on <html>, same element as
 * data-bs-theme, so selectors chain directly on the root. */

/* Expanded sidebar, light mode (default). */
.logo-full-light  { display: inline !important; }
.logo-full-dark   { display: none   !important; }
.logo-coat-light  { display: none   !important; }
.logo-coat-dark   { display: none   !important; }

/* Expanded sidebar, dark mode. */
[data-bs-theme="dark"] .logo-full-light { display: none   !important; }
[data-bs-theme="dark"] .logo-full-dark  { display: inline !important; }
[data-bs-theme="dark"] .logo-coat-light { display: none   !important; }
[data-bs-theme="dark"] .logo-coat-dark  { display: none   !important; }

/* Collapsed sidebar, light mode. */
html.set-nav-minified .logo-full-light { display: none   !important; }
html.set-nav-minified .logo-full-dark  { display: none   !important; }
html.set-nav-minified .logo-coat-light { display: inline !important; }
html.set-nav-minified .logo-coat-dark  { display: none   !important; }

/* Collapsed sidebar, dark mode. */
html.set-nav-minified[data-bs-theme="dark"] .logo-full-light { display: none   !important; }
html.set-nav-minified[data-bs-theme="dark"] .logo-full-dark  { display: none   !important; }
html.set-nav-minified[data-bs-theme="dark"] .logo-coat-light { display: none   !important; }
html.set-nav-minified[data-bs-theme="dark"] .logo-coat-dark  { display: inline !important; }

/* Sidebar logo (mobile drawer). The `.app-sidebar .app-logo`
   block uses simpler class names (`logo-light` / `logo-dark`),
   one for each theme. On desktop the whole sidebar logo is
   hidden by smartapp.css (`.app-sidebar .app-logo { display: none }`)
   so the missing toggle was invisible; on the mobile drawer the
   logo is shown and both images were stacking on top of each
   other. Toggle them based on the same data-bs-theme flag the
   header logos use. */
.app-sidebar .app-logo .logo-light  { display: inline !important; }
.app-sidebar .app-logo .logo-dark   { display: none   !important; }
[data-bs-theme="dark"] .app-sidebar .app-logo .logo-light { display: none   !important; }
[data-bs-theme="dark"] .app-sidebar .app-logo .logo-dark  { display: inline !important; }

/* Coat icon sizing + centering in the narrow minified logo area. */
.logo-coat-light,
.logo-coat-dark {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}
/* When minified, center the coat in the logo container. */
html.set-nav-minified .app-logo {
    justify-content: center;
    padding: 0 0.5rem;
}

/* Light sidebar/header: force clean white with no gradient.
 * The vendor applies a subtle info-tinted gradient on top of
 * --app-nav-background which looks good on a dark sidebar but
 * washes out text on a white one. We reset background-image to
 * none so the white surface is pure. */
.app-sidebar {
    background: #FFFFFF !important;
    background-image: none !important;
    border-right: 1px solid var(--sf-border);
}
.app-header {
    background: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sf-border);
}
.app-header .app-logo {
    background: #FFFFFF !important;
    background-image: none !important;
}
[data-bs-theme="dark"] .app-sidebar {
    background: #070C17 !important;
    background-image: none !important;
    border-right-color: var(--app-layout-border-color, #1a253f);
}
[data-bs-theme="dark"] .app-header {
    background: #070C17 !important;
    background-image: none !important;
    border-bottom-color: var(--app-layout-border-color, #1a253f);
}
[data-bs-theme="dark"] .app-header .app-logo {
    background: #070C17 !important;
    background-image: none !important;
}

/* Sidebar + header navigation colours --------------------------------
 * We override the vendor's nav CSS variables AND apply direct
 * element overrides as a belt-and-braces approach. The vendor
 * has multiple specificity layers (root, dark-theme, set-nav-dark)
 * that fight each other; direct overrides with !important are the
 * only reliable way to guarantee visibility in both themes. */
:root {
    --app-nav-link-color:            #343a40;
    --app-nav-link-hover-color:      var(--sf-primary);
    --app-nav-link-active-color:     var(--sf-primary);
    --app-nav-item-hover-bg:         rgba(1, 162, 253, 0.045);
    --app-nav-item-active-bg:        rgba(1, 162, 253, 0.07);
    --app-nav-item-active-indicator: var(--sf-primary);
}

/* Direct light-mode overrides: these win over vendor variable chains. */
.primary-nav ul li a {
    color: #343a40 !important;
}
.primary-nav ul li a:hover {
    color: var(--sf-primary) !important;
}
.primary-nav ul li.active > a {
    color: var(--sf-primary) !important;
}
.primary-nav .nav-title {
    color: #666666 !important;
}
.primary-nav ul li a .sa-icon {
    stroke: rgb(155, 155, 155) !important;
    fill: rgba(219, 219, 219, 0.3) !important;
}
.primary-nav ul li a:hover .sa-icon {
    stroke: var(--sf-primary) !important;
    fill: rgba(1, 162, 253, 0.08) !important;
}
.primary-nav ul li.active > a .sa-icon {
    stroke: var(--sf-primary) !important;
    fill: rgba(1, 162, 253, 0.12) !important;
}

/* Dark mode: white text, light icons. */
[data-bs-theme="dark"] {
    --app-nav-link-color:            rgba(255, 255, 255, 0.85);
    --app-nav-link-hover-color:      #FFFFFF;
    --app-nav-link-active-color:     #FFFFFF;
    --app-nav-item-hover-bg:         rgba(255, 255, 255, 0.06);
    --app-nav-item-active-bg:        rgba(255, 255, 255, 0.08);
    --app-nav-item-active-indicator: var(--sf-primary-light);
}

/* Dark-mode nav: override the light-mode !important rules above
 * with dark-mode-specific !important so the dark sidebar renders
 * white text and light icons. */
[data-bs-theme="dark"] .primary-nav ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}
[data-bs-theme="dark"] .primary-nav ul li a:hover {
    color: #FFFFFF !important;
}
[data-bs-theme="dark"] .primary-nav ul li.active > a {
    color: #FFFFFF !important;
}
[data-bs-theme="dark"] .primary-nav .nav-title {
    color: rgba(255, 255, 255, 0.4) !important;
}
[data-bs-theme="dark"] .primary-nav ul li a .sa-icon {
    stroke: rgba(255, 255, 255, 0.4) !important;
    fill: rgba(255, 255, 255, 0.05) !important;
}
[data-bs-theme="dark"] .primary-nav ul li a:hover .sa-icon {
    stroke: rgba(255, 255, 255, 0.9) !important;
    fill: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .primary-nav ul li.active > a .sa-icon {
    stroke: #FFFFFF !important;
    fill: rgba(255, 255, 255, 0.15) !important;
}

/* User dropdown notification header. */
.notification-header {
    background: var(--sf-bg-alt);
    color: var(--sf-text-primary);
}
[data-bs-theme="dark"] .notification-header {
    background: var(--sf-darker);
    color: #FFFFFF;
}

/* Header buttons (theme toggle, user avatar): need dark text in
 * light mode since the header background is now white. */
.app-header .btn-system {
    color: var(--bs-gray-800);
}
[data-bs-theme="dark"] .app-header .btn-system {
    color: rgba(255, 255, 255, 0.85);
}

/* Buttons ------------------------------------------------------------ */
.btn-primary {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: var(--sf-text-inverse);
    box-shadow: var(--sf-btn-shadow);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    color: var(--sf-text-inverse);
}

.btn-secondary {
    background-color: var(--sf-primary-light);
    border-color: var(--sf-primary-light);
    color: var(--sf-text-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
    color: var(--sf-text-inverse);
}

.btn-outline-primary {
    color: var(--sf-primary);
    border-color: var(--sf-primary);
}
.btn-outline-primary:hover {
    background-color: var(--sf-primary);
    color: var(--sf-text-inverse);
}

/* Brand-gradient secondary CTA, opt in via .btn-sf-gradient.
   Uses the Sky gradient. NOT a conversion CTA, for that use .btn-cta. */
.btn-sf-gradient {
    background: var(--sf-gradient-sky);
    border: 0;
    color: var(--sf-text-inverse);
    box-shadow: var(--sf-btn-shadow);
}
.btn-sf-gradient:hover {
    background: var(--sf-gradient-aqua);
    color: var(--sf-text-inverse);
}

/* Conversion CTA, orange, used exclusively for revenue actions
   ("Get a Quote", "Call Now", "Sign Up", "Contact us"). Per the brand
   rules: white text only, never in navigation, never adjacent to cyan,
   keep usage to ~5–10% of the screen. */
.btn-cta,
.btn-cta:visited {
    background-color: var(--sf-cta);
    border: 1px solid var(--sf-cta);
    color: #FFFFFF;
    box-shadow: var(--sf-cta-shadow);
    border-radius: var(--sf-radius);
    font-weight: 600;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
    background-color: var(--sf-cta-hover);
    border-color: var(--sf-cta-hover);
    color: #FFFFFF;
}
.btn-cta-gradient {
    background: var(--sf-gradient-cta);
    border: 0;
    color: #FFFFFF;
    box-shadow: var(--sf-cta-shadow);
    border-radius: var(--sf-radius);
    font-weight: 600;
}
.btn-cta-gradient:hover {
    filter: brightness(1.05);
    color: #FFFFFF;
}

/* Cards -------------------------------------------------------------- */
.card {
    background-color: var(--sf-surface);
    color: var(--sf-text-primary);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow-1);
    transition: box-shadow 150ms ease-in-out, border-color 150ms ease-in-out;
}
.card:hover {
    box-shadow: var(--sf-shadow-2);
    border-color: var(--sf-border-hover);
}
[data-bs-theme="dark"] .card:hover {
    border-color: #253E74;
}
.card .card-title {
    color: var(--sf-text-secondary);
}

/* Inputs / focus ring ------------------------------------------------ */
.form-control,
.form-select {
    border-color: var(--sf-border);
    border-radius: var(--sf-radius);
    color: var(--sf-text-primary);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 0.2rem rgba(1, 162, 253, 0.18);
}

/* Links --------------------------------------------------------------
 * Brand rule: links must underline on hover (do not rely on colour
 * change alone to indicate interactivity, accessibility requirement). */
a {
    color: var(--sf-primary);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--sf-primary-light);
    text-decoration: underline;
}
/* Don't force underlines on buttons or nav links that happen to be <a>. */
.btn:hover,
.btn:focus,
.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.app-sidebar a:hover,
.app-sidebar a:focus,
.app-header a:hover,
.app-header a:focus {
    text-decoration: none;
}

/* Headings inherit the brand's "Dark" navy on light backgrounds. */
h1, h2, h3, h4, h5, h6,
.subheader-title {
    color: var(--sf-text-secondary);
}

/* Auth layout (hero / Vanta backdrop) -------------------------------- */
.hero-section {
    background: var(--sf-gradient-night);
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--sf-text-inverse);
}
.hero-section .card {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
}
.navbar-dark .navbar-brand {
    color: var(--sf-text-inverse);
}

/* Modals / overlays -------------------------------------------------- */
.modal-content {
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow-3);
}
.modal-backdrop.show {
    background-color: var(--sf-darkest);
    opacity: 0.85;
}

/* Dark-theme modal surfaces. Bootstrap's default --bs-modal-bg is a
   light colour and doesn't flip automatically when SmartAdmin paints
   the shell dark — so the modal ends up a bright white slab with our
   dark-themed inputs inside (the "Edit check" broken look). Force the
   modal surfaces to match the dark card palette. */
[data-bs-theme="dark"] .modal-content {
    background-color: #0E182E;
    border-color: #1a253f;
    color: #FFFFFF;
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: #1a253f;
}
[data-bs-theme="dark"] .modal-title {
    color: #FFFFFF;
}
[data-bs-theme="dark"] .modal .form-label,
[data-bs-theme="dark"] .modal .form-check-label {
    color: #E2E8F0;
}
[data-bs-theme="dark"] .modal .form-text {
    color: #A0AEC0;
}
[data-bs-theme="dark"] .modal hr {
    border-color: #1a253f;
    opacity: 0.6;
}
/* Bootstrap's btn-close uses a dark-coloured SVG — invert it so the
   "×" is visible on the dark modal header. */
[data-bs-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alert tinting picks up the new --bs-*-rgb tokens automatically.
   Add explicit border-radius so all alerts hit the brand's 8px. */
.alert {
    border-radius: var(--sf-radius);
}

/* Utility helpers (opt-in) ------------------------------------------- */
.bg-sf-primary    { background-color: var(--sf-primary)        !important; }
.bg-sf-dark       { background-color: var(--sf-darker)         !important; }
.bg-sf-darkest    { background-color: var(--sf-darkest)        !important; }
.bg-sf-alt        { background-color: var(--sf-bg-alt)         !important; }
.bg-sf-cta        { background-color: var(--sf-cta)            !important; }
.bg-sf-gradient   { background: var(--sf-gradient-sky)         !important; }
.bg-sf-night      { background: var(--sf-gradient-night)       !important; }
.bg-sf-aqua       { background: var(--sf-gradient-aqua)        !important; }
.bg-sf-cta-grad   { background: var(--sf-gradient-cta)         !important; }

/* Brand text-colour utilities.
 *
 * Two things to note about the rules below:
 *
 *  1. We set `color` AND propagate the same value through any
 *     Bootstrap CSS variable that child components read from, so an
 *     element tagged `.text-sf-primary` retints its children too:
 *
 *       - `.badge` reads from `--bs-badge-color`. Without this, a
 *         `.badge.text-sf-primary` would inherit the badge default
 *         (#fff) because the variable is set on `.badge` itself and
 *         wins inside the element's own CSS variable scope.
 *       - `.btn-link`, inline `<a>` tags read from `--bs-link-color`.
 *
 *  2. `.badge.text-sf-primary` (compound) is listed as a
 *     belt-and-braces override. `.badge` also sets
 *     `--bs-badge-color: #fff` on itself; the variable value set on
 *     the same element via `.text-sf-primary` wins because of the
 *     `!important`, but browsers resolve var() lazily and some CSS
 *     processors order the cascade in surprising ways. The compound
 *     selector guarantees the colour regardless.
 */
.text-sf-primary  {
    color: var(--sf-primary)                               !important;
    --bs-badge-color: var(--sf-primary);
    --bs-link-color:  var(--sf-primary);
}
.text-sf-accent   {
    color: var(--sf-accent)                                !important;
    --bs-badge-color: var(--sf-accent);
    --bs-link-color:  var(--sf-accent);
}
.text-sf-cta      {
    color: var(--sf-cta)                                   !important;
    --bs-badge-color: var(--sf-cta);
    --bs-link-color:  var(--sf-cta);
}
.text-sf-muted    { color: var(--sf-text-muted)            !important; }

/* Compound fallback so `.badge.text-sf-*` wins even if a future
   vendor stylesheet sets `.badge` color with !important. Added
   specificity (.badge + utility = two classes) beats any single-
   class vendor rule that tries to reassert a white badge. */
.badge.text-sf-primary { color: var(--sf-primary) !important; }
.badge.text-sf-accent  { color: var(--sf-accent)  !important; }
.badge.text-sf-cta     { color: var(--sf-cta)     !important; }

.border-sf        { border-color: var(--sf-border)             !important; }
.shadow-sf-1      { box-shadow: var(--sf-shadow-1)             !important; }
.shadow-sf-2      { box-shadow: var(--sf-shadow-2)             !important; }
.shadow-sf-3      { box-shadow: var(--sf-shadow-3)             !important; }
.shadow-sf        { box-shadow: var(--sf-btn-shadow)           !important; }
.shadow-sf-cta    { box-shadow: var(--sf-cta-shadow)           !important; }

/* ───────────────────────────────────────────────────────────────────
   Form checkboxes + form-switches → brand orange.

   Bootstrap 5's default checkbox + switch tint comes from
   --bs-form-check-bg + a hard-coded SVG fill that produces the
   purple-ish blue we don't want. Override it to the SynoForce
   CTA orange (--sf-cta) so checkboxes / switches everywhere
   match the rest of the brand palette.

   Two pieces:
     1. The :checked background colour + border colour land on
        the orange CTA family.
     2. The Bootstrap-defined --bs-form-switch-bg gradient SVG
        is replaced with one that draws the switch knob in the
        same orange so the toggle is visually coherent in both
        states.

   Rules apply globally, every form-check / form-switch in the
   dashboard gets the brand colour without a per-element class.
   --------------------------------------------------------------- */
.form-check-input:checked {
    background-color: var(--sf-cta) !important;
    border-color:     var(--sf-cta) !important;
}
.form-check-input:focus {
    border-color: var(--sf-cta) !important;
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25) !important;
}
/* Form-switch knob: draw a white circle on the orange track
   when checked. The unchecked state keeps Bootstrap's default
   grey track + grey knob, only the checked side is brand. */
.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
/* Hover / active states stay on brand. */
.form-check-input:checked:hover,
.form-check-input:checked:active {
    background-color: var(--sf-cta-hover) !important;
    border-color:     var(--sf-cta-hover) !important;
}

/* ── Input-group focus → brand orange ──────────────────────────────
   SmartAdmin colours the .input-group-text suffix/prefix with
   --primary-500 (Bootstrap blue) when the input is focused. Override
   to the SynoForce CTA orange: just the border colour and text, keep
   the background transparent so it doesn't overpower the input.
   The box-shadow goes on the wrapper, not the individual input, so
   it outlines the whole group cleanly.
   ----------------------------------------------------------------- */
.input-group:focus-within .input-group-text {
    background-color: transparent !important;
    border-color:     var(--sf-cta) !important;
    color:            var(--sf-cta) !important;
}
.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-color: var(--sf-cta) !important;
    box-shadow: none !important;
}

/* ── Icon inline-flow fix ──────────────────────────────────────────
 * The vendor sets .sa-icon { display: block } which drops SVG
 * icons onto their own line when used inline with text (card
 * headers, list items, badges). Override to inline-block so the
 * icon sits beside the text naturally. The .me-1 / .me-2 margin
 * utilities already handle spacing.
 *
 * Also add the missing sa-icon-sm and sa-icon-lg size classes
 * that the vendor doesn't define (it only ships sa-icon-1x..10x). */
.sa-icon.me-1,
.sa-icon.me-2,
.sa-icon.me-3 {
    display: inline-block;
    vertical-align: middle;
}
/* When used inside a flex container the block display is fine,
 * but vertical alignment still needs help for icon+text rows. */
.d-flex > .sa-icon,
.d-inline-flex > .sa-icon {
    flex-shrink: 0;
}
.sa-icon-sm {
    --sa-icon-size: 1rem;
    width: 1rem;
    height: 1rem;
}
.sa-icon-lg {
    --sa-icon-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* ---------------- Buttons + icon contrast --------------------------
 * `.sa-icon` defaults to a fixed grey stroke and a faint fill, which
 * works on neutral surfaces but disappears on coloured buttons:
 *
 *   - btn-primary  (blue background)  → grey stroke vanishes
 *   - btn-success  (green background) → same problem
 *   - btn-warning  (yellow background) → same
 *
 * Force the icon to inherit `currentColor` whenever it sits inside a
 * `.btn`. This makes the SVG pick up the button's text colour, white
 * on filled solid variants, the variant colour on outline variants,
 * giving consistent contrast across every button in the app without
 * per-template overrides.
 *
 * The fill is forced to none because feather-style icons rely on
 * stroke for their shape; the default tinted fill would look like a
 * blurred halo on top of a coloured button. */
.btn .sa-icon {
    stroke: currentColor;
    fill: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile chrome overrides
   ──────────────────────────────────────────────────────────────────────────
   smartapp.css ships a few mobile defaults that don't match our brand —
   notably the mobile-menu (hamburger) button is `background:
   rgba(var(--danger), 0.9)` by default, which renders as a hot-pink/red
   pill that looks like a debug color. Override here so it blends with the
   header chrome on every mobile device. Theme-aware via Bootstrap CSS
   custom properties — works on both light and dark.
*/
.mobile-menu-icon {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}
.mobile-menu-icon:hover,
.mobile-menu-icon:active,
.mobile-menu-icon:focus {
    background: var(--bs-secondary-bg);
}
.mobile-menu-icon .sa-icon {
    fill: none;
    stroke: var(--bs-body-color);
}

/* Compact the page-title / subheader on phones. The default 1rem
   bold-uppercase line + 2rem bottom margin eats ~80px of vertical
   real-estate when stacked with the breadcrumb above it; on a 412px
   viewport that's a meaningful fraction of the fold. Tighten size +
   spacing below `sm` (576px) since the breadcrumb already provides
   the page-context label. */
@media (max-width: 575.98px) {
    .subheader-title {
        font-size: .9rem;
        margin-bottom: 1rem !important;
        letter-spacing: 0.04em;
    }
    .subheader-title small,
    .subheader-title .small {
        font-size: .85rem;
        line-height: 1.4;
        margin-bottom: .5rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile drawer close affordances
   ──────────────────────────────────────────────────────────────────────────
   smartapp ships the open-drawer state but no close affordances —
   when the drawer is open it overlays the hamburger button (its
   z-index is master+1), and there's no backdrop / close button /
   tap-outside handler in the vendor CSS. Operators ended up stuck
   with an open drawer and had to reload the page.

   Adds:
     - `.mobile-menu-backdrop` overlay, fades in when the body
       has `app-mobile-menu-open`. Tapping it closes (JS handler).
     - `.mobile-menu-close` X button inside the drawer header.
   The slide-out itself is still smartapp's job (transform on
   `.app-sidebar`).

   Both elements are hidden via `d-lg-none` on the markup itself,
   so this CSS only fires below `lg` (≤991.98px).
*/
.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-index-master);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.mobile-menu-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.mobile-menu-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-close .sa-icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    fill: none;
}
.mobile-menu-close:hover,
.mobile-menu-close:active,
.mobile-menu-close:focus {
    background: var(--bs-secondary-bg);
}
/* Keep the close button hidden once the desktop sidebar is docked. */
@media (min-width: 992px) {
    .mobile-menu-close,
    .mobile-menu-backdrop { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile sidebar — make the menu actually scrollable
   ──────────────────────────────────────────────────────────────────────────
   The smartapp UI kit ships `.primary-nav` with `class="custom-scroll"`,
   which expects a slimscroll-JS plugin to create a custom scrollbar.
   The plugin isn't wired up here, so the underlying CSS rule
   `body:not(.no-slimscroll) .custom-scroll { overflow: hidden; }`
   wins (specificity 0,2,1) and the menu has NO scroll at all.

   On desktop the `.app-sidebar` itself provides the scroll, but on
   mobile the sidebar uses `display: flex; flex-direction: column`
   with `.primary-nav { flex-grow: 1 }` — that pins the nav's height
   to "viewport minus logo" and `overflow: hidden` then clips every
   item past the fold. Operators couldn't reach anything below the
   ~9th menu entry on a phone.

   Force native overflow scrolling on the menu container at the
   mobile breakpoint. `-webkit-overflow-scrolling: touch` keeps the
   inertial scroll on older iOS Safari (≤ 12). The `!important`
   beats the higher-specificity smartapp rule above without us
   having to maintain a body-class flag.
*/
@media (max-width: 991.98px) {
    .app-sidebar .primary-nav.custom-scroll,
    .app-sidebar .primary-nav {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Bottom padding so the last item isn't flush against the
           safe-area edge on iPhone notch / home-indicator phones. */
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}