@import url("pfims-alert.css");

:root {
    --pfims-add-blue: linear-gradient(135deg, #172033, #2a3f54);
    --ui-bg: #f6f8fb;
    --ui-surface: rgba(255, 255, 255, 0.92);
    --ui-surface-solid: #ffffff;
    --ui-border: #e4e8ef;
    --ui-border-strong: #d3dae6;
    --ui-text: #172033;
    --ui-muted: #6b7280;
    --ui-accent: #f08a1a;
    --ui-accent-dark: #d97508;
    --ui-accent-soft: #fff3e5;
    --ui-sidebar: #111827;
    --ui-sidebar-2: #1f2937;
    --ui-success: #1f9d61;
    --ui-danger: #d93636;
    --ui-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    --ui-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.07);
}

/* Shared compact controls and accessible previews. Individual pages should
   provide labels/data attributes only; sizing and hover treatment live here. */
button[data-icon-label], a[data-icon-label] { position: relative; }
button[data-icon-label] .button-label, a[data-icon-label] .button-label { font-size: 0; }
button[data-icon-label]:hover .button-label, button[data-icon-label]:focus-visible .button-label,
a[data-icon-label]:hover .button-label, a[data-icon-label]:focus-visible .button-label { font-size: .8rem; }
.pfims-search-host {
    position: relative !important;
    overflow: visible !important;
}

.pfims-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1400;
    display: grid;
    width: 100%;
    min-width: 220px;
    max-height: 260px;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    background: var(--ui-surface-solid);
    color: var(--ui-text);
}

.pfims-search-suggestions[hidden] {
    display: none !important;
}

.pfims-select {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    background: var(--ui-surface-solid);
}

.pfims-select .pfims-native-select {
    width: 100%;
    opacity: 0 !important;
    appearance: none !important;
    pointer-events: none;
}

.pfims-select-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 30px 0 12px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    font-weight: 400 !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pfims-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid var(--ui-text);
    transform: translateY(-50%);
    pointer-events: none;
}

.pfims-select:focus-within .pfims-native-select {
    outline: 2px solid var(--ui-accent);
    outline-offset: 1px;
}

/* Expense details show values until Edit is selected. Hide the enhanced
   dropdown wrapper as well as its hidden native control in view mode. */
:is(#expenseDetailModal, #receivableDetailModal, #cashDetailModal, #bondDetailModal):not(.is-editing) .pfims-select:has(> select.detail-edit) {
    display: none !important;
}

#budgetDetailModal:not(.is-editing) .pfims-select:has(> select.budget-detail-edit) {
    display: none !important;
}

/* Inventory details hide the entire enhanced dropdown when its edit field
   is hidden, including the decorative underline and arrow. */
#viewModal .pfims-select:has(> select.view-input:is([hidden], [style*="display: none"], [style*="display:none"])) {
    display: none !important;
}

/* Keep material stock states distinct from the shared neutral badge style. */
#materialProjectionSection .badge-success {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}
#materialProjectionSection .badge-warning {
    background: #fff3e0 !important;
    color: #e65100 !important;
}
#materialProjectionSection .badge-danger {
    background: #ffebee !important;
    color: #c62828 !important;
}
html[data-theme="dark"] #materialProjectionSection .badge-success {
    background: #163d2b !important;
    color: #8bd8a8 !important;
}
html[data-theme="dark"] #materialProjectionSection .badge-warning {
    background: #493214 !important;
    color: #ffc17a !important;
}
html[data-theme="dark"] #materialProjectionSection .badge-danger {
    background: #4b2229 !important;
    color: #ff9b9b !important;
}

