:root {
    --filtasca-yellow: #fdc902;
    --filtasca-ink: #101010;
    --filtasca-muted: #686863;
    --filtasca-border: #e7e5dc;
    --filtasca-surface: #ffffff;
    --filtasca-page: #f7f7f3;
}

html { background: var(--filtasca-page); }
body {
    color: var(--filtasca-ink);
    background: var(--filtasca-page);
    font-family: "Segoe UI Variable", "Segoe UI", Inter, Manrope, "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.sidebar {
    background: #111111;
    border-right: 1px solid #292929;
}
.sidebar-brand h1 { letter-spacing: 0; }
.sidebar-tagline { color: #bcbcb5; line-height: 1.45; }
.nav-group { margin-bottom: 8px; }
.nav-group summary { min-height: 42px; border-radius: 9px; }
.nav-group > a,
.nav-group details a { border-radius: 8px; min-height: 38px; display: flex; align-items: center; }
.nav-group > a.active,
.nav-group details a.active { background: var(--filtasca-yellow); color: #111; font-weight: 800; }

.main { background: var(--filtasca-page); }
.topbar {
    min-height: 70px;
    border: 1px solid var(--filtasca-border);
    border-radius: 12px;
    background: var(--filtasca-surface);
    box-shadow: 0 8px 24px rgba(16, 16, 16, .04);
}
.topbar-title-wrap strong { font-size: 16px; }
.topbar-title-wrap span { color: var(--filtasca-muted); }

.panel,
.module-panel,
.card,
.table-wrap,
.form-panel {
    border-color: var(--filtasca-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16, 16, 16, .035);
}
.panel-title-row { gap: 16px; }
h1, h2, h3, h4 { color: var(--filtasca-ink); letter-spacing: 0; }
.muted, .help-text { color: var(--filtasca-muted); }

button,
.button,
a.button,
input[type="submit"] {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 0;
}
button:hover,
.button:hover,
a.button:hover { transform: translateY(-1px); }

input, select, textarea {
    min-height: 42px;
    border: 1px solid #d9d7ce;
    border-radius: 8px;
    background: #fff;
    color: var(--filtasca-ink);
}
textarea { min-height: 110px; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(253, 201, 2, .22);
    border-color: #c39b00;
}

table { border-collapse: separate; border-spacing: 0; }
thead th {
    background: #fffbed;
    color: #4f4f48;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
tbody td { border-top-color: #eceae2; }
.status-badge, .badge { border-radius: 999px; font-weight: 800; }

.kpi-grid, .summary-grid, .stats-grid { gap: 12px; }
.kpi-card, .summary-card, .stat-card { border-radius: 10px; box-shadow: none; }
.empty-state { border: 1px dashed #d5d2c7; border-radius: 10px; background: #fff; padding: 28px; }

/* Page navigation should never leave a floating global spinner behind. */
#global-loading-indicator,
.global-loading-indicator,
.page-loading-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
button.is-loading::after,
.button.is-loading::after { content: none !important; }

@media (max-width: 900px) {
    .topbar { border-radius: 10px; }
    .main { padding-left: 14px; padding-right: 14px; }
    table { min-width: 720px; }
}

@media (max-width: 640px) {
    .topbar { min-height: 62px; }
    .topbar-actions { gap: 6px; }
    .button, a.button, button { min-height: 38px; }
}

/* Shared mobile baseline: applies to every tenant page, not only invoice forms. */
@media (max-width: 760px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .main { min-width: 0; width: 100%; box-sizing: border-box; }
    .topbar { flex-wrap: wrap; gap: 8px; }
    .topbar-title-wrap { min-width: 0; flex: 1 1 220px; }
    .topbar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .panel, .module-panel, .card, .table-wrap, .form-panel { max-width: 100%; box-sizing: border-box; }
    .kpi-grid, .summary-grid, .stats-grid, .form-grid { grid-template-columns: 1fr !important; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 640px; }
    input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
    .actions, .button-row, .form-actions, .record-pill-group { flex-wrap: wrap; }
    .record-subline { display: block; margin-top: 3px; }
}
@media (max-width: 480px) {
    .topbar-actions > * { flex: 1 1 auto; }
    .topbar-actions button, .topbar-actions a { min-width: 0; }
    .record-pill-group .record-pill { flex: 1 1 100%; text-align: center; }
}

/* Filtasca global interface standard: quiet surfaces, strong hierarchy, fast scanning. */
:root {
    --filtasca-yellow: #f5c400;
    --filtasca-yellow-strong: #d9aa00;
    --filtasca-ink: #151515;
    --filtasca-muted: #6f706c;
    --filtasca-page: #f4f5f2;
    --filtasca-surface: #ffffff;
    --filtasca-subtle: #fafaf7;
    --filtasca-border: #dedfd9;
    --filtasca-border-strong: #c9cbc2;
    --filtasca-green: #176b4a;
    --filtasca-red: #a33a35;
    --filtasca-shadow: 0 10px 30px rgba(20, 22, 18, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: #725b00; text-underline-offset: 3px; }
a:hover { color: #171717; }

.sidebar {
    width: 248px;
    background: #151616;
    border-right: 1px solid #2c2e2b;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .08);
}
.sidebar-brand { padding: 26px 22px 8px; }
.sidebar-brand h1 { font-size: 24px; font-weight: 900; letter-spacing: 0; }
.sidebar-tagline { max-width: 190px; margin: 0 22px 20px; font-size: 11px; color: #aeb1ab; }
.sidebar-nav { padding: 0 12px 22px; }
.nav-group { margin: 0 0 7px; border: 1px solid transparent; }
.nav-group[open] { border-color: #30322e; background: #1c1e1b; }
.nav-group summary {
    min-height: 44px;
    padding: 0 12px;
    color: #f5f5f2;
    font-size: 13px;
    font-weight: 800;
}
.nav-group summary:hover { background: #262824; }
.nav-group > a,
.nav-group details a {
    min-height: 36px;
    margin: 2px 8px;
    padding: 0 12px 0 38px;
    color: #c9cbc5;
    font-size: 12px;
    font-weight: 700;
}
.nav-group > a:hover,
.nav-group details a:hover { color: #fff; background: #2a2c27; }
.nav-group > a.active,
.nav-group details a.active {
    color: #161616;
    background: var(--filtasca-yellow);
    box-shadow: 0 5px 14px rgba(245, 196, 0, .14);
}

.main { min-width: 0; padding: 20px 24px 40px; }
.topbar {
    min-height: 72px;
    padding: 12px 18px;
    border: 1px solid var(--filtasca-border);
    border-radius: 14px;
    box-shadow: var(--filtasca-shadow);
}
.topbar-title-wrap strong { font-size: 17px; letter-spacing: 0; }
.topbar-title-wrap span { font-size: 11px; font-weight: 700; }
.topbar-back, .layout-sign-toggle, .notification-bell { border-color: var(--filtasca-border); }
.profile-card { font-size: 12px; font-weight: 800; }
.topbar-logout { min-height: 38px; border-radius: 8px; font-weight: 800; }

.panel, .module-panel, .card, .table-wrap, .form-panel {
    background: var(--filtasca-surface);
    border: 1px solid var(--filtasca-border);
    border-radius: 12px;
    box-shadow: var(--filtasca-shadow);
}
.panel { padding: 22px; }
.panel-title-row { align-items: flex-start; }
.panel-title-row h2, .panel-title-row h3 { letter-spacing: 0; }
.eyebrow, .section-label {
    color: #8b6d00;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.muted, .help-text { color: var(--filtasca-muted); }

button, .button, a.button, input[type="submit"], .txn-chip-button, .txn-chip-link {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 850;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button, .button, a.button, input[type="submit"] {
    background: var(--filtasca-yellow);
    color: #171717;
    box-shadow: 0 7px 16px rgba(216, 171, 0, .14);
}
button:hover, .button:hover, a.button:hover, input[type="submit"]:hover,
.txn-chip-button:hover, .txn-chip-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(20, 22, 18, .12);
}
button.secondary, .button.secondary, a.button.secondary, .txn-chip-link {
    background: #fff;
    color: var(--filtasca-ink);
    border-color: var(--filtasca-border-strong);
    box-shadow: none;
}
button.secondary-dark, .button.secondary-dark, .txn-chip-button.secondary-dark {
    background: #171817;
    color: #fff;
    border-color: #171817;
}
button:disabled, .button:disabled, input[type="submit"]:disabled,
.txn-chip-button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }

input, select, textarea {
    min-height: 42px;
    border: 1px solid var(--filtasca-border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--filtasca-ink);
    box-shadow: 0 1px 1px rgba(20, 22, 18, .02);
}
input:hover, select:hover, textarea:hover { border-color: #aeb1a7; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(245, 196, 0, .22);
    border-color: var(--filtasca-yellow-strong);
    box-shadow: 0 0 0 1px var(--filtasca-yellow-strong);
}
label { color: #30322e; font-size: 12px; font-weight: 800; }

table { overflow: hidden; border: 1px solid var(--filtasca-border); border-radius: 10px; }
thead th { background: #f8f8f3; color: #696b64; border-bottom: 1px solid var(--filtasca-border); }
tbody tr { background: #fff; transition: background-color .14s ease; }
tbody tr:hover { background: #fffdf3; }
tbody td { border-top-color: #ecece6; }
.status-badge, .badge { border-radius: 999px; font-weight: 850; letter-spacing: .01em; }
.notice { border-radius: 10px; border-width: 1px; }
.notice.success { color: var(--filtasca-green); }
.notice.danger { color: var(--filtasca-red); }

.kpi-grid, .summary-grid, .stats-grid { gap: 14px; }
.kpi-card, .summary-card, .stat-card, .stat {
    border: 1px solid var(--filtasca-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}
.stat { padding: 16px !important; }
.stat span { color: #73756e; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.stat strong { color: var(--filtasca-ink); }
.empty-state { border: 1px dashed var(--filtasca-border-strong); border-radius: 10px; background: var(--filtasca-subtle); }
.pagination a, .pagination span { border-radius: 8px; }

.project-file-stack { gap: 10px; }
.project-file-item {
    border-color: var(--filtasca-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 22, 18, .035);
}
.project-file-item:hover { border-color: #cbb15c; box-shadow: 0 8px 22px rgba(20, 22, 18, .07); }
.project-file-pick { color: #34362f; }
.project-delivery-toolbar { padding: 12px 14px; border: 1px solid #ece9dc; border-radius: 10px; background: #fbfbf8; }
.project-bulk-review-bar, .project-upload-inline { gap: 10px; }
.project-file-pagination a, .project-file-pagination span { border-radius: 8px; border-color: var(--filtasca-border); }
.project-file-pagination .is-active { background: var(--filtasca-yellow); border-color: var(--filtasca-yellow); }

.filtasca-modal-open { overflow: hidden; }
.filtasca-confirm-modal[hidden] { display: none; }
.filtasca-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
}
.filtasca-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 16, 15, .62);
    backdrop-filter: blur(3px);
}
.filtasca-confirm-dialog {
    position: relative;
    width: min(100%, 360px);
    padding: 20px 22px;
    border: 1px solid #d7c77b;
    border-top: 3px solid var(--filtasca-yellow);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}
.filtasca-confirm-dialog h2 {
    margin: 0;
    color: var(--filtasca-ink);
    font-size: 17px;
    letter-spacing: 0;
}
.filtasca-confirm-dialog #filtasca-confirm-message {
    margin: 8px 0 0;
    color: var(--filtasca-muted);
    font-size: 13px;
    line-height: 1.55;
}
.filtasca-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.filtasca-confirm-actions button { min-width: 92px; }
.filtasca-confirm-cancel {
    background: #fff !important;
    border-color: var(--filtasca-border-strong) !important;
    color: var(--filtasca-ink) !important;
    box-shadow: none !important;
}
.filtasca-confirm-continue {
    background: var(--filtasca-yellow) !important;
    border-color: var(--filtasca-yellow) !important;
    color: #151515 !important;
}

@media (max-width: 900px) {
    .sidebar { width: 228px; }
    .main { padding: 14px 16px 30px; }
    .panel { padding: 18px; }
}
@media (max-width: 640px) {
    .sidebar { width: 100%; }
    .main { padding: 12px 10px 24px; }
    .topbar { padding: 10px 12px; border-radius: 10px; }
    .panel { padding: 15px; border-radius: 10px; }
    .panel-title-row, .project-delivery-toolbar { align-items: stretch; }
    .project-bulk-review-bar, .project-upload-inline { width: 100%; }
    .project-bulk-review-bar > *, .project-upload-inline > * { max-width: 100%; }
    .project-upload-inline input[type=file] { width: 100%; }
    .filtasca-confirm-dialog { width: min(100%, 340px); padding: 18px; }
    .filtasca-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .filtasca-confirm-actions button { width: 100%; min-width: 0; }
}

/* Compact project workspace: open only the area that needs attention. */
.project-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
    gap: 16px;
}
.project-collapsible-panel {
    padding: 0 !important;
    overflow: hidden;
}
.project-collapsible-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 15px 19px;
    cursor: pointer;
    list-style: none;
}
.project-collapsible-panel > summary::-webkit-details-marker { display: none; }
.project-section-summary > span:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.project-section-summary strong { color: var(--filtasca-ink); font-size: 14px; }
.project-section-summary small {
    color: var(--filtasca-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.project-section-chevron {
    display: grid;
    flex: 0 0 26px;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--filtasca-border-strong);
    border-radius: 7px;
    color: var(--filtasca-yellow-strong);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: transform .18s ease, background .18s ease;
}
.project-collapsible-panel[open] > summary {
    border-bottom: 1px solid var(--filtasca-border);
    background: #fcfcfa;
}
.project-collapsible-panel[open] .project-section-chevron {
    background: var(--filtasca-subtle);
    transform: rotate(45deg);
}
.project-collapsible-content { padding: 17px 19px 19px; }
.project-summary-grid { gap: 10px !important; }
.project-summary-grid .stat {
    min-height: 84px;
    padding: 13px 15px !important;
}
.project-summary-grid .stat strong { font-size: 18px !important; }
@media (max-width: 900px) {
    .project-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .project-collapsible-panel > summary { min-height: 60px; padding: 13px 15px; }
    .project-collapsible-content { padding: 15px; }
}