/* App-wide custom styles (ours, not the Blazor/Fluent template's app.css).
   Loaded globally and unscoped — see App.razor. */

/* Shift breakdown grids (ShiftsView): the appended "Total" row, and the
   "Totals Only" toggle that hides non-total rows. These must be global rather
   than in ShiftsView.razor.css: the rows are rendered inside FluentDataGrid, so
   ShiftsView's CSS-isolation scope id never reaches them and a ::deep rule there
   matches nothing. Namespaced under .responsive-grid to limit blast radius. */
.responsive-grid .total-row {
  background: var(--accent-fill-rest-alpha-10, rgba(0, 120, 212, 0.08));
  font-weight: bold;
}

/* Note: hiding non-total rows (the "Totals Only" toggle) is handled by
   `tbody tr.hidden` in ResponsiveDataGrid.razor.css, not here — a global rule
   loses on specificity to that file's scoped mobile layout rules. */


/* Tighten the indentation Fluent applies to nav links nested in a
   FluentNavGroup. The library steps each nesting level by 24px
   (.content-region padding-inline-start: 24/48/72/96px in
   FluentNavMenu.razor.css); halve the step to 12px so grouped links sit
   closer to their parent. !important is required to beat the library's
   ::deep scoped rules; mirroring every level keeps the hierarchy intact
   (overriding only level 1 would also flatten the deeper levels). */
.fluent-nav-group * .fluent-nav-menu .fluent-nav-item .content-region {
  padding-inline-start: 10px !important;
}

.fluent-nav-group * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item .content-region {
  padding-inline-start: 20px !important;
}

.fluent-nav-group * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item .content-region {
  padding-inline-start: 30px !important;
}

.fluent-nav-group * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item .content-region {
  padding-inline-start: 40px !important;
}

.alexandros-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.alexandros-toolbar {
  width: 100%;
  padding: .2rem;
  background: var(--neutral-layer-1);
  border-bottom: 1px solid var(--neutral-stroke-divider-rest);
  border-radius: var(--layer-corner-radius);
}

/* On mobile, move the auth control (logout/login) to the left of the
   "Alexandros.WebPanel" title. The header is a horizontal flex stack laid out
   as [title-text] [spacer] [.header-auth]; giving .header-auth order:-1 floats
   it ahead of everything, and since the title and spacer keep the default
   order they follow in DOM order — yielding [logout] [title] [spacer]. The
   title is a bare text node so it can't take an order of its own, but it
   doesn't need one. */
@media (max-width: 600px) {
  .header-auth {
    order: -1;
  }
}

/* Enlarge the mobile hamburger toggle for an easier touch target. Overrides
   the 20px sizing app.css gives `.navmenu-icon` in its max-width:600px block;
   this file loads after app.css (see App.razor) so equal-specificity rules
   win by source order. The container alone isn't enough — FluentIcon renders
   a fixed-size <svg>, so scale that too. `top` is nudged up to keep the larger
   icon vertically aligned with the header. */
@media (max-width: 600px) {
  .navmenu-icon {
    width: 32px;
    height: 32px;
    top: 10px;
  }

  .navmenu-icon svg {
    width: 32px;
    height: 32px;
    /* Fluent's Navigation glyph is drawn inset within its 20×20 viewBox, so
       the bars leave a visible margin inside the box. Scaling width/height
       alone enlarges that margin too. Blow the SVG up past its box (overflow
       is visible by default) so the bars reach the edges and look fuller. */
    transform: scale(1.3);
  }
}