/*
 * BarFlow application design system
 * This is the authoritative color and component layer for the authenticated
 * application. Module styles must consume these tokens instead of defining
 * local palettes.
 */
:root,
html[data-resolved-theme="light"] {
    color-scheme: light;
    --bf-bg: #f3f6fb;
    --bf-surface: #ffffff;
    --bf-surface-2: #edf2f9;
    --bf-border: #d7e0ec;
    --bf-border-strong: #b8c7da;
    --bf-primary: #2f66f3;
    --bf-primary-hover: #2558dc;
    --bf-primary-soft: rgba(47, 102, 243, .10);
    --bf-text: #101a2d;
    --bf-text-muted: #607089;
    --bf-text-subtle: #8997aa;
    --bf-success: #22c875;
    --bf-warning: #f3b63f;
    --bf-danger: #ef4444;
    --bf-info: #38a0ff;
    --bf-success-soft: color-mix(in srgb, var(--bf-success) 12%, var(--bf-surface));
    --bf-warning-soft: color-mix(in srgb, var(--bf-warning) 15%, var(--bf-surface));
    --bf-danger-soft: color-mix(in srgb, var(--bf-danger) 11%, var(--bf-surface));
    --bf-info-soft: color-mix(in srgb, var(--bf-info) 12%, var(--bf-surface));
    --bf-card-radius: 16px;
    --bf-control-radius: 11px;
    --bf-card-padding: clamp(16px, 2vw, 22px);
    --bf-shadow: 0 10px 28px rgba(11, 29, 58, .07);
    --bf-shadow-hover: 0 16px 34px rgba(11, 29, 58, .11);
    --bf-focus: 0 0 0 3px color-mix(in srgb, var(--bf-primary) 26%, transparent);

    /* Backward-compatible aliases. */
    --bg: var(--bf-bg);
    --bg-soft: var(--bf-surface-2);
    --panel: var(--bf-surface);
    --panel-subtle: var(--bf-surface-2);
    --surface: var(--bf-surface);
    --ink: var(--bf-text);
    --ink-soft: var(--bf-text-muted);
    --muted: var(--bf-text-muted);
    --line: var(--bf-border);
    --line-strong: var(--bf-border-strong);
    --primary: var(--bf-primary);
    --primary-strong: var(--bf-primary-hover);
    --primary-soft: var(--bf-primary-soft);
    --primary-ink: #ffffff;
    --success: var(--bf-success);
    --success-soft: var(--bf-success-soft);
    --warning: var(--bf-warning);
    --warning-soft: var(--bf-warning-soft);
    --danger: var(--bf-danger);
    --danger-soft: var(--bf-danger-soft);
    --radius: var(--bf-card-radius);
    --shadow-sm: var(--bf-shadow);
    --shadow-md: var(--bf-shadow-hover);
}

html[data-resolved-theme="dark"] {
    color-scheme: dark;
    --bf-bg: #07182e;
    --bf-surface: #0d223d;
    --bf-surface-2: #132c4a;
    --bf-border: #29496b;
    --bf-border-strong: #3b5e82;
    --bf-primary: #2f66f3;
    --bf-primary-hover: #2558dc;
    --bf-primary-soft: rgba(47, 102, 243, .16);
    --bf-text: #f5f7fb;
    --bf-text-muted: #9fb0c6;
    --bf-text-subtle: #71839a;
    --bf-success: #22c875;
    --bf-warning: #f3b63f;
    --bf-danger: #ef4444;
    --bf-info: #38a0ff;
    --bf-shadow: 0 12px 30px rgba(0, 8, 22, .25);
    --bf-shadow-hover: 0 18px 38px rgba(0, 8, 22, .34);
}

html[data-resolved-theme="dark"] input,
html[data-resolved-theme="dark"] select,
html[data-resolved-theme="dark"] textarea,
html[data-resolved-theme="dark"] button:not(.primary):not(.danger-solid),
html[data-resolved-theme="dark"] .button:not(.primary):not(.danger-solid),
html[data-resolved-theme="dark"] .inventory-action-button,
html[data-resolved-theme="dark"] .stock-count,
html[data-resolved-theme="dark"] .list-row {
    border-color: var(--bf-border-strong) !important;
    background: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] .theme-quick button.is-active {
    background: var(--bf-primary) !important;
    color: #ffffff !important;
}

