/* Shared design tokens and adapters for the existing Blazor pages.
   Loaded after isolated styles; business-specific layouts remain intact. */
.admin-shell[class] {
    --admin-bg:var(--design-surface); --admin-surface:var(--design-on-error); --admin-text:var(--design-on-surface);
    --admin-muted:var(--design-outline); --admin-border:var(--design-surface-container-high);
    --hq-primary:var(--design-primary); --hq-primary-hover:var(--design-on-primary-fixed-variant); --hq-tint:var(--design-surface-container);
    --hq-success:var(--design-secondary); --hq-danger:var(--design-error);
    --sidebar-bg:linear-gradient(180deg, #0b1f33 0%, #102a43 58%, #0b2239 100%); --sidebar-text:#c8d8e6;
    --sidebar-muted:#80b8df; --sidebar-hover:rgba(147, 204, 255, .09);
    --sidebar-active:linear-gradient(100deg, #087fbd 0%, #006194 100%); --sidebar-active-text:#ffffff;
    --sidebar-child-active:var(--design-surface-container-high); --sidebar-child-border:var(--admin-border);
    font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:13px;
    font-variant-numeric:tabular-nums; line-height:1.45;
    grid-template-columns:260px minmax(0,1fr);
}
.admin-shell.theme-dark[class] {
    --admin-bg:var(--design-on-surface); --admin-surface:var(--design-on-surface); --admin-text:var(--design-inverse-on-surface);
    --admin-muted:var(--design-outline-variant); --admin-border:var(--design-on-surface-variant);
    --hq-primary:var(--design-secondary-fixed-dim); --hq-primary-hover:var(--design-inverse-primary); --hq-tint:var(--design-inverse-surface);
    --hq-success:var(--design-secondary-fixed-dim); --hq-danger:var(--design-error-container);
    --sidebar-bg:linear-gradient(180deg, #0b1f33 0%, #102a43 58%, #0b2239 100%); --sidebar-text:#c8d8e6;
    --sidebar-muted:#80b8df; --sidebar-hover:rgba(147, 204, 255, .09);
    --sidebar-active:linear-gradient(100deg, #087fbd 0%, #006194 100%); --sidebar-active-text:#ffffff;
    --sidebar-child-active:var(--design-inverse-surface); --sidebar-child-border:var(--admin-border);
}
.admin-shell .sidebar { position:sticky; top:0; height:100dvh; min-height:0; overflow:auto; scrollbar-width:thin; z-index:25; }
.admin-shell .topbar { height:64px; min-height:64px; padding:0 24px; gap:16px; z-index:20; }
.admin-shell .content { max-width:1680px; margin-inline:auto; padding:20px 24px 32px; }
.admin-shell .brand { height:64px; padding:0 20px; gap:10px; }
.admin-shell .brand-mark { width:30px; height:30px; border-radius:6px; background:var(--design-primary-container); font-size:22px; }
.admin-shell .brand-text { font-size:15px; font-weight:700; }
.admin-shell .brand-text small { font-size:11px; letter-spacing:.08em; }
.admin-shell .nav-list { min-height:calc(100dvh - 64px); padding:10px 8px 16px; gap:3px; }
.admin-shell .nav-caption,.admin-shell .group-caption { margin:12px 0 4px; padding:6px 12px; border:0; min-height:24px; }
.admin-shell .nav-caption,.admin-shell .group-caption b { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.admin-shell .nav-group-items { gap:2px; }
.admin-shell .sidebar .nav-link { min-height:36px; padding:6px 12px; border-radius:4px; }
.admin-shell .sidebar .nav-link b { font-size:13px; font-weight:500; }
.admin-shell .sidebar .nav-link > span:first-child { margin-inline-end:10px ; font-size:18px; width:20px; flex-basis:20px; }
.admin-shell .sidebar .nav-link.active { background:var(--design-primary-container); color:var(--design-on-error) ; box-shadow:none; }
.admin-shell .sidebar .nav-link.active span { color:var(--design-on-error); }
.admin-shell .sidebar .nav-link:hover:not(.active) { color:var(--admin-text) ; }
.admin-shell .preference-control,.admin-shell .icon-button { height:36px; border-radius:6px; }
.admin-shell .icon-button { width:36px; }
.admin-shell .demo-fill-button { min-height:36px; border-radius:6px; background:var(--design-primary); border-color:var(--design-primary); font-weight:600; }
.admin-shell .role-badge { background:var(--hq-tint); color:var(--admin-text); border-radius:6px; font-weight:600; }
.admin-shell .menu-toggle,.admin-shell .sidebar-scrim { display:none; }
.hq-breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--admin-muted); margin-bottom:12px; }
.hq-breadcrumbs a { color:var(--hq-primary); text-decoration:none; }
.hq-search-launch { display:flex; align-items:center; gap:12px; width:min(430px,38vw); min-width:160px; border:1px solid var(--admin-border); border-radius:6px; background:var(--admin-bg); color:var(--admin-muted); padding:8px 12px; text-align:left; font:inherit; }
.hq-search-launch kbd { margin-left:auto; background:var(--hq-tint); color:var(--admin-muted); font-size:11px; white-space:nowrap; }
.hq-command-dialog { width:min(600px,calc(100vw - 32px)); padding:0; border:1px solid var(--admin-border); border-radius:8px; background:var(--admin-surface); color:var(--admin-text); box-shadow:0 20px 50px color-mix(in srgb, var(--design-on-surface) 25.10%, transparent); }
.hq-command-dialog::backdrop { background:color-mix(in srgb, var(--design-on-surface) 43.92%, transparent); }
.hq-command-heading { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--admin-border); }
.hq-command-input { width:calc(100% - 32px); margin:16px; padding:10px; border:1px solid var(--admin-border); border-radius:6px; background:var(--admin-bg); color:var(--admin-text); }
.hq-command-results { max-height:55vh; overflow:auto; padding:0 8px 8px; }
.hq-command-results button { display:flex; justify-content:space-between; gap:16px; width:100%; padding:10px; border:0; border-radius:4px; background:transparent; color:var(--admin-text); text-align:left; }
.hq-command-results button:hover,.hq-command-results button:focus-visible { background:var(--hq-tint); }
.hq-command-results small { color:var(--admin-muted); }
.admin-shell :where(:not(input):not(select):not(textarea)):focus-visible { outline:2px solid var(--hq-primary); outline-offset:2px; }
.admin-shell :where(input,select,textarea):focus-visible { outline:none; }
.admin-shell .content h1 { font-size:28px; font-weight:700; line-height:1.3; letter-spacing:-.015em; }
.admin-shell .content h2 { font-size:18px; font-weight:600; line-height:1.4; }
.admin-shell .content h3 { font-size:15px; font-weight:600; }
.admin-shell .content :where(.page-title,.page-heading,.analytics-header) { margin-bottom:20px; }
.admin-shell .content :where(.info-card,.list-card,.table-card,.data-card,.analytics-results,.state-card,.related-card,.translations-card,.stat-card,.summary-card,.period-selector,.top-products,.top-branches,.order-statistics,.category-header,.product-header,.detail-header) {
    border:1px solid var(--admin-border); border-radius:8px; background:var(--admin-surface); box-shadow:0 1px 3px color-mix(in srgb, var(--design-on-surface) 1.96%, transparent);
}
.admin-shell .content :where(.toolbar,.filter-bar,.filters,.analytics-filters,.filter-panel,.filters-panel,.page-toolbar) {
    border-radius:8px; background:var(--admin-surface); border-color:var(--admin-border); box-shadow:none;
}
.admin-shell .content :where(.card-title,.results-heading,.section-heading) { min-height:54px; }
.admin-shell .content :where(.field,.toggle-field,.translations label) { border-radius:6px; background:var(--admin-bg); }
.admin-shell .content :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select) {
    min-height:36px; border-radius:6px; font-size:13px; color:var(--admin-text); background:var(--admin-surface); border-color:var(--admin-border);
}
.admin-shell .content textarea { border-radius:6px; font-size:13px; color:var(--admin-text); background:var(--admin-surface); border-color:var(--admin-border); }
.admin-shell .content :where(.action-button,.save-button,.cancel-button,.back-button,.refresh-button,.apply-filters,.analytics-refresh,.refresh,.primary-button,.secondary-button),.hq-button {
    min-height:36px; border-radius:6px; font-size:13px; font-weight:600; box-shadow:none; padding:7px 12px;
}
.hq-button { display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:1px solid var(--admin-border); background:var(--admin-surface); color:var(--admin-text); cursor:pointer; }
.admin-shell .content :where(.save-button,.apply-filters,.primary-button) { background:var(--design-primary); color:var(--design-on-error); border-color:var(--design-primary); }
.admin-shell .content :where(.tabs,.detail-tabs,.order-detail-tabs) { border-radius:6px; box-shadow:none; background:var(--admin-bg); }
.admin-shell .content :where(.tabs,.detail-tabs,.order-detail-tabs) button { min-height:38px; font-size:12px; font-weight:600; border-radius:4px; box-shadow:none; }
.admin-shell .content :where(.tabs,.detail-tabs,.order-detail-tabs) button.active { color:var(--hq-primary); background:var(--admin-surface); border-color:var(--hq-primary); box-shadow:none; }
.admin-shell .content table { font-size:13px; }
.admin-shell .content table th { height:38px; color:var(--admin-muted); background:var(--admin-bg); font-size:11px; font-weight:600; letter-spacing:.04em; }
.admin-shell .content table td { height:42px; padding-top:8px; padding-bottom:8px; border-color:var(--admin-border); }
.admin-shell .content table td :where(b,strong) { font-size:13px; font-weight:600; }
.admin-shell .content table tbody tr:hover > td { background:var(--sidebar-hover); }
.admin-shell .content table tr.selected > td { background:var(--hq-tint); }
.admin-shell .content :where(.table-scroll,.table-wrap,.table-container) { max-height:70dvh; overflow:auto; scrollbar-width:thin; }
.admin-shell .content :where(.table-scroll,.table-wrap,.table-container) thead th { position:sticky; top:0; z-index:2; }
.admin-shell .content :where(.category-row) td { background:var(--hq-tint); }
.admin-shell .content :where(.analytics-summary,.statistics-grid) > article { border:1px solid var(--admin-border); border-radius:8px; background:var(--admin-surface); box-shadow:none; }
.hq-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.hq-panel { padding:20px; border:1px solid var(--admin-border); border-radius:8px; background:var(--admin-surface); margin-bottom:16px; }
.hq-metric small { color:var(--admin-muted); display:block; }
.hq-metric strong { display:block; font-size:28px; margin:8px 0; }
.hq-metric p { margin:0; color:var(--admin-muted); font-size:12px; }
.hq-alert { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--admin-border); border-radius:8px; background:var(--admin-surface); margin-bottom:12px; }
.hq-alert p { margin:4px 0 0; color:var(--admin-muted); }
.hq-alert.warning { border-left:3px solid var(--design-error); }
.hq-alert.error { border-left:3px solid var(--design-error); }
.hq-actions { display:flex; flex-wrap:wrap; gap:8px; }
.hq-button[aria-pressed=true] { background:var(--hq-tint); border-color:var(--hq-primary); color:var(--hq-primary); }
.hq-analysis-table { width:100%; border-collapse:collapse; }
.hq-analysis-table :where(th,td) { padding:10px 16px; text-align:left; border-bottom:1px solid var(--admin-border); }
.hq-analysis-table small { display:block; color:var(--admin-muted); }
.hq-revenue-chart { height:240px; display:flex; align-items:flex-end; gap:12px; overflow-x:auto; padding:12px 0 32px; margin-bottom:12px; border-bottom:1px solid var(--admin-border); }
.hq-chart-column { height:100%; min-width:32px; flex:1; position:relative; display:flex; align-items:flex-end; }
.hq-chart-bar { width:100%; min-height:1px; background:var(--design-primary-container); border-radius:3px 3px 0 0; }
.hq-chart-column small { position:absolute; bottom:-24px; left:0; font-size:11px; color:var(--admin-muted); }
.admin-shell .statistics-grid { grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); }
.admin-shell .metric-card { border-radius:8px; box-shadow:none; }
@media(max-width:1279px) {
    .admin-shell[class] { grid-template-columns:minmax(0,1fr); }
    .admin-shell .sidebar { display:none; position:fixed; inset:0 auto 0 0; width:260px; }
    .admin-shell.menu-open .sidebar { display:block; }
    .admin-shell .menu-toggle { display:block; flex:0 0 36px; }
    .admin-shell.menu-open .sidebar-scrim { display:block; position:fixed; inset:0; border:0; background:color-mix(in srgb, var(--design-on-surface) 50.20%, transparent); z-index:24; }
    .admin-shell .sidebar :where(.brand-text,.nav-caption,.nav-link b,.group-caption b,.sidebar-versions) { display:revert; }
    .admin-shell .sidebar .sidebar-versions { display:grid; }
    .admin-shell .sidebar .nav-link { justify-content:flex-start; }
    .admin-shell .sidebar .group-caption { justify-content:space-between; }
}
@media(max-width:767px) {
    .admin-shell .topbar { padding:8px 16px; height:auto; flex-wrap:wrap; }
    .admin-shell .topbar-actions { flex-wrap:wrap; gap:6px; }
    .admin-shell .content { padding:16px; }
    .hq-search-launch { flex:1; width:auto; }
    .hq-alert { align-items:flex-start; flex-direction:column; }
    .admin-shell .role-badge { display:none; }
}
@media(prefers-reduced-motion:reduce) {
    .admin-shell *, .admin-shell *::before, .admin-shell *::after { scroll-behavior:auto ; transition:none ; }
}

