/* V8.5.28: compact phone dashboard. Screen presentation only; all data, controls,
   permissions, dialog positioning, editable inputs and financial colors stay intact. */
@media screen and (max-width:600px) {
  html body #section-dashboard .pro-dashboard-head { gap:10px;margin:8px 0 12px; }
  html body #section-dashboard .pro-dashboard-head h2 { font-size:21px;line-height:1.25;margin:6px 0 3px; }
  html body #section-dashboard .pro-dashboard-head p { font-size:11px;line-height:1.4;margin:0; }
  html body #section-dashboard .pro-live-line { font-size:10px;line-height:1.4; }
  html body #section-dashboard .pro-dashboard-controls { gap:8px; }
  html body #section-dashboard .pro-month-control { grid-template-columns:44px minmax(0,1fr) auto 44px!important;padding:3px;gap:2px; }
  html body #section-dashboard .pro-month-control input { padding-inline:2px;font-size:16px; }
  html body #section-dashboard .pro-month-today { grid-column:auto;grid-row:auto;font-size:10px;padding:4px 6px; }
  html body #section-dashboard #dashboardNextMonth { grid-column:4;grid-row:1; }
  html body #section-dashboard .pro-export { min-height:44px;padding:8px;font-size:12px; }

  html body #section-dashboard .pro-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px; }
  html body #section-dashboard .pro-kpi,
  html body #section-dashboard .pro-kpi:first-child,
  html body #section-dashboard .pro-kpi:last-child,
  html body #section-dashboard .pro-kpi:nth-child(n+4) { grid-column:auto;min-height:0;padding:11px;border-radius:12px!important; }
  html body #section-dashboard .pro-kpi-top { font-size:11px;line-height:1.35;gap:4px;align-items:flex-start; }
  html body #section-dashboard .pro-kpi-top>span:first-child { min-width:0; }
  html body #section-dashboard .pro-kpi-body { display:block;margin-top:7px; }
  html body #section-dashboard .pro-kpi strong,
  html body #section-dashboard .pro-kpi:first-child strong,
  html body #section-dashboard .pro-kpi:nth-child(n+4) { font-variant-numeric:tabular-nums; }
  html body #section-dashboard .pro-kpi strong,
  html body #section-dashboard .pro-kpi:first-child strong,
  html body #section-dashboard .pro-kpi:nth-child(n+4) strong { display:block;font-size:clamp(17px,4.7vw,21px);line-height:1.3;letter-spacing:-.025em;white-space:normal;overflow-wrap:anywhere; }
  html body #section-dashboard .pro-kpi small { margin-top:5px;font-size:10px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip; }

  html body #section-dashboard .pro-panel { padding:12px!important;border-radius:12px!important; }
  html body #section-dashboard :is(.pro-dashboard-grid-top,.pro-dashboard-grid-bottom) { gap:12px!important;margin-bottom:12px; }
  html body #section-dashboard .pro-actions-panel { margin-bottom:12px; }
  html body #section-dashboard .panel-head { gap:6px;margin-bottom:10px; }
  html body #section-dashboard .panel-head h2 { font-size:15px;line-height:1.35; }
  html body #section-dashboard .panel-head p { font-size:11px;line-height:1.4;margin-top:3px; }
  html body #section-dashboard .btn.text { min-height:44px;padding:5px 0;font-size:11px; }
  html body #section-dashboard .status-chip { font-size:10px;padding:5px 7px; }
  html body #section-dashboard .pro-action-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
  html body #section-dashboard .pro-action { flex-direction:row;align-items:center;min-height:58px;padding:8px;gap:7px; }
  html body #section-dashboard .pro-action>span { width:26px;height:26px;flex:0 0 26px;border-radius:8px;font-size:16px; }
  html body #section-dashboard .pro-action strong { font-size:11px;line-height:1.4; }

  html body #section-dashboard .pro-recent-list { max-height:300px;gap:0; }
  html body #section-dashboard .pro-recent-item { grid-template-columns:24px minmax(0,1fr) minmax(0,max-content);gap:7px;padding:9px 0;align-items:start; }
  html body #section-dashboard .pro-recent-icon { width:24px;height:24px;font-size:12px;border-radius:7px; }
  html body #section-dashboard .pro-recent-main { grid-column:2;grid-row:1; }
  html body #section-dashboard .pro-recent-main strong { font-size:12px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip; }
  html body #section-dashboard .pro-recent-main small { font-size:10px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip; }
  html body #section-dashboard .pro-recent-side { grid-column:3;grid-row:1;display:block;text-align:right;max-width:140px; }
  html body #section-dashboard .pro-recent-side strong { font-size:12px;line-height:1.4; }
  html body #section-dashboard .pro-recent-side small { font-size:10px;line-height:1.4; }

  html body #section-dashboard .pro-monthly-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  html body #section-dashboard .pro-month-card { padding:9px;gap:4px;border-radius:9px; }
  html body #section-dashboard .pro-month-card>span { font-size:11px; }
  html body #section-dashboard .pro-month-card small { font-size:10px;line-height:1.4;gap:2px; }
  html body #section-dashboard .pro-month-card small b { font-size:10px;line-height:1.4; }
  html body #section-dashboard .pro-month-card>strong { font-size:15px;line-height:1.35;margin-top:2px; }
  html body #section-dashboard :is(.pro-monthly-year-total,.pro-card-note,.pro-dashboard-status) { font-size:10px;line-height:1.5;gap:6px; }
  html body #section-dashboard .pro-monthly-year-total { margin-top:10px; }

  html body #section-dashboard .pro-outflow-list { gap:5px; }
  html body #section-dashboard :is(.pro-outflow-row,.pro-outflow-total,.pro-outflow-internal,.pro-outflow-credit) { padding:7px 8px;gap:8px;min-width:0; }
  html body #section-dashboard :is(.pro-outflow-row,.pro-outflow-total,.pro-outflow-internal,.pro-outflow-credit)>span { font-size:11px;line-height:1.4;min-width:0; }
  html body #section-dashboard :is(.pro-outflow-row,.pro-outflow-total,.pro-outflow-internal,.pro-outflow-credit)>strong { font-size:12px;line-height:1.4;flex-shrink:0;max-width:55%;overflow-wrap:anywhere; }
  html body #section-dashboard .pro-card-footer { gap:8px;margin-top:10px;flex-wrap:wrap; }
  html body #section-dashboard .pro-card-footer small { font-size:10px;line-height:1.4; }
  html body #section-dashboard .pro-analysis-list { gap:5px; }
  html body #section-dashboard .pro-analysis-item { padding:7px;grid-template-columns:24px minmax(0,1fr);gap:7px; }
  html body #section-dashboard .pro-analysis-item>span { width:24px;height:24px;font-size:12px; }
  html body #section-dashboard .pro-analysis-item strong { font-size:11px;line-height:1.35; }
  html body #section-dashboard .pro-analysis-item small { font-size:10px;line-height:1.4; }

  html body #section-dashboard :is(.pro-source-panel,.pro-expense-panel) .pro-donut-layout { display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;gap:10px!important;justify-items:stretch!important;min-height:0!important; }
  html body #section-dashboard .pro-donut { width:112px;height:112px; }
  html body #section-dashboard .pro-donut:before { width:78px;height:78px; }
  html body #section-dashboard .pro-donut>div { max-width:88px; }
  html body #section-dashboard .pro-donut strong { font-size:11px;line-height:1.3;overflow-wrap:anywhere; }
  html body #section-dashboard .pro-donut small { font-size:10px; }
  html body #section-dashboard .pro-donut-legend .legend-row { margin:6px 0;gap:6px; }
  html body #section-dashboard .pro-donut-legend .legend-row strong { font-size:11px;line-height:1.3; }
  html body #section-dashboard .pro-donut-legend .legend-row small { font-size:10px;line-height:1.4; }
  html body #section-dashboard .pro-reconcile-values { gap:7px; }
  html body #section-dashboard .pro-reconcile-values>span { font-size:11px; }
  html body #section-dashboard .pro-reconcile-values strong { font-size:13px; }
  html body #section-dashboard .pro-legend { font-size:10px;gap:8px; }
  html body #section-dashboard .pro-chart-foot { gap:6px;margin-top:2px; }
}
/* Keep the complete month name readable on the narrowest phones. */
@media screen and (max-width:360px) {
  html body #section-dashboard .pro-month-control { grid-template-columns:44px minmax(0,1fr) 44px!important; }
  html body #section-dashboard .pro-month-today { grid-column:1/-1;grid-row:2; }
  html body #section-dashboard #dashboardNextMonth { grid-column:3;grid-row:1; }
}