html,
body {
    background: var(--bf-bg) !important;
    color: var(--bf-text);
}

body::before,
body::after {
    background: none !important;
}

.page,
.main,
.app-shell,
.analytics-page {
    color: var(--bf-text);
}

p,
small,
.muted,
.help,
.hint,
.field-help,
.section-head p,
.card-title p {
    color: var(--bf-text-muted);
}

h1,
h2,
h3,
h4,
strong,
label,
legend,
th,
dt {
    color: var(--bf-text);
}

a {
    color: var(--bf-primary);
}

/* Shared surfaces */
.panel,
.paper-panel,
.hero-panel,
.action-card,
.metric-card,
.list,
.accordion,
.stock-category,
.stock-product,
.board-message-card,
.board-detail,
.empty-state,
.premium-empty,
.note-box,
.settings-card,
.analytics-hero,
.analytics-filters,
.analytics-overview article,
.analytics-kpi-card,
.analytics-turnus-card,
.analytics-chart-card,
.analytics-methodology,
.analytics-formula,
.analytics-empty,
.analytics-detail-total,
.analytics-day-card,
.modal-panel,
.modal-card,
dialog {
    border: 1px solid var(--bf-border) !important;
    border-radius: var(--bf-card-radius);
    background: var(--bf-surface) !important;
    color: var(--bf-text);
    box-shadow: var(--bf-shadow);
}

.empty-state,
.premium-empty {
    background: var(--bf-surface) !important;
}

.empty-state .empty-icon,
.premium-empty .empty-icon {
    background: var(--bf-primary-soft) !important;
    color: var(--bf-primary);
}

/* Buttons */
button,
.button {
    min-height: 42px;
    border: 1px solid var(--bf-border-strong);
    border-radius: var(--bf-control-radius);
    background: var(--bf-surface-2);
    color: var(--bf-text);
    box-shadow: none;
}

button:hover,
.button:hover {
    border-color: var(--bf-primary);
    background: var(--bf-primary-soft);
    color: var(--bf-text);
}

button.primary,
.button.primary,
.primary,
input[type="submit"].primary {
    border-color: var(--bf-primary) !important;
    background: var(--bf-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bf-primary) 24%, transparent);
}

button.primary:hover,
.button.primary:hover,
.primary:hover {
    border-color: var(--bf-primary-hover) !important;
    background: var(--bf-primary-hover) !important;
}

.button.secondary,
button.secondary {
    border-color: color-mix(in srgb, var(--bf-primary) 55%, var(--bf-border));
    background: var(--bf-surface-2);
    color: var(--bf-primary);
}

.button.ghost,
button.ghost,
.icon-button {
    border-color: transparent;
    background: transparent;
    color: var(--bf-text-muted);
}

.danger-action,
button.danger-action {
    border-color: color-mix(in srgb, var(--bf-danger) 58%, var(--bf-border)) !important;
    background: var(--bf-danger-soft) !important;
    color: var(--bf-danger) !important;
}

.danger-action:hover,
button.danger-action:hover,
.danger-solid {
    border-color: var(--bf-danger) !important;
    background: var(--bf-danger) !important;
    color: #ffffff !important;
}

button:disabled,
.button[aria-disabled="true"],
input:disabled,
select:disabled,
textarea:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: saturate(.55);
}

/* Forms */
input,
select,
textarea {
    min-height: 42px;
    border: 1px solid var(--bf-border-strong) !important;
    border-radius: var(--bf-control-radius);
    background: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
    box-shadow: none;
}

textarea {
    min-height: 96px;
}

