:root{--mobile-nav-h:72px;--mobile-safe-bottom:env(safe-area-inset-bottom,0px);--mobile-tap:44px}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;overscroll-behavior-y:none}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font-family:var(--font-primary,"Yekan Bakh",Tahoma,sans-serif)}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mobile-bottom-nav,.mobile-fab,.mobile-search-trigger{display:none}
.mobile-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:inherit;scrollbar-width:thin}
.mobile-table-scroll>table{min-width:680px}

/* Laptop/tablet convergence */
@media(max-width:1180px){
  .content{max-width:100%;padding-inline:20px}
  .page-actions,.crm-hero-actions,.wo-hero-actions,.commerce-hero-actions,.automation-hero-actions,.report-hero-actions,.settings-hero-actions{flex-wrap:wrap}
  .cards-2,.system-grid{gap:14px}
  .table,.wo-table,.report-table{font-size:10px}
}

/* Tablet shell: full drawer instead of collapsed desktop sidebar */
@media(max-width:980px){
  body.oilora-drawer-open{overflow:hidden;touch-action:none}
  .shell-overlay{position:fixed;inset:0;background:rgba(5,22,13,.46);backdrop-filter:blur(3px);z-index:38}
  .sidebar{z-index:60;max-width:88vw;overscroll-behavior:contain}
  .sidebar-scroll{-webkit-overflow-scrolling:touch}
  .nav-item{min-height:46px}
  .topbar{position:sticky;top:0;z-index:35}
  .content{padding-inline:16px}
  .modal{max-width:calc(100vw - 28px)}
}

