/*
 * LumosRent UI foundation
 * A restrained, high-density interface for operational accounting workflows.
 * Bootstrap remains the behaviour/layout layer; these rules only define the
 * visual system and intentionally avoid expensive glass/blur effects.
 */

:root {
    color-scheme: dark;
    --color-canvas: #101214;
    --color-sidebar: #151719;
    --color-surface: #191c1f;
    --color-surface-raised: #202429;
    --color-surface-hover: #252a2f;
    --color-border: #30363c;
    --color-border-strong: #414950;
    --color-text: #f1f4f5;
    --color-text-secondary: #a8b0b7;
    --color-text-tertiary: #7d878f;
    --color-accent: #23d5d5;
    --color-accent-hover: #52e1e1;
    --color-accent-soft: rgb(35 213 213 / 0.1);
    --color-success: #43d39e;
    --color-warning: #f1bd4c;
    --color-danger: #f47777;
    --color-info: #9f8ee8;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 6px 18px rgb(0 0 0 / 0.06);
    --shadow-md: 0 14px 35px rgb(0 0 0 / 0.09);
    --shadow-modal: 0 30px 90px rgb(0 0 0 / 0.45);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --content-width: 1160px;
    --sidebar-width: 250px;
    --focus-ring: 0 0 0 3px rgb(35 213 213 / 0.2);
}

html { background: var(--color-canvas); }
body {
    margin: 0;
    background: var(--color-canvas) !important;
    color: var(--color-text) !important;
    /* Native UI fonts render immediately, remain crisp at small sizes and all
       provide a sans-serif Cyrillic face without depending on a font CDN. */
    font-family: Inter, "Segoe UI", Roboto, "Noto Sans", Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body, p, span, div, li, td, th, label, a, input, button, select, textarea,
optgroup, .form-control, .form-select, .btn, .dropdown-item, .nav-link {
    font-family: inherit !important;
}
code, pre, kbd, samp, .font-monospace { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--color-text) !important;
    font-weight: 650;
    letter-spacing: -0.015em;
}
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }
small, .text-muted, .text-secondary { color: var(--color-text-secondary) !important; }
::selection { color: var(--color-text); background: rgb(35 213 213 / 0.25); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-canvas); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border: 2px solid var(--color-canvas); border-radius: 4px; }

/* Application shell */
.sidebar {
    width: var(--sidebar-width) !important;
    background: var(--color-sidebar) !important;
    border-right: 1px solid var(--color-border);
    box-shadow: none !important;
}
.sidebar-header { min-height: 64px; padding: 10px 18px !important; border-color: var(--color-border) !important; }
.sidebar-brand-logo { width: 205px !important; height: 42px !important; }
.sidebar-menu { padding: 12px 8px 24px !important; }
.sidebar-menu .menu-section {
    padding: 16px 12px 6px !important;
    color: var(--color-text-tertiary) !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}
.sidebar-menu .nav-item { margin: 1px 0 !important; }
.sidebar-menu .nav-link {
    min-height: 38px !important;
    padding: 8px 10px !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard) !important;
}
.sidebar-menu .nav-link:hover { color: var(--color-text) !important; background: var(--color-surface-raised) !important; }
.sidebar-menu .nav-link.active {
    color: var(--color-text) !important;
    background: var(--color-accent-soft) !important;
    border-color: rgb(35 213 213 / 0.2) !important;
}
.sidebar-menu .nav-link.active i { color: var(--color-accent); }
.sidebar-menu .nav-link i { width: 20px !important; margin-right: 10px !important; font-size: 1rem !important; }
.main-content { margin-left: var(--sidebar-width) !important; background: var(--color-canvas); }
.top-navbar {
    height: 64px !important;
    padding: 0 24px !important;
    background: rgb(16 18 20 / 0.96) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}
.page-title { color: var(--color-text) !important; font-size: 1rem !important; font-weight: 650 !important; }
.content-wrapper { width: 100%; max-width: calc(var(--content-width) + 64px); margin-inline: auto; padding: 28px 32px 48px !important; }
.user-avatar, .company-badge { border-radius: var(--radius-sm) !important; background: var(--color-accent) !important; }

