:root {
  color-scheme: light;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

.hidden {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  -webkit-font-smoothing: antialiased;
}

.mobile-tab-bar, .mobile-search-button, .mobile-list-controls, .mobile-status-filters, .mobile-filter-header { display: none; }
.voucher-mobile-list, .voucher-mobile-filter { display: none; }
.voucher-button-icon { fill: none; height: 1.15rem; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 1.15rem; }

.app-view { min-width: 0; width: 100%; }

.sidebar-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.52;
}

.sidebar-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-heading h1 { color: #202548; font-size: 1.75rem; font-weight: 750; line-height: 1.2; }
.page-heading p { color: #64748b; margin-top: .35rem; }
.detail-heading { margin-top: 1rem; }
.eyebrow { color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.button { border: 1px solid transparent; border-radius: .7rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 650; min-height: 2.55rem; padding: .55rem .9rem; transition: background-color .15s, border-color .15s; }
.button:focus-visible, .field input:focus, .field select:focus, .field textarea:focus, .icon-button:focus-visible, .tab:focus-visible { outline: 3px solid rgba(32, 37, 72, .16); outline-offset: 2px; }
.button.primary { background: #202548; color: #fff; }
.button.primary:hover { background: #171b36; }
.button.secondary { background: #fff; border-color: #cbd5e1; color: #334155; }
.button.secondary:hover, .button.ghost:hover { background: #f8fafc; }
.button.ghost { background: transparent; color: #475569; }
.button.danger { background: #fff; border-color: #fecaca; color: #b91c1c; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.toolbar { align-items: end; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; padding: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 10rem; }
.field.grow { flex: 1 1 17rem; }
.field span { color: #475569; font-size: .78rem; font-weight: 700; }
.field input, .field select, .field textarea { background: #fff; border: 1px solid #cbd5e1; border-radius: .65rem; color: #0f172a; min-height: 2.6rem; padding: .55rem .7rem; width: 100%; }
.field textarea { min-height: 6rem; resize: vertical; }
.state-message { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .8rem; color: #475569; margin: 1rem 0; padding: .85rem 1rem; }
.state-message.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; min-width: 760px; width: 100%; }
.data-table th { background: #f8fafc; color: #64748b; font-size: .72rem; font-weight: 750; letter-spacing: .06em; padding: .8rem 1rem; text-align: left; text-transform: uppercase; }
.data-table td { border-top: 1px solid #e2e8f0; color: #334155; padding: .9rem 1rem; vertical-align: middle; }
.data-table td strong { color: #0f172a; display: block; }
.data-table td small { color: #64748b; }
.row-actions { display: flex; justify-content: flex-end; gap: .35rem; white-space: nowrap; }
.status-badge { border-radius: 999px; display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .55rem; }
.status-badge.active, .status-badge.paid { background: #dcfce7; color: #166534; }
.status-badge.archived, .status-badge.inactive, .status-badge.cancelled, .status-badge.undone { background: #e2e8f0; color: #475569; }
.status-badge.unpaid { background: #fee2e2; color: #991b1b; }
.status-badge.partially-paid { background: #fef3c7; color: #92400e; }
.status-badge.draft { background: #dbeafe; color: #1d4ed8; }
.status-badge.on-hold { background: #fef3c7; color: #92400e; }
.status-badge.debonded { background: #dbeafe; color: #1d4ed8; }
.status-badge.waiting-for-lab, .status-badge.adjustment { background: #fef3c7; color: #92400e; }
.status-badge.try-in { background: #dbeafe; color: #1d4ed8; }
.status-badge.delivered { background: #dcfce7; color: #166534; }
.status-badge.completed, .status-badge.valid { background: #dcfce7; color: #166534; }
.status-badge.admin { background: #dbeafe; color: #1d4ed8; }
.status-badge.dsa { background: #ede9fe; color: #6d28d9; }
.pagination { align-items: center; display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }
.pagination span { color: #64748b; font-size: .875rem; }
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.detail-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid div { background: #f8fafc; border-radius: .7rem; padding: .8rem; }
.detail-grid dt { color: #64748b; font-size: .75rem; font-weight: 700; }
.detail-grid dd { color: #0f172a; font-weight: 650; margin-top: .2rem; }
.tabs { border-bottom: 1px solid #cbd5e1; display: flex; gap: .2rem; margin: 1rem 0; overflow-x: auto; }
.tab { border-bottom: 2px solid transparent; color: #64748b; font-size: .875rem; font-weight: 650; padding: .7rem .9rem; white-space: nowrap; }
.tab.active { border-bottom-color: #202548; color: #202548; }
.tab:disabled { opacity: .55; }
.quick-actions { border-top: 1px solid #e2e8f0; margin-top: 1.25rem; padding-top: 1.25rem; }
.quick-actions h2 { color: #202548; font-weight: 700; }
.quick-actions p { color: #64748b; font-size: .875rem; margin: .3rem 0 .8rem; }
.workflow-panel { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; }
.workflow-panel > div { flex: 1; }
.workflow-panel .field { max-width: 100%; min-width: 0; }
.workflow-panel .field input { box-sizing: border-box; display: block; max-width: 100%; min-width: 0; width: 100%; }
.workflow-panel h2, .cycle-heading h2 { color: #202548; font-size: 1.1rem; font-weight: 750; }
.workflow-panel p, .cycle-heading p { color: #64748b; font-size: .85rem; margin-top: .25rem; }
.cycle-heading { margin-bottom: .75rem; margin-top: 1.5rem; }
.lab-table { min-width: 1280px; }
.braces-table { min-width: 1240px; }
.denture-table { min-width: 1420px; }
.panel-table { min-width: 1280px; }
.invoice-table { min-width: 1320px; }
.voucher-table { min-width: 1050px; }
.data-table .money-cell { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data-table td.variance-alert, .variance-card dd { color: #b91c1c; font-weight: 750; }
.master-status-icon { align-items: center; display: inline-flex; font-size: 1.25rem; font-weight: 850; justify-content: center; line-height: 1; min-height: 1.75rem; min-width: 1.75rem; }
.master-status-icon.is-active { color: #15803d; }
.master-status-icon.is-inactive { color: #dc2626; }
.field input[readonly] { background: #f8fafc; color: #475569; }
.due-text { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.due-text.overdue { color: #b91c1c; }
.due-text.today { color: #b45309; }
.due-text.upcoming { color: #1d4ed8; }
.patient-search-row { align-items: end; display: flex; gap: .5rem; }
.patient-search-row .field { flex: 1; }
.module-panel { margin-top: 1rem; }
.compact-heading { margin-bottom: 1rem; }
.compact-heading h2 { color: #202548; font-size: 1.1rem; font-weight: 750; }
.history-heading { margin-top: 1.5rem; }
.record-dialog { background: transparent; border: 0; margin: auto; max-height: 92vh; max-width: 52rem; padding: 1rem; width: calc(100% - 1rem); }
.record-dialog::backdrop { background: rgba(15, 23, 42, .58); backdrop-filter: blur(2px); }
.modal-card { background: #fff; border-radius: 1rem; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); overflow: hidden; }
.modal-header { align-items: flex-start; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; padding: 1.1rem 1.25rem; }
.modal-header h2 { color: #202548; font-size: 1.25rem; font-weight: 750; }
.icon-button { border-radius: .5rem; color: #64748b; font-size: 1.5rem; line-height: 1; padding: .3rem .55rem; }
.icon-button:hover { background: #f1f5f9; }
.modal-body { display: grid; gap: .9rem; max-height: 60vh; overflow-y: auto; padding: 1.25rem; }
.modal-actions { border-top: 1px solid #e2e8f0; display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; }
.modal-card > .state-message { margin: 0 1.25rem 1rem; }
.toast { background: #202548; border-radius: .8rem; bottom: 1.25rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .2); color: #fff; max-width: 25rem; padding: .8rem 1rem; position: fixed; right: 1.25rem; z-index: 80; }
.wait-overlay { align-items: center; backdrop-filter: blur(3px); background: rgba(248, 250, 252, .82); border: 0; display: flex; height: 100%; inset: 0; justify-content: center; margin: 0; max-height: none; max-width: none; padding: 0; position: fixed; width: 100%; }
.wait-loader { align-items: center; display: flex; height: 5.5rem; justify-content: center; position: relative; width: 5.5rem; }
.wait-loader-logo { height: 3.5rem; object-fit: contain; width: 3.5rem; }
.wait-loader-ring { animation: wait-spin .85s linear infinite; border: .3rem solid rgba(32, 37, 72, .16); border-radius: 9999px; border-top-color: #202548; inset: 0; position: absolute; }
@keyframes wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wait-loader-ring { animation-duration: 1.8s; } }
.toggle { align-items: center; display: inline-flex; gap: .55rem; }
.toggle input { height: 1.15rem; width: 1.15rem; }
.locum-editor { border: 1px solid #cbd5e1; border-radius: .85rem; display: grid; gap: 1rem; margin: .25rem 0; min-width: 0; padding: 1rem; }
.locum-editor legend { color: #202548; font-size: 1rem; font-weight: 750; padding: 0 .4rem; }
.locum-help { color: #64748b; font-size: .8rem; line-height: 1.45; margin: 0; }
.locum-field-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.locum-field-grid .field { min-width: 0; }
.locum-treatments { border-top: 1px solid #e2e8f0; padding-top: 1rem; }
.locum-treatments h3 { color: #202548; font-size: .95rem; font-weight: 750; }
.locum-treatment-rows { display: grid; gap: .65rem; margin: .8rem 0; }
.locum-treatment-row { align-items: end; background: #f8fafc; border-radius: .7rem; display: grid; gap: .6rem; grid-template-columns: 1fr 1fr .7fr auto; padding: .75rem; }
.locum-treatment-row .field { min-width: 0; }
.long-text-cell { white-space: pre-wrap; }
.locum-treatment-row .wide { grid-column: 1 / -1; }
.locum-patient-search { align-items: end; display: grid; gap: .6rem; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
.locum-patient-search .field { min-width: 0; }
.locum-calculation { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem; display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .85rem; }
.locum-calculation div { min-width: 0; text-align: center; }
.locum-calculation dt { color: #64748b; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.locum-calculation dd { color: #202548; font-size: .9rem; font-weight: 700; margin-top: .2rem; overflow-wrap: anywhere; }
.locum-final-amount { color: #15803d !important; font-weight: 800 !important; }
.global-search-wrap { max-width: 25rem; min-width: 12rem; position: relative; width: 32vw; }
.global-search-wrap > input { border: 1px solid #cbd5e1; border-radius: .7rem; min-height: 2.55rem; padding: .55rem .8rem; width: 100%; }
.global-search-results { background: #fff; border: 1px solid #cbd5e1; border-radius: .8rem; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); max-height: min(70vh, 34rem); overflow-y: auto; padding: .45rem; position: absolute; right: 0; top: calc(100% + .55rem); width: min(31rem, calc(100vw - 2rem)); }
.global-search-results section + section { border-top: 1px solid #e2e8f0; margin-top: .35rem; padding-top: .35rem; }
.global-search-results h3 { color: #64748b; font-size: .68rem; font-weight: 800; letter-spacing: .08em; padding: .4rem .55rem .25rem; text-transform: uppercase; }
.global-search-results button { border-radius: .55rem; display: flex; gap: .7rem; justify-content: space-between; padding: .55rem; text-align: left; width: 100%; }
.global-search-results button:hover { background: #f1f5f9; }
.global-search-results button strong { color: #202548; }
.global-search-results button span { color: #64748b; overflow-wrap: anywhere; text-align: right; }
.empty-state { color: #64748b; font-size: .875rem; padding: 1rem; text-align: center; }
.dashboard-mobile-brand, .mobile-user-avatar, .mobile-sidebar-actions { display: none; }
.header-refresh-button { gap: .45rem; }
.header-refresh-button svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 1rem; }
#appShell:has(#dashboardView:not(.hidden)) .global-search-wrap, #appShell:has(#dashboardView:not(.hidden)) .mobile-search-button { display: none; }
#appShell:has(#dashboardView:not(.hidden)) .header-account { margin-left: auto; }
.header-refresh-button, #logoutButton { border-radius: .7rem; font-size: .875rem; font-weight: 650; min-height: 2.55rem; padding: .55rem .9rem; width: 6.75rem; }
#logoutButton { background: #dc2626; border-color: #dc2626; color: #fff; }
#logoutButton:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
#appShell:not(:has(#dashboardView:not(.hidden))) .header-refresh-button { display: none; }
.dashboard-heading { align-items: center; background: linear-gradient(120deg,#eef5ff 0%,#e1ecff 55%,#f2f7ff 100%); border: 1px solid #e0e9f7; border-radius: 1.4rem; justify-content: center; min-height: 10rem; overflow: hidden; padding: 1.5rem; position: relative; text-align: center; }
.dashboard-heading > div { margin: 0 auto; max-width: min(46rem,100%); position: relative; z-index: 2; }
.dashboard-heading h1 { color: #111936; font-size: 2rem; font-weight: 850; letter-spacing: -.035em; }
.dashboard-heading p { color: #607093; }
.dashboard-heading .eyebrow { color: #526a98; }
.kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-card { align-items: center; background: #fff; border: 1px solid #e5eaf2; border-radius: 1.2rem; box-shadow: 0 7px 20px rgba(19,36,72,.05); display: grid; gap: .85rem; grid-template-columns: auto minmax(0,1fr) auto; min-width: 0; padding: 1rem; text-align: left; }
.kpi-card:hover { border-color: #b9c8df; transform: translateY(-1px); }
.kpi-icon { align-items: center; background: #e9f3ff; border-radius: 999px; color: #1766db; display: flex; height: 3.1rem; justify-content: center; width: 3.1rem; }
.kpi-icon svg { fill: none; height: 1.55rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.55rem; }
.kpi-content { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kpi-card .kpi-content strong { color: #111936; font-size: 1.75rem; line-height: 1; }
.kpi-card .kpi-label { color: #607093; font-size: .78rem; font-weight: 650; line-height: 1.25; margin-top: .35rem; overflow-wrap: anywhere; }
.kpi-chevron { fill: none; height: 1rem; stroke: #21365e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1rem; }
.kpi-tone-1 .kpi-icon { background: #e3f8ef; color: #11936b; }
.kpi-tone-2 .kpi-icon { background: #eee8ff; color: #6b3bdf; }
.kpi-tone-3 .kpi-icon { background: #ffe8ed; color: #db2949; }
.kpi-tone-4 .kpi-icon { background: #fff3d9; color: #bd7900; }
.kpi-tone-5 .kpi-icon { background: #ffe5ea; color: #ce203d; }
.dashboard-columns { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.dashboard-card, .chart-card { background: #fff; border: 1px solid #e5eaf2; border-radius: 1.2rem; box-shadow: 0 7px 20px rgba(19,36,72,.045); min-width: 0; padding: 1.1rem; }
.dashboard-section { margin-top: 1rem; }
.section-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .8rem; }
.section-heading > div { flex: 1; min-width: 0; }
.section-heading h2, .chart-card h3, .report-heading h2 { color: #202548; font-size: 1.05rem; font-weight: 750; }
.section-heading p, .report-heading p { color: #64748b; font-size: .8rem; margin-top: .2rem; }
.count-pill { background: #eef2ff; border-radius: 999px; color: #3730a3; font-size: .75rem; font-weight: 800; padding: .25rem .55rem; }
.dashboard-section-icon { align-items: center; background: #e9f3ff; border-radius: 999px; color: #1766db; display: flex; flex: 0 0 auto; height: 2.8rem; justify-content: center; width: 2.8rem; }
.dashboard-section-icon svg { fill: none; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 1.35rem; }
.upcoming-icon, .chart-icon { background: #eee8ff; color: #6637df; }
.overview-icon { background: #e3f8ef; color: #11936b; }
.work-list { display: grid; gap: 0; max-height: 28rem; overflow-y: auto; }
.work-item { align-items: center; border-radius: .65rem; display: grid; gap: .65rem; grid-template-columns: auto minmax(0,1fr) auto auto; justify-content: space-between; padding: .72rem .35rem; text-align: left; width: 100%; }
.work-item + .work-item { border-top: 1px solid #edf0f5; }
.work-item:hover { background: #f8fafc; }
.work-item-dot { background: #ff472d; border-radius: 999px; height: .65rem; width: .65rem; }
.work-item-main { display: flex; flex-direction: column; min-width: 0; }
.work-item strong { color: #0f172a; font-size: .85rem; overflow-wrap: anywhere; }
.work-item small, .work-item time { color: #64748b; font-size: .75rem; }
.work-item time { flex: none; }
.work-item-chevron { fill: none; height: .85rem; stroke: #7384a5; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: .85rem; }
.overview-grid { display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.overview-card { background: #edf6ff; border-radius: .8rem; display: flex; flex-direction: column; padding: .85rem; text-align: center; }
.overview-card strong { color: #202548; font-size: 1.5rem; }
.overview-card span { color: #64748b; font-size: .72rem; font-weight: 700; margin-top: .25rem; }
.overview-tone-1 { background: #ecf9f3; }
.overview-tone-2 { background: #f0edff; }
.overview-tone-3 { background: #fff2e9; }
.overview-tone-4 { background: #fff0f5; }
.overview-tone-5 { background: #eaf7ff; }
.chart-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bar-row { margin-top: .7rem; }
.bar-label { display: flex; font-size: .72rem; gap: .5rem; justify-content: space-between; }
.bar-label span { color: #475569; overflow-wrap: anywhere; }
.bar-label strong { color: #202548; white-space: nowrap; }
.bar-track { background: #e2e8f0; border-radius: 999px; height: .45rem; margin-top: .3rem; overflow: hidden; }
.bar-fill { background: #202548; border-radius: inherit; display: block; height: 100%; }
.report-output { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.report-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.report-heading img { height: 3rem; object-fit: contain; width: 3rem; }
.report-table { min-width: 900px; }

.mobile-backdrop {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

@media (max-width: 1023px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
  }

  #sidebar.is-open {
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  body { background: #f6f7fb; }
  body.mobile-sheet-open { overflow: hidden; }
  #mainContent { max-width: 100%; overflow-x: hidden; padding: 1rem .875rem calc(10rem + env(safe-area-inset-bottom)); }
  #appShell header { display: grid; gap: .5rem; grid-template-columns: auto minmax(0, 1fr) auto; height: calc(4rem + env(safe-area-inset-top)); min-height: 4rem; padding: env(safe-area-inset-top) .875rem 0; }
  #appShell header > div:first-of-type { min-width: 0; text-align: center; }
  #appShell header > div:last-of-type { display: none; }
  #openMenuButton { margin-right: 0; }
  #pageTitle { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #appShell header .text-xs { display: none; }
  .mobile-search-button { align-items: center; border-radius: .75rem; color: #334155; display: flex; height: 2.75rem; justify-content: center; width: 2.75rem; }
  .mobile-search-button svg { fill: none; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 1.35rem; }
  .global-search-wrap { background: #fff; display: none; grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; padding: 0 0 .75rem; position: relative; width: 100%; }
  .global-search-wrap.is-open { display: block; }
  #appShell header:has(.global-search-wrap.is-open) { height: auto; }
  .global-search-results { left: 0; right: auto; width: 100%; }

  .app-view { max-width: 100%; min-width: 0; text-align: left; }
  .page-heading { align-items: center; flex-direction: column; margin-bottom: 1rem; text-align: center; }
  .page-heading > div:first-child { max-width: 100%; width: 100%; }
  .page-heading h1 { overflow-wrap: anywhere; }
  .page-heading p { font-size: .82rem; line-height: 1.45; }
  .button-row { justify-content: center; width: 100%; }
  .toolbar, .panel, .workflow-panel, .state-message, .table-card { max-width: 100%; min-width: 0; overflow-wrap: anywhere; width: 100%; }
  .mobile-list-controls { display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1rem; }
  .mobile-list-controls.filter-only { display: flex; justify-content: flex-end; }
  .mobile-list-search-wrap { align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: .85rem; display: flex; min-width: 0; padding: 0 .8rem; }
  .mobile-list-search-wrap > span { color: #202548; font-size: 1.55rem; line-height: 1; margin-right: .45rem; transform: rotate(-20deg); }
  .mobile-list-search { background: transparent; border: 0; color: #0f172a; font-size: 1rem; height: 3rem; min-width: 0; outline: none; width: 100%; }
  .mobile-filter-launcher { border-radius: .85rem; min-height: 3rem; white-space: nowrap; }
  .mobile-filter-launcher svg { fill: none; height: 1.2rem; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 1.2rem; }
  .mobile-status-filters { display: flex; gap: .45rem; margin: -.25rem 0 1rem; overflow-x: auto; padding: .25rem 0; scrollbar-width: none; }
  .mobile-status-filter { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; color: #64748b; flex: none; font-size: .75rem; font-weight: 750; min-height: 2.35rem; padding: .45rem .8rem; }
  .mobile-status-filter.selected { background: #202548; border-color: #202548; color: #fff; }
  form.toolbar { display: none; }
  form.toolbar.mobile-open { align-items: stretch; background: #fff; border: 0; border-radius: 1.25rem 1.25rem 0 0; bottom: 0; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .52); display: flex; left: 0; margin: 0; max-height: 86dvh; overflow-y: auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); position: fixed; right: 0; text-align: left; z-index: 70; }
  .mobile-filter-header { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; margin: -.25rem 0 .25rem; padding-bottom: .75rem; }
  .mobile-filter-header > div { flex: 1; padding-left: 2rem; text-align: center; }
  .mobile-filter-header h2 { color: #202548; font-size: 1.15rem; font-weight: 750; }
  .mobile-filter-header .icon-button svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 1.25rem; }
  .field { min-width: 0; text-align: left; width: 100%; }
  .field input, .field select, .field textarea { font-size: 1rem; max-width: 100%; text-align: left; }
  .field input[type="date"] { -webkit-appearance: none; appearance: none; inline-size: -webkit-fill-available; max-inline-size: 100%; min-inline-size: 0; width: -webkit-fill-available; }
  .field select { text-align-last: left; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid div, .detail-grid dt, .detail-grid dd { text-align: left; }
  .workflow-panel, .patient-search-row { align-items: stretch; flex-direction: column; }
  .workflow-panel > div { min-width: 0; }
  #labSendPanel { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  #labSendPanel > * { max-width: 100%; min-width: 0; }
  #labSendPanel .field { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; width: 100%; }
  #labExpectedOverride {
    -webkit-appearance: none;
    appearance: none;
    inline-size: -webkit-fill-available;
    max-inline-size: 100%;
    min-inline-size: 0;
    width: -webkit-fill-available;
  }
  .workflow-panel > div, .cycle-heading, .compact-heading, .quick-actions { text-align: center; }
  .workflow-panel .button { width: 100%; }
  .tabs { justify-content: flex-start; }
  .table-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .data-table, .lab-table, .braces-table, .denture-table, .panel-table, .invoice-table, .voucher-table, .report-table { display: block; min-width: 0; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody { display: grid; gap: .75rem; width: 100%; }
  .data-table tr { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.15rem; box-shadow: 0 6px 18px rgba(32, 37, 72, .07); display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; padding: .95rem; position: relative; }
  .data-table tr::before { align-items: center; background: #eef2ff; border-radius: 999px; color: #202548; content: attr(data-initials); display: flex; font-size: .82rem; font-weight: 850; height: 2.8rem; justify-content: center; left: .95rem; position: absolute; top: .95rem; width: 2.8rem; }
  .data-table td { align-items: start; border: 0; display: grid; font-size: .86rem; gap: .75rem; grid-column: 1 / -1; grid-template-columns: minmax(6.5rem, .42fr) minmax(0, 1fr); padding: .42rem 0; text-align: right; }
  .data-table td::before { color: #64748b; content: attr(data-label); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .data-table td > * { margin-left: auto; max-width: 100%; }
  .data-table td[colspan] { display: block; padding: 1rem; text-align: center; }
  .data-table td[colspan]::before { display: none; }
  .data-table td[data-mobile-primary="true"] { align-items: center; display: flex; font-size: .95rem; font-weight: 800; grid-column: 1 / -1; justify-content: flex-start; min-height: 2.8rem; overflow: hidden; padding: 0 4.6rem 0 3.5rem; text-align: left; }
  .data-table td[data-mobile-primary="true"]::before { display: none; }
  .data-table td[data-mobile-primary="true"] > * { margin: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .data-table td[data-mobile-kicker="true"] { color: #64748b; display: block; font-size: .68rem; font-weight: 800; left: 4.45rem; letter-spacing: .055em; max-width: calc(100% - 10rem); overflow: hidden; padding: 0; position: absolute; text-align: left; text-overflow: ellipsis; text-transform: uppercase; top: .72rem; white-space: nowrap; }
  .data-table td[data-mobile-kicker="true"]::before { display: none; }
  .data-table td[data-mobile-kicker="true"] + td[data-mobile-primary="true"] { padding-top: .8rem; }
  .data-table td[data-mobile-status="true"] { display: block; padding: 0; position: absolute; right: .95rem; top: 1.1rem; }
  .data-table td[data-mobile-status="true"]::before { display: none; }
  .data-table td[data-mobile-status="true"] > * { margin: 0; }
  .data-table td[data-mobile-detail="true"] { background: #f6f8fc; padding: .55rem .75rem; }
  .data-table td[data-mobile-detail-edge="first"] { border-radius: .8rem .8rem 0 0; margin-top: .8rem; padding-top: .75rem; }
  .data-table td[data-mobile-detail-edge="last"] { border-radius: 0 0 .8rem .8rem; padding-bottom: .75rem; }
  .data-table td[data-mobile-detail-edge="both"] { border-radius: .8rem; margin-top: .8rem; padding-bottom: .75rem; padding-top: .75rem; }
  .data-table td[data-mobile-actions="true"] { border-top: 1px solid #e2e8f0; display: block; margin-top: .8rem; padding: .75rem 0 0; }
  .data-table td[data-mobile-actions="true"]::before { display: none; }
  .data-table td.mobile-card-hidden { display: none; }
  .data-table .money-cell[data-mobile-detail="true"] { font-size: 1rem; font-weight: 800; }
  .row-actions { justify-content: center; }
  .row-actions .button { min-height: 2.75rem; }
  .pagination { justify-content: center; }
  .record-dialog { height: 100dvh; max-height: none; max-width: none; padding: 0; width: 100%; }
  .modal-card { border-radius: 0; display: flex; flex-direction: column; height: 100dvh; padding-top: env(safe-area-inset-top); }
  .modal-header { flex: none; text-align: center; }
  .modal-header > div { flex: 1; padding-left: 2rem; }
  .modal-body { flex: 1; max-height: none; padding: 1rem; }
  .modal-actions { background: #fff; flex: none; justify-content: stretch; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .modal-actions .button { flex: 1; min-height: 3rem; }
  .locum-field-grid, .locum-calculation, .locum-treatment-row { grid-template-columns: 1fr; }
  .locum-patient-search { grid-template-columns: 1fr; }
  .locum-treatment-row .button { width: 100%; }
  .toast { left: 1rem; right: 1rem; }
  .kpi-grid, .dashboard-columns, .overview-grid, .chart-grid { grid-template-columns: 1fr; }
  .kpi-card { text-align: center; }
  .work-item { text-align: left; }
  .work-item { align-items: flex-start; }
  .section-heading, .report-heading { align-items: center; flex-direction: column; text-align: center; width: 100%; }
  .report-heading img { margin: 0 auto; order: -1; }
  .app-view > .button.ghost:first-child { margin-left: auto; margin-right: auto; }
  .button, #openMenuButton { min-height: 2.75rem; }
  .app-view > .page-heading:first-child > .button.primary { bottom: calc(5.7rem + env(safe-area-inset-bottom)); box-shadow: 0 8px 24px rgba(32, 37, 72, .25); left: .875rem; min-height: 3.45rem; position: fixed; right: .875rem; width: calc(100% - 1.75rem); z-index: 35; }

  .mobile-tab-bar { align-items: stretch; background: rgba(255, 255, 255, .97); border-top: 1px solid #e2e8f0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); left: 0; min-height: calc(5.15rem + env(safe-area-inset-bottom)); padding: .45rem .35rem calc(.45rem + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 34; }
  .mobile-tab-bar a, .mobile-tab-bar button { align-items: center; border-radius: 1rem; color: #64748b; display: flex; flex-direction: column; font-size: .65rem; font-weight: 700; gap: .15rem; justify-content: center; min-height: 4rem; }
  .mobile-tab-bar a > span, .mobile-tab-bar button > span { line-height: 1.05; text-align: center; }
  .mobile-tab-bar svg { fill: none; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.35rem; }
  .mobile-tab-bar a.active { background: #eef2ff; color: #202548; }

  #appShell:has(.mobile-records-view:not(.hidden)) > div > header { display: none; }
  #appShell:has(.mobile-records-view:not(.hidden)) #mainContent { padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(11rem + env(safe-area-inset-bottom)); }
  .mobile-records-view .mobile-list-heading { align-items: start; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.4rem; text-align: left; }
  .mobile-records-view .mobile-list-heading > div:first-child { min-width: 0; text-align: left; }
  .mobile-records-view .mobile-list-heading h1 { color: #111936; font-size: 1.7rem; font-weight: 850; letter-spacing: -.035em; line-height: 1.12; }
  .mobile-records-view .mobile-list-heading p { color: #7b89a7; font-size: .9rem; line-height: 1.4; margin-top: .35rem; }
  .mobile-records-view .mobile-filter-launcher { align-items: center; align-self: start; background: rgba(255,255,255,.96); border-color: #d5ddea; border-radius: 1rem; color: #111a46; display: flex; font-size: .9rem; font-weight: 800; gap: .45rem; min-height: 3.25rem; padding: 0 .9rem; width: auto; }
  .mobile-records-view > .mobile-list-controls { display: block; margin-bottom: 1rem; }
  .mobile-records-view .mobile-list-search-wrap { border: 1.5px solid #d9e0ec; border-radius: 1.05rem; height: 3.65rem; padding: 0 1rem; }
  .mobile-records-view .mobile-list-search-wrap > span { display: none; }
  .mobile-records-view .mobile-list-search-wrap::before { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111a46' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E"); content: ''; flex: 0 0 auto; height: 1.45rem; margin-right: .75rem; width: 1.45rem; }
  .mobile-records-view .mobile-list-search { color: #111936; height: 3.55rem; }
  .mobile-records-view .mobile-list-search::placeholder { color: #7b89aa; }
  .mobile-records-view > .mobile-status-filters { border-bottom: 1px solid #e2e7ef; display: flex; gap: 0; margin: 0 0 1.15rem; overflow-x: auto; padding: 0; }
  .mobile-records-view .mobile-status-filter { align-items: center; background: transparent; border: 0; border-radius: 0; color: #53617f; display: flex; font-size: .82rem; justify-content: center; min-height: 3.25rem; padding: .35rem .9rem; position: relative; }
  .mobile-records-view .mobile-status-filter.selected { background: transparent; color: #145bd7; }
  .mobile-records-view .mobile-status-filter.selected::after { background: #2677f5; border-radius: 999px 999px 0 0; bottom: -1px; content: ''; height: 3px; left: 0; position: absolute; right: 0; }

  .mobile-records-view .data-table tr { border-radius: 1.5rem; box-shadow: 0 8px 26px rgba(19,36,72,.07); padding: 1.15rem; }
  .mobile-records-view .data-table tr::before { background: linear-gradient(135deg,#e8f2ff,#d8e9ff); height: 3.15rem; left: 1.15rem; top: 1.15rem; width: 3.15rem; }
  .mobile-records-view .data-table tbody tr:nth-child(4n+2)::before { background: linear-gradient(135deg,#edeaff,#e1ddff); color: #44439c; }
  .mobile-records-view .data-table tbody tr:nth-child(4n+3)::before { background: linear-gradient(135deg,#e4f7ef,#d5f0e4); color: #227052; }
  .mobile-records-view .data-table tbody tr:nth-child(4n)::before { background: linear-gradient(135deg,#fff2dd,#f8e5c6); color: #86591d; }
  .mobile-records-view .data-table td[data-mobile-primary="true"] { font-size: .98rem; min-height: 3.15rem; padding-left: 3.9rem; }
  .mobile-records-view .data-table td[data-mobile-kicker="true"] { left: 5rem; top: .9rem; }
  .mobile-records-view .data-table td[data-mobile-kicker="true"] + td[data-mobile-primary="true"] { padding-top: .85rem; }
  .mobile-records-view .data-table td[data-mobile-status="true"] { right: 1.15rem; top: 1.35rem; }
  .mobile-records-view .data-table td[data-mobile-detail="true"] { background: linear-gradient(135deg,#f6f8fb,#f2f5f9); padding: .6rem .9rem; }
  .mobile-records-view .data-table td[data-mobile-detail-edge="first"] { border-radius: 1.1rem 1.1rem 0 0; margin-top: 1rem; padding-top: .85rem; }
  .mobile-records-view .data-table td[data-mobile-detail-edge="last"] { border-radius: 0 0 1.1rem 1.1rem; padding-bottom: .85rem; }
  .mobile-records-view .data-table td[data-mobile-detail-edge="both"] { border-radius: 1.1rem; margin-top: 1rem; }
  .mobile-records-view .data-table td[data-mobile-actions="true"] { margin-top: .9rem; padding-top: .8rem; }
  .mobile-record-view-button { align-items: center; background: transparent !important; border: 0 !important; color: #14234e !important; display: inline-flex; gap: .5rem; }
  .mobile-record-view-button svg { fill: none; height: 1.15rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.15rem; }
  .mobile-record-view-button .mobile-record-chevron { height: .85rem; width: .85rem; }

  .app-view[id$="DetailView"] { text-align: center; }
  .app-view[id$="DetailView"] > .button.ghost:first-child { align-items: center; display: flex; gap: .4rem; justify-content: center; margin: 0 auto .65rem; width: fit-content; }
  .app-view[id$="DetailView"] > .button.ghost:first-child svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1rem; }
  .app-view[id$="DetailView"] .detail-heading { align-items: center; text-align: center; }
  .app-view[id$="DetailView"] .detail-heading > div:first-child { text-align: center; }
  .app-view[id$="DetailView"] .detail-heading h1 { color: #111936; font-size: 1.65rem; font-weight: 850; letter-spacing: -.03em; }
  .app-view[id$="DetailView"] .detail-heading .eyebrow { color: #52617f; }
  .app-view[id$="DetailView"] .detail-heading .button-row { justify-content: center; }
  .app-view[id$="DetailView"] .detail-heading .button { min-width: 8.5rem; }
  .app-view[id$="DetailView"] .panel { border-color: rgba(222,228,239,.8); border-radius: 1.5rem; box-shadow: 0 8px 26px rgba(19,36,72,.06); text-align: center; }
  .app-view[id$="DetailView"] .detail-grid { gap: .7rem; }
  .app-view[id$="DetailView"] .detail-grid div { background: linear-gradient(135deg,#f6f8fb,#f2f5f9); border: 1px solid #edf0f5; border-radius: 1rem; padding: .95rem; text-align: center; }
  .app-view[id$="DetailView"] .detail-grid dt { color: #697795; font-size: .69rem; letter-spacing: .055em; text-align: center; text-transform: uppercase; }
  .app-view[id$="DetailView"] .detail-grid dd { color: #111936; font-size: .92rem; margin-top: .35rem; overflow-wrap: anywhere; text-align: center; }
  .app-view[id$="DetailView"] .tabs { justify-content: center; }
  .app-view[id$="DetailView"] .quick-actions .button-row, .app-view[id$="DetailView"] .compact-heading .button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-view[id$="DetailView"] .quick-actions .button, .app-view[id$="DetailView"] .compact-heading .button { width: 100%; }
  .app-view[id$="DetailView"] .workflow-panel { align-items: center; text-align: center; }

  #appShell:has(#vouchersView:not(.hidden)) > div > header { display: none; }
  #appShell:has(#vouchersView:not(.hidden)) #mainContent { padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(12rem + env(safe-area-inset-bottom)); }
  #vouchersView .voucher-page-heading { align-items: flex-start; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.5rem; text-align: left; }
  #vouchersView .voucher-page-heading > div:first-child { min-width: 0; }
  #vouchersView .voucher-page-heading h1 { color: #111936; font-size: 1.7rem; font-weight: 850; letter-spacing: -.035em; line-height: 1.12; }
  #vouchersView .voucher-page-heading p { color: #7b89a7; font-size: .9rem; line-height: 1.4; margin-top: .35rem; }
  #vouchersView .voucher-heading-actions { display: contents; }
  #vouchersView .voucher-mobile-filter { align-items: center; align-self: start; background: rgba(255,255,255,.96); border-color: #d5ddea; border-radius: 1rem; color: #111a46; display: flex; font-size: .9rem; font-weight: 800; gap: .45rem; min-height: 3.25rem; padding: 0 .9rem; width: auto; }
  #vouchersView .voucher-mobile-filter svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; width: 1.25rem; }
  #vouchersView > .mobile-list-controls { display: block; margin-bottom: 1rem; }
  #vouchersView .mobile-list-search-wrap { border: 1.5px solid #d9e0ec; border-radius: 1.05rem; height: 3.65rem; padding: 0 1rem; }
  #vouchersView .mobile-list-search-wrap > span { display: none; }
  #vouchersView .mobile-list-search-wrap::before { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111a46' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E"); content: ''; flex: 0 0 auto; height: 1.45rem; margin-right: .75rem; width: 1.45rem; }
  #vouchersView .mobile-list-search { color: #111936; height: 3.55rem; }
  #vouchersView .mobile-list-search::placeholder { color: #7b89aa; }
  #vouchersView > .mobile-status-filters { border-bottom: 1px solid #e2e7ef; display: flex; gap: 0; margin: 0 0 1.15rem; overflow-x: auto; padding: 0; }
  #vouchersView .mobile-status-filter { align-items: center; background: transparent; border: 0; border-radius: 0; color: #53617f; display: flex; font-size: .82rem; gap: .4rem; justify-content: center; min-height: 3.25rem; padding: .35rem .9rem; position: relative; }
  #vouchersView .mobile-status-filter.selected { background: transparent; color: #145bd7; }
  #vouchersView .mobile-status-filter.selected::after { background: #2677f5; border-radius: 999px 999px 0 0; bottom: -1px; content: ''; height: 3px; left: 0; position: absolute; right: 0; }
  .voucher-mobile-count { align-items: center; background: #dceaff; border-radius: 999px; color: #243658; display: inline-flex; font-size: .72rem; height: 1.75rem; justify-content: center; min-width: 1.75rem; padding: 0 .45rem; }
  #voucherTableWrap { display: none !important; }
  .voucher-mobile-list { display: flex; flex-direction: column; gap: 1.15rem; }
  .voucher-mobile-card { background: rgba(255,255,255,.98); border: 1px solid rgba(222,228,239,.78); border-radius: 1.5rem; box-shadow: 0 8px 26px rgba(19,36,72,.07); padding: 1.15rem; }
  .voucher-mobile-card-top { align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between; }
  .voucher-mobile-person { align-items: center; display: flex; gap: .8rem; min-width: 0; }
  .voucher-mobile-avatar { align-items: center; background: linear-gradient(135deg,#e8f2ff,#d8e9ff); border-radius: 999px; color: #23478e; display: flex; flex: 0 0 auto; font-size: .88rem; font-weight: 850; height: 3.15rem; justify-content: center; width: 3.15rem; }
  .voucher-mobile-card.avatar-tone-1 .voucher-mobile-avatar { background: linear-gradient(135deg,#edeaff,#e1ddff); color: #44439c; }
  .voucher-mobile-card.avatar-tone-2 .voucher-mobile-avatar { background: linear-gradient(135deg,#e4f7ef,#d5f0e4); color: #227052; }
  .voucher-mobile-card.avatar-tone-3 .voucher-mobile-avatar { background: linear-gradient(135deg,#fff2dd,#f8e5c6); color: #86591d; }
  .voucher-mobile-identity { display: flex; flex-direction: column; min-width: 0; }
  .voucher-mobile-name { color: #0c1433; font-size: .98rem; font-weight: 850; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voucher-mobile-role { color: #6e7c9c; font-size: .82rem; margin-top: .18rem; }
  .voucher-mobile-status { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: .73rem; font-weight: 850; gap: .3rem; min-height: 2rem; padding: 0 .65rem; }
  .voucher-mobile-status svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1rem; }
  .voucher-mobile-status.paid { background: #dcf7e3; color: #19843b; }
  .voucher-mobile-status.active, .voucher-mobile-status.completed, .voucher-mobile-status.delivered, .voucher-mobile-status.valid { background: #dcf7e3; color: #19843b; }
  .voucher-mobile-status.open, .voucher-mobile-status.in-progress, .voucher-mobile-status.submitted { background: #e4edff; color: #2059bd; }
  .voucher-mobile-status.unpaid, .voucher-mobile-status.on-hold { background: #fff4cf; color: #8c6200; }
  .voucher-mobile-status.pending, .voucher-mobile-status.partially-paid, .voucher-mobile-status.awaiting-return { background: #fff4cf; color: #8c6200; }
  .voucher-mobile-status.draft { background: #e8f0ff; color: #1f5ec9; }
  .voucher-mobile-status.cancelled, .voucher-mobile-status.archived, .voucher-mobile-status.inactive, .voucher-mobile-status.overdue { background: #ffe4e4; color: #a73333; }
  .voucher-mobile-detail-box { background: linear-gradient(135deg,#f6f8fb,#f2f5f9); border-radius: 1.15rem; display: grid; margin-top: 1rem; padding: .75rem 1rem; }
  .voucher-mobile-detail-row { align-items: center; display: grid; gap: .55rem; grid-template-columns: 1.45rem minmax(6.4rem,.85fr) minmax(0,1.15fr); min-height: 2.65rem; }
  .voucher-mobile-detail-icon { fill: none; height: 1.15rem; stroke: #5f7092; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.15rem; }
  .voucher-mobile-detail-label { color: #697795; font-size: .78rem; }
  .voucher-mobile-detail-value { color: #121a3b; font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; text-align: left; }
  .voucher-mobile-detail-value.amount { font-size: .95rem; font-variant-numeric: tabular-nums; }
  .voucher-mobile-actions { align-items: center; border-top: 1px solid #e5e9f1; display: flex; gap: .65rem; justify-content: space-between; margin-top: .85rem; padding-top: .75rem; }
  .voucher-mobile-view, .voucher-mobile-download { align-items: center; border: 0; color: #14234e; display: inline-flex; font-size: .8rem; font-weight: 800; gap: .45rem; min-height: 2.8rem; }
  .voucher-mobile-view { background: transparent; padding: 0 .2rem; }
  .voucher-mobile-download { background: #fff; border: 1px solid #d4ddeb; border-radius: .85rem; padding: 0 .8rem; }
  .voucher-mobile-view svg, .voucher-mobile-download svg { fill: none; height: 1.15rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.15rem; }
  .voucher-mobile-view .voucher-mobile-chevron { height: .9rem; margin-left: -.15rem; width: .9rem; }
  .mobile-records-view .table-card > .data-table { display: none; }
  .mobile-record-card-list { width: 100%; }
  .mobile-record-actions { flex-wrap: wrap; }
  .mobile-record-secondary-action { align-items: center; background: #fff; border: 1px solid #d4ddeb; border-radius: .85rem; color: #14234e; display: inline-flex; font-size: .76rem; font-weight: 800; gap: .4rem; min-height: 2.8rem; padding: 0 .75rem; }
  .mobile-record-secondary-action svg { fill: none; height: 1.05rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.05rem; }
  .mobile-record-secondary-action:disabled { opacity: .5; }
  .mobile-record-toggle { align-items: center; color: #52617f; display: inline-flex; font-size: .76rem; font-weight: 800; gap: .45rem; margin-left: auto; min-height: 2.8rem; }
  .mobile-record-toggle input { accent-color: #1d376b; height: 1.15rem; width: 1.15rem; }
  .mobile-record-empty { background: rgba(255,255,255,.96); border: 1px dashed #cbd5e1; border-radius: 1.25rem; color: #64748b; padding: 1.5rem 1rem; text-align: center; }
  #vouchersView #voucherPagination { margin-top: 1.15rem; }
  #vouchersView #newVoucherButton { align-items: center; background: linear-gradient(135deg,#18264e,#1d376b); border: 0; border-radius: 1.05rem; bottom: calc(5.7rem + env(safe-area-inset-bottom)); box-shadow: 0 10px 26px rgba(21,39,79,.23); color: #fff; display: flex; font-size: .95rem; font-weight: 850; gap: .65rem; justify-content: center; left: 1rem; min-height: 3.65rem; position: fixed; right: 1rem; width: calc(100% - 2rem); z-index: 35; }
  #vouchersView #newVoucherButton .voucher-button-icon { height: 1.35rem; width: 1.35rem; }
  #appShell:has(#vouchersView:not(.hidden)) .mobile-tab-bar { min-height: calc(5.15rem + env(safe-area-inset-bottom)); padding: .45rem .35rem calc(.45rem + env(safe-area-inset-bottom)); }
  #appShell:has(#vouchersView:not(.hidden)) .mobile-tab-bar a, #appShell:has(#vouchersView:not(.hidden)) .mobile-tab-bar button { border-radius: 1rem; min-height: 4rem; }

  #appShell:has(#dashboardView:not(.hidden)) > div > header { grid-template-columns: auto minmax(0,1fr) auto; }
  #appShell:has(#dashboardView:not(.hidden)) .app-header-title > p, #appShell:has(#dashboardView:not(.hidden)) #pageTitle { display: none; }
  #appShell:has(#dashboardView:not(.hidden)) .dashboard-mobile-brand { align-items: center; color: #111936; display: flex; font-size: 1.05rem; gap: .45rem; justify-content: center; white-space: nowrap; }
  .dashboard-mobile-brand img { height: 2rem; object-fit: contain; width: 2rem; }
  #appShell:has(#dashboardView:not(.hidden)) .header-account { display: flex; }
  #appShell:has(#dashboardView:not(.hidden)) .header-account > div, #appShell:has(#dashboardView:not(.hidden)) #refreshDashboard, #appShell:has(#dashboardView:not(.hidden)) #logoutButton { display: none; }
  #appShell:has(#dashboardView:not(.hidden)) .mobile-user-avatar { align-items: center; background: linear-gradient(135deg,#e0ecff,#d3e4ff); border-radius: 999px; color: #17469e; display: flex; font-size: .76rem; font-weight: 850; height: 2.75rem; justify-content: center; width: 2.75rem; }
  #sidebar .mobile-sidebar-actions { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; margin-top: .75rem; }
  #sidebar .mobile-sidebar-actions button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: .75rem; color: #fff; font-size: .78rem; font-weight: 750; min-height: 2.65rem; padding: .5rem; }
  #sidebar #mobileLogoutButton { background: #dc2626; border-color: #ef4444; }
  #appShell:not(:has(#dashboardView:not(.hidden))) #mobileRefreshDashboard { display: none; }
  #appShell:has(#dashboardView:not(.hidden)) #mainContent { padding: 1rem .875rem calc(7rem + env(safe-area-inset-bottom)); }
  #dashboardView .dashboard-heading { align-items: center; display: flex; justify-content: center; margin-bottom: 1rem; min-height: 10.5rem; padding: 1.25rem 1rem; text-align: center; }
  #dashboardView .dashboard-heading > div { margin: 0 auto; max-width: 100%; text-align: center; width: 100%; }
  #dashboardView .dashboard-heading h1 { font-size: 1.55rem; line-height: 1.08; overflow-wrap: normal; }
  #dashboardView .dashboard-heading p { font-size: .78rem; line-height: 1.35; margin-top: .55rem; }
  #dashboardView .dashboard-heading .eyebrow { font-size: .65rem; margin: 0 0 .45rem; }
  #dashboardView .kpi-grid { gap: .55rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #dashboardView .kpi-card { align-content: center; gap: .25rem; grid-template-columns: 2rem minmax(0,1fr); min-height: 7.2rem; padding: .65rem .4rem; position: relative; text-align: left; }
  #dashboardView .kpi-icon { height: 2rem; width: 2rem; }
  #dashboardView .kpi-icon svg { height: 1.05rem; width: 1.05rem; }
  #dashboardView .kpi-card .kpi-content strong { font-size: 1.35rem; }
  #dashboardView .kpi-card .kpi-label { font-size: .62rem; line-height: 1.2; margin-top: .25rem; overflow-wrap: normal; }
  #dashboardView .kpi-chevron { height: .72rem; position: absolute; right: .4rem; top: .5rem; width: .72rem; }
  #dashboardView .dashboard-columns { gap: 1rem; grid-template-columns: 1fr; margin-top: 1rem; }
  #dashboardView .dashboard-card { border-radius: 1.35rem; padding: 1rem; }
  #dashboardView .section-heading { align-items: center; flex-direction: row; gap: .7rem; text-align: left; width: 100%; }
  #dashboardView .section-heading > div { text-align: left; }
  #dashboardView .section-heading h2 { font-size: .95rem; }
  #dashboardView .section-heading p { font-size: .72rem; line-height: 1.25; }
  #dashboardView .dashboard-section-icon { height: 2.65rem; width: 2.65rem; }
  #dashboardView .count-pill { flex: 0 0 auto; }
  #dashboardView .work-item { align-items: center; border-radius: 0; gap: .55rem; grid-template-columns: auto minmax(0,1fr) auto auto; padding: .72rem .25rem; text-align: left; }
  #dashboardView .work-item strong { font-size: .76rem; line-height: 1.25; }
  #dashboardView .work-item small, #dashboardView .work-item time { font-size: .68rem; }
  #dashboardView .work-item time { max-width: 4.9rem; text-align: right; }
  #dashboardView .upcoming-card .empty-state { align-items: center; display: flex; flex-direction: column; min-height: 8.5rem; padding: 3.3rem 1rem 1rem; position: relative; }
  #dashboardView .upcoming-card .empty-state::before { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368799f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v13H4zM8 3v6M16 3v6M4 11h16'/%3E%3C/svg%3E"); content: ''; height: 2.7rem; position: absolute; top: .35rem; width: 2.7rem; }
  #dashboardView .overview-grid { gap: .5rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #dashboardView .overview-card { justify-content: center; min-height: 4.8rem; padding: .55rem .35rem; }
  #dashboardView .overview-card strong { font-size: 1.25rem; }
  #dashboardView .overview-card span { font-size: .64rem; line-height: 1.2; }
  #dashboardView .chart-grid { gap: .65rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #dashboardView .chart-card { border-radius: 1rem; padding: .8rem; }
  #dashboardView .chart-card h3 { font-size: .82rem; }
  #dashboardView .bar-label { font-size: .62rem; }
}

@media (max-width: 360px) {
  #dashboardView .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #dashboardView .chart-grid { grid-template-columns: 1fr; }
}

@media print {
  body.printing-report { background: #fff; }
  body.printing-report #sidebar, body.printing-report #appShell > div > header, body.printing-report #reportsView > .page-heading, body.printing-report #reportFilters, body.printing-report #reportMessage, body.printing-report #waitOverlay, body.printing-report #toast { display: none !important; }
  body.printing-report #appShell, body.printing-report #reportsView, body.printing-report #reportOutput { display: block !important; }
  body.printing-report #appShell > div { padding-left: 0 !important; }
  body.printing-report #mainContent { padding: 0 !important; }
  body.printing-report .report-output { border: 0; padding: 0; }
  body.printing-report .table-card { border-radius: 0; overflow: visible; }
  body.printing-report .report-table { font-size: 9pt; min-width: 0; }
  body.printing-report .report-table th, body.printing-report .report-table td { padding: .4rem .45rem; }
  body.printing-report .report-table tr { break-inside: avoid; }
  @page { margin: 12mm; size: A4 landscape; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar {
    transition: none;
  }
}