/*
Template   : Dreams Core - Layout showcase
Scope      : layout-*.html only (linked from partials/header.html). Every rule is keyed to
             <html data-layout="..."> so the standard admin pages never see any of it.
Approach   : the pages reuse the existing shell (.app-shell / .app-sidebar / .app-main /
             .app-header) and only override its geometry per layout. Nothing in style.css is edited.
Layers     : component rules join style.css's `components` layer, so Tailwind utilities still win
             over them. style.css declares its surface/colour tokens and a few classes (.u-*,
             .field-control) outside any layer, and unlayered rules beat layered ones - so token
             overrides live in the unlayered block below, and the few remaining collisions with
             utilities or unlayered classes use `!important`.
Responsive : structural overrides sit inside `@media (min-width: 1024px)`. Below that every layout
             falls back to the template's own mobile behaviour (off-canvas sidebar drawer).
Shell vars : --ly-sidebar-w (sidebar width / content offset), --layout-max (content max-width).
*/

/* ===========================================================================
   Tokens (unlayered on purpose: see "Layers" above; specificity decides here)
   =========================================================================== */
html[data-layout="container"]:not([data-theme="dark"]) {
  --surface-canvas: #eff3f1;
}
html[data-layout="detached-sidebar"]:not([data-theme="dark"]) {
  --surface-canvas: #edf1ef;
  --border-subtle: rgb(16 24 20 / 0.07);
}

/* Any layout in the dark theme: the theme's semantic scales run dark-to-light, which leaves their
   500 steps - the ones charts, sparklines, stars and badges draw with - too dim on a dark surface.
   Point them at the light end of each scale (layout pages only). */
html[data-layout][data-theme="dark"] {
  --color-success-500: var(--color-success-900);
  --color-warning-500: var(--color-warning-hover);
  --color-danger-500: var(--color-danger-hover);
  --color-info-500: var(--color-info-hover);
}

/* Layout widths and offsets */
html[data-layout="container"] {
  --layout-max: 1140px;
}
html[data-layout="wide"] {
  --layout-max: 1760px;
}
html[data-layout="two-sidebar"] {
  --ly-sidebar-w: 344px;
}
html[data-layout="detached-sidebar"] {
  --ly-sidebar-w: 268px;
  --ly-gap: 14px;
}
html[data-layout="horizontal-menu"] {
  --ly-sidebar-w: 0px;
}

