/* Legacy iPad portrait + landscape stabilization.
   Cross-module invariants that must beat later feature styles live in
   styles-tablet-final.css?graphite=20261014-v7 which is linked last by index.html. */

@media (max-width:1024px){
 html,
 body,
 #app{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
 }

 #sidebar{
  width:260px !important;
  transform:translateX(calc(-100% - 10px)) !important;
 }
 #sidebar.open{transform:translateX(0) !important;}
 #main{
  width:100% !important;
  max-width:100vw !important;
  min-width:0 !important;
  margin-left:0 !important;
  overflow-x:hidden !important;
 }
 .page,
 .page.active{
  width:100% !important;
  max-width:100vw !important;
  min-width:0 !important;
 }

 .burger-btn{
  display:flex !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
 }
 .topbar{
  min-width:0 !important;
  padding-inline:12px !important;
  gap:10px !important;
 }
 .topbar .page-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
 }
 .topbar-right{min-width:0 !important;}
 .topbar .btn-logout{
  min-height:40px !important;
  padding-inline:14px !important;
 }

 /* Calendar: one owner fits the viewport; two owners keep an explicit pan area. */
 #page-calendar > .topbar + div{
  width:100% !important;
  max-width:100vw !important;
  min-height:50px !important;
  height:auto !important;
  padding:6px 10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  justify-content:flex-start !important;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
 }
 #page-calendar > .topbar + div > *{flex:0 0 auto !important;}
 #page-calendar #cal-main-area[data-cal-view="week"]{
  width:100% !important;
  max-width:100vw !important;
  min-width:0 !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
 }
 #page-calendar:not(:has(#cal-user-both.active)) #cal-week-view{
  width:100% !important;
  min-width:100% !important;
 }
 #page-calendar:not(:has(#cal-user-both.active)) #cal-week-scroll-body,
 #page-calendar:not(:has(#cal-user-both.active)) #cal-week-body{
  width:100% !important;
  min-width:0 !important;
 }
 #page-calendar:has(#cal-user-both.active) #cal-week-view{
  width:1480px !important;
  min-width:1480px !important;
 }
 #page-calendar #cal-week-header{position:sticky !important;top:0 !important;z-index:12 !important;}
 #page-calendar #cal-time-col{position:sticky !important;left:0 !important;z-index:9 !important;}
 #page-calendar #cal-day-view,
 #page-calendar #cal-month-view{
  width:100% !important;
  min-width:100% !important;
 }

 /* Kanban remains a horizontal workspace, but navigation and scrolling stay usable. */
 #page-kanban > .topbar .burger-btn{display:flex !important;}
 #page-kanban .content{
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
 }
 #page-kanban #kanban-board{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding-bottom:14px !important;
  scrollbar-width:auto;
  scrollbar-color:var(--text-muted) transparent;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
 }
 #page-kanban .kanban-col{scroll-snap-align:start;}

 /* Dashboard KPI cards: 3 x 2 instead of six squeezed cards. */
 #page-dashboard .dashboard-kpi-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
 }
 #page-dashboard > .content{
  min-width:0 !important;
  overflow:auto !important;
 }

 /* Orders: one contained table scroller and compact, wrapping controls. */
 #page-orders > .content{
  height:calc(100dvh - 56px) !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
 }
 #page-orders #orders-filter-bar{
  flex:0 0 auto !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
 }
 #page-orders #orders-table-view{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
 }
 #page-orders #orders-table-view .table-wrap{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
 }
 #page-orders #orders-table{min-width:1500px !important;}
 #page-orders .order-money-edit{
  min-width:40px !important;
  min-height:40px !important;
 }
