/* Final responsive layer. Keep this stylesheet last so the mobile shell wins. */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%}

@media(max-width:700px){
  html{scrollbar-gutter:auto;-webkit-text-size-adjust:100%}
  body{min-width:0}
  .shell{display:block;min-height:100dvh}
  .shell>main{width:100%;min-width:0;padding:20px 14px calc(84px + env(safe-area-inset-bottom,0px))}

  /* Eight primary destinations fit in one fixed row. Submenus remain desktop-only. */
  .sidebar{position:fixed!important;z-index:100!important;inset:auto 0 0!important;width:100%!important;height:calc(62px + env(safe-area-inset-bottom,0px))!important;min-height:0!important;padding:6px max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px))!important;overflow:visible!important;overscroll-behavior:auto!important;border:0!important;border-top:1px solid #ffffff1c!important}
  .sidebar>.brand,.sidebar>.profile,.sidebar>.secure{display:none!important}
  .sidebar nav{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;align-items:center!important;gap:2px!important;width:100%!important;height:56px!important;overflow:visible!important}
  .sidebar nav>a,.sidebar nav>a.active{display:grid!important;place-items:center!important;align-self:center!important;width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;max-height:48px!important;margin:0!important;padding:0!important;border-radius:11px!important;font-size:0!important;line-height:0!important;overflow:hidden!important;box-shadow:none!important}
  .sidebar nav>a.active{background:linear-gradient(180deg,#ffffff10,#0dbb7b25)!important;box-shadow:inset 0 3px #20d79b!important}
  .sidebar nav>a i{display:grid!important;place-items:center!important;place-self:center!important;width:22px!important;min-width:22px!important;height:22px!important;margin:0!important;padding:0!important;font-size:0!important;line-height:0!important;transform:none!important}
  .sidebar nav>a i svg{display:block!important;width:20px!important;height:20px!important;margin:auto!important}
  .sidebar nav>a::after,.sidebar .nav-caret{display:none!important;content:none!important}
  .sidebar .settings-subnav,.sidebar .analytics-subnav{display:none!important}

  main>header{display:flex;align-items:center;gap:10px;margin-bottom:22px}
  main>header>div:first-child{min-width:0;flex:1}
  main>header p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main>header h1{font-size:clamp(23px,7vw,28px);overflow-wrap:anywhere}
  main>header .actions{flex:0 0 auto;gap:6px}
  .header-primary,.header-action{height:42px;padding:0 11px;font-size:11px;white-space:nowrap}
  .header-refresh{width:42px!important;padding:0!important}
  .header-refresh b{display:none}

  .panel{max-width:100%;padding:16px;border-radius:15px}
  .panel-head{gap:10px}
  .panel-head>div{min-width:0}
  .panel-head h2,.panel-head p{overflow-wrap:anywhere}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats article{min-width:0;padding:14px}
  .stats article>strong{font-size:clamp(17px,5.4vw,23px);overflow-wrap:anywhere}
  .stat-top small{font-size:11px}
  .grid,.admin-grid,.settings-pair,.analytics-grid,.report-layout{grid-template-columns:minmax(0,1fr)!important}
  .chart{height:220px;padding-left:32px}
  .months{left:32px}
  .recent,.documents-panel,.analytics-orders,.mapping-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .recent table{min-width:620px}

  .order-panel-head{display:block}
  .order-filter-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;margin-top:13px}
  .order-filter-form .search{grid-column:1/-1;min-width:0;margin:0}
  .order-filter-form>button{width:100%}
  .filter-menu{max-width:calc(100vw - 28px)}
  .status-filter-menu{max-height:min(330px,55dvh)}
  .order-summary{gap:10px;padding:14px}
  .order-detail{padding:0 12px 14px}
  .order-date-actions{grid-template-columns:1fr}
  .order-inline-action,.order-date-actions .order-inline-action{grid-template-columns:1fr;margin:12px 0;padding:12px}
  .document-state,.detail-meta,.order-detail .doc-actions{grid-template-columns:1fr}
  .document-state>div.document-card.exists{grid-template-columns:minmax(0,1fr) auto}
  .document-state>.exists .document-card-head{grid-column:1/-1}
  .document-issue,.order-detail .doc-actions form,.order-finance form{grid-template-columns:1fr!important}
  .product-lines>div{grid-template-columns:minmax(0,1fr) auto;gap:8px}

  .document-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;overflow:visible}
  .document-tabs button{min-width:0;white-space:normal}
  .documents-panel table{min-width:760px}
  .documents-panel .panel-head{display:block}
  .documents-panel .search{width:100%;margin-top:12px}

  .analytics-filter{display:grid;grid-template-columns:1fr;padding:14px}
  .analytics-filter>*{width:100%;min-width:0}
  .quick-periods{display:grid;grid-template-columns:1fr 1fr}
  .quick-periods button{min-width:0;padding:10px 7px}
  .analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-kpis article{min-width:0;padding:15px}
  .analytics-kpis strong{font-size:20px;overflow-wrap:anywhere}
  .saved-view-picker,.saved-view-picker label{display:grid;justify-content:stretch;width:100%}
  .saved-view-picker select{width:100%;min-width:0}
  .product-editor-body,.product-editor-list form.new-cost-form{grid-template-columns:1fr}

  .numbering-toolbar{padding:15px}
  .numbering-toolbar nav{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .numbering-toolbar nav>*{min-width:0}
  .numbering-toolbar .primary{grid-column:1/-1}
  .series-head{grid-template-columns:42px minmax(0,1fr)}
  .series-head>.fiscal-toggle,.series-head>.type-pill{grid-column:1/-1;justify-self:start}
  .series-actions{align-items:stretch}
  .series-actions>*{flex:1}
  .new-numbering-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
  .new-numbering-dialog form{padding:18px}

  .settings-hub{grid-template-columns:1fr}
  .settings-hub>a,.language-settings{grid-template-columns:40px minmax(0,1fr) auto!important}
  .profile-language-settings{padding:20px}
  .language-settings-heading{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .language-settings-heading>span{width:44px;height:44px}
  .language-choice-large{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .language-choice-large a{min-width:0}
  .user-row{grid-template-columns:38px minmax(0,1fr) auto}
  .user-row>*{min-width:0}
  .base-field-setup ol{padding:15px 15px 15px 32px}
  .mapping-actions{align-items:stretch;flex-direction:column}
  .mapping-actions .primary{width:100%}

  input,select,textarea,button{max-width:100%}
  input,select,textarea{font-size:16px!important}
  button,a{touch-action:manipulation}
  .toast{left:12px;right:12px;top:max(12px,env(safe-area-inset-top,0px));max-width:none;text-align:center}
}

@media(max-width:380px){
  .shell>main{padding-left:10px;padding-right:10px}
  .stats article{padding:12px}
  .stat-top{gap:6px}
  .header-primary{padding:0 9px}
  .sidebar{padding-left:3px!important;padding-right:3px!important}
  .sidebar nav{gap:0!important}
}

/* Mobile authentication pages share browser-safe sizing but have no app menu. */
@media(max-width:760px){
  .auth-shell{min-height:100dvh}
  .auth-story{padding:max(24px,env(safe-area-inset-top,0px)) 22px 24px}
  .auth-story .story-main{margin:30px 0 8px}
  .story-main h1{font-size:clamp(30px,9vw,36px);overflow-wrap:anywhere}
  .auth-content{min-height:0;padding:24px 14px calc(30px + env(safe-area-inset-bottom,0px))}
  .auth-card{width:100%;padding:25px 20px;border-radius:20px}
  .auth-card h2{font-size:clamp(23px,7vw,28px);overflow-wrap:anywhere}
  .auth-card input{font-size:16px!important}
  .language-toggle{top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}

  .order-create-shell{width:100%;padding:max(18px,env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px))}
  .order-create-shell header{align-items:center;gap:12px}
  .order-create-card{width:100%;padding:20px 16px;border-radius:18px}
  .create-heading{gap:12px}
  .create-heading img{width:46px;height:46px;flex:0 0 46px}
  .create-heading h1{font-size:clamp(22px,7vw,27px);overflow-wrap:anywhere}
  .create-heading p{line-height:1.5}
  .order-create-card input,.order-create-card select{font-size:16px!important}
}