@layer components {
  @keyframes layout-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* =========================================================================
     Shared geometry
     ========================================================================= */
  @media (min-width: 1024px) {
    html[data-layout] .app-sidebar {
      width: var(--ly-sidebar-w, 250px);
    }
    html[data-layout] .app-main {
      margin-inline-start: var(--ly-sidebar-w, 250px);
    }
  }

  /* The collapse toggle would persist a state the demos deliberately ignore. */
  html[data-layout] #sidebarCollapseBtn {
    display: none !important;
  }

  /* The breadcrumb bar's inner width follows --layout-max (the partial hard-codes 1600px). */
  html[data-layout] .app-main > div.border-b > div {
    max-width: var(--layout-max, 1600px) !important;
  }

  /* the breadcrumb's brand-coloured link is too dim on a dark surface (a utility sets its colour) */
  html[data-layout][data-theme="dark"] .app-main > div.border-b a {
    color: var(--color-primary-300) !important;
  }

  /* Between lg and xl the header can't fit Explore/Apps beside search, Quick Create and the user
     menu (also true of the standard pages), so the group yields instead of overflowing. */
  @media (min-width: 1024px) and (max-width: 1279px) {
    html[data-layout] .app-header > div + div > .lg\:flex {
      display: none !important;
    }
    html[data-layout] #headerSearchBar {
      min-width: 0;
    }
    /* ...and "Quick Create" keeps to one line instead of wrapping in the squeezed header */
    html[data-layout] .app-header .hs-dropdown-toggle {
      white-space: nowrap;
    }
  }

  /* The 336px two-sidebar layout leaves xl screens as little room as lg ones elsewhere. */
  @media (min-width: 1280px) and (max-width: 1439px) {
    html[data-layout="two-sidebar"] .app-header > div + div > .lg\:flex {
      display: none !important;
    }
  }

  /* Grid items must be allowed to shrink below their content, or a wide table inside a card
     stretches the single phone column (and the whole page) to the table's minimum width. */
  html[data-layout] .bento-grid > * {
    min-width: 0;
  }

  /* Rail tooltip / sub-page flyout (created by the sidebar block in script.js). */
  .sidebar-flyout {
    position: fixed;
    z-index: 60;
    min-width: 12rem;
    max-width: 17rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    padding: 0.4rem;
    border-radius: 10px;
    background: var(--sidebar-bg);
    border: 1px solid rgb(255 255 255 / 0.1);
    box-shadow: var(--shadow-xl);
    animation: layout-fade-in 0.14s ease both;
  }
  .sidebar-flyout[hidden] {
    display: none;
  }
  .sidebar-flyout-title {
    padding: 0.35rem 0.6rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.5);
  }
  .sidebar-flyout.is-tooltip {
    min-width: 0;
    width: max-content;
    padding: 0;
    border-radius: 7px;
  }
  .sidebar-flyout.is-tooltip .sidebar-flyout-title {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sidebar-text-active);
  }

  /* =========================================================================
     Detached sidebar: floating panels with a gap on every side
     ========================================================================= */
  @media (min-width: 1024px) {
    html[data-layout="detached-sidebar"] .app-sidebar {
      inset-block: var(--ly-gap);
      inset-inline-start: var(--ly-gap);
      border-radius: 22px;
    }
    html[data-layout="detached-sidebar"] .app-main {
      margin-inline-start: calc(var(--ly-sidebar-w) + 2 * var(--ly-gap));
    }
    html[data-layout="detached-sidebar"] .app-header {
      top: var(--ly-gap);
      margin-block-start: var(--ly-gap);
      margin-inline-end: var(--ly-gap);
      border-radius: 20px;
    }
    /* the straight accent line would poke out of the rounded header */
    html[data-layout="detached-sidebar"] .app-header > div:first-child {
      display: none;
    }
    html[data-layout="detached-sidebar"] .app-sidebar {
      border: 1px solid rgb(255 255 255 / 0.07);
      box-shadow: var(--shadow-xl);
    }
    html[data-layout="detached-sidebar"] .app-header {
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-md);
    }
  }
  html[data-layout="detached-sidebar"] .app-main > div.border-b {
    background: transparent !important;
    border-bottom-width: 0 !important;
  }

  /* =========================================================================
     Two sidebar: a module rail beside a panel of that module's pages. A light, airy sidebar (soft
     tinted rail, white floating tiles, primary-gradient accents); the dark theme keeps it dark.
     --tc-o is the ink used for every hairline / tint, so one set of rules serves both themes.
     ========================================================================= */
  .two-col-sidebar {
    --tc-o: 16 28 22;
    --tc-panel: #fbfcfb;
    --tc-rail: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-500) 9%, #fff), color-mix(in oklab, var(--color-primary-500) 3%, #f4f6f5));
    --tc-tile: #fff;
    --sidebar-bg: var(--tc-panel);
    --sidebar-text: color-mix(in oklab, var(--color-neutral-900) 62%, #fff);
    --sidebar-text-active: var(--color-neutral-900);
    --sidebar-border: rgb(var(--tc-o) / 0.08);
    flex-direction: row;
    width: min(var(--ly-sidebar-w, 344px), 92vw);
    background: var(--tc-panel);
    box-shadow: 18px 0 48px -26px rgb(var(--tc-o) / 0.35);
  }
  html[data-theme="dark"] .two-col-sidebar {
    --tc-o: 255 255 255;
    --tc-panel: #0e1210;
    --tc-rail: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-700) 40%, #0a0d0c), #070908);
    --tc-tile: rgb(255 255 255 / 0.07);
    --sidebar-bg: var(--tc-panel);
    --sidebar-text: rgb(255 255 255 / 0.6);
    --sidebar-text-active: #fff;
    box-shadow: 18px 0 48px -22px rgb(0 0 0 / 0.7);
  }

  /* ---- Rail ---- */
  .two-col-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 1rem;
    width: 74px;
    padding-block: 1rem;
    background: var(--tc-rail);
    border-inline-end: 1px solid rgb(var(--tc-o) / 0.08);
  }
  .two-col-logo {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.95rem;
    background: var(--tc-tile);
    box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgb(var(--tc-o) / 0.08), 0 10px 20px -10px rgb(var(--tc-o) / 0.5);
  }
  .two-col-logo img {
    width: 1.65rem;
    height: 1.65rem;
  }
  .two-col-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 0;
    padding: 0.35rem 0.75rem;
    overflow-y: auto;
  }
  .two-col-tab {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border-radius: 0.95rem;
    color: var(--sidebar-text);
    background: transparent;
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease;
  }
  .two-col-tab:hover {
    background: var(--tc-tile);
    color: var(--sidebar-text-active);
    box-shadow: 0 0 0 1px rgb(var(--tc-o) / 0.08), 0 8px 16px -10px rgb(var(--tc-o) / 0.5);
  }
  .two-col-tab.active {
    color: #fff;
    background: linear-gradient(145deg, var(--color-primary-400), var(--color-primary-700));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.35),
      0 14px 24px -10px color-mix(in oklab, var(--color-primary-600) 90%, transparent);
  }
  .two-col-tip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .two-col-rail-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .two-col-tab-mini {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* ---- Panel ---- */
  .two-col-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.9rem 0.85rem;
    overflow: hidden;
  }
  .two-col-scroll {
    flex: 1;
    min-height: 0;
    margin-inline: -0.35rem;
    padding-inline: 0.35rem;
    overflow-y: auto;
  }
  .two-col-hero {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.2rem 0 0.85rem;
    padding: 0.8rem;
    border-radius: 1.05rem;
    background:
      radial-gradient(120% 160% at 0% 0%, color-mix(in oklab, var(--color-primary-500) 20%, transparent), transparent 70%),
      var(--tc-tile);
    box-shadow: 0 0 0 1px rgb(var(--tc-o) / 0.07), 0 12px 24px -16px rgb(var(--tc-o) / 0.5);
  }
  .two-col-hero-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: #fff;
    background: linear-gradient(145deg, var(--color-primary-400), var(--color-primary-700));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 10px 18px -8px color-mix(in oklab, var(--color-primary-600) 90%, transparent);
  }
  .two-col-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sidebar-text-active);
  }
  .two-col-hero small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--sidebar-text);
  }
  .two-col-panel .sidebar-link {
    gap: 0.7rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.85rem;
    color: var(--sidebar-text);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .two-col-panel .sidebar-link > i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.65rem;
    background: rgb(var(--tc-o) / 0.05);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .two-col-panel .sidebar-link:hover {
    background: rgb(var(--tc-o) / 0.045);
    color: var(--sidebar-text-active);
  }
  .two-col-panel .sidebar-link:hover > i {
    background: color-mix(in oklab, var(--color-primary-500) 16%, transparent);
    color: var(--color-primary-600);
  }
  .two-col-panel .sidebar-link.is-active,
  .two-col-panel .sidebar-link.active {
    position: relative;
    color: var(--sidebar-text-active);
    background: var(--tc-tile);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary-500) 28%, transparent), 0 10px 20px -14px color-mix(in oklab, var(--color-primary-600) 80%, transparent);
  }
  .two-col-panel .sidebar-link.is-active::before,
  .two-col-panel .sidebar-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.35rem;
    top: 26%;
    bottom: 26%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary-500);
    box-shadow: 0 0 10px var(--color-primary-400);
  }
  .two-col-panel .sidebar-link.is-active > i,
  .two-col-panel .sidebar-link.active > i {
    color: #fff;
    background: linear-gradient(145deg, var(--color-primary-400), var(--color-primary-600));
    box-shadow: 0 6px 12px -6px var(--color-primary-600);
  }
  .two-col-panel .sidebar-group-title {
    margin-top: 1rem;
    padding-inline: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    opacity: 0.7;
  }

  /* ---- Footer: storage + profile ---- */
  .two-col-plan {
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    color: var(--sidebar-text);
    background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary-500) 14%, transparent), transparent), var(--tc-tile);
    box-shadow: 0 0 0 1px rgb(var(--tc-o) / 0.07);
  }
  .two-col-plan b {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sidebar-text-active);
  }
  .two-col-plan span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary-600);
  }
  .two-col-plan small {
    font-size: 0.68rem;
  }
  .two-col-bar {
    height: 6px;
    margin-block: 0.5rem 0.4rem;
    border-radius: 99px;
    background: rgb(var(--tc-o) / 0.1);
    overflow: hidden;
  }
  .two-col-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
  }
  .two-col-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: 1rem;
    color: var(--sidebar-text);
    background: var(--tc-tile);
    box-shadow: 0 0 0 1px rgb(var(--tc-o) / 0.07);
    transition: box-shadow 0.15s ease;
  }
  .two-col-user:hover {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary-500) 40%, transparent);
  }
  .two-col-user b {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sidebar-text-active);
  }
  .two-col-user small {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  /* =========================================================================
     Horizontal menu: a bar under the header, no sidebar
     ========================================================================= */
  html[data-layout="horizontal-menu"] .app-header a[aria-label="Dreams Core"] {
    display: block !important;
  }
  html[data-layout="horizontal-menu"] .app-header #mobileSidebarBtn {
    display: none !important;
  }
  /* (padding lives on the nav: a global base rule zeroes every <ul>'s padding with !important) */
  .app-topnav {
    position: sticky;
    top: 4.0625rem;
    z-index: 25;
    padding: 0.35rem 1rem;
    background: color-mix(in oklab, var(--surface-base) 94%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  @media (min-width: 1024px) {
    .app-topnav {
      padding-inline: 1.5rem;
    }
  }
  .app-topnav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
  }
  /* a global list rule gives every non-last <li> a bottom margin, which would skew the row */
  .app-topnav-list > li {
    margin-bottom: 0 !important;
  }
  .topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .topnav-link:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
  }
  .topnav-link.is-active {
    background: color-mix(in oklab, var(--color-primary-500) 13%, transparent);
    color: var(--color-primary-600);
  }
  .topnav-menu {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
  }
  .topnav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
  }
  .topnav-item:hover {
    background: var(--surface-sunken);
  }
  .topnav-item.is-active {
    background: color-mix(in oklab, var(--color-primary-500) 13%, transparent);
    color: var(--color-primary-600);
  }

  /* =========================================================================
     Stacked header: a utility strip above the header, a sub-navigation strip below
     ========================================================================= */
  .layout-utility-bar {
    background: var(--color-primary-900);
    color: rgb(255 255 255 / 0.85);
  }
  .layout-subnav {
    position: sticky;
    top: 4.0625rem;
    z-index: 25;
    background: color-mix(in oklab, var(--surface-base) 94%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .subnav-link {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
  }
  .subnav-link:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
  }
  .subnav-link.is-active {
    background: var(--color-primary-600);
    color: #fff;
  }

  /* =========================================================================
     Transparent header: overlays a gradient hero, no background of its own
     ========================================================================= */
  html[data-layout="transparent-header"] .app-main {
    position: relative;
    padding-top: 65px;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-primary-500) 24%, var(--surface-canvas)),
      var(--surface-canvas) 420px
    );
  }
  html[data-layout="transparent-header"] .app-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  html[data-layout="transparent-header"] .app-header > div:first-child {
    display: none;
  }
  html[data-layout="transparent-header"] .app-main > div.border-b {
    background: transparent !important;
    border-bottom-color: transparent !important;
  }

  /* =========================================================================
     Drawer layouts (fullscreen, bottom navigation): the sidebar is off-canvas at every width
     ========================================================================= */
  @media (min-width: 1024px) {
    .app-shell[data-sidebar-mode="drawer"] .app-sidebar {
      transform: translateX(-100%);
    }
    .app-shell[data-sidebar-mode="drawer"] .app-sidebar.is-mobile-open {
      transform: none;
      box-shadow: var(--shadow-xl);
    }
    .app-shell[data-sidebar-mode="drawer"] .app-main {
      margin-inline-start: 0;
    }
    /* the header's menu button and logo are mobile-only; here they are the way into the drawer */
    .app-shell[data-sidebar-mode="drawer"] .app-header #mobileSidebarBtn {
      display: inline-flex !important;
    }
    .app-shell[data-sidebar-mode="drawer"] .app-header a[aria-label="Dreams Core"] {
      display: block !important;
    }
  }

  /* Fullscreen: a slim header (no search or Explore group), and edge-to-edge content without gutters */
  html[data-layout="fullscreen"] .app-header > div + div > .lg\:flex,
  html[data-layout="fullscreen"] .app-header #headerSearchBar {
    display: none !important;
  }
  html[data-layout="fullscreen"] .app-header > div + div {
    height: 3.5rem !important;
  }
  html[data-layout="fullscreen"] main {
    padding: 0.75rem !important;
  }

  /* =========================================================================
     Wide (icon rail): a hairline divider stands in for the hidden group titles
     ========================================================================= */
  @media (min-width: 1024px) {
    .app-shell.is-collapsed .app-sidebar .sidebar-group-title {
      display: block !important;
      height: 1px;
      margin: 0.55rem 0.9rem;
      padding: 0;
      overflow: hidden;
      font-size: 0;
      background: var(--sidebar-border);
    }
  }

  /* =========================================================================
     Container: show the container's edges
     ========================================================================= */
  html[data-layout="container"] main {
    outline: 1px dashed color-mix(in oklab, var(--color-primary-500) 45%, transparent);
    outline-offset: -1px;
    background: color-mix(in oklab, var(--surface-base) 55%, transparent);
  }

  /* =========================================================================
     Right sidebar and RTL: a sidebar docked on the physical right edge (the drawer slides in from
     the right). The right-sidebar layout moves it there; in RTL it is already there, because the
     template docks it to the inline start.
     ========================================================================= */
  html[data-layout="right-sidebar"] .app-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  :is(html[data-layout="right-sidebar"], html[data-layout="rtl"]) .app-sidebar {
    border-right: 0;
    border-left: 1px solid var(--sidebar-border);
  }
  @media (min-width: 1024px) {
    html[data-layout="right-sidebar"] .app-main {
      margin-inline-start: 0;
      margin-inline-end: var(--ly-sidebar-w, 250px);
    }
  }
  @media (max-width: 1023px) {
    :is(html[data-layout="right-sidebar"], html[data-layout="rtl"]) .app-sidebar {
      transform: translateX(100%);
    }
    :is(html[data-layout="right-sidebar"], html[data-layout="rtl"]) .app-sidebar.is-mobile-open {
      transform: translateX(0);
    }
  }

  /* =========================================================================
     RTL (<html dir="rtl">): flex and grid order, the sidebar's docking and every logical
     margin / padding / inset in the template mirror on their own. What is left is the handful of
     things written with physical left/right: the sub-menu indent, the active-link fade, the
     direction-bearing icons, Tailwind's text-left / text-right and the slide-in offsets.
     ========================================================================= */
  html[data-layout="rtl"] .sidebar-submenu {
    margin-inline: 1.55rem 0;
    padding-inline: 1rem 0;
  }
  html[data-layout="rtl"] .sidebar-link.is-active {
    background: linear-gradient(
      270deg,
      color-mix(in oklab, var(--color-primary-500) 24%, transparent),
      transparent
    );
  }
  html[data-layout="rtl"] .sidebar-link {
    transition-property: background-color, color, padding;
  }
  /* sub-menu chevrons: pointing left when closed, down when open (same function list, so the
     turn still animates) */
  html[data-layout="rtl"] .sidebar-chevron {
    transform: scaleX(-1) rotate(0deg);
  }
  html[data-layout="rtl"] li.is-open > .sidebar-link .sidebar-chevron {
    transform: scaleX(-1) rotate(90deg);
  }
  /* Arrows, chevrons and sign-in / sign-out point the other way. The up-right arrows in the content
     are trend indicators (up = growth), which keep their meaning, so only the header's link
     arrows are mirrored. */
  html[data-layout="rtl"] :is(.icon-arrow-left, .icon-arrow-right, .icon-log-in, .icon-log-out),
  html[data-layout="rtl"] .app-header .icon-arrow-up-right {
    transform: scaleX(-1);
  }
  /* The text on the page is English, so every text run takes its own base direction: under a plain RTL
     base the trailing full stop, a leading "+" / "-" and number ranges ("6-9 PM") land on the wrong
     end. Paragraphs still align to the right, like the rest of the mirrored page. */
  html[data-layout="rtl"] body :is(p, span, li, td, th, h1, h2, h3, h4, a, strong, small, label) {
    unicode-bidi: plaintext;
  }
  /* Sidebar labels are English runs (plaintext, see above), so "start" would put a wrapped label on the
     left while its one-line neighbours sit on the right. Fill the row and align them all to the right. */
  html[data-layout="rtl"] .sidebar-label,
  html[data-layout="rtl"] .sidebar-group-title {
    flex: 1;
    text-align: right;
  }
  html[data-layout="rtl"] main p {
    text-align: right;
  }
  /* (the utilities layer outranks this one, hence the !important on the Tailwind overrides below) */
  html[data-layout="rtl"] .text-left {
    text-align: right !important;
  }
  html[data-layout="rtl"] .text-right {
    text-align: left !important;
  }
  /* the Explore menu's link arrows slide in from the start side */
  html[data-layout="rtl"] .-translate-x-1:not(:where(.group:hover) *) {
    --tw-translate-x: 0.25rem !important;
  }
  /* ApexCharts places its labels with SVG text-anchor, which follows `direction`; the plots stay
     left-to-right (legends and tooltips are HTML and do mirror) */
  html[data-layout="rtl"] .apexcharts-svg {
    direction: ltr;
  }
  /* The Messages drawer is docked to the inline end (the left edge in RTL), but the script slides it
     with a physical translateX(100%) (closed) / translateX(0) (open) written to its inline style, so
     its closed position is mirrored here. */
  html[data-layout="rtl"] #chatOffcanvas:not([style*="translateX(0"]) {
    transform: translateX(-100%) !important;
  }
  /* the Explore menu is centred under the header with start-1/2 plus a -50% shift; start is the right
     edge here, so the shift reverses */
  html[data-layout="rtl"] .start-1\/2.-translate-x-1\/2 {
    --tw-translate-x: 50% !important;
  }

  /* =========================================================================
     Bottom navigation: a floating glass dock. Each item is an icon on a soft pill with its label
     underneath; the current section fills its pill with the brand gradient.
     ========================================================================= */
  .bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    display: flex;
    gap: 0.125rem;
    width: min(30rem, calc(100% - 1.5rem));
    margin-inline: auto;
    padding: 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: 1.75rem;
    background: color-mix(in oklab, var(--surface-raised) 80%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow:
      0 18px 40px -14px rgb(16 24 20 / 0.32),
      0 2px 6px rgb(16 24 20 / 0.06),
      inset 0 1px 0 rgb(255 255 255 / 0.55);
  }
  html[data-theme="dark"] .bottom-nav {
    box-shadow:
      0 18px 40px -14px rgb(0 0 0 / 0.7),
      inset 0 1px 0 rgb(255 255 255 / 0.07);
  }
  .bottom-nav-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.125rem 0.2rem;
    border-radius: 1.25rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }
  .bottom-nav-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.25rem;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-item:hover {
    color: var(--text-primary);
  }
  .bottom-nav-item:hover .bottom-nav-icon {
    background: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
    transform: translateY(-2px);
  }
  .bottom-nav-item:active .bottom-nav-icon {
    transform: scale(0.92);
  }
  .bottom-nav-item:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }
  .bottom-nav-item.is-active {
    color: var(--color-primary-700);
    font-weight: 700;
  }
  .bottom-nav-item.is-active .bottom-nav-icon {
    background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-700));
    color: #fff;
    box-shadow: var(--shadow-glow-primary);
  }
  html[data-theme="dark"] .bottom-nav-item.is-active {
    color: var(--color-primary-300);
  }
  .bottom-nav-badge {
    position: absolute;
    top: -0.2rem;
    inset-inline-end: 0.55rem;
    min-width: 1rem;
    height: 1rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background: var(--color-danger-500);
    box-shadow: 0 0 0 2px var(--surface-raised);
  }
  @media (max-width: 400px) {
    .bottom-nav {
      width: calc(100% - 1rem);
    }
    .bottom-nav-icon {
      width: 2.875rem;
    }
  }
  html[data-layout="bottom-navigation"] .app-main {
    padding-bottom: 6.5rem;
  }
  html[data-layout="bottom-navigation"] #scrollToTopBtn {
    bottom: 6.75rem !important;
  }


  /* =========================================================================
     Motion preferences
     ========================================================================= */
  @media (prefers-reduced-motion: reduce) {
    .sidebar-flyout,
    .bottom-nav {
      animation: none !important;
    }
    .bottom-nav-item,
    .bottom-nav-icon {
      transition: none !important;
    }
  }
}

