/* VSP / Soft workspace — presentation tokens; business rules live in index.html. */
:root {
  --bg:#F4F7FA; --card:#FFFFFF; --card-2:#EDF2F6;
  --border:#E0E7ED; --border-strong:#BBCBD7;
  --text:#293C50; --muted:#637589; --faint:#738397;
  --accent:#477599; --accent-quiet:#9CBAD1; --accent-light:#EAF2FA; --accent-ink:#365F82;
  --btn-bg:#426E91; --btn-fg:#FFFFFF; --weekend:#F7F9FC;
  --ot:#91622B; --ot-bg:#FBF0DD; --travel:#407460; --travel-bg:#E7F4ED;
  --shift:#36787A; --shift-bg:#E5F3F2; --dummy:#776094; --dummy-bg:#F0EBF8;
  --share:#407460; --share-bg:#E7F4ED; --share-line:#C6E0D4;
  --danger:#A35056; --danger-bg:#FCEEF0;
  --shadow:0 2px 6px rgb(35 61 83 / 2%); --radius:16px; --radius-sm:11px; --cell-h:146px;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --bg:#17212B;--card:#202D39;--card-2:#293947;--border:#344654;--border-strong:#587084;
    --text:#E1ECF5;--muted:#ADBECD;--faint:#99ACBD;--accent:#A1C6E5;--accent-light:#2C4155;--accent-ink:#C1DCF3;
    --weekend:#24313E;--ot:#E4C18B;--ot-bg:#41392C;--travel:#A4D4BE;--travel-bg:#293E38;
    --shift:#A0D3D2;--shift-bg:#263D40;--dummy:#CCBCE6;--dummy-bg:#38334A;--share:#A4D4BE;--share-bg:#293E38;
    --danger:#EEA5AC;--danger-bg:#48333B;
  }
}
:root[data-theme="dark"] {
  --bg:#17212B;--card:#202D39;--card-2:#293947;--border:#344654;--border-strong:#587084;
  --text:#E1ECF5;--muted:#ADBECD;--faint:#99ACBD;--accent:#A1C6E5;--accent-light:#2C4155;--accent-ink:#C1DCF3;
  --weekend:#24313E;--ot:#E4C18B;--ot-bg:#41392C;--travel:#A4D4BE;--travel-bg:#293E38;
  --shift:#A0D3D2;--shift-bg:#263D40;--dummy:#CCBCE6;--dummy-bg:#38334A;--share:#A4D4BE;--share-bg:#293E38;
  --danger:#EEA5AC;--danger-bg:#48333B;
}
body {padding:30px 32px;font-size:14px;line-height:1.5;}
button,input,select,textarea {font-family:inherit;}
button,a,input,select,textarea,summary {touch-action:manipulation;}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
button:disabled {opacity:.55;cursor:wait;}
.ui-icon {width:18px;height:18px;display:inline-block;vertical-align:-3px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.sidebar {width:232px;padding:26px 16px 16px;gap:4px;}
.sidebar .brand {font-family:'Manrope','Sarabun',sans-serif;font-size:16px;letter-spacing:-.5px;gap:10px;padding:0 4px 25px;border:0;}
.sidebar .brand-logo,.auth-symbol {background:var(--accent-light);color:var(--accent-ink);width:36px;height:36px;border-radius:12px;}
.sidebar .brand-logo .ui-icon {width:23px;height:23px;}
.sidebar .who {order:8;margin-top:18px;margin-bottom:0;padding:16px 0 0;border-bottom:0;border-top:1px solid var(--border);}
.sidebar .who-name {flex-wrap:wrap;gap:2px;}
.sidebar .who-avatar {width:34px;height:34px;border-radius:50%;background:var(--dummy-bg);color:var(--dummy);}
.sidebar .who-role-tag {font-size:11px;font-weight:400;}
.sidebar .grp-label {font-size:11px;letter-spacing:0;text-transform:none;color:var(--muted);margin:20px 10px 6px;}
.sidebar>a,.sidebar>button,.nav-group button,.nav-group a {min-height:42px;padding:11px 12px;font-size:12.5px;gap:11px;}
.sidebar .nav-current {background:var(--accent-light);color:var(--accent-ink);font-weight:700;}
.sidebar .nav-current::after {content:'';margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.sidebar .edit-name-btn {min-height:28px;width:26px;padding:3px;display:inline-flex;background:transparent;border:0;}
.sidebar .edit-name-btn .ui-icon {width:14px;height:14px;}
.sidebar .foot {order:9;border:0;padding-top:4px;}
.sidebar .foot button {min-height:38px;background:transparent;border:0;font-size:11px;flex:0 1 auto;}
.sidebar .foot button:last-child {flex:1;}
.sidebar .spacer-grow {order:7;min-height:12px;}
.nav-group {border:0;margin-top:8px;}
.nav-group>summary {display:flex;align-items:center;gap:10px;padding:11px 12px;color:var(--muted);font-size:12px;cursor:pointer;list-style:none;}
.nav-group>summary::-webkit-details-marker {display:none;}
.nav-group>summary::after {content:'›';margin-left:auto;font-size:18px;}
.nav-group[open]>summary::after {transform:rotate(90deg);}
.nav-group>button,.nav-group>a {font-size:11.5px;}
#appView.wrap {margin:0 0 0 232px;max-width:1480px;}
.workspace-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.workspace-eyebrow {font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:700;margin-bottom:7px;}
.workspace-heading h2 {font-size:25px;letter-spacing:-.5px;margin:0;font-weight:600;}
.workspace-heading p {font-size:12px;color:var(--muted);margin:5px 0 0;}
.workspace-heading>a {text-decoration:none;color:var(--muted);font-size:12px;white-space:nowrap;}
.month-head {background:transparent;border:0;box-shadow:none;padding:0;margin-bottom:20px;gap:14px;}
.month-head h1 {font-size:19px;font-weight:600;}
.month-head .mh-sub {font-size:11px;}
.month-head .mh-nav button {width:34px;height:36px;background:var(--card);}
.month-head .mh-add {padding:11px 18px;min-height:44px;font-size:13px;}
.view-toggle {background:var(--card-2);padding:4px;border-radius:12px;}
.view-toggle button {padding:8px 12px;font-size:12px;border-radius:8px;}
.view-toggle .ui-icon {width:15px;height:15px;margin-right:4px;}
.kpi-top-grid {gap:14px;margin-bottom:24px;}
.kpi-top {position:relative;padding:18px 20px;gap:12px;min-height:116px;border-color:transparent;box-shadow:none;}
.kpi-top:nth-child(1) {background:var(--accent-light);}
.kpi-top:nth-child(2) {background:var(--ot-bg);}
.kpi-top:nth-child(3) {background:var(--travel-bg);}
.kpi-top:nth-child(4) {background:var(--dummy-bg);}
.kpi-top>div {min-width:0;}
.kpi-top-label {font-size:12px;font-weight:400;text-transform:none;margin-bottom:9px;letter-spacing:0;color:var(--text);}
.kpi-top-value {font-family:'Manrope','Sarabun',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1.3;}
.kpi-top-value small {display:block;font-size:10px;letter-spacing:0;margin-top:4px;color:var(--muted);}
.kpi-dot {position:absolute;right:16px;top:16px;width:26px;height:26px;margin:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent!important;color:var(--muted);}
.kpi-top-label {padding-right:22px;}
.calendar-tools {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.calendar-tools-title {font-size:14px;font-weight:600;}
.calendar-tools-title small {font-size:11px;font-weight:400;color:var(--muted);margin-left:10px;}
.search-field {position:relative;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0 12px;color:var(--muted);width:270px;}
.search-field input {width:100%;min-width:0;padding:10px 0;border:0;background:transparent;color:var(--text);font-size:12px;outline-offset:0;}
.search-field:focus-within {outline:2px solid var(--accent);outline-offset:2px;}
.search-result {margin:0 0 10px;color:var(--muted);font-size:12px;}
.calendar-row {display:flex;flex-direction:column;gap:16px;}
.calendar {width:100%;border-radius:16px;}
.weekdays {background:var(--card);border-bottom:1px solid var(--border);}
.weekdays div {padding:13px 8px;font-size:11px;font-weight:400;}
.weekdays div:first-child,.weekdays div:last-child {color:var(--faint);}
.cell {padding:8px 10px;gap:3px;}
.cell:nth-child(7n) {border-right:0;}
.cell .daynum {height:25px;width:25px;display:flex;align-items:center;justify-content:center;margin-bottom:1px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:500;}
.cell.today .daynum {height:25px;width:25px;}
.cell .entry-title {background:var(--accent-light);border-left:2px solid var(--accent-quiet);padding:5px 6px;border-radius:4px;font-size:11px;font-weight:500;}
.cell:has(.badge.ot) .entry-title {background:var(--ot-bg);border-color:var(--ot);}
.cell:has(.badge.dummy) .entry-title {background:var(--dummy-bg);border-color:var(--dummy);}
.entry-location,.entry-meta {font-size:10px;padding-left:2px;}
.badge {font-size:9px;padding:2px 6px;}
.calendar-legend {display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 2px 22px;color:var(--muted);font-size:11px;}
.legend-item {display:flex;align-items:center;gap:6px;}
.legend-item::before {content:'';width:7px;height:7px;border-radius:3px;background:var(--accent-quiet);}
.legend-item.ot::before {background:var(--ot);}.legend-item.dummy::before {background:var(--dummy);}
.calendar-legend .legend-hint {margin-left:auto;}
.bank-panel {width:100%;margin:0;display:grid;grid-template-columns:1.1fr 1fr 1.4fr 1fr;align-items:center;gap:18px;padding:18px;background:var(--card);}
.bank-panel .panel-head {padding:0;border:0;font-size:12px;}
.bank-panel .bank-balance {padding:0;text-align:left;}
.bank-panel .bank-balance .num {font-size:25px;}
.bank-panel .bank-mini {padding:0;margin:0;border:0;}
.bank-panel .bank-actions {padding:0;}.bank-panel .bank-actions button {min-height:40px;}
.bank-panel .bank-form,.bank-panel .bank-ledger-acc,.bank-panel .bank-foot {grid-column:1/-1;}
.bank-panel .bank-foot {padding:0;border:0;font-size:10.5px;}
.bank-panel .bank-ledger-acc {margin:0;}
.expense-sections {margin-top:22px;}
.expense-sections>h3 {font-size:14px;font-weight:600;margin:0 0 12px;}
.sum-acc {box-shadow:none;margin-bottom:8px;border-radius:11px;}
.sum-acc>summary {padding:13px 16px;font-weight:500;font-size:12px;}
.sum-acc .sa-peek {font-size:12px;font-weight:500;}
.list-row {padding:16px 18px;gap:18px;}
.list-row[hidden] {display:none;}
.list-row .list-date {flex-basis:68px;line-height:1.6;}
.list-row .list-tasks {gap:8px;}
.list-row .list-task-label {white-space:normal;overflow-wrap:anywhere;}
.list-row .list-task-time {font-family:'Manrope',sans-serif;font-size:11px;}
.list-row.empty {padding-top:11px;padding-bottom:11px;}
.overlay {background:rgb(21 39 56 / 35%);backdrop-filter:blur(4px);}
.modal {border-radius:20px;box-shadow:0 24px 80px rgb(20 40 60 / 15%);padding:28px;}
.modal h2 {font-size:21px;font-weight:600;}
.modal-topline {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.modal-topline h2 {margin:0;}
.task-item-actions .ui-icon {width:14px;height:14px;}
.modal-dismiss {width:36px;height:36px;flex-shrink:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--muted);cursor:pointer;font-size:23px;line-height:1;}
.field label {font-size:12px;font-weight:500;}
.field input,.field select,.field textarea {border-radius:10px;min-height:44px;font-size:14px;background:var(--card);}
.field input:focus,.field select:focus,.field textarea:focus {border-color:var(--accent);}
.form-heading {font-size:13px;}
.wtype {grid-template-columns:repeat(5,1fr);gap:6px;}
.wtype button {min-height:64px;font-size:11px;gap:7px;}
.modal-actions {position:sticky;bottom:-28px;background:var(--card);padding:12px 0;border-top:1px solid var(--border);z-index:2;}
.auth-wrap {max-width:430px;margin:10vh auto;}
.auth-card {padding:38px;border-radius:24px;box-shadow:0 20px 70px rgb(47 78 105 / 6%);}
.auth-symbol {display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:24px;}
.auth-symbol .ui-icon {width:28px;height:28px;}
.auth-card h1 {font-family:'Manrope',sans-serif;font-size:25px;letter-spacing:-1px;margin-bottom:9px;}
.auth-card .sub {font-size:12px;line-height:1.8;}
.auth-tabs {background:var(--card-2);padding:4px;border-radius:12px;margin:26px 0 22px;}
.auth-tabs button {border:0;background:transparent;font-family:inherit;}
.auth-tabs button.active {background:var(--card);color:var(--accent-ink);box-shadow:var(--shadow);}
.auth-footer {text-align:center;color:var(--muted);font-size:11px;margin-top:20px;}
.preview-note {background:var(--accent-light);color:var(--accent-ink);font-size:11px;padding:8px 12px;border-radius:10px;margin-bottom:18px;}
@media(min-width:1700px) {#appView.wrap {margin-left:auto;margin-right:auto;padding-left:210px;}}
@media(min-width:561px) and (max-width:1000px) {
  .sidebar {position:fixed;width:196px;flex-direction:column;flex-wrap:nowrap;border-radius:0;border-right:1px solid var(--border);padding:20px 10px;}
  .sidebar .brand {font-size:13px;}.sidebar .grp-label,.sidebar .spacer-grow {display:block;}
  .sidebar a,.sidebar button {width:100%;background:transparent;border-color:transparent;}
  .sidebar .who {margin-top:16px;padding-top:12px;}.sidebar .foot {margin-left:0;}
  .sidebar .who-name .edit-name-btn {width:26px;display:inline-flex;}
  .sidebar .foot button {width:auto;white-space:nowrap;}
  .sidebar .foot .theme-toggle {flex:0 0 32px;}
  .calendar:has(#grid:not(.hidden)) {overflow-x:auto;}.grid,.weekdays {min-width:680px;}
  #appView.wrap {margin-left:184px;max-width:none;}
  .workspace-heading h2 {font-size:22px;}.month-head .mh-spacer {display:none;}
  .month-head .mh-add {margin-left:auto;}.calendar-tools-title small {display:none;}
  .kpi-top-grid {grid-template-columns:repeat(2,1fr);}.bank-panel {grid-template-columns:1fr 1fr;}
}
@media(max-width:560px) {
  body:has(.overlay.show) {overflow:hidden;}
  #overlay {padding:14px;overflow:hidden;}
  #overlay .modal {max-height:calc(100dvh - 28px);min-width:0;}
  #overlay .day-detail-panel {display:none;}
  body {padding:20px 16px;}.workspace-heading {margin-bottom:22px;}.workspace-heading h2 {font-size:23px;}
  .workspace-heading>a {font-size:0;}.workspace-heading>a .ui-icon {width:22px;height:22px;}
  .workspace-heading p {font-size:11px;}.workspace-eyebrow {font-size:9px;}
  #appView.wrap {margin:0;padding-bottom:calc(84px + env(safe-area-inset-bottom));}.month-head {gap:10px;}
  .month-head h1 {font-size:17px;}.month-head .mh-sub {display:none;}
  .month-head .mh-spacer {display:none;}.month-head .view-toggle {margin-left:auto;}
  .month-head .view-toggle button {font-size:0;padding:8px;}.month-head .view-toggle .ui-icon {width:17px;height:17px;margin:0;}
  .month-head .mh-nav {gap:3px;}.month-head .mh-nav button {width:29px;}
  .month-head .mh-add {width:100%;padding:11px;}.kpi-top-grid {gap:9px;margin-bottom:20px;}
  .kpi-top {padding:14px;min-height:104px;}.kpi-top-label {font-size:11px;padding-right:15px;}.kpi-top-value {font-size:23px;}
  .kpi-dot {right:9px;top:10px;width:19px;height:19px;}.kpi-dot .ui-icon {width:15px;height:15px;}
  .calendar-tools {flex-wrap:wrap;gap:10px;}.calendar-tools-title small {font-size:10px;margin-left:7px;}
  .search-field {width:100%;}.search-field input {min-height:42px;font-size:13px;}
  .list-row {padding:14px 12px;gap:9px;}.list-row .list-date {flex-basis:42px;font-size:11px;}
  .list-row .list-task-line {font-size:12px;flex-wrap:wrap;gap:3px 8px;}.list-row .list-task-time {font-size:10px;}
  .list-row .list-task-label {flex-basis:100%;}.calendar-legend {gap:12px;font-size:10px;margin-bottom:16px;}
  .calendar-legend .legend-hint {display:none;}.bank-panel {grid-template-columns:1fr 1fr;gap:14px;padding:16px;}
  .bank-panel .bank-mini {grid-column:1/-1;}.bank-panel .bank-actions {grid-column:1/-1;}
  .sum-acc>summary {font-size:11px;gap:6px;padding:13px 11px;}.sum-acc .sa-peek {font-size:11px;}
  .modal {padding:22px 18px;border-radius:20px;}.modal-actions {bottom:-22px;}
  /* โมดัลบันทึก/แก้ไขงานบนมือถือ: หัวติดบน (ปุ่ม × เข้าถึงได้เสมอตอนเลื่อนลง), แถบปุ่มติดล่างแบบ flush,
     ซ่อนปุ่ม "ปิด" ซ้ำ (มี × แล้ว) — กันฟอร์มยาว ๆ ล้นออกใต้จอ */
  #overlay .modal {padding-top:0;padding-bottom:0;}
  #overlay .modal .modal-topline {position:sticky;top:0;z-index:3;background:var(--card);margin:0 -18px 6px;padding:16px 18px 10px;border-radius:20px 20px 0 0;box-shadow:0 1px 0 var(--border);}
  #overlay .modal-actions {bottom:0;margin:12px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));}
  #overlay .modal > .btn-close {display:none;}
  .wtype {grid-template-columns:repeat(3,1fr);}.field input,.field select,.field textarea {font-size:16px;}
  .tabbar {padding-top:8px;box-shadow:0 -4px 20px rgb(35 61 83 / 5%);}.tabbar button {min-height:49px;gap:5px;}
  body.menu-open #appView .sidebar .who {order:8;}.sidebar .brand {padding-bottom:12px;}
  body.menu-open #appView .sidebar .who-name {gap:4px;}
  body.menu-open #appView .sidebar .edit-name-btn {width:28px;min-height:28px;padding:4px;display:inline-flex;}
  body.menu-open #appView .sidebar .foot {display:flex;width:100%;}
  body.menu-open #appView .sidebar .foot button {width:auto;min-height:40px;flex:1;white-space:nowrap;}
  body.menu-open #appView .sidebar .foot .theme-toggle {flex:0 0 44px;}
  .auth-wrap {margin:5vh auto;}.auth-card {padding:28px;}.auth-card h1 {font-size:24px;}
  .calendar:has(#grid:not(.hidden)) {overflow-x:auto;}.grid,.weekdays {min-width:595px;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important;}}
@media print {.workspace-heading,.calendar-tools,.calendar-legend,.preview-note {display:none;}#appView.wrap {margin:0;padding:0;}body {padding:0;}}

/* Shift-first overview: monthly totals and current bank balance have separate scopes. */
.overview-caption {display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:0 2px 10px;}
.overview-caption span {font-size:10px;}
.shift-overview {margin-bottom:14px;}
.shift-overview .kpi-top:nth-child(2) {background:var(--shift-bg);}
.shift-overview .kpi-top:nth-child(3) {background:var(--dummy-bg);}
.shift-overview .kpi-top:nth-child(4) {background:var(--travel-bg);}
.kpi-action {font:inherit;color:var(--text);text-align:left;cursor:pointer;}
.kpi-action>span:not(.kpi-dot) {min-width:0;}
.kpi-action .kpi-top-label,.kpi-action .kpi-top-value,.kpi-note {display:block;}
.kpi-note {font-size:10px;font-weight:400;color:var(--muted);margin-top:9px;letter-spacing:0;}
.kpi-action:hover {box-shadow:inset 0 0 0 1px var(--accent-quiet);}
.ot-month-note {display:flex;align-items:center;gap:8px;color:var(--ot);font-size:11px;margin:0 2px 14px;}
.shift-allowance-details {border:1px solid var(--border);background:var(--card);border-radius:13px;margin:0 0 14px;overflow:hidden;}
.shift-allowance-details:not([open]) {display:none;}
.shift-allowance-details>summary {padding:14px 18px;font-size:13px;font-weight:600;cursor:pointer;}
.shift-allowance-details>summary span {float:right;color:var(--dummy);}
.shift-allowance-details>p {margin:0;padding:0 18px 12px;color:var(--muted);font-size:11px;}
.shift-allowance-rows {max-height:300px;overflow-y:auto;}
.shift-allowance-row {display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;align-items:center;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--border);color:var(--text);background:var(--card);font-size:12px;text-align:left;cursor:pointer;}
.shift-allowance-row:hover {background:var(--shift-bg);}
.shift-allowance-row>span:nth-child(2) {color:var(--shift);font-size:11px;}
.shift-allowance-row strong {text-align:right;color:var(--dummy);font-family:'Manrope','Sarabun',sans-serif;}
.shift-empty {padding:12px 18px;color:var(--muted);font-size:12px;}
.bank-overview {display:flex;align-items:center;gap:20px;padding:17px 20px;background:var(--card);border:1px solid var(--border);border-radius:14px;}
.bank-overview-title {display:flex;align-items:center;gap:12px;flex:1;font-size:12px;min-width:0;}
.bank-overview-title>.ui-icon {color:var(--shift);width:22px;height:22px;}
.bank-overview-title strong {font-family:'Manrope','Sarabun',sans-serif;font-size:20px;font-weight:600;margin-left:8px;color:var(--shift);white-space:nowrap;}
.bank-overview-title strong small {font-size:11px;font-weight:400;}
.bank-scope {display:block;color:var(--muted);font-size:10px;margin-top:3px;}
.bank-overview-notice {color:var(--muted);font-size:10.5px;max-width:180px;}
.bank-overview-notice.expiring {padding:7px 10px;border-radius:8px;background:var(--ot-bg);color:var(--ot);}
.bank-overview-actions {display:flex;gap:6px;}
.bank-overview-actions button {min-height:38px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:11px;padding:8px 11px;cursor:pointer;white-space:nowrap;}
.bank-overview-actions #bankUseBtn {background:var(--shift-bg);color:var(--shift);border-color:transparent;}
.bank-overview-actions button:hover {border-color:var(--accent-quiet);}
.bank-details {margin:6px 0 23px;}
.bank-details>summary {width:fit-content;padding:4px 2px;font-size:10px;color:var(--muted);cursor:pointer;}
.bank-details .bank-panel {grid-template-columns:1fr 1fr 1.4fr;margin-top:8px;}
.bank-details .bank-panel .bank-form {grid-column:1/-1;}
.bank-details .bank-form input,.bank-details .bank-form select {min-height:40px;}
.work-filters {display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap;}
.work-filters button {padding:7px 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;min-height:34px;}
.work-filters button[aria-pressed="true"] {background:var(--card);border-color:var(--border);color:var(--accent-ink);font-weight:600;}
.work-filters button[data-work-filter="shift"][aria-pressed="true"] {background:var(--shift-bg);color:var(--shift);}
.work-filters button:hover {background:var(--card-2);}
.work-filters .ui-icon {width:13px;height:13px;}
.cell.has-shift .entry-title {background:var(--shift-bg);border-left-color:var(--shift);}
.cell.has-shift:has(.badge.dummy) .entry-title {background:var(--shift-bg);border-left-color:var(--shift);}
.cell.filter-muted {background:var(--bg);}
.cell.filter-muted .daynum {color:var(--faint);}
.legend-item.shift::before {background:var(--shift);}
.badge.allowance {background:var(--dummy-bg);border-color:transparent;color:var(--dummy);}
.shift-expiry {color:var(--shift);font-size:11px;white-space:normal;}
.expense-sections>h3 {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.expense-total {font-size:11px;font-weight:400;color:var(--muted);}
.expense-total b {color:var(--text);font-size:14px;margin-left:8px;font-family:'Manrope',sans-serif;}
@media(max-width:1100px) {
  .bank-overview {gap:12px;flex-wrap:wrap;}
  .bank-overview-title {flex-basis:60%;}
  .bank-overview-actions {margin-left:auto;}
}
@media(max-width:560px) {
  .shift-overview .kpi-top {min-height:116px;}
  .kpi-note {font-size:9px;line-height:1.5;margin-top:8px;}
  .bank-overview {padding:14px;gap:12px;}
  .bank-overview-title {flex-basis:100%;font-size:11px;gap:9px;}
  .bank-overview-title strong {font-size:21px;}
  .bank-overview-notice {max-width:none;flex-basis:100%;font-size:10px;}
  .bank-overview-actions {width:100%;margin:0;}
  .bank-overview-actions button {min-height:40px;flex:1;}
  .bank-details .bank-panel {grid-template-columns:1fr 1fr;}
  .bank-details .bank-panel .bank-mini {grid-column:1/-1;}
  .bank-details .bank-form input,.bank-details .bank-form select {font-size:16px;}
  .bank-details {margin-bottom:18px;}
  .shift-allowance-row {font-size:11px;padding:12px;gap:7px;}
  .shift-allowance-row>span:nth-child(2) {font-size:10px;}
  .shift-allowance-details>summary {font-size:12px;padding:12px;}
  .work-filters {gap:4px;}.work-filters button {padding:8px 12px;min-height:38px;}
  .ot-month-note {font-size:10px;flex-wrap:wrap;}
}