/* DANFER responsive 2026-11-04. Visual only; desktop rules remain unchanged. */
@media (max-width: 1050px) {
  html body #appView .main-content { margin-left: 0 !important; min-width: 0; }
  html body #appView .sidebar {
    width: min(300px, calc(100vw - 48px)) !important;
    height: 100dvh; padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  html body #appView .sidebar .brand { padding-right: 42px !important; }
  html body #appView .sidebar .sidebar-close {
    top: 8px; right: 4px; width: 44px; height: 44px; margin: 0;
  }
  html body #appView .sidebar .nav-item { min-height: 44px !important; }
  html body #appView .sidebar .nav-item:not(.is-active) { color: #d0dcef !important; }
  html body #appView .sidebar .nav-item > span:first-child { color: #b1c8e5 !important; }
  html body #appView .sidebar .danfer-nav-heading { color: #abc3df !important; }
  html body #appView #mainNav { flex: 1 0 auto; }
  html body #appView .overlay { position: fixed; inset: 0; width: 100%; height: 100dvh; }
  html:has(#sidebar.is-open), body:has(#sidebar.is-open) { overflow: hidden; }
  html body #appView .topbar {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    gap: 10px; padding: 12px 16px !important;
  }
  html body #appView .topbar .global-search {
    grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; margin: 0;
  }
  html body #appView .page-title { min-width: 0; }
  html body #appView .page-title h1 { overflow-wrap: anywhere; line-height: 1.2; }
  html body #appView :is(.menu-button,.notification-button,.user-button) {
    width: 44px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 !important;
  }
  html body #appView .user-button > div { display: none; }
}

@media (max-width: 800px) {
  html body #appView .content { padding: 20px 16px 32px !important; }
  html body #appView :is(.content,.content-intro,#moduleContent) { min-width: 0; max-width: 100%; }
  html body #appView .content-intro { padding: 22px !important; gap: 16px; }
  html body #appView .content-intro h2 { font-size: clamp(24px, 5vw, 30px) !important; }
  html body #appView .module-actions { min-width: 0; flex-wrap: wrap; }
  html body #appView .module-actions > * { min-width: 0; white-space: normal !important; }
  html body #appView #moduleContent :is(.panel,.module-panel,.weekly-dashboard-shell,.weekly-analytics-panel,.weekly-analytics-view,.weekly-cost-panel,.users-admin) {
    min-width: 0 !important; max-width: 100%;
  }
  html body #appView #moduleContent .danfer-dashboard-layout { gap: 16px !important; }
  html body #appView #moduleContent .danfer-dashboard-secondary > .panel { padding: 16px !important; }
  html body #appView #moduleContent .danfer-dashboard-secondary .panel-header { padding: 8px 0 14px !important; margin-bottom: 8px !important; }
  html body #appView #moduleContent .weekly-executive-panel { padding: 16px !important; }
  html body #appView #moduleContent .weekly-analytics-panel { margin: 0 !important; }
  html body #appView #moduleContent .weekly-analytics-view { padding: 12px 0 !important; }
  html body #appView #moduleContent .weekly-cost-panel { margin: 0 !important; padding: 14px 0 !important; }
  html body #appView #moduleContent .weekly-kpi-grid { padding: 0 !important; }
  html body #appView #moduleContent .weekly-service-panel { padding: 16px 0 !important; }
  html body #appView #moduleContent :is(.table-wrap,.weekly-service-table-wrap,.users-table-wrap,.permission-table-wrap) {
    min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important;
    overscroll-behavior-x: contain; scrollbar-width: auto;
  }
  html body #appView #moduleContent .weekly-service-table { min-width: 640px; }
  html body #appView #moduleContent :is(.panel-header,.weekly-executive-header,.weekly-service-header) { flex-wrap: wrap; }
  html body #appView #moduleContent :is(#budgetV2Panel,.budget-v2-shell,.budget-v2-shell > *,.budget-v2-shell > * > *) { min-width: 0; max-width: 100%; }
  html body #appView #moduleContent .budget-v2-shell { grid-template-columns: minmax(0,1fr); }
  html body #appView #moduleContent .budget-v2-header { display: grid; grid-template-columns: minmax(0,1fr); padding: 16px; }
  html body #appView #moduleContent .budget-v2-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body #appView #moduleContent .budget-v2-shell :is(p,h3,strong,a) { overflow-wrap: anywhere; }
  html body #appView #moduleContent:not(:has(.danfer-dashboard-layout)) .table-wrap table :is(th,td):last-child { position: static !important; box-shadow: none !important; }
  html body #appView #moduleContent .users-kpi,
  html body #appView #moduleContent .users-table-header { background: var(--dp-surface) !important; color: var(--dp-ink) !important; }
  html body #appView #moduleContent .users-kpi :is(strong,span,small),
  html body #appView #moduleContent .users-table-header :is(h3,p) { color: var(--dp-ink) !important; }
  html body #appView #moduleContent .users-row td:last-child,
  html body #appView #moduleContent .users-table-card th:last-child { position: static !important; }
  html body #appView #moduleContent :is(input,select,textarea),
  html body #loginView :is(input,select,textarea),
  html body dialog :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    font-size: 16px !important; min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  html body #appView :is(.primary-button,.secondary-button),
  html body dialog :is(.primary-button,.secondary-button) { min-height: 44px; }
  html body #appView :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select),
  html body dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select) { min-height: 44px; }
  html body dialog textarea { min-height: 88px; }
  html body dialog {
    box-sizing: border-box; max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }
  html body dialog > :is(form,div) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  html body dialog.modal > form { max-height: calc(100dvh - 28px) !important; }
  html body dialog :is(.form-grid,.form-fields,.purchase-header-grid) > * { min-width: 0; }
  html body dialog :is(header,footer) { gap: 12px; }
  html body dialog header > div { min-width: 0; }
  html body dialog header h2 { overflow-wrap: anywhere; }
  html body dialog header button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  html body dialog footer { flex-wrap: wrap; }
  html body dialog .permission-table-wrap { overflow-x: auto !important; max-width: 100%; }
  html body dialog.df-profile-dialog { overflow-y: auto; }
}

@media (max-width: 540px) {
  html body #appView .content-intro { flex-direction: column; align-items: stretch; }
  html body #appView #moduleContent .danfer-dashboard-layout > section.danfer-overview-grid {
    grid-template-columns: minmax(0,1fr) !important; padding: 0 !important;
  }
  html body #appView #moduleContent .danfer-overview-grid > article.metric-card {
    min-height: 130px !important; padding: 18px !important;
  }
  html body #appView #moduleContent .weekly-dashboard-shell .weekly-kpi-grid { grid-template-columns: minmax(0,1fr) !important; }
  html body #appView #moduleContent .users-kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px !important; }
  html body #recordModal #formFields.form-grid { grid-template-columns: minmax(0,1fr) !important; padding: 16px !important; }
  html body #recordModal #formFields.form-grid > * { grid-column: 1 / -1 !important; }
  html body #purchaseModal #purchaseFormBody .purchase-header-grid { grid-template-columns: minmax(0,1fr) !important; }
  html body #purchaseModal #purchaseItems > .purchase-item-row { grid-template-columns: minmax(0,1fr) !important; padding: 14px !important; }
  html body #purchaseModal #purchaseItems > .purchase-item-row > * { grid-column: 1 / -1 !important; justify-self: stretch !important; }
  html body dialog footer :is(.primary-button,.secondary-button) { flex: 1 1 120px; white-space: normal; }
}