/* =========================================
   UNIFIED DESIGN SYSTEM — Cleaned 2026-03-24
   756 → ~170 lines. Only rules with confirmed template usage remain.
   Removed: global h1 override, [class*="badge"] wildcard, body background
   override, dead storefront/profile classes (0 template usage), button
   overrides (now in .wm-btn system), card/stat/nav/filter/tooltip/meta
   dead code.
   ========================================= */

:root {
    --unified-primary: var(--brand-primary);
    --unified-secondary: hsl(258 90% 76%);
    --unified-success: var(--success);
    --unified-bg: var(--gray-50);
    --unified-card-bg: var(--white);
    --unified-border: var(--gray-200);
    --unified-text: var(--gray-800);
    --unified-text-muted: var(--gray-500);
    --unified-shadow: var(--shadow-sm);
    --unified-gap: 1.5rem;
    --unified-radius: var(--radius-xl);
    --unified-radius-sm: var(--radius-lg);
    --unified-grid-line: hsl(0 0% 100% / 0.10);
    --unified-sidebar-bg-start: hsl(220 28% 7%);
    --unified-sidebar-bg-end: hsl(220 25% 5%);
    --unified-sidebar-text-muted: hsl(215 20% 65%);
    --unified-sidebar-focus: hsl(234 89% 74%);
    --unified-sidebar-skip-bg: hsl(217 33% 17%);
    --unified-sidebar-skip-text: hsl(210 40% 98%);
    --unified-sidebar-hover-bg: hsl(0 0% 100% / 0.03);
    --unified-sidebar-hover-kbd-bg: hsl(0 0% 100% / 0.05);
    --unified-sidebar-hover-kbd-border: hsl(0 0% 100% / 0.08);
    --unified-sidebar-mode-bg: hsl(226 33% 5% / 0.70);
    --unified-sidebar-mode-border: hsl(0 0% 100% / 0.04);
    --unified-sidebar-active-bg: hsl(225 37% 14% / 0.90);
    --unified-sidebar-active-highlight: hsl(0 0% 100% / 0.04);
    --unified-sidebar-avatar-ring: hsl(234 89% 74% / 0.25);
    --unified-sidebar-avatar-glow: hsl(234 89% 74% / 0.05);
    --unified-sidebar-dropdown-bg: hsl(223 24% 15% / 0.98);
    --unified-sidebar-dropdown-border: hsl(0 0% 100% / 0.06);
    --unified-sidebar-dropdown-shadow: hsl(0 0% 0% / 0.60);
    --unified-sidebar-pro-bg: hsl(262 83% 58% / 0.10);
    --unified-sidebar-pro-border: hsl(262 83% 58% / 0.18);
    --unified-sidebar-pro-text: hsl(258 96% 85%);
    --unified-sidebar-divider: hsl(0 0% 100% / 0.05);
    /* Sidebar elevation ladder (same hue family, lightness = depth):
       nav base 7%  →  static footer tray 13%  →  pop-up menu 15%.
       Unifies the three zones as one sidebar while keeping them distinct.
       Tray sits a clear ~6pts above the nav base (was +3, too subtle to
       read) so the utility/account dock reads as its own surface rather
       than more scrolling nav. */
    --unified-sidebar-tray-bg: hsl(222 23% 13%);
}

[data-theme="dark"],
.dark {
    --unified-primary: var(--brand-primary);
    --unified-secondary: hsl(258 96% 85%);
    --unified-success: var(--success);
    --unified-bg: var(--theme-bg-secondary);
    --unified-card-bg: var(--theme-card-bg);
    --unified-border: var(--theme-border);
    --unified-text: var(--theme-text);
    --unified-text-muted: var(--theme-text-tertiary);
    --unified-shadow: var(--shadow-sm);
}

/* =========================================
   BADGES (order_pdf.html, view_pdf.html, store_settings.html)
   Only scoped classes — NO [class*="badge"] wildcard.
   ========================================= */

.badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
}

/* =========================================
   ADD TO CART (storefront.html, product_detail.html via JS)
   ========================================= */

.add-to-cart {
    width: 100%;
    background: var(--brand-primary);
    color: white;
    padding: 0.75rem;
    border-radius: var(--unified-radius-sm);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.add-to-cart:hover {
    opacity: 0.9;
}

/* =========================================
   EMPTY STATES (empty_state.html macro)
   ========================================= */

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--unified-bg);
    border: 2px dashed var(--unified-border);
    border-radius: var(--unified-radius);
}

.empty-state i {
    font-size: var(--font-size-6xl);
    color: var(--unified-border);
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--unified-text);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: var(--font-size-sm);
    color: var(--unified-text-muted);
}

/* =========================================
   BACKGROUND UTILITIES
   ========================================= */

