/*
CONFIDENTIAL INTELLECTUAL PROPERTY — CRISTIAN G. FREIRE
© 2026 Cristian G. Freire. All Rights Reserved.
OPT V7.106 / Build 100 R30.20 — Smartphone Layout Optimization

Final smartphone-only layer. Desktop/tablet geometry above 760px is intentionally unchanged.
*/

.opt-mobile-nav-close{display:none}

@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body.opt-mobile-nav-open{overflow:hidden}

  /* Shared application shell: give the page the full phone width and move navigation off canvas. */
  .app,.io-shell,.wr-shell,.wt-shell{display:block!important;min-width:0!important;width:100%!important}
  .app>.main,.io-main,.wr-main,.wt-main{box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:100%!important}
  .app>.main{padding:12px 10px 28px!important}
  .io-main,.wr-main,.wt-main{padding:10px!important}

  .app>.side,.io-side,.wr-side,.wt-side{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(86vw,320px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:10px 12px 24px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    transform:translateX(-105%)!important;
    transition:transform .2s ease!important;
    z-index:2147481900!important;
    box-shadow:18px 0 40px rgba(3,16,35,.28)!important;
  }
  body.opt-mobile-nav-open .app>.side,
  body.opt-mobile-nav-open .io-side,
  body.opt-mobile-nav-open .wr-side,
  body.opt-mobile-nav-open .wt-side{transform:translateX(0)!important}

  .opt-mobile-nav-close{
    display:block;appearance:none;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;
    min-height:42px;width:100%;border-radius:9px;padding:0 12px;margin:0 0 10px;font:800 13px/1 Segoe UI,Arial,sans-serif;
    text-align:left;cursor:pointer;flex:0 0 auto
  }

  /* Standard sidebar becomes a readable touch menu rather than a 76px icon rail. */
  .app>.side .labeltxt{display:inline!important}
  .app>.side .navicon{display:none!important}
  .app>.side .section{display:block!important;margin:16px 13px 6px!important}
  .app>.side .nav a{justify-content:flex-start!important;min-height:44px!important;padding:11px 13px!important;font-size:15px!important}
  .app>.side .theme-toggle{min-height:44px!important;width:calc(100% - 8px)!important;margin:0 4px!important}
  .app>.side.owner-side{overflow-y:auto!important;overflow-x:hidden!important}

  /* Owner/internal grouped menus open inside the drawer instead of flying off the right edge. */
  .nav-flyout-group{width:100%!important}
  .nav-flyout-trigger{justify-content:space-between!important;min-height:44px!important;padding:11px 13px!important;font-size:15px!important}
  .nav-flyout-trigger .labeltxt,.nav-flyout-chevron{display:inline!important}
  .nav-flyout-trigger .navicon{display:none!important}
  .nav-flyout-menu{position:static!important;left:auto!important;top:auto!important;width:100%!important;max-height:none!important;margin:4px 0 8px!important;padding:5px!important;overflow:visible!important;border-color:rgba(255,255,255,.10)!important;border-radius:8px!important;box-shadow:none!important}
  .nav-flyout-menu a{justify-content:flex-start!important;min-height:42px!important;white-space:normal!important;font-size:14px!important}
  .nav-flyout-menu .labeltxt{display:inline!important}.nav-flyout-menu .navicon{display:none!important}

  /* Specialized workflow sidebars retain their links and become the same drawer. */
  .io-side .io-logo,.wr-side .wr-logo,.wt-side .wt-logo{display:none!important}
  .io-nav a,.wr-side nav a,.wt-side nav a{min-height:44px!important}
  .io-side-help,.wt-help{margin-top:14px!important}

  /* General phone typography / touch targets. 16px inputs prevent unwanted iOS form zoom. */
  .main h1,.io-main h1,.wr-main h1,.wt-main h1{font-size:27px!important;line-height:1.1!important}
  input,select,textarea{font-size:16px!important;max-width:100%}
  .main button,.main .primary,.main .secondary,.main a.primary,.main a.secondary,
  .io-btn,.wr-primary,.wr-secondary,.wt-btn{min-height:44px}
  .top{align-items:stretch!important;flex-direction:column!important;gap:10px!important}
  .top>.buttons,.top>div.buttons{width:100%}
  .toolbar,.buttons{gap:8px!important}
  .kv{grid-template-columns:1fr!important;gap:4px!important}
  .card,.panel{box-sizing:border-box;max-width:100%;min-width:0}
  .footer{padding-left:4px!important;padding-right:4px!important;text-align:center!important}

  /* Generic direct tables get local horizontal scrolling instead of widening the whole portal. */
  .main .card:has(>table),.main .panel:has(>table){overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .main .card:has(>table)>table,.main .panel:has(>table)>table{min-width:680px}

  /* Step indicators stay usable without shrinking to unreadable labels. */
  .stepper{display:flex!important;gap:8px!important;overflow-x:auto!important;padding-bottom:5px!important;scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important}
  .step{flex:0 0 118px!important;scroll-snap-align:start!important}
  .step b{display:block!important;font-size:10px!important}

  /* Owner Home: single-column cards, compact header actions, no artificial tall cards. */
  .owner-command-center{margin:-12px -10px -10px!important;padding:12px 10px 16px!important;min-height:0!important}
  .owner-top{display:block!important;min-height:0!important;margin-bottom:10px!important}
  .owner-top h1{font-size:24px!important}
  .owner-top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:10px!important;width:100%!important}
  .owner-top-actions>*{box-sizing:border-box!important;width:100%!important;min-width:0!important;justify-content:center!important;padding-left:8px!important;padding-right:8px!important}
  .oh-card,.oh-weekly,.oh-supplies-feature,.oh-orders,.oh-production,.oh-quote-card,.oh-preview-card{min-height:0!important;margin-bottom:10px!important}
  .weekly-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .triple-kpi,.supply-kpis,.finance-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .weekly-mini-table{overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  .wrow{min-width:620px!important}
  .oh-quick>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .oh-quick a{text-align:center!important;min-height:40px!important;display:grid!important;place-items:center!important}
  .owner-foot{align-items:flex-start!important;flex-direction:column!important;gap:4px!important}

  /* Messaging: contact list first, then a full-width selected conversation; files/buttons wrap cleanly. */
  .msg44-layout,.msg-contact-layout{grid-template-columns:1fr!important;min-height:0!important;gap:10px!important}
  .msg44-left,.msg-contact-left{max-height:none!important;min-height:0!important}
  .msg44-thread-list,.msg-contact-list{max-height:300px!important}
  .msg-other-list{max-height:180px!important}
  .msg44-pane,.msg-contact-pane{min-height:460px!important}
  .msg44-pane-head,.msg-contact-pane-head{padding:12px!important}
  .msg44-entries,.msg-contact-entries{padding:12px!important;max-height:none!important}
  .msg44-entry,.msg-contact-entry{max-width:94%!important}
  .msg44-reply,.msg-contact-reply{grid-template-columns:1fr!important;position:static!important}
  .msg44-reply button,.msg-contact-reply button{width:100%!important}
  .msg-file-actions{flex-wrap:wrap!important}
  .msg-file-actions a,.msg-file-actions button{min-height:40px!important}

  /* All Orders / list pages. */
  .ao-page{gap:10px!important}
  .ao-head{gap:9px!important}
  .ao-head h1{font-size:28px!important}
  .ao-filters{padding:11px!important}
  .ao-filter-grid,.ao-summary{grid-template-columns:1fr!important}
  .ao-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .ao-pagination{align-items:flex-start!important;flex-direction:column!important}

  /* Supply requests and production history keep wide operational grids inside local scrollers. */
  .supply-table-card,.ph-table-scroll,.pl-table-scroll,.capacity-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .supply-request-table{min-width:760px!important}

  /* Orders Due Soon: keep seven-day cards swipeable in one row, while daily tables remain local scroll areas. */
  .wt-day-cards{display:flex!important;overflow-x:auto!important;gap:8px!important;scroll-snap-type:x proximity!important;padding-bottom:5px!important;overscroll-behavior-x:contain!important}
  .wt-day-card{flex:0 0 155px!important;scroll-snap-align:start!important}
  .wt-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .wt-top-actions{display:flex!important;flex-wrap:wrap!important}
  .wt-top-actions>*{flex:1 1 auto!important}

  /* Warehouse: preserve the operational tables as local scrollers and keep forms one-column. */
  .wr-table-scroll,.wr-outbound-scroll,.wr-history-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .wr-shipment-fields,.wr-order-meta,.wr-unmatched-fields{grid-template-columns:1fr!important}

  /* Internal order detail: preserve its detailed content but stop whole-page horizontal overflow. */
  .io-topline,.io40-topline{align-items:flex-start!important;flex-direction:column!important}
  .io-top-actions{width:100%!important;flex-wrap:wrap!important}
  .io-top-actions>*{flex:1 1 auto!important}
  .io-header-card,.io40-header-card{grid-template-columns:1fr 1fr!important}
  .io-pipeline,.io40-pipeline{grid-template-columns:1fr 1fr!important}
  .io-table-scroll,.io40-size-cells,.io81-note-viewport{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}

  /* Modal/popup spacing respects narrow devices and safe areas. */
  .msg44-modal,.r2841-gallery-modal,.s1e-dup-modal{padding:8px!important}
  .msg44-compose,.r2841-gallery-modal-card,.s1e-dup-modal-card{max-width:calc(100vw - 16px)!important}
}

@media (max-width:430px){
  .app>.main{padding:10px 8px 24px!important}
  .owner-command-center{margin:-10px -8px -8px!important;padding:10px 8px 14px!important}
  .owner-top-actions{grid-template-columns:1fr!important}
  .oh-quick>div{grid-template-columns:1fr!important}
  .weekly-kpis{grid-template-columns:1fr 1fr!important}
  .triple-kpi,.supply-kpis,.finance-three{grid-template-columns:1fr 1fr 1fr!important}
  .main h1,.io-main h1,.wr-main h1,.wt-main h1{font-size:25px!important}
  .msg44-pane,.msg-contact-pane{min-height:420px!important}
}