#page-orders .col-filter-btn{
 position:relative;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  border-radius:6px;
}
 #page-orders .col-filter-btn::before{
  content:"";
  position:absolute;
  inset:-9px;
 }

 /* Client and service workspaces must consume the full tablet canvas. */
 #page-clients > .content,
 #page-services > .content{
  min-width:0 !important;
  max-width:100% !important;
 }
 #page-clients .clients-board-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
 }
 #page-services .svc-layout,
 #page-services .svc-content,
 #page-services .svc-grid{
  min-width:0 !important;
  max-width:100% !important;
 }

 /* Fixed calendar actions occupy separate safe-area lanes. */
 #page-calendar .cal-mobile-export-btn{
  right:14px !important;
  bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
 }
 #page-calendar #cal-block-panel{
  left:12px !important;
  right:12px !important;
  bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;
  max-width:calc(100vw - 24px) !important;
  transform:none !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
 }
 .toast{
  top:70px !important;
  right:14px !important;
  bottom:auto !important;
  max-width:calc(100vw - 28px) !important;
  white-space:normal;
 }
}

@media (max-width:900px){
 /* Finance and Settings use horizontal section navigation in portrait. */
 #page-finance > .finance-shell,
 #page-settings > .settings-shell{
  height:calc(100dvh - 56px) !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }
 #page-finance .finance-subnav,
 #page-settings .settings-subnav{
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  flex:0 0 52px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:5px !important;
  padding:7px 10px !important;
  border-right:0 !important;
  border-bottom:1px solid var(--border) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
 }
 /* Beat legacy direct-child tablet rules that force every first child back
    into a vertical column. */
 #main #page-finance > .finance-shell > .finance-subnav,
 #main #page-settings > .settings-shell > .settings-subnav{
  flex-direction:row !important;
  justify-content:flex-start;
 }
 #page-finance .finance-subnav::-webkit-scrollbar,
 #page-settings .settings-subnav::-webkit-scrollbar{display:none;}
 #page-finance .finance-subnav > *,
 #page-settings .settings-subnav > *{flex:0 0 auto !important;}
 #page-finance .finance-subnav > div,
 #page-settings .settings-subnav > div{display:none !important;}
 #page-finance .finance-subnav .settings-nav-btn,
 #page-settings .settings-subnav .settings-nav-btn{
  width:auto !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 12px !important;
  white-space:nowrap !important;
 }
 #page-finance .finance-content,
 #page-settings .settings-content{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:14px !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
 }
 #finance-section-debts .debt-calendar-block{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
 }
 #finance-section-debts .debt-calendar-filters,
 #finance-section-debts #debt-calendar,
 #finance-section-debts .debt-calendar-grid{
  width:100% !important;
  min-width:700px !important;
 }
 #finance-section-debts .debt-calendar-event{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
 }

 #page-orders #orders-filter-bar{
  display:flex !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
 }
 #page-orders #orders-summary{
  order:20 !important;
  width:100% !important;
  margin-left:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
 }
 #page-orders #orders-summary > *{min-width:0 !important;width:auto !important;}
}

@media (max-width:768px){
 #page-calendar > .topbar + div{padding-right:8px !important;}
 #page-calendar .cal-title-text{min-width:150px !important;}
 #page-calendar #cal-view-btns{display:flex !important;}

 #page-kanban .content{padding:12px !important;}
 #page-kanban .kanban-col{
  width:min(78vw,300px) !important;
  min-width:min(78vw,300px) !important;
  flex-basis:min(78vw,300px) !important;
 }

 #page-dashboard .content{padding:12px !important;}
 #page-dashboard #orders-analytics-view{padding-top:4px !important;}

 #page-services .svc-layout{
  grid-template-columns:200px minmax(0,1fr) !important;
 }

 .btn,
 .btn-logout,
 .burger-btn,
 .icon-btn,
 .cal-nav-btn,
 .filter-btn,
 .client-filter-btn,
 .settings-nav-btn{
  min-height:40px;
 }
}

@media (max-width:699px){
 #page-clients .clients-board-grid{grid-template-columns:1fr !important;}
 #page-dashboard .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
 #page-orders #orders-summary{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
 #page-services .svc-layout{grid-template-columns:1fr !important;}
}