/* Workbench layout and readable contrast.
   Loaded after styles.css and mobile.css; each breakpoint is defined once. */
:root {
  --bg: #edf1ed;
  --ink: #20382b;
  --body: #374f40;
  --muted: #576b5e;
  --line: #cbd6cc;
  --green: #164c40;
  --green-hover: #0f3d32;
  --pale: #e2ece2;
}
body { background: var(--bg); color: var(--ink); }
.app-shell { display: block; min-height: 100svh; }
.btn { min-height: 44px; font-size: 14px; }
.btn-secondary { border-color: #b5c6b7; color: #365840; }
.btn-secondary:hover:not(:disabled) { background: #edf4e9; border-color: #72987c; }
input::placeholder, textarea::placeholder { color: #637660; }
.search-field, .picker-search { border-color: #7d9683; }
.picker-search input::placeholder { color: #637660; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #397e56!important; box-shadow: 0 0 0 3px #397e5620; }

/* Compact top navigation replaces the old fixed sidebar. */
.sidebar { position: relative; inset: auto; width: 100%; min-height: 64px; padding: calc(8px + var(--safe-top)) 24px 8px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 30px; background: #fff; border-right: 0; border-bottom: 1px solid #bdcdbf; z-index: 20; }
.sidebar .brand { flex: none; margin: 0; gap: 9px; }
.sidebar .brand-mark { width: 34px; height: 36px; border-radius: 8px; box-shadow: none; }
.sidebar .brand-mark .icon { width: 23px; height: 23px; }
.sidebar .brand strong { font-size: 17px; letter-spacing: .5px; color: #234735; }
.sidebar .brand span { display: none; }
.main-nav { width: auto; order: 0; display: flex; flex-direction: row; gap: 8px; margin: 0; }
.main-nav .nav-item { width: auto; height: 44px; min-height: 44px; padding: 0 15px; gap: 8px; border-radius: 7px; border: 0; font-size: 14px; color: #425d4c; white-space: nowrap; }
.main-nav .nav-item.active { background: var(--green); border: 0; color: #fff; }
.main-nav .nav-item .icon { width: 17px; height: 17px; }
.main-nav .nav-active-dot { display: none; }
.main-nav .nav-count { font-size: 12px; line-height: 21px; min-width: 23px; margin-left: 0; color: #315a3c; background: #e3ede0; }
.workspace-tools { position: relative; margin-left: auto; flex: none; }
.workspace-tools>summary { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 60px; min-height: 44px; padding: 8px; color: #445e4d; border-radius: 7px; font-size: 14px; cursor: pointer; list-style: none; }
.workspace-tools>summary::-webkit-details-marker { display: none; }
.workspace-tools>summary:hover, .workspace-tools[open]>summary { background: #e7efe4; }
.workspace-tools>summary .icon { width: 13px; height: 13px; transform: rotate(90deg); }
.workspace-tools[open]>summary .icon { transform: rotate(-90deg); }
.workspace-tools>summary:focus-visible { outline: 3px solid #397e56; outline-offset: 2px; }
.workspace-tools .sidebar-bottom { position: absolute; right: 0; top: calc(100% + 7px); margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 185px; background: #fff; border: 1px solid #b9cbbb; border-radius: 9px; box-shadow: 0 8px 25px #17331620; z-index: 25; }
.workspace-tools:not([open])>.sidebar-bottom { display: none; }
.workspace-tools .sidebar-bottom .nav-item { width: 100%; height: 44px; min-height: 44px; padding: 0 11px; display: flex; justify-content: flex-start; gap: 9px; font-size: 14px; color: #3c5b43; }
.workspace-tools .sidebar-bottom .nav-item>span { display: inline; }
.workspace-tools .sidebar-bottom .nav-item .icon { width: 17px; height: 17px; }
.main-content { width: 100%; margin: 0; padding: 0; min-width: 0; }
.page { max-width: 1280px; margin: 0 auto; padding: 18px 24px 0; }
#global-notice, .connection-notice { max-width: 1232px; margin: 12px auto 0; font-size: 14px; }

/* Date, totals, and export stay separate from the invoice form. */
.workbench-daybar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; min-width: 0; }
.workbench-daybar .date-controls { display: flex; align-items: center; flex-wrap: wrap; width: auto; max-width: 100%; gap: 5px 1px; flex: none; }
.workbench-daybar .date-navigation { display: flex; align-items: center; min-width: 0; flex: none; }
.workbench-daybar .date-navigation>.icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; color: #355f3d; }
.workbench-daybar .date-input-wrap { width: 146px; max-width: none; min-width: 0; padding: 0 5px; gap: 6px; flex: none; }
.workbench-daybar .date-input-wrap>.icon { display: none; }
.workbench-daybar .date-input-wrap input { width: 100%; min-width: 0; min-height: 44px; max-width: 100%; font-size: 16px; font-weight: 500; color: #284c33; }
.workbench-daybar .date-shortcuts { display: flex; align-items: stretch; flex: none; gap: 4px; margin-left: 7px; }
.workbench-daybar .date-shortcut { min-height: 44px; min-width: 48px; padding: 8px 10px; margin: 0; border: 1px solid #9db69e; border-radius: 7px; background: #fff; color: #31563a; font-size: 13px; white-space: nowrap; }
.workbench-daybar .date-shortcut:hover:not(:disabled):not(.is-selected):not([aria-pressed=true]) { background: #e2ece2; border-color: #72987c; }
.workbench-daybar .date-shortcut.is-selected, .workbench-daybar .date-shortcut[aria-pressed=true] { background: #164c40; border-color: #164c40; color: #fff; font-weight: 600; }
.workbench-daybar .date-shortcut:focus-visible { outline: 3px solid #397e56; outline-offset: 2px; }
.workbench-daybar .day-label { flex-basis: auto; white-space: nowrap; margin: 0 0 0 8px; font-size: 13px; color: #566e58; }
.workbench-totals { display: flex; flex: 1; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; color: #485f4e; font-size: 13px; }
.workbench-totals>span { min-width: 0; }
.workbench-totals strong { font-weight: 650; color: #1f5130; font-variant-numeric: tabular-nums; }
.workbench-totals .total-amount { overflow-wrap: anywhere; }
.workbench-totals #stat-amount.long-amount { font-size: inherit; letter-spacing: 0; }
.workbench-daybar>#export-btn { flex: none; min-height: 44px; padding: 9px 14px; font-size: 14px; margin-left: auto; border-color: #92b19a; color: var(--green); }

/* Full invoice form: all fields are visible. Only search results are a popup. */
.quick-entry { padding: 17px 20px 12px; margin-bottom: 20px; background: #fff; border: 1px solid #b9cbbd; border-radius: 10px; box-shadow: 0 3px 14px #17331609; min-width: 0; }
.quick-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid #d1ddd3; }
.quick-heading h2 { font-size: 20px; color: #204d30; font-weight: 650; line-height: 1.5; }
.quick-heading p { font-size: 13px; color: #526c58; line-height: 1.7; }
#quick-form { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.quick-main-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px 16px; align-items: start; min-width: 0; }
.quick-company-field, .quick-tax-field, .quick-item-field { grid-column: span 2; }
.quick-company-field { position: relative; min-width: 0; }
.quick-company-field>label, .quick-field>span { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #344f3c; line-height: 21px; }
.quick-company-field>label b, .quick-field>span b { font-size: 14px; color: #a14b29; font-weight: 500; margin-left: 3px; }
.quick-field>span em { font-style: normal; font-size: 12px; font-weight: 400; color: #627960; margin-left: 6px; }
.quick-company-search { display: flex; align-items: center; gap: 7px; height: 46px; min-width: 0; border: 1px solid #7d9683; border-radius: 6px; background: #fff; padding-left: 11px; }
.quick-company-search:focus-within { border-color: #397e56; box-shadow: 0 0 0 3px #397e5620; }
.quick-company-search>.icon { width: 18px; height: 18px; color: #537559; }
.quick-company-search input { min-width: 0; width: 100%; height: 44px; border: 0; outline: none; background: transparent; padding: 9px 0; color: #254931; font-size: 16px; line-height: 1.5; }
.quick-company-search input:focus-visible { box-shadow: none; }
.quick-company-search input::placeholder { font-size: 14px; color: #637660; }
.quick-company-search>.icon-btn { min-height: 46px; min-width: 44px; width: 44px; height: 46px; flex: none; margin: -1px -1px -1px 0; border-radius: 0 6px 6px 0; color: #3d6845; }
.quick-company-search>.icon-btn .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.quick-company-hint { margin-top: 5px; font-size: 12px; line-height: 1.65; min-height: 20px; color: #536f58; overflow-wrap: anywhere; }
.quick-results { position: absolute; top: 77px; left: 0; right: 0; z-index: 15; padding: 5px; max-height: min(320px,42dvh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #a7bda9; border-radius: 7px; box-shadow: 0 10px 25px #24442020; background: #fff; }
.quick-results [role=option] { display: block; width: 100%; min-height: 48px; padding: 11px; border: 0; border-radius: 5px; text-align: left; background: #fff; color: #2b5133; font-size: 14px; line-height: 1.65; cursor: pointer; overflow-wrap: anywhere; }
.quick-results [role=option]:hover, .quick-results [role=option].focused, .quick-results [role=option][aria-selected=true] { background: #e2eddd; }
.quick-results [role=option] strong { display: block; font-weight: 600; }
.quick-results [role=option] small { display: block; margin-top: 3px; color: #5d7459; font-size: 12px; }
.quick-results>p { padding: 12px 10px; font-size: 13px; color: #526e55; line-height: 1.8; }
.quick-field { display: block; min-width: 0; }
.quick-field input, .quick-field textarea { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 11px; border: 1px solid #7d9683; border-radius: 6px; color: #284c33; background: #fff; font-size: 16px; line-height: 1.5; }
.quick-field input::placeholder, .quick-field textarea::placeholder { font-size: 14px; color: #637660; }
.quick-field input:disabled, .quick-field textarea:disabled { background: #eef2ea; color: #687a63; }
.quick-amount-field input { font-variant-numeric: tabular-nums; }
.quick-summary { grid-column: 1/-1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; min-width: 0; padding: 9px 12px; border: 1px solid #c1d3bc; border-radius: 6px; background: #e9f1e3; color: #456c3d; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#quick-company-name { font-size: 13px; font-weight: 600; color: #2b5c31; }
.quick-details { min-width: 0; padding-top: 13px; border-top: 1px solid #d2ded0; }
.quick-details-heading { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.quick-details-heading h3 { color: #365b3b; font-size: 15px; font-weight: 600; }
.quick-details-heading>span { color: #61795b; font-size: 12px; }
.quick-details-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 16px; min-width: 0; }
.quick-remarks-field { grid-column: 1/-1; }
.quick-remarks-field textarea { min-height: 76px; }
.quick-save-option { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; padding: 11px 12px; background: #edf4e8; border: 1px solid #bdcfb5; border-radius: 7px; cursor: pointer; color: #385d37; font-size: 14px; line-height: 1.65; }
.quick-save-option input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; }
.quick-save-option>span { min-width: 0; }
.quick-save-note { color: #516f48; font-size: 13px; }
.quick-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 11px; padding-top: 12px; border-top: 1px solid #d1ddd1; }
.quick-date-hint { flex: 1 1 240px; min-width: 0; margin: 0 auto 0 0; color: #31563a; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
#quick-reset { min-height: 46px; min-width: 85px; padding: 10px 18px; font-size: 14px; }
#quick-submit { min-height: 46px; min-width: 168px; padding: 10px 22px; font-size: 15px; }
#quick-error { margin: 0; font-size: 13px; }
.quick-feedback { min-height: 21px; margin-top: -4px; font-size: 13px; line-height: 1.65; color: #2f6d3a; overflow-wrap: anywhere; }

/* Stronger list typography and borders retain the existing responsive cards. */
.list-panel { border-color: #bdcdbb; border-radius: 9px; box-shadow: 0 2px 10px #17331605; }
.list-header { min-height: 59px; padding: 14px 18px; gap: 12px; }
.list-heading h2 { font-size: 17px; font-weight: 600; color: #2c5533; }
.count-badge { color: #466a38; background: #e4eddd; font-size: 12px; line-height: 23px; }
.list-toolbar { padding: 0 18px 14px; gap: 10px; }
.list-toolbar .search-field { height: 44px; min-height: 44px; flex: none; width: min(440px,100%); background: #f7faf4; border-color: #7d9683; }
.search-field>.icon { color: #6b8a58; }
.list-toolbar .search-field input { font-size: 16px; color: #35572b; }
.search-field input::placeholder { color: #637660; font-size: 13px; }
.list-toolbar .filter-field select { min-height: 44px; font-size: 14px; border-color: #7d9683; color: #3f6036; }
.data-table thead { background: #edf3e6; }
.data-table th { color: #486e35; font-size: 13px; font-weight: 600; border-bottom-color: #cfddc4; }
.data-table td { color: #3e5c35; font-size: 14px; border-bottom-color: #e0e8d9; }
.row-title { color: #284e2d; font-size: 14px; font-weight: 600; }
.row-subtitle, .row-spec { color: #5f7852; font-size: 12px; }
.row-item { color: #3c6032; font-size: 14px; }
.column-hint { color: #607d4d; border-color: #c3d4b3; }
.data-table td.amount-cell { color: #27552c; font-weight: 600; }
.currency-small { color: #537742; }
.wechat-id { color: #31592e; font-size: 14px; }
.copy-button, .wechat-value .copy-button { color: #326432; }
.row-actions .icon-btn, .row-actions .btn-text { color: #4b6c3b; }
.row-actions .icon-btn.danger { color: #9d5038; }
.status-badge { font-size: 12px; }
.status-badge.pending { color: #795b0d; background: #f8ecc4; }
.status-badge.exported { color: #315f2b; background: #e0eed6; }
.mobile-select-all, .row-select { color: #456c37; }
.list-footer { padding: 11px 18px; color: #5d7850; font-size: 12px; }
.list-footer>span:last-child { color: #617f51; }
.empty-state h3, #records-empty h3 { color: #355f32; font-size: 15px; }
.empty-state>p, #records-empty>p { color: #5d7950; font-size: 13px; line-height: 1.8; }
#records-empty { min-height: 145px; padding: 21px 18px; }
#records-empty .empty-illustration { display: none; }
#records-empty h3 { margin-bottom: 4px; }
#records-empty .btn { margin-top: 12px; min-height: 44px; font-size: 14px; color: #38662e; border-color: #9db58a; }
.export-note { padding: 12px 1px; color: #4d6c42; font-size: 12px; line-height: 1.7; gap: 10px; }
.export-note>span:last-child { display: block; color: #4d6c42; }
#customers-page .page-heading { margin: 3px 0 17px; align-items: center; gap: 16px; }
#customers-page .page-heading h1 { font-size: 25px; line-height: 1.5; color: #2d5a32; margin: 0 0 4px; }
#customers-page .page-heading p { font-size: 14px; color: #5c7751; line-height: 1.7; }
#customers-page .page-heading>.btn { margin: 0; min-height: 44px; font-size: 14px; }
#customers-page .customer-search { max-width: 350px; height: 44px; min-height: 44px; border-color: #7d9683; }
#customers-page .customer-search input { font-size: 16px; color: #3e6531; }
.page-footer { max-width: 1280px; margin: 0 auto; padding: 10px 24px calc(12px + var(--safe-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; line-height: 1.6; letter-spacing: 0; color: #526d47; }
.page-footer .install-text-button { min-height: 44px; padding: 8px 0; margin: 0; font-size: 12px; color: #456b38; text-decoration: underline; }

/* Existing dialogs use the same readable labels and field boundaries. */
.field>span, .section-heading h3 { color: #365c3a; font-size: 14px; }
.field em, .field small, .section-heading>span, .required-note { color: #5c7950; font-size: 12px; }
.field input, .field textarea, .field select { border-color: #7d9683; color: #31532f; font-size: 16px; }
.field input::placeholder, .field textarea::placeholder { color: #637660; font-size: 14px; }
.amount-input input, .amount-input input::placeholder { font-size: 26px; }
.drawer-head .eyebrow, .customer-picker>p, .picker-option small { color: #607b54; }
.customer-picker>label, .picker-option strong, .save-customer-option strong { color: #3e6533; }
.save-customer-option small, .modal>p, .auth-card>.muted { color: #5d7852; }
.auth-note { color: #546f4b; }
.auth-footnote { color: #c7dbc0; }

/* Tablet form: company spans the row; the remaining main fields use two columns. */
@media (min-width:1300px) {
  .sidebar { padding-left: max(24px,calc((100vw - 1232px) / 2)); padding-right: max(24px,calc((100vw - 1232px) / 2)); }
}
@media (max-width:1100px) {
  .sidebar { gap: 20px; }
  .workbench-daybar { gap: 8px 14px; }
  .workbench-totals { order: 3; flex-basis: 100%; gap: 16px; }
  .workbench-daybar>#export-btn { order: 2; }
}
@media (max-width:1000px) {
  .quick-main-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-company-field { grid-column: 1/-1; }
  .quick-tax-field, .quick-item-field { grid-column: auto; }
}

/* Phone: primary fields stack, while short optional fields remain in pairs. */
@media (max-width:760px) {
  .sidebar { padding: calc(6px + var(--safe-top)) 12px 6px; min-height: 56px; gap: 12px; flex-wrap: nowrap; }
  .sidebar .brand { gap: 0; }
  .sidebar .brand-mark { display: none; }
  .sidebar .brand strong { font-size: 15px; letter-spacing: 0; white-space: nowrap; }
  .main-nav { flex: 1; gap: 3px; justify-content: center; }
  .main-nav .nav-item { font-size: 14px; min-height: 44px; padding: 0 9px; gap: 0; }
  .main-nav .nav-item>.icon, .main-nav .nav-count { display: none; }
  .workspace-tools { margin-left: 0; }
  .workspace-tools>summary { min-width: 44px; min-height: 44px; padding: 7px 3px; font-size: 13px; gap: 2px; }
  .workspace-tools>summary>.icon { width: 11px; height: 11px; }
  .page { padding: 12px 12px 0; }
  #global-notice, .connection-notice { margin: 10px 12px 0; font-size: 13px; }
  .workbench-daybar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 9px; margin-bottom: 12px; }
  .workbench-daybar .date-controls { display: grid; grid-column: 1/-1; grid-template-columns: minmax(0,1fr) auto; gap: 6px 8px; width: 100%; min-width: 0; }
  .workbench-daybar .date-navigation { grid-column: 1; grid-row: 1; min-width: 0; }
  .workbench-daybar .date-navigation>.icon-btn { flex: 0 0 44px; min-width: 44px; width: 44px; }
  .workbench-daybar .date-input-wrap { flex: 0 1 141px; width: 141px; padding: 0 4px; min-width: 0; }
  .workbench-daybar .date-input-wrap input { font-size: 16px; min-height: 44px; }
  .workbench-daybar .date-shortcuts { grid-column: 1/-1; grid-row: 2; width: 100%; gap: 6px; margin: 0 0 3px; }
  .workbench-daybar .date-shortcut { flex: 1; min-width: 44px; padding: 8px; font-size: 14px; }
  .workbench-daybar .day-label { grid-column: 2; grid-row: 1; max-width: 74px; font-size: 11px; line-height: 1.5; white-space: normal; min-width: 0; margin: 0; }
  .workbench-totals { grid-column: 1; order: 0; gap: 3px 10px; line-height: 1.7; font-size: 12px; align-content: center; }
  .workbench-totals .total-amount { flex-basis: 100%; order: 3; }
  .workbench-daybar>#export-btn { grid-column: 2; order: 0; min-height: 44px; font-size: 13px; padding: 9px 10px; gap: 5px; }
  .workbench-daybar>#export-btn>.icon { width: 15px; height: 15px; }
  .notice-history { margin-bottom: 12px; font-size: 12px; padding: 9px 11px; line-height: 1.7; }
  .notice-history button { font-size: 12px; }
  .quick-entry { padding: 14px 14px 10px; margin-bottom: 16px; border-radius: 9px; }
  .quick-heading { margin-bottom: 15px; padding-bottom: 11px; gap: 3px 12px; }
  .quick-heading h2 { font-size: 19px; }
  .quick-heading p { font-size: 13px; }
  #quick-form { gap: 14px; }
  .quick-main-fields { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .quick-company-field, .quick-tax-field, .quick-item-field { grid-column: auto; }
  .quick-summary { grid-column: auto; font-size: 12px; padding: 9px 10px; }
  #quick-company-name { font-size: 13px; }
  .quick-company-field>label, .quick-field>span { font-size: 14px; line-height: 21px; margin-bottom: 6px; }
  .quick-company-hint { font-size: 12px; min-height: 20px; }
  .quick-field input, .quick-field textarea, .quick-company-search input { font-size: 16px; }
  .quick-results { max-height: min(285px,40dvh); }
  .quick-details { padding-top: 12px; }
  .quick-details-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 12px; }
  .quick-save-option { font-size: 14px; padding: 11px; gap: 9px; }
  .quick-save-note { font-size: 12px; }
  .quick-actions { gap: 10px; }
  .quick-date-hint { flex-basis: 100%; font-size: 13px; }
  #quick-reset { min-width: 80px; padding: 10px 15px; }
  #quick-submit { flex: 1; min-width: 0; padding: 10px 13px; }
  .quick-feedback { font-size: 12px; min-height: 20px; }
  .list-header { min-height: 55px; padding: 13px; gap: 8px; }
  .list-heading { gap: 7px; }
  .list-heading h2 { font-size: 16px; }
  .count-badge { font-size: 12px; line-height: 22px; }
  .list-toolbar { padding: 0 12px 12px; gap: 8px; flex-wrap: nowrap; }
  .list-toolbar .search-field { min-width: 0; flex: 1; width: auto; height: 44px; min-height: 44px; padding: 0 9px; }
  .list-toolbar .search-field input { font-size: 16px; }
  .list-toolbar .search-field input::placeholder { font-size: 12px; }
  .list-toolbar .filter-field { flex: none; }
  .list-toolbar .filter-field select { min-height: 44px; font-size: 16px; padding-left: 8px; padding-right: 18px; max-width: 120px; }
  .list-footer, .list-footer>span:first-child, .list-footer>span:last-child { font-size: 12px; }
  .list-footer { padding: 10px 13px; }
  .data-table tbody { padding: 10px; background: #edf2e7; }
  .data-table tbody tr { padding: 14px 12px 8px; border-color: #baccae; }
  .data-table td[data-label]:before { color: #557442; font-size: 12px; }
  .data-table .company-cell:before { content: none; }
  .data-table .status-cell:before { content: none; }
  .row-title { font-size: 15px; }
  .wechat-value .copy-button { background: #e7f1dd; border-color: #b7cda4; color: #355f2c; font-size: 13px; }
  .row-actions .icon-btn { color: #476b34; font-size: 13px; }
  .export-note { font-size: 12px; padding: 10px 1px; flex-wrap: wrap; gap: 3px; }
  .export-note>span:last-child { margin-left: 0; }
  #customers-page .page-heading { margin: 2px 0 14px; gap: 10px; flex-wrap: wrap; }
  #customers-page .page-heading h1 { font-size: 23px; margin-bottom: 3px; }
  #customers-page .page-heading p { font-size: 13px; }
  #customers-page .page-heading>.btn { font-size: 14px; padding: 9px 12px; }
  #customers-page .customer-search { width: 100%; max-width: none; flex-basis: 100%; }
  .page-footer { padding: 4px 13px calc(10px + var(--safe-bottom)); font-size: 11px; gap: 4px 10px; }
  .page-footer .install-text-button { font-size: 12px; min-height: 44px; }
}
@media (max-width:360px) {
  .sidebar { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .sidebar .brand-mark { display: flex; width: 29px; height: 32px; }
  .sidebar .brand>div:last-child { display: none; }
  .main-nav .nav-item { padding-left: 8px; padding-right: 8px; font-size: 14px; }
  .page { padding-left: 10px; padding-right: 10px; }
  .workbench-daybar .date-input-wrap { flex: 1 1 124px; width: 124px; }
  .workbench-daybar .day-label { display: none; }
  .quick-entry { padding-left: 12px; padding-right: 12px; }
  .workbench-daybar>#export-btn { font-size: 12px; padding-left: 8px; padding-right: 8px; }
}
@media (pointer:coarse) {
  .workbench-daybar .date-navigation>.icon-btn { min-width: 44px; width: 44px; }
}

/* Keep every primary destination visible and touchable on narrow screens. */
@media (max-width:760px) {
  .sidebar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; }
  .sidebar>.brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .sidebar>.workspace-tools { grid-column: 2; grid-row: 1; justify-self: end; }
  .sidebar>.main-nav { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; gap: 4px; }
  .main-nav .nav-item { justify-content: center; width: 100%; min-width: 0; padding: 0 4px; }
}