.bg-grid-pattern {
    background-image: linear-gradient(var(--unified-grid-line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--unified-grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
}

.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* =========================================
   SIDEBAR
   ========================================= */

.sidebar-nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
    display: none;
}

#dashboardSidebar,
#mobileSidebar {
    /* Flat solid — was a 160deg gradient + a radial brand-glow ::before
       (dropped: no gradients/glows per the universal UI rules). */
    background: var(--unified-sidebar-bg-start);
}

#dashboardSidebar > *,
#mobileSidebar > * {
    position: relative;
    z-index: 1;
}

.sidebar-section-label {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: 0.1em;
    /* Was var(--gray-500), which failed WCAG AA on the sidebar gradient. */
    color: var(--unified-sidebar-text-muted);
    padding: 0.625rem 0.75rem 0.25rem;
    user-select: none;
}

/* WCAG AA contrast on inactive sidebar text/icons. Tailwind's
   `text-slate-500` was being applied to inactive nav icons,
   inactive labels, the store handle line, ellipsis, etc. — all on the
   dark gradient at ~3.9:1, below the 4.5:1 floor. Bump every inactive
   element under the sidebar to a tokenized slate-400 equivalent.
   `aria-current` and `.sidebar-mode-active` selectors keep their
   intentional white. */
#dashboardSidebar .text-slate-500,
#mobileSidebar .text-slate-500 {
    color: var(--unified-sidebar-text-muted);
}