/* Phone experience */
@media(max-width:760px){
  :root{--mobile-nav-h:70px}
  body{padding-bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom))}
  .shell{min-height:100dvh}
  .main{min-height:100dvh}
  .content{padding:16px 12px calc(30px + var(--mobile-nav-h));overflow:hidden}
  .topbar{position:sticky;top:0;height:62px;padding:0 10px;grid-template-columns:minmax(0,1fr) auto;border-bottom-color:#e1e9e4;background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(145%)}
  .topbar-start{gap:7px}.mobile-menu{width:40px;height:40px;border-radius:12px}
  .page-identity{min-width:0}.page-identity b{font-size:12.5px}.page-identity small{display:none}
  .top-actions{gap:4px}.top-actions .icon-btn{width:39px;height:39px;border-radius:12px}
  .mobile-search-trigger{display:grid}
  .notify-btn{display:grid}.profile-pro{width:39px;height:39px;padding:3px;display:grid;place-items:center}.profile-pro .avatar{width:31px;height:31px;border-radius:9px}.profile-text,.profile-caret{display:none!important}
  .quick-wrap,.branch-btn{display:none}
  .topbar-search-wrap{position:fixed!important;top:68px!important;right:10px!important;left:10px!important;z-index:95!important;display:none!important;filter:drop-shadow(0 16px 30px rgba(10,39,23,.14))}
  .topbar-search-wrap.mobile-open{display:block!important}
  .topbar-search{height:48px;border-radius:15px;padding-inline:13px}.topbar-search input{font-size:16px}.topbar-search kbd{display:none}
  .shell-search-popover{top:54px;max-height:min(55vh,420px);border-radius:16px}
  .notification-popover,.profile-popover,.quick-create-popover{position:fixed!important;top:auto!important;right:8px!important;left:8px!important;bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 10px)!important;width:auto!important;max-height:68dvh;overflow:auto;border-radius:22px!important;box-shadow:0 24px 70px rgba(5,32,17,.24)!important}
  .quick-create-popover{padding-bottom:8px}
  .quick-grid{grid-template-columns:1fr 1fr}

  .mobile-bottom-nav{position:fixed;z-index:88;right:0;left:0;bottom:0;height:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom));padding:5px 6px var(--mobile-safe-bottom);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;background:rgba(255,255,255,.96);border-top:1px solid #dce7e0;backdrop-filter:blur(18px) saturate(150%);box-shadow:0 -8px 26px rgba(11,48,27,.07)}
  .mobile-bottom-nav a,.mobile-bottom-nav button{height:58px;border:0;background:transparent;color:#7d8c83;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:13px;font:700 8px var(--font-primary,inherit);cursor:pointer;position:relative;min-width:0}
  .mobile-bottom-nav .oil-icon{width:20px;height:20px}.mobile-bottom-nav a.active{color:#137943;background:#eff8f2}.mobile-bottom-nav a.active:before{content:"";position:absolute;top:2px;width:22px;height:3px;border-radius:99px;background:#178a4a}
  .mobile-bottom-nav button{color:#62746a}
  .mobile-fab{display:flex;position:fixed;z-index:89;left:14px;bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 12px);height:46px;padding:0 15px;border:0;border-radius:15px;background:linear-gradient(135deg,#178a4a,#0e6937);color:#fff;align-items:center;gap:7px;font:800 10px var(--font-primary,inherit);box-shadow:0 12px 30px rgba(23,138,74,.3)}
  .mobile-fab .oil-icon{width:18px}.mobile-fab:active{transform:translateY(1px) scale(.98)}

  /* Generic page rhythm and touch targets */
  .page-head,.crm-hero,.wo-hero,.commerce-hero,.automation-hero,.reminder-hero,.subscription-hero,.report-hero,.settings-hero{border-radius:18px!important}
  .page-head{gap:12px}.page-head h1{font-size:21px}.page-head p{font-size:10.5px;line-height:1.9}
  .page-actions{width:100%;display:flex;gap:7px;overflow:auto;padding-bottom:2px}.page-actions>.btn{flex:0 0 auto}
  .btn{min-height:42px}.btn-sm{min-height:36px}.icon-btn{min-width:40px;min-height:40px}
  input,select,textarea{font-size:16px!important}
  label{min-width:0}
  .card,.stat,.crm-card,.commerce-panel,.automation-card,.report-panel,.settings-card{border-radius:16px}
  .stats{gap:9px}.stat{min-width:0}.stat strong{font-size:17px}

  /* Data-dense content becomes horizontally scrollable rather than overflowing viewport */
  .mobile-table-scroll,.report-table-wrap,.plan-compare-wrap,.wo-lines,.table-wrap,.table-scroll{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .mobile-table-scroll table,.report-table,.subscription-compare table{min-width:650px}
  .wo-lines-head,.wo-line{min-width:620px}
  .commerce-panel,.crm-panel,.wo-panel,.report-panel{max-width:100%;min-width:0}

  /* Forms and dialogs become bottom sheets on phones */
  .modal-backdrop{padding:0!important;align-items:flex-end!important}
  .modal-backdrop>.modal,.modal-backdrop>.mobile-sheet-ready,.wo-modal,.res-modal,.subscription-plan-modal{width:100%!important;max-width:none!important;max-height:92dvh!important;margin:0!important;border-radius:22px 22px 0 0!important;padding-bottom:max(12px,var(--mobile-safe-bottom))!important;overscroll-behavior:contain}
  .modal-head{position:sticky;top:0;z-index:3;background:inherit;border-radius:22px 22px 0 0}
  .modal-body{overflow:auto;-webkit-overflow-scrolling:touch}
  .modal-foot{position:sticky;bottom:0;background:#fff;z-index:3;padding-bottom:max(12px,var(--mobile-safe-bottom));gap:7px;flex-wrap:wrap}
  .modal-foot .btn{flex:1;min-width:110px}

  /* Calendar / charts / long controls retain usable width */
  .res-month-view,.res-week-view{overflow:auto;-webkit-overflow-scrolling:touch}.res-month-grid,.res-week-grid{min-width:650px}
  .dash-chart-card,.dash-operations,.report-panel{overflow:hidden}.dash-bars{min-width:470px}.dash-chart-body{overflow:auto}
  .crm-segments,.wo-segments,.reminder-filter-chips,.settings-nav,.shop-chips{scrollbar-width:none}.crm-segments::-webkit-scrollbar,.wo-segments::-webkit-scrollbar,.reminder-filter-chips::-webkit-scrollbar,.settings-nav::-webkit-scrollbar{display:none}
  .crm-segments,.wo-segments{display:flex;overflow-x:auto;flex-wrap:nowrap}.crm-segments button,.wo-segments button{white-space:nowrap;flex:0 0 auto}

  /* Public/auth mobile polish */
  .landing-container,.cp-wrap{width:min(100% - 24px,1180px)}
  .landing-header,.public-header{backdrop-filter:blur(18px)}
  .landing-mobile-links,.public-mobile-menu{position:fixed!important;top:70px!important;right:10px!important;left:10px!important;z-index:100!important;max-height:70dvh;overflow:auto}
  .auth-main,.onb-main{padding-inline:12px}.auth-card,.onb-card{width:100%;margin-inline:auto}
  .auth-card input,.onb-card input,.auth-card select,.onb-card select{font-size:16px!important}

  /* Customer portal already has its own mobile nav; do not double-pad it */
  .customer-app{padding-bottom:calc(78px + var(--mobile-safe-bottom))}
  .customer-app~.mobile-bottom-nav,.customer-app~.mobile-fab{display:none!important}
}

@media(max-width:520px){
  .content{padding-inline:10px}
  .mobile-bottom-nav{padding-inline:3px}.mobile-bottom-nav a,.mobile-bottom-nav button{font-size:7.5px}.mobile-bottom-nav .oil-icon{width:19px;height:19px}
  .mobile-fab{left:10px;height:44px;padding-inline:13px}
  .quick-grid{grid-template-columns:1fr}
  .stats,.crm-stats,.wo-metrics,.commerce-metrics,.subscription-metrics,.report-kpis,.automation-stat-grid{grid-template-columns:1fr!important}
  .dash-kpis,.dash-kpi-grid{grid-template-columns:1fr!important}
  .page-head h1,.crm-hero h1,.wo-hero h1,.commerce-hero h1,.automation-hero h1,.report-hero h1,.settings-hero h1{font-size:22px!important}
  .crm-hero-actions,.wo-hero-actions,.commerce-hero-actions,.automation-hero-actions,.report-hero-actions,.settings-hero-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.crm-hero-actions>.btn,.wo-hero-actions>.btn,.commerce-hero-actions>.btn,.automation-hero-actions>.btn,.report-hero-actions>.btn,.settings-hero-actions>.btn{width:100%;min-width:0}
  .weekday-grid{grid-template-columns:repeat(2,1fr)!important}
  .settings-savebar{right:7px!important;left:7px!important;width:auto!important}
  .cp-mobile-nav{padding-bottom:var(--mobile-safe-bottom)}
}

@media(max-width:380px){
  .top-actions .notify-btn{display:none}.mobile-fab span{display:none}.mobile-fab{width:44px;padding:0;justify-content:center;border-radius:50%}
  .mobile-bottom-nav a,.mobile-bottom-nav button{font-size:7px}.mobile-bottom-nav .oil-icon{width:18px;height:18px}
  .crm-hero-actions,.wo-hero-actions,.commerce-hero-actions,.automation-hero-actions,.report-hero-actions,.settings-hero-actions{grid-template-columns:1fr!important}
}

/* Landscape phone: reduce fixed chrome height */
@media(max-height:520px) and (orientation:landscape) and (max-width:980px){
  :root{--mobile-nav-h:58px}.topbar{height:54px}.content{padding-top:10px}.mobile-bottom-nav a,.mobile-bottom-nav button{height:48px}.mobile-bottom-nav a span,.mobile-bottom-nav button span{display:none}.mobile-fab{bottom:calc(58px + var(--mobile-safe-bottom) + 6px)}
}

/* Accessibility / motion */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(hover:none){.card:hover,.commerce-product-card:hover,.subscription-card:hover{transform:none!important}}


:root{--oilora-visual-vh:100dvh;--oilora-visual-vw:100vw;--mobile-inline:clamp(10px,3.5vw,18px)}
body.oilora-modal-open,body.oilora-public-menu-open{overflow:hidden;overscroll-behavior:none}

/* Route-surface isolation: admin fixed chrome must never leak into public/auth/customer pages. */
@media(max-width:760px){
  body:not(.oilora-surface-admin){padding-bottom:0!important}
  body.oilora-surface-admin{padding-bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom))}
  body.oilora-surface-public .mobile-bottom-nav,body.oilora-surface-public .mobile-fab,
  body.oilora-surface-auth .mobile-bottom-nav,body.oilora-surface-auth .mobile-fab,
  body.oilora-surface-customer .mobile-bottom-nav,body.oilora-surface-customer .mobile-fab{display:none!important}

  /* Role-aware navigation always uses the exact number of visible destinations. */
  .mobile-bottom-nav{grid-template-columns:repeat(var(--mobile-nav-count,5),minmax(0,1fr))}
  .mobile-bottom-nav button.active{color:#137943;background:#eff8f2}
  .mobile-bottom-nav button.active:before{content:"";position:absolute;top:2px;width:22px;height:3px;border-radius:99px;background:#178a4a}

  /* Prevent a keyboard from pushing modal actions off-screen. */
  .modal-backdrop,.commerce-drawer-backdrop{height:var(--oilora-visual-vh,100dvh);max-height:var(--oilora-visual-vh,100dvh)}
  .modal-backdrop>.modal,.modal-backdrop>.mobile-sheet-ready,.wo-modal,.res-modal,.subscription-plan-modal{max-height:min(92dvh,calc(var(--oilora-visual-vh,100dvh) - 8px))!important;display:flex;flex-direction:column}
  .modal-body{min-height:0;flex:1 1 auto;overflow:auto!important;padding-bottom:max(16px,var(--mobile-safe-bottom))}
  html[data-mobile-keyboard="open"] .modal-backdrop>.modal,html[data-mobile-keyboard="open"] .modal-backdrop>.mobile-sheet-ready{max-height:calc(var(--oilora-visual-vh) - 2px)!important;border-radius:18px 18px 0 0!important}
  html[data-mobile-keyboard="open"] .mobile-bottom-nav,html[data-mobile-keyboard="open"] .mobile-fab{visibility:hidden;pointer-events:none}

  /* Admin shell: deterministic drawer and compact topbar. */
  .sidebar{height:100dvh;max-height:var(--oilora-visual-vh,100dvh);padding-bottom:var(--mobile-safe-bottom)}
  .sidebar-scroll{min-height:0;overflow:auto;overscroll-behavior:contain}
  .shell-overlay{touch-action:none}
  .topbar{padding-inline:var(--mobile-inline);width:100%;max-width:100vw}
  .topbar-start,.top-actions{min-width:0}
  .page-identity{max-width:min(46vw,230px)}
  .content{width:100%;max-width:100vw;padding-inline:var(--mobile-inline);overflow-x:clip}
  .content>*{min-width:0;max-width:100%}

  /* Data-heavy modules never force the viewport wider than the device. */
  .table-wrap,.table-scroll,.mobile-table-scroll,.report-table-wrap,.plan-compare-wrap,.wo-lines,
  .res-month-view,.res-week-view,.dash-chart-body,.crm-panel,.commerce-panel,.report-panel,.settings-card{min-width:0;max-width:100%;overscroll-behavior-inline:contain}
  table{max-width:none}
  .page-actions,.crm-segments,.wo-segments,.settings-nav,.reminder-filter-chips,.shop-chips{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .page-actions>* ,.crm-segments>* ,.wo-segments>* ,.settings-nav>*{scroll-snap-align:start}

  /* Public menu is a real mobile sheet, not a floating overflowing block. */
  .public-mobile-menu,.landing-mobile-links{max-height:calc(var(--oilora-visual-vh,100dvh) - 84px)!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.oilora-public-menu-open:after{content:"";position:fixed;inset:0;background:rgba(5,22,13,.28);backdrop-filter:blur(2px);z-index:89;pointer-events:none}
  body.oilora-public-menu-open .public-header,body.oilora-public-menu-open .landing-header{position:relative;z-index:100}

  /* Customer portal owns its own bottom navigation and safe-area. */
  .customer-app{min-height:100dvh;padding-bottom:calc(78px + var(--mobile-safe-bottom))!important;overflow-x:clip}
  .cp-main{min-width:0;overflow-x:clip}
  .cp-wrap{max-width:100%;min-width:0}
  .cp-mobile-nav{padding-bottom:var(--mobile-safe-bottom);height:calc(68px + var(--mobile-safe-bottom))}
  .cp-profile-menu{max-height:min(70dvh,calc(var(--oilora-visual-vh,100dvh) - 90px));overflow:auto;overscroll-behavior:contain}

  /* Auth/onboarding must fit short phones and browser keyboards. */
  .auth-page,.onboarding-page,.cp-login-page{min-height:var(--oilora-visual-vh,100dvh)}
  .auth-main,.onb-main,.cp-login-panel{min-width:0;max-width:100vw}
  .auth-card,.onb-card,.cp-login-box{max-width:100%;min-width:0}
}

@media(max-width:420px){
  :root{--mobile-inline:10px}
  .top-actions .shell-theme-toggle{display:none}
  .page-identity{max-width:44vw}
  .mobile-bottom-nav a,.mobile-bottom-nav button{padding-inline:2px}
  .mobile-bottom-nav a span,.mobile-bottom-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modal-foot{display:grid!important;grid-template-columns:1fr!important}
  .modal-foot .btn{width:100%;min-width:0}
  .public-nav-actions .public-access-btn{display:none}
}

@media(min-width:761px) and (max-width:980px){
  .content{padding-inline:20px}
  .sidebar{max-width:min(320px,82vw)}
  .modal{max-width:min(720px,calc(100vw - 32px));max-height:min(88dvh,var(--oilora-visual-vh,100dvh))}
  .cards-2,.system-grid,.crm-grid,.commerce-grid,.report-grid{grid-template-columns:minmax(0,1fr)!important}
}

@supports(padding:max(0px)){
  @media(max-width:760px){
    .topbar{padding-left:max(var(--mobile-inline),env(safe-area-inset-left));padding-right:max(var(--mobile-inline),env(safe-area-inset-right))}
    .mobile-bottom-nav{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  }
}