/* Dark mode layout: a true-dark shell (the page and its sidebar together) - near-black canvas, a deeper
   sidebar than the standard dark theme, and softly lit links. */
html[data-layout="dark-mode"][data-theme="dark"] {
  --surface-canvas: #08090a;
  --surface-base: #0f1211;
  --surface-raised: #141816;
  --sidebar-bg: #050606;
  --sidebar-bg-active: #121815;
  --sidebar-border: rgb(255 255 255 / 0.07);
  --sidebar-text: rgb(255 255 255 / 0.5);
}
@layer components {
  html[data-layout="dark-mode"] .app-sidebar {
    background:
      radial-gradient(90% 40% at 0% 0%, color-mix(in oklab, var(--color-primary-500) 14%, transparent), transparent 70%),
      var(--sidebar-bg);
    box-shadow: 1px 0 0 rgb(255 255 255 / 0.04), 12px 0 40px -16px rgb(0 0 0 / 0.8);
  }
  html[data-layout="dark-mode"] .sidebar-link {
    border: 1px solid transparent;
    border-radius: 0.65rem;
  }
  html[data-layout="dark-mode"] .sidebar-link:hover {
    background: rgb(255 255 255 / 0.05);
  }
  html[data-layout="dark-mode"] .sidebar-link.is-active {
    background: linear-gradient(
      90deg,
      color-mix(in oklab, var(--color-primary-500) 28%, transparent),
      color-mix(in oklab, var(--color-primary-500) 6%, transparent)
    );
    border-color: color-mix(in oklab, var(--color-primary-300) 26%, transparent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 24px -10px var(--color-primary-500);
  }
  html[data-layout="dark-mode"] .sidebar-group-title {
    letter-spacing: 0.12em;
    opacity: 0.6;
  }
  html[data-layout="dark-mode"] .surface-card {
    border-color: rgb(255 255 255 / 0.07);
  }
}

/* Dark mode layout, fully dark: native controls, scrollbars and form fields follow the dark scheme, the
   header / breadcrumb / footer / menus sit on the near-black surfaces, and the theme switcher is hidden
   (the page is locked dark and must not write a saved theme). */
html[data-layout="dark-mode"] {
  color-scheme: dark;
}
html[data-layout="dark-mode"] body {
  background: var(--surface-canvas);
  color: var(--text-primary);
}
html[data-layout="dark-mode"] #themeIcon {
  display: none;
}
html[data-layout="dark-mode"] .hs-dropdown:has(> button #themeIcon) {
  display: none !important;
}
@layer components {
  html[data-layout="dark-mode"] .app-header,
  html[data-layout="dark-mode"] footer {
    background: color-mix(in oklab, var(--surface-base) 92%, transparent) !important;
    border-color: rgb(255 255 255 / 0.07) !important;
  }
  html[data-layout="dark-mode"] .app-main > div.border-b {
    background: var(--surface-canvas) !important;
    border-color: rgb(255 255 255 / 0.07) !important;
  }
  html[data-layout="dark-mode"] .app-main > div.border-b a {
    color: var(--color-primary-300) !important;
  }
  html[data-layout="dark-mode"] :is(.hs-dropdown-menu, .surface-card) {
    background-color: var(--surface-raised);
    border-color: rgb(255 255 255 / 0.08);
  }
  html[data-layout="dark-mode"] :is(input, select, textarea) {
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    border-color: rgb(255 255 255 / 0.1);
  }
}