#profitTable { table-layout: auto !important; min-width: 2200px !important; }
#receivableTable { table-layout: auto !important; min-width: 1250px !important; }
#receivableTable :is(th, td) { min-width: 110px; white-space: nowrap; }
#receivableTable :is(th, td):nth-child(2),
#receivableTable :is(th, td):nth-child(3) { min-width: 180px; }
:is(#contractsSubpanel, #tabReceivables, #tabBackhoe, #equipmentDetailModal, #tabBonds) .report-table-wrapper {
    padding-inline: 0;
    isolation: isolate;
}
:is(#contractsSubpanel, #tabReceivables, #tabBackhoe, #equipmentDetailModal, #tabBonds) .report-table-wrapper::before {
    left: var(--pfims-docked-column-width, 0px);
}
#backhoeTable { table-layout: auto !important; min-width: 1600px !important; }
#backhoeTable :is(th, td) { min-width: 125px; white-space: nowrap; }
#backhoeTable :is(th, td):first-child { min-width: 190px; }
#backhoeTable :is(th, td):nth-child(4) { min-width: 170px; }
#backhoeTable :is(th, td):last-child { min-width: 80px; }
:is(#profitTable, #receivableTable, #backhoeTable, #bondTable) { border-collapse: separate; border-spacing: 0; }
:is(#profitTable, #receivableTable, #backhoeTable, #bondTable) tbody td:first-child {
    background: var(--ui-surface-solid) !important;
}
:is(#profitTable, #receivableTable, #backhoeTable, #bondTable) thead th:first-child {
    background: var(--ui-bg) !important;
}
#profitTable :is(th, td) { min-width: 150px; white-space: nowrap; }
#profitTable :is(th, td):first-child { min-width: 300px; max-width: 360px; }
#profitTable :is(th, td):nth-child(4) { border-left: 2px solid var(--ui-border-strong) !important; }
#profitTable :is(th, td):nth-child(6),
#profitTable :is(th, td):nth-child(9) { border-right: 2px solid var(--ui-border-strong) !important; }
#addContractModal.is-viewing .modal-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 20px; border-radius: 12px; background: var(--ui-bg); }
#addContractModal.is-viewing .form-group { margin: 0; }
#addContractModal.is-viewing .form-group label { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--ui-muted); }
#addContractModal.is-viewing input,
#addContractModal.is-viewing .required,
#addContractModal.is-viewing .pfims-select,
#addContractModal .pfims-select:has(> #contractProject[style*="display: none"]) { display: none !important; }
#addContractModal.is-viewing :is(#contractProjectDisplay, #contractBudgetDisplay, .contract-detail-value) { display: block; padding: 6px 0; color: var(--ui-text); font-weight: 500; }
@media (max-width: 600px) { #addContractModal.is-viewing .modal-body { grid-template-columns: 1fr; } }

.pfims-select-options {
    position: fixed;
    z-index: 10050;
    display: block;
    padding: calc(6px * var(--pfims-menu-scale, 1));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
    background: var(--ui-surface-solid);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-soft);
}

.pfims-select-options[hidden] { display: none !important; }
.pfims-select-options .pfims-select-option {
    min-height: calc(34px * var(--pfims-menu-scale, 1)) !important;
    padding: calc(8px * var(--pfims-menu-scale, 1)) calc(10px * var(--pfims-menu-scale, 1)) !important;
}
.pfims-select-options .pfims-select-option.is-active { background: var(--ui-accent-soft) !important; }
.rows-info .pfims-select { width: 5rem; }

.pfims-search-suggestions button,
.pfims-select-option {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font: inherit !important;
    font-weight: 400 !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pfims-search-suggestions button:hover,
.pfims-search-suggestions button:focus-visible,
.pfims-select-option:hover,
.pfims-select-option:focus-visible,
.pfims-select-option[aria-selected="true"] {
    outline: none;
    background: var(--ui-accent-soft) !important;
    color: var(--ui-text) !important;
}

.pfims-select-trigger[data-status-tone="success"],
.pfims-select-option[data-status-tone="success"] { color: #2e7d32 !important; }
.pfims-select-trigger[data-status-tone="warning"],
.pfims-select-option[data-status-tone="warning"] { color: #e65100 !important; }
.pfims-select-trigger[data-status-tone="project-pending"],
.pfims-select-option[data-status-tone="project-pending"] { color: #64748b !important; }
.pfims-select-trigger[data-status-tone="danger"],
.pfims-select-option[data-status-tone="danger"] { color: #d32f2f !important; }
.pfims-select-trigger[data-status-tone="complete"],
.pfims-select-option[data-status-tone="complete"] { color: #3949ab !important; }

html[data-theme="dark"] .pfims-select-trigger[data-status-tone="success"],
html[data-theme="dark"] .pfims-select-option[data-status-tone="success"] { color: #8bd8a8 !important; }
html[data-theme="dark"] .pfims-select-trigger[data-status-tone="warning"],
html[data-theme="dark"] .pfims-select-option[data-status-tone="warning"] { color: #ffc17a !important; }
html[data-theme="dark"] .pfims-select-trigger[data-status-tone="project-pending"],
html[data-theme="dark"] .pfims-select-option[data-status-tone="project-pending"] { color: #b0bfd2 !important; }
html[data-theme="dark"] .pfims-select-trigger[data-status-tone="danger"],
html[data-theme="dark"] .pfims-select-option[data-status-tone="danger"] { color: #ff9b9b !important; }
html[data-theme="dark"] .pfims-select-trigger[data-status-tone="complete"],
html[data-theme="dark"] .pfims-select-option[data-status-tone="complete"] { color: #b9c4ff !important; }

.pfims-search-suggestions mark {
    border-radius: 3px;
    background: #ffd58a;
    color: inherit;
    font-weight: 800;
}

.pfims-search-empty {
    padding: .65rem .8rem;
    color: var(--ui-muted);
    font-size: .8rem;
    text-align: left;
}

select option {
    background: var(--ui-surface-solid);
    color: var(--ui-text);
}

html[data-theme="dark"] :is(.pfims-search-suggestions, .pfims-select-options) {
    border-color: #46546a !important;
    background: #111827 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] :is(.pfims-search-suggestions button, .pfims-select-option) {
    color: #f8fafc !important;
}

html[data-theme="dark"] select option {
    background: #111827;
    color: #f8fafc;
}
.pfims-skeleton { position: relative; overflow: hidden; background: #e9edf3; color: transparent !important; border-radius: 8px; }
.pfims-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: pfims-shimmer 1.2s infinite; }
@keyframes pfims-shimmer { to { transform: translateX(100%); } }
table { table-layout: fixed; }
table th, table td { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Show complete table column titles without changing data-cell truncation. */
table thead th {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}
table td[title] { cursor: help; }
.sidebar .nav-dropdown { display: none; padding: 0 0 4px 14px; }
.sidebar li.nav-parent.is-open > .nav-dropdown { display: block; }
.sidebar .nav-dropdown a { min-height: 42px !important; padding: 10px 12px !important; font-size: .92rem; font-weight: 600; }

/* One navigation contract for server-rendered and generated module menus. */
.sidebar nav ul li > a,
.sidebar .bottom-nav ul li > :is(a, button) {
    gap: 12px !important;
}

.sidebar nav ul li > a .nav-link-icon,
.sidebar .bottom-nav .nav-icon {
    flex: 0 0 20px;
    margin: 0 !important;
}

.sidebar .nav-parent-toggle .nav-chevron {
    margin-left: auto !important;
}

.sidebar .nav-parent.has-active-child.is-open,
.sidebar .nav-parent.has-active-child.is-open > .nav-parent-toggle {
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar .nav-parent.has-active-child:not(.is-open) {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(240, 138, 26, 0.95), rgba(212, 112, 8, 0.92)) !important;
    box-shadow: 0 8px 18px rgba(240, 138, 26, 0.22) !important;
}

.sidebar .nav-dropdown a.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(240, 138, 26, 0.95), rgba(212, 112, 8, 0.92)) !important;
}

/* The Projects reference is the compact baseline for every module page. */
body { color: #263244; }
/* Keep the authenticated shell at its normal readable base size. Desktop
   density is controlled once by the 75% body zoom below; shrinking the whole
   content tree here as well makes labels and table text effectively tiny. */
:where(.main-content, main) :where(h1, .page-title) { font-size: clamp(1.25rem, 2vw, 1.65rem) !important; }
:where(.main-content, main) :where(button, input, select, textarea, .pfims-select-trigger) { min-height: 32px; }
.rows-info .pfims-select { max-width: 5rem; }
button[data-icon-label], a[data-icon-label] { display: inline-flex; align-items: center; gap: 0; min-width: 34px; justify-content: center; overflow: hidden; transition: gap .18s ease, padding .18s ease; }
button[data-icon-label]:hover, button[data-icon-label]:focus-visible,
a[data-icon-label]:hover, a[data-icon-label]:focus-visible { gap: .42rem; }
button[data-icon-label] .button-icon, a[data-icon-label] .button-icon { font-size: 1.05rem; line-height: 1; }
[data-icon-label="import"], [data-icon-label="export"] { background: #1a2b3c !important; border-color: #1a2b3c !important; color: #fff !important; }
.page-actions :where([data-icon-label="add"] + [data-icon-label="add"], [data-icon-label="add"]:has(+ [data-icon-label="add"])):first-child { background: #e98724 !important; border-color: #e98724 !important; }
.kpi-card, .stat-card, .metric-card { min-height: 108px; }
html[data-theme="dark"] body { color: #e5eaf2; }
html[data-theme="dark"] :where(.pfims-filter-panel, .filter-row, .filters-bar) :where(label, span, input, select, button) { color: #eef2f8 !important; }

html {
    background: var(--ui-bg);
}

body {
    background:
        radial-gradient(circle at top left, rgba(240, 138, 26, 0.10), transparent 34rem),
        linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%) !important;
    color: var(--ui-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

body.landing-page {
    background-image: url('../images/landingbg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #1a2b3c !important;
}

body.landing-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 14, 24, 0.76), rgba(8, 14, 24, 0.42) 48%, rgba(8, 14, 24, 0.24)),
        rgba(12, 18, 28, 0.12);
    z-index: -1;
}

.top-header {
    height: 72px !important;
    padding: 12px 28px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

.top-header .left img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.top-header .left .brand-text {
    color: var(--ui-text) !important;
    font-weight: 800 !important;
    letter-spacing: 0;
}

.top-header .left .brand-text small {
    color: var(--ui-muted) !important;
    font-weight: 500 !important;
}

.top-header .right a,
.top-header .right span {
    color: var(--ui-text) !important;
}

.top-header .right a {
    padding: 8px 10px;
    border-radius: 999px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.top-header .right a:hover {
    opacity: 1 !important;
    background: #f2f5f9;
    transform: translateY(-1px);
}

.top-header .right img {
    filter: saturate(0.85);
}

.notif-badge {
    background: var(--ui-danger) !important;
    border: 2px solid #fff;
    box-shadow: 0 6px 15px rgba(217, 54, 54, 0.28);
}

.sidebar {
    top: 72px !important;
    left: 0 !important;
    width: 248px !important;
    height: calc(100vh - 72px) !important;
    padding: 18px 14px !important;
    background: linear-gradient(180deg, #1f2937, #111827) !important;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.18);
    transition: width 0.24s ease, padding 0.24s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sidebar nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar-collapse-toggle {
    position: absolute;
    top: 18px;
    right: 3px;
    z-index: 4;
    display: inline-flex;
    width: 26px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .58);
    cursor: pointer;
    box-shadow: none;
    opacity: 1;
    transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    box-shadow: none;
    opacity: 1;
}

.sidebar-collapse-toggle:focus-visible {
    outline: 2px solid rgba(240, 138, 26, .38);
    outline-offset: 2px;
}

.sidebar-collapse-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .24s ease;
}

.sidebar nav {
    margin-top: 42px !important;
}

.sidebar nav ul li,
.sidebar .bottom-nav ul li {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar nav ul li a,
.sidebar .bottom-nav ul li a,
.sidebar .bottom-nav ul li button {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    color: inherit !important;
    text-decoration: none !important;
}

.sidebar nav ul li:hover,
.sidebar .bottom-nav ul li:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}

.sidebar nav ul li.active,
.sidebar .bottom-nav ul li.active {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(240, 138, 26, 0.95), rgba(212, 112, 8, 0.92)) !important;
    box-shadow: 0 8px 18px rgba(240, 138, 26, 0.22);
}

.sidebar .bottom-nav {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.main-content {
    margin-left: 248px !important;
    padding: 34px 34px 48px !important;
    transition: margin-left 0.24s ease, max-width 0.24s ease;
}

html.sidebar-collapsed .sidebar {
    width: 76px !important;
    padding-inline: 10px !important;
}

/* A collapsed sidebar has no room to render a readable submenu. */
html.sidebar-collapsed .sidebar .nav-dropdown {
    display: none !important;
}

html.sidebar-collapsed .sidebar-collapse-toggle {
    right: 3px;
}

html.sidebar-collapsed .sidebar-collapse-toggle .sidebar-toggle-chevron {
    transform: rotate(180deg);
    transform-origin: 14px 12px;
}

html.sidebar-collapsed .sidebar nav ul li,
html.sidebar-collapsed .sidebar .bottom-nav ul li {
    overflow: hidden;
}

html.sidebar-collapsed .sidebar nav a {
    justify-content: center;
    gap: 0 !important;
    font-size: 0 !important;
}

html.sidebar-collapsed .sidebar nav a::before {
    content: attr(data-nav-short);
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: inherit;
    font-size: 0.85rem;
    font-weight: 800;
}

html.sidebar-collapsed .sidebar .bottom-nav :where(a, button) {
    justify-content: center;
    gap: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}

html.sidebar-collapsed .sidebar .bottom-nav .nav-icon {
    flex: 0 0 auto;
    margin: 0 !important;
}

html.sidebar-collapsed .main-content {
    margin-left: 76px !important;
    max-width: calc(100vw - 76px);
}

.sidebar nav ul li a .nav-link-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 12px;
    vertical-align: middle;
    mix-blend-mode: screen;
}

html.sidebar-collapsed .sidebar nav ul li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

html.sidebar-collapsed .sidebar nav ul li a .nav-link-icon {
    display: inline-block;
    margin-right: 0;
}

html.sidebar-collapsed .sidebar nav a::before {
    content: none !important;
}

.main-content h1,
.main-content h2,
.main-content h3,
.page-title,
.section-title {
    color: var(--ui-text) !important;
    letter-spacing: 0;
}

.stat-card,
.stat-card-inv,
.kpi-card,
.chart-card,
.summary-card,
.settings-sidebar,
.settings-content,
.profile-card,
.table-wrapper,
.budget-table-wrapper,
.items-table-wrapper,
.form-wrapper,
.notification-card,
.notifications-list,
.total-notif-item,
.content-card,
.card {
    background: var(--ui-surface) !important;
    border: 1px solid rgba(226, 232, 240, 0.90) !important;
    border-radius: 18px !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.stat-card,
.stat-card-inv,
.kpi-card,
.summary-card,
.total-notif-item {
    position: relative;
    overflow: hidden;
}

/* Keep notification summary rows visually consistent with their severity;
   this must follow the generic surface border above. */
.notifications-page .total-notif-item.card-red { border-left: 4px solid #d32f2f !important; }
.notifications-page .total-notif-item.card-orange { border-left: 4px solid #e65100 !important; }
.notifications-page .total-notif-item.card-green { border-left: 4px solid #2e7d32 !important; }
.notifications-page .total-notif-item.card-blue { border-left: 4px solid #1565c0 !important; }

.stat-card::before,
.stat-card-inv::before,
.kpi-card::before,
.summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ui-accent), #f4bd62);
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead th,
table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ui-border) !important;
}

tbody td,
table tbody td {
    border-bottom: 1px solid #eef2f6 !important;
}

tbody tr,
table tbody tr {
    transition: background 0.12s ease;
}

tbody tr:hover,
table tbody tr:hover {
    background: #fff8f0 !important;
}

input,
select,
textarea {
    border-radius: 11px !important;
    border-color: var(--ui-border-strong) !important;
    background: #fbfcfe !important;
    color: var(--ui-text) !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ui-accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(240, 138, 26, 0.16) !important;
}

button,
.btn-save,
.btn-filter,
.btn-signin,
.btn-new-project,
.btn-add-item,
.btn-add-transaction,
.btn-add-supplier,
.btn-add-user,
.btn-change,
.btn-go-profile,
.btn-save-config,
.btn-action,
.btn-action-icon,
.btn-mark-read,
.btn-clear-all,
.btn-edit-project {
    border-radius: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}

.btn-save,
.btn-filter,
.btn-signin,
.btn-new-project,
.btn-add-item,
.btn-add-transaction,
.btn-add-supplier,
.btn-add-user,
.btn-change,
.btn-go-profile,
.btn-save-config,
.btn-continue {
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 14px rgba(240, 138, 26, 0.18) !important;
}

.btn-save:hover,
.btn-filter:hover,
.btn-signin:hover,
.btn-new-project:hover,
.btn-add-item:hover,
.btn-add-transaction:hover,
.btn-add-supplier:hover,
.btn-add-user:hover,
.btn-change:hover,
.btn-go-profile:hover,
.btn-save-config:hover,
.btn-continue:hover {
    box-shadow: 0 8px 18px rgba(240, 138, 26, 0.22) !important;
}

.btn-cancel,
.btn-back,
.btn-cancel-config {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid var(--ui-border-strong) !important;
}

.btn-delete,
.btn-delete-user,
.btn-delete-config {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ef4444, #c62828) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 14px rgba(217, 54, 54, 0.18) !important;
}

.modal-overlay {
    background: rgba(15, 23, 42, 0.58) !important;
}

.modal-container {
    background: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24) !important;
}

.modal-header {
    border-bottom-color: #eef2f6 !important;
}

.modal-close {
    border-radius: 999px !important;
}

.modal-close:hover {
    background: #f2f5f9 !important;
    color: var(--ui-text) !important;
}

.success-notification,
.error-notification {
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16) !important;
}

.success-notification {
    background: linear-gradient(135deg, var(--ui-success), #147a48) !important;
}

.error-notification {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
}


.role-badge,
.status-badge,
.badge,
.phase-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f6;
}

::-webkit-scrollbar-thumb {
    background: #c9d2df;
    border: 2px solid #eef2f6;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aab6c7;
}

/* Responsive navigation drawer. Desktop collapse state is intentionally
   ignored below 1025px; mobile navigation owns its open/closed state. */
.mobile-nav-toggle,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar {
        position: fixed !important;
        z-index: 1200 !important;
        top: 72px !important;
        left: 0 !important;
        width: 50vw !important;
        height: calc(100dvh - 72px) !important;
        max-height: calc(100dvh - 72px) !important;
        flex-wrap: nowrap !important;
        padding: 18px 14px !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        border-bottom: 0;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        transition: transform 0.24s ease !important;
    }

    html.mobile-nav-open .sidebar {
        transform: translateX(0) !important;
    }

    .sidebar-collapse-toggle {
        display: none !important;
    }

    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        z-index: 1190;
        inset: 72px 0 0;
        background: rgba(15, 23, 42, 0.42);
        opacity: 1;
        transition: opacity 0.24s ease;
    }

    html:not(.mobile-nav-open) .mobile-nav-backdrop {
        opacity: 0;
        pointer-events: none;
    }

    .mobile-nav-toggle {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px;
        border: 1px solid rgba(71, 85, 105, .18) !important;
        border-radius: 10px;
        background: rgba(15, 23, 42, .035) !important;
        color: #475569 !important;
        box-shadow: none;
        cursor: pointer;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus-visible {
        border-color: rgba(240, 138, 26, .36) !important;
        background: rgba(240, 138, 26, .08) !important;
        color: #c76b0a !important;
    }

    .mobile-nav-toggle:focus-visible {
        outline: 2px solid rgba(240, 138, 26, .28);
        outline-offset: 2px;
    }

    html[data-theme="dark"] .mobile-nav-toggle {
        border-color: rgba(255, 255, 255, .14) !important;
        background: rgba(255, 255, 255, .045) !important;
        color: #dbe5f3 !important;
    }

    html.sidebar-collapsed .sidebar {
        width: 50vw !important;
        padding-inline: 14px !important;
    }

    html.sidebar-collapsed .sidebar nav a,
    html.sidebar-collapsed .sidebar .bottom-nav :where(a, button) {
        justify-content: flex-start !important;
        gap: 12px !important;
        color: inherit !important;
        font-size: inherit !important;
    }

    .sidebar nav {
        margin-top: 0 !important;
    }

    .sidebar nav ul,
    .sidebar .bottom-nav ul {
        display: block !important;
    }

    .sidebar nav ul li,
    .sidebar .bottom-nav ul li {
        width: 100% !important;
    }

    .sidebar nav ul li a,
    .sidebar .bottom-nav ul li a,
    .sidebar .bottom-nav ul li button {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px !important;
        font-size: inherit !important;
        color: inherit !important;
        padding: 12px 14px !important;
    }

    .sidebar nav ul li a .nav-link-icon,
    .sidebar .bottom-nav .nav-icon {
        display: inline-block !important;
        margin: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 24px 18px 36px !important;
    }

    .sidebar .nav-dropdown {
        padding-left: 32px !important;
    }
}

@media (max-width: 700px) {
    .mobile-nav-backdrop {
        inset-block-start: 64px;
    }

    .sidebar {
        top: 64px !important;
        width: 75vw !important;
        height: calc(100dvh - 64px) !important;
        max-height: calc(100dvh - 64px) !important;
    }

    html.sidebar-collapsed .sidebar {
        width: 75vw !important;
    }
}

/* Persistent application dark theme (controlled by public/js/theme.js). */
html[data-theme="dark"] {
    --ui-bg: #0b1220;
    --ui-surface: rgba(17, 24, 39, 0.94);
    --ui-surface-solid: #111827;
    --ui-border: #2c3749;
    --ui-border-strong: #3b475b;
    --ui-text: #edf2f7;
    --ui-muted: #aeb8c7;
    --ui-accent-soft: #3a2615;
    --ui-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
    --ui-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.28);
    background: var(--ui-bg);
}

html[data-theme="dark"] body:not(.landing-page) {
    background: radial-gradient(circle at top left, rgba(240, 138, 26, 0.10), transparent 34rem),
        linear-gradient(135deg, #0b1220 0%, #111827 100%) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .settings-wrapper,
html[data-theme="dark"] .settings-content,
html[data-theme="dark"] .settings-sidebar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .modal-container,
html[data-theme="dark"] .profile-preview,
html[data-theme="dark"] .security-item,
html[data-theme="dark"] .preference-item {
    background: var(--ui-surface-solid) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] label,
html[data-theme="dark"] .label,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .name,
html[data-theme="dark"] td {
    color: var(--ui-text) !important;
}

html[data-theme="dark"] .desc,
html[data-theme="dark"] .section-desc,
html[data-theme="dark"] .role,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .text-muted {
    color: var(--ui-muted) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    background-color: var(--ui-surface-solid) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #0b1220 !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track { background: #111827; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #465369; border-color: #111827; }

/* Complete dark-mode contrast coverage for legacy and role-specific screens. */
html[data-theme="dark"] {
    --ui-surface-raised: #182235;
    --ui-surface-inset: #080f1c;
    --ui-hover: #223047;
    --ui-text-strong: #f8fafc;
    --ui-text-soft: #c2cddd;
    --ui-focus: #f6a94f;
}

html[data-theme="dark"] body:not(.landing-page) :where(p, li, dd, dt, strong, b, small),
html[data-theme="dark"] body:not(.landing-page) :where(.title, .name, .value, .amount, .count, .card-title, .modal-title, .form-title) {
    color: inherit;
}

html[data-theme="dark"] :where(
    .stat-card, .kpi-card, .chart-card, .summary-card, .profile-card,
    .notification-card, .notifications-list, .total-notif-item,
    .table-wrapper, .budget-table-wrapper, .items-table-wrapper, .form-wrapper,
    .finance-card, .inventory-card, .project-card, .supplier-card, .report-card,
    .info-card, .metric-card, .overview-card, .detail-card, .form-card,
    .filters, .filter-section, .filter-bar, .search-section, .toolbar,
    .config-tabs, .profile-info, .profile-details, .password-section,
    .modal-content, .modal-body, .dropdown-menu
) {
    background-color: var(--ui-surface-solid) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] :where(.chart-container, .chart-wrapper, .graph-container, .graph-wrapper, .canvas-container) {
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, legend, caption, .page-title, .card-title, .modal-title) {
    color: var(--ui-text-strong) !important;
}

html[data-theme="dark"] :where(.description, .helper-text, .hint, .meta, .date, .time, .empty-message, .no-data, .subtext) {
    color: var(--ui-text-soft) !important;
}

html[data-theme="dark"] :where(a:not(.sidebar a), .link, .view-all) {
    color: #8fc5ff !important;
}

html[data-theme="dark"] :where(input, select, textarea) {
    background-color: var(--ui-surface-inset) !important;
    color: var(--ui-text-strong) !important;
    border-color: var(--ui-border-strong) !important;
    caret-color: var(--ui-text-strong);
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: #8794a8 !important;
    opacity: 1;
}

html[data-theme="dark"] :where(input, select, textarea):focus {
    background-color: #0c1627 !important;
    border-color: var(--ui-focus) !important;
    box-shadow: 0 0 0 4px rgba(246, 169, 79, 0.20) !important;
}

html[data-theme="dark"] :where(input, select, textarea):disabled,
html[data-theme="dark"] :where(input, select, textarea)[readonly] {
    background-color: #202b3d !important;
    color: #aeb9ca !important;
    opacity: 1;
}

html[data-theme="dark"] select option {
    background: var(--ui-surface-inset);
    color: var(--ui-text-strong);
}

html[data-theme="dark"] table {
    background: var(--ui-surface-solid) !important;
    color: var(--ui-text) !important;
}

html[data-theme="dark"] :where(thead, thead tr, thead th) {
    background: #202c40 !important;
    color: #eef4fc !important;
    border-color: var(--ui-border-strong) !important;
}

html[data-theme="dark"] :where(tbody, tbody tr, tbody td) {
    background: var(--ui-surface-solid) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :where(tbody tr:nth-child(even), .list-item:nth-child(even)) {
    background: #151f30 !important;
}

html[data-theme="dark"] :where(tbody tr:hover, .list-item:hover, .notification-item:hover) {
    background: var(--ui-hover) !important;
}

html[data-theme="dark"] :where(button, [role="button"], .btn) {
    color: var(--ui-text-strong);
    border-color: var(--ui-border-strong);
}

html[data-theme="dark"] :where(.btn-cancel, .btn-back, .btn-cancel-config, .btn-secondary, .btn-action, .btn-action-icon, .modal-close) {
    background: #263349 !important;
    color: #f1f5f9 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] :where(.btn-cancel, .btn-back, .btn-cancel-config, .btn-secondary, .btn-action, .btn-action-icon, .modal-close):hover {
    background: #34435b !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    .btn-save, .btn-filter, .btn-signin, .btn-new-project, .btn-add-item,
    .btn-add-transaction, .btn-add-supplier, .btn-add-user, .btn-change,
    .btn-go-profile, .btn-save-config, .btn-continue, .btn-primary
) {
    color: #ffffff !important;
}

:is(.inventory-page, #receivableDetailModal, #cashDetailModal, #equipmentDetailModal, #bondDetailModal) .btn-edit-project {
    background: #e19a45 !important;
    box-shadow: none !important;
}

:is(.inventory-page, #receivableDetailModal, #cashDetailModal, #equipmentDetailModal, #bondDetailModal) .btn-edit-project:hover {
    background: #cf8735 !important;
    box-shadow: none !important;
    transform: none !important;
}

html[data-theme="dark"] :is(.inventory-page, #receivableDetailModal, #cashDetailModal, #equipmentDetailModal, #bondDetailModal) .btn-edit-project {
    background: #e19a45 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :is(.inventory-page, #receivableDetailModal, #cashDetailModal, #equipmentDetailModal, #bondDetailModal) .btn-edit-project:hover {
    background: #cf8735 !important;
    box-shadow: none !important;
    transform: none !important;
}

html[data-theme="dark"] .reports-page .action-cell button {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .reports-page .action-cell button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] :where(.badge, .role-badge, .status-badge, .phase-badge, .type-badge, [class*="-badge"]:not(.notif-badge)) {
    background-color: #2a3850 !important;
    color: #f1f5f9 !important;
    border: 1px solid #465975 !important;
}

html[data-theme="dark"] :where(.success, .completed, .active, .status-active) {
    --status-color: #69d59c;
}

html[data-theme="dark"] :where(.warning, .pending, .status-pending) {
    --status-color: #ffc46b;
}

html[data-theme="dark"] :where(.danger, .failed, .overdue, .inactive, .status-inactive) {
    --status-color: #ff8b91;
}

html[data-theme="dark"] :where(.status-badge, .phase-badge, .type-badge)[class] {
    color: var(--status-color, #f1f5f9) !important;
}

html[data-theme="dark"] :where(.modal-overlay, .overlay, .backdrop) {
    background-color: rgba(0, 0, 0, 0.72) !important;
}

html[data-theme="dark"] :where(.modal-header, .modal-footer, .card-header, .card-footer, .section-header) {
    background-color: var(--ui-surface-raised) !important;
    color: var(--ui-text-strong) !important;
    border-color: var(--ui-border) !important;
}

html[data-theme="dark"] :where(hr, .divider, .separator) {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-border) !important;
}

html[data-theme="dark"] :where(.progress, progress) {
    background-color: #2a3548 !important;
}

html[data-theme="dark"] :where(.alert, .message, .notification-item) {
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

html[data-theme="dark"] :focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 2px;
}

/* Dashboard: preserve surface hierarchy and strong contrast in dark mode. */
html[data-theme="dark"] .dashboard-page :where(.stat-card, .chart-box, .projects-section, .projects-list, .project-item) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .dashboard-page :where(.stat-card .stat-value, #activeProjectsCount, #totalBudgetDisplay, #netVarianceDisplay) {
    color: #f8fafc !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .dashboard-page :where(.stat-card .stat-label, .stat-card .stat-sub, .bar-label) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .dashboard-page :where(.chart-box, .chart-box .bar-chart, .chart-box .line-chart, .chart-box svg) {
    background: #111827 !important;
}

html[data-theme="dark"] .dashboard-page .chart-box h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .dashboard-page .chart-box:first-child .bar,
html[data-theme="dark"] .dashboard-page .bar-chart .bar {
    background: #f08a1a !important;
}

html[data-theme="dark"] .dashboard-page .line-chart :where(.dot-label, .x-label, .y-label) {
    fill: #dbe5f3 !important;
}

html[data-theme="dark"] .dashboard-page .line-chart .grid-line {
    stroke: #344158 !important;
}

html[data-theme="dark"] .dashboard-page .line-chart .dot {
    stroke: #111827 !important;
}

html[data-theme="dark"] .dashboard-page .project-item:hover {
    background: #182235 !important;
}

html[data-theme="dark"] .dashboard-page .project-item :where(h4, .progress-label, .progress-label span) {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .dashboard-page .project-item .budget {
    color: #f3a64f !important;
}

html[data-theme="dark"] .dashboard-page .project-item .progress-bar {
    background: #2d394d !important;
}

/* Active Projects detail modal uses one continuous dark surface. */
html[data-theme="dark"] .dashboard-page #projectDetailModal :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    .project-details-grid, .detail-item
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .dashboard-page #projectDetailModal :where(h2, h3, h4, .subtitle, label, span, .detail-item span) {
    color: #edf2f7 !important;
}

html[data-theme="dark"] .dashboard-page #projectDetailModal .detail-item label,
html[data-theme="dark"] .dashboard-page #projectDetailModal .subtitle {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .dashboard-page #projectDetailModal :where(
    .phase-badge, .status-badge.completed, .status-badge.at-risk
) {
    color: #f3a64f !important;
}

html[data-theme="dark"] .dashboard-page #projectDetailModal .modal-close {
    background: transparent !important;
    color: #edf2f7 !important;
    border-color: transparent !important;
}

/* Selected pagination is light; all available pages remain dark. */
html[data-theme="dark"] .dashboard-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .dashboard-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .dashboard-page .pagination-links :where(a, button):not(.active):not(:disabled):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .dashboard-page .pagination-links :where(.dots, .ellipsis) {
    background: transparent !important;
    color: #94a3b8 !important;
    border-color: transparent !important;
}

/* Projects dark mode: KPI, search, and pagination contrast. */
html[data-theme="dark"] .projects-page :where(.stat-card-proj, .stats-grid-proj .stat-card-proj) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .projects-page .stat-card-proj .stat-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .projects-page .stat-card-proj :where(.stat-label, .stat-sub) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .projects-page :where(.search-bar-wrapper, .search-bar) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #36445a !important;
}

html[data-theme="dark"] .projects-page .search-bar .search-input {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page .search-bar .btn-clear-search {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page .search-bar .btn-clear-search:hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #f08a1a !important;
}

/* Shared Projects-style pagination for Projects and Dashboard. */
.projects-page .pagination-wrapper,
.dashboard-page .pagination-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px 0 !important;
    margin-top: 15px !important;
    border-top: 0 !important;
    flex-wrap: wrap;
    gap: 15px;
}

.projects-page .pagination-links,
.dashboard-page .pagination-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px !important;
}

.projects-page .pagination-links :where(a, button),
.dashboard-page .pagination-links :where(a, button) {
    min-width: 34px;
    padding: 6px 12px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dashboard-page .pagination-links :where(a, button) {
    font-weight: 400 !important;
}

.projects-page .pagination-links :where(a, button):not(.active):not(:disabled):hover,
.dashboard-page .pagination-links :where(a, button):not(.active):not(:disabled):hover {
    background: #eef2f6 !important;
    color: #172033 !important;
    border-color: #aeb8c7 !important;
}

.projects-page .pagination-links :where(a, button).active,
.dashboard-page .pagination-links :where(a, button).active {
    background: #1a2b3c !important;
    color: #ffffff !important;
    border-color: #1a2b3c !important;
}

.projects-page .pagination-links :where(.disabled, :disabled),
.dashboard-page .pagination-links :where(.disabled, :disabled) {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.projects-page .pagination-links :where(.dots, .ellipsis, .pagination-info),
.dashboard-page .pagination-links :where(.dots, .ellipsis, .pagination-info) {
    padding: 6px 8px;
    color: #778195;
    background: transparent !important;
    border: 0 !important;
}

html[data-theme="dark"] :where(.projects-page, .dashboard-page) .pagination-wrapper {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] :where(.projects-page, .dashboard-page) .pagination-links :where(a, button):not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] :where(.projects-page, .dashboard-page) .pagination-links :where(a, button).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] :where(.projects-page, .dashboard-page) .pagination-links :where(a, button):not(.active):not(:disabled):hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] :where(.projects-page, .dashboard-page) .pagination-links :where(.dots, .ellipsis, .pagination-info) {
    color: #94a3b8 !important;
}

/* Finance dark mode: selectable controls and KPI contrast. */
html[data-theme="dark"] .finance-page :where(.stat-mini, .stats-row .stat-mini, .stats-row-budget .stat-mini) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .finance-page .stat-mini .stat-label {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .finance-page :where(#totalExpensesValue, [id*="totalExpenses"], [id*="TotalExpenses"]) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .finance-page :where(.view-toggle .toggle-btn, .filter-tabs .tab):not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .finance-page .btn-clear-search {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .finance-page .btn-clear-search:hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .finance-page :where(.view-toggle .toggle-btn, .filter-tabs .tab):not(.active):hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .finance-page :where(.view-toggle .toggle-btn, .filter-tabs .tab).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .finance-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .finance-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) table,
html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) tbody,
html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) tbody tr,
html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) tbody td {
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) tbody tr:hover,
html[data-theme="dark"] .finance-page .report-section :where(.report-table-wrapper, .table-wrapper, .budget-table-wrapper) tbody tr:hover td {
    background-color: #182235 !important;
}

/* Finance add modals use one continuous dark surface. */
html[data-theme="dark"] .finance-page [id^="add"][id$="Modal"] :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    form, .form-group, .form-row, .form-section, .input-group,
    .file-upload-wrapper, .file-upload-area
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .finance-page [id^="add"][id$="Modal"] :where(.modal-header, .modal-footer) {
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .finance-page [id^="add"][id$="Modal"] :where(h2, h3, h4, label, .modal-title) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .finance-page :where(#addExpenseModal, #addBudgetModal) .file-upload-button {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border: 1px solid #46546a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .finance-page :where(#addExpenseModal, #addBudgetModal) .file-upload-button:hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .finance-page :where(#addExpenseModal, #addBudgetModal) :where(.file-upload-name, .file-upload-hint) {
    color: #c2cddd !important;
}

/* Inventory receives the same complete dark treatment as Projects and Finance. */
html[data-theme="dark"] .inventory-page :where(.stat-card-inv, .stats-grid-inv .stat-card-inv) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .inventory-page .stat-card-inv .stat-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .stat-card-inv :where(.stat-label, .stat-sub) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .inventory-page :where(.filters-bar, .search-bar, .filter-row) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #36445a !important;
}

html[data-theme="dark"] .inventory-page :where(.btn-clear, .btn-clear-search, .clear-btn, .btn-clear-filters) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .inventory-page :where(.btn-clear, .btn-clear-search, .clear-btn, .btn-clear-filters):hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .inventory-page :where(.inventory-tabs .tab, .filter-tabs .tab, .toggle-btn):not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .inventory-page :where(.inventory-tabs .tab, .filter-tabs .tab, .toggle-btn).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

/* Import / Add Item / Add Transaction buttons match the "Items" active-tab color. */
.inventory-page .btn-add-item,
.inventory-page .btn-add-transaction {
    background: #1a2b3c !important;
}

.inventory-page .btn-add-item:hover,
.inventory-page .btn-add-transaction:hover {
    background: #2a3f54 !important;
}

html[data-theme="dark"] .inventory-page .btn-add-item,
html[data-theme="dark"] .inventory-page .btn-add-transaction {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .btn-add-item:hover,
html[data-theme="dark"] .inventory-page .btn-add-transaction:hover {
    background: #e2e8f0 !important;
}

/* Inventory: flat low-stock orange instead of the site's gradient accent orange. */
.inventory-page :where(.btn-save, .btn-continue) {
    background: #e19a45 !important;
    box-shadow: none !important;
}

.inventory-page :where(.btn-save, .btn-continue):hover {
    background: #cf8735 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page :where(.btn-save, .btn-continue) {
    background: #e19a45 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .inventory-page :where(.btn-save, .btn-continue):hover {
    background: #cf8735 !important;
}

html[data-theme="dark"] .inventory-page :where(.table-wrapper, .items-table-wrapper) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .inventory-page :where(.table-wrapper, .items-table-wrapper) :where(table, tbody, tbody tr, tbody td) {
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .inventory-page :where(.table-wrapper, .items-table-wrapper) tbody tr:hover,
html[data-theme="dark"] .inventory-page :where(.table-wrapper, .items-table-wrapper) tbody tr:hover td {
    background-color: #182235 !important;
}

.inventory-page .pagination-links :where(a, button) {
    min-width: 34px;
    padding: 6px 12px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-align: center;
    text-decoration: none;
}

.inventory-page .pagination-links :where(a, button).active {
    background: #1a2b3c !important;
    color: #ffffff !important;
    border-color: #1a2b3c !important;
}

html[data-theme="dark"] .inventory-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .inventory-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .module-insight-card {
    background: #111827 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .inventory-page .module-insight-card h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .module-insight-card .insight-caption {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .inventory-page .insight-bar-label {
    color: #c2cddd !important;
}

html[data-theme="dark"] .inventory-page .insight-bar-track {
    background: #2a3548 !important;
}

html[data-theme="dark"] .inventory-page .insight-bar-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page :where(.insight-empty, .insight-error) {
    background: #182235 !important;
    color: #c2cddd !important;
}

html[data-theme="dark"] .inventory-page .insight-error {
    background: #3a1f1f !important;
    color: #ff8b91 !important;
}

html[data-theme="dark"] .inventory-page .filter-date-label {
    color: #c2cddd !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    form, .form-group, .form-row, .form-row-three, .form-section,
    .input-group, .step-indicator, .step-content,
    .summary-section, .summary-list, .summary-item, .view-grid, .view-item
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay :where(h2, h3, h4, label, .modal-title, .view-value) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay :where(.step, .view-label, .helper-text, p) {
    color: #c2cddd !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay :where(.file-upload-button, input[type="file"]::file-selector-button) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

/* Items and Transactions view/edit modals: remove every remaining light panel. */
html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    .form-group, .input-group,
    form, fieldset
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) .view-details-grid {
    background: var(--ui-surface-raised) !important;
    background-color: var(--ui-surface-raised) !important;
    border: 1px solid #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) .view-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) :where(
    h2, h3, h4, label, .view-value, span:not(.required)
) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) .view-item label {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) :where(
    input, select, textarea, .view-input
) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) :where(
    input, select, textarea, .view-input
):disabled,
html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) :where(
    input, select, textarea, .view-input
)[readonly] {
    background: #202b3d !important;
    color: #c2cddd !important;
    opacity: 1;
}

html[data-theme="dark"] .inventory-page :where(#itemDetailModal, #editItemModal, #viewModal) .modal-close {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}

/* Add New Transaction review step uses one dark surface. */
html[data-theme="dark"] .inventory-page #transactionModal #step2 :where(
    .modal-step, .summary-item, .modal-footer,
    .footer-left, .footer-right
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page #transactionModal #step2 .summary-list {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-left: 4px solid #e19a45 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .inventory-page #transactionModal #step2 :where(h3, strong, .summary-value, span) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay .summary-list {
    border-left-color: #e19a45 !important;
}

html[data-theme="dark"] .inventory-page #transactionModal .summary-list,
html[data-theme="dark"] .inventory-page #addItemModal .summary-list {
    border-left: 4px solid #e19a45 !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay .summary-item strong {
    color: #c2cddd !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay .summary-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .inventory-page .modal-overlay .summary-item {
    border-bottom-color: #2c3749 !important;
}

html[data-theme="dark"] .inventory-page #transactionModal #step2 hr {
    border-top-color: #2c3749 !important;
    background: transparent !important;
}

html[data-theme="dark"] .inventory-page #transactionModal .quantity-control button {
    background: #c9a96e !important;
    color: #ffffff !important;
    border-color: #c9a96e !important;
}

html[data-theme="dark"] .inventory-page #transactionModal .quantity-control button:hover {
    background: #b8975a !important;
    color: #ffffff !important;
    border-color: #b8975a !important;
}

html[data-theme="dark"] .inventory-page .btn-confirm-expense {
    background: #e19a45 !important;
    color: #111827 !important;
    border-color: #e19a45 !important;
}

html[data-theme="dark"] .inventory-page .btn-confirm-expense:hover {
    background: #cf8735 !important;
    color: #111827 !important;
}

/* Suppliers: match Inventory's Add button + orange action styling. */
.suppliers-page .btn-add-supplier {
    background: #1a2b3c !important;
}

.suppliers-page .btn-add-supplier:hover {
    background: #2a3f54 !important;
}

.suppliers-page .btn-save {
    background: #e19a45 !important;
    box-shadow: none !important;
}

.suppliers-page .btn-save:hover {
    background: #cf8735 !important;
    box-shadow: none !important;
}

/* Suppliers receives the same complete dark treatment as other modules. */
html[data-theme="dark"] .suppliers-page :where(.stat-card, .stat-card-supplier, .kpi-card) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .suppliers-page :where(.stat-card, .stat-card-supplier, .kpi-card) :where(.stat-value, .value, strong) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .stat-card-supplier small {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .suppliers-page .module-insight-card {
    background: #111827 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .suppliers-page .module-insight-card h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .module-insight-card .insight-caption {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .suppliers-page .insight-bar-label {
    color: #c2cddd !important;
}

html[data-theme="dark"] .suppliers-page .insight-bar-track {
    background: #2a3548 !important;
}

html[data-theme="dark"] .suppliers-page .insight-bar-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .insight-empty {
    background: #182235 !important;
    color: #c2cddd !important;
}

html[data-theme="dark"] .suppliers-page .filters-bar {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #36445a !important;
}

html[data-theme="dark"] .suppliers-page .filters-bar .search-input {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page .filters-bar select {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page .btn-add-supplier {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .btn-add-supplier:hover {
    background: #e2e8f0 !important;
}

html[data-theme="dark"] .suppliers-page .btn-save {
    background: #e19a45 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .suppliers-page .btn-save:hover {
    background: #cf8735 !important;
}

html[data-theme="dark"] .suppliers-page :where(.btn-clear, .btn-clear-search, .clear-btn, .btn-clear-filters) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page :where(.btn-clear, .btn-clear-search, .clear-btn, .btn-clear-filters):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .suppliers-page .table-wrapper,
html[data-theme="dark"] .suppliers-page .table-wrapper :where(table, tbody, tbody tr, tbody td) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .suppliers-page .table-wrapper tbody tr:hover,
html[data-theme="dark"] .suppliers-page .table-wrapper tbody tr:hover td {
    background: #182235 !important;
    background-color: #182235 !important;
}

html[data-theme="dark"] .suppliers-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    .add-row, .edit-section, .left-col, .right-col,
    .footer-left, .footer-right, form, .form-group, .form-row,
    .modal-step, .step-indicator, .summary-list, .summary-item
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay :where(h2, h3, h4, label, .add-label, .edit-label, p) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .summary-item strong {
    color: #c2cddd !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .summary-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .summary-list {
    border-left-color: #e19a45 !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .step-indicator {
    border-bottom-color: #2c3749 !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .step-indicator .step {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .step-indicator .step.active {
    color: #f3a64f !important;
}

html[data-theme="dark"] .suppliers-page .supplier-section-title {
    color: #c2cddd !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .current-label {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .current-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .view-details-grid {
    background: var(--ui-surface-raised) !important;
    background-color: var(--ui-surface-raised) !important;
    border: 1px solid #2c3749 !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay .view-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay :where(input, select, textarea) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page .modal-overlay :where(.file-upload-button, input[type="file"]::file-selector-button) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .suppliers-page .modal-close {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}

/* Reports receives the same complete dark treatment as other modules. */
html[data-theme="dark"] .reports-page :where(.kpi-card, .stat-card, .summary-card) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .reports-page .kpi-card .kpi-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page .kpi-card :where(.kpi-label, .kpi-sub) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .reports-page :where(.filters-bar, .tab-row, .report-tabs) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #36445a !important;
}

html[data-theme="dark"] .reports-page .report-tabs .tab:not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .reports-page .report-tabs .tab:not(.active):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .reports-page .report-tabs .tab.active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page :where(.btn-clear, .btn-clear-search, .btn-action-icon) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .reports-page .table-wrapper,
html[data-theme="dark"] .reports-page .table-wrapper :where(table, tbody, tbody tr, tbody td) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .reports-page .table-wrapper tbody tr:hover,
html[data-theme="dark"] .reports-page .table-wrapper tbody tr:hover td {
    background: #182235 !important;
    background-color: #182235 !important;
}

html[data-theme="dark"] .reports-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .reports-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page .modal-overlay :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    form, .form-group, .form-row, .upload-area, .file-upload-wrapper,
    .progress-container, .detail-grid, .detail-item
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .reports-page .modal-overlay :where(h2, h3, h4, label, .modal-title, .detail-value) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page .modal-overlay :where(.file-upload-button, input[type="file"]::file-selector-button) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .reports-page .modal-close {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .reports-page .modal-overlay :where(.view-details-grid, .view-item) {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .reports-page .modal-overlay .view-value {
    color: #f8fafc !important;
}

html[data-theme="dark"] .reports-page :where(.tab-actions, .icon-group) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .reports-page .icon-group .btn-action-icon {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .reports-page .icon-group .btn-action-icon:hover {
    background: #263349 !important;
    color: #ffffff !important;
}

/* Notifications receives the same complete dark treatment as other modules. */
html[data-theme="dark"] .notifications-page :where(.notification-card, .notifications-list, .total-notif-item, .notif-section, .empty-state) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .notifications-page .notif-tabs .tab:not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .notifications-page .notif-tabs .tab:not(.active):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .notifications-page .notif-tabs .tab.active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .notifications-page :where(.btn-mark-read, .btn-clear-all) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .notifications-page :where(.btn-mark-read, .btn-clear-all):hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .notifications-page .notif-item {
    background: #182235 !important;
    color: #edf2f7 !important;
    border-color: #465975 !important;
}

html[data-theme="dark"] .notifications-page .notif-item.unread {
    background: #182235 !important;
    border-color: #465975 !important;
}

html[data-theme="dark"] .notifications-page .notif-item:hover {
    background: #223047 !important;
}

html[data-theme="dark"] .notifications-page .notif-item :where(.notif-title, .notif-content) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .notifications-page .notif-item :where(.notif-desc, .notif-time) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .notifications-page .pagination-links :where(a, button, span):not(.active):not(.dots):not(.ellipsis) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .notifications-page .pagination-links :where(a, button, span).active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .notifications-page .modal-overlay :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    form, .form-group, .detail-container, .detail-item
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .notifications-page .modal-overlay :where(h2, h3, h4, label, p, .detail-value) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .notifications-page .modal-close {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .notifications-page :where(
    .notification-card, .notifications-list, .total-notif-item,
    .notif-section, .notif-item, .empty-state, .notif-tabs,
    .notif-actions, .modal-container, .modal-header, .modal-body,
    .modal-footer, .detail-container, .detail-item
) {
    box-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] .top-header .right a:hover {
    background: #182235 !important;
    background-color: #182235 !important;
    color: #f8fafc !important;
}

/* Settings receives the finalized dark treatment used across all modules. */
html[data-theme="dark"] .settings-page :where(
    .settings-wrapper, .settings-sidebar, .settings-content, .settings-section,
    .profile-preview, .security-item, .preference-item,
    .config-tabs, #userConfigDetails
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .settings-page .settings-nav li:not(.active) {
    background: #111827 !important;
    color: #c2cddd !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .settings-page .settings-nav li:not(.active):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .settings-page .settings-nav li.active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-left-color: #f08a1a !important;
}

html[data-theme="dark"] .settings-page .config-tab:not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .settings-page .config-tab.active {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .settings-page :where(.section-title, .label, .name, h2, h3, h4, label) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .settings-page :where(.section-desc, .desc, .role, .helper-text) {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .settings-page :where(.user-table, .user-table tbody, .user-table tbody tr, .user-table tbody td) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .settings-page .user-table tbody tr:hover,
html[data-theme="dark"] .settings-page .user-table tbody tr:hover td {
    background: #182235 !important;
    background-color: #182235 !important;
}

html[data-theme="dark"] .settings-page :where(.btn-change, .btn-cancel, .btn-cancel-config, .btn-edit-user, .btn-close-config, .password-toggle) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .settings-page :where(.btn-change, .btn-cancel, .btn-cancel-config, .btn-edit-user, .btn-close-config, .password-toggle):hover {
    background: #263349 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .settings-page .modal-overlay :where(
    .modal-container, .modal-header, .modal-body, .modal-footer,
    form, .form-group, .form-row, .config-form, .user-form
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .settings-page .modal-overlay :where(input, select, textarea) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .settings-page .modal-close {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .settings-page #configUserName {
    color: #ffffff !important;
}

html[data-theme="dark"] .settings-page .security-item .btn-change {
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-dark)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .settings-page .security-item .btn-change:hover {
    background: linear-gradient(135deg, #f59a31, #c96806) !important;
    color: #ffffff !important;
}

/* Profile receives the same complete dark treatment as other modules. */
html[data-theme="dark"] .profile-page .profile-card {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .profile-page .profile-header {
    border-bottom-color: #2c3749 !important;
}

html[data-theme="dark"] .profile-page .profile-info h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-page .profile-info .role {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .profile-page .detail-item label {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .profile-page .detail-item .value {
    color: #edf2f7 !important;
}

html[data-theme="dark"] .profile-page .detail-item .edit-input {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .profile-page .detail-item .edit-input:focus {
    background: #0c1627 !important;
    border-color: #f6a94f !important;
    box-shadow: 0 0 0 3px rgba(246, 169, 79, 0.20) !important;
}

html[data-theme="dark"] .profile-page .btn-cancel-edit {
    background: #263349 !important;
    color: #f1f5f9 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .profile-page .btn-cancel-edit:hover {
    background: #34435b !important;
    color: #ffffff !important;
}

/* Shared pagination and rows-per-page controls for every module. */
.pagination-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 15px !important;
    padding: 15px 20px 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pagination-wrapper .rows-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: #6b7280 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}

.pagination-wrapper .rows-info select {
    min-width: 58px;
    padding: 5px 9px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.pagination-wrapper .pagination-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.pagination-wrapper .pagination-links :where(a, button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.pagination-wrapper .pagination-links :where(a, button):not(.active):not(:disabled):hover {
    background: #eef2f6 !important;
    color: #172033 !important;
    border-color: #aeb8c7 !important;
}

.pagination-wrapper .pagination-links :where(a, button).active {
    background: #1a2b3c !important;
    color: #ffffff !important;
    border-color: #1a2b3c !important;
}

.pagination-wrapper .pagination-links :where(a, button).active:hover {
    background: #253d54 !important;
    color: #ffffff !important;
    border-color: #253d54 !important;
}

.pagination-wrapper .pagination-links :where(.disabled, :disabled) {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.pagination-wrapper .pagination-links :where(.dots, .ellipsis, .pagination-info) {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #778195 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    cursor: default !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .pagination-wrapper .rows-info {
    color: #b7c3d4 !important;
}

html[data-theme="dark"] .pagination-wrapper .rows-info select {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .pagination-wrapper .pagination-links :where(a, button):not(.active) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .pagination-wrapper .pagination-links :where(a, button):not(.active):not(:disabled):hover {
    background: #263349 !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .pagination-wrapper .pagination-links :where(a, button).active,
html[data-theme="dark"] .pagination-wrapper .pagination-links :where(a, button).active:hover {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .pagination-wrapper .pagination-links :where(.dots, .ellipsis, .pagination-info) {
    background: transparent !important;
    color: #94a3b8 !important;
    border-color: transparent !important;
}

@media (max-width: 650px) {
    .pagination-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        padding-inline: 0 !important;
    }

    .pagination-wrapper .rows-info,
    .pagination-wrapper .pagination-links {
        justify-content: center !important;
    }
}

/* Keep wide data tables inside the content column instead of widening the page. */
html,
body:not(.landing-page) {
    max-width: 100%;
    overflow-x: hidden;
}

.main-content {
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 248px);
}


.table-wrapper,
.table-container,
.budget-table-wrapper,
.items-table-wrapper,
.forecast-table-wrapper,
.report-table-wrapper {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background-image: none !important;
}

.table-wrapper > table,
.table-container > table,
.budget-table-wrapper > table,
.items-table-wrapper > table,
.forecast-table-wrapper > table,
.report-table-wrapper > table {
    max-width: none;
    flex: 0 0 auto;
}

.table-wrapper::before,
.table-container::before,
.budget-table-wrapper::before,
.items-table-wrapper::before,
.forecast-table-wrapper::before,
.report-table-wrapper::before {
    content: "";
    position: sticky;
    left: 0;
    top: 0;
    flex: 0 0 28px;
    width: 28px;
    margin-right: -28px;
    align-self: stretch;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to right, var(--ui-surface-solid) 0%, rgba(255, 255, 255, 0) 100%);
    transition: opacity 0.15s ease;
}

.table-wrapper::after,
.table-container::after,
.budget-table-wrapper::after,
.items-table-wrapper::after,
.forecast-table-wrapper::after,
.report-table-wrapper::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    flex: 0 0 28px;
    width: 28px;
    margin-left: -28px;
    align-self: stretch;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to left, var(--ui-surface-solid) 0%, rgba(255, 255, 255, 0) 100%);
    transition: opacity 0.15s ease;
}

.table-wrapper.is-at-start::before,
.table-container.is-at-start::before,
.budget-table-wrapper.is-at-start::before,
.items-table-wrapper.is-at-start::before,
.forecast-table-wrapper.is-at-start::before,
.report-table-wrapper.is-at-start::before {
    opacity: 0;
}

.table-wrapper.is-at-end::after,
.table-container.is-at-end::after,
.budget-table-wrapper.is-at-end::after,
.items-table-wrapper.is-at-end::after,
.forecast-table-wrapper.is-at-end::after,
.report-table-wrapper.is-at-end::after {
    opacity: 0;
}

html[data-theme="dark"] .table-wrapper::before,
html[data-theme="dark"] .table-container::before,
html[data-theme="dark"] .budget-table-wrapper::before,
html[data-theme="dark"] .items-table-wrapper::before,
html[data-theme="dark"] .forecast-table-wrapper::before,
html[data-theme="dark"] .report-table-wrapper::before {
    background: linear-gradient(to right, var(--ui-surface-solid) 0%, rgba(0, 0, 0, 0) 100%);
}

html[data-theme="dark"] .table-wrapper::after,
html[data-theme="dark"] .table-container::after,
html[data-theme="dark"] .budget-table-wrapper::after,
html[data-theme="dark"] .items-table-wrapper::after,
html[data-theme="dark"] .forecast-table-wrapper::after,
html[data-theme="dark"] .report-table-wrapper::after {
    background: linear-gradient(to left, var(--ui-surface-solid) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 900px) {
    .main-content {
        width: 100%;
        max-width: 100%;
    }
}

/* Legacy button icons are JPEGs with a white canvas; invert that canvas in dark mode. */
html[data-theme="dark"] button img:is(
    [src$="/add.jpg"],
    [src$="/edit.jpg"],
    [src$="/export.jpg"],
    [src$="/refresh.jpg"],
    [src$="/wrench.jpg"],
    [src$="/delete.jpg"],
    [src$="/download.jpg"],
    [src$="/view.jpg"]
) {
    filter: invert(1) !important;
    mix-blend-mode: screen;
    background: transparent !important;
    border-radius: 3px;
}

html[data-theme="dark"] button:hover img:is(
    [src$="/add.jpg"],
    [src$="/edit.jpg"],
    [src$="/export.jpg"],
    [src$="/refresh.jpg"],
    [src$="/wrench.jpg"],
    [src$="/delete.jpg"],
    [src$="/download.jpg"],
    [src$="/view.jpg"]
) {
    filter: invert(1) brightness(1.15) !important;
}

/* Projects: complete dark-mode surface and contrast coverage. */
html[data-theme="dark"] .projects-page :where(
    .table-wrapper,
    .search-bar-wrapper,
    .search-bar,
    .stat-card-proj
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html[data-theme="dark"] .projects-page .table-wrapper :where(table, tbody, tbody tr, tbody td) {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .projects-page .table-wrapper tbody tr:nth-child(even) :where(td) {
    background: #151f30 !important;
}

html[data-theme="dark"] .projects-page .table-wrapper tbody tr:hover :where(td) {
    background: #223047 !important;
}

html[data-theme="dark"] .projects-page :where(#projectSearch, .search-input, .rows-info select) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page :where(#projectSearch, .search-input)::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .projects-page :where(.btn-clear-search, .btn-cancel, .btn-back) {
    background: #263349 !important;
    color: #f1f5f9 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page :where(.btn-clear-search, .btn-cancel, .btn-back):hover {
    background: #34435b !important;
    color: #ffffff !important;
    border-color: #68768c !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) :where(
    .modal-container,
    .modal-header,
    .modal-body,
    .modal-step,
    .modal-footer,
    .summary-item,
    .project-details-grid,
    .step-indicator
) {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-color: #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page #projectModal .summary-list {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #edf2f7 !important;
    border-left: 4px solid #e19a45 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) :where(h2, h3, label, strong, span, .summary-value, .detail-item span) {
    color: #edf2f7 !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) :where(.subtitle, .detail-item label, .step:not(.active):not(.completed)) {
    color: #aeb8c7 !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) :where(input, select, textarea) {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) :where(input, select, textarea):focus {
    background: #0b1220 !important;
    border-color: #f08a1a !important;
    box-shadow: 0 0 0 3px rgba(240, 138, 26, 0.20) !important;
}

html[data-theme="dark"] .projects-page :where(
    #projectModal,
    #updateModal,
    #editProjectModal
) .modal-close {
    background: transparent !important;
    color: #edf2f7 !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .projects-page .step-indicator .step.active {
    color: #f3a64f !important;
    border-bottom-color: #f08a1a !important;
}

html[data-theme="dark"] .projects-page :where(.phase-badge, .status-badge) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #edf2f7 !important;
}

html[data-theme="dark"] .projects-page .status-badge.on-track { color: #2e7d32 !important; }
html[data-theme="dark"] .projects-page .status-badge.at-risk { color: #e65100 !important; }
html[data-theme="dark"] .projects-page .status-badge.delayed { color: #d32f2f !important; }
html[data-theme="dark"] .projects-page .status-badge.completed { color: #b9c4ff !important; }
html[data-theme="dark"] .projects-page .status-badge.completed .dot { background: #b9c4ff !important; }

html[data-theme="dark"] .projects-page #updateModal .project-details-grid {
    background: var(--ui-surface-raised) !important;
    background-color: var(--ui-surface-raised) !important;
    color: #edf2f7 !important;
    border: 1px solid #2c3749 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page .project-details-grid .detail-item span {
    color: #edf2f7 !important;
}

html[data-theme="dark"] .projects-page .project-details-grid .detail-item label {
    color: #b7c3d4 !important;
}

/* Projects: New Project button matches Inventory/Suppliers' Add button. */
.projects-page .btn-new-project {
    background: #1a2b3c !important;
}

.projects-page .btn-new-project:hover {
    background: #2a3f54 !important;
}

html[data-theme="dark"] .projects-page .btn-new-project {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] .projects-page .btn-new-project:hover {
    background: #e2e8f0 !important;
}

/* Projects: flat orange Continue/Save/Edit buttons instead of the site gradient. */
.projects-page :where(.btn-save, .btn-continue, .btn-edit-project) {
    background: #e19a45 !important;
    box-shadow: none !important;
}

.projects-page :where(.btn-save, .btn-continue, .btn-edit-project):hover {
    background: #cf8735 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page :where(.btn-save, .btn-continue, .btn-edit-project) {
    background: #e19a45 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .projects-page :where(.btn-save, .btn-continue, .btn-edit-project):hover {
    background: #cf8735 !important;
}

/* Projects: flat red Delete button instead of the site gradient. */
.projects-page .btn-delete {
    background: #d32f2f !important;
    box-shadow: none !important;
}

.projects-page .btn-delete:hover {
    background: #b71c1c !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .projects-page .btn-delete {
    background: #d32f2f !important;
    color: #ffffff !important;
    border-color: #d32f2f !important;
}

html[data-theme="dark"] .projects-page .btn-delete:hover {
    background: #b71c1c !important;
}

/* Projects: compact clear button matching Suppliers. */
.projects-page .btn-clear-search {
    width: 50px !important;
    min-width: 50px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid #46546a !important;
    border-radius: 8px !important;
    background: #111827 !important;
    color: #edf2f7 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer;
}

.projects-page .btn-clear-search:hover {
    background: #263349 !important;
    border-color: #68768c !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .projects-page .btn-clear-search {
    background: #111827 !important;
    color: #edf2f7 !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page .btn-clear-search:hover {
    background: #263349 !important;
    color: #ffffff !important;
}

/* Projects: status colors matched to Inventory's status palette. */
.projects-page .status-badge.on-track { color: #2e7d32 !important; }
.projects-page .status-badge.on-track .dot { background: #2e7d32 !important; }
.projects-page .status-badge.at-risk { color: #e65100 !important; }
.projects-page .status-badge.at-risk .dot { background: #e65100 !important; }
.projects-page .status-badge.pending { color: #64748b !important; }
.projects-page .status-badge.pending .dot { background: #64748b !important; }
.projects-page .status-badge.completed { color: #3949ab !important; }
.projects-page .status-badge.completed .dot { background: #3949ab !important; }
html[data-theme="dark"] .projects-page .status-badge.pending { color: #b0bfd2 !important; }
html[data-theme="dark"] .projects-page .status-badge.pending .dot { background: #b0bfd2 !important; }
.projects-page .progress-cell .mini-bar .fill { background: var(--ui-accent) !important; }
.projects-page .status-badge.delayed { color: #d32f2f !important; }
.projects-page .status-badge.delayed .dot { background: #d32f2f !important; }

/* Projects: dark mode for the filter panel and status chart (locally-styled, not covered by shared component rules). */
html[data-theme="dark"] .projects-page .project-filter-panel {
    background: #111827 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .projects-page .project-filter-field label {
    color: #c2cddd !important;
}

html[data-theme="dark"] .projects-page .project-filter-field input,
html[data-theme="dark"] .projects-page .project-filter-field select {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #46546a !important;
}

html[data-theme="dark"] .projects-page .project-chart-card {
    background: #111827 !important;
    border-color: #2c3749 !important;
}

html[data-theme="dark"] .projects-page .project-chart-card h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .projects-page #projectChartScope {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .projects-page .status-chart-track {
    background: #2a3548 !important;
}

html[data-theme="dark"] .projects-page .status-chart-row span:first-child {
    color: #c2cddd !important;
}

html[data-theme="dark"] .projects-page .status-chart-row strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .projects-page .status-chart-empty {
    color: #94a3b8 !important;
}

.projects-page .project-analytics,
.projects-page .project-chart-card {
    width: 100% !important;
    max-width: none !important;
}

/* Header notification/user JPEGs have white canvases; convert them to dark canvases. */
html[data-theme="dark"] .top-header .right img:is(
    [src$="/notif.jpg"],
    [src$="/user.jpg"]
) {
    filter: invert(1) !important;
    mix-blend-mode: screen;
    background: transparent !important;
}

/* Let every monochrome JPEG icon canvas visually adopt its control background. */
html[data-theme="dark"] :where(button, [role="button"], .top-header .right a) > img:is(
    [src$="/add.jpg"],
    [src$="/edit.jpg"],
    [src$="/export.jpg"],
    [src$="/refresh.jpg"],
    [src$="/wrench.jpg"],
    [src$="/notif.jpg"],
    [src$="/user.jpg"],
    [src$="/delete.jpg"],
    [src$="/download.jpg"],
    [src$="/view.jpg"]
) {
    filter: invert(1) !important;
    mix-blend-mode: screen;
    background-color: transparent !important;
}

html[data-theme="dark"] .top-header .right a:hover > img:is(
    [src$="/notif.jpg"],
    [src$="/user.jpg"]
) {
    filter: invert(1) !important;
    mix-blend-mode: screen !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Status text color indicators — Active Projects list (dashboard + Odashboard). */
.dashboard-page .project-item .budget .status-text {
    font-weight: 700;
}

.dashboard-page .project-item .budget .status-text.on-track {
    color: #2e7d32;
}

.dashboard-page .project-item .budget .status-text.at-risk {
    color: #e65100;
}

.dashboard-page .project-item .budget .status-text.delayed {
    color: #c62828;
}

.dashboard-page .project-item .budget .status-text.completed {
    color: #667085;
}

.dashboard-page .project-item .budget .status-text.over-budget {
    color: #c62828;
}
/* Shared table column visibility control */
.pfims-column-chooser {
    position: relative;
    width: max-content;
    margin: 0 0 10px auto;
    color: var(--ui-text);
    font-size: 0.82rem;
}
.pfims-column-chooser summary {
    min-width: 130px;
    padding: 8px 12px;
    border: 1px solid #d7dde5;
    border-radius: 7px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.pfims-column-chooser-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 80;
    display: grid;
    min-width: 220px;
    max-height: 300px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-solid);
    box-shadow: var(--ui-shadow-soft);
}
.pfims-column-chooser:not([open]) .pfims-column-chooser-menu {
    display: none;
}
.pfims-column-chooser-menu label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.pfims-column-chooser-menu label:hover {
    background: var(--ui-accent-soft);
}
.pfims-column-chooser-menu input {
    width: 15px;
    height: 15px;
    accent-color: var(--ui-accent);
}
.action-cell,
td:last-child:has(.pfims-row-action) {
    text-align: center;
    white-space: nowrap;
}

.pfims-actions-heading {
    text-align: center !important;
}

.pfims-detail-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.pfims-detail-footer .pfims-detail-cancel {
    margin-right: auto !important;
}

.pfims-generated-details-modal .modal-container {
    width: min(600px, calc(100vw - 24px));
}

.pfims-generated-details-modal .view-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pfims-generated-details-modal .view-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface-soft);
}

.pfims-generated-details-modal .view-item label {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pfims-generated-details-modal .view-value {
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.pfims-table-tooltip {
    position: fixed;
    z-index: 12000;
    max-width: min(420px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 7px;
    background: var(--ui-surface-solid);
    color: var(--ui-text-strong);
    box-shadow: var(--ui-shadow-soft);
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.pfims-table-tooltip[hidden],
.pfims-page-loader[hidden] {
    display: none !important;
}

/* The head-loaded theme script adds this class before the body is parsed.
   Keep only the main content covered while the header and sidebar remain
   visible, matching the established in-page loading experience. */
html.pfims-preload body:not(.landing-page) main.main-content > * {
    visibility: hidden !important;
}

html.pfims-preload body:not(.landing-page) main.main-content::before {
    content: '';
    position: fixed;
    z-index: 2147483000;
    inset: 72px 0 0 248px;
    background: var(--ui-bg, #f7f8fa);
}

html.pfims-preload body:not(.landing-page) main.main-content::after {
    content: '';
    position: fixed;
    z-index: 2147483001;
    top: calc(50% + 36px);
    left: calc(50% + 124px);
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 5px solid var(--ui-border-strong, #d1d5db);
    border-top-color: var(--ui-accent, #f08a1a);
    border-radius: 50%;
    animation: pfims-spinner .75s linear infinite;
}

html.sidebar-collapsed.pfims-preload body:not(.landing-page) main.main-content::before {
    left: 76px;
}

html.sidebar-collapsed.pfims-preload body:not(.landing-page) main.main-content::after {
    left: calc(50% + 38px);
}

html.pfims-preload .pfims-page-loader {
    display: none !important;
}

@media (max-width: 1024px) {
    html.pfims-preload body:not(.landing-page) main.main-content::before {
        inset: 72px 0 0 0;
    }

    html.pfims-preload body:not(.landing-page) main.main-content::after {
        left: 50%;
    }
}

@media (max-width: 700px) {
    html.pfims-preload body:not(.landing-page) main.main-content::before {
        top: 64px;
    }

    html.pfims-preload body:not(.landing-page) main.main-content::after {
        top: calc(50% + 32px);
    }
}

.pfims-page-loader {
    position: fixed;
    z-index: 900;
    inset: 72px 0 0 248px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--ui-bg) 72%, transparent);
    backdrop-filter: blur(2px);
}

html.sidebar-collapsed .pfims-page-loader {
    left: 76px;
}

.pfims-loader-host {
    position: relative !important;
}

.pfims-loader-host.pfims-is-loading > :not(.pfims-page-loader) {
    visibility: hidden;
}

body.landing-page .pfims-page-loader {
    display: none !important;
}

@media (max-width: 1024px) {
    .pfims-page-loader,
    html.sidebar-collapsed .pfims-page-loader {
        inset: 72px 0 0 0;
    }
}

@media (max-width: 700px) {
    .pfims-page-loader,
    html.sidebar-collapsed .pfims-page-loader {
        top: 64px;
    }
}

.pfims-page-spinner {
    width: 46px;
    height: 46px;
    border: 5px solid var(--ui-border-strong);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: pfims-spinner .75s linear infinite;
}

/* Shared sticky filter contract: filters remain in normal flow until they
   reach the authenticated header, then remain available while records scroll. */
.pfims-sticky-filter {
    position: sticky !important;
    top: 72px;
    z-index: 620;
    isolation: isolate;
    background: var(--ui-surface-solid) !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.pfims-sticky-filter.is-stuck {
    border-color: var(--ui-border-strong) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12) !important;
}

/* A filter card is the sticky component; its control grid stays visually
   integrated instead of rendering as a second card inside it. */
.filter-panel.pfims-filter-component > .pfims-filter-panel {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.pfims-default-filter-note {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent-dark) !important;
    font-size: .72rem;
    font-weight: 700;
}

.pfims-reset-defaults {
    display: inline-flex !important;
    min-height: 34px !important;
    align-items: center;
    justify-content: center;
    margin-left: 8px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--ui-accent) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ui-accent-dark) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.pfims-reset-defaults[hidden] { display: none !important; }

/* Audit trail */
.audit-user-email { display: block; margin-top: 2px; color: var(--ui-muted); font-size: .74rem; }
.audit-action { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.audit-action-create { background: #dcfce7; color: #166534; }
.audit-action-update { background: #dbeafe; color: #1d4ed8; }
.audit-action-delete { background: #fee2e2; color: #b91c1c; }
.audit-action-import { background: #dcfce7; color: #166534; }
.audit-action-export { background: #dbeafe; color: #1d4ed8; }
.audit-view-link { margin-left: .35rem; color: var(--ui-accent-dark); font-weight: 800; text-decoration: underline; }
.audit-view-unavailable { margin-left: .35rem; color: var(--ui-muted); font-size: .75rem; }
.audit-changes { margin-top: .4rem; white-space: normal; }
.audit-changes summary { cursor: pointer; color: var(--ui-muted); font-size: .75rem; }
.audit-changes dl { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .25rem .75rem; margin: .45rem 0 0; }
.audit-changes dt { font-weight: 700; }
.audit-changes dd { margin: 0; overflow-wrap: anywhere; }
.audit-logs-page .audit-page-header { margin-bottom: 18px; }
.audit-logs-page .audit-page-header p { margin: 6px 0 0; color: var(--ui-muted); }
.audit-logs-page .audit-log-filter-panel { margin-bottom: 20px; }
.audit-logs-page .audit-log-panel { min-width: 0; }
.audit-log-table-wrap table { table-layout: auto; }
.audit-log-table-wrap th:nth-child(1) { width: 180px; }
.audit-log-table-wrap th:nth-child(2) { width: 220px; }
.audit-log-table-wrap th:nth-child(3) { width: 120px; }
.audit-log-table-wrap th:nth-child(4) { width: 120px; text-align: center; }
.audit-log-table-wrap td:nth-child(4) { text-align: center; }
.audit-log-table-wrap .audit-details-cell { min-width: 300px; white-space: normal; line-height: 1.45; }

/* Personal default-filter editor */
.default-filter-config { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-solid); }
.default-filter-module-field, .default-filter-fields label { display: grid; gap: 6px; min-width: 0; font-weight: 650; }
.default-filter-module-field select, .default-filter-fields :is(input, select) { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface-solid); color: var(--ui-text); }
.default-filter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.default-filter-actions { display: flex; justify-content: flex-end; gap: 10px; }
.default-filter-status { margin: 0; color: var(--ui-muted); }

/* All overflow wrappers use the same truthful edge indicators. */
:is(.table-wrap, .table-responsive, .analytics-table-wrapper) {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::before,
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::after {
    content: "";
    position: sticky;
    top: 0;
    z-index: 5;
    display: block;
    width: 28px;
    height: 100%;
    pointer-events: none;
    transition: opacity .15s ease;
}
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::before { left: 0; float: left; margin-right: -28px; background: linear-gradient(to right, var(--ui-surface-solid), transparent); }
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::after { right: 0; float: right; margin-left: -28px; background: linear-gradient(to left, var(--ui-surface-solid), transparent); }
:is(.table-wrap, .table-responsive, .analytics-table-wrapper).is-at-start::before,
:is(.table-wrap, .table-responsive, .analytics-table-wrapper).is-at-end::after { opacity: 0; }

/* Keep the record identifier visible while wide tables scroll horizontally. */
body:not(.landing-page) :where(
    .table-wrapper,
    .table-wrap,
    .table-responsive,
    .table-container,
    .budget-table-wrapper,
    .items-table-wrapper,
    .forecast-table-wrapper,
    .report-table-wrapper,
    .analytics-table-wrapper
) > table :is(th, td):first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 1px 0 0 var(--ui-border);
}

body:not(.landing-page) :where(
    .table-wrapper,
    .table-wrap,
    .table-responsive,
    .table-container,
    .budget-table-wrapper,
    .items-table-wrapper,
    .forecast-table-wrapper,
    .report-table-wrapper,
    .analytics-table-wrapper
) > table td:first-child:not([colspan]) {
    background-color: var(--ui-surface-solid);
}

body:not(.landing-page) :where(
    .table-wrapper,
    .table-wrap,
    .table-responsive,
    .table-container,
    .budget-table-wrapper,
    .items-table-wrapper,
    .forecast-table-wrapper,
    .report-table-wrapper,
    .analytics-table-wrapper
) > table th:first-child {
    z-index: 4;
}

.finance-page .report-table-wrapper .total-row td:first-child,
.finance-page .report-table-wrapper .sub-total-row td:first-child {
    background-color: inherit;
}

/* Export previews represent the exported document and must not pin cells. */
.reports-page .report-preview .table-wrap > table :is(th, td):first-child {
    position: static;
    box-shadow: none;
}

.pfims-empty-table-cell {
    padding: 20px !important;
    color: var(--ui-muted) !important;
    text-align: center !important;
}

/* Separate major content groups without adding a rule below filter panels. */
.dashboard-tab-panel > :is(.chart-grid, .project-panel),
.reports-page .main-content > .history-panel {
    position: relative;
}

.dashboard-tab-panel > :is(.chart-grid, .project-panel)::before,
.reports-page .main-content > .history-panel::before {
    content: '';
    position: absolute;
    top: -11px;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--ui-border, #e2e8f0);
    pointer-events: none;
}

@media (max-width: 1024px) {
    :where(.main-content, main) select,
    :where(.main-content, main) .pfims-select,
    :where(.main-content, main) .pfims-select-trigger {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .pfims-select-options,
    .pfims-search-suggestions {
        width: min(100%, calc(100vw - 24px));
        min-width: 0;
        max-width: calc(100vw - 24px);
        max-height: min(45vh, 320px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .pfims-select-option,
    .pfims-search-suggestions button {
        height: auto !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
    .sidebar nav ul li > a,
    .sidebar .bottom-nav ul li > :is(a, button) {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

@media (max-width: 700px) {
    .pfims-sticky-filter { top: 64px; }
    .pfims-filter-heading { flex-wrap: wrap; }
    .pfims-filter-heading > .pfims-reset-defaults {
        width: 100% !important;
        margin: 8px 0 0 !important;
    }
    .default-filter-actions { align-items: stretch; flex-direction: column-reverse; }
    .default-filter-actions > * { width: 100%; }
}

html[data-theme="dark"] :is(.default-filter-config, .pfims-sticky-filter) {
    border-color: #3b475a !important;
    background: #172033 !important;
}
html[data-theme="dark"] .audit-action-create { background: #14532d; color: #dcfce7; }
html[data-theme="dark"] .audit-action-update { background: #1e3a8a; color: #dbeafe; }
html[data-theme="dark"] .audit-action-delete { background: #7f1d1d; color: #fee2e2; }
html[data-theme="dark"] .audit-action-import { background: #14532d; color: #dcfce7; }
html[data-theme="dark"] .audit-action-export { background: #1e3a8a; color: #dbeafe; }

@keyframes pfims-spinner {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pfims-page-spinner { animation-duration: 1.5s; }
}
.pfims-row-action {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.pfims-row-action:hover {
    background: var(--ui-accent-soft);
}
.pfims-row-action img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .75;
}
.pfims-row-action:hover img {
    opacity: 1;
}
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.top-header a[href*="notification"] span:not(.pfims-notification-count),
header a[href*="notification"] span:not(.pfims-notification-count) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}
/* Shared filter component: Projects layout with the Dashboard clear action. */
.pfims-filter-panel {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
    margin: 18px 0 20px !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(20, 35, 50, .04) !important;
}

.pfims-filter-panel .pfims-filter-field {
    display: flex !important;
    min-width: 0;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    color: #4b5563 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
}

#tabCash .pfims-filter-panel {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

.pfims-filter-panel .pfims-filter-search {
    grid-column: span 2;
}

.pfims-filter-panel .pfims-filter-field > :is(input, select),
.pfims-filter-panel > :is(input, select) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    outline: none;
    background: #fff !important;
    color: #1f2937 !important;
    font: inherit !important;
}

.pfims-filter-panel .pfims-filter-field > :is(input, select):focus,
.pfims-filter-panel > :is(input, select):focus {
    border-color: #e19a45 !important;
    box-shadow: 0 0 0 3px rgba(225, 154, 69, .14) !important;
}

.pfims-filter-panel .pfims-clear-filters {
    display: inline-flex !important;
    width: auto !important;
    min-width: 104px !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none !important;
}

.pfims-filter-panel .pfims-clear-filters:hover {
    border-color: #e19a45 !important;
    background: #f8fafc !important;
    color: #1f2937 !important;
}

html[data-theme="dark"] .pfims-filter-panel {
    border-color: #354150 !important;
    background: #1d2733 !important;
}

html[data-theme="dark"] .pfims-filter-panel .pfims-filter-field {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .pfims-filter-panel .pfims-filter-field > :is(input, select),
html[data-theme="dark"] .pfims-filter-panel > :is(input, select),
html[data-theme="dark"] .pfims-filter-panel .pfims-clear-filters {
    border-color: #465465 !important;
    background: #253140 !important;
    color: #e5e7eb !important;
}

@media (max-width: 1024px) {
    .pfims-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .pfims-filter-panel {
        grid-template-columns: 1fr !important;
    }

    .pfims-filter-panel .pfims-clear-filters {
        width: 100% !important;
    }

    .pfims-filter-panel .pfims-filter-search {
        grid-column: auto;
    }
}

/* Shared compact actions: icon-only at rest, full label on hover/focus. */
:is(button, a).pfims-expand-action[data-icon-label] {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    vertical-align: middle;
    transition: gap .18s ease, padding .18s ease, box-shadow .18s ease !important;
}

.pfims-expand-action .button-icon {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    align-items: center;
    justify-content: center;
}

.pfims-expand-action .button-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pfims-expand-action .button-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    font-size: .82rem !important;
    line-height: 1.1;
    transition: max-width .22s ease, opacity .14s ease !important;
}

:is(button, a).pfims-expand-action:hover,
:is(button, a).pfims-expand-action:focus-visible {
    gap: 7px !important;
    padding-inline: 11px !important;
}

.pfims-expand-action:hover .button-label,
.pfims-expand-action:focus-visible .button-label {
    max-width: 220px;
    opacity: 1;
}

/* Shared filter heading and project-filter removal contract. */
.pfims-filter-heading {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100%;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.pfims-filter-heading .pfims-filter-subtitle,
.pfims-filter-heading p {
    margin: 0 !important;
}

.pfims-filter-heading > .pfims-clear-filters {
    flex: 0 0 auto;
    margin-left: auto !important;
}

.pfims-filter-panel [aria-hidden="true"][hidden] {
    display: none !important;
}

.dashboard-period-filter {
    display: inline-flex;
    align-self: end;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    background: var(--ui-bg);
}

.dashboard-period-filter button {
    min-height: 34px !important;
    padding: 7px 13px !important;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-muted);
    font-weight: 700;
    cursor: pointer;
}

.dashboard-period-filter button.active {
    background: var(--ui-sidebar-2);
    color: #fff;
}

html[data-theme="dark"] .dashboard-period-filter {
    border-color: #46546a;
    background: #111827;
}

.finance-page .modal-body > [hidden] { display: none !important; }

.pfims-review-panel h3 { margin: 0 0 4px; color: var(--ui-text, #172033); }
.pfims-review-panel > p { margin: 0 0 14px; color: var(--ui-muted, #64748b); }
.pfims-review-list { display: grid; gap: 8px; }
.pfims-review-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: 8px;
    background: #faf8f5;
}
.pfims-review-item span { color: var(--ui-muted, #64748b); }
.pfims-review-item strong { color: var(--ui-text, #172033); text-align: right; overflow-wrap: anywhere; }

html[data-theme="dark"] .finance-page .pfims-finance-stepper {
    border-bottom-color: #2c3749;
    background: #111827;
}
html[data-theme="dark"] .finance-page .pfims-finance-stepper .step.active {
    color: #f8fafc;
}
html[data-theme="dark"] .pfims-review-item {
    border-color: #334155;
    background: #172033;
}
html[data-theme="dark"] .finance-page .pfims-review-list {
    border-left-color: #e19a45;
    background: #111827;
}

@media (max-width: 640px) {
    .finance-page .pfims-add-modal .modal-container {
        width: calc(100% - 24px) !important;
        padding: 22px 18px !important;
    }
}

/* One KPI card contract with a top accent. */
body:not(.landing-page) :where(
    .kpi-card,
    .stat-card,
    .stat-card-inv,
    .stat-card-proj,
    .stat-card-supplier,
    .stat-mini,
    .summary-card,
    .metric-card,
    .overview-card
) {
    border: 1px solid rgba(226, 232, 240, .9) !important;
}

body:not(.landing-page) :where(
    .kpi-card,
    .stat-card,
    .stat-card-inv,
    .stat-card-proj,
    .stat-card-supplier,
    .stat-mini,
    .summary-card,
    .metric-card,
    .overview-card
)::before {
    display: block !important;
    position: absolute !important;
    content: "" !important;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    height: 4px !important;
    border: 0 !important;
    background: linear-gradient(90deg, var(--ui-accent, #f08a1a), #f4bd62) !important;
}

html[data-theme="dark"] body:not(.landing-page) :where(
    .kpi-card,
    .stat-card,
    .stat-card-inv,
    .stat-card-proj,
    .stat-card-supplier,
    .stat-mini,
    .summary-card,
    .metric-card,
    .overview-card
) {
    border-color: #2c3749 !important;
}

/* Dashboard pagination is the final visual and sizing standard everywhere. */
body:not(.landing-page) .pagination-wrapper {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin: 15px 0 0 !important;
    padding: 15px 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.landing-page) .pagination-wrapper .rows-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--ui-muted) !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
}

body:not(.landing-page) .pagination-wrapper .rows-info select {
    box-sizing: border-box !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #475569 !important;
    font: 400 .85rem/1.2 inherit !important;
    box-shadow: none !important;
}

body:not(.landing-page) .pagination-wrapper .pagination-links {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body:not(.landing-page) .pagination-wrapper .pagination-links :where(a, button) {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Flat system surfaces: no page, section, card, control, or pseudo-element shadows. */
body:not(.landing-page),
body:not(.landing-page) *,
body:not(.landing-page) *::before,
body:not(.landing-page) *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

.dashboard-page .dashboard-period-filter {
    box-sizing: border-box;
    display: grid !important;
    width: 100% !important;
    min-width: 250px;
    max-width: 100%;
    grid-column: span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-page .dashboard-period-filter button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px !important;
    white-space: nowrap;
}

/* Compact filter panels by approximately 25px without compressing their labels. */
.pfims-filter-panel {
    gap: 8px 12px !important;
    padding: 8px 12px !important;
}

.pfims-filter-panel .pfims-filter-field {
    gap: 4px !important;
}

.pfims-filter-panel .pfims-filter-field > :is(input, select),
.pfims-filter-panel > :is(input, select),
.pfims-filter-panel .pfims-clear-filters {
    min-height: 34px !important;
    height: 34px !important;
    padding-block: 5px !important;
}

/* Every authenticated page receives the same unboxed Philippine header clock. */
.top-header .right .header-clock {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
}

.top-header .right .header-clock-date {
    font-weight: 400 !important;
}

.top-header .right .header-clock-time {
    color: inherit !important;
    font: inherit;
    font-weight: 800 !important;
    margin-left: 0.35rem;
}

html[data-theme="dark"] .top-header .right .header-clock {
    color: #f8fafc !important;
}

/* -------------------------------------------------------------------------
   Responsive system contract

   This is intentionally the final section in the shared stylesheet. Every
   authenticated portal imports ui-refresh.css after its module stylesheet,
   so these rules provide one responsive contract for legacy and centralized
   screens alike without changing page markup or application behavior.
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body:not(.landing-page) {
    min-width: 320px;
    overflow-x: hidden;
}

body:not(.landing-page) :where(
    .main-content,
    .main-content > *,
    .panel,
    .card,
    .content-card,
    .chart-card,
    .chart-panel,
    .table-wrapper,
    .table-wrap,
    .table-container,
    .form-wrapper,
    .settings-wrapper,
    .settings-content,
    .profile-card
) {
    min-width: 0;
    max-width: 100%;
}

body:not(.landing-page) :where(img, svg, video) {
    max-width: 100%;
}

body:not(.landing-page) :where(canvas) {
    display: block;
    max-width: 100%;
}

body:not(.landing-page) :where(button, input, select, textarea, [role="button"]) {
    max-width: 100%;
    touch-action: manipulation;
}

/* The module pages use flex bodies. At tablet width the navigation becomes a
   full-width row, then the content follows it in normal document flow. */
@media (max-width: 1024px) {
    body:not(.landing-page) {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 72px !important;
    }

    /* The predictive dashboard keeps a legacy 20px body inset. Its shared
       header/sidebar shell should span the viewport like every other module;
       the content container supplies its own responsive horizontal padding. */
    body.analytics-module-page {
        padding-inline: 0 !important;
    }

    body:not(.landing-page) .sidebar {
        position: relative !important;
        inset: auto !important;
        z-index: 10;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        padding: 10px 12px !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 0 !important;
    }

    body:not(.landing-page) .sidebar-collapse-toggle {
        display: none !important;
    }

    body:not(.landing-page) .sidebar nav {
        width: 100%;
        margin: 0 !important;
    }

    body:not(.landing-page) .sidebar nav ul,
    body:not(.landing-page) .sidebar .bottom-nav ul {
        display: flex !important;
        width: 100%;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body:not(.landing-page) .sidebar nav ul li,
    body:not(.landing-page) .sidebar .bottom-nav ul li {
        min-width: 120px;
        flex: 1 1 140px !important;
        margin: 0 !important;
    }

    body:not(.landing-page) .sidebar nav ul li > a,
    body:not(.landing-page) .sidebar .bottom-nav ul li > :is(a, button) {
        min-height: 44px !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
    }

    /* The older tablet rule hides link labels. Restore them so text-only
       navigation used by the shared header remains usable and accessible. */
    body:not(.landing-page) .sidebar nav ul li > a,
    body:not(.landing-page) .sidebar .bottom-nav ul li > :is(a, button) {
        color: rgba(255, 255, 255, .86) !important;
        font-size: .72rem !important;
    }

    body:not(.landing-page) .sidebar nav ul li > a .nav-link-icon,
    body:not(.landing-page) .sidebar .bottom-nav .nav-icon {
        display: inline-block !important;
        margin: 0 5px 0 0 !important;
    }

    /* The legacy <=900px icon-only rule also matches submenu anchors. Keep
       open module menus readable, compact, and inside their parent item. */
    body:not(.landing-page) .sidebar li.nav-parent > .nav-dropdown {
        display: none;
        height: 0;
        overflow: hidden;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown {
        display: grid;
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 4px 0 2px;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown a {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        overflow: hidden;
        color: rgba(255, 255, 255, .86) !important;
        font-size: .9rem !important;
        line-height: 1.25 !important;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown a.active {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(240, 138, 26, .95), rgba(212, 112, 8, .92)) !important;
    }

    body:not(.landing-page) .sidebar .bottom-nav {
        width: 100%;
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    body:not(.landing-page) .main-content,
    body.dashboard-page > .main-content,
    body.reports-page .main-content,
    html.sidebar-collapsed body.dashboard-page > .main-content,
    html.sidebar-collapsed .reports-page .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        margin-left: 0 !important;
        padding: 26px clamp(16px, 3vw, 30px) 42px !important;
    }

    .top-header {
        padding-inline: clamp(16px, 3vw, 28px) !important;
    }

    :where(.filters, .filters-grid, .filters-bar, .history-filters, .choice-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    :where(.kpis, .kpi-grid, .stats-grid-proj, .stats-grid-supplier, .stats-grid, .overview-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Shared heading/action wrapping prevents long titles and buttons from
   forcing a horizontal page scroll on narrow tablets. */
:where(
    .page-header,
    .page-heading,
    .page-header-with-btn,
    .dashboard-page-header,
    .dashboard-heading-actions,
    .profile-actions,
    .page-actions,
    .panel-heading,
    .card-header,
    .section-header,
    .dialog-heading,
    .dialog-actions,
    .filters-bar,
    .filter-row,
    .filter-actions,
    .form-actions,
    .search-bar-wrapper,
    .search-bar,
    .toolbar
) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

:where(
    .page-header,
    .page-heading,
    .page-header-with-btn,
    .dashboard-page-header,
    .dashboard-heading-actions,
    .profile-actions,
    .page-actions,
    .panel-heading,
    .card-header,
    .section-header,
    .dialog-heading,
    .dialog-actions,
    .filters-bar,
    .filter-row,
    .filter-actions,
    .form-actions,
    .search-bar-wrapper,
    .search-bar,
    .toolbar
) > * {
    min-width: 0;
    max-width: 100%;
}

:where(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header) h1,
:where(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header) h2,
:where(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header) p {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* All data surfaces scroll within themselves; the page itself never widens. */
:where(
    .table-wrapper,
    .table-wrap,
    .table-container,
    .budget-table-wrapper,
    .items-table-wrapper,
    .forecast-table-wrapper,
    .report-table-wrapper,
    .analytics-table-wrapper
) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

:where(
    .table-wrapper,
    .table-wrap,
    .table-container,
    .budget-table-wrapper,
    .items-table-wrapper,
    .forecast-table-wrapper,
    .report-table-wrapper,
    .analytics-table-wrapper
) > table {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

:where(table th, table td) {
    vertical-align: middle;
}

/* Keep all chart variants contained by their card at every viewport. */
:where(
    .chart,
    .chart-card,
    .chart-panel,
    .chart-box,
    .chart-container,
    .chart-wrapper,
    .graph-container,
    .graph-wrapper,
    .canvas-container,
    .project-chart-card,
    .project-analytics
) {
    min-width: 0;
    max-width: 100%;
}

:where(.chart canvas, .chart-card canvas, .chart-panel canvas, .chart-box canvas, .chart-container canvas, .chart-wrapper canvas) {
    width: 100% !important;
    max-width: 100% !important;
}

.chart-grid.single-chart {
    grid-template-columns: minmax(0, 1fr) !important;
}

.chart-grid.single-chart > .chart-card {
    grid-column: 1 / -1;
}

/* Consistent minimums keep KPI and analytics grids from producing clipped
   cards while retaining a useful two-column tablet layout. */
:where(
    .kpis,
    .kpi-grid,
    .stats-grid-proj,
    .stats-grid-supplier,
    .stats-grid,
    .overview-grid,
    .chart-grid,
    .chart-layout,
    .module-insights,
    .analytics-grid,
    .project-snapshot-grid,
    .model-status-grid,
    .model-detail-grid,
    .detail-grid
) {
    min-width: 0;
}

/* Form rows and filter controls collapse naturally instead of preserving
   legacy 150-350px child widths. */
:where(.filter-row, .filters-bar, .history-filters, .form-row, .form-grid, .form-actions) > * {
    min-width: 0;
    max-width: 100%;
}

:where(form, .form-group, .filter-control, .project-filter-field, .pfims-filter-field) {
    min-width: 0;
    max-width: 100%;
}

:where(form, .form-group, .filter-control, .project-filter-field, .pfims-filter-field) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    input[type="file"]
) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Dialogs honor the viewport even when a module supplies an inline desktop
   width. Their body remains independently scrollable for long forms. */
:where(.modal-overlay, .overlay, .dialog-overlay) {
    box-sizing: border-box;
    padding: clamp(12px, 3vw, 32px) !important;
    overflow-y: auto;
}

:where(.modal-container, .dialog, .dialog-container) {
    box-sizing: border-box;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

:where(.modal-container, .dialog, .dialog-container) :where(.modal-header, .modal-body, .modal-footer, .dialog-heading, .dialog-actions) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

:where(.modal-header, .modal-footer, .dialog-actions) {
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    body:not(.landing-page) {
        padding-top: 64px !important;
    }

    .top-header {
        min-height: 64px;
        height: 64px !important;
        gap: 8px;
        padding: 10px 12px !important;
        flex-wrap: nowrap !important;
        overflow: hidden;
    }

    .top-header .left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 9px;
    }

    .top-header .left img {
        width: 36px !important;
        height: 36px !important;
    }

    .top-header .left .brand-text {
        min-width: 0;
        overflow: hidden;
        font-size: .92rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-header .left .brand-text small {
        display: none !important;
    }

    .top-header .right {
        min-width: 0;
        margin-left: auto;
        gap: 4px !important;
    }

    .top-header .right .header-clock {
        display: none !important;
    }

    .top-header .right > a {
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
        padding: 6px !important;
    }

    .top-header .right > a:first-child > span:not(.notif-badge):not(.pfims-notification-count),
    .top-header .right > a:last-child > span:not(.notif-badge):not(.pfims-notification-count) {
        display: none !important;
    }

    .top-header .right .header-clock {
        max-width: 100%;
        overflow: hidden;
        font-size: .7rem !important;
        text-overflow: ellipsis;
    }

    body:not(.landing-page) .sidebar {
        padding: 8px !important;
    }

    body:not(.landing-page) .sidebar nav ul,
    body:not(.landing-page) .sidebar .bottom-nav ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px !important;
    }

    body:not(.landing-page) .sidebar nav ul li,
    body:not(.landing-page) .sidebar .bottom-nav ul li {
        min-width: 0;
        width: auto !important;
        flex: none !important;
    }

    body:not(.landing-page) .sidebar nav ul li > a,
    body:not(.landing-page) .sidebar .bottom-nav ul li > :is(a, button) {
        min-height: 42px !important;
        padding: 8px 6px !important;
        font-size: .68rem !important;
        line-height: 1.2;
    }

    body:not(.landing-page) .main-content,
    body.dashboard-page > .main-content,
    body.reports-page .main-content,
    html.sidebar-collapsed body.dashboard-page > .main-content,
    html.sidebar-collapsed .reports-page .main-content {
        padding: 20px 12px 32px !important;
    }

    :where(.filters, .filters-grid, .filters-bar, .history-filters, .choice-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.kpis, .kpi-grid, .stats-grid-proj, .stats-grid-supplier, .stats-grid, .overview-grid, .chart-grid, .chart-layout, .module-insights) {
        grid-template-columns: 1fr !important;
    }

    :where(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header, .panel-heading, .card-header, .section-header) {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    :where(.page-actions, .dashboard-heading-actions, .profile-actions, .dialog-actions, .form-actions) {
        width: 100%;
        align-items: stretch !important;
        flex-direction: column;
    }

    :where(.page-actions, .dashboard-heading-actions, .profile-actions, .dialog-actions, .form-actions) > :is(button, a, .btn) {
        width: 100%;
        min-width: 0;
    }

    :where(.filter-row, .filters-bar, .history-filters, .form-row) {
        gap: 8px !important;
    }

    :where(.filter-row, .filters-bar, .history-filters, .form-row) > * {
        flex: 1 1 100% !important;
        width: 100%;
    }

    :where(.modal-footer, .dialog-actions) {
        align-items: stretch !important;
        flex-direction: column;
    }

    :where(.modal-footer, .dialog-actions) > :is(button, a, .btn) {
        width: 100%;
        min-width: 0;
    }

    :where(button, [role="button"], .btn, .pfims-row-action) {
        min-height: 42px !important;
    }

    .pfims-row-action {
        width: 42px;
        min-width: 42px;
    }

    :where(.pagination-wrapper .rows-info, .pagination-wrapper .pagination-links) {
        width: 100%;
        justify-content: center !important;
    }

    .pagination-wrapper .pagination-links {
        gap: 4px !important;
    }

    :where(.pagination-wrapper .pagination-links a, .pagination-wrapper .pagination-links button) {
        min-width: 38px !important;
        min-height: 38px !important;
        padding-inline: 9px !important;
    }
}

@media (max-width: 420px) {
    :where(.filters, .filters-grid, .filters-bar, .history-filters, .choice-grid) {
        grid-template-columns: 1fr !important;
    }

    .top-header .right .header-clock {
        display: none !important;
    }

    :where(.panel, .card, .content-card, .chart-card, .chart-panel, .profile-card, .table-wrapper) {
        border-radius: 14px !important;
    }

    :where(.panel, .card, .content-card, .chart-card, .chart-panel, .profile-card) {
        padding: 14px !important;
    }

    .modal-container {
        width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Additional module-specific grid and tab names share the same responsive
   behavior as their generic counterparts above. */
@media (max-width: 1024px) {
    :where(.charts-grid, .insight-pie-layout, .budget-detail-grid, .detail-grid, .view-details-grid, .project-details-grid, .stats-grid-inv) {
        min-width: 0;
        max-width: 100%;
    }

    :where(.charts-grid, .insight-pie-layout, .budget-detail-grid, .detail-grid, .view-details-grid, .project-details-grid, .stats-grid-inv) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.analytics-toolbar, .header-actions, .tab-actions, .notif-actions, .expense-file-actions, .budget-filter-row) {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 700px) {
    /* The centralized dashboard's panel is named `.filters` in the current
       view; keep the explicit `.dashboard-filter-panel` alias covered for
       role-specific variants that use that name. */
    :where(.dashboard-page .filters, .dashboard-page .dashboard-filter-panel) {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    :where(.dashboard-page .filters, .dashboard-page .dashboard-filter-panel) > :where(
        .filter-heading,
        .dashboard-filter-heading,
        .dashboard-filter-header,
        .filters-heading,
        .pfims-filter-heading
    ) {
        grid-column: 1 / -1 !important;
        min-width: 0;
        width: 100%;
    }

    /* JavaScript may move the clear action into this heading. Stack the
       subtitle and action so the heading never becomes a narrow side column. */
    .dashboard-page .pfims-filter-heading,
    .dashboard-page .filter-heading,
    .dashboard-page .dashboard-filter-heading,
    .dashboard-page .dashboard-filter-header,
    .dashboard-page .filters-heading {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
        grid-column: 1 / -1 !important;
    }

    .dashboard-page .pfims-filter-heading > .pfims-clear-filters,
    .dashboard-page .pfims-filter-heading > #clear,
    .dashboard-page .filter-heading > .pfims-clear-filters,
    .dashboard-page .filter-heading > #clear,
    .dashboard-page .dashboard-filter-heading > .pfims-clear-filters,
    .dashboard-page .dashboard-filter-heading > #clear,
    .dashboard-page .dashboard-filter-header > .pfims-clear-filters,
    .dashboard-page .dashboard-filter-header > #clear,
    .dashboard-page .filters-heading > .pfims-clear-filters,
    .dashboard-page .filters-heading > #clear {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    :where(.dashboard-page .filters, .dashboard-page .dashboard-filter-panel) > :where(
        label,
        .filter-control,
        .dashboard-filter-field,
        .dashboard-period-filter,
        button
    ) {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    :where(.dashboard-page .filters, .dashboard-page .dashboard-filter-panel) > :where(label, .filter-control, .dashboard-filter-field) {
        grid-column: 1 / -1 !important;
    }

    :where(.dashboard-page .filters, .dashboard-page .dashboard-filter-panel) > :where(label, .filter-control, .dashboard-filter-field) :where(input, select) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .dashboard-page .dashboard-period-filter {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 42px !important;
    }

    .dashboard-page .dashboard-period-filter button,
    .dashboard-page #clear,
    .dashboard-page .dashboard-filter-panel button {
        min-height: 42px !important;
    }

    .dashboard-page #clear {
        width: 100% !important;
        min-width: 0 !important;
    }

    :where(.charts-grid, .insight-pie-layout, .budget-detail-grid, .detail-grid, .view-details-grid, .project-details-grid, .stats-grid-inv, .settings-wrapper, .choice-grid, .form-row-three) {
        grid-template-columns: 1fr !important;
    }

    :where(.filter-tabs, .notif-tabs, .config-tabs, .dashboard-tabs, .report-tabs) {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    :where(.filter-tabs, .notif-tabs, .config-tabs, .dashboard-tabs, .report-tabs) > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Report tabs are generated after load and can contain several long labels.
       Keep each control intact and scroll only the tab strip, never the page. */
    .reports-page .report-tabs {
        min-width: 0;
        max-width: 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }

    .reports-page .report-tabs .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    :where(.analytics-toolbar, .header-actions, .tab-actions, .notif-actions, .expense-file-actions, .budget-filter-row) {
        width: 100%;
        align-items: stretch !important;
        flex-direction: column;
    }

    :where(.analytics-toolbar, .header-actions, .tab-actions, .notif-actions, .expense-file-actions, .budget-filter-row) > :is(button, a, .btn) {
        width: 100%;
        min-width: 0;
    }
}

/* Centralized dashboards use a prefixed modal, while legacy modules use the
   shared modal-overlay contract. Keep both dialog implementations viewport
   safe and give the less-common table-responsive wrapper the same behavior. */
:where(.dashboard-modal, .dashboard-modal-dialog) {
    min-width: 0;
    max-width: 100%;
}

.dashboard-modal {
    box-sizing: border-box;
    padding: clamp(12px, 3vw, 32px) !important;
    overflow-y: auto;
}

.dashboard-modal-dialog {
    box-sizing: border-box;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden;
    overflow-y: auto;
}

:where(.dashboard-modal-header, .dashboard-modal-footer) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

:where(.table-responsive, .table-responsive > table) {
    min-width: 0;
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
    width: max-content;
    min-width: 100%;
}

@media (max-width: 700px) {
    .dashboard-modal-dialog {
        width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    :where(.dashboard-modal-footer) {
        align-items: stretch !important;
        flex-direction: column;
    }

    :where(.dashboard-modal-footer) > :is(button, a, .btn) {
        width: 100%;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------
   Desktop density contract

   Laptop and desktop screens intentionally match the proportions of the
   application at 75% browser zoom. CSS zoom recalculates layout, so the page
   continues to fill the available viewport without counter-scaling its width
   or height. Tablet and mobile layouts keep their existing native sizing.
   ------------------------------------------------------------------------- */
:root {
    --pfims-desktop-scale: 75%;
}

@media (min-width: 1025px) {
    /* Viewport units are resolved before body zoom is painted. Compensate the
       fixed sidebar's height only, so its rendered bottom reaches the viewport
       while the rest of the desktop layout keeps the shared 75% density. */
    body:not(.landing-page) .sidebar {
        position: fixed !important;
        inset: 72px auto auto 0 !important;
        height: calc(133.333333vh - 72px) !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    body {
        zoom: var(--pfims-desktop-scale);
    }

    body:not(.landing-page) .main-content {
        width: calc(100% - 248px) !important;
        max-width: none !important;
    }

    html.sidebar-collapsed body:not(.landing-page) .main-content {
        width: calc(100% - 76px) !important;
        max-width: none !important;
    }
}

/* Final dark-theme control contract: module styles must not restore light surfaces. */
html[data-theme="dark"] :where(
    .filter-tabs,
    .filter-tabs .tab,
    .tabs .tab,
    .tabs button,
    .pfims-column-chooser > summary,
    .pagination-wrapper select,
    .rows-info select,
    select
) {
    border-color: #46546a !important;
    background: #172033 !important;
    background-color: #172033 !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] body:not(.landing-page) .pagination-wrapper .rows-info select {
    border-color: #46546a !important;
    background: #172033 !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] :where(.filter-tabs .tab.active, .tabs .tab.active, .tabs button.active) {
    border-color: #e19a45 !important;
    background: #25344a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(.settings-menu li.active, .settings-nav li.active, .settings-sidebar li.active) {
    background: #25344a !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    .btn-new-project,
    .btn-add-item,
    .btn-add-transaction,
    .btn-add-supplier,
    .btn-primary,
    .analytics-button
) {
    border-color: #e19a45 !important;
    background: #e19a45 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] :where(
    .pfims-generated-details-modal .modal-container,
    .pfims-generated-details-modal .modal-header,
    .pfims-generated-details-modal .modal-body,
    .pfims-generated-details-modal .modal-footer,
    .pfims-generated-details-modal .view-item
) {
    border-color: #2c3749 !important;
    background: #111827 !important;
    color: #edf2f7 !important;
}

/* Settings Add actions use the shared orange accent. */
body .btn-add-user {
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-dark)) !important;
    color: #fff !important;
    border-color: var(--ui-accent) !important;
    box-shadow: 0 6px 14px rgba(240, 138, 26, 0.18) !important;
}

html[data-theme="dark"] body.inventory-page :is(.btn-add-item, .btn-add-transaction),
html[data-theme="dark"] body.suppliers-page .btn-add-supplier {
    background: #f8fafc !important;
    color: #111827 !important;
    border-color: #f8fafc !important;
}

html[data-theme="dark"] body.inventory-page :is(.btn-add-item, .btn-add-transaction):hover,
html[data-theme="dark"] body.suppliers-page .btn-add-supplier:hover {
    background: #e2e8f0 !important;
}

/* Final responsive drawer contract. This block intentionally comes after
   every legacy responsive rule so the mobile drawer cannot be converted back
   into the old horizontal sidebar by an earlier max-width cascade. */
@media (max-width: 1024px) {
    body:not(.landing-page) .sidebar {
        position: fixed !important;
        z-index: 1200 !important;
        top: 72px !important;
        left: 0 !important;
        width: 50vw !important;
        height: calc(100dvh - 72px) !important;
        max-height: calc(100dvh - 72px) !important;
        flex-wrap: nowrap !important;
        padding: 18px 14px !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translateX(-100%) !important;
        transition: transform 0.24s ease !important;
    }

    /* Keep every navigation action in one vertical scroll flow. Settings and
       Logout follow the modules instead of remaining pinned to the viewport. */
    body:not(.landing-page) .sidebar nav {
        min-width: 0 !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    body:not(.landing-page) .sidebar .bottom-nav {
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-top: 8px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body:not(.landing-page) .sidebar :where(nav, .bottom-nav, ul, li, a, form, button) {
        max-width: 100% !important;
    }

    html.mobile-nav-open body:not(.landing-page) .sidebar {
        transform: translateX(0) !important;
    }

    body:not(.landing-page) .sidebar-collapse-toggle {
        display: none !important;
    }

    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        z-index: 1190;
        inset: 72px 0 0;
        background: rgba(15, 23, 42, 0.42);
        opacity: 1;
        transition: opacity 0.24s ease;
    }

    html:not(.mobile-nav-open) .mobile-nav-backdrop {
        opacity: 0;
        pointer-events: none;
    }

    .mobile-nav-toggle {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px;
        border: 1px solid rgba(71, 85, 105, .18) !important;
        border-radius: 10px;
        background: rgba(15, 23, 42, .035) !important;
        color: #475569 !important;
        box-shadow: none;
        cursor: pointer;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus-visible {
        border-color: rgba(240, 138, 26, .36) !important;
        background: rgba(240, 138, 26, .08) !important;
        color: #c76b0a !important;
    }

    .mobile-nav-toggle:focus-visible {
        outline: 2px solid rgba(240, 138, 26, .28);
        outline-offset: 2px;
    }

    html[data-theme="dark"] .mobile-nav-toggle {
        border-color: rgba(255, 255, 255, .14) !important;
        background: rgba(255, 255, 255, .045) !important;
        color: #dbe5f3 !important;
    }

    html.sidebar-collapsed body:not(.landing-page) .sidebar {
        width: 50vw !important;
        padding-inline: 14px !important;
    }

    html.sidebar-collapsed body:not(.landing-page) .sidebar nav a,
    html.sidebar-collapsed body:not(.landing-page) .sidebar .bottom-nav :where(a, button) {
        justify-content: flex-start !important;
        gap: 12px !important;
        color: inherit !important;
        font-size: inherit !important;
    }

    body:not(.landing-page) .sidebar nav {
        margin-top: 0 !important;
    }

    body:not(.landing-page) .sidebar nav ul,
    body:not(.landing-page) .sidebar .bottom-nav ul {
        display: block !important;
    }

    body:not(.landing-page) .sidebar nav ul li,
    body:not(.landing-page) .sidebar .bottom-nav ul li {
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
    }

    body:not(.landing-page) .sidebar nav ul li a,
    body:not(.landing-page) .sidebar .bottom-nav ul li a,
    body:not(.landing-page) .sidebar .bottom-nav ul li button {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px !important;
        font-size: inherit !important;
        color: inherit !important;
        padding: 12px 14px !important;
    }

    body:not(.landing-page) .sidebar nav ul li a .nav-link-icon,
    body:not(.landing-page) .sidebar .bottom-nav .nav-icon {
        display: inline-block !important;
        margin: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 24px 18px 36px !important;
    }

    body:not(.landing-page) .sidebar .nav-dropdown {
        padding-left: 32px !important;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown {
        display: block !important;
        height: auto !important;
    }
}

@media (max-width: 700px) {
    .mobile-nav-backdrop {
        inset-block-start: 64px;
    }

    body:not(.landing-page) .sidebar {
        top: 64px !important;
        width: 75vw !important;
        height: calc(100dvh - 64px) !important;
        max-height: calc(100dvh - 64px) !important;
    }

    html.sidebar-collapsed body:not(.landing-page) .sidebar {
        width: 75vw !important;
    }
}

/* Keep the responsive drawer navigation visually consistent with Dashboard.
   This final mobile-only rule intentionally follows every legacy tablet rule
   above; desktop navigation (1025px and wider) is unchanged. */
@media (max-width: 1024px) {
    body:not(.landing-page) .sidebar nav ul li > a,
    body:not(.landing-page) .sidebar .bottom-nav ul li > :is(a, button) {
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    body:not(.landing-page) .sidebar nav ul li > a .nav-link-icon,
    body:not(.landing-page) .sidebar .bottom-nav .nav-icon {
        flex: 0 0 20px !important;
        margin: 0 !important;
    }

    body:not(.landing-page) .sidebar .nav-parent-toggle .nav-chevron {
        flex: 0 0 auto;
        margin-left: 2px !important;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown {
        padding-inline: 12px 0 !important;
    }

    body:not(.landing-page) .sidebar li.nav-parent.is-open > .nav-dropdown a {
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding-inline: 8px !important;
        text-align: center !important;
    }

    body:not(.landing-page) .sidebar .bottom-nav form,
    body:not(.landing-page) .sidebar .bottom-nav form button {
        width: 100% !important;
    }

    body:not(.landing-page) .sidebar .bottom-nav form button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    body:not(.landing-page) .config-tabs {
        justify-content: center !important;
    }

    body:not(.landing-page) .config-tab {
        text-align: center !important;
    }

    /* Mobile and tablet pages use the full viewport width. Individual cards
       keep their own internal padding, while the shared page shell no longer
       creates blank gutters down both sides of every screen. */
    body:not(.landing-page) .main-content,
    body.dashboard-page > .main-content,
    body.reports-page .main-content,
    html.sidebar-collapsed body.dashboard-page > .main-content,
    html.sidebar-collapsed .reports-page .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

/* Phone data tables preserve readable columns and scroll inside their own
   surface. Do not squeeze wide Finance and reporting tables to the viewport. */
@media (max-width: 700px) {
    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) > table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) > table :where(th, td) {
        width: auto !important;
        min-width: 132px !important;
        max-width: 280px !important;
    }

    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) > table :where(th, td):first-child {
        min-width: 220px !important;
    }

    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) > table :where(th, td):last-child {
        min-width: 88px !important;
    }

    body:not(.landing-page) :where(
        .table-wrapper,
        .table-wrap,
        .table-container,
        .budget-table-wrapper,
        .items-table-wrapper,
        .forecast-table-wrapper,
        .report-table-wrapper,
        .analytics-table-wrapper
    ) > table th {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* Phone pages keep a readable inset; page-header actions show their labels
   without the desktop icon-to-label hover expansion. */
@media (max-width: 640px) {
    body:not(.landing-page) .main-content,
    body.dashboard-page > .main-content,
    body.reports-page .main-content,
    html.sidebar-collapsed body.dashboard-page > .main-content,
    html.sidebar-collapsed .reports-page .main-content {
        padding-inline: 16px !important;
    }

    :is(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header, .report-header-actions, .header-actions, .dashboard-heading-actions)
    :is(button, a).pfims-expand-action[data-icon-label],
    :is(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header, .report-header-actions, .header-actions, .dashboard-heading-actions)
    :is(button, a).pfims-expand-action[data-icon-label]:is(:hover, :focus-visible) {
        gap: 7px !important;
        padding-inline: 11px !important;
        transition: none !important;
    }

    :is(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header, .report-header-actions, .header-actions, .dashboard-heading-actions)
    .pfims-expand-action .button-label,
    :is(.page-header, .page-heading, .page-header-with-btn, .dashboard-page-header, .report-header-actions, .header-actions, .dashboard-heading-actions)
    .pfims-expand-action:is(:hover, :focus-visible) .button-label {
        max-width: none !important;
        opacity: 1 !important;
        font-size: .82rem !important;
        transition: none !important;
    }
}

#equipmentDetailModal table { border-collapse: separate; border-spacing: 0; min-width: 1000px; table-layout: auto !important; }
#equipmentDetailModal th, #equipmentDetailModal td { min-width: 130px; }
#equipmentDetailModal :is(th,td):first-child { min-width: 180px; background: var(--ui-surface-solid) !important; }
#equipmentDetailModal th:first-child { background: var(--ui-bg) !important; }
#equipmentDetailModal :is(th, td):last-child { min-width: 170px; width: 170px; white-space: nowrap; }
#equipmentDetailBody :is(.btn-edit-project, .btn-delete) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 68px;
    height: 34px;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    border: 0;
    cursor: pointer;
    font: inherit;
}

#bondTable { table-layout: auto !important; min-width: 950px !important; }
#bondTable :is(th, td) { min-width: 120px; }
#bondTable :is(th, td):first-child, #bondTable :is(th, td):nth-child(3) { min-width: 220px; }

.reports-page .filter-panel { padding: 16px !important; height: auto !important; min-height: 0; }
.reports-page #reportFiltersGrid.pfims-filter-panel { padding: 16px !important; margin: 0 !important; gap: 16px !important; }
#viewSupplierModal .modal-footer { display: flex; gap: 8px; }
#viewSupplierModal .modal-footer .btn-cancel { margin-right: auto; }
#viewSupplierModal .modal-footer :is(.btn-edit-project, .btn-delete) { margin: 0 !important; }
.pfims-notification-count { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: var(--ui-danger); color: white !important; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pfims-notification-count[hidden] { display: none !important; }
.top-header a:has(.pfims-notification-count) { position: relative; }

#viewSupplierModal .btn-edit-project { background: #e19a45 !important; color: white; border: 0; border-radius: 12px; padding: 10px 20px; }

.top-header a .pfims-notification-count {
    position: absolute !important; top: -7px !important; right: -9px !important; left: auto !important; bottom: auto !important;
    width: auto !important; min-width: 18px !important; height: 18px !important; padding: 0 4px !important;
    margin: 0 !important; clip: auto !important; clip-path: none !important; overflow: visible !important;
    font-size: 11px !important; line-height: 18px !important; z-index: 2;
}

#editSupplierModal .modal-body { display: grid; gap: 16px; }
#editSupplierModal .edit-section { display: block; margin: 0; padding: 0; }
#editSupplierModal .right-col { width: 100%; min-width: 0; }
#editSupplierModal .right-col input { width: 100%; box-sizing: border-box; }
#editSupplierModal .modal-divider { display: none; }
#editSupplierModal .supplier-section-title { margin: 0; }

#profitTable tfoot td { font-weight: 800; background: var(--ui-bg); border-top: 2px solid var(--ui-border-strong); }
#profitTable tfoot td:first-child { position: sticky; left: 0; z-index: 3; background: var(--ui-surface-solid) !important; }

.reports-page[data-report-dataset="contracts"] .live-data-panel .table-wrap { padding-inline: 0 !important; isolation: isolate; }
.reports-page[data-report-dataset="contracts"] .live-data-panel table { min-width: 2200px !important; border-collapse: separate !important; border-spacing: 0; }
.reports-page[data-report-dataset="contracts"] .live-data-panel :is(th,td) { min-width: 150px; white-space: nowrap; }
.reports-page[data-report-dataset="contracts"] .live-data-panel :is(th,td):first-child { min-width: 300px; background: var(--ui-surface-solid) !important; }
.reports-page[data-report-dataset="contracts"] .live-data-panel th:first-child { background: var(--ui-bg) !important; }
.reports-page[data-report-dataset="contracts"] .live-data-panel tfoot td:first-child { position: sticky; left: 0; z-index: 3; }
.reports-page[data-report-dataset="contracts"] .live-data-panel :is(th,td):nth-child(4) { border-left: 2px solid var(--ui-border-strong) !important; }
.reports-page[data-report-dataset="contracts"] .live-data-panel :is(th,td):nth-child(6),
.reports-page[data-report-dataset="contracts"] .live-data-panel :is(th,td):nth-child(9) { border-right: 2px solid var(--ui-border-strong) !important; }
.reports-page[data-report-dataset="contracts"] .live-data-panel .table-wrap::before { left: var(--pfims-docked-column-width, 0px); }

/* Dashboard KPIs pair measured values with an explicit next step. */
body.dashboard-page .kpi-card { display: flex; flex-direction: column; align-items: flex-start; }
body.dashboard-page .kpi-card .kpi-decision { margin: 12px 0; font-size: .82rem; line-height: 1.6; color: var(--ui-text); }
body.dashboard-page .kpi-card .kpi-action-link { margin-top: auto; padding-top: 8px; color: var(--ui-accent-dark); font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.dashboard-page .kpi-card[data-priority]::before { background: linear-gradient(90deg, var(--ui-accent), #f4bd62) !important; }
body.dashboard-page .kpi-card[data-priority] b { background: var(--ui-accent-soft) !important; color: #b45309 !important; padding: 5px 10px; border-radius: 8px; font-size: .75rem; }
html[data-theme="dark"] body.dashboard-page .kpi-card[data-priority] b { background: #483116 !important; color: #ffc17a !important; }
html[data-theme="dark"] body.dashboard-page .kpi-card .kpi-action-link { color: #ffc17a; }

/* Phone tables keep a compact, readable identifier pinned during scrolling. */
@media (max-width: 768px) {
    body:is(.dashboard-page, .projects-page, .inventory-page, .reports-page, .audit-logs-page)
    .main-content :is(.table-wrapper, .table-wrap, .items-table-wrapper, .table-container)
    > table:not(.report-preview table) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]) {
        box-sizing: border-box;
        width: 136px !important;
        min-width: 136px !important;
        max-width: 136px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        text-overflow: clip;
        line-height: 1.45;
        position: sticky;
        left: 0;
    }

    body:is(.dashboard-page, .projects-page, .inventory-page, .reports-page, .audit-logs-page)
    .main-content :is(.table-wrapper, .table-wrap, .items-table-wrapper, .table-container)
    > table:not(.report-preview table) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]) :is(a, strong, span, small, div) {
        max-width: 112px !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}

/* Requested module presentation fixes; reuse the existing reference colors. */
.finance-page :is(.btn-add-budget, [data-finance-tabs="receivables"] .btn-add-data, [data-finance-tabs="bonds"] .btn-add-data),
.settings-page .btn-add-user {
    background: var(--pfims-add-blue) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(23, 32, 51, .18) !important;
}
.finance-page :is([data-finance-tabs="cash"], [data-finance-tabs="backhoe"]) .btn-add-data.gold {
    background: linear-gradient(135deg, #f08a1a, #d97508) !important;
}
.finance-page :is(#detailEditBtn, #budgetDetailEditBtn) {
    background: #e19a45 !important;
    color: #fff !important;
}
.finance-page :is(#detailEditBtn, #budgetDetailEditBtn):hover { background: #cf8735 !important; }
body.settings-page .config-tabs {
    justify-content: flex-start !important;
    padding: 4px 6px 10px !important;
    max-width: 100%;
    box-sizing: border-box;
    scroll-padding-inline: 6px;
}
.settings-page .config-tab { flex: 0 0 auto; white-space: nowrap; }
body:is(.finance-page, .settings-page) .main-content :is(.table-wrapper, .budget-table-wrapper, .report-table-wrapper) {
    max-width: 100%;
    min-width: 0;
    overflow: auto !important;
    max-height: 65vh;
}
body:is(.finance-page, .settings-page) .main-content .pagination-wrapper {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    box-sizing: border-box;
}
body:is(.finance-page, .settings-page) .main-content .pagination-links { flex-wrap: wrap; }
body:is(.finance-page, .settings-page) .main-content :is(.table-wrapper, .budget-table-wrapper, .report-table-wrapper)
> table > :is(thead, tbody) > tr > :is(th, td):first-child:not([colspan]) {
    width: 160px !important;
    min-width: 136px !important;
    max-width: 200px !important;
    padding-inline: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}
.pfims-mobile-search-panel { width: min(100%, 320px); }
.pfims-mobile-filter-toolbar { display: none; }
.pfims-mobile-filter-dialog {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    padding: 20px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 16px;
    background: var(--ui-surface-solid);
    color: var(--ui-text);
    overflow-y: auto;
}
.pfims-mobile-filter-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.pfims-mobile-filter-dialog h2 { margin: 0 40px 20px 0; font-size: 1.2rem; }
.pfims-mobile-filter-dialog > label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pfims-mobile-filter-dialog :is(input, select) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: var(--ui-surface-solid);
    color: var(--ui-text);
}
.pfims-mobile-dialog-close { position: absolute; top: 12px; right: 12px; min-width: 40px; min-height: 40px; font-size: 1.4rem; }
.pfims-mobile-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.pfims-mobile-dialog-actions button, .pfims-mobile-filter-toolbar button { min-height: 44px; padding: 10px 16px; }
@media (max-width: 768px) {
    .pfims-mobile-filter-toolbar { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
    .pfims-mobile-filter-toolbar button { background: var(--pfims-add-blue); color: #fff; border: 0; }
    [data-mobile-dialogs="ready"] > :is(.pfims-filter-field, .pfims-filter-subtitle, .pfims-default-filter-note, input, select),
    .pfims-mobile-search-panel > input { display: none !important; }
    [data-mobile-dialogs="ready"] { position: static !important; grid-template-columns: minmax(0, 1fr) !important; }
    [data-mobile-dialogs="ready"] > .pfims-filter-heading .pfims-filter-subtitle { display: none !important; }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page) :is(.page-header, .page-header-with-btn) {
        display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page) :is(.page-header, .page-header-with-btn) > div { max-width: 100%; flex-wrap: wrap; }
    body.settings-page .config-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; }
    .settings-page #section-configurations { display: flex !important; flex-direction: column; }
    .settings-page #section-configurations[style*="display: none"] { display: none !important; }
    .settings-page #configCrudPanel:not([style*="display: none"]), .settings-page .config-primary-actions { display: contents !important; }
    .settings-page .config-primary-actions > .btn-add-user { order: 1; align-self: flex-start; margin-bottom: 12px; }
    .settings-page .pfims-mobile-search-panel { order: 2; margin-bottom: 12px; }
    .settings-page .config-tabs { order: 3; }
    .settings-page #configCrudPanel > .table-wrapper,
    .settings-page #configCrudPanel > .pagination-wrapper,
    .settings-page #configCrudPanel > .pfims-column-chooser { order: 4; }
    .notifications-page :is(.btn-mark-read, .btn-clear-all) {
        padding: 8px 10px !important; font-size: .75rem !important; min-height: 36px; white-space: nowrap;
    }
    .notifications-page .notif-actions { flex-wrap: wrap; gap: 8px; }
}

/* Screenshot follow-up: compact rows and centered, readable modal actions. */
.pfims-mobile-filter-dialog {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    height: fit-content;
}
body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page, .dashboard-page, .reports-page)
.main-content :is(.table-wrapper, .table-wrap, .table-container, .table-responsive, .budget-table-wrapper, .items-table-wrapper, .report-table-wrapper) {
    padding-inline: 0;
    isolation: isolate;
}
body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page, .dashboard-page, .reports-page)
.main-content :is(.table-wrapper, .table-wrap, .table-container, .table-responsive, .budget-table-wrapper, .items-table-wrapper, .report-table-wrapper)::before {
    left: var(--pfims-docked-column-width, 0px);
}
@media (max-width: 768px) {
    body .pfims-mobile-filter-toolbar {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    body .pfims-mobile-filter-toolbar > :is(button, a) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 11px !important;
        font-size: .75rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }
    body .pfims-mobile-filter-toolbar > [hidden] { display: none !important; }
    body .pfims-mobile-filter-toolbar .button-label { font-size: .75rem !important; white-space: nowrap; }
    body .pfims-mobile-filter-toolbar .button-icon { display: none !important; }
    body .pfims-mobile-filter-toolbar > .pfims-clear-filters {
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 8px 11px !important;
        font-size: .75rem !important;
        margin: 0 !important;
    }
    body [data-mobile-dialogs="ready"] > :is(.pfims-filter-heading, button[type="submit"]) { display: none !important; }
    .reports-page .filter-panel > .pfims-filter-heading .pfims-clear-filters { display: none; }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page) :is(.page-header, .page-header-with-btn) > div,
    .finance-page #financeHeaderActions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: wrap;
    }
    .finance-page #financeHeaderActions[hidden],
    .finance-page #financeHeaderActions > [hidden] { display: none !important; }
    .finance-page .page-header .finance-header-action-group {
        width: auto !important;
        flex: 0 1 auto !important;
        display: contents;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page) :is(.page-header, .page-header-with-btn) :is(button, a[data-icon-label]),
    .settings-page .config-primary-actions > .btn-add-user {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: .74rem !important;
        margin: 0 !important;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page) :is(.page-header, .page-header-with-btn) .button-label,
    .settings-page .config-primary-actions .button-label { font-size: .74rem !important; }
    .settings-page .config-primary-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; order: 1; margin-bottom: 12px; }
    .settings-page .config-primary-actions .pfims-mobile-search-panel { flex: 0 0 auto; width: auto; margin: 0; order: 0; }
    .settings-page .config-primary-actions > .btn-add-user { order: 0; }
    .settings-page #section-notifications .preference-item {
        display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px;
    }
    .settings-page #section-notifications .preference-item > .left { flex: 1 1 auto; min-width: 0; }
    .settings-page #section-notifications .preference-item > .toggle { flex: 0 0 44px; margin: 0; }
    .notifications-page .notif-actions { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; width: auto; gap: 8px; }
    .notifications-page .notif-actions > :is(.btn-mark-read, .btn-clear-all) {
        flex: 0 1 auto; width: auto !important; min-width: 0; padding: 8px 10px !important; min-height: 36px !important; font-size: .74rem !important;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer > div:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
        display: contents !important;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer :is(button, a) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 10px 14px !important;
        min-height: 42px;
        font-size: .82rem !important;
    }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer :is(button, a)[style*="display: none"],
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer :is(button, a)[style*="display:none"],
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer [hidden] { display: none !important; }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer .button-label { font-size: .82rem !important; text-align: center; }
    body:is(.finance-page, .projects-page, .inventory-page, .suppliers-page, .settings-page) .modal-footer :is(.btn-delete, .btn-delete-config, .btn-delete-user) { order: 2; }
    .settings-page .settings-action-group .btn-config-action { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
    .settings-page :is(#configDetailsModal, #userDetailsModal) .settings-detail-row strong { font-size: .72rem; text-transform: uppercase; color: var(--ui-muted); }
    .settings-page :is(#configDetailsModal, #userDetailsModal) .settings-modal-dialog {
        width: min(440px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box;
    }
    .settings-page :is(#configDetailsModal, #userDetailsModal) .settings-detail-row { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 0; }
    .settings-page :is(#configDetailsModal, #userDetailsModal) .settings-detail-row span { text-align: left; font-size: .9rem; line-height: 1.45; }
}
@media (max-width: 768px) {
    .finance-page #financeHeaderActions [data-finance-tabs="backhoe"] {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100% !important;
    }
    .finance-page #financeHeaderActions [data-finance-tabs="backhoe"] button {
        flex: 1 1 auto !important;
        padding-inline: 8px !important;
        gap: 4px !important;
    }
    .finance-page #financeHeaderActions [data-finance-tabs="backhoe"] .button-label {
        min-width: 0;
        white-space: normal;
        font-size: .7rem !important;
    }
    .finance-page #financeHeaderActions [data-finance-tabs="backhoe"] .button-icon {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
    }
    .finance-page #financeHeaderActions [data-finance-tabs="backhoe"] .button-icon svg { width: 14px; height: 14px; }
}

/* Corrections from the latest mobile screenshots. */
@media (max-width: 768px) {
    body .pfims-mobile-filter-toolbar > :is(.pfims-clear-filters, #clear) {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important;
        color: var(--ui-muted) !important;
    }
    body .pfims-mobile-filter-toolbar > :is(.pfims-clear-filters, #clear)::before {
        content: "×";
        font-size: 20px;
        line-height: 1;
    }
    body .pfims-mobile-filter-toolbar > :is(.pfims-clear-filters, #clear) :is(.button-icon, .button-label) { display: none !important; }
    .settings-page .config-primary-actions .pfims-mobile-search-panel { order: -1; }
    .settings-page .config-primary-actions > .btn-add-user { min-height: 36px !important; height: 36px !important; padding: 8px 11px !important; }
    .settings-page :is(#configDetailsModal, #userDetailsModal) .modal-footer > button {
        flex: 0 0 auto !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 10px 14px !important;
    }
    .settings-page #section-notifications .preference-item {
        flex-wrap: nowrap !important;
    }
    .settings-page #section-notifications .preference-item > .left {
        width: auto !important;
        max-width: calc(100% - 58px);
    }
    .settings-page #section-notifications .preference-item > .toggle {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }
    .finance-page #financeHeaderActions .finance-header-action-group[hidden] { display: none !important; }
}

/* Pagination, report toolbar, Settings view dialogs, and landing spacing. */
body .pfims-mobile-filter-toolbar > :is(.pfims-clear-filters, #clear) { text-decoration: none !important; }
.settings-page :is(#configDetailsModal, #userDetailsModal) {
    align-items: center !important;
    justify-content: center !important;
}
.settings-page :is(#configDetailsModal, #userDetailsModal) .settings-modal-dialog {
    margin: auto !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}
html:has(body.landing-page), body.landing-page, body.landing-page * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent !important;
}
html:has(body.landing-page)::-webkit-scrollbar-thumb,
body.landing-page::-webkit-scrollbar-thumb,
body.landing-page *::-webkit-scrollbar-thumb { background: transparent !important; border-color: transparent !important; }
html:has(body.landing-page).pfims-landing-scrolling,
body.landing-page.pfims-landing-scrolling,
body.landing-page .pfims-landing-scrolling { scrollbar-color: #6b7280 transparent !important; }
html:has(body.landing-page).pfims-landing-scrolling::-webkit-scrollbar-thumb,
body.landing-page.pfims-landing-scrolling::-webkit-scrollbar-thumb,
body.landing-page .pfims-landing-scrolling::-webkit-scrollbar-thumb { background: #6b7280 !important; }
@media (max-width: 768px) {
    body:not(.landing-page) .pagination-wrapper .pagination-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 4px !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    body:not(.landing-page) .pagination-wrapper .pagination-links > :is(button, a, span) {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 28px !important;
        min-height: 34px !important;
        padding: 5px 7px !important;
        font-size: .75rem !important;
        white-space: nowrap;
    }
    body:not(.landing-page) .pagination-wrapper .pagination-links > :is(.dots, .ellipsis) {
        min-width: 12px !important;
        padding-inline: 2px !important;
    }
    .reports-page .filter-panel > .panel-heading { display: none !important; }
    .reports-page .filter-panel .filters-grid { margin: 0 !important; padding: 0 !important; }
    .reports-page .filter-panel { padding: 12px !important; }
    body.landing-page .container { padding-inline: 16px !important; box-sizing: border-box; }
    body.landing-page .form-wrapper { min-width: 0; max-width: 100%; }
}
html:has(body.landing-page)::-webkit-scrollbar-track,
body.landing-page::-webkit-scrollbar-track,
body.landing-page *::-webkit-scrollbar-track { background: transparent !important; }
@media (min-width: 769px) and (max-width: 850px) {
    body.landing-page .container { padding-inline: 16px !important; box-sizing: border-box; }
}
@media (max-width: 768px) {
    body .reports-page #reportFiltersGrid.pfims-filter-panel,
    body.reports-page #reportFiltersGrid.pfims-filter-panel {
        padding: 0 !important;
        gap: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    body.reports-page .filter-panel {
        padding: 12px !important;
        min-height: 0 !important;
        height: auto !important;
    }
    body.reports-page .filter-panel > .panel-heading { margin: 0 !important; padding: 0 !important; }
}

/* Every existing table scroll wrapper uses the same pinned-column fade. */
:is(.table-wrapper, .table-wrap, .table-container, .table-responsive, .budget-table-wrapper, .items-table-wrapper, .forecast-table-wrapper, .report-table-wrapper, .analytics-table-wrapper) {
    isolation: isolate;
}
:is(.table-wrapper, .table-wrap, .table-container, .table-responsive, .budget-table-wrapper, .items-table-wrapper, .forecast-table-wrapper, .report-table-wrapper, .analytics-table-wrapper)::before {
    left: var(--pfims-docked-column-width, 0px) !important;
}
/* Budget wrappers must stay flex surfaces for sticky edge fades to span rows. */
.budget-table-wrapper.visible { display: flex !important; }
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::before,
:is(.table-wrap, .table-responsive, .analytics-table-wrapper)::after {
    float: none;
    flex: 0 0 28px;
    align-self: stretch;
    height: auto;
}
:is(.table-wrap, .table-responsive, .analytics-table-wrapper) { display: flex; }
:is(.table-wrap, .table-responsive, .analytics-table-wrapper) > table { flex: 0 0 auto; max-width: none; }
.budget-table-wrapper:not(.visible) { display: none !important; }

/* Project Records keeps every detail readable inside its scrolling wrapper. */
.projects-page .table-wrapper table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
}
.projects-page .table-wrapper :is(th, td) {
    min-width: 132px;
    white-space: nowrap;
}
.projects-page .table-wrapper :is(th, td):first-child { min-width: 220px; }
.projects-page .table-wrapper :is(th, td):last-child { min-width: 88px; }

/* Audit Logs: one control height across filters and pagination. */
.audit-logs-page :is(.audit-log-filter-panel, .rows-info) :is(input:not([type="hidden"]), select, .pfims-select-trigger) {
    box-sizing: border-box;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

/* Trash Bin uses the same padded, left-aligned rows as Settings tables. */
.settings-page .trash-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.settings-page .trash-actions button:disabled { opacity: .45; cursor: not-allowed; }
.settings-page #section-trash > .table-wrapper { margin-top: 20px; }
.settings-page #trashTable {
    table-layout: auto;
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}
.settings-page #trashTable :is(th, td) {
    text-align: left !important;
    vertical-align: middle;
    padding: 14px 16px !important;
}
.settings-page #trashTable th { white-space: nowrap; }
.settings-page #trashTable :is(th, td):first-child {
    width: 34% !important;
    min-width: 260px !important;
    max-width: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
.settings-page #trashTable :is(th, td):nth-child(2) { min-width: 170px; white-space: nowrap; }
.settings-page #trashTable :is(th, td):nth-child(3) { min-width: 220px; white-space: nowrap; }
.settings-page #trashTable :is(th, td):last-child { min-width: 100px; }
.settings-page #trashTable .btn-config-action { min-height: 36px; padding: 8px 14px; }

/* Delete and restore confirmations share the same dialog layout. */
body .modal-overlay:is(.pfims-delete-confirm, .pfims-restore-confirm) {
    z-index: 9999 !important;
    justify-content: center !important;
    align-items: center !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-container {
    width: 400px !important;
    padding: 30px 35px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 0 20px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #eef2f6 !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-header h2 {
    margin: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #1a2b3c !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-close {
    width: auto !important;
    padding: 0 8px !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    color: #888 !important;
    border: 0 !important;
    background: transparent !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-body { padding: 0 2px !important; }
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-body p {
    margin: 0 0 10px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-body p:last-child {
    margin-bottom: 20px !important;
    font-size: .85rem !important;
    color: #888 !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 10px 0 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid #e9ecef !important;
}
body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-footer button {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 24px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
}
@media (max-width: 480px) {
    body :is(.pfims-delete-confirm, .pfims-restore-confirm) .modal-container { padding: 24px !important; }
}