/* Phone-only layout. Desktop styles remain unchanged. */
@media(max-width:700px){
 .topbar{display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:20;gap:6px 12px;padding:8px 12px 0;min-height:0}
 .topbar .brand{order:0;min-width:0;flex:none;padding:3px 6px}
 .topbar .brand-logo{width:106px;height:40px}
 .topbar .topbar-account{order:1;margin-left:auto;min-width:0;max-width:calc(100% - 132px)}
 .topbar nav{order:2;flex:0 0 100%;width:100%;height:48px;margin:0;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#68758b transparent}
 .topbar nav button{flex:none;min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap}
 .topbar nav button.active{background:#293447;color:#fff;border-bottom:3px solid #ff8500;border-radius:8px 8px 0 0}
 .topbar #logout-button{min-height:40px;min-width:52px}
 main,.balance-mode main,.inventory-mode main{width:100%;max-width:100%;padding:14px 12px 22px}
 .tab-content,.hero,.hero>div,.panel,.grid-two>*,.planning-actions{min-width:0;max-width:100%}
 .hero,.balance-mode .plan-fact-hero{display:block;margin-bottom:14px}
 .category-switch{max-width:100%;gap:8px;margin-top:8px}
 .category-option{flex:1 1 145px;min-height:44px;padding:10px;font-size:13px;line-height:1.3;white-space:normal}
 .category-switch.hidden,.period-form.hidden{display:none}
 .period-form,.plan-fact-period-form{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px;margin-top:12px}
 .period-form label{min-width:0;font-size:11px}
 .period-form input{width:100%;min-width:0;height:44px;padding:0 7px;font-size:16px}
 .period-form button{grid-column:1/-1;min-height:44px;font-size:14px}
 .metrics,.wash-metrics,.planning-metrics,.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .general-sales-metrics,.working-capital-metrics{grid-template-columns:1fr;gap:10px}
 .metric{min-width:0;padding:12px;min-height:100px}
 .metric span{font-size:12px;line-height:1.35}
 .metric strong{font-size:22px;white-space:normal;overflow-wrap:anywhere;margin:10px 0 5px;line-height:1.2}
 .metric small{display:block;font-size:11px;line-height:1.45}
 .panel-head{gap:8px;flex-wrap:wrap;padding:14px 12px 8px}
 .panel-head h2{font-size:17px;line-height:1.3}
 .legend{display:flex;flex-wrap:wrap;gap:8px;font-size:11px}
 .chart,.planning-chart,.balance-mode .plan-fact-chart{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;height:230px;padding:0 8px 8px}
 .chart svg{min-width:700px;height:210px}
 .planning-chart svg{min-width:900px;height:280px}
 .planning-chart{height:310px}
 .chart::after,.planning-chart::after,.balance-mode .plan-fact-chart::after{content:'↔ Проведите по графику для просмотра дат';display:block;position:sticky;left:0;width:max-content;max-width:100%;font-size:11px;color:#68758b;padding:3px 0}
 .table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-height:65dvh}
 .table-panel>.panel-head::after{content:'↔ Таблицу можно прокручивать';flex:0 0 100%;font-size:11px;color:#68758b}
 table{font-size:13px}th{font-size:11px}td{padding:12px}
 .tree-toggle{width:36px;height:36px;flex-basis:36px;font-size:18px}
 .supplier-list{padding:4px 12px 14px;gap:16px}
 .supplier-row{grid-template-columns:minmax(0,1fr) auto;gap:7px}
 .supplier-row strong{white-space:normal;font-size:13px;overflow-wrap:anywhere}
 .supplier-meta{font-size:11px;line-height:1.4}
 .supplier-meta.num{white-space:normal}
 .balance-mode #tab-plan-fact{height:auto;min-height:0;gap:12px}
 .balance-mode .plan-fact-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .balance-mode .plan-fact-metrics .metric{padding:12px;min-height:126px}
 .balance-mode .plan-fact-metrics .metric strong{font-size:25px;white-space:normal}
 .balance-mode .plan-fact-legend{gap:8px 12px;line-height:1.4}
 .balance-mode .plan-fact-grid{display:flex;flex-direction:column;gap:12px}
 .balance-mode .plan-fact-panel{display:block;min-width:0}
 .balance-mode .plan-fact-chart{height:188px;padding:0 8px 6px}
 .balance-mode .plan-fact-chart svg{min-width:1040px;height:150px}
 .balance-mode .plan-fact-panel .panel-head{padding:12px}
 .balance-mode .plan-fact-panel h2{font-size:19px}
 .balance-mode #tab-plan-fact>footer,footer{display:flex;flex-direction:column;gap:6px;font-size:11px;overflow-wrap:anywhere}
 .inventory-board{grid-template-columns:1fr;gap:12px;height:auto;grid-auto-rows:auto}
 .inventory-board-card{min-height:0;overflow:hidden}
 .inventory-board-card:nth-child(2),.inventory-board-card:nth-child(6){grid-column:auto;grid-row:auto}
 .inventory-board-card>header h2{font-size:16px}
 .inventory-board-group-head{font-size:12px;padding:7px}
 .inventory-board-item{font-size:14px;min-height:36px;padding:7px}
 .inventory-board-item span{display:block;overflow:visible;-webkit-line-clamp:unset}
 .inventory-board-item strong{font-size:15px}
 .inventory-footer-line{white-space:normal;text-align:left;line-height:1.5}
 dialog.planning-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 20px)}
 .planning-dialog form{padding:16px}
 .planning-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]),.planning-dialog select,.planning-dialog textarea,.login-card input{min-width:0;max-width:100%;font-size:16px;min-height:44px}
 .editor-grid.two-columns{grid-template-columns:1fr}
 .dialog-actions{flex-wrap:wrap;gap:8px}.dialog-actions button{min-height:44px;flex:1 1 auto}
 .dialog-close{width:44px;height:44px;flex:none}
 .calendar-day{min-width:0}.calendar-day-status{overflow-wrap:anywhere}
 .custom-role-grid{grid-template-columns:1fr}.custom-role-grid label{min-height:44px}
}