/* Panels and cards */
.card, .dashboard-card, .table-card, .section-card {
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.dashboard-card { padding: 20px !important; }
.card:hover, .dashboard-card:hover { border-color: var(--color-border-strong) !important; box-shadow: none !important; transform: none !important; }
.card-header {
    margin: 0 !important;
    padding: 13px 16px !important;
    color: var(--color-text) !important;
    background: var(--color-surface-raised) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.card-body { padding: 18px; color: var(--color-text) !important; }
.card-footer {
    margin: 0 !important;
    padding: 12px 16px !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-surface-raised) !important;
    border: 0 !important;
    border-top: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
.card-icon { width: 44px !important; height: 44px !important; border-radius: var(--radius-sm) !important; font-size: 1.2rem !important; }

/* Reusable page composition */
.page-shell { width: 100%; margin-inline: auto; }
.page-shell > :last-child { margin-bottom: 0; }
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.page-header__identity { min-width: 0; }
.page-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.375rem !important;
    line-height: 1.25;
}
.page-header__title > i { color: var(--color-accent); font-size: 1.125rem; }
.page-header__description { max-width: 68ch; margin: 5px 0 0; color: var(--color-text-secondary); font-size: 0.8125rem; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.page-actions .btn { white-space: nowrap; }
.page-header > .btn:first-child + div { min-width: 0; margin-right: auto; }
.breadcrumb { margin-bottom: 18px; font-size: 0.75rem; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--color-text-tertiary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-tertiary); }
.filter-panel { margin-bottom: 18px; }
.filter-panel .card-body { padding: 14px 16px; }
.filter-panel .form-check { min-height: 38px; display: flex; align-items: center; gap: 8px; margin: 0; }
.data-panel { overflow: hidden; }
.data-panel > .card-body.p-0 { min-height: 0; }
.form-shell { max-width: 760px; margin-inline: auto; }
.form-shell .card-body { padding: 22px; }
.form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.form-actions .btn-danger, .form-actions .btn-outline-danger { margin-left: auto; }
.section-heading, .card-header-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 18px;
    padding-bottom: 10px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.section-heading i, .card-header-custom i { color: var(--color-accent); }
.empty-state {
    display: grid;
    justify-items: center;
    max-width: 560px;
    margin: 24px auto;
    padding: 48px 24px;
    color: var(--color-text-secondary);
    text-align: center;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}
.empty-state > i { margin-bottom: 14px; color: var(--color-text-tertiary) !important; font-size: 2rem !important; }
.empty-state h4, .empty-state h5 { margin: 0 0 6px; font-size: 1rem !important; }
.empty-state p { margin: 0 0 18px; font-size: 0.8125rem; }
.entity-grid .card { min-height: 100%; }
.entity-grid .card-title { font-size: 0.9375rem; }
.entity-grid .card-footer { padding: 10px 12px !important; }
.table .action-cell, .table th.action-cell { width: 1%; white-space: nowrap; }
.table .numeric-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-w-40 { width: 40px !important; }
.ui-w-50 { width: 50px !important; }
.ui-w-60 { width: 60px !important; }
.ui-w-80 { width: 80px !important; }
.ui-w-100 { width: 100px !important; }
.ui-w-120 { width: 120px !important; }
.ui-w-130 { width: 130px !important; }
.ui-w-140 { width: 140px !important; }
.ui-w-150 { width: 150px !important; }
.ui-w-160 { width: 160px !important; }
.ui-w-180 { width: 180px !important; }
.ui-w-220 { width: 220px !important; }
.ui-w-15pct { width: 15% !important; }
.ui-w-40pct { width: 40% !important; }
.form-check-label strong { color: var(--color-text); }
.select-type-card { border-color: var(--color-border) !important; }
.select-type-card:hover { border-color: var(--color-accent) !important; }
.info-card {
    padding: 15px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 0.8125rem; }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--color-text-secondary); }
