/* Canonical dark-overrides (migrated here) — kept under assets/css/ */
/* Dark overrides (loads last) — forces dark mode appearance when html[data-theme="dark"] is set */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header .inner,
html[data-theme="dark"] .site-header .nav,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card.soft,
html[data-theme="dark"] .card.pop,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .iconbtn,
html[data-theme="dark"] .table-scroll,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .wrap.page-my-items .mi-summary,
html[data-theme="dark"] .wrap.page-my-items .mi-expanded,
html[data-theme="dark"] .wrap.page-my-items .mi-icons,
html[data-theme="dark"] .wrap.page-my-items .mi-box,
html[data-theme="dark"] .page-admin .page-head,
html[data-theme="dark"] .page-admin .tab,
html[data-theme="dark"] .page-admin form.filters
{
   background: var(--panel) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
   box-shadow: none !important;
}

html[data-theme="dark"] .card.pop,
html[data-theme="dark"] .wrap.page-my-items .mi-box {
   background: var(--panel-2) !important;
}

html[data-theme="dark"] .btn.primary{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

html[data-theme="dark"] .nav-link.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Admin: ensure tab pills and the tab container are dark */
html[data-theme="dark"] .page-admin .page-head .tabs,
html[data-theme="dark"] .page-admin .page-head .tabs .tab,
html[data-theme="dark"] .page-admin .page-head .tabs .tab.active,
html[data-theme="dark"] .page-admin .tabs,
html[data-theme="dark"] .page-admin .tabs .tab{
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}
html[data-theme="dark"] .page-admin .page-head .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Order QR: ensure tab/menu pills and container are dark */
html[data-theme="dark"] .wrap.page-order-qr .tabs,
html[data-theme="dark"] .page-order-qr .tabs,
html[data-theme="dark"] .page-order-qr .tabs .tab,
html[data-theme="dark"] .page-order-qr .tab,
html[data-theme="dark"] .page-order-qr .tab.active {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}
html[data-theme="dark"] .page-order-qr .tab.active {
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Register item: force panels, steps and scan areas dark */
html[data-theme="dark"] .page-register-item .card,
html[data-theme="dark"] .page-register-item .ri-steps,
html[data-theme="dark"] .page-register-item .ri-scan,
html[data-theme="dark"] .page-register-item .ri-actions,
html[data-theme="dark"] .page-register-item .ri-steps-bar,
html[data-theme="dark"] .page-register-item .ri-scanner #scannerWrap,
html[data-theme="dark"] .page-register-item .ri-scan-frame{
   background: var(--panel) !important;
   border-color: var(--border) !important;
   color: var(--text) !important;
}
html[data-theme="dark"] .page-register-item .ri-step-dot{
   border-color: var(--border) !important;
   background: var(--hover) !important;
}

/* Dashboard: ensure hero/cards are dark */
html[data-theme="dark"] .page-dashboard .dash-hero,
html[data-theme="dark"] .dash-hero,
html[data-theme="dark"] .page-dashboard .dash-grid .widget,
html[data-theme="dark"] .dash-grid .widget {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

/* Register item: force inputs, textareas and action areas dark */
html[data-theme="dark"] .page-register-item .input,
html[data-theme="dark"] .page-register-item .select,
html[data-theme="dark"] .page-register-item .textarea,
html[data-theme="dark"] .page-register-item input,
html[data-theme="dark"] .page-register-item textarea {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

/* My Items: force the specific search/input to use dark panel */
html[data-theme="dark"] .page-my-items input,
html[data-theme="dark"] .page-my-items .mi-search,
html[data-theme="dark"] .page-my-items .mi-search input {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

/* Light overrides (loads last) — force light surfaces when user chooses site light theme
    even if OS prefers dark or page CSS uses prefers-color-scheme: dark */
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-header .inner,
html[data-theme="light"] .site-header .nav,
html[data-theme="light"] .nav,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .nav-toggle,
html[data-theme="light"] .tab,
html[data-theme="light"] .card,
html[data-theme="light"] .card.soft,
html[data-theme="light"] .card.pop,
html[data-theme="light"] .btn,
html[data-theme="light"] .iconbtn,
html[data-theme="light"] .table-scroll,
html[data-theme="light"] .table th,
html[data-theme="light"] .wrap.page-my-items .mi-summary,
html[data-theme="light"] .wrap.page-my-items .mi-expanded,
html[data-theme="light"] .wrap.page-my-items .mi-icons,
html[data-theme="light"] .wrap.page-my-items .mi-box,
html[data-theme="light"] .page-admin .page-head,
html[data-theme="light"] .page-admin .tab,
html[data-theme="light"] .page-admin form.filters,
html[data-theme="light"] .page-register-item .ri-actions-right .btn,
html[data-theme="light"] .page-order-qr .oq-actions .btn
{
   background: var(--panel) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
   box-shadow: none !important;
}

html[data-theme="light"] .card.pop,
html[data-theme="light"] .wrap.page-my-items .mi-box {
   background: var(--panel-2) !important;
}

html[data-theme="light"] .btn.primary{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

html[data-theme="light"] .nav-link.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Page-specific: dashboard, order-qr, register-item, my-items, admin */
html[data-theme="light"] .page-dashboard .dash-hero,
html[data-theme="light"] .dash-hero,
html[data-theme="light"] .page-dashboard .dash-grid .widget,
html[data-theme="light"] .dash-grid .widget {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

html[data-theme="light"] .wrap.page-order-qr .tabs,
html[data-theme="light"] .page-order-qr .tabs,
html[data-theme="light"] .page-order-qr .tabs .tab,
html[data-theme="light"] .page-order-qr .tab,
html[data-theme="light"] .page-order-qr .tab.active {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}
html[data-theme="light"] .page-order-qr .tab.active {
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

html[data-theme="light"] .page-register-item .card,
html[data-theme="light"] .page-register-item .ri-steps,
html[data-theme="light"] .page-register-item .ri-scan,
html[data-theme="light"] .page-register-item .ri-actions,
html[data-theme="light"] .page-register-item .ri-steps-bar,
html[data-theme="light"] .page-register-item .ri-scanner #scannerWrap,
html[data-theme="light"] .page-register-item .ri-scan-frame{
   background: var(--panel) !important;
   border-color: var(--border) !important;
   color: var(--text) !important;
}
html[data-theme="light"] .page-register-item .ri-step-dot{
   border-color: var(--border) !important;
   background: var(--hover) !important;
}

html[data-theme="light"] .page-register-item .input,
html[data-theme="light"] .page-register-item .select,
html[data-theme="light"] .page-register-item .textarea,
html[data-theme="light"] .page-register-item input,
html[data-theme="light"] .page-register-item textarea {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

html[data-theme="light"] .page-my-items input,
html[data-theme="light"] .page-my-items .mi-search,
html[data-theme="light"] .page-my-items .mi-search input {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}

/* Targeted fixes for remaining page-specific dark artifacts */
html[data-theme="light"] .dash-hero,
html[data-theme="light"] .page-dashboard .dash-hero{
   background: var(--panel) !important;
   border-color: var(--border) !important;
   box-shadow: var(--elev-0) !important;
   color: var(--text) !important;
}

html[data-theme="light"] .page-my-items .page-head{
   background: var(--panel) !important;
   border-color: var(--border) !important;
   box-shadow: var(--elev-0) !important;
   color: var(--text) !important;
}

html[data-theme="light"] .page-admin .tab,
html[data-theme="light"] .page-admin .tabs .tab{
   border-color: var(--border) !important;
   background: var(--panel-2) !important;
   color: var(--text) !important;
   box-shadow: none !important;
}
html[data-theme="light"] .page-admin .tab.active,
html[data-theme="light"] .page-admin .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
   box-shadow: 0 10px 26px rgba(79,140,255,.18) !important;
}

/* Ensure hover/active gradient/rgba rules are overridden for admin tabs */
html[data-theme="light"] .page-admin .tab:hover,
html[data-theme="light"] .page-admin .tabs .tab:hover {
   background: var(--panel-2) !important;
   background-image: none !important;
   border-color: var(--border) !important;
   color: var(--text) !important;
   box-shadow: none !important;
}

/* Remove any radial-gradient overlays that might still show through */
html[data-theme="light"] .page-admin .tab,
html[data-theme="light"] .page-admin .tabs .tab{
   background-image: none !important;
}

/* My Items: tabs (wrap/page-scoped) — ensure both light and dark themes render tabs consistently */
html[data-theme="light"] .wrap.page-my-items .tabs,
html[data-theme="light"] .wrap.page-my-items .tabs .tab,
html[data-theme="light"] .wrap.page-my-items .tab {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
   box-shadow: none !important;
}
html[data-theme="light"] .wrap.page-my-items .tab.active,
html[data-theme="light"] .wrap.page-my-items .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
   box-shadow: 0 10px 26px rgba(79,140,255,.18) !important;
}

html[data-theme="dark"] .wrap.page-my-items .tabs,
html[data-theme="dark"] .wrap.page-my-items .tabs .tab,
html[data-theme="dark"] .wrap.page-my-items .tab {
   background: var(--panel-2) !important;
   color: var(--text) !important;
   border-color: var(--border) !important;
}
html[data-theme="dark"] .wrap.page-my-items .tab.active,
html[data-theme="dark"] .wrap.page-my-items .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Extra strict admin tab selectors (cover .page-head .tabs .tab and anchors) */
html[data-theme="light"] body.page-admin .page-head .tabs a.tab,
html[data-theme="light"] body.page-admin .page-head .tabs .tab,
html[data-theme="light"] body.page-admin .page-head .tabs a.tab:hover,
html[data-theme="light"] body.page-admin .page-head .tabs .tab:hover {
   background: var(--panel-2) !important;
   background-image: none !important;
   border-color: var(--border) !important;
   color: var(--text) !important;
   box-shadow: none !important;
}

html[data-theme="light"] body.page-admin .page-head .tabs a.tab.active,
html[data-theme="light"] body.page-admin .page-head .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
   box-shadow: 0 10px 26px rgba(79,140,255,.18) !important;
}

html[data-theme="dark"] body.page-admin .page-head .tabs a.tab,
html[data-theme="dark"] body.page-admin .page-head .tabs .tab{
   background: var(--panel-2) !important;
   background-image: none !important;
   border-color: var(--border) !important;
   color: var(--text) !important;
}

html[data-theme="dark"] body.page-admin .page-head .tabs a.tab.active,
html[data-theme="dark"] body.page-admin .page-head .tabs .tab.active{
   background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
   color: #fff !important;
}

/* Ensure the page-head container doesn't produce a washed/gray backdrop under tabs */
html[data-theme="dark"] body.page-admin .page-head{
   background: var(--panel) !important;
   background-image: none !important;
   box-shadow: none !important;
}
html[data-theme="dark"] body.page-admin .page-head .tabs{
   /* make tabs container transparent baseline, then we explicitly frame below */
   background: transparent !important;
   background-image: none !important;
}

/* Same enforcement for light theme to avoid semi-transparent glass overlap */
html[data-theme="light"] body.page-admin .page-head{
   background: var(--panel) !important;
   background-image: none !important;
}
html[data-theme="light"] body.page-admin .page-head .tabs{
   background: transparent !important;
   background-image: none !important;
}

/* Explicit: remove borders from KPI and latest-activity tiles so they read as inner content */
html[data-theme="dark"] .page-admin .dashboard-kpi-card,
html[data-theme="light"] .page-admin .dashboard-kpi-card,
html[data-theme="dark"] .page-admin .dashboard-card-flat,
html[data-theme="light"] .page-admin .dashboard-card-flat,
html[data-theme="dark"] .page-admin .dashboard-list-grid,
html[data-theme="light"] .page-admin .dashboard-list-grid{
   border: none !important;
   box-shadow: none !important;
}

/* Explicit: give the tabs container a subtle framed look (like order_qr) */
html[data-theme="dark"] body.page-admin .page-head .tabs,
html[data-theme="light"] body.page-admin .page-head .tabs{
   background: var(--panel-2) !important;
   border: 1px solid var(--border) !important;
   border-radius: 12px !important;
   padding: 6px !important;
   gap: 8px !important;
}

/* Ensure individual tab pills keep their rounded/compact look inside framed container */
html[data-theme="dark"] body.page-admin .page-head .tabs .tab,
html[data-theme="light"] body.page-admin .page-head .tabs .tab{
   background: var(--panel-2) !important;
   border: 1px solid var(--border) !important;
}

/* Restore subtle border around admin page-head for both themes */
html[data-theme="dark"] body.page-admin .page-head,
html[data-theme="light"] body.page-admin .page-head {
   border: 1px solid var(--border) !important;
   border-radius: 12px !important;
}