@import url('/assets/snigg-tokens.css?v=20260464');

/* Shared top bar + account menu for installer-facing pages (hub, products, articles, downloads). */

body.has-installer-shell {
    padding-top: var(--installer-shell-h);
}

/* Index + login: never show Account in the bar (no Tailwind dependency; survives cache/JS order). */
body[data-public-shell-home='1'] .installer-shell-menu {
    display: none !important;
}

/* Public downloads / device list / installer downloads: no Account in top bar (same flow as home → resources). */
body[data-shell-suppress-account='1'] .installer-shell-menu {
    display: none !important;
}

/* Signed-out shell: belt-and-braces (must beat any later theme rules). */
body.has-installer-shell.installer-shell-anon .installer-shell-menu {
    display: none !important;
}

/* No display:contents here — it breaks position:fixed for the bar in Safari/Firefox. */

.installer-shell-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--installer-shell-h);
    box-sizing: border-box;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-reading-theme='light'] .installer-shell-bar {
    border-bottom-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.97);
}

/* Match body horizontal padding (Tailwind p-4 / sm:p-6 / md:p-8) so shell lines up with max-w-* below. */
body.has-installer-shell[data-installer-chrome='1'] .installer-shell-bar {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
    body.has-installer-shell[data-installer-chrome='1'] .installer-shell-bar {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 768px) {
    body.has-installer-shell[data-installer-chrome='1'] .installer-shell-bar {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

.installer-shell-inner {
    /* Full width of fixed bar so theme/actions align with viewport edges (same horizontal padding as chrome). */
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px));
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    box-sizing: border-box;
}

.installer-shell-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    row-gap: 0.35rem;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.installer-shell-mobile-nav {
    display: none;
    position: relative;
}

.installer-shell-mobile-nav > summary {
    list-style: none;
}

.installer-shell-mobile-nav > summary::-webkit-details-marker {
    display: none;
}

.installer-shell-mobile-nav__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--installer-shell-control-h);
    padding: 0 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
}

html[data-reading-theme='light'] .installer-shell-mobile-nav__summary {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}

.installer-shell-mobile-nav__icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    background:
        linear-gradient(currentColor, currentColor) 0 0.2rem / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 0.55rem / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 0.9rem / 100% 2px no-repeat;
    opacity: 0.9;
}

.installer-shell-mobile-nav__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    min-width: 14rem;
    max-width: min(82vw, 22rem);
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 210;
}

html[data-reading-theme='light'] .installer-shell-mobile-nav__panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: #e2e8f0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.installer-shell-mobile-nav__panel .installer-shell-crumb {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
}

@media (max-width: 640px) {
    .installer-shell-mobile-nav {
        display: inline-flex;
        align-items: center;
    }
    .installer-shell-global-nav {
        display: none !important;
    }
    /* Keep bar compact on mobile */
    .installer-shell-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
    .installer-shell-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    .installer-shell-actions {
        gap: 0.5rem;
    }
    .installer-shell-theme-btn {
        padding: 0 0.65rem;
        min-width: 2.85rem;
    }

    /* Mobile menu panel: fixed to viewport right so it always opens leftwards */
    .installer-shell-mobile-nav__panel {
        position: fixed;
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        left: auto;
        top: calc(var(--installer-shell-h) + 0.5rem);
    }
}

.installer-shell-global-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.1rem 0;
}

.installer-shell-global-nav::-webkit-scrollbar {
    display: none;
}

.installer-shell-compat-mount {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .installer-shell-compat-mount {
        display: none !important;
    }
}

.installer-shell-compat-dd {
    position: relative;
    flex-shrink: 0;
}

.installer-shell-compat-dd > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
}

.installer-shell-compat-dd > summary::-webkit-details-marker {
    display: none;
}

.installer-shell-compat-dd > summary:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

.installer-shell-compat-summary--current {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.22);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

html[data-reading-theme='light'] .installer-shell-compat-dd > summary {
    color: #64748b;
}