.info-value { font-weight: 600; text-align: right; word-break: break-word; }
.note-item { padding: 11px 12px; margin-bottom: 8px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.note-item p { font-size: 0.8125rem; line-height: 1.5; }
.notes-list { scrollbar-gutter: stable; }
.bg-purple { background-color: var(--color-info) !important; }
.bg-info-subtle { background-color: rgb(159 142 232 / 0.12) !important; }
.bg-warning-subtle { background-color: rgb(241 189 76 / 0.1) !important; }
.type-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline: auto; border-radius: var(--radius-md); font-size: 1.25rem; }
.category-level-1 { padding-left: 1rem !important; }
.category-level-2 { padding-left: 2.5rem !important; }
.category-level-3 { padding-left: 4rem !important; }
#newNoteText { border-right: 0 !important; }
#newNoteText:focus + .btn { border-color: var(--color-accent); }
.price-input { min-width: 80px; font-variant-numeric: tabular-nums; }
.table-warning, .table-warning > td { background: rgb(241 189 76 / 0.08) !important; }
.input-group-sm .form-control { font-size: 0.8125rem; }
.equipment-picker { height: 390px; overflow: auto; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-md); scrollbar-gutter: stable; }
.picker-category-title { position: sticky; top: 0; z-index: 1; padding: 9px 12px; color: var(--color-text-secondary); background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); font-size: 0.75rem; font-weight: 700; }
.picker-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.picker-row:last-child { border-bottom: 0; }
.picker-row.selected { background: var(--color-accent-soft); }
.inventory-badge { font-size: 0.75rem; white-space: nowrap; }
.equipment-thumb { display: grid; width: 50px; height: 50px; place-items: center; overflow: hidden; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.equipment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.equipment-hero-image { width: 100%; max-height: 400px; object-fit: contain; background: var(--color-sidebar); }
.equipment-hero-placeholder { display: grid; height: 300px; place-items: center; background: var(--color-surface-raised); }
.equipment-gallery-thumb { width: 60px; height: 60px; object-fit: cover; cursor: pointer; }
.equipment-list-thumb { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; object-fit: cover; }
.equipment-media-placeholder { color: var(--color-text-tertiary); background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.equipment-card-media { display: grid; height: 180px; place-items: center; overflow: hidden; background: var(--color-surface-raised); }
.equipment-card-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.equipment-card-placeholder { display: grid; height: 200px; place-items: center; background: var(--color-surface-raised); }
.equipment-photo-tile { width: 100%; height: 120px; object-fit: cover; }
.equipment-unit-model-thumb { display: grid; width: 80px; height: 80px; flex: 0 0 80px; place-items: center; object-fit: cover; }
.notes-scroll { max-height: 400px; overflow-y: auto; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-sidebar-sticky { top: 20px; }
.js-conditional-block { display: none; }
.card-actions-layer { z-index: 2; }
.interactive-row { cursor: pointer; }
.equipment-unit-form .is-invalid, .form-shell .is-invalid { border-color: var(--color-danger) !important; }
.equipment-unit-form .form-switch .form-check-input { width: 3em; height: 1.5em; }
#modelDropdown { position: absolute; top: 100%; left: 0; z-index: 1000; }
#modelDropdown .dropdown-item:hover { background-color: var(--color-surface-raised); }
#modelDropdown .dropdown-item.d-none { display: none !important; }
.model-dropdown-scroll { max-height: 300px; overflow-y: auto; }
.equipment-unit-details .card-header { font-weight: 600; }
.ownership-table th { font-size: 0.85rem; }
.ownership-table td { font-size: 0.9rem; }
.workflow-metrics .card { border-color: var(--color-border) !important; }
.workflow-metrics .card-body { padding: 12px 10px !important; }
.workflow-metrics .h4 { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.workflow-metrics a[ class*="border-"] { background: var(--color-surface-raised) !important; }
.finance-metrics .dashboard-card { height: auto; min-height: 132px; }
.finance-metrics .h3 { font-variant-numeric: tabular-nums; }
.finance-panel { height: auto !important; min-height: 0; }
.finance-panel > h2:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.finance-help-content .dashboard-card { height: auto; min-height: 0; }
.finance-table td.numeric-cell { font-variant-numeric: tabular-nums; }
.finance-filter-panel { height: auto !important; margin-bottom: 18px; }
.admin-metrics .card-body { padding: 16px; }
.admin-metrics h3 { font-variant-numeric: tabular-nums; }
.admin-metric-icon { display: grid; width: 44px; height: 44px; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.admin-panel { height: auto !important; }
.admin-panel .card-header, .data-panel .card-header { border-color: var(--color-border); }
.empty-state--compact { min-height: 150px; padding: 24px; }
.page-shell--narrow { max-width: 760px; }
.company-card { height: auto !important; max-width: 1400px; margin-inline: auto; }
.company-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.company-stats > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; padding: 10px 14px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.company-stats i { grid-row: 1 / 3; color: var(--color-accent); font-size: 1.375rem; }
.company-stats strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.company-stats span { color: var(--color-text-secondary); font-size: 0.75rem; }
.company-aside { padding-left: 28px; border-left: 1px solid var(--color-border); }
.company-aside dt { margin-top: 18px; color: var(--color-text-tertiary); font-size: 0.75rem; }
.company-aside dd { margin-top: 3px; }
.team-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; color: var(--color-bg); background: var(--color-accent); border-radius: var(--radius-sm); font-weight: 700; }
.team-presence-dot { font-size: 0.5rem; }
.settings-container { width: 100%; }
.settings-icon { display: grid; width: 56px; height: 56px; margin: 0 auto 16px; place-items: center; color: var(--color-bg); background: var(--color-accent); border-radius: var(--radius-sm); }
.settings-icon i { font-size: 1.5rem; }
.settings-container .list-group-item { color: var(--color-text); background: transparent; border-color: var(--color-border); transition: background-color var(--duration-fast) var(--ease-standard); }
.settings-container .list-group-item:hover { background: var(--color-surface-raised); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.setting-row:last-child { border-bottom: 0; }
.setting-info { flex: 1; min-width: 0; }
.setting-label { color: var(--color-text); font-size: 0.875rem; font-weight: 600; }
.setting-hint { margin-top: 2px; color: var(--color-text-secondary); font-size: 0.75rem; }
.settings-section { margin-bottom: 16px; padding: 4px 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.settings-section-title { margin-bottom: 8px; color: var(--color-text-tertiary); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.toggle-switch { position: relative; width: 44px; height: 24px; flex: 0 0 44px; }
.toggle-switch input { width: 1px; height: 1px; opacity: 0; }
.toggle-slider { position: absolute; inset: 0; cursor: pointer; background: var(--color-border-strong); border-radius: 999px; transition: background-color var(--duration-normal) var(--ease-standard); }
.toggle-slider::before { position: absolute; bottom: 3px; left: 3px; width: 18px; height: 18px; content: ""; background: var(--color-text-secondary); border-radius: 50%; transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard); }
.toggle-switch input:checked + .toggle-slider { background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface)); }
.toggle-switch input:checked + .toggle-slider::before { background: var(--color-accent); transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.integration-panel { height: auto; overflow: hidden; }
.integration-avatar { width: 80px; height: 80px; object-fit: cover; }
.integration-avatar--placeholder { display: inline-grid; place-items: center; font-size: 2rem; }
.report-summary { max-width: 420px; }
.report-description { white-space: pre-wrap; }
.payment-summary-tile { padding: 8px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.payment-summary-tile--paid { background: rgb(67 211 158 / 0.08); }
.payment-summary-tile--remaining { background: rgb(241 189 76 / 0.08); }
.home-panel { height: auto !important; min-height: 100%; }
.content-panel { padding: 24px; }
.standalone-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: var(--color-bg); }
.standalone-page--top { align-items: start; }
.standalone-shell { width: min(100%, 500px); }
.standalone-shell--wide { width: min(100%, 700px); }
.standalone-card { width: min(100%, 500px); box-shadow: var(--shadow-modal) !important; }
.standalone-shell--wide .standalone-card { width: 100%; max-width: none; }
.state-icon { display: inline-block; margin-bottom: 16px; font-size: 3rem; }
.invitation-item { margin-bottom: 14px; padding: 18px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.error-state { text-align: center; }
.error-state code { color: var(--color-text); }

@media (max-width: 1199.98px) {
    .company-aside { padding-top: 22px; padding-left: calc(var(--bs-gutter-x) * .5); border-top: 1px solid var(--color-border); border-left: 0; }
}

@media (max-width: 767.98px) {
    .page-header { align-items: stretch; flex-direction: column; gap: 14px; }
    .page-actions { justify-content: stretch; }
    .page-actions .btn { flex: 1 1 auto; }
    .company-stats { grid-template-columns: 1fr; }
    .form-shell .card-body { padding: 18px 16px; }
    .form-actions { align-items: stretch; flex-direction: column-reverse; }
    .form-actions .btn, .form-actions .btn-danger, .form-actions .btn-outline-danger { width: 100%; margin-left: 0; }
    .empty-state { margin-block: 16px; padding: 36px 18px; }
    .info-row { align-items: flex-start; flex-direction: column; gap: 2px; }
    .info-value { text-align: left; }
    .detail-sidebar-sticky { position: static !important; }
}

/* Tables */
.table-responsive { border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.table { margin: 0; color: var(--color-text) !important; --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); }
.table > thead > tr > th, .table-card .table th {
    padding: 9px 12px !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-surface-raised) !important;
    border-bottom: 1px solid var(--color-border-strong) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase;
    white-space: nowrap;
}
.table > tbody > tr { background: transparent !important; transition: background-color var(--duration-fast) var(--ease-standard); }
.table > tbody > tr:nth-child(even) { background: rgb(255 255 255 / 0.012) !important; }
.table > tbody > tr:hover { background: var(--color-surface-hover) !important; }
.table > tbody > tr > td { padding: 10px 12px !important; color: var(--color-text) !important; border-color: var(--color-border) !important; vertical-align: middle; }
.table > tfoot > tr > td { padding: 10px 12px !important; color: var(--color-text) !important; background: var(--color-surface-raised) !important; border-top: 1px solid var(--color-border-strong) !important; }
.table-light, .table-secondary, thead.table-light > tr > th, tr.table-secondary > td {
    color: var(--color-text) !important;
    background: var(--color-surface-raised) !important;
    border-color: var(--color-border) !important;
}

/* Buttons */
.btn {
    min-height: 36px;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard) !important;
}
.btn-sm { min-height: 30px; font-size: 0.8125rem; }
.btn-primary { color: #071414 !important; background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.btn-primary:hover { background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; }
.btn-secondary, .btn-light { color: var(--color-text) !important; background: var(--color-surface-raised) !important; border-color: var(--color-border-strong) !important; }
.btn-secondary:hover, .btn-light:hover { background: var(--color-surface-hover) !important; border-color: #59626a !important; }
.btn-success { color: #07140f !important; background: var(--color-success) !important; border-color: var(--color-success) !important; }
.btn-danger { color: #1b0808 !important; background: var(--color-danger) !important; border-color: var(--color-danger) !important; }
.btn-warning { color: #191204 !important; background: var(--color-warning) !important; border-color: var(--color-warning) !important; }
.btn-info { color: #100c21 !important; background: var(--color-info) !important; border-color: var(--color-info) !important; }
.btn-outline-primary { color: var(--color-accent) !important; background: transparent !important; border-color: rgb(35 213 213 / 0.5) !important; }
.btn-outline-primary:hover { color: #071414 !important; background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.btn-outline-secondary { color: var(--color-text-secondary) !important; background: transparent !important; border-color: var(--color-border-strong) !important; }
.btn-outline-secondary:hover { color: var(--color-text) !important; background: var(--color-surface-raised) !important; }
.btn-outline-danger { color: var(--color-danger) !important; background: transparent !important; border-color: rgb(244 119 119 / 0.5) !important; }
.btn-outline-danger:hover { color: #1b0808 !important; background: var(--color-danger) !important; border-color: var(--color-danger) !important; }
.btn-outline-success { color: var(--color-success) !important; background: transparent !important; border-color: rgb(67 211 158 / 0.5) !important; }
.btn-outline-info { color: var(--color-info) !important; background: transparent !important; border-color: rgb(159 142 232 / 0.5) !important; }
.btn-outline-warning { color: var(--color-warning) !important; background: transparent !important; border-color: rgb(241 189 76 / 0.5) !important; }
.btn-close { filter: invert(1) grayscale(1); opacity: 0.7; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, a:focus-visible { outline: 0; box-shadow: var(--focus-ring) !important; }

/* Forms */
.form-label, .col-form-label { margin-bottom: 6px; color: var(--color-text-secondary) !important; font-size: 0.8125rem; font-weight: 600; }
.form-control, .form-select {
    min-height: 38px;
    color: var(--color-text) !important;
    background-color: var(--color-canvas) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard) !important;
}
.form-control:hover, .form-select:hover { border-color: #58626b !important; }
.form-control:focus, .form-select:focus { background: var(--color-canvas) !important; border-color: var(--color-accent) !important; }
.form-control::placeholder { color: var(--color-text-tertiary) !important; opacity: 1; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--color-text-tertiary) !important; background: var(--color-surface-raised) !important; opacity: 1; }
.form-text { color: var(--color-text-tertiary) !important; font-size: 0.75rem; }
.form-check-input { background-color: var(--color-canvas) !important; border-color: var(--color-border-strong) !important; }
.form-check-input:checked { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.input-group-text { color: var(--color-text-secondary) !important; background: var(--color-surface-raised) !important; border-color: var(--color-border-strong) !important; }
.field-validation-error, .validation-summary-errors, .invalid-feedback, .text-danger { color: var(--color-danger) !important; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { color-scheme: dark; }

/* Overlays and navigation components */
.dropdown-menu {
    padding: 5px !important;
    color: var(--color-text) !important;
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.35) !important;
    backdrop-filter: none !important;
}
.dropdown-item { padding: 8px 10px; color: var(--color-text-secondary) !important; border-radius: var(--radius-sm); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { color: var(--color-text) !important; background: var(--color-surface-hover) !important; }
.dropdown-divider { border-color: var(--color-border); }
.modal-backdrop.show { opacity: 0.72; }
.modal-content {
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-modal) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.modal-header { border-color: var(--color-border) !important; }
.modal-footer { border-color: var(--color-border) !important; }
.toast {
    color: var(--color-text) !important;
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.35) !important;
    backdrop-filter: none !important;
}
.alert { border-radius: var(--radius-sm) !important; border-width: 1px !important; }
.alert-primary, .alert-info { color: #b9f2f2 !important; background: rgb(35 213 213 / 0.08) !important; border-color: rgb(35 213 213 / 0.25) !important; }
.alert-success { color: #b9f0dc !important; background: rgb(67 211 158 / 0.08) !important; border-color: rgb(67 211 158 / 0.25) !important; }
.alert-warning { color: #f5ddb0 !important; background: rgb(241 189 76 / 0.08) !important; border-color: rgb(241 189 76 / 0.25) !important; }
.alert-danger { color: #f5c1c1 !important; background: rgb(244 119 119 / 0.08) !important; border-color: rgb(244 119 119 / 0.25) !important; }

/* Status, tabs and pagination */
.badge, .status-badge { border-radius: var(--radius-xs) !important; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.badge.bg-primary, .badge.text-bg-primary { color: var(--color-accent) !important; background: rgb(35 213 213 / 0.12) !important; }
.badge.bg-success, .badge.text-bg-success { color: var(--color-success) !important; background: rgb(67 211 158 / 0.12) !important; }
.badge.bg-warning, .badge.text-bg-warning { color: var(--color-warning) !important; background: rgb(241 189 76 / 0.12) !important; }
.badge.bg-danger, .badge.text-bg-danger { color: var(--color-danger) !important; background: rgb(244 119 119 / 0.12) !important; }
.badge.bg-info, .badge.text-bg-info { color: var(--color-info) !important; background: rgb(159 142 232 / 0.12) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light { color: var(--color-text-secondary) !important; background: rgb(255 255 255 / 0.07) !important; }
.nav-tabs { border-color: var(--color-border) !important; }
.nav-tabs .nav-link { color: var(--color-text-secondary) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
.nav-tabs .nav-link:hover { color: var(--color-text) !important; }
.nav-tabs .nav-link.active { color: var(--color-accent) !important; background: transparent !important; border-bottom-color: var(--color-accent) !important; }
.nav-pills .nav-link { color: var(--color-text-secondary) !important; border-radius: var(--radius-sm) !important; }
.nav-pills .nav-link.active { color: #071414 !important; background: var(--color-accent) !important; }
.page-link { color: var(--color-text-secondary) !important; background: var(--color-surface) !important; border-color: var(--color-border) !important; box-shadow: none !important; }
.page-link:hover { color: var(--color-text) !important; background: var(--color-surface-hover) !important; }
.page-item.active .page-link { color: #071414 !important; background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.list-group-item, .accordion-item, .accordion-button { color: var(--color-text) !important; background: var(--color-surface) !important; border-color: var(--color-border) !important; backdrop-filter: none !important; }
.accordion-button:not(.collapsed) { color: var(--color-accent) !important; background: var(--color-surface-raised) !important; }
.progress { background: var(--color-surface-raised) !important; border-radius: var(--radius-xs) !important; }
.progress-bar { background: var(--color-accent) !important; }

/* Bootstrap compatibility */
.text-dark, .text-body, .text-black { color: var(--color-text) !important; }
.text-primary { color: var(--color-accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.bg-white, .bg-light, .bg-body, .bg-body-tertiary { background: var(--color-surface) !important; }
.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--color-border) !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-md) !important; }
hr { border-color: var(--color-border); opacity: 1; }

/* Existing page-specific inline colors: normalize without adding visual effects. */
[style*="background: white"], [style*="background-color: white"], [style*="background:#fff"],
[style*="background: #fff"], [style*="background: #ffffff"], [style*="background-color: #ffffff"],
[style*="background: #212121"], [style*="background-color: #212121"] { background: var(--color-surface) !important; }
[style*="background: #121212"], [style*="background-color: #121212"], [style*="background: #f3f4f6"] { background: var(--color-canvas) !important; }
[style*="background: #181818"], [style*="background-color: #181818"], [style*="background: #f9fafb"], [style*="background: #f8f9fa"] { background: var(--color-surface) !important; }
[style*="color: #1f2937"], [style*="color:#1f2937"], [style*="color: #111827"], [style*="color: #374151"] { color: var(--color-text) !important; }
[style*="color: #6b7280"], [style*="color: #4b5563"] { color: var(--color-text-secondary) !important; }

/* Optional background patterns remain inexpensive and never use fixed attachment. */
body.bg-lines { background-image: linear-gradient(rgb(255 255 255 / 0.018) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.018) 1px, transparent 1px) !important; background-size: 32px 32px !important; }
body.bg-waves, body.bg-gradient { background-image: radial-gradient(circle at 15% 10%, rgb(35 213 213 / 0.035), transparent 34%), radial-gradient(circle at 85% 80%, rgb(159 142 232 / 0.025), transparent 36%) !important; background-attachment: scroll !important; }
.bg-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-option { position: relative; width: 120px; height: 76px; overflow: hidden; cursor: pointer; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.bg-option:hover, .bg-option.active { border-color: var(--color-accent); }
.bg-option-label { position: absolute; right: 0; bottom: 6px; left: 0; color: var(--color-text-secondary); font-size: 0.6875rem; text-align: center; }
.bg-opt-lines { background-image: linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px); background-size: 16px 16px; }
.bg-opt-waves, .bg-opt-gradient { background-image: radial-gradient(circle at 25% 20%, rgb(35 213 213 / 0.12), transparent 45%), radial-gradient(circle at 75% 80%, rgb(159 142 232 / 0.09), transparent 45%); }

/* Standalone authentication and public system pages */
.auth-body { display: grid; min-height: 100vh; margin: 0; padding: 32px 16px; place-items: center; color: var(--color-text); background: var(--color-bg); }
.auth-page { width: min(100%, 420px); }
.auth-page.wide { width: min(100%, 480px); }
.auth-logo { margin-bottom: 20px; text-align: center; }
.auth-brand-logo { display: block; width: min(420px, 92vw); height: 132px; margin: -24px 50% -8px; object-fit: contain; transform: translateX(-50%); }
.auth-logo-title { margin: 0; color: var(--color-text); font-size: 1.5rem; font-weight: 700; }
.auth-logo-subtitle, .auth-hint, .password-hint { color: var(--color-text-secondary); font-size: 0.8125rem; }
.auth-card { position: relative; overflow: hidden; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.auth-card::before { position: absolute; inset: 0 0 auto; height: 2px; content: ""; background: var(--color-accent); }
.auth-card h2 { margin: 0 0 6px; color: var(--color-text); font-size: 1.25rem; text-align: center; }
.auth-card .auth-hint { margin-bottom: 22px; text-align: center; }
.auth-context-icon, .auth-logo-icon, .auth-icon { display: grid; width: 56px; height: 56px; margin: 0 auto 16px; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.auth-context-icon i, .auth-logo-icon i, .auth-icon i { color: var(--color-accent); font-size: 1.5rem; }
.auth-context-icon.icon-success i { color: var(--color-success); }
.auth-context-icon.icon-warning i { color: var(--color-warning); }
.auth-context-icon.icon-danger i { color: var(--color-danger); }
.auth-label { display: block; margin-bottom: 6px; color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control { padding-left: 40px; }
.input-icon { position: absolute; top: 50%; left: 14px; color: var(--color-text-tertiary); pointer-events: none; transform: translateY(-50%); }
.auth-btn-primary, .auth-btn-outline, .auth-btn-outline-primary { display: inline-block; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; text-align: center; text-decoration: none; }
.auth-btn-primary { width: 100%; color: var(--color-bg); background: var(--color-accent); }
.auth-btn-primary:hover { color: var(--color-bg); background: var(--color-accent-hover); }
.auth-btn-outline { color: var(--color-text-secondary); background: transparent; border-color: var(--color-border); }
.auth-btn-outline-primary { color: var(--color-accent); background: transparent; border-color: var(--color-accent); }
.auth-action--compact { width: auto; padding-inline: 28px; }
.auth-link-muted { margin-top: 8px; color: var(--color-text-tertiary); font-size: 0.8125rem; }
.auth-text-small { font-size: 0.8125rem; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--color-text-tertiary); font-size: 0.75rem; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: var(--color-border); }
.auth-footer { margin-top: 18px; color: var(--color-text-secondary); font-size: 0.8125rem; text-align: center; }
.auth-footer--flush { margin-top: 0; }
.auth-steps { margin: 20px 0; }
.auth-step { display: flex; align-items: flex-start; margin-bottom: 14px; }
.auth-step-num { display: grid; width: 28px; height: 28px; margin-right: 12px; flex: 0 0 28px; place-items: center; color: var(--color-accent); background: var(--color-surface-raised); border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
.auth-step-text { padding-top: 3px; color: var(--color-text-secondary); font-size: 0.875rem; }
.code-input { letter-spacing: 0.35em; font-size: 1.5rem; font-weight: 700; text-align: center; }
.auth-container { max-width: 600px; margin-inline: auto; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.auth-container--compact { max-width: 500px; }
.auth-container--medium { max-width: 550px; }
.auth-container .list-group-item { color: var(--color-text); background: transparent; border-color: var(--color-border); }
.qr-code { display: inline-block; }
.recovery-code-input { letter-spacing: 0.125em; }

.auth-card, .welcome-card, .help-card, .invitation-item {
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.auth-card { padding: 28px !important; }
.auth-card::before { height: 2px !important; background: var(--color-accent) !important; }
.auth-logo-icon, .auth-context-icon, .status-icon, .concept-icon { border-radius: var(--radius-md) !important; box-shadow: none !important; }
.auth-card .form-control, .auth-card .form-select, .auth-card .form-floating > .form-control { border-radius: var(--radius-sm) !important; background: var(--color-canvas) !important; }
.auth-btn-primary, .auth-btn-outline, .auth-btn-outline-primary, .logout-link { border-radius: var(--radius-sm) !important; box-shadow: none !important; transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast) !important; }
.auth-btn-primary:hover { transform: none !important; box-shadow: none !important; }
.auth-card .alert { border-radius: var(--radius-sm) !important; backdrop-filter: none !important; }
.help-header { background: var(--color-surface-raised) !important; border-bottom-width: 2px !important; }
.step-card, .toc, .tip-box, .warning-box { border-radius: var(--radius-sm) !important; box-shadow: none !important; transition: border-color var(--duration-fast) !important; }
.step-card:hover { box-shadow: none !important; }

@media (max-width: 1199.98px) {
    .content-wrapper { padding-inline: 24px !important; }
}
@media (max-width: 991.98px) {
    .main-content { margin-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
    body { color: #111 !important; background: #fff !important; }
    .sidebar, .top-navbar, .mobile-bottom-nav, .btn, .toast-container { display: none !important; }
    .main-content { margin: 0 !important; }
    .card, .table-card { border-color: #bbb !important; box-shadow: none !important; }
}