.sidebar-nav a,
.sidebar-nav button {
    position: relative;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Keyboard focus indicator — visible against the dark sidebar background.
   Mouse clicks don't trigger :focus-visible, so this only shows up for
   keyboard users (WCAG 2.4.7). Applies to every interactive sidebar element. */
.sidebar-nav a:focus-visible,
.sidebar-nav button:focus-visible,
.sidebar-bottom a:focus-visible,
.sidebar-bottom button:focus-visible,
.sidebar-search-btn:focus-visible,
.sidebar-mode-toggle a:focus-visible,
.sidebar-mode-toggle button:focus-visible,
.sidebar-user-btn:focus-visible,
.sidebar-user-dropdown a:focus-visible,
.sidebar-user-dropdown button:focus-visible {
    outline: 2px solid var(--unified-sidebar-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* On touch devices (no real hover), Tailwind's `hover:bg-*` and `hover:text-*`
   classes "stick" after a tap on iOS Safari. Suppress hover styling on every
   sidebar link/button when the primary input has no hover capability. */
@media (hover: none) {
    .sidebar-nav a:hover,
    .sidebar-nav button:hover,
    .sidebar-bottom a:hover,
    .sidebar-bottom button:hover,
    .sidebar-search-btn:hover,
    .sidebar-mode-toggle a:hover,
    .sidebar-mode-toggle button:hover,
    .sidebar-user-btn:hover,
    .sidebar-user-dropdown a:hover,
    .sidebar-user-dropdown button:hover,
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        background-color: transparent;
        color: inherit;
    }
    .sidebar-search-btn:hover kbd {
        background: var(--unified-sidebar-hover-kbd-bg);
        border-color: var(--unified-sidebar-hover-kbd-border);
        color: inherit;
    }
    .sidebar-user-btn:hover .sidebar-user-avatar {
        box-shadow: none;
    }
}

/* When the skip-link activates, the <main> target receives focus
   programmatically (via tabindex="-1"). Without this rule keyboard users
   get no visual confirmation they landed. Inset outline so it doesn't
   clip against the viewport edge. */
main#main-content:focus-visible {
    outline: 2px solid var(--unified-sidebar-focus);
    outline-offset: -2px;
}

/* Skip-to-content link — hidden until keyboard-focused. */
.skip-to-content {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    background: var(--unified-sidebar-skip-bg);
    color: var(--unified-sidebar-skip-text);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transform: translateY(-200%);
    transition: transform 150ms ease;
}
.skip-to-content:focus {
    transform: translateY(0);
    outline: 2px solid var(--unified-sidebar-focus);
    outline-offset: 2px;
}

.sidebar-search-btn {
    transition: background-color 150ms ease, border-color 150ms ease;
}
.sidebar-search-btn kbd {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sidebar-search-btn:hover kbd {
    background: var(--tint-brand-10);
    border-color: var(--tint-brand-25);
    color: var(--unified-secondary);
}

.sidebar-mode-toggle {
    background: var(--unified-sidebar-mode-bg);
    border: 1px solid var(--unified-sidebar-mode-border);
}
.sidebar-mode-toggle a {
    transition: background-color 180ms ease, color 180ms ease;
}
.sidebar-mode-active {
    background: var(--unified-sidebar-active-bg);
}

.sidebar-user-btn {
    transition: background-color 120ms ease;
}
.sidebar-user-btn:hover {
    background: var(--unified-sidebar-hover-bg);
}
.sidebar-user-avatar {
    transition: box-shadow 200ms ease;
}
.sidebar-user-btn:hover .sidebar-user-avatar {
    box-shadow: 0 0 0 2px var(--unified-sidebar-avatar-ring), 0 0 0 4px var(--unified-sidebar-avatar-glow);
}

/* Static utility footer (tier 1) — a subtly raised tray so it reads as a
   distinct dock from the scrolling nav above, while sharing the sidebar hue. */
.sidebar-bottom {
    background: var(--unified-sidebar-tray-bg);
}

.sidebar-user-dropdown {
    background: var(--unified-sidebar-dropdown-bg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--unified-sidebar-dropdown-border);
    /* Popovers may lift; use design-system popover token (not bespoke 64px blur stack). */
    box-shadow: var(--shadow-popover), inset 0 1px 0 var(--unified-sidebar-active-highlight);
}
.sidebar-user-dropdown a,
.sidebar-user-dropdown button {
    transition: background-color 100ms ease, color 100ms ease;
}

.sidebar-pro-badge {
    background: var(--unified-sidebar-pro-bg);
    border: 1px solid var(--unified-sidebar-pro-border);
    color: var(--unified-sidebar-pro-text);
}

.sidebar-badge {
    background: var(--unified-sidebar-hover-kbd-bg);
    border: 1px solid var(--unified-sidebar-hover-kbd-border);
    color: var(--unified-sidebar-text-muted);
    border-radius: var(--radius-full);
    padding: 0.125rem 0.4rem;
    font-size: var(--font-size-xxs);
    font-weight: 600;
    line-height: 1.4;
    min-width: 1.25rem;
    text-align: center;
}

.sidebar-divider {
    border-top: 1px solid var(--unified-sidebar-divider);
    margin: 0.375rem 0;
}

/* =========================================
   UTILITIES
   ========================================= */

.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Toggle switch (store_settings.html, toggle.html) */
.toggle-checkbox:checked {
    right: 0;
    border-color: var(--color-brand);
}
.toggle-checkbox:checked + .toggle-label {
    background-color: var(--color-brand);
}
.toggle-checkbox {
    right: 0;
    z-index: 1;
    border-color: var(--gray-200);
    /* enumerated (was `all 0.3s`) — only color changes between states here, so
       `all` only invited layout-prop animation. Geist: motion clarifies, not decorates. */
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
.dark .toggle-checkbox {
    border-color: var(--gray-600);
    background-color: var(--gray-800);
}
.dark .toggle-checkbox:checked {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}

/* Independent operational panels: layout geometry has one owner.
   Use two stacks, never multiple rows of unequal-height cards. Tables/field
   grids retain their own row alignment. Existing form/detail shells are aliases
   so every consumer receives the same wrapping and spacing behavior. */
:is(.wm-panel-layout, .dtl-v2 .dtl-layout, .frm-v2 .frm-grid) {
  display: grid;
  grid-template-columns: minmax(0, var(--wm-main-track, 2fr)) minmax(0, var(--wm-aside-track, 1fr));
  align-items: start;
  gap: var(--wm-layout-gap, var(--space-4));
}
:is(.wm-panel-layout, .dtl-v2 .dtl-layout, .frm-v2 .frm-grid) > * { min-width: 0; }
:is(.wm-panel-stack, .dtl-v2 .dtl-main, .dtl-v2 .dtl-aside, .frm-v2 .frm-main) {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  gap: var(--wm-layout-gap, var(--space-4));
}
:is(.wm-panel-stack, .dtl-v2 .dtl-main, .dtl-v2 .dtl-aside, .frm-v2 .frm-main) > * { flex: 0 0 auto; }
:is(.wm-panel-layout, .wm-panel-stack) > [hidden] { display: none; }
/* Omit empty stacks in templates; a missing or hidden optional rail leaves no track. */
.wm-panel-layout:has(> :only-child),
.wm-panel-layout:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) {
  :is(.wm-panel-layout, .dtl-v2 .dtl-layout, .frm-v2 .frm-grid) { grid-template-columns: minmax(0, 1fr); }
}

/* Collections of independent settings/provider cards use the CONTENT width.
   At least 26rem per column, at most two columns. Native column flow preserves
   DOM/keyboard order and balances variable heights without splitting a form. */
.wm-panel-collection {
  columns: 26rem 2;
  column-gap: var(--wm-layout-gap, var(--space-4));
  column-fill: balance;
}
.wm-panel-collection > * {
  break-inside: avoid;
  margin: 0 0 var(--wm-layout-gap, var(--space-4));
  min-width: 0;
  max-width: 100%;
}
.wm-panel-collection > [hidden] { display: none; }
.wm-panel-collection:has(> :only-child) { column-count: 1; }

.wm-panel-layout--balanced { --wm-main-track: 1fr; --wm-aside-track: 1fr; }