/*
 * SrnControl(TM) dashboard layout tweaks.
 * Loaded AFTER the Tabler style sheets, only on the full-width
 * (body.layout-fluid) dashboard pages.
 *
 * ROOT CAUSE of the empty gap on the left of the header/dock:
 *   Tabler keeps the page gutter on .container-* even under
 *   .layout-fluid:
 *       --tblr-gutter-x: calc(--tblr-page-padding * 2)   (2rem on desktop)
 *   applied as padding-left/right: 1rem (16px). That padding is the strip of
 *   empty space between the window edge and the logo / user menu / menu
 *   items / page content.
 *
 * The first item of the secondary menu ALSO inherits the nav-link
 * horizontal padding (--tblr-navbar-nav-link-padding-x = 0.75rem), so it
 * sat ~12px further in than the logo above it.
 *
 * The gutter is still needed - at 0 the menu / page titles / cards sat
 * flush against the window edge - so rule 1 pins it to a single 1rem on
 * both sides, rule 2 lines the first menu item up with the logo, and
 * rules 3-4 deal with the root inset and the page canvas that shows
 * through the scrollbar gutter.
 */

/* 1) One small gutter on both sides, so the logo / menu / page titles /
      cards read as inset from the window edge instead of touching it.
      1rem matches the default page padding; on the right it also leaves
      the secondary menu's "New" badge (which overhangs its column by
      ~10px) safely inside the edge.
      The DOCK TILE stays full-bleed because its background is painted on
      the .navbar element, which spans the whole client width - this
      container is only the inner box holding the items.
      (The .row inside a container re-declares --tblr-gutter-x itself, so
      the colour/column/card spacing is untouched.) */
body.layout-fluid .container,
body.layout-fluid [class^="container-"],
body.layout-fluid [class*=" container-"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 2) Line the first item of the secondary menu up with the logo.
      Only its extra left padding is removed, so the item box stays at the
      container edge and the blue active indicator remains anchored to it.
      Scoped to the horizontal (desktop) menu so the collapsed mobile menu
      keeps its normal indentation. */
@media (min-width: 768px) {
  body.layout-fluid
    .navbar-collapse
    .navbar
    .row
    > .col:not(.col-md-auto)
    > .navbar-nav
    > .nav-item:first-child
    > .nav-link {
    padding-left: 0;
  }
}

/* 3) Tabler insets the root element itself by the scrollbar width on
      desktop:
          @media (min-width: 992px) { :root { margin-left: calc(100vw - 100%) } }
      100vw counts the scrollbar, 100% does not, so this resolves to
      +scrollbar-width (15px here). It pushed the whole document 15px to the
      right, which left the page canvas showing as a strip down the LEFT edge
      and stopped the dock ~15px short of the window's top-right corner (that
      strip of "no tile" was the canvas showing through the scrollbar gutter).
      Neutralise the inset so the document is flush with the left edge and
      spans the full client width. */
@media (min-width: 992px) {
  :root {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 4) With the inset gone the only place the canvas is still visible is the
      scrollbar gutter on the right. Paint the canvas with the dock's own
      surface colour so that strip matches the dock all the way to the
      top-right corner. Theme-aware (white on the light theme, grey-800 on
      the dark one). The body still paints the page colour across the whole
      content area, so the left edge is unaffected. */
html {
  background-color: var(--tblr-bg-surface);
}

/* 5) Active-category indicator that slides between menu items.
      Tabler draws the blue underline with `.nav-item.active:after`, and it is
      painted fresh on every page load, so switching category looks like the
      line teleports to the new item. When srn-nav.js runs it adds
      `.srn-nav-on` to <html> and paints one shared `.srn-nav-indicator`
      instead, which it places under the previously selected category and then
      animates to the new one. The stock pseudo-element is hidden ONLY while
      that script is active (desktop menu), so the plain underline remains the
      fallback when JS is unavailable. The script only activates on pages with
      a standard horizontal category menu; vertical / auth layouts are
      untouched. */
.srn-nav-menu {
  position: relative;
}

.srn-nav-indicator {
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--tblr-navbar-active-border-color, var(--tblr-primary));
  pointer-events: none;
  transform: translateX(0);
  transition:
    transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
    width 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform, width;
}

/* The horizontal (desktop) menu uses the sliding underline; Tabler's own
   pseudo-element is suppressed there while the script is active. */
@media (min-width: 768px) {
  .srn-nav-on .navbar-expand-md .nav-item.active:after {
    display: none;
  }
}

/* The collapsed (mobile) menu stacks the items and marks the active one with a
   left border, so the sliding underline is hidden there. */
@media (max-width: 767.98px) {
  .srn-nav-indicator {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .srn-nav-indicator {
    transition: none;
  }
}