input::placeholder,
textarea::placeholder {
    color: var(--bf-text-subtle);
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.button:focus-visible,
a:focus-visible {
    border-color: var(--bf-primary) !important;
    outline: none;
    box-shadow: var(--bf-focus) !important;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
.field-error input,
.field-error textarea {
    border-color: var(--bf-danger) !important;
}

/* Tables, navigation and overlays */
table,
thead,
tbody,
tr,
td,
th {
    border-color: var(--bf-border) !important;
    color: var(--bf-text);
}

thead,
th,
.table-head,
.tabs,
.topbar,
.modal-head {
    background: var(--bf-surface-2) !important;
}

tr:hover td {
    background: var(--bf-primary-soft);
}

.tabs a,
.nav a {
    color: var(--bf-text-muted);
}

.tabs > a {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid transparent !important;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.tabs > a:hover {
    border-color: transparent !important;
    background: var(--bf-primary-soft) !important;
    color: var(--bf-text) !important;
    transform: none;
}

.tabs a.is-active,
.nav a.is-active {
    border-color: var(--bf-primary) !important;
    background: var(--bf-primary) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, #ffffff 72%, var(--bf-primary));
}

.tabs a.is-active .nav-icon {
    color: #ffffff !important;
}

.flash,
.system-toast,
.update-banner,
.connection-status {
    border-color: var(--bf-border);
    background: var(--bf-surface) !important;
    color: var(--bf-text);
}

.flash.success,
.badge.success {
    background: var(--bf-success-soft) !important;
    color: var(--bf-success) !important;
}

.flash.warning,
.badge.warning {
    background: var(--bf-warning-soft) !important;
    color: var(--bf-warning) !important;
}

.flash.error,
.badge.danger {
    background: var(--bf-danger-soft) !important;
    color: var(--bf-danger) !important;
}

.badge.neutral,
.status-pill {
    background: var(--bf-surface-2) !important;
    color: var(--bf-text-muted) !important;
}

/* Inventory */
.inventory-create,
.inventory-action-button,
.stock-category,
.stock-category > summary,
.stock-product,
.stock-product > summary {
    background: var(--bf-surface) !important;
    color: var(--bf-text) !important;
}

.stock-category > summary,
.stock-product > summary {
    border-color: var(--bf-border) !important;
}

.inventory-action-button.primary {
    background: var(--bf-primary) !important;
    color: #ffffff !important;
}

.inventory-separator {
    background: var(--bf-border);
}

/* Board */
.board-toolbar,
.board-compose,
.board-message-card,
.board-detail {
    background: var(--bf-surface) !important;
}

.board-system-message {
    border-left-color: var(--bf-primary) !important;
    background: var(--bf-surface) !important;
}

/* Analytics */
body.analytics-body {
    background: var(--bf-bg) !important;
    color: var(--bf-text);
}

.analytics-hero,
.analytics-company-badge,
.analytics-filters,
.analytics-overview article,
.analytics-kpi-card,
.analytics-turnus-card,
.analytics-chart-card,
.analytics-methodology,
.analytics-formula,
.analytics-empty,
.analytics-detail-total,
.analytics-day-card,
.analytics-day-card > header,
.analytics-shift-list a {
    background: var(--bf-surface) !important;
    border-color: var(--bf-border) !important;
    color: var(--bf-text) !important;
}

.analytics-hero p:not(.eyebrow),
.analytics-section-head > span,
.analytics-overview span,
.analytics-kpi-card > span,
.analytics-kpi-card small,
.analytics-turnus-card small,
.analytics-chart-values small,
.analytics-pie-layout li span,
.analytics-chart-empty,
.analytics-methodology p,
.analytics-formula p,
.analytics-empty p,
.analytics-detail-total span,
.analytics-day-card > header span,
.analytics-shift-list small {
    color: var(--bf-text-muted) !important;
}

.analytics-kpi-card b,
.analytics-back,
.analytics-shift-list i {
    color: var(--bf-primary);
}

.analytics-bar {
    background: var(--bf-surface-2);
}

.analytics-bar i {
    background: var(--bf-primary);
}

.analytics-line-chart line {
    stroke: var(--bf-border);
}

.analytics-line-chart polyline {
    stroke: var(--bf-primary);
}

.analytics-pie {
    border-color: var(--bf-surface);
}

/* Calendar, archive, close flow and administration */
.schedule-v2-hero,
.schedule-calendar,
.schedule-person-card,
.schedule-employee-admin-card,
.archive-card,
.close-row,
.shift-row,
.category-block,
.user-card,
.category-card {
    background: var(--bf-surface) !important;
    border-color: var(--bf-border) !important;
    color: var(--bf-text) !important;
}

.schedule-person-card,
.schedule-employee-admin-card {
    border-left: 4px solid var(--employee-color, var(--bf-primary)) !important;
}

.schedule-assignment-card {
    background: color-mix(in srgb, var(--employee-color, var(--bf-primary)) 18%, var(--bf-surface)) !important;
    border-color: color-mix(in srgb, var(--employee-color, var(--bf-primary)) 48%, var(--bf-border)) !important;
    color: var(--bf-text) !important;
}

/* Login and MFA use the same tokens, without forcing an opposite theme. */
.login-body,
.login-shell {
    background: var(--bf-bg) !important;
    color: var(--bf-text) !important;
}

.login-panel,
.mfa-card,
.mfa-secret,
.recovery-code-list code {
    border-color: var(--bf-border) !important;
    background: var(--bf-surface) !important;
    color: var(--bf-text) !important;
}

.login-story,
.login-heading p,
.login-security,
.login-panel label {
    color: var(--bf-text-muted) !important;
}

@media (min-width: 901px) {
    body,
    .app-shell {
        transition: padding-left .2s ease, width .2s ease;
    }

    .app-shell {
        gap: 0;
    }

    .topbar {
        display: grid;
        height: auto;
        gap: 18px;
        padding: 24px 20px 18px;
        background: transparent !important;
    }

    .topbar-actions {
        position: static;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .theme-quick {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
        padding: 3px;
        border: 1px solid var(--bf-border);
        border-radius: 12px;
        background: var(--bf-surface-2);
        box-shadow: none;
    }

    .theme-quick button {
        width: auto;
        min-width: 0;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 8px;
        border: 0 !important;
        border-radius: 9px;
        background: transparent !important;
        font-size: 13px;
        font-weight: 700;
    }

    .theme-quick button.is-active,
    html[data-resolved-theme="dark"] .theme-quick button.is-active {
        background: var(--bf-primary) !important;
        color: #ffffff !important;
        box-shadow: none;
    }

    .sidebar-collapse {
        width: 42px;
        min-width: 42px;
        height: 46px;
        padding: 0;
        border: 1px solid var(--bf-border) !important;
        background: transparent !important;
        color: var(--bf-text-muted) !important;
    }

    .tabs {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        gap: 6px;
        padding: 10px 16px 12px;
        background: transparent !important;
    }

    .sidebar-logout {
        display: block;
        width: 100%;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid var(--bf-border);
    }

    .sidebar-logout button {
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        gap: 13px;
        padding: 0 14px;
        border: 0 !important;
        border-radius: 12px;
        background: transparent !important;
        color: var(--bf-text-muted) !important;
        font-size: 15px;
        font-weight: 700;
    }

    .sidebar-logout button:hover {
        background: var(--bf-danger-soft) !important;
        color: var(--bf-danger) !important;
        transform: none;
    }

    body.sidebar-collapsed {
        padding-left: 88px;
    }

    body.sidebar-collapsed .app-shell {
        width: 88px;
    }

    body.sidebar-collapsed .topbar {
        gap: 10px;
        padding-block: 14px;
        padding-inline: 10px;
    }

    body.sidebar-collapsed .brand {
        justify-content: center;
    }

    body.sidebar-collapsed .brand > span,
    body.sidebar-collapsed .theme-label,
    body.sidebar-collapsed .sidebar-logout button > span:last-child {
        display: none;
    }

    body.sidebar-collapsed .topbar-actions {
        display: grid;
    }

    body.sidebar-collapsed .theme-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 2px;
    }

    body.sidebar-collapsed .theme-quick button {
        width: 100%;
        height: 34px;
        padding: 0;
        font-size: 12px;
    }

    body.sidebar-collapsed .sidebar-collapse {
        width: 100%;
    }

    body.sidebar-collapsed .tabs {
        gap: 3px;
        padding-inline: 10px;
    }

    body.sidebar-collapsed .tabs > a,
    body.sidebar-collapsed .sidebar-logout button {
        min-height: 44px;
        justify-content: center;
        gap: 0;
        padding: 0;
        font-size: 0;
    }

    body.sidebar-collapsed .tabs > a .nav-icon,
    body.sidebar-collapsed .sidebar-logout .nav-icon {
        margin: 0;
    }

    body.sidebar-collapsed .sidebar-logout {
        padding-top: 8px;
    }
}

@media (max-width: 760px) {
    :root {
        --bf-card-radius: 14px;
        --bf-card-padding: 16px;
    }

    .panel,
    .paper-panel,
    .action-card,
    .metric-card,
    .analytics-hero,
    .analytics-filters,
    .analytics-kpi-card,
    .analytics-chart-card {
        box-shadow: 0 7px 20px rgba(0, 8, 22, .12);
    }
}

@media (max-width: 900px) {
    .sidebar-collapse {
        display: none;
    }

    .sidebar-logout {
        display: block;
    }
}

/*
 * Dark-mode surface guarantee.
 * Keep this block last: legacy modules may still carry light declarations
 * with higher-than-usual specificity.
 */
html[data-resolved-theme="dark"] table,
html[data-resolved-theme="dark"] caption,
html[data-resolved-theme="dark"] colgroup,
html[data-resolved-theme="dark"] thead,
html[data-resolved-theme="dark"] tbody,
html[data-resolved-theme="dark"] tfoot,
html[data-resolved-theme="dark"] tr,
html[data-resolved-theme="dark"] td,
html[data-resolved-theme="dark"] th,
html[data-resolved-theme="dark"] .table,
html[data-resolved-theme="dark"] .table-wrap,
html[data-resolved-theme="dark"] .table-responsive,
html[data-resolved-theme="dark"] .control-table-footer {
    border-color: var(--bf-border) !important;
    background: var(--bf-surface) !important;
    background-color: var(--bf-surface) !important;
    color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] thead,
html[data-resolved-theme="dark"] thead tr,
html[data-resolved-theme="dark"] thead th,
html[data-resolved-theme="dark"] tfoot,
html[data-resolved-theme="dark"] tfoot tr,
html[data-resolved-theme="dark"] tfoot td,
html[data-resolved-theme="dark"] .table-head {
    background: var(--bf-surface-2) !important;
    background-color: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] tbody tr:hover,
html[data-resolved-theme="dark"] tbody tr:hover td {
    background: var(--bf-primary-soft) !important;
    background-color: var(--bf-primary-soft) !important;
}

html[data-resolved-theme="dark"] input,
html[data-resolved-theme="dark"] textarea,
html[data-resolved-theme="dark"] select,
html[data-resolved-theme="dark"] option,
html[data-resolved-theme="dark"] optgroup,
html[data-resolved-theme="dark"] datalist,
html[data-resolved-theme="dark"] .dropdown,
html[data-resolved-theme="dark"] .dropdown-menu,
html[data-resolved-theme="dark"] [role="listbox"],
html[data-resolved-theme="dark"] [role="menu"],
html[data-resolved-theme="dark"] dialog,
html[data-resolved-theme="dark"] .modal,
html[data-resolved-theme="dark"] .modal-card,
html[data-resolved-theme="dark"] .modal-panel,
html[data-resolved-theme="dark"] .popover,
html[data-resolved-theme="dark"] .tooltip,
html[data-resolved-theme="dark"] [role="tooltip"] {
    border-color: var(--bf-border-strong) !important;
    background: var(--bf-surface-2) !important;
    background-color: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
    -webkit-text-fill-color: var(--bf-text);
}

html[data-resolved-theme="dark"] input::placeholder,
html[data-resolved-theme="dark"] textarea::placeholder {
    color: var(--bf-text-subtle) !important;
    -webkit-text-fill-color: var(--bf-text-subtle);
    opacity: 1;
}

html[data-resolved-theme="dark"] input:-webkit-autofill,
html[data-resolved-theme="dark"] input:-webkit-autofill:hover,
html[data-resolved-theme="dark"] input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--bf-surface-2) inset !important;
    -webkit-text-fill-color: var(--bf-text) !important;
}

/* Shift close uses a CSS-grid data table rather than native table elements. */
html[data-resolved-theme="dark"] .shift-close-form .paper-panel,
html[data-resolved-theme="dark"] .shift-close-form .shift-category,
html[data-resolved-theme="dark"] .shift-close-form .shift-category summary,
html[data-resolved-theme="dark"] .shift-close-form .shift-table-wrap,
html[data-resolved-theme="dark"] .shift-close-form .shift-table,
html[data-resolved-theme="dark"] .shift-close-form .shift-row,
html[data-resolved-theme="dark"] .shift-close-form .shift-row > div,
html[data-resolved-theme="dark"] .shift-close-form .shift-row > label,
html[data-resolved-theme="dark"] .shift-close-form .shift-row > output,
html[data-resolved-theme="dark"] .shift-close-form .paper-value,
html[data-resolved-theme="dark"] .shift-close-form .paper-input,
html[data-resolved-theme="dark"] .shift-close-form .finance-grid,
html[data-resolved-theme="dark"] .shift-close-form .breakdown-grid,
html[data-resolved-theme="dark"] .shift-close-form .finance-line,
html[data-resolved-theme="dark"] .shift-close-form .breakdown-line {
    border-color: var(--bf-border) !important;
    background: var(--bf-surface) !important;
    background-color: var(--bf-surface) !important;
    color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] .shift-close-form .shift-category summary,
html[data-resolved-theme="dark"] .shift-close-form .shift-header,
html[data-resolved-theme="dark"] .shift-close-form .shift-header > div,
html[data-resolved-theme="dark"] .shift-close-form .finance-auto {
    border-color: var(--bf-border) !important;
    background: var(--bf-surface-2) !important;
    background-color: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] .shift-close-form .paper-input input,
html[data-resolved-theme="dark"] .shift-close-form .finance-line input,
html[data-resolved-theme="dark"] .shift-close-form textarea {
    border-color: var(--bf-border-strong) !important;
    background: var(--bf-surface-2) !important;
    background-color: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
    -webkit-text-fill-color: var(--bf-text) !important;
}

html[data-resolved-theme="dark"] .shift-close-form .finance-total,
html[data-resolved-theme="dark"] .shift-close-form .breakdown-total {
    background: var(--bf-primary-soft) !important;
    background-color: var(--bf-primary-soft) !important;
}
/* Inventory workbench and shared modal system. */
.modal-panel {
    gap: 16px;
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-card-radius);
    background: var(--bf-surface);
    color: var(--bf-text);
    box-shadow: 0 28px 72px color-mix(in srgb, #000 30%, transparent);
}

.modal-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bf-border);
}

