/* ══════════════════════════════════════════════════════════════════════════
   ShopCore — the Fluent shell shared by every web portal
   ══════════════════════════════════════════════════════════════════════════

   One sidebar, one set of navigation states, one scrollbar and one focus ring
   for the Admin, Reports and Accounting portals — the same NavigationView the
   desktop applications draw. Each portal used to carry its own: Admin a light
   pane, Accounting a second light pane with its own class names, and Reports a
   dark slate rail whose colours were typed in as hexes and so ignored the
   brand entirely.

   Every colour here is spent from the brand. A portal's own stylesheet and the
   inline brand block (BrandingWeb.BrandCss) set --brand-*; this sheet reads them
   with the platform's Fluent blue as the fallback, and derives its tints with
   color-mix() so a brand needs to name only its primary for the selection, the
   hover and the badge to follow it.

   Served by BrandingWeb at /_shopcore/fluent-shell.css and linked after the
   portal's own sheet, so the shell is decided here.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --fl-brand:        var(--brand-primary, #0F6CBD);
  --fl-brand-hover:  var(--brand-hover, #115EA3);
  --fl-brand-on:     var(--brand-on, #FFFFFF);
  --fl-accent:       var(--accent, var(--fl-brand));

  /* Neutrals: the portal's own where it names them (Admin's --neutral-*,
     Accounting's --layer/--subtle-*, Reports' --rp-*), so the pane and the page
     are one surface in both themes; Fluent's values otherwise. */
  --fl-layer:        var(--neutral-layer, var(--layer, var(--rp-card, #FFFFFF)));
  --fl-canvas:       var(--neutral-canvas, var(--canvas, var(--rp-bg, #F5F5F5)));
  --fl-hover:        var(--neutral-subtle-hover, var(--subtle-hover, #F0F0F0));
  --fl-pressed:      var(--neutral-pressed, var(--pressed, #E0E0E0));
  --fl-stroke:       var(--stroke-1, var(--rp-border, #E0E0E0));
  --fl-stroke-soft:  var(--stroke-2, var(--rp-border-2, #EBEBEB));
  --fl-fg-1:         var(--fg-1, var(--rp-text, #242424));
  --fl-fg-2:         var(--fg-2, var(--rp-text-2, #424242));
  --fl-fg-3:         var(--fg-3, #616161);
  --fl-fg-4:         var(--fg-4, var(--rp-muted, #8A8A8A));

  --fl-brand-fg:     color-mix(in srgb, var(--fl-brand) 66%, #000);
  --fl-brand-tint:   color-mix(in srgb, var(--fl-brand) 10%, var(--fl-layer));
  --fl-brand-tint-2: color-mix(in srgb, var(--fl-brand) 22%, var(--fl-layer));

  --fl-font:   'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', Arial, sans-serif;
  --fl-font-display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, sans-serif;

  --fl-sidebar-w:           248px;
  --fl-sidebar-w-collapsed: 64px;
  --fl-topbar-h:            52px;

  --fl-ease-decel: cubic-bezier(0, 0, 0, 1);
  --fl-ease:       cubic-bezier(.33, 0, .67, 1);
  --fl-fast:   120ms;
  --fl-normal: 200ms;
  --fl-slow:   300ms;

  --fl-shadow-16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
}

/* Dark. The portals resolve "system" in script and stamp data-theme="dark" on
   <html>, so that attribute is the one switch; a media query here would darken
   the pane under a page the user has set to light. */
:root[data-theme="dark"] {
  --fl-brand-fg: color-mix(in srgb, var(--fl-brand) 55%, #fff);
  --fl-brand-tint: color-mix(in srgb, var(--fl-brand) 22%, var(--fl-layer));
  --fl-brand-tint-2: color-mix(in srgb, var(--fl-brand) 34%, var(--fl-layer));
}

/* ═══ Global finish ═══════════════════════════════════════════════════════ */

/* Windows 11's thin scrollbar: a hairline at rest, a pill under the pointer. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fl-fg-1) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fl-fg-1) 26%, transparent);
  border: 3px solid transparent; background-clip: content-box; border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fl-fg-1) 45%, transparent);
  border-width: 2px; background-clip: content-box;
}

::selection { background: var(--fl-brand-tint-2); color: var(--fl-fg-1); }

/* Keyboard focus only, and always visible: Fluent's two-pixel ring. Fields keep
   their own focus (the brand underline), so they are left out rather than ringed
   twice. */
:focus:not(input, select, textarea) { outline: none; }
:focus-visible:not(input, select, textarea) { outline: 2px solid var(--fl-brand); outline-offset: 2px; }

html { scroll-behavior: smooth; }

/* A page arriving fades and rises a few pixels — Fluent's entrance. */
@keyframes fl-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fl-enter > * { animation: fl-enter var(--fl-slow) var(--fl-ease-decel) both; }

@keyframes fl-flyout { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ═══ Components — one finish across the three portals ════════════════════
   Each portal keeps its own component classes (sc- Admin, fx- Accounting, rp-
   Reports) and its own layouts; this layer gives them the same Fluent geometry,
   motion and loading ring, so a button, a field or a dialog behaves the same in
   every portal. Sizes and colours stay the portal's; corners, transitions,
   focus and entrances are decided here. */

/* Loading — Fluent's ProgressRing, as Store Commerce and the desktop apps show
   it: no track, an arc in the brand colour that grows and shrinks as it turns. */
@property --fl-arc { syntax: '<angle>'; inherits: false; initial-value: 20deg; }
@keyframes fl-ring-turn { to { transform: rotate(360deg); } }
@keyframes fl-ring-arc  { 0% { --fl-arc: 20deg; } 50% { --fl-arc: 270deg; } 100% { --fl-arc: 20deg; } }
:is(.sc-spinner, .fx-spinner, .rp-spinner, .fl-ring) {
  border: 0 !important; border-radius: 50%; background:
    conic-gradient(from 0deg, var(--fl-brand) var(--fl-arc), transparent 0) !important;
  /* A stroke about an eighth of the diameter at any size, edge softened half a pixel. */
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 calc(72% + .5px));
          mask: radial-gradient(farthest-side, transparent 72%, #000 calc(72% + .5px));
  animation: fl-ring-turn 1.6s linear infinite, fl-ring-arc 1.6s cubic-bezier(.5, 0, .5, 1) infinite !important;
}
.fl-ring { display: inline-block; width: 32px; height: 32px; }
/* On the brand-coloured splash the ring is white. */
.rp-splash .rp-spinner { background: conic-gradient(from 0deg, #fff var(--fl-arc), transparent 0) !important; }

/* Buttons */
:is(.sc-btn, .fx-btn, .rp-btn) {
  border-radius: 4px;
  transition: background-color var(--fl-fast) var(--fl-ease), border-color var(--fl-fast) var(--fl-ease),
              color var(--fl-fast) var(--fl-ease), box-shadow var(--fl-fast) var(--fl-ease);
}
:is(.sc-btn, .fx-btn, .rp-btn):active:not(:disabled) { transform: translateY(.5px); }
:is(.sc-icon-btn, .fx-icon-btn, .rp-iconbtn) {
  border-radius: 4px; transition: background-color var(--fl-fast) var(--fl-ease), color var(--fl-fast) var(--fl-ease);
}

/* Fields: Fluent's brand underline on focus, nothing that shifts the text. */
:is(.sc-input, .sc-select, .sc-textarea, .fx-input, .fx-select, .fx-textarea, .rp-input, .rp-select) {
  border-radius: 4px;
  transition: border-color var(--fl-fast) var(--fl-ease), box-shadow var(--fl-fast) var(--fl-ease),
              background-color var(--fl-fast) var(--fl-ease);
}
:is(.sc-input, .sc-select, .sc-textarea, .fx-input, .fx-select, .fx-textarea, .rp-input, .rp-select):focus {
  border-color: var(--fl-brand); box-shadow: inset 0 -2px 0 0 var(--fl-brand); outline: none;
}

/* Surfaces */
:is(.sc-card, .fx-card, .rp-card, .rp-kpi, .sc-kpi, .fx-kpi) {
  border-radius: 8px; transition: box-shadow var(--fl-normal) var(--fl-ease), border-color var(--fl-normal) var(--fl-ease);
}
.rp-report-card { border-radius: 8px; transition: box-shadow var(--fl-normal) var(--fl-ease), transform var(--fl-normal) var(--fl-ease-decel), border-color var(--fl-normal) var(--fl-ease); }

/* Tables: a row lights under the pointer, smoothly. */
:is(.sc-table, .fx-grid, .rp-table) tbody tr { transition: background-color var(--fl-fast) var(--fl-ease); }

/* Dialogs, drawers and menus arrive the Fluent way: the layer fades, the
   surface rises and settles. */
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-dialog { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fl-drawer { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fl-toast  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
:is(.sc-overlay, .fx-modal-backdrop, .fx-palette-backdrop) { animation: fl-fade var(--fl-normal) var(--fl-ease) both; }
:is(.sc-modal, .fx-modal, .fx-palette) { border-radius: 8px; animation: fl-dialog var(--fl-slow) var(--fl-ease-decel) both; }
:is(.sc-drawer, .fx-drill) { animation: fl-drawer var(--fl-slow) var(--fl-ease-decel) both; }
:is(.sc-dropdown-menu, .sc-branch-menu) { border-radius: 8px; animation: fl-flyout var(--fl-normal) var(--fl-ease-decel) both; }
.fx-toast { border-radius: 8px; animation: fl-toast var(--fl-slow) var(--fl-ease-decel) both; }

/* Tabs: the selected one carries the brand underline, sliding in. */
:is(.sc-tab, .fx-tab) { transition: color var(--fl-fast) var(--fl-ease), box-shadow var(--fl-normal) var(--fl-ease-decel); }

/* Loading placeholders: a soft sweep rather than a blink. */
@keyframes fl-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
:is(.sc-skeleton, .fx-skel) {
  background: linear-gradient(90deg, var(--fl-hover) 25%, color-mix(in srgb, var(--fl-hover) 40%, var(--fl-layer)) 50%, var(--fl-hover) 75%) !important;
  background-size: 200% 100% !important; animation: fl-shimmer 1.4s var(--fl-ease) infinite !important; border-radius: 4px;
}

/* Switches move, they do not jump. */
:is(.sc-switch-thumb, .sc-switch-track, .fx-switch-track) { transition: all var(--fl-normal) var(--fl-ease-decel); }

/* ═══ Density and finish — the reference design ═══════════════════════════
   Smaller, calmer type; white cards with soft corners and a whisper of shadow
   on a light canvas; tables with quiet headers and generous rows; compact
   controls. Applied to every portal's own classes so a page needs no change. */

:is(.sc-content, .fx-content, .rp-content) { font-size: 13px; line-height: 1.45; }
:is(.sc-page-title, .fx-page-title h1, .rp-page-title) { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
:is(.sc-page-subtitle, .rp-page-sub) { font-size: 12.5px; color: var(--fl-fg-3); }

:is(.sc-card, .fx-card, .rp-card) {
  border-radius: 14px; border: 1px solid var(--fl-stroke-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
}
:is(.sc-card-title, .fx-card-title, .rp-card-title) { font-size: 14px; font-weight: 600; }
:is(.sc-kpi, .fx-kpi, .rp-kpi) { border-radius: 14px; }
:is(.sc-kpi-value, .fx-kpi-value, .rp-kpi-value) { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
:is(.sc-kpi-label, .fx-kpi-label, .rp-kpi-label) { font-size: 11.5px; color: var(--fl-fg-3); }

/* Tables: no grid lines, a quiet header, rows that breathe. */
:is(.sc-table, .fx-grid, .rp-table) { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
:is(.sc-table, .fx-grid, .rp-table) thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--fl-fg-4); background: transparent; border-bottom: 1px solid var(--fl-stroke-soft);
  padding: 10px 12px; white-space: nowrap;
}
:is(.sc-table, .fx-grid, .rp-table) tbody td { padding: 10px 12px; border-bottom: 1px solid var(--fl-stroke-soft); }
:is(.sc-table, .fx-grid, .rp-table) tbody tr:last-child td { border-bottom: 0; }
:is(.sc-table, .fx-grid, .rp-table) tbody tr:hover { background: color-mix(in srgb, var(--fl-brand) 4%, var(--fl-layer)); }

/* Controls: one compact height. */
:is(.sc-btn, .fx-btn, .rp-btn) { font-size: 13px; min-height: 32px; padding-inline: 14px; border-radius: 8px; font-weight: 600; }
:is(.sc-btn-sm, .fx-btn-sm, .rp-btn-sm) { font-size: 12px; min-height: 26px; padding-inline: 10px; }
:is(.sc-input, .sc-select, .fx-input, .fx-select, .rp-input, .rp-select) { font-size: 13px; min-height: 34px; border-radius: 8px; }

/* Status pills, everywhere a badge is drawn. */
:is(.sc-badge, .fx-badge, .rp-badge) {
  border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 9px; letter-spacing: .01em;
}

/* ═══ Sidebar — Fluent's NavigationView ═══════════════════════════════════ */

.fl-sidebar {
  width: var(--fl-sidebar-w); flex-shrink: 0;
  height: 100vh; position: sticky; top: 0; z-index: 100;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fl-layer); border-right: 1px solid var(--fl-stroke-soft);
  font-family: var(--fl-font); color: var(--fl-fg-2);
  transition: width var(--fl-normal) var(--fl-ease-decel), left var(--fl-normal) var(--fl-ease-decel);
}
/* The rail. On a wide screen the pane is a slim column of icons, as the desktop
   applications draw it: it takes 64px of the layout and no more. Pointing at it,
   or tabbing into it, opens it over the page to show the names - the page does
   not jump - and it folds back when the pointer leaves. A portal that wants the
   names kept on screen marks the pane "pinned". On a phone the pane is
   off-canvas instead (below). */
@media (min-width: 769px) {
  .fl-sidebar:not(.pinned) { width: var(--fl-sidebar-w-collapsed); }
  .fl-sidebar:not(.pinned):is(:hover, :focus-within):not(.collapsed) {
    width: var(--fl-sidebar-w); margin-right: calc(var(--fl-sidebar-w-collapsed) - var(--fl-sidebar-w));
    box-shadow: var(--fl-shadow-16); z-index: 300;
  }
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) :is(.fl-logo-text, .fl-nav-label, .fl-nav-chevron,
        .fl-nav-count, .fl-nav-sub, .fl-badge, .fl-user-info),
  .fl-sidebar.collapsed :is(.fl-logo-text, .fl-nav-label, .fl-nav-chevron,
        .fl-nav-count, .fl-nav-sub, .fl-badge, .fl-user-info) { display: none; }
  /* Section names become hairlines between groups of icons. */
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) .fl-nav-section,
  .fl-sidebar.collapsed .fl-nav-section {
    font-size: 0; padding: 0; margin: 10px 14px; height: 1px; background: var(--fl-stroke-soft);
  }
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) .fl-nav-section:first-child,
  .fl-sidebar.collapsed .fl-nav-section:first-child { margin-top: 4px; background: transparent; }
  /* Icons as 40px rounded buttons, centred in the rail. */
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) .fl-nav-item,
  .fl-sidebar.collapsed .fl-nav-item {
    justify-content: center; width: 40px; min-height: 40px; padding: 0; margin: 2px auto; border-radius: 10px;
  }
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) .fl-nav-item::before,
  .fl-sidebar.collapsed .fl-nav-item::before { left: -8px; }
  .fl-sidebar:not(.pinned):not(:hover):not(:focus-within) :is(.fl-logo, .fl-user),
  .fl-sidebar.collapsed :is(.fl-logo, .fl-user) { justify-content: center; padding-inline: 0; }
}

/* Logo */
.fl-logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  min-height: var(--fl-topbar-h); padding: 10px 16px;
  border-bottom: 1px solid var(--fl-stroke-soft);
}
.fl-logo-mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: block; object-fit: contain; }
.fl-logo-text { min-width: 0; }
.fl-logo-name {
  display: block; font-family: var(--fl-font-display); font-size: 15px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.01em; color: var(--fl-fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-logo-sub {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fl-fg-4);
}

/* The trade in force: every noun below it comes from this answer. */
.fl-badge {
  display: flex; align-items: center; gap: 7px; margin: 10px 12px 2px; padding: 5px 10px;
  border-radius: 6px; background: var(--fl-brand-tint); color: var(--fl-brand-fg);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.fl-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #13A10E; flex-shrink: 0; }

/* Navigation */
.fl-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 8px 12px; }
.fl-nav-section {
  padding: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fl-fg-4);
}
.fl-nav-section:first-child { padding-top: 8px; }

/* The item: a rounded fill under the pointer; selected is a tint and a short
   brand indicator on the leading edge that grows in, as Fluent's does. */
.fl-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 36px; padding: 6px 12px; margin: 1px 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--fl-fg-2); font: 400 13px/1.3 var(--fl-font); text-align: left; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--fl-fast) var(--fl-ease), color var(--fl-fast) var(--fl-ease);
}
.fl-nav-item:hover { background: var(--fl-hover); color: var(--fl-fg-1); text-decoration: none; }
.fl-nav-item:active { background: var(--fl-pressed); }
.fl-nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 16px;
  border-radius: 2px; background: var(--fl-brand);
  transform: translateY(-50%) scaleY(0); transition: transform var(--fl-normal) var(--fl-ease-decel);
}
.fl-nav-item.active { background: var(--fl-brand-tint); color: var(--fl-brand-fg); font-weight: 600; }
.fl-nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.fl-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.fl-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fl-nav-chevron { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; opacity: .6;
                  transition: transform var(--fl-normal) var(--fl-ease); }
.fl-nav-item.expanded .fl-nav-chevron { transform: rotate(180deg); }
.fl-nav-count {
  margin-left: auto; padding: 1px 7px; border-radius: 999px; flex-shrink: 0;
  background: var(--fl-brand-tint-2); color: var(--fl-brand-fg); font-size: 11px; font-weight: 600;
}
.fl-nav-item.active .fl-nav-count { background: var(--fl-brand); color: var(--fl-brand-on); }

/* Children of a group, drawn as one tree under it. */
.fl-nav-sub {
  position: relative; overflow: hidden; max-height: 0;
  transition: max-height var(--fl-slow) var(--fl-ease);
}
.fl-nav-sub.open { max-height: 1200px; }
.fl-nav-sub::before { content: ''; position: absolute; left: 21px; top: 2px; bottom: 2px; width: 1px; background: var(--fl-stroke); }
.fl-nav-sub-item {
  position: relative; display: flex; align-items: center; width: 100%;
  min-height: 32px; padding: 5px 12px 5px 44px; margin: 1px 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--fl-fg-2); font: 400 12.5px/1.3 var(--fl-font); text-align: left; text-decoration: none;
  cursor: pointer; transition: background var(--fl-fast) var(--fl-ease), color var(--fl-fast) var(--fl-ease);
}
.fl-nav-sub-item:hover { background: var(--fl-hover); color: var(--fl-fg-1); text-decoration: none; }
.fl-nav-sub-item.active { background: var(--fl-brand-tint); color: var(--fl-brand-fg); font-weight: 600; }
.fl-nav-sub-item.active::before {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--fl-brand);
}

/* Who is signed in */
.fl-user {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 14px; border-top: 1px solid var(--fl-stroke-soft);
}
.fl-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fl-brand); color: var(--fl-brand-on); font-size: 12px; font-weight: 600;
}
.fl-user-info { flex: 1; min-width: 0; }
.fl-user-name, .fl-user-role { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-user-name { font-size: 13px; font-weight: 600; color: var(--fl-fg-1); }
.fl-user-role { font-size: 12px; color: var(--fl-fg-4); }

/* Below tablet width the pane leaves the layout and slides in over the page. */
@media (max-width: 768px) {
  .fl-sidebar { position: fixed; left: calc(-1 * var(--fl-sidebar-w)); width: var(--fl-sidebar-w); box-shadow: none; }
  .fl-sidebar.open { left: 0; box-shadow: var(--fl-shadow-16); }
}

@media print { .fl-sidebar { display: none !important; } }