:root { color-scheme: light; font-family: Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; --forest:#143c32; --forest-2:#1f5a49; --cream:#f5f3ee; --paper:#fffefa; --ink:#17231f; --muted:#6b7772; --line:#dfe4de; --danger:#a53b32; --gold:#b28a40; background:var(--cream); color:var(--ink); }
.brand-logo { display:block; object-fit:contain; background:transparent; border:0; border-radius:0; flex-shrink:0; }
.sidebar-brand .brand-logo { width:52px; height:52px; mix-blend-mode:screen; }
.sidebar-brand { isolation:isolate; background:var(--forest); }
.sidebar-brand { display:flex; align-items:center; gap:12px; }
.sidebar-brand .eyebrow { font-size:10px; letter-spacing:.1em; }
.sidebar-brand h2 { font-size:22px; }
.login-logo { margin:0 0 22px; width:76px; height:76px; }
.month-navigation { display:flex; align-items:end; gap:6px; min-width:0; }
.month-arrow { display:grid; place-items:center; padding:0; width:42px; height:44px; flex-shrink:0; }
.month-arrow .ui-icon { margin:0; }
.expense-status-controls { grid-column:1/-1; border-top:1px solid var(--line); padding-top:8px; font-size:13px; }
.expense-status-controls summary { cursor:pointer; color:#53605b; padding:5px 0; }
.expense-status-fields { display:grid; grid-template-columns:minmax(170px,1fr) 2fr; gap:12px; margin-top:12px; }
.expense-voided { background:#f3f1ec; border-left:3px solid var(--gold); padding:12px; border-radius:8px; }
.expense-voided .expense-status-controls summary { color:#75571f; font-weight:700; }
@media(max-width:620px) { .month-navigation { flex:1; } .month-navigation .month-picker { width:128px; min-width:0; } .month-arrow { width:36px; } .topbar-actions { flex-wrap:wrap; } .expense-status-fields { grid-template-columns:1fr; } }
* { box-sizing:border-box; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.ui-icon { display:inline-block; width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; margin-right:8px; }
.nav-item { display:flex; align-items:center; gap:10px; }
.nav-item .ui-icon { margin-right:0; }
.summary-label { display:flex; align-items:center; gap:8px; }
.summary-label .ui-icon { margin-right:0; }
.panel-heading h2 .ui-icon, .cash-count-fields legend .ui-icon { color:var(--forest-2); }
.status-badge .ui-icon { width:15px; height:15px; vertical-align:-3px; margin-right:5px; }
button[data-icon] { white-space:nowrap; }
@media(max-width:620px) { .summary-label { align-items:flex-start; gap:6px; } .summary-label .ui-icon { width:18px; height:18px; } }
body { margin:0; min-height:100vh; background:var(--cream); }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.eyebrow { margin:0 0 6px; color:var(--forest-2); font-size:11px; font-weight:800; letter-spacing:.16em; }
.eyebrow.light { color:#a9c9ba; } .muted { color:var(--muted); line-height:1.6; } .error { min-height:20px; color:var(--danger); font-size:14px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 20%,#315d50,var(--forest) 55%); }
.login-card { width:min(430px,100%); padding:42px; border-radius:28px; background:var(--paper); box-shadow:0 30px 80px #071b1560; }
.login-card h1 { margin:0; font-size:34px; } .stack { display:grid; gap:18px; margin-top:28px; }
label { display:grid; gap:8px; color:#42504b; font-size:13px; font-weight:700; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:white; color:var(--ink); outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--forest-2); box-shadow:0 0 0 3px #1f5a4918; }
.primary,.secondary { border:0; border-radius:10px; padding:11px 17px; font-weight:800; }
.primary { background:var(--forest); color:white; box-shadow:0 8px 18px #143c3228; } .primary:hover { background:var(--forest-2); }
.secondary { border:1px solid var(--line); background:white; color:var(--ink); } .small { padding:8px 12px; font-size:13px; }
.text-button { border:0; background:transparent; color:#d4e4dc; padding:4px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; align-content:start; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:28px 20px; background:var(--forest); color:white; }
.sidebar h2 { margin:0; font-size:24px; } .sidebar nav { display:grid; gap:8px; margin-top:46px; }
.nav-item { border:0; border-radius:10px; padding:12px 14px; background:transparent; color:#d8e5df; text-align:left; }
.nav-item.active { background:#ffffff18; color:white; font-weight:800; } .nav-item:disabled { cursor:default; opacity:.45; }
.user-card { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid #ffffff20; font-size:13px; }
main { min-width:0; padding:34px clamp(22px,4vw,58px) 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; }
.topbar h1 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.03em; } .topbar-actions { display:flex; align-items:end; gap:12px; } .month-picker { width:160px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.summary-card { padding:22px; border:1px solid #e5e7e1; border-radius:16px; background:var(--paper); }
.summary-card.highlight { background:var(--forest); color:white; border-color:var(--forest); }
.summary-card span { color:var(--muted); font-size:13px; font-weight:700; } .summary-card.highlight span { color:#bdd0c7; }
.summary-card strong { display:block; margin-top:10px; font-size:clamp(22px,2.2vw,31px); letter-spacing:-.03em; } .summary-card strong.negative { color:#e36b61; }
.account-summary { margin-bottom:18px; }.account-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.account-line { padding:18px 22px; border-right:1px solid var(--line); }.account-line:nth-child(3n) { border-right:0; }
.account-line span { display:block; color:var(--muted); font-size:12px; font-weight:700; }.account-line strong { display:block; margin-top:6px; font-size:19px; }
.account-warning { margin:0; padding:13px 22px; border-top:1px solid #eadcae; background:#fff8df; color:#765d14; font-size:13px; font-weight:700; }
.panel { border:1px solid #e2e5df; border-radius:18px; background:var(--paper); box-shadow:0 12px 28px #263b3210; overflow:hidden; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:21px 23px; border-bottom:1px solid var(--line); }
.panel-heading h2 { margin:0; font-size:19px; } .pill { margin:0; padding:7px 11px; border-radius:999px; background:#e8f0ec; color:var(--forest-2); font-size:12px; font-weight:800; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; }
th,td { padding:15px 22px; border-bottom:1px solid #eceee9; text-align:right; white-space:nowrap; font-size:14px; }
th:first-child,td:first-child { text-align:left; } th { color:var(--muted); font-size:12px; }
.payroll-table input,.payroll-table select { min-width:110px; padding:8px 9px; }.payroll-table td { padding:11px 12px; }.payroll-table td:first-child { font-weight:800; }
.row-action { border:0; background:transparent; color:var(--forest-2); font-weight:800; }
.reconciliation-grid { margin-bottom:18px; }.status-badge { display:inline-block; padding:6px 9px; border-radius:999px; font-size:12px; font-weight:800; }
.status-badge.matched { background:#e1f1e8; color:#24613f; }.status-badge.warning { background:#fff0cc; color:#7a5710; }.status-badge.missing { background:#fbe5e1; color:#8b382f; }
.match-detail { color:var(--muted); font-size:12px; }.outstanding-panel { margin-top:18px; }.outstanding-list { display:grid; gap:9px; padding:18px 22px 22px; }
.outstanding-row { display:grid; grid-template-columns:110px 110px 1fr auto; gap:16px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:white; font-size:13px; }.outstanding-row strong { text-align:right; }
.empty { padding:55px 20px; text-align:center; color:var(--muted); } .empty span { display:block; color:var(--ink); font-size:18px; font-weight:800; }
.entry-layout { display:grid; gap:17px; } .form-panel { padding-bottom:23px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; padding:22px; } .form-panel>label { margin:0 22px; }
.expense-list { display:grid; gap:10px; padding:18px 22px 0; }
.work-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:18px 22px 0; }
.work-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:white; }
.work-row strong { display:block; font-size:14px; }.work-row small { color:var(--muted); }.work-control { display:flex; align-items:center; gap:8px; }
.work-control input[type="checkbox"] { width:22px; height:22px; accent-color:var(--forest-2); }.work-control input[type="number"] { width:95px; }
.expense-row { display:grid; grid-template-columns:1.2fr .7fr .9fr 1fr 1.1fr 44px; gap:10px; align-items:end; }
.entry-hint { margin:14px 22px; color:var(--muted); font-size:13px; line-height:1.6; }
.inactive-staff { grid-column:1/-1; border:1px solid var(--line); border-radius:12px; padding:12px; }
.inactive-staff summary { cursor:pointer; font-weight:600; }
.inactive-staff .work-row { margin-top:10px; }
.expense-row.bank { grid-template-columns:1.15fr .75fr .9fr .75fr .9fr 1fr 44px; }
.monthly-row { display:grid; gap:14px 12px; align-items:start; }
.monthly-total { display:flex; align-items:center; justify-content:flex-end; gap:22px; margin:20px 22px 0; padding-top:17px; border-top:1px solid var(--line); }
.monthly-total span { color:var(--muted); font-weight:700; }.monthly-total strong { font-size:23px; }
.remove-row { width:40px; height:40px; border:1px solid #efd7d3; border-radius:10px; background:#fff7f5; color:var(--danger); }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; } #form-status { margin-right:auto; color:var(--forest-2); font-weight:700; }
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;align-items:center;gap:20px;padding:15px 20px}.sidebar nav{display:flex;margin:0;overflow-x:auto}.user-card{margin:0 0 0 auto;padding:0;border:0;gap:10px}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}.account-line:nth-child(3n){border-right:1px solid var(--line)}.account-line:nth-child(2n){border-right:0}}
@media(max-width:620px){main{padding:24px 14px 50px}.sidebar>div:first-child{display:none}.sidebar{display:flex;overflow-x:auto;padding:10px 14px}.sidebar nav{order:0;gap:4px;overflow:visible}.nav-item{padding:10px 12px;white-space:nowrap}.nav-item:disabled{display:none}.user-card{order:1;margin-left:auto;white-space:nowrap}.user-card span{display:none}.topbar{align-items:flex-start;flex-direction:column}.topbar-actions{width:100%}.month-picker{flex:1;width:auto}.summary-grid{grid-template-columns:1fr 1fr}.summary-card{padding:16px}.account-breakdown{grid-template-columns:1fr}.account-line,.account-line:nth-child(2n),.account-line:nth-child(3n){border-right:0;border-bottom:1px solid var(--line)}.form-grid,.work-list{grid-template-columns:1fr}.expense-row,.expense-row.bank,.monthly-row{grid-template-columns:1fr 1fr;padding-bottom:14px;border-bottom:1px solid var(--line)}.outstanding-row{grid-template-columns:1fr 1fr}.outstanding-row strong{text-align:left}.remove-row{grid-column:2;justify-self:end}.form-actions{flex-wrap:wrap}#form-status{width:100%}}
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
#directory-view > .panel { padding: 22px; margin-bottom: 18px; }
#directory-view .panel-heading { padding: 0 0 18px; }
#directory-view .provider-row .remove-row { grid-column: -2 / -1; }
.directory-grid > *, .provider-row > * { min-width: 0; }
#directory-accounts, #directory-companies { max-height: 380px; overflow-y: auto; }
.directory-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e4e9e6; overflow-wrap: anywhere; }
.directory-item small { display: block; color: #63736b; margin-top: 5px; }
.directory-item button { flex-shrink: 0; }
.directory-main-panel { padding: 22px; }
.directory-main-panel .panel-heading { padding: 0 0 18px; }
.directory-explainer { margin: 14px 0 22px; font-size: 13px; color: var(--muted); }
.directory-explainer summary, .directory-accounts-section summary { cursor: pointer; }
.directory-explainer p { max-width: 900px; margin: 10px 0; }
.directory-toolbar { display: flex; align-items: end; gap: 16px; margin-bottom: 26px; }
.directory-toolbar label { flex: 1; min-width: 0; }
.directory-toolbar button { flex-shrink: 0; min-height: 44px; }
.directory-company-section h3 { font-size: 17px; margin: 0 0 14px; }
.company-category-filter { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; padding: 5px; border: 1px solid #dce4de; border-radius: 12px; background: #eef2ef; }
.company-category-filter button { min-width: 0; padding: 11px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #52655b; font-size: .88rem; box-shadow: none; line-height: 1.5; }
.company-category-filter button[aria-pressed="true"] { background: #153f35; color: #fff; }
.company-category-filter button:focus-visible { outline: 2px solid #397964; outline-offset: 2px; }
.category-count { display: inline-block; margin-left: 4px; font-size: .8em; font-variant-numeric: tabular-nums; opacity: .85; }
.company-filter-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.company-filter-hint, #company-filter-status { font-size: 12px; margin: 0; }
.directory-company-section #directory-companies { max-height: 600px; padding-right: 12px; scrollbar-gutter: stable; }
.directory-company-section .directory-item { padding: 17px 0; }
.directory-company-section .directory-item > div { min-width: 0; }
.directory-company-section .directory-item strong { font-size: 15px; }
.directory-company-section .directory-item small { font-size: 12px; line-height: 1.6; }
.directory-company-section .directory-item button { padding: 9px 15px; font-size: 13px; }
.directory-accounts-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.directory-accounts-section summary { font-size: 15px; font-weight: 700; }
.directory-accounts-section summary span { font-size: 12px; font-weight: 400; margin-left: 10px; }
.directory-accounts-section > p { font-size: 13px; }
#directory-status:empty { display: none; }
@media (max-width: 850px) { .company-category-filter { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 520px) {
  .directory-toolbar { flex-wrap: wrap; gap: 12px; }
  .directory-toolbar label { flex-basis: 100%; }
  .directory-toolbar button { margin-left: auto; }
  .company-category-filter button { padding: 9px 3px; font-size: 12px; }
  .company-category-filter .category-detail { display: none; }
  .directory-company-section #directory-companies { padding-right: 4px; }
}
.provider-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0; margin: 12px 0; border-bottom: 1px solid #dfe7e2; }
#directory-status { color: #7a4314; white-space: pre-wrap; }
#provider-preview { padding: 16px; background: #edf5f0; border-radius: 10px; line-height: 1.8; overflow-wrap: anywhere; }
@media (max-width: 700px) { .directory-grid, .provider-row { grid-template-columns: minmax(0, 1fr); } }
.cash-count-fields { margin: 8px 22px 22px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.cash-count-fields legend { font-size: 14px; font-weight: 700; }
.cash-count-fields .form-grid { padding: 12px 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
.cash-count-fields .entry-hint { margin: 10px 0; }
.dashboard-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.daily-table-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.daily-sort-label { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; }
.daily-sort-label select { width:auto; padding:8px 10px; font-size:13px; }
#daily-table .profit-positive { color:#207044; font-weight:800; }
@media(max-width:620px) {
  .daily-table-heading { align-items:flex-start; flex-wrap:wrap; gap:14px; }
  .daily-table-controls { width:100%; justify-content:space-between; gap:10px; }
  .daily-sort-label { font-size:12px; }
}
.dashboard-controls p { margin:0; max-width:650px; color:var(--muted); font-size:13px; line-height:1.7; }
.view-switch { display:flex; flex-shrink:0; padding:4px; gap:4px; background:#e7ece6; border-radius:12px; }
.view-switch button { border:0; border-radius:9px; padding:9px 14px; background:transparent; color:#42504b; font-weight:700; }
.view-switch button[aria-pressed="true"] { background:var(--forest); color:white; box-shadow:0 2px 5px #143c3220; }
button:focus-visible { outline:3px solid #bd8738; outline-offset:3px; }
#dashboard-view[data-density="simple"] .detail-only { display:none; }
#dashboard-view[data-density="simple"] .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#dashboard-view > .account-warning { border:1px solid #eadcae; border-radius:12px; margin-bottom:18px; line-height:1.6; }
@media(max-width:620px) {
  .dashboard-controls { flex-direction:column-reverse; align-items:stretch; gap:12px; }
  .view-switch button { flex:1; }
  #dashboard-view[data-density="simple"] .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dashboard-view[data-density="simple"] .summary-card { min-width:0; padding:14px; }
  #dashboard-view[data-density="simple"] .summary-card strong { font-size:20px; overflow-wrap:anywhere; }
  #dashboard-view[data-density="simple"] .summary-card.highlight { grid-column:1/-1; }
  #dashboard-view[data-density="simple"] table { table-layout:fixed; }
  #dashboard-view[data-density="simple"] th, #dashboard-view[data-density="simple"] td { padding:12px 5px; white-space:normal; font-size:12px; }
  #dashboard-view[data-density="simple"] th:nth-child(1) { width:27%; }
  #dashboard-view[data-density="simple"] th:nth-child(2) { width:27%; }
  #dashboard-view[data-density="simple"] th:nth-child(5) { width:31%; }
  #dashboard-view[data-density="simple"] th:nth-child(6) { width:15%; }
  #dashboard-view[data-density="simple"] td { overflow-wrap:anywhere; }
}
.expense-row { grid-template-columns: 1.2fr .7fr .9fr 1fr 1fr 1fr 44px; }
.expense-row.bank { grid-template-columns: 1.1fr .7fr .9fr .7fr .8fr 1fr 1fr 44px; }
.payee-lookup { grid-column:1/-1; min-width:0; border:1px solid var(--line); border-radius:10px; background:#f4f8f4; padding:12px; }
.payee-lookup summary { cursor:pointer; color:var(--forest-2); font-size:13px; font-weight:700; }
.lookup-help, .lookup-status { font-size:12px; color:var(--muted); line-height:1.7; margin:10px 0; }
.lookup-search { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.lookup-search label { flex:1; min-width:180px; }
.lookup-results { display:grid; gap:8px; }
.lookup-company { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; background:white; border-radius:8px; }
.lookup-company > div { min-width:0; overflow-wrap:anywhere; }
.lookup-company strong { font-size:14px; }.lookup-company small { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.lookup-company button { flex-shrink:0; }
.lookup-actions { display:flex; flex-wrap:wrap; gap:8px; }
.staff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0; }
.staff-card { min-width:0; padding:16px; background:#f1f6f1; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.staff-card > div { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.staff-card p { margin:12px 0 8px; font-weight:700; }.staff-card small { display:block; color:var(--muted); line-height:1.8; }
.staff-inactive { background:#f6f5f0; }.staff-card .pill { font-size:11px; }
.staff-flags { display:flex; flex-wrap:wrap; gap:18px; }.staff-flags label { display:flex; flex-direction:row; align-items:center; gap:8px; }.staff-flags input { width:18px; height:18px; }
#staff-editor, .staff-history { padding:16px 0; border-top:1px solid var(--line); } #staff-editor summary,.staff-history summary { cursor:pointer; font-weight:700; color:var(--forest); }
#staff-form { margin-top:20px; } #staff-history p { line-height:1.8; padding-bottom:10px; border-bottom:1px solid var(--line); }
@media(max-width:620px) { .staff-grid { grid-template-columns:minmax(0,1fr); } #staff-form .form-grid {grid-template-columns:minmax(0,1fr);} }
.classification-selection { grid-column:1/-1; font-size:12px; line-height:1.7; padding:10px 12px; border-left:3px solid #86ab92; background:#edf4ed; overflow-wrap:anywhere; }
.classification-selection p { margin:0; }.classification-selection button { margin:8px 8px 0 0; }
@media(max-width:620px) { .lookup-company { align-items:stretch; flex-direction:column; } .lookup-search label { min-width:0; flex-basis:100%; } }
@media(max-width:1100px) { .expense-row,.expense-row.bank,.monthly-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .cash-count-fields .form-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:620px) {
  .sidebar > .sidebar-brand:first-child { display:flex; flex:0 0 42px; margin-right:8px; }
  .sidebar-brand > div { display:none; }
  .sidebar-brand .brand-logo { width:38px; height:38px; }
}

/* Daily entry: the routine fields stay visible; uncommon controls share one fold. */
#daily-form .form-actions { flex-wrap:wrap; }
#closed-day-state { flex:0 0 100%; display:flex; align-items:center; gap:8px; }
#closed-day-state.hidden { display:none; }
#is-closed-day { width:auto; }
#closed-day-button[hidden] { display:none; }
.closed-day-badge { display:block; color:var(--muted); font-size:14px; }
.daily-profit-preview { flex:0 0 100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.daily-profit-preview > div { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.daily-profit-preview > div:nth-child(2) { border-color:#8fb5a0; }
.daily-profit-preview span { display:block; font-size:14px; color:var(--muted); line-height:1.5; }
.daily-profit-preview output { display:block; margin-top:8px; font-size:clamp(18px,2vw,24px); font-weight:800; overflow-wrap:anywhere; }
.daily-profit-preview .profit-positive { color:#237749; }
.daily-profit-preview .negative { color:var(--danger); }
.daily-profit-preview > p { grid-column:1/-1; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
#daily-form .form-grid { align-items:start; }
#daily-form .form-panel { overflow:visible; }
#daily-form label { font-size:14px; }
#daily-form .expense-row { grid-template-columns:1.4fr .7fr .9fr 1fr 40px; }
#daily-form .expense-row.bank { grid-template-columns:1.4fr .8fr 1fr .7fr .9fr 1fr 40px; }
#daily-form .expense-row { align-items:start; }
#daily-form .expense-row > label { min-width:0; }
#daily-form .expense-row > .remove-row { align-self:start; margin-top:28px; }
.expense-advanced { grid-column:1/-1; min-width:0; border-top:1px solid var(--line); padding-top:8px; }
.expense-default-hint { grid-column:1/-1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); }
.expense-default-hint[hidden] { display:none; }
.expense-default-hint small { font-size:12px; }
.expense-advanced > summary { cursor:pointer; color:var(--muted); font-size:14px; padding:6px 0; }
.expense-advanced > .form-grid { margin:12px 0; }
.expense-advanced .classification-selection { margin:12px 0; font-size:14px; }
.expense-advanced .expense-status-controls { font-size:14px; }
.expense-voided .expense-advanced > summary::after { content:' · 此筆已取消／彈票'; color:#75571f; }
#cash-change-help { font-size:14px; font-weight:400; line-height:1.6; color:var(--muted); }
#cash-handover-result { font-size:14px; }
.payee-combobox { position:relative; min-width:0; }
.payee-suggestions { position:absolute; z-index:20; top:100%; left:0; width:max(100%,280px); max-width:calc(100vw - 72px); background:white; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px #102d2226; padding:8px; }
.payee-suggestions [role="listbox"] { max-height:240px; overflow:auto; }
.payee-option { display:block; width:100%; text-align:left; border:0; background:white; border-radius:6px; padding:10px; color:var(--forest); }
.payee-option:hover,.payee-option[aria-selected="true"] { background:#eaf2ed; }
.payee-option strong,.payee-option small { display:block; overflow-wrap:anywhere; font-size:14px; }
.payee-option small { font-weight:400; color:var(--muted); margin-top:4px; }
.payee-suggestions > small,.payee-selected { display:block; font-size:14px; font-weight:400; color:var(--muted); line-height:1.6; }
.payee-suggestions > button { margin-top:8px; }
.payee-selected:empty { display:none; }
.company-dialog { width:min(480px,calc(100vw - 32px)); max-height:90vh; overflow:auto; padding:24px; border:1px solid var(--line); border-radius:16px; color:var(--forest); background:var(--paper,#fff); }
.company-dialog::backdrop { background:#102d2266; }
.payee-meta { display:flex; align-items:flex-start; gap:8px; margin-top:6px; }
.payee-meta .payee-selected { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12px; line-height:1.5; padding-top:3px; }
.payee-edit-company { flex:none; margin:0; padding:3px 8px; min-height:28px; font-size:12px; border-radius:7px; box-shadow:none; }
.payee-edit-company[hidden] { display:none; }
.directory-dialog { width:min(760px, calc(100vw - 32px)); }
.account-provider-editor { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.account-provider-editor h3 { font-size: 17px; margin: 0 0 10px; }
.account-provider-editor > p, #provider-status { font-size: 13px; line-height: 1.6; }
.account-provider-editor .provider-row { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f6f8f5; }
.account-provider-editor .provider-row label:first-child, .account-provider-editor .provider-row label:nth-child(7) { grid-column: 1 / -1; }
.account-provider-editor .provider-row .remove-row { grid-column: -2 / -1; justify-self: end; }
@media (max-width: 520px) { .account-provider-editor .provider-row { grid-template-columns: minmax(0,1fr); } }
.company-dialog textarea[readonly],.company-dialog input[readonly] { background:#f2f4f1; }
.company-dialog h2 { margin:0; }.company-dialog small { font-size:14px; }
.dialog-actions { display:flex; gap:12px; justify-content:flex-end; }
@media(max-width:1100px) { #daily-form .expense-row,#daily-form .expense-row.bank { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { #daily-form .expense-row > label:first-child { grid-column:1/-1; } }
.password-dialog { width:min(440px,calc(100vw - 32px)); max-height:90vh; overflow:auto; border:1px solid #d7dfda; border-radius:18px; padding:24px; color:var(--ink,#183c37); background:#fffefa; }
.password-dialog::backdrop { background:rgb(18 40 35 / 45%); }

/* Monthly entry uses the same searchable payee, alias dialog and advanced fold as daily entry. */
#monthly-costs-view .form-panel { overflow:visible; }
.monthly-entry-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#monthly-cost-status { flex:1; min-width:0; line-height:1.6; color:var(--forest-2); }
#monthly-cost-list .monthly-row { grid-template-columns:repeat(4,minmax(0,1fr)) 40px; }
#monthly-cost-list .monthly-row > label { min-width:0; font-size:14px; }
#monthly-cost-list .monthly-row > label:first-child,
#monthly-cost-list .monthly-payee { grid-column:span 2; }
#monthly-cost-list .remove-row { grid-column:5; grid-row:1; margin-top:28px; }
#monthly-costs-view .form-actions, #payroll-view > .form-actions { margin-top:16px; }
.expense-advanced > .form-grid { padding:0; align-items:start; }

/* Keep text, controls and panel content aligned without changing the report design. */
label, input, select, textarea { min-width:0; }
.topbar, .panel-heading, .form-actions, .dialog-actions { flex-wrap:wrap; }
.panel-heading > div { min-width:0; }
.panel-heading > button { flex-shrink:0; }
.outstanding-row > * { min-width:0; overflow-wrap:anywhere; }
#employees-view > .panel { padding:0 22px; }
#employees-view .panel-heading { margin:0 -22px; }
#staff-form .form-grid { padding:16px 0; align-items:start; }
#payroll-view .panel > .muted { margin:16px 22px; }
.payroll-table th { padding-left:12px; padding-right:12px; }
.payroll-table th:nth-child(n+5), .payroll-table td:nth-child(n+5) { text-align:left; }
.summary-card strong { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.summary-card, .daily-profit-preview > div { display:flex; flex-direction:column; }
.summary-card strong { margin-top:auto; padding-top:10px; }
.daily-profit-preview output { margin-top:auto; padding-top:8px; }
@media(max-width:1100px) {
  #monthly-cost-list .monthly-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #monthly-cost-list .monthly-row > label:first-child, #monthly-cost-list .monthly-payee { grid-column:auto; }
  #monthly-cost-list .remove-row { grid-column:2; grid-row:auto; justify-self:end; margin-top:0; }
}
@media(max-width:900px) {
  .app-shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { min-width:0; gap:12px; }
  .sidebar-brand, .user-card { flex-shrink:0; }
  .sidebar nav { min-width:0; flex:1; overflow-x:auto; }
  .sidebar .nav-item { flex-shrink:0; white-space:nowrap; }
  .sidebar .user-card { white-space:nowrap; }
}
@media(max-width:620px) {
  .sidebar { overflow:visible; gap:6px; }
  .sidebar > .sidebar-brand:first-child { margin-right:0; }
  #monthly-cost-list .monthly-row > label:first-child, #monthly-cost-list .monthly-payee { grid-column:1/-1; }
  .monthly-total { flex-wrap:wrap; gap:8px 16px; }
}

/* Empty daily defaults are hints; entered and saved values retain normal contrast. */
#daily-form input[type="number"]::placeholder { color:#87958e; opacity:.65; }