/* ---- Dark navy sidebar theme (remaining bits not covered by --sidebar-* vars) ----
   Exact source: /template-common.css (site-wide stylesheet loaded on every mockup
   screen, not embedded in any single screens/_NN/code.html — its `aside{...}` rules
   force-override each page's own light "surface-container-lowest" sidebar classes
   into this dark gradient). The sidebar is dark regardless of the app's own
   light/dark toggle, so its colors live as fixed --sidebar-* values above, not
   theme-conditional ones. */
.admin-shell .sidebar { border-right: 1px solid rgba(147, 204, 255, .16); box-shadow: 8px 0 28px rgba(10, 31, 51, .12); }
.admin-shell .sidebar .brand { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.admin-shell .sidebar .nav-caption { color: #7598b5; }
.admin-shell .sidebar .nav-link { position: relative; }
.admin-shell .sidebar .nav-link:hover { border-color: rgba(147, 204, 255, .10); transform: translateX(2px); }
.admin-shell .sidebar .nav-link.active { border-color: rgba(255, 255, 255, .14); box-shadow: 0 7px 18px rgba(0, 97, 148, .32); }
.admin-shell .sidebar .nav-link.active::before { content: ''; position: absolute; left: -5px; width: 3px; height: 18px; border-radius: 4px; background: #8ed1ff; }
.admin-shell .sidebar .sidebar-versions { background: rgba(3, 17, 30, .42); border-top: 1px solid rgba(255, 255, 255, .08); }
.admin-shell .sidebar .sidebar-versions span { color: #a9c5da; }

.notification-wrap { position: relative; }
.notification-button { position: relative; }
.notification-dot { position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--design-error, #ba1a1a); color:#fff; font-size:10px; line-height:15px; font-weight:700; text-align:center; }
.notification-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.notification-panel { position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:420px; overflow-y:auto; z-index:61; border:1px solid var(--admin-border); border-radius:12px; background:var(--admin-surface); box-shadow:0 12px 32px rgba(10,31,51,.18); display:flex; flex-direction:column; }
.notification-panel header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--admin-border); color:var(--admin-text); }
.notification-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid var(--admin-border); text-decoration:none; color:var(--admin-text); }
.notification-item:hover { background:var(--admin-bg); }
.notification-item span.material-symbols-outlined { font-size:18px; color:var(--admin-muted); flex-shrink:0; margin-top:1px; }
.notification-item b { display:block; font-size:13px; }
.notification-item small { display:block; color:var(--admin-muted); font-size:11px; margin-top:2px; }
.notification-item.error span.material-symbols-outlined { color:var(--design-error, #ba1a1a); }
.notification-item.warning span.material-symbols-outlined { color:#8a6d00; }
.notification-empty { padding:18px 14px; text-align:center; color:var(--admin-muted); font-size:12px; }
.notification-panel footer { padding:10px 14px; border-top:1px solid var(--admin-border); }
.notification-panel footer a { color:var(--hq-primary, #006194); font-size:12px; font-weight:600; text-decoration:none; }
.notification-panel footer a:hover { text-decoration:underline; }