/* X Invoicing — a quiet, light-first business workspace. */
:root {
    --app-accent: #087f6b; --app-accent-hover: #066756; --app-accent-soft: #e9f5ef;
    --app-sidebar-w: 252px; --app-bg: #f7f8fa; --app-surface: #fff; --app-sidebar: #fdfdfc;
    --app-border: #e3e8e7; --app-muted: #626e78; --app-ink: #172b38;
    --app-shadow: 0 2px 6px rgba(23,43,56,.025); --app-ease: cubic-bezier(.2,.8,.2,1);
    --bs-primary: #087f6b; --bs-primary-rgb: 8,127,107; --bs-link-color-rgb: 8,112,95; --bs-link-hover-color-rgb: 6,89,75;
    --bs-body-color: #172b38; --bs-body-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
    --bs-body-font-size: .9rem; --bs-body-line-height: 1.55; --bs-border-color: var(--app-border);
    --bs-secondary-color: #626e78;
}
[data-bs-theme="dark"] {
    --app-bg: #101c23; --app-surface: #17262e; --app-sidebar: #142129; --app-border: #2e414b;
    --app-muted: #adbdc5; --app-ink: #edf4f4; --app-accent: #76d9b9; --app-accent-hover: #a1e7cf; --app-accent-soft: #203e36;
    --bs-body-color: #edf4f4; --bs-secondary-color: #adbdc5; --bs-link-color-rgb: 118,217,185; --bs-link-hover-color-rgb: 161,231,207;
}
body { background: var(--app-bg); color: var(--app-ink); -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 3px; }
.btn { font-weight: 600; border-radius: 6px; padding: .55rem .9rem; font-size: .85rem; transition: background-color 140ms ease,box-shadow 140ms ease,transform 140ms var(--app-ease); }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); }
.btn-sm { padding: .4rem .7rem; font-size: .8rem; }
.btn-primary { --bs-btn-bg: #087f6b; --bs-btn-border-color: #087f6b; --bs-btn-hover-bg: #066756; --bs-btn-hover-border-color: #066756; --bs-btn-active-bg: #055749; --bs-btn-disabled-bg: #087f6b; --bs-btn-disabled-border-color: #087f6b; box-shadow: 0 1px 2px rgba(8,127,107,.12); }
.btn-outline-primary { --bs-btn-color: var(--app-accent); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: #087f6b; --bs-btn-hover-border-color: #087f6b; --bs-btn-active-bg: #066756; }
.btn-outline-secondary { --bs-btn-color: var(--app-ink); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-accent-soft); --bs-btn-hover-color: var(--app-ink); --bs-btn-hover-border-color: var(--app-border); }
.btn-outline-danger { --bs-btn-border-color: var(--app-border); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 12px 20px; background: var(--app-surface); color: var(--app-ink); border: 2px solid var(--app-accent); border-radius: 6px; }
.skip-link:focus { top: 16px; }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w); background: var(--app-sidebar); border-right: 1px solid var(--app-border); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.app-brand { padding: 24px 20px 20px; display: flex; align-items: center; gap: 10px; color: var(--app-ink); text-decoration: none; }
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: #fff; border: 1px solid #e3e8e7; border-radius: 8px; overflow: hidden; }
.brand-mark img { width: 52px; height: 52px; object-fit: contain; }
.app-brand strong { font-size: 1.05rem; letter-spacing: -.025em; } .app-brand small { display: block; font-size: .66rem; color: var(--app-muted); margin-top: 1px; }
.workspace-identity { margin: 0 16px 12px; padding: 10px; border: 1px solid var(--app-border); border-radius: 6px; display: flex; align-items: center; gap: 10px; }
.workspace-avatar { display: grid; place-items: center; flex: 0 0 30px; height: 30px; background: var(--app-accent-soft); color: var(--app-accent); font-weight: 700; border-radius: 6px; }
.workspace-identity div { min-width: 0; } .workspace-identity strong { display: block; font-size: .73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-identity small { display: block; font-size: .66rem; color: var(--app-muted); }
.app-nav { padding: 0 12px 20px; }
.app-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 42px; border-radius: 6px; color: var(--app-muted); text-decoration: none; font-weight: 500; margin-bottom: 3px; transition: background-color 140ms ease,color 140ms ease; }
.app-nav a i { font-size: 1.05rem; } .app-nav a:hover { background: var(--app-accent-soft); color: var(--app-ink); }
.app-nav a.active { background: var(--app-accent-soft); color: var(--app-accent); font-weight: 650; box-shadow: inset 3px 0 var(--app-accent); }
.app-nav .nav-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .11em; color: var(--app-muted); padding: 16px 12px 7px; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding: 18px 24px; border-top: 1px solid var(--app-border); font-size: .65rem; color: var(--app-muted); display: flex; align-items: center; gap: 8px; }
.workspace-dot { width: 6px; height: 6px; background: var(--app-accent); border-radius: 50%; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { background: var(--app-surface); border-bottom: 1px solid var(--app-border); padding: 12px 32px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 1020; min-height: 68px; }
.global-search { max-width: 420px; } .global-search .input-group-text { border-right: 0; color: var(--app-muted); background: var(--app-bg) !important; padding-left: 12px; }
.global-search input { border-left: 0; background: var(--app-bg); box-shadow: none !important; }
.global-search input:focus { background: var(--app-surface); }
.app-content { padding: 32px; max-width: 1600px; width: 100%; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { font-size: 1.65rem; font-weight: 650; margin: 0; letter-spacing: -.04em; line-height: 1.3; }
.page-head .sub { color: var(--app-muted); font-size: .8rem; margin-top: 5px; }
.eyebrow { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--app-muted); font-weight: 650; margin: 0 0 8px; }
.dashboard-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 8px; box-shadow: var(--app-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--app-border); font-size: .86rem; font-weight: 650; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-radius: 8px 8px 0 0 !important; }
.card-body { padding: 20px; } .card-header a { text-decoration: none; }
.stat { padding: 20px 24px; height: 100%; position: relative; overflow: hidden; }
.stat .label { color: var(--app-muted); font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.stat .value { color: var(--app-ink); font-size: 1.8rem; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 10px 0 6px; line-height: 1.2; overflow-wrap: anywhere; }
.stat .hint { color: var(--app-muted); font-size: .73rem; }
.stat:has(.tone-income) { border-top: 3px solid #087f6b; } .stat:has(.tone-profit) { border-top: 3px solid #366481; } .stat:has(.tone-due) { border-top: 3px solid #c97548; }
.tone-income { color: #08735e; } .tone-expense { color: #b23c33; } .tone-due { color: #9a581f; } .tone-profit { color: #366481; }
[data-bs-theme="dark"] .tone-income { color: #76d9b9; } [data-bs-theme="dark"] .tone-expense { color: #ffaba4; } [data-bs-theme="dark"] .tone-due { color: #f4bd80; } [data-bs-theme="dark"] .tone-profit { color: #9ac7ed; }
.overview-context { padding: 0 2px; } .overview-context strong { color: var(--app-ink); }
.workflow-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); }
.workflow-bar a { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: var(--app-ink); text-decoration: none; transition: background-color 150ms ease; }
.workflow-bar a + a { border-left: 1px solid var(--app-border); } .workflow-bar a:hover { background: var(--app-accent-soft); }
.workflow-bar strong { display: block; font-weight: 600; font-size: .8rem; } .workflow-bar small { display: block; color: var(--app-muted); font-size: .7rem; margin-top: 2px; }
.workflow-bar a > i:last-child { margin-left: auto; color: var(--app-muted); } .workflow-icon { font-size: 1.05rem; color: var(--app-accent); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-ink); margin: 0; font-size: .82rem; }
.table > thead th { font-size: .66rem; text-transform: uppercase; letter-spacing: .065em; color: var(--app-muted); font-weight: 650; background: var(--app-bg); border-bottom-color: var(--app-border); white-space: nowrap; padding: 13px 20px; }
.table > tbody td { padding: 15px 20px; vertical-align: middle; border-color: var(--app-border); }
.table > tbody tr { transition: background-color 120ms ease; } .table > tbody tr:hover { background: var(--app-accent-soft); }
.table > tbody tr:last-child td { border-bottom: 0; } .table a { font-weight: 550; text-decoration: none; } .table a:hover { text-decoration: underline; }
.table > tfoot td { padding: 14px 20px; font-weight: 650; border-top: 2px solid var(--app-border); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge-soft { font-weight: 600; font-size: .68rem; padding: 5px 8px; border-radius: 4px; display: inline-block; }
.s-green { background: #e9f5ef; color: #086550; } .s-amber { background: #fff2df; color: #865110; } .s-red { background: #fceeed; color: #a1312d; } .s-blue { background: #edf2f7; color: #315e7e; } .s-grey { background: #eef1f2; color: #54616d; }
[data-bs-theme="dark"] .s-green { background: #203e36; color: #8be5c5; } [data-bs-theme="dark"] .s-amber { background: #443421; color: #f4bd80; } [data-bs-theme="dark"] .s-red { background: #482a2b; color: #ffaba4; } [data-bs-theme="dark"] .s-blue { background: #233a4b; color: #9ac7ed; } [data-bs-theme="dark"] .s-grey { background: #2b3c45; color: #adbdc5; }
.empty { text-align: center; padding: 40px 20px; color: var(--app-muted); } .empty i { font-size: 1.7rem; display: block; margin-bottom: 12px; color: var(--app-accent); }
.form-label { font-weight: 600; font-size: .76rem; margin-bottom: 6px; }
.form-control,.form-select,.input-group-text { border-color: var(--app-border); border-radius: 6px; font-size: .85rem; min-height: 38px; }
.form-control:focus,.form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(8,127,107,.12); }
.form-control::placeholder { color: var(--app-muted); opacity: .8; } .form-check-input:checked { background-color: #087f6b; border-color: #087f6b; }
.form-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--app-muted); font-weight: 650; margin: 24px 0 16px; }
.filters { padding: 16px 20px; border-bottom: 1px solid var(--app-border); background: var(--app-surface); border-radius: 8px 8px 0 0; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 16px 24px; } .dl-grid dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 650; } .dl-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; } .chart-box { position: relative; height: 250px; }
.dropdown-menu { font-size: .84rem; padding: 6px; border: 1px solid var(--app-border); border-radius: 8px; box-shadow: 0 12px 32px rgba(23,43,56,.12); } .dropdown-item { padding: 10px 12px; border-radius: 4px; } .dropdown-item:hover,.dropdown-item:focus { background: var(--app-accent-soft); color: var(--app-accent); }
.modal-content { border-radius: 8px; border: 1px solid var(--app-border); box-shadow: 0 24px 80px rgba(23,43,56,.2); } .modal-header,.modal-footer { padding: 20px 24px; border-color: var(--app-border); } .modal-body { padding: 24px; }
.alert { border-radius: 6px; font-size: .84rem; } .pagination { margin: 0; } .page-link { color: var(--app-accent); } .active > .page-link { background: #087f6b; border-color: #087f6b; }
.invoice-paper { border-top: 4px solid var(--app-accent); } .invoice-paper .table tbody tr:hover { background: transparent; }
.sheet-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--app-border); }
.sheet-scroll { max-height: 70vh; } .work-sheet thead { position: sticky; top: 0; z-index: 1; background: var(--app-surface); } .work-sheet .work-description { min-width: 240px; max-width: 360px; overflow-wrap: anywhere; } .work-sheet .form-check-input { width: 20px; height: 20px; }
.work-edit-row { background: var(--app-accent-soft); } .work-edit-row > td { padding: 24px; }
.work-sheet thead th:last-child,.work-sheet tbody > tr:not(.work-edit-row) > td:last-child { position: sticky; right: 0; background: var(--app-surface); box-shadow: -3px 0 4px rgba(23,43,56,.04); } .work-sheet thead th:last-child { z-index: 2; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; max-width: 1160px; margin: auto; padding: 64px; }
.auth-story { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px 0; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; letter-spacing: -.03em; } .auth-story h1 { font-size: 3.4rem; line-height: 1.08; letter-spacing: -.06em; font-weight: 650; margin: 16px 0 24px; }
.auth-description { color: var(--app-muted); font-size: 1rem; max-width: 330px; } .auth-feature { display: flex; gap: 12px; color: var(--app-accent); font-size: .8rem; }
.auth-card { width: 100%; max-width: 460px; } .auth-card h1 { letter-spacing: -.035em; } .auth-card .card { box-shadow: 0 8px 40px rgba(23,43,56,.05); } .auth-mobile-brand { display: none; }
.sidebar-backdrop { display: none; } :focus-visible { outline: 3px solid var(--app-accent); outline-offset: 3px; } [data-remove-item] { min-width: 36px; min-height: 36px; }
.app-content { animation: content-enter 220ms var(--app-ease); } @keyframes content-enter { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1199.98px) { .app-content { padding: 24px; } .app-topbar { padding: 12px 24px; } .workflow-bar a { padding: 16px; } .workflow-bar small { max-width: 140px; } }
@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; z-index: 1040; left: 0; transform: translateX(-100%); transition: transform 200ms var(--app-ease); }
    .sidebar-open { overflow: hidden; } .sidebar-open .app-sidebar { transform: none; box-shadow: 8px 0 40px rgba(0,0,0,.15); }
    .sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(16,28,35,.35); z-index: 1035; }
    .app-content { padding: 24px; } .auth-wrap { gap: 40px; padding: 40px; } .auth-story h1 { font-size: 2.8rem; }
}
@media (max-width: 767.98px) {
    .app-content { padding: 20px 16px; } .app-topbar { padding: 10px 16px; min-height: 60px; gap: 8px; } .global-search { min-width: 0; } .global-search input { width: 50px; }
    .app-topbar .btn { min-width: 38px; } .page-head { align-items: flex-start; margin-bottom: 20px; } .page-head h1 { font-size: 1.45rem; } .page-head > .d-flex { width: 100%; }
    .stat { padding: 20px; } .stat .value { font-size: 1.65rem; } .workflow-bar { grid-template-columns: 1fr; } .workflow-bar a + a { border-left: 0; border-top: 1px solid var(--app-border); } .workflow-bar small { max-width: none; }
    .dashboard-controls { width: 100%; justify-content: space-between; } .chart-box { height: 230px; } .table > thead th,.table > tbody td { padding-left: 16px; padding-right: 16px; }
    .auth-wrap { display: block; min-height: 100vh; padding: 32px 20px; } .auth-story { display: none; } .auth-card { margin: 40px auto; } .auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 1.2rem; }
    .card-body.p-4 { padding: 20px !important; } .modal-header,.modal-footer,.modal-body { padding: 20px; }
    [data-period-custom] { flex-wrap: wrap; }
}
@media (pointer: coarse) { .btn,.app-nav a,.dropdown-item { min-height: 44px; } .form-control,.form-select { min-height: 44px; font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .app-sidebar,.app-topbar,.no-print,.skip-link { display: none !important; } body { background: #fff; color: #172b38; } .app-content { padding: 0; max-width: none; animation: none; } .card { border: 0; box-shadow: none; } }

.sidebar-close { position: absolute; top: 8px; right: 8px; padding: 4px 7px; }
.nav-pills { --bs-nav-pills-link-active-bg: #087f6b; }