.modal-actions {
    padding-top: 14px;
    border-top: 1px solid var(--bf-border);
}

.modal-panel input,
.modal-panel select,
.modal-panel textarea {
    min-height: 44px;
    border-color: var(--bf-border-strong);
    background: var(--bf-surface-2);
    color: var(--bf-text);
}

.modal-panel input[type="radio"],
.modal-panel input[type="checkbox"] {
    min-width: 16px;
    min-height: 16px;
    width: 16px;
    height: 16px;
    padding: 0;
}

.inventory-module-nav,
.inventory-history,
.inventory-bulk-product,
.inventory-bulk-summary,
.inventory-writeoff-reasons {
    border-color: var(--bf-border);
    background: var(--bf-surface);
    color: var(--bf-text);
}

.inventory-module-nav a,
.inventory-module-nav button {
    color: var(--bf-text-muted);
}

.inventory-module-nav a:hover,
.inventory-module-nav button:hover {
    background: var(--bf-primary-soft);
    color: var(--bf-text);
}

.inventory-bulk-product-copy small,
.inventory-history-row small,
.inventory-bulk-summary span {
    color: var(--bf-text-muted);
}

.inventory-stepper button,
.inventory-stepper input,
.inventory-reason-options label {
    border-color: var(--bf-border-strong) !important;
    background: var(--bf-surface-2) !important;
    color: var(--bf-text) !important;
}

.inventory-stepper button:hover,
.inventory-reason-options label:has(input:checked) {
    border-color: var(--bf-primary) !important;
    background: var(--bf-primary-soft) !important;
}