/* Shared responsive contract. Desktop presentation remains in the page stylesheets. */
.sidebar-close { display: none; }
body.dashboard-body .topbar #me-label:not(.therapist-profile-chip) { display: flex; flex-direction: column; gap: 2px; }
body.dashboard-body .topbar #me-label .profile-role { display: block; font-size: 11px; font-weight: 500; color: #6e8198; }
/* Layout display rules must not reveal intentionally hidden form sections. */
body.dashboard-body [hidden] { display: none !important; }

@media (max-width: 1240px) {
  /* Preserve one shared baseline instead of wrapping months under a fixed-height plot. */
  body.dashboard-body .modern-month-chart { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 6px; }
  body.dashboard-body .month-column { position: static; padding: 0; transform: none; }
  body.dashboard-body .month-column-bars { width: 100%; }
  body.dashboard-body .month-column-bars i { width: 20%; }
  body.dashboard-body .month-column-bars i:nth-child(1) { left: 15%; }
  body.dashboard-body .month-column-bars i:nth-child(2) { left: 40%; }
  body.dashboard-body .month-column-bars i:nth-child(3) { left: 65%; }
  body.dashboard-body .month-column .month-tooltip {
    left: 0; right: auto; bottom: calc(100% - 18px); width: min(240px,100%);
    min-width: 0; max-width: 100%; transform: none;
  }
}

