:root { color-scheme: light; --navy:#243248; --ink:#253041; --muted:#6b7686; --line:#dfe4ea; --surface:#fff; --surface-soft:#f7f9fc; --canvas:#f4f6f8; --accent:#3f51b5; --quickbar-height:54px; }
[data-theme="dark"] { color-scheme: dark; --navy:#e8edf5; --ink:#e8edf5; --muted:#aab4c3; --line:#323946; --surface:#1b2028; --surface-soft:#242b35; --canvas:#12151b; }
:root { --quickbar-visual-top:0px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter, Pretendard, "Noto Sans KR", sans-serif; }
button,input,select { font:inherit; }
.page-shell { width:min(100% - 32px, 1680px); margin:0 auto; padding:32px 0 56px; }
body.has-quickbar .page-shell { padding-top:calc(32px + var(--quickbar-height) + env(safe-area-inset-top, 0px)); }
.page-header { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.page-header > div { min-width:0; max-width:100%; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; }
h1 { margin:0; color:var(--navy); font-size:30px; }
.app-navigation { position:fixed; top:0; left:0; right:0; z-index:99999; width:100%; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin-top:0; max-width:100%; min-height:var(--quickbar-height); overflow-x:auto; overflow-y:hidden; padding:calc(10px + env(safe-area-inset-top, 0px)) 0 8px; white-space:nowrap; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(36,50,72,.08); scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.app-navigation .nav-link { flex:0 0 auto; }
.theme-toggle { flex:0 0 36px; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); cursor:pointer; }
.nav-link { padding:7px 11px; border-radius:7px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }.nav-link.active,.nav-link:hover { color:var(--accent); background:#edf0ff; }
.nav-logout-form { display:inline-flex; margin:14px 0 0 8px; }
.nav-logout-button { padding:7px 11px; border:1px solid #d8dce8; border-radius:7px; background:#fff; color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; }
.nav-logout-button:hover { color:var(--accent); border-color:var(--accent); }
.analytics-table-wrap { overflow-x:auto; }
.analytics-table { min-width:1100px; }
.analytics-table th,.analytics-table td { white-space:nowrap; }
.analytics-table a { color:var(--accent); font-weight:700; text-decoration:none; }
.analytics-comparison>div { grid-template-columns:1.2fr repeat(4,1fr); }
.nav-count { display:inline-flex; min-width:18px; height:18px; align-items:center; justify-content:center; margin-left:3px; padding:0 5px; border-radius:10px; color:#fff; background:var(--accent); font-size:10px; }
.subtitle { margin:0; color:var(--muted); font-size:14px; }
.filter-panel { position:sticky; top:0; z-index:5; padding:18px; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px rgba(36,50,72,.06); backdrop-filter:blur(8px); }
.filter-grid { display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)) auto; gap:12px; align-items:end; }
label { display:grid; gap:6px; color:#596577; font-size:12px; font-weight:700; }
input,select { min-height:40px; border:1px solid #ccd3dc; border-radius:7px; background:#fff; color:var(--ink); padding:8px 10px; }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea { border-color:var(--line); background:var(--surface); color:var(--ink); }
[data-theme="dark"] .table-card,[data-theme="dark"] .metric-card,[data-theme="dark"] .dashboard-panel,[data-theme="dark"] .filter-panel,[data-theme="dark"] .card,[data-theme="dark"] table { background:var(--surface); color:var(--ink); }
[data-theme="dark"] th,[data-theme="dark"] td { border-color:var(--line); }
[data-theme="dark"] .nav-logout-button { background:var(--surface); color:var(--muted); border-color:var(--line); }
[data-theme="dark"] .filter-panel,[data-theme="dark"] .candidate-panel,[data-theme="dark"] .pending-card,[data-theme="dark"] .month-toolbar,[data-theme="dark"] .profit-kpis article,[data-theme="dark"] .invoice-summary div,[data-theme="dark"] .platform-grid>article,[data-theme="dark"] .mileage-status-grid article,[data-theme="dark"] .expense-category-grid div { background:var(--surface-soft,#242b35) !important; color:var(--ink); border-color:var(--line); }
[data-theme="dark"] th { background:var(--surface-soft,#242b35) !important; color:var(--muted); }
[data-theme="dark"] tbody tr:hover td { background:#29313c !important; }
[data-theme="dark"] .selected-row td { background:#242d47 !important; }
[data-theme="dark"] .collection-actions button,[data-theme="dark"] .danger-button,[data-theme="dark"] .quick-actions button,[data-theme="dark"] .bulk-action-bar button,[data-theme="dark"] .month-close-button { background:var(--surface) !important; color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .error-card,[data-theme="dark"] .empty-state,[data-theme="dark"] .notice,[data-theme="dark"] .status-box,[data-theme="dark"] .alert,[data-theme="dark"] .settings-message,[data-theme="dark"] .linked-box { background:var(--surface-soft,#242b35) !important; color:var(--ink); border-color:var(--line); }
[data-theme="dark"] label,[data-theme="dark"] .section-kicker { color:var(--muted); }
[data-theme="dark"] .nav-link.active,[data-theme="dark"] .nav-link:hover { background:#29345d; color:var(--accent); }
[data-theme="dark"] .save-button { background:var(--accent) !important; color:#fff !important; }
[data-theme="dark"] .bulk-action-bar { background:var(--surface-soft); border-color:var(--line); }
[data-theme="dark"] .summary-grid article,[data-theme="dark"] .metric-card,[data-theme="dark"] .dashboard-panel,[data-theme="dark"] .table-card,[data-theme="dark"] .card { background:var(--surface) !important; color:var(--ink); border-color:var(--line); }
[data-theme="dark"] .auto-match-row td { background:#302c20 !important; }
[data-theme="dark"] .reason-list span,[data-theme="dark"] .match-detail { background:#3a3020; color:#f0c878; }
[data-theme="dark"] .platform.onecall,[data-theme="dark"] .platform.call24,[data-theme="dark"] .collection-미수,[data-theme="dark"] .collection-자동매칭,[data-theme="dark"] .collection-수금완료,[data-theme="dark"] .collection-현금수금,[data-theme="dark"] .collection-확인필요,[data-theme="dark"] .settlement-완료,[data-theme="dark"] .settlement-진행중,[data-theme="dark"] .settlement-확인필요,[data-theme="dark"] .status-대상,[data-theme="dark"] .status-비대상,[data-theme="dark"] .status-미확인 { background:#303846 !important; color:var(--ink) !important; }
[data-theme="dark"] .completion-ring { background:radial-gradient(circle closest-side,var(--surface) 76%,transparent 77% 99%),conic-gradient(var(--accent) calc(var(--rate)*1%),#39414d 0); }
[data-theme="dark"] .bar-track { background:#343c47; }
[data-theme="dark"] .status-list>div { border-bottom-color:var(--line); }
[data-theme="dark"] th:first-child,[data-theme="dark"] td:first-child { background:var(--surface) !important; }
[data-theme="dark"] th:first-child { background:var(--surface-soft) !important; }
[data-theme="dark"] .dashboard-panel .mini-table .mini-head { background:#28313d; color:#d7deea; border:1px solid #323c49; }
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder { color:#8792a3; }
input:focus,select:focus { outline:2px solid rgba(63,81,181,.2); border-color:var(--accent); }
.primary-button,.save-button { border:0; border-radius:7px; cursor:pointer; font-weight:700; }
.primary-button { height:40px; padding:0 24px; color:#fff; background:var(--accent); }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0; }
.summary-grid article { display:flex; justify-content:space-between; align-items:baseline; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.summary-grid span,.table-heading span { color:var(--muted); font-size:13px; }
.summary-grid strong { color:var(--navy); font-size:20px; }
.table-card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.table-heading { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
.table-heading h2 { margin:0; font-size:17px; }
.table-scroll { overflow:auto; max-height:calc(100vh - 330px); }
table { width:100%; min-width:1720px; border-collapse:separate; border-spacing:0; font-size:13px; }
th,td { padding:11px 12px; border-bottom:1px solid #edf0f3; white-space:nowrap; vertical-align:middle; }
th { position:sticky; top:0; z-index:2; background:#f8f9fb; color:#566274; text-align:left; font-size:12px; }
tbody tr:hover td { background:#fafbfc; }
.number { text-align:right; font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.platform.onecall { background:#edf0ff; color:#4051aa; }.platform.call24 { background:#eaf6f4; color:#26766b; }
.load.single { background:#eef2f5; color:#536171; }.load.mixed { background:#fff1dc; color:#96600e; }
.invoice.issued { background:#e6f4ea; color:#287746; }.invoice.not-issued { background:#f2f3f5; color:#687282; }
.collection-미수 { background:#f2f3f5; color:#616b79; }.collection-자동매칭 { background:#fff4d8; color:#8a5a00; }.collection-수금완료 { background:#e4f4e9; color:#237341; }.collection-현금수금 { background:#e6f2ff; color:#265f94; }.collection-확인필요 { background:#fee9e7; color:#a13e35; }
.settlement-완료 { background:#e4f4e9; color:#237341; }.settlement-진행중 { background:#eef2f5; color:#526070; }.settlement-확인필요 { background:#fff0df; color:#90570d; }
.collection-actions { display:flex; gap:4px; }.collection-actions button,.danger-button { padding:6px 8px; border:1px solid #ccd3dc; border-radius:6px; background:#fff; color:#4c5868; cursor:pointer; font-size:11px; }.collection-actions button:hover { border-color:var(--accent); color:var(--accent); }
.inline-select { min-width:92px; height:34px; min-height:34px; padding:4px 8px; font-weight:700; }
.status-대상 { color:#8a4c13; background:#fff8ed; }.status-비대상 { color:#526070; background:#f4f6f8; }.status-미확인 { color:#6b7280; }
.memo-input { width:190px; min-height:34px; height:34px; }
.save-button { padding:8px 13px; color:#fff; background:var(--navy); }
.empty { padding:48px; color:var(--muted); text-align:center; }
.error-card { width:min(92%,560px); margin:12vh auto; padding:32px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.error-card h1 { font-size:22px; }.error-card a { color:var(--accent); }
.deposit-form { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.5fr auto; gap:12px; align-items:end; }.deposit-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr); gap:16px; margin-top:18px; }.deposit-table { min-width:880px; }.deposit-table a { color:var(--accent); font-weight:700; text-decoration:none; }.selected-row td { background:#f4f6ff; }.candidate-panel { padding:20px; background:#fff; border:1px solid var(--line); border-radius:12px; }.candidate-panel h2 { margin:0 0 14px; font-size:17px; }.candidate-panel>p { color:var(--muted); font-size:14px; line-height:1.6; }.candidate-list { display:grid; gap:10px; }.candidate-card,.linked-box { padding:14px; border:1px solid var(--line); border-radius:9px; }.candidate-card strong { display:block; margin-top:6px; }.candidate-card p { margin:8px 0; font-size:13px; }.candidate-card ul { margin:8px 0 12px; padding-left:18px; color:var(--muted); font-size:12px; }.candidate-rank { color:var(--accent); font-size:11px; font-weight:800; }.linked-box { margin-bottom:14px; background:#f5faf6; }.danger-button { color:#a13e35; border-color:#e5b8b4; }
.pending-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }.pending-card { display:grid; gap:6px; padding:17px 18px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; text-decoration:none; }.pending-card.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(63,81,181,.1); }.pending-card span,.pending-card small { color:var(--muted); font-size:12px; }.pending-card strong { color:var(--navy); font-size:21px; }.pending-table { min-width:1550px; }.auto-match-row td { background:#fffaf0; }.match-detail { margin-top:6px; color:#8a5a00; font-size:11px; }.reason-list { display:flex; flex-wrap:wrap; gap:4px; }.reason-list span { padding:4px 7px; border-radius:5px; background:#fff0df; color:#87530d; font-size:11px; }.overdue-label { display:block; margin-top:5px; color:#9a5c36; font-size:10px; }.quick-actions { display:grid; gap:6px; }.quick-actions form { display:flex; gap:4px; }.quick-actions button { padding:6px 8px; border:1px solid #ccd3dc; border-radius:6px; background:#fff; cursor:pointer; font-size:11px; }.quick-actions select { min-height:30px; height:30px; padding:3px 6px; font-size:11px; }
.month-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:10px; }.month-toolbar div { display:grid; gap:3px; text-align:center; }.month-toolbar strong { color:var(--navy); font-size:22px; }.month-toolbar span { color:var(--muted); font-size:12px; }.month-button { padding:8px 12px; color:var(--accent); background:#f2f4ff; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.metric-card { display:grid; gap:8px; padding:18px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; text-decoration:none; }.metric-card span { color:var(--muted); font-size:12px; }.metric-card strong { color:var(--navy); font-size:22px; }.metric-card.attention { border-left:3px solid #bb7523; }.metric-card.attention strong { color:#87530d; }
.dashboard-grid { display:grid; gap:16px; margin-bottom:16px; }.dashboard-grid.two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-panel { margin-bottom:16px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px; }.dashboard-grid .dashboard-panel { margin-bottom:0; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }.panel-heading h2 { margin:2px 0 0; color:var(--navy); font-size:18px; }.panel-heading a { color:var(--accent); font-size:12px; font-weight:700; text-decoration:none; }.section-kicker { margin:0; color:#8993a2; font-size:9px; font-weight:800; letter-spacing:.13em; }
.status-list { display:grid; gap:0; }.status-list>div { display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; padding:10px 0; border-bottom:1px solid #edf0f3; }.status-list>div:last-child { border-bottom:0; }.status-list span { color:var(--muted); font-size:13px; }.status-list strong { color:var(--navy); font-size:13px; }.status-list em { min-width:110px; color:var(--ink); font-size:13px; font-style:normal; text-align:right; }.status-list.compact>div { grid-template-columns:1fr auto; min-width:170px; }
.completion-layout { display:flex; align-items:center; justify-content:space-around; gap:28px; }.completion-ring { --rate:0; display:grid; place-content:center; width:132px; height:132px; flex:0 0 auto; border-radius:50%; background:radial-gradient(circle closest-side,#fff 76%,transparent 77% 99%),conic-gradient(var(--accent) calc(var(--rate)*1%),#e7eaf0 0); text-align:center; }.completion-ring strong { color:var(--navy); font-size:25px; }.completion-ring span { color:var(--muted); font-size:11px; }
.invoice-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.invoice-summary div { display:grid; gap:7px; padding:13px; background:#f7f8fa; border-radius:8px; }.invoice-summary span { color:var(--muted); font-size:11px; }.invoice-summary strong { color:var(--navy); font-size:18px; }
.mini-table { min-width:0; }.mini-table>div { display:grid; grid-template-columns:1fr .65fr 1fr 1fr; gap:12px; padding:10px 8px; border-bottom:1px solid #edf0f3; font-size:12px; }.mini-table>div span:not(:first-child),.mini-table>div strong:not(:first-child) { text-align:right; }.mini-table .mini-head { color:var(--muted); background:#f7f8fa; border-radius:6px; font-size:10px; font-weight:700; }.mini-table strong { color:var(--navy); }
.platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.platform-grid>article { padding:17px; background:#f8f9fb; border-radius:9px; }.platform-grid>article>strong { display:block; margin:12px 0; color:var(--navy); font-size:22px; }.platform-grid dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }.platform-grid dl div { display:grid; gap:3px; }.platform-grid dt { color:var(--muted); font-size:10px; }.platform-grid dd { margin:0; color:var(--ink); font-size:13px; font-weight:700; }
.region-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.region-columns h3 { margin:0 0 9px; color:var(--muted); font-size:12px; }.region-columns ol { margin:0; padding:0; list-style:none; }.region-columns li { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #edf0f3; font-size:12px; }.region-columns li strong { color:var(--navy); }
.daily-chart { display:grid; gap:10px; }.daily-row { display:grid; grid-template-columns:42px 1fr 92px; gap:9px; align-items:center; font-size:11px; }.daily-row time { color:var(--muted); }.daily-row>strong { color:var(--ink); text-align:right; }.bar-track { height:8px; overflow:hidden; background:#edf0f3; border-radius:5px; }.bar-track span { display:block; height:100%; background:#6574c8; border-radius:5px; }.empty-chart { margin:28px 0; color:var(--muted); font-size:13px; text-align:center; }
.bulk-action-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 16px 12px; padding:10px 12px; background:#f4f6ff; border:1px solid #d7dcf7; border-radius:8px; }.bulk-action-bar[hidden] { display:none; }.bulk-action-bar>strong { min-width:90px; color:var(--navy); font-size:13px; }.bulk-action-group { display:flex; align-items:center; gap:5px; padding-left:10px; border-left:1px solid #d7dce5; }.bulk-action-group span { margin-right:2px; color:var(--muted); font-size:10px; font-weight:700; }.bulk-action-bar button { padding:6px 9px; color:var(--ink); background:#fff; border:1px solid #ccd3dc; border-radius:6px; font-size:11px; cursor:pointer; }.bulk-action-bar button:hover { color:var(--accent); border-color:#9da8df; }.bulk-action-bar button:disabled { opacity:.55; cursor:wait; }.bulk-clear { margin-left:auto; }.select-column { width:38px; min-width:38px; text-align:center; }.select-column input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.deposit-layout > .table-card > .table-heading { padding:0 18px 14px; }
.deposit-layout > .table-card > .table-heading { margin-bottom:20px; padding-bottom:0; }
.deposit-layout > .table-card > #bulk-delete-form { display:flex; flex-direction:column; gap:20px; margin:0; padding:0 0 16px; }
.deposit-layout > .table-card > #bulk-delete-form .bulk-action-bar { margin:0 16px; padding:14px 16px; border-radius:10px; }
.deposit-layout > .table-card > #bulk-delete-form .table-scroll { margin:0 16px; }
.deposit-table thead th { padding-top:16px; padding-bottom:16px; }
.month-title-row { display:flex!important; grid-auto-flow:column; align-items:center; justify-content:center; gap:8px!important; }.badge.month-close.open { color:#6c5c2c; background:#f4f0df; }.badge.month-close.closed { color:#237341; background:#e4f4e9; }.month-toolbar small { color:var(--muted); font-size:10px; }.month-close-button { padding:6px 10px; color:var(--accent); background:#fff; border:1px solid #b9c1ed; border-radius:6px; font-size:11px; cursor:pointer; }.month-close-button.reopen { color:#8b4a3d; border-color:#dfc1bb; }.month-close-reasons { display:flex!important; grid-auto-flow:initial!important; flex-wrap:wrap; justify-content:center; gap:4px!important; }.month-close-reasons span { padding:3px 6px; color:#87530d; background:#fff0df; border-radius:4px; font-size:9px; }.month-close-table { min-width:1050px; }.table-link { color:var(--accent); font-weight:700; text-decoration:none; }
@media (max-width:900px) { .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid.two-column { grid-template-columns:1fr; }.invoice-summary { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .month-toolbar { padding:13px; }.month-toolbar strong { font-size:18px; }.month-button { padding:7px 8px; font-size:11px; }.dashboard-kpis { grid-template-columns:1fr 1fr; }.metric-card { padding:14px; }.metric-card strong { font-size:17px; }.platform-grid { grid-template-columns:1fr; }.completion-layout { align-items:stretch; flex-direction:column; }.region-columns { gap:12px; }.mini-table { overflow-x:auto; }.mini-table>div { min-width:430px; }.dashboard-panel { padding:16px; } }
@media (max-width:640px) { .bulk-action-bar { position:sticky; left:0; z-index:4; margin:0 8px 10px; }.bulk-action-group { width:100%; padding:6px 0 0; border-top:1px solid #d7dce5; border-left:0; }.bulk-clear { margin-left:0; }.deposit-layout > .table-card > .table-heading { margin-bottom:12px; padding:0 12px; }.deposit-layout > .table-card > #bulk-delete-form { gap:12px; padding-bottom:12px; }.deposit-layout > .table-card > #bulk-delete-form .bulk-action-bar { margin:0 8px; padding:12px 14px; }.deposit-layout > .table-card > #bulk-delete-form .table-scroll { margin:0 8px; }.deposit-table thead th { padding-top:16px; padding-bottom:16px; } }

@media (max-width:1100px) { .filter-grid { grid-template-columns:repeat(4,minmax(130px,1fr)); }.subtitle { display:none; } }
@media (max-width:1100px) { .deposit-layout { grid-template-columns:1fr; }.deposit-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.deposit-form .primary-button { grid-column:1/-1; }.pending-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .page-shell { width:100%; padding:18px 12px 36px; }.page-header { align-items:start; }.filter-panel { position:static; padding:14px; }.filter-grid,.deposit-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.primary-button { grid-column:1/-1; }.summary-grid { grid-template-columns:1fr; gap:8px; }.summary-grid article { padding:13px 15px; }.table-heading span { display:none; }.table-scroll { max-height:none; } table { min-width:2050px; }.deposit-table { min-width:880px; } th:first-child,td:first-child { position:sticky; left:0; z-index:1; background:#fff; } th:first-child { z-index:3; background:#f8f9fb; } }
@media (max-width:768px) { .app-navigation { top:calc(var(--quickbar-visual-top, 0px) + env(safe-area-inset-top, 0px)); } }
@media (max-width:640px) { .pending-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.pending-table { min-width:1550px; } }
.expense-editor { position:static; margin-bottom:14px; }.expense-editor h2 { margin:0 0 14px; font-size:17px; }.expense-form { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; align-items:end; }.expense-form .primary-button { align-self:end; }.expense-filter { position:static; margin-bottom:14px; }.expense-table { min-width:1250px; }.expense-nature { color:#526070; background:#eef2f5; }.profit-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.profit-kpis article { display:grid; gap:7px; padding:16px; background:#f7f8fa; border-radius:8px; }.profit-kpis span,.expense-category-grid span { color:var(--muted); font-size:11px; }.profit-kpis strong { color:var(--navy); font-size:19px; }.profit-kpis .profit-result { background:#edf5ef; }.profit-kpis .profit-result strong { color:#237341; }.profit-details { padding-top:4px; }.expense-category-grid { display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; border-top:1px solid var(--line); }.expense-category-grid div { display:flex; gap:10px; align-items:center; padding:8px 11px; background:#f7f8fa; border-radius:7px; }.expense-category-grid strong { color:var(--navy); font-size:12px; }
@media (max-width:900px) { .expense-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.profit-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .expense-form { grid-template-columns:1fr 1fr; }.profit-kpis { grid-template-columns:1fr 1fr; } }
.settings-message { padding:12px 15px; color:#285f43; background:#e9f5ed; border-radius:8px; }.primary-link { display:inline-block; margin-top:16px; padding:9px 13px; color:#fff; background:var(--accent); border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; }.settings-actions { display:flex; gap:8px; margin-top:16px; }.vehicle-option { display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--line); border-radius:8px; }
.mileage-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.mileage-status-grid article { display:grid; gap:7px; padding:15px; background:#f7f8fa; border-radius:8px; }.mileage-status-grid span { color:var(--muted); font-size:11px; }.mileage-status-grid strong { color:var(--navy); font-size:16px; }
@media (max-width:700px) { .mileage-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.invoice-toolbar { position:static; display:flex; justify-content:space-between; gap:16px; align-items:end; }.invoice-toolbar .filter-grid { flex:1; grid-template-columns:repeat(3,minmax(140px,1fr)) auto; }.invoice-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }.invoice-ledger-table { min-width:1050px; }.masked-id { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
@media (max-width:900px) { .invoice-toolbar { align-items:stretch; flex-direction:column; }.invoice-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.invoice-candidates { display:grid; gap:8px; width:440px; padding:10px 0; }.invoice-candidates form { display:grid; gap:5px; padding:10px; border:1px solid var(--line); border-radius:7px; }.invoice-candidates span,.invoice-candidates small { color:var(--muted); font-size:11px; }.invoice-candidates .primary-button { height:32px; }
.fare-commission { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:500; }
.report-actions { display:flex; justify-content:flex-end; margin:12px 0; }
.report-download { display:inline-block; text-decoration:none; }
details { margin:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); overflow:hidden; }
details summary { display:flex; align-items:center; gap:14px; min-height:72px; padding:20px 24px; color:var(--ink); cursor:pointer; list-style:none; }
details summary::-webkit-details-marker { display:none; }
details summary::before { content:'▶'; flex:0 0 auto; color:var(--accent); font-size:18px; transition:transform .15s ease; }
details[open] summary::before { transform:rotate(90deg); }
details summary strong { color:var(--navy); font-size:17px; font-weight:700; }
details summary span { color:var(--muted); font-size:14px; }
details[open] summary { border-bottom:1px solid var(--line); background:#eef0ff; }
details > .table-scroll { margin:10px 12px 12px; }
details:hover { border-color:var(--accent); }
[data-theme="dark"] details { background:var(--surface-soft); }
[data-theme="dark"] details[open] summary { background:#29345d; }
@media (max-width:640px) { details { margin:10px 8px; } details summary { min-height:64px; padding:16px; gap:10px; flex-wrap:wrap; } details summary strong { font-size:15px; } details summary span { width:100%; padding-left:28px; font-size:13px; } }
/* Compact trip row actions. */
.table-scroll table td:last-child{vertical-align:middle;white-space:nowrap}.table-scroll table td:last-child>form{display:inline-flex;vertical-align:middle;margin:0}.table-scroll table td:last-child .save-button,.table-scroll table td:last-child .table-link,.table-scroll table td:last-child .danger-button{display:inline-flex;align-items:center;justify-content:center;min-height:28px;box-sizing:border-box;margin:0 2px 0 0;padding:5px 7px;line-height:1;white-space:nowrap}
/* Keep edit actions identical for links and injected buttons. */
.table-scroll table td:last-child .table-link{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}