/* Mobile and tablet overrides; desktop styles stay unchanged. */
.mobile-topbar,.mobile-menu-close,.mobile-backdrop{display:none}
@media(max-width:1024px){
  html{scroll-padding-top:calc(76px + env(safe-area-inset-top))}
  .main{margin-left:0;width:100%;max-width:none;padding:calc(82px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));min-width:0}
  .mobile-topbar{position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(64px + env(safe-area-inset-top));padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top));background:#174d3b;color:#fff;box-shadow:0 2px 10px #173c2e22}
  .mobile-topbar strong{font-size:15px;letter-spacing:.2px}
  .mobile-menu-toggle{min-width:88px;min-height:44px;padding:8px 12px;border:1px solid #ffffff55;border-radius:9px;background:#ffffff16;color:#fff;font-weight:750}
  .mobile-menu-toggle span{font-size:22px;vertical-align:middle;margin-right:5px}
  .side{width:min(300px,86vw);height:100vh;height:100dvh;padding:12px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));z-index:1100;transform:translateX(-105%);transition:transform .2s ease;visibility:hidden;pointer-events:none}
  body.mobile-menu-open .side{transform:translateX(0);visibility:visible;pointer-events:auto}
  .mobile-menu-close{display:flex;align-items:center;justify-content:space-between;min-height:44px;width:100%;border:0;border-radius:8px;padding:6px 10px;margin-bottom:8px;background:#ffffff16;color:#fff;font-weight:750}
  .mobile-menu-close span{font-size:24px}
  .side>.brand-logo{padding:4px 8px 8px}
  .side>.brand-logo img{height:auto;max-height:52px;width:100%;object-fit:contain;object-position:left center}
  .side .nav button{justify-content:flex-start;min-height:44px;padding:7px 10px;gap:10px;font-size:14px;text-align:left}
  .side .nav .txt{display:block;flex:1}
  .side .nav-icon,.side .nav-icon .nav-bag-icon{width:26px;height:26px}
  .side .nav-icon{flex-basis:26px;font-size:25px}
  .side #sir-cloud-box{padding:10px;font-size:12px;margin-top:10px}
  .side #sir-cloud-status{font-size:11px}
  .side #sir-cloud-box .cloud-button-text{display:inline}
  .side #sir-cloud-box .cloud-button-icon{display:none}
  .side #sir-cloud-box .btn{min-height:44px;padding:9px 10px;font-size:13px}
  .mobile-backdrop{display:block;position:fixed;inset:0;z-index:1090;border:0;background:#071d3199;cursor:pointer;touch-action:manipulation}
  .mobile-backdrop[hidden]{display:none}
  body.mobile-menu-open,body.mobile-modal-open{overflow:hidden}
  .btn,.doc-actions .btn,.delivery-name,.ext-sort-header{min-height:44px;padding:10px 12px;font-size:14px;touch-action:manipulation}
  .input,.select,.field input,.field select{min-height:44px;min-width:0;max-width:100%;font-size:16px}
  .filters{gap:8px;align-items:stretch}
  .filters .input,.filters .select{min-width:0;flex:1 1 180px}
  .toolbar{align-items:center}
  .toolbar .input,.toolbar .select{min-width:0;max-width:100%;flex:1 1 180px}
  .toolbar .btn{flex-shrink:0}
  .top{align-items:flex-start;flex-wrap:wrap;gap:12px;margin:18px 0}
  .top h1{font-size:25px;line-height:1.2;overflow-wrap:anywhere}
  .user{flex-wrap:wrap;max-width:100%;font-size:13px}
  .user .av{display:none}
  #sir-user-name{overflow-wrap:anywhere}
  .main>.card:first-child{padding:15px}
  .main>.card:first-child h2{font-size:23px!important}
  .card{min-width:0}
  .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .table{min-width:700px}
  .table th,.table td{font-size:13px}
  .modal{padding:16px;align-items:center}
  .modalbox{width:min(720px,100%);max-height:calc(100dvh - 32px);padding:20px;overscroll-behavior:contain}
  .modalbox h2{font-size:22px;line-height:1.25;overflow-wrap:anywhere}
  .modalbox .actions{position:sticky;bottom:-20px;background:#fff;z-index:2;padding:12px 0 max(12px,env(safe-area-inset-bottom));gap:8px}
  .modalbox .actions .btn{flex:1}
  .doc-actions{gap:8px}
  .adr-material .form{min-width:0}
  #home{max-width:none}
  #home .stat{min-height:62px;padding:11px 12px}
  #home .stat .lab{font-size:13px}
  #home .stat .num{font-size:25px}
  .deadline{gap:12px;flex-wrap:wrap}
  #auth-gate{padding:16px!important;overflow-y:auto}
  #auth-gate>div{max-width:100%;margin:auto;padding:22px!important}
  #auth-gate .input{width:100%;min-width:0}
  button:focus-visible,a:focus-visible{outline:3px solid #83dcb0;outline-offset:3px}
}
@media(max-width:600px){
  .main{padding:calc(76px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
  .mobile-topbar{padding-left:12px;padding-right:12px}
  .main>.card:first-child{padding:12px;gap:10px!important}
  .main>.card:first-child img{width:105px!important;max-width:30%!important}
  .main>.card:first-child h2{font-size:20px!important}
  .main>.card:first-child .muted{font-size:11px}
  .top h1{font-size:23px}
  .card{padding:14px;border-radius:12px;overflow:visible}
  .card h2{font-size:18px}
  .toolbar,.filters{gap:8px}
  .toolbar .btn{flex:1 1 140px}
  .filters .input,.filters .select,.toolbar .input,.toolbar .select{flex-basis:100%;width:100%}
  .clothing-actions{position:static;margin-bottom:12px}
  .table-scroll{overflow:visible}
  /* Stacked records keep every field and action available without sideways scrolling. */
  .table{display:block;min-width:0;width:100%;border-collapse:separate}
  .table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
  .table tbody{display:grid;gap:12px;width:100%}
  .table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;min-width:0;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
  .table tbody td{display:block;min-width:0;max-width:100%;border:0;padding:7px 0;font-size:14px;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
  .table tbody td::before{content:attr(data-label);display:block;color:var(--m);font-size:11px;font-weight:750;line-height:1.25;margin-bottom:5px;text-transform:uppercase}
  .table tbody td:first-child,.table tbody td.mobile-cell-actions,.table tbody td[colspan]{grid-column:1/-1}
  .table tbody td:first-child{padding-top:0;padding-bottom:10px;border-bottom:1px solid #edf1f5;margin-bottom:3px}
  .table tbody td:last-child{border-bottom:0}
  .table tbody td[colspan]::before{display:none}
  .table .doc-actions{display:flex;flex-wrap:wrap}
  .table .doc-actions .btn{flex:1 1 auto}
  .table .delivery-name{padding:5px 0;min-height:40px}
  .table .row{align-items:center;gap:10px}
  .table .mini{width:36px;height:36px;flex-basis:36px;font-size:13px}
  .table .badge{white-space:normal}
  .form,.adr-material .form{grid-template-columns:minmax(0,1fr)}
  .field{min-width:0}
  .full{grid-column:1/-1}
  .modal{padding:0;align-items:stretch}
  .modalbox{width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;padding:18px 16px;overflow-y:auto}
  .modalbox .actions{bottom:-18px;padding:12px 0 max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--bd)}
  .modalbox .actions .btn{min-height:48px}
  .modalbox input[type=file]{width:100%;font-size:14px}
  .doc{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .adr-material{padding:12px;margin:10px 0}
  .adr-material-title{gap:8px}
  .adr-material-title b{min-width:0;overflow-wrap:anywhere}
  #home .dashboard-summary,#home .dashboard-deadline-stack{gap:8px}
  #home .stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:90px;padding:12px}
  #home .stat .lab{font-size:12px;line-height:1.35}
  #home .stat .num{align-self:flex-end;font-size:26px}
  #homeDeadlineCard .deadline{align-items:flex-start}
  .reminder-settings .deadline{flex-wrap:nowrap}
  .reminder-settings .select{width:auto;max-width:45%}
}
@media(prefers-reduced-motion:reduce){.side{transition:none}}