html[data-reading-theme='light'] .installer-shell-compat-dd > summary:hover {
    color: #0f172a;
    background: #f1f5f9;
}

html[data-reading-theme='light'] .installer-shell-compat-summary--current {
    color: var(--app-chrome-chip-active-fg, #0f172a) !important;
    background: var(--app-chrome-chip-active-bg, #fff) !important;
    box-shadow: var(--app-chrome-chip-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08)) !important;
}

.installer-shell-compat-caret {
    font-size: 0.65rem;
    opacity: 0.85;
    margin-left: 0.05rem;
}

.installer-shell-compat-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 220;
    min-width: 12.5rem;
    max-width: min(90vw, 18rem);
    padding: 0.35rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

html[data-reading-theme='light'] .installer-shell-compat-panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: #e2e8f0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.installer-shell-compat-link {
    display: block;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    line-height: 1.25;
}

.installer-shell-compat-link:hover {
    color: #f1f5f9;
    background: rgba(51, 65, 85, 0.5);
}

.installer-shell-compat-link--current {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.18);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

html[data-reading-theme='light'] .installer-shell-compat-link {
    color: #475569;
}

html[data-reading-theme='light'] .installer-shell-compat-link:hover {
    color: #0f172a;
    background: #f1f5f9;
}

html[data-reading-theme='light'] .installer-shell-compat-link--current {
    color: var(--app-chrome-chip-active-fg, #0f172a) !important;
    background: var(--app-chrome-chip-active-bg, #f8fafc) !important;
}

.installer-shell-mobile-nav__panel .installer-shell-compat-dd {
    width: 100%;
}

.installer-shell-mobile-nav__panel .installer-shell-compat-dd > summary {
    width: 100%;
    box-sizing: border-box;
}

.installer-shell-mobile-nav__panel .installer-shell-compat-panel {
    position: static;
    max-width: none;
    margin-top: 0.25rem;
}

.installer-shell-crumb {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
}

.installer-shell-crumb:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

/* Dark: original sky “current” (unchanged). Light: chip tokens — see html[data-reading-theme='light'] below. */
.installer-shell-crumb--current {
    color: #e0f2fe;
    background: rgba(56, 189, 248, 0.22);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
    /* Must remain clickable: hub crumb links to product picker even when this page is in the “hub” section */
    cursor: pointer;
}

html[data-reading-theme='light'] .installer-shell-crumb--current {
    color: var(--app-chrome-chip-active-fg, #0f172a) !important;
    background: var(--app-chrome-chip-active-bg, #fff) !important;
    box-shadow: var(--app-chrome-chip-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08)) !important;
}

html[data-reading-theme='light'] .installer-shell-crumb {
    color: #64748b;
}

html[data-reading-theme='light'] .installer-shell-crumb:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.installer-shell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Cloud Login was removed from the shell; hide it even if a cached script still injects the old link. */
#installerShellCloudLogin,
a.installer-shell-cloud-login {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.installer-shell-theme-slot {
    display: flex;
    align-items: center;
}

.installer-shell-theme-seg {
    display: inline-flex;
    align-items: stretch;
    min-height: var(--installer-shell-control-h);
    border-radius: 0.5rem;
    padding: 2px;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-sizing: border-box;
}

html[data-reading-theme='light'] .installer-shell-theme-seg {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.installer-shell-theme-btn {
    margin: 0;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 0.85rem;
    min-width: 3.25rem;
    border-radius: 0.375rem;
    color: #94a3b8;
    background: transparent;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.installer-shell-theme-btn:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

html[data-reading-theme='light'] .installer-shell-theme-btn {
    color: #64748b;
}

html[data-reading-theme='light'] .installer-shell-theme-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.65);
}

.installer-shell-theme-btn--active {
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.installer-shell-theme-btn--active:hover {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.95);
}

html[data-reading-theme='light'] .installer-shell-theme-btn--active {
    background: var(--app-chrome-chip-active-bg, #fff);
    color: var(--app-chrome-chip-active-fg, #0f172a);
    box-shadow: var(--app-chrome-chip-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
}

html[data-reading-theme='light'] .installer-shell-theme-btn--active:hover {
    color: var(--app-chrome-chip-active-fg, #0f172a);
    background: var(--app-chrome-chip-active-bg, #fff);
}

.installer-shell-theme-btn:focus {
    outline: none;
}

.installer-shell-theme-btn:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

/* Installer HTML: shell inner matches main column (default 64rem = Tailwind max-w-5xl). */
body.has-installer-shell[data-installer-chrome='1'] .installer-shell-inner {
    max-width: 64rem;
    padding-left: 0;
    padding-right: 0;
}

/* Single-page reader uses max-w-6xl (72rem). */
body.has-installer-shell[data-installer-chrome='1'][data-installer-shell-wide='1'] .installer-shell-inner {
    max-width: 72rem;
}

/* Dashboard / admin main column matches Tailwind max-w-7xl (80rem). */
body.has-installer-shell[data-installer-chrome='1'][data-installer-shell-app='1'] .installer-shell-inner {
    max-width: 80rem;
}

/* Match the first page column width so shell nav aligns with the main column. */
body.has-installer-shell[data-installer-chrome='1']:has(> .max-w-2xl.mx-auto) .installer-shell-inner {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

body.has-installer-shell[data-installer-chrome='1']:has(> .max-w-3xl.mx-auto) .installer-shell-inner {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

body.has-installer-shell[data-installer-chrome='1']:has(> .max-w-6xl.mx-auto) .installer-shell-inner {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

body.has-installer-shell[data-installer-chrome='1']:has(> .max-w-4xl.mx-auto) .installer-shell-inner {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Breathing room under the fixed shell (first content column is direct child of body). */
body.has-installer-shell[data-installer-chrome='1'] > .max-w-2xl.mx-auto,
body.has-installer-shell[data-installer-chrome='1'] > .max-w-3xl.mx-auto,
body.has-installer-shell[data-installer-chrome='1'] > .max-w-5xl.mx-auto,
body.has-installer-shell[data-installer-chrome='1'] > .max-w-6xl.mx-auto,
body.has-installer-shell[data-installer-chrome='1'] > .max-w-7xl.mx-auto,
body.has-installer-shell[data-installer-chrome='1'] > .container {
    padding-top: 1.25rem;
}

@media (min-width: 768px) {
    body.has-installer-shell[data-installer-chrome='1'] > .max-w-2xl.mx-auto,
    body.has-installer-shell[data-installer-chrome='1'] > .max-w-3xl.mx-auto,
    body.has-installer-shell[data-installer-chrome='1'] > .max-w-5xl.mx-auto,
    body.has-installer-shell[data-installer-chrome='1'] > .max-w-6xl.mx-auto,
    body.has-installer-shell[data-installer-chrome='1'] > .max-w-7xl.mx-auto,
    body.has-installer-shell[data-installer-chrome='1'] > .container {
        padding-top: 1.5rem;
    }
}

.installer-shell-menu {
    position: relative;
    list-style: none;
}

.installer-shell-menu > summary {
    list-style: none;
    cursor: pointer;
}

.installer-shell-menu > summary::-webkit-details-marker {
    display: none;
}

.installer-shell-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 0.5rem;
    min-height: var(--installer-shell-control-h);
    padding: 0 0.65rem;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.55);
    color: #e2e8f0;
    user-select: none;
}

.installer-shell-summary:hover {
    background: rgba(51, 65, 85, 0.65);
}

html[data-reading-theme='light'] .installer-shell-summary {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
}

html[data-reading-theme='light'] .installer-shell-summary:hover {
    background: #e2e8f0;
}

.installer-shell-summary-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.installer-shell-avatar {
    width: 1.35rem;
    height: 1.35rem;
    opacity: 0.9;
}

.installer-shell-summary-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.installer-shell-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.15rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.75;
}

.installer-shell-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 14rem;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

html[data-reading-theme='light'] .installer-shell-panel {
    border-color: var(--app-frame-border-light, #c4cedd);
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.installer-shell-navlink {
    display: block;
    padding: 0.45rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    text-decoration: none;
}

.installer-shell-navlink:hover {
    background: rgba(51, 65, 85, 0.5);
    color: #fff;
}

html[data-reading-theme='light'] .installer-shell-navlink {
    color: #0f172a;
}

html[data-reading-theme='light'] .installer-shell-navlink:hover {
    background: #f1f5f9;
    color: #0284c7;
}

.installer-shell-logout {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.35rem;
    border: none;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: #f87171;
    background: transparent;
}

.installer-shell-logout:hover {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
}

html[data-reading-theme='light'] .installer-shell-logout {
    color: #dc2626;
}

html[data-reading-theme='light'] .installer-shell-logout:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.installer-shell-divider {
    height: 1px;
    margin: 0.5rem 0;
    background: rgba(51, 65, 85, 0.55);
}

html[data-reading-theme='light'] .installer-shell-divider {
    background: #e2e8f0;
}

.installer-shell-field {
    margin-top: 0.5rem;
}

.installer-shell-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.installer-shell-muted .installer-shell-label {
    color: #64748b;
}

.installer-shell-soon {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

html[data-reading-theme='dark'] .installer-shell-soon {
    color: #94a3b8;
}

/* Page title stack: short lede under h1, then optional #userInfo (filled by installer-shell.js). */
body.has-installer-shell[data-installer-chrome='1'] .app-chrome-lede {
    color: #94a3b8;
    font-size: 0.9375rem !important;
    line-height: 1.5;
    margin-top: 0.25rem;
    max-width: 48rem;
}

body.has-installer-shell[data-installer-chrome='1'] .app-chrome-user {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.35rem;
    max-width: 48rem;
}

/* -------------------------------------------------------------------------- */
/* App pages (dashboard, admin, settings, inventory) — light reading theme   */
/* -------------------------------------------------------------------------- */

html[data-reading-theme='light']:has(body.has-installer-shell[data-installer-chrome='1']) {
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%) fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] {
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%) fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #0f172a;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1']::after {
    background: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #dashboardTitle,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #adminPanelTitle,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #settingsPageTitle {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #userInfo,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .app-chrome-lede,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .app-chrome-user {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .text-slate-400 {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .text-slate-300 {
    color: #475569 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .border-slate-600,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .border-slate-700 {
    border-color: var(--app-input-border-light, #b8c4d4) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .bg-slate-900\/70,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .bg-slate-900\/50 {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .bg-slate-800\/80,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .bg-slate-800\/50 {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--app-frame-border-light, #c4cedd) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .device-card h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #usersView .bg-slate-800\/80 h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #devicesView .bg-slate-800\/80 h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #statisticsDashboard .text-3xl.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #statisticsDashboard h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #emptyState h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #devicesContainer .device-card h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #devicesContainer .device-card h3.font-semibold.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #adminDevicesContainer .device-card h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #adminDevicesContainer .device-card h3.font-semibold.text-white {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #devicesContainer .device-card .text-slate-400,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #devicesContainer .device-card .text-slate-500,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #adminDevicesContainer .device-card .text-slate-400,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #adminDevicesContainer .device-card .text-slate-500 {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .max-w-2xl .bg-slate-800\/80 h2.text-white {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .hover\:bg-slate-700\/80:hover {
    background: rgba(241, 245, 249, 0.95) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .error-message {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .success-message {
    color: #166534 !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

/* Inventory (custom markup, no Tailwind layout) */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .container {
    color: #0f172a;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .container .header h1,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .container .logo-title h1 {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .upload-section,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Stat cards are their own surfaces; a filled .stats-grid looked like a white strip under the row */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stats-grid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    /* Match page padding so horizontal scroll does not clip card borders */
    padding-top: 0.25rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
    box-sizing: border-box !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container td {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container tbody tr:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .btn-secondary {
    background: #e2e8f0 !important;
    color: #334155 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .btn-secondary:hover {
    background: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .message {
    border-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .message.error {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .message.success {
    color: #166534 !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stat-card.stat-card--filter:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stat-card .label {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stat-card .value {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .stat-card.stat-card--filter.active {
    border-color: var(--shell-brand-primary, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
}

html[data-reading-theme='dark'] body.has-installer-shell[data-installer-chrome='1'] .stat-card.stat-card--filter.active {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45) !important;
}

/* Inventory table — Registered / Unregistered pills (same contrast as admin device list) */
body.has-installer-shell[data-installer-chrome='1'] .table-container .badge {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

html[data-reading-theme='dark'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-registered {
    background: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
}

html[data-reading-theme='dark'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-unregistered {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
}

html[data-reading-theme='dark'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-unregistered-sold {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fdba74 !important;
    border-color: rgba(251, 146, 60, 0.45) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-registered {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-unregistered {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .table-container .badge.badge-unregistered-sold {
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border-color: #fdba74 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .tabs {
    border-bottom-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .tab {
    color: #475569 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .tab.active {
    color: #0f172a !important;
    border-bottom-color: #3b82f6 !important;
}

/* Selects (admin users/devices, dashboard filters) — Tailwind bg-slate-700 */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] select.bg-slate-700,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] select.bg-slate-900\/70 {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] select.text-white {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] select option {
    background-color: #fff !important;
    color: #0f172a !important;
}

/* Inventory inline-styled editors */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] select.inventory-edit,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] input.inventory-edit {
    background: #fff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Modals / overlays (dashboard, admin, settings — Tailwind) */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0.bg-black\/50 {
    background-color: rgba(15, 23, 42, 0.28) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800.rounded-lg,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800.rounded-2xl {
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .border-slate-700,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .border-b.border-slate-700 {
    border-color: #e2e8f0 !important;
}

/* User details modal: clearer divider between title row and body (light). */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #userDetailsModal .user-details-modal-header {
    border-bottom-color: #cbd5e1 !important;
}

/* User details modal: section titles were text-white → invisible on white panel (light). */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #userDetailsModal .user-details-modal__section-heading {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 h2.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 .border-slate-700 + .p-6 h2.text-white {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 label,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 .text-slate-300 {
    color: #475569 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 .text-slate-400 {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800 .text-slate-200 {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .device-card h3.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .device-card h4.text-white,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-800\/80 h3.text-white {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 .bg-slate-900\/70,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .fixed.inset-0 textarea.bg-slate-900\/70 {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Inventory modals (inline styles on #warehouseModal / #addInventoryModal) */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal {
    background: rgba(15, 23, 42, 0.28) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal > div,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal > div {
    background: #fff !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal h2,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal h2 {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal > div > div:first-of-type,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal > div > div:first-of-type {
    border-bottom-color: #e2e8f0 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal label,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal label {
    color: #475569 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal input,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehouseModal textarea,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal input,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal select,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #addInventoryModal textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .delete-modal {
    background: #fff !important;
    border-color: #fecaca !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .delete-modal h3,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .delete-modal p {
    color: #991b1b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .upload-section h2 {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .upload-section p[style*='color'] {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #loading {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehousesView .warehouses-view-title,
html[data-reading-theme='light'] #warehousesView .warehouses-view-title {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .warehouse-card,
html[data-reading-theme='light'] #warehousesView .warehouse-card {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .warehouse-card-title,
html[data-reading-theme='light'] #warehousesView .warehouse-card-title {
    color: #0f172a !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .warehouse-card-desc,
html[data-reading-theme='light'] #warehousesView .warehouse-card-desc {
    color: #64748b !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .warehouse-empty-message,
html[data-reading-theme='light'] #warehousesView .warehouse-empty-message {
    color: #64748b !important;
}

/* Shared .btn variants on shell-mounted pages (inventory, etc.) */
body.has-installer-shell[data-installer-chrome='1'] .btn {
    min-height: var(--shell-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.2;
}

/* Inventory header: shell .btn display overrides native [hidden] — keep toggle working */
body.has-installer-shell[data-installer-chrome='1'] .inventory-header-nav .btn[hidden] {
    display: none !important;
}

body.has-installer-shell[data-installer-chrome='1'] .btn-sm {
    min-height: var(--shell-btn-height);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

body.has-installer-shell[data-installer-chrome='1'] .btn-icon-refresh {
    min-width: var(--shell-btn-height);
    width: var(--shell-btn-height);
    height: var(--shell-btn-height);
    padding: 0 !important;
}

body.has-installer-shell[data-installer-chrome='1'] .btn-primary {
    background: var(--shell-brand-primary);
    color: #fff;
    border: 1px solid transparent;
}

body.has-installer-shell[data-installer-chrome='1'] .btn-primary:hover {
    background: var(--shell-brand-primary-hover);
}

body.has-installer-shell[data-installer-chrome='1'] .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.has-installer-shell[data-installer-chrome='1'] .btn-danger {
    background: var(--shell-brand-danger);
    color: #fff;
    border: 1px solid var(--shell-brand-danger);
}

body.has-installer-shell[data-installer-chrome='1'] .btn-danger:hover {
    background: var(--shell-brand-danger-hover);
    border-color: var(--shell-brand-danger-hover);
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] .btn-danger {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Inventory — warehouse cards: outline-style delete in light (readable, less loud than solid red) */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehousesView .warehouse-card-delete-btn.btn-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #warehousesView .warehouse-card-delete-btn.btn-danger:hover {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    border-color: #fca5a5 !important;
}

/* Inventory table row — same soft delete treatment as warehouse cards */
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #inventoryView .inventory-table-delete-btn.btn-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #inventoryView .inventory-table-delete-btn.btn-danger:hover {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    border-color: #fca5a5 !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #inventoryView .inventory-delete-all-btn.btn-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] #inventoryView .inventory-delete-all-btn.btn-danger:hover {
    background: #fee2e2 !important;
    color: #7f1d1d !important;
    border-color: #fca5a5 !important;
}

/* Filled primary overrides: assets/snigg-light-surface-last.css (end of body, after Tailwind) */

html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] button.bg-slate-700,
html[data-reading-theme='light'] body.has-installer-shell[data-installer-chrome='1'] a.bg-slate-700 {
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Light: device cards — soft Edit / Inventory; stronger type + role + QR/Notes pills (Tailwind /20 is faint on white) */
html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card a.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button.bg-slate-700 {
    background: var(--app-device-edit-bg, #f1f5f9) !important;
    background-color: var(--app-device-edit-bg, #f1f5f9) !important;
    color: var(--app-device-edit-fg, #334155) !important;
    border: 1px solid var(--app-device-edit-border, #cbd5e1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card a.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button.hover\:bg-slate-600:hover {
    background: var(--app-device-edit-bg-hover, #e2e8f0) !important;
    background-color: var(--app-device-edit-bg-hover, #e2e8f0) !important;
    color: var(--app-device-edit-fg, #334155) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card span[class*='bg-cyan-600'] {
    background: #cffafe !important;
    background-color: #cffafe !important;
    color: #0e7490 !important;
    border: 1px solid #67e8f9 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card span[class*='bg-purple-600'] {
    background: #f3e8ff !important;
    background-color: #f3e8ff !important;
    color: #5b21b6 !important;
    border: 1px solid #d8b4fe !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card span[class*='bg-blue-600'] {
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #1e3a8a !important;
    border: 1px solid #60a5fa !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card span[class*='bg-green-600'] {
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #14532d !important;
    border: 1px solid #86efac !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card span[class*='bg-slate-600'] {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='bg-orange-600'] {
    background: #ffedd5 !important;
    background-color: #ffedd5 !important;
    color: #9a3412 !important;
    border: 1px solid #fdba74 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='bg-yellow-600'] {
    background: #fef9c3 !important;
    background-color: #fef9c3 !important;
    color: #713f12 !important;
    border: 1px solid #fde047 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='hover:bg-orange-600/30']:hover {
    background: #fed7aa !important;
    background-color: #fed7aa !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='hover:bg-yellow-600/30']:hover {
    background: #fef08a !important;
    background-color: #fef08a !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='bg-red-600'] {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .device-card button[class*='hover:bg-red-600/30']:hover {
    background: #fecaca !important;
    background-color: #fecaca !important;
}

/* Installer role badge — pill + contrast (device cards + admin user rows; dark was near-invisible blue-400 on /20) */
html[data-reading-theme='dark'] .device-role-badge--installer {
    background: rgba(14, 165, 233, 0.28) !important;
    background-color: rgba(14, 165, 233, 0.28) !important;
    color: #e0f2fe !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

html[data-reading-theme='light'] .device-role-badge--installer {
    background: #dbeafe !important;
    background-color: #dbeafe !important;
    color: #1e3a8a !important;
    border: 1px solid #60a5fa !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Light: inactive dashboard/admin list·cards toggles (not blue “on” state) */
html[data-reading-theme='light'] body[data-installer-chrome='1'] #viewToggleList.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #viewToggleCards.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #userViewToggleList.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #userViewToggleCards.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDeviceViewToggleList.bg-slate-700,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDeviceViewToggleCards.bg-slate-700 {
    background: var(--app-view-toggle-inactive-bg, #e2e8f0) !important;
    background-color: var(--app-view-toggle-inactive-bg, #e2e8f0) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
    border: 1px solid var(--app-view-toggle-inactive-border, #cbd5e1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #viewToggleList.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #viewToggleCards.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #userViewToggleList.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #userViewToggleCards.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDeviceViewToggleList.hover\:bg-slate-600:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDeviceViewToggleCards.hover\:bg-slate-600:hover {
    background: var(--app-view-toggle-inactive-bg-hover, #cbd5e1) !important;
    background-color: var(--app-view-toggle-inactive-bg-hover, #cbd5e1) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
}

/* Modal / form secondary actions (Cancel, Close) — light: same tokens as inactive list·tile toggles */
html[data-reading-theme='light'] body[data-installer-chrome='1'] button.app-modal-secondary-btn,
html[data-reading-theme='light'] body[data-installer-chrome='1'] a.app-modal-secondary-btn {
    background: var(--app-view-toggle-inactive-bg, #e2e8f0) !important;
    background-color: var(--app-view-toggle-inactive-bg, #e2e8f0) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
    border: 1px solid var(--app-view-toggle-inactive-border, #cbd5e1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] button.app-modal-secondary-btn:hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] a.app-modal-secondary-btn:hover {
    background: var(--app-view-toggle-inactive-bg-hover, #cbd5e1) !important;
    background-color: var(--app-view-toggle-inactive-bg-hover, #cbd5e1) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
}

/* Installer hub: Edit = inactive toggle (light) — resource tiles + Change logs summary */
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-tile-footer .btn-action.btn-edit:not(.btn-disabled):not(:disabled),
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-changelog-summary .btn-action.btn-edit:not(.btn-disabled) {
    background: var(--app-view-toggle-inactive-bg, #e2e8f0) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
    border: 1px solid var(--app-view-toggle-inactive-border, #cbd5e1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-tile-footer .btn-action.btn-edit:not(.btn-disabled):not(:disabled):hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-changelog-summary .btn-action.btn-edit:not(.btn-disabled):hover {
    background: var(--app-view-toggle-inactive-bg-hover, #cbd5e1) !important;
    color: var(--app-view-toggle-inactive-fg, #475569) !important;
}

/* Hub: primary View (light) — tile footers + Change logs summary */
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-tile-footer .btn-action.btn-view:not(.btn-disabled):not(:disabled),
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-changelog-summary .btn-action.btn-view:not(.btn-disabled):not(:disabled) {
    background: var(--app-light-primary-fill, #e0f2fe) !important;
    background-color: var(--app-light-primary-fill, #e0f2fe) !important;
    color: var(--app-light-primary-fg, #0c4a6e) !important;
    border: none !important;
    box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-tile-footer .btn-action.btn-view:not(.btn-disabled):not(:disabled):hover,
html[data-reading-theme='light'] body[data-installer-chrome='1'] .installer-hub-changelog-summary .btn-action.btn-view:not(.btn-disabled):not(:disabled):hover {
    background: var(--app-light-primary-fill-hover, #bae6fd) !important;
    background-color: var(--app-light-primary-fill-hover, #bae6fd) !important;
    color: var(--app-light-primary-fg, #0c4a6e) !important;
}

/* Product picker (installer-hub-products): primary admin CTA matches app blue in light */
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminProductsBtn {
    background: var(--app-light-primary-fill, #e0f2fe) !important;
    background-color: var(--app-light-primary-fill, #e0f2fe) !important;
    color: var(--app-light-primary-fg, #0c4a6e) !important;
    border: none !important;
    box-shadow: var(--app-light-primary-shadow, 0 1px 2px rgba(15, 23, 42, 0.12)) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminProductsBtn:hover {
    background: var(--app-light-primary-fill-hover, #bae6fd) !important;
    background-color: var(--app-light-primary-fill-hover, #bae6fd) !important;
    color: var(--app-light-primary-fg, #0c4a6e) !important;
}

/* Admin all-devices: inventory-only tiles — border matches status (overrides generic slate-800/80 frame border in light) */
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-unregistered {
    border-color: #ea580c !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.1) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-defect {
    border-color: #dc2626 !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-returned {
    border-color: #9333ea !important;
    box-shadow: 0 1px 3px rgba(147, 51, 234, 0.1) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-unregistered {
    border-color: rgba(249, 115, 22, 0.65) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-defect {
    border-color: rgba(248, 113, 113, 0.55) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-card.device-card--inv-returned {
    border-color: rgba(192, 132, 252, 0.55) !important;
}

/* Inventory status badges — same pill language as Charger / Notes chips */
#adminDevicesContainer .device-inv-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    box-sizing: border-box;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--unregistered {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(251, 146, 60, 0.45) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--defect {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #fecaca !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--returned {
    background: rgba(126, 34, 206, 0.22) !important;
    color: #e9d5ff !important;
    border: 1px solid rgba(192, 132, 252, 0.45) !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--unregistered {
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border: 1px solid #fdba74 !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--defect {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-badge--returned {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
    border: 1px solid #d8b4fe !important;
    box-shadow: none !important;
}

/* Provisional customer / ship-to line — compact pill with truck icon (not full-width bar) */
#adminDevicesContainer .device-inv-ship-note {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-ship-note {
    background: rgba(180, 83, 9, 0.28) !important;
    color: #fde68a !important;
    border: 1px solid rgba(251, 191, 36, 0.42) !important;
}

html[data-reading-theme='dark'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-ship-note__icon {
    color: #fcd34d !important;
}

/* Ship / provisional customer: distinct from orange “Not registered” (light = indigo) */
html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-ship-note {
    background: #e0e7ff !important;
    color: #312e81 !important;
    border: 1px solid #a5b4fc !important;
}

html[data-reading-theme='light'] body[data-installer-chrome='1'] #adminDevicesContainer .device-inv-ship-note__icon {
    color: #4338ca !important;
}

/* Last-resort (light): Tailwind after installer-shell must not restyle breadcrumb “current” */
html[data-reading-theme='light'] body.has-installer-shell .installer-shell-bar a.installer-shell-crumb--current {
    color: var(--app-chrome-chip-active-fg, #0f172a) !important;
    background: var(--app-chrome-chip-active-bg, #fff) !important;
    box-shadow: var(--app-chrome-chip-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08)) !important;
}

body[data-public-compat-page='1']:not([data-public-compat-logged-in='1']) .installer-shell-menu,
body[data-public-compat-page='1']:not([data-public-compat-logged-in='1']) .installer-shell-mobile-nav {
    display: none !important;
}

/* Public compat page: avoid flash of wrong chrome before /api/auth/me returns */
body[data-public-compat-page='1'].installer-shell-auth-pending .installer-shell-actions > :not(.installer-shell-theme-slot) {
    visibility: hidden !important;
}