@media (max-width: 1020px) {
  body.dashboard-body .app-shell { overflow: visible; }
  body.dashboard-body .content-area { grid-template-columns: minmax(0,1fr); }
  body.dashboard-body :is(.app-main,.app-page,.panel,.table-wrap,form,fieldset) { min-width: 0; max-width: 100%; }
  body.dashboard-body :is(.app-main,.panel,form,.grid-form,.nested-grid) > * { min-width: 0; }
  body.dashboard-body :is(.draft-section,.treatment-entry-section) { flex-wrap: wrap; }
  body.dashboard-body :is(.draft-section,.treatment-entry-section) > * { min-width: 0; max-width: 100%; }
  body.dashboard-body .sidebar {
    visibility: hidden;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    z-index: 110;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body.dashboard-body.sidebar-open .sidebar { visibility: visible; transform: translateX(0); }
  body.dashboard-body .sidebar-overlay { inset: 0; z-index: 100; }
  body.dashboard-body .sidebar-close {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto;
    padding: 0; border: 1px solid #6e8198; background: transparent;
    color: white; font-size: 24px; box-shadow: none;
  }
  body.dashboard-body .mobile-menu-toggle { flex: 0 0 44px; box-shadow: none; background: white; color: #172b4d; font-size: 20px; }
  body.dashboard-body .sidebar .side-nav { min-height: 0; overflow-y: auto; }
  body.dashboard-body .sidebar :is(.side-link,.menu-toggle) {
    min-height: 44px; white-space: normal; overflow-wrap: anywhere;
  }
  /* A toolbar's desktop width basis must not become its height in a column. */
  body.dashboard-body .panel .actions > input[type=search] { flex: 0 0 auto; height: 46px; min-height: 46px; }
}

@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; min-width: 0; }
  body.dashboard-body { padding: 0; min-height: 100dvh; }
  body.dashboard-body .app-shell { display: block; width: 100%; min-width: 0; border: 0; border-radius: 0; min-height: 100dvh; }
  body.dashboard-body .content-area { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; }
  body.dashboard-body .app-main {
    width: 100%; max-width: 100%; min-width: 0; margin: 0;
    padding: 16px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  body.dashboard-body .sidebar {
    left: 0; right: auto; width: 280px; max-width: 85vw;
    transform: translateX(-105%); border-left: 0;
  }
  body.dashboard-body .brand-logo { max-width: 100%; height: auto; object-fit: contain; }
  body.dashboard-body .topbar {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr) 44px;
    align-items: center; gap: 10px; min-height: 0; height: auto;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }
  body.dashboard-body .topbar > :is(.topbar-title,.therapist-hero,h2) { grid-column: 1; grid-row: 1; min-width: 0; }
  body.dashboard-body .topbar h2 { min-width: 0; font-size: 24px; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
  body.dashboard-body .topbar p { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
  body.dashboard-body .topbar > .mobile-menu-toggle {
    grid-column: 2; grid-row: 1; width: 44px; height: 44px;
    min-width: 44px; padding: 0; margin: 0; align-self: start;
  }
  body.dashboard-body .topbar > .actions {
    grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 0;
  }
  body.dashboard-body .topbar-profile { flex: 1; min-width: 0; max-width: 100%; gap: 8px; }
  body.dashboard-body #me-label { min-width: 0; max-width: 100%; width: auto; flex: 1; white-space: normal; }
  body.dashboard-body .topbar-profile #me-label,
  body.dashboard-body #me-label:not(.therapist-profile-chip) { display: flex; flex-direction: column; gap: 2px; }
  body.dashboard-body .therapist-profile-chip { display: flex; align-items: center; gap: 8px; }
  body.dashboard-body .therapist-profile-chip > span:last-child { display: flex; flex-direction: column; min-width: 0; }
  body.dashboard-body #me-label :is(strong,.profile-name) { font-size: 13px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
  body.dashboard-body #me-label :is(small,.profile-role) { display: block; font-size: 11px; font-weight: 500; color: #6e8198; white-space: normal; }
  body.dashboard-body :is(.profile-avatar,.profile-initials) { width: 32px; height: 32px; flex: 0 0 32px; }
  body.dashboard-body #logout-btn { display: inline-flex; width: auto; min-width: 0; min-height: 44px; padding: 0 10px; font-size: 12px; margin-left: auto; }
  body.dashboard-body :is(.dashboard-date,.patient-header-date) { order: 3; width: 100%; margin: 0; font-size: 11px; text-align: left; }

  body.dashboard-body :is(.app-page,.panel,.chart-card,.card,.table-wrap,.data-table-wrap,form,fieldset,label,.actions,.toolbar-actions,.page-toolbar,.page-header) { min-width: 0; max-width: 100%; }
  body.dashboard-body :is(.app-page,.panel,form,.grid-form,.nested-grid,.inline-form,.form-grid,.cards,.chart-grid,.actions) > * { min-width: 0; }
  body.dashboard-body :is(.panel,.chart-card,.therapist-widget) { padding: 16px; }
  body.dashboard-body :is(.app-page.active,.grid-form,.nested-grid,.inline-form,.form-grid,.daily-form,.cards,.chart-grid,.analytics-grid,.overview-grid,.detail-grid,.soap-grid,.mini-kpis,.therapist-metric-grid,.therapist-productivity-grid,.patient-kpi-grid,.patient-analytics-grid) { grid-template-columns: minmax(0,1fr); }
  body.dashboard-body :is(.grid-form,.nested-grid,.inline-form,.form-grid,.daily-form) > * { grid-column: 1 / -1; }
  body.dashboard-body :is(#session-form,#daily-form).daily-form { grid-template-columns: minmax(0,1fr); }
  body.dashboard-body .chart-card--wide { grid-column: 1 / -1; }
  body.dashboard-body .panel h2 { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
  body.dashboard-body :is(.actions,.page-toolbar,.toolbar-actions,.page-header,.panel-heading-row) { flex-wrap: wrap; gap: 10px; }
  body.dashboard-body :is(.panel .actions,.page-toolbar,.toolbar-actions) { display: flex; flex-direction: column; align-items: stretch; margin-left: 0; }
  body.dashboard-body :is(.panel .actions,.toolbar-actions) > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
  body.dashboard-body label { line-height: 1.4; }
  body.dashboard-body :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea),
  body.login-body .login-form input,
  #patient-history-tracker #history-patient-filter,
  #treatment-dialog :is(input:not([type=hidden]):not([type=checkbox]):not([type=range]),select,textarea) {
    width: 100%; min-width: 0; max-width: 100%; font-size: 16px;
    box-sizing: border-box;
  }
  body.dashboard-body :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),select),
  #treatment-dialog :is(input:not([type=hidden]):not([type=checkbox]):not([type=range]),select) {
    height: 46px; min-height: 46px; max-height: none; flex: 0 0 auto;
  }
  body.dashboard-body input[type=date], body.dashboard-body input[type=time] { display: block; appearance: auto; }
  body.dashboard-body input::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
  body.dashboard-body textarea { height: auto; min-height: 90px; resize: vertical; }
  body.dashboard-body :is(input[type=checkbox],input[type=radio]) { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin: 0; padding: 0; }
  body.dashboard-body .inline-check { display: flex; align-items: center; min-height: 44px; gap: 8px; white-space: normal; }
  body.dashboard-body :is(button,.nav-button) { min-width: 0; max-width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  body.dashboard-body form > button[type=submit] { width: 100%; min-height: 48px; align-self: end; }
  body.dashboard-body .table-wrap, body.dashboard-body .data-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.dashboard-body #sessions-table :is(th,td) { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  body.dashboard-body :is(#patients-search-admin,#patients-search-therapist) { font-size: 16px; }
  body.therapist-ui #sessions-table tbody td:first-child { display: grid; justify-content: normal; }
  body.therapist-ui #sessions-table tbody td:first-child::before { content: attr(data-label); margin: 0; }
  body.dashboard-body #sessions-table .table-actions { display: flex; flex-wrap: wrap; }
  body.dashboard-body #sessions-table .empty-row td { display: block; }
  body.dashboard-body #sessions-table .empty-row td::before { content: none; }

  body.dashboard-body dialog.modal, body.dashboard-body #treatment-dialog {
    width: calc(100% - 24px); max-width: calc(100% - 24px); min-width: 0;
    max-height: calc(100dvh - 24px); padding: 16px; overflow-y: auto;
  }
  body.dashboard-body #treatment-dialog .visit-metadata { grid-template-columns: minmax(0,1fr); }
  body.dashboard-body #treatment-dialog .sticky-actions { position: static; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  body.dashboard-body :is(.modal-actions,.sticky-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
  body.dashboard-body :is(.modal-actions,.sticky-actions) > button { flex: 1 1 100%; width: 100%; }
  body.dashboard-body :is(.donut-card-body,.chart-donut-wrap) { display: grid; grid-template-columns: minmax(0,1fr); height: auto; }
  body.dashboard-body .donut { justify-self: center; }
  body.dashboard-body .chart-card { height: auto; min-height: 0; }
  body.dashboard-body .month-chart-shell { grid-template-columns: 32px minmax(0,1fr); gap: 6px; }
  body.dashboard-body .month-y-axis { font-size: 10px; }
  body.dashboard-body .modern-month-chart { gap: 2px; }
  body.dashboard-body .month-column { font-size: 9px; }
  body.dashboard-body .month-column > span:last-child { font-size: 9px; }
  body.dashboard-body :is(canvas,svg) { max-width: 100%; }
  body.therapist-ui .payout-chart { min-width: 0; width: 100%; grid-template-columns: 48px minmax(0,1fr); }
  body.therapist-ui .payout-plot { gap: 2px; }
  body.therapist-ui .payout-axis { font-size: 10px; padding-right: 6px; }
  body.therapist-ui .payout-month { font-size: 9px; }
  /* The year remains in the chart heading, tooltip and accessible month label. */
  body.therapist-ui .payout-year { display: none; }
  body.therapist-ui .payout-column:nth-child(-n+4) .payout-tooltip { left: 0; transform: none; }
  body.therapist-ui .payout-column:nth-last-child(-n+4) .payout-tooltip { left: auto; right: 0; transform: none; }
  body.dashboard-body :is(.kpi-card,.kpi-aux-card) strong { overflow-wrap: anywhere; }
  body.dashboard-body .dashboard-welcome { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.dashboard-body .stat-strip { flex-wrap: wrap; }
  body.dashboard-body .calendar-toolbar { flex-wrap: wrap; gap: 8px; }
  body.dashboard-body .calendar-day { min-width: 0; padding: 4px; }
  body.dashboard-body .calendar-day span { overflow-wrap: anywhere; }
  body.dashboard-body :focus-visible { outline: 2px solid #2f80ed; outline-offset: 2px; }
}

@media (max-width: 430px) {
  body.dashboard-body .app-main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body.dashboard-body .expense-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  body.dashboard-body .expense-label { grid-column: 1; grid-row: 1; }
  body.dashboard-body .expense-amount { grid-column: 2; grid-row: 1; white-space: nowrap; }
  body.dashboard-body .expense-bar-track { grid-column: 1 / -1; grid-row: 2; }
}