/* r56 — tablet/desktop density correction. Phone layout intentionally unchanged. CI retry after release-version synchronization. */
@media (min-width: 681px){
  /* Dashboard greeting: lower visual weight on tablet/desktop. */
  body.shell-app #todayHeroCard{
    min-height:0!important;
    padding:22px 26px!important;
    border-radius:24px!important;
  }
  body.shell-app #todayHeroCard .hero-ecosystem{
    min-height:0!important;
    gap:14px!important;
  }
  body.shell-app #todayHeroCard .hero-greeting-zone{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr)!important;
    grid-template-areas:"top weather" "greeting weather" "action alert"!important;
    column-gap:28px!important;
    row-gap:8px!important;
    align-items:center!important;
  }
  body.shell-app #todayHeroCard .hero-card-topline{grid-area:top!important;min-height:0!important;margin:0!important}
  body.shell-app #todayHeroCard .today-greeting-first{grid-area:greeting!important}
  body.shell-app #todayHeroCard #todayGreeting{font-size:clamp(30px,3.4vw,44px)!important;line-height:.98!important;margin:2px 0 6px!important;max-width:560px!important}
  body.shell-app #todayHeroCard #todayMomentCopy{font-size:14px!important;line-height:1.35!important;max-width:560px!important}
  body.shell-app #todayHeroCard #todayHeroAction{grid-area:action!important;width:min(100%,360px)!important;min-height:48px!important;margin:8px 0 0!important;border-radius:15px!important}
  body.shell-app #todayHeroCard .weather-brief{grid-area:weather!important;width:100%!important;max-width:390px!important;margin:0!important;padding:14px 16px!important;justify-self:end!important}
  body.shell-app #todayHeroCard .hero-weather-alert{grid-area:alert!important;width:100%!important;max-width:390px!important;margin:0!important;justify-self:end!important}

  /* Operational pages should use the tablet canvas, not a narrow phone column. */
  body.shell-app #appShell .view[data-page="supplies"],
  body.shell-app #appShell .view[data-page="time"],
  body.shell-app #appShell .view[data-page="route"]{
    width:min(100%,1080px)!important;
    max-width:1080px!important;
    margin-inline:auto!important;
  }
  body.shell-app #appShell .view[data-page="supplies"]>.section-intro,
  body.shell-app #appShell .view[data-page="time"]>.section-intro,
  body.shell-app #appShell .view[data-page="route"]>.section-intro{
    width:100%!important;
    max-width:none!important;
    margin:0 0 18px!important;
  }
  body.shell-app #appShell .view[data-page="supplies"] .metric-grid.compact{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.shell-app #appShell .view[data-page="supplies"] .metric-card{min-height:122px!important;padding:18px!important}
  body.shell-app #appShell .view[data-page="supplies"] .supplies-grid{
    width:100%!important;max-width:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.shell-app #appShell .view[data-page="time"] #activeTimerWrap,
  body.shell-app #appShell .view[data-page="time"] .table-card{width:100%!important;max-width:none!important}
  body.shell-app #appShell .view[data-page="time"] .table-card{min-height:180px!important}
  body.shell-app #appShell .view[data-page="route"] .route-layout{
    width:100%!important;max-width:none!important;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important;
    gap:16px!important;
  }
}
@media (min-width: 1100px){
  body.shell-app #todayHeroCard{padding:20px 28px!important}
  body.shell-app #todayHeroCard #todayGreeting{font-size:38px!important}
}


/* r57 — tablet dashboard composition fix.
   The hero DOM has one ecosystem child, so tablet must not reserve an empty
   second ecosystem column. Keep phone rules untouched. */
@media (min-width:681px) and (max-width:1100px){
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-ecosystem{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:0!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-greeting-zone{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr)!important;
    column-gap:22px!important;
    row-gap:6px!important;
    align-items:center!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard{
    min-height:0!important;
    padding:18px 20px!important;
    border-radius:24px!important;
    margin-bottom:16px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayGreeting{
    max-width:520px!important;
    font-size:clamp(30px,4.2vw,38px)!important;
    line-height:.96!important;
    margin:2px 0 5px!important;
    text-wrap:balance!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayMomentCopy{
    max-width:500px!important;
    font-size:12px!important;
    line-height:1.34!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayHeroAction{
    width:min(100%,320px)!important;
    min-height:44px!important;
    margin:7px 0 0!important;
    padding:9px 14px!important;
    border-radius:14px!important;
    font-size:12px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-brief{
    width:100%!important;
    max-width:280px!important;
    min-height:94px!important;
    padding:12px 13px!important;
    border-radius:18px!important;
    justify-self:end!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-weather-alert{
    width:100%!important;
    max-width:280px!important;
    padding:8px 10px!important;
    border-radius:13px!important;
    justify-self:end!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-clock{
    min-height:42px!important;
    padding:7px 10px!important;
  }
}

@media (min-width:681px) and (max-width:860px){
  /* Portrait tablet: use the width. No phone-like empty columns or oversized cards. */
  body.shell-app #appShell [data-page="today"] .dashboard-quick-access{
    margin:0 0 16px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-section-head{
    margin:0 2px 8px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-section-head h3{
    font-size:18px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:9px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-card{
    min-height:96px!important;
    padding:11px!important;
    border-radius:18px!important;
    gap:6px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-icon{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-icon svg{
    width:18px!important;
    height:18px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-card strong{
    font-size:12px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-card small{
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-quick-arrow{
    right:9px!important;
    bottom:8px!important;
    width:24px!important;
    height:24px!important;
    font-size:15px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-panel{
    margin-bottom:16px!important;
    padding:14px!important;
    border-radius:20px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-panel .panel-head{
    margin-bottom:9px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-panel .panel-head h3{
    font-size:18px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-list.dashboard-attention-grid{
    gap:8px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-list.dashboard-attention-grid .attention-summary-card{
    min-height:96px!important;
    padding:11px!important;
    border-radius:16px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-summary-count{
    font-size:23px!important;
  }
  body.shell-app #appShell [data-page="today"] .growth-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:0!important;
    margin-bottom:16px!important;
  }
  body.shell-app #appShell [data-page="today"] .growth-grid .schedule-panel{
    width:100%!important;
    max-width:none!important;
    padding:14px!important;
    border-radius:20px!important;
  }
  body.shell-app #appShell [data-page="today"] .growth-grid .schedule-panel .panel-head h3{
    font-size:18px!important;
  }
}


/* r59 — services tablet usability: compact rows + visible creation actions. */
@media (min-width:681px) and (max-width:1100px){
  body.shell-app #appShell [data-page="services"] #servicesGrid.service-catalog-groups{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:start!important;
  }
  body.shell-app #appShell [data-page="services"] .service-type-group{
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
  }
  body.shell-app #appShell [data-page="services"] .service-type-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:max-content!important;
    align-content:start!important;
    gap:9px!important;
  }
  body.shell-app #appShell [data-page="services"] details.service-catalog-card{
    min-height:0!important;
    height:auto!important;
    align-self:start!important;
  }
  body.shell-app #appShell [data-page="services"] .service-row-main{
    min-height:76px!important;
    height:auto!important;
  }
  body.shell-app #appShell [data-page="services"] .service-add-card{
    grid-column:1/-1!important;
    min-height:72px!important;
    height:auto!important;
  }
  body.shell-app #appShell [data-page="services"]>.section-intro .section-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    justify-content:flex-end!important;
  }
  body.shell-app #appShell [data-page="services"]>.section-intro .section-actions button{
    min-height:42px!important;
    padding:9px 13px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
}
body.shell-app .service-editor-form .service-base-price-field{
  padding:12px!important;
  border:1px solid rgba(25,25,25,.08)!important;
  border-radius:14px!important;
  background:#fbfaf7!important;
}
body.shell-app .service-editor-form .service-base-price-field small{
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:500!important;
}
body.shell-app .service-editor-form [data-service-base-price-wrap][hidden]{
  display:none!important;
}


/* r60 tablet + laptop language access */
@media (min-width:681px){
  body.shell-app #languageBtn{display:inline-grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
  body.shell-app #languageBtn .top-icon{display:inline!important;}
  body.shell-app .sidebar-language-btn{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
  .language-menu{max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
}
@media (min-width:681px) and (max-width:1100px){
  body.shell-app #languageBtn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;}
  body.shell-app #languageBtn .top-label{display:none!important;}
  body.shell-app #languageBtn .top-icon{font-size:11px!important;font-weight:900!important;}
}

/* r76 — Keep tablet/laptop navigation anchored while the workspace scrolls.
   The 1101–1199px desktop rule previously gave the sidebar 280px but its
   grid track only 220px. Match the track and the sidebar at every width.
   Phones (<=860px) retain their existing slide-out drawer. */
@media (min-width:861px){
  body.shell-app #appShell{
    --tle-fixed-sidebar-width:220px;
    grid-template-columns:var(--tle-fixed-sidebar-width) minmax(0,1fr)!important;
  }
  body.shell-app #appShell>#sidebar.sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--tle-fixed-sidebar-width)!important;
    min-width:var(--tle-fixed-sidebar-width)!important;
    max-width:var(--tle-fixed-sidebar-width)!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    transform:none!important;
  }
  body.shell-app #appShell>.main{
    grid-column:2!important;
    min-width:0!important;
    max-width:100%!important;
  }
}
@media (min-width:1200px){
  body.shell-app #appShell{--tle-fixed-sidebar-width:280px;}
}

/* Desktop workspace: centered welcome, actionable compact overview. */
@media(min-width:1101px){
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell>.main{padding:0 30px 32px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell .view[data-page="today"].active{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)!important;gap:18px!important;max-width:1500px!important;margin-inline:auto!important;align-items:start!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell .view[data-page="today"]> *{min-width:0!important;margin-bottom:0!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell .view[data-page="today"]>:is(#firstWinCard,#todayHeroCard,.dashboard-quick-access,.money-week-head,#businessPulse,.growth-lower,.presence-panel){grid-column:1/-1!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell .view[data-page="today"] #todayHeroCard{padding:22px 28px!important;min-height:0!important;width:100%!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-ecosystem{display:block!important;width:100%!important;min-height:0!important;max-width:none!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-greeting-zone{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"top" "greeting" "action" "weather" "alert" "route"!important;justify-items:center!important;gap:10px!important;width:100%!important;text-align:center!important;padding:0!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-card-topline{display:flex!important;justify-content:center!important;align-items:center!important;gap:20px!important;width:auto!important;margin:0!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-sky-badge{position:relative!important;inset:auto!important;width:58px!important;height:58px!important;flex:0 0 58px!important;transform:none!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .today-greeting-first{width:100%!important;text-align:center!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard #todayGreeting{max-width:800px!important;margin:0 auto 7px!important;padding:0!important;font-size:clamp(28px,2.4vw,38px)!important;line-height:1.12!important;text-wrap:balance}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard #todayMomentCopy{max-width:720px!important;margin:0 auto!important;font-size:14px!important;line-height:1.45!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard #todayHeroAction{justify-self:center!important;margin:0!important;width:230px!important;min-height:44px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-brief{justify-self:center!important;max-width:390px!important;width:100%!important;min-height:0!important;margin:0!important;padding:10px 14px!important;text-align:left!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-temp-row strong{font-size:30px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-weather-alert{justify-self:center!important;max-width:500px!important;margin:0!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-route-chip{grid-area:route!important;position:static!important;justify-self:center!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-card{min-height:92px!important;padding:15px!important;border-radius:16px!important;grid-template-columns:36px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:5px 10px!important;align-content:center!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-icon{grid-row:1/3!important;width:36px!important;height:36px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-card strong{font-size:14px!important;padding-right:10px}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-card small{font-size:11px!important;padding-right:10px}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .dashboard-quick-arrow{right:9px!important;bottom:12px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .attention-panel{grid-column:2!important;grid-row:3!important;padding:18px!important;min-height:0!important;border-radius:18px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .growth-grid{grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .schedule-panel{padding:18px!important;min-height:160px!important;border-radius:18px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .capacity-card{padding:16px 18px!important;min-height:0!important;border-radius:18px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .attention-list.dashboard-attention-grid{grid-template-columns:1fr!important;gap:8px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .attention-summary-card{min-height:68px!important;grid-template-columns:34px minmax(0,1fr) 40px!important;grid-template-areas:"icon title count" "icon copy count"!important;align-content:center!important;padding:12px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .attention-summary-card small{margin:0!important;font-size:11px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .attention-summary-count{align-self:center!important;font-size:26px!important;text-align:right}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] #businessPulse{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .pulse-card{min-height:116px!important;padding:18px!important;border-radius:18px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] .next-move-panel{grid-column:1/-1!important;min-height:0!important;padding:18px!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] :is(.dashboard-quick-card,.attention-summary-card,.pulse-card){cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] :is(.dashboard-quick-card,.attention-summary-card,.pulse-card):hover{transform:translateY(-2px);box-shadow:0 8px 20px #19191912!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] :is(button,[role="button"]):focus-visible{outline:3px solid #1479e6!important;outline-offset:3px}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"]:has(>.attention-panel[hidden]) .growth-grid{grid-column:1/-1!important}
 html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"]:has(>#firstWinCard:not([hidden])) :is(.attention-panel,.growth-grid){grid-row:4!important}

}
@media(prefers-reduced-motion:reduce){html:not([data-dashboard-preview="bento"]) body.shell-app #appShell [data-page="today"] :is(.dashboard-quick-card,.attention-summary-card,.pulse-card){transition:none!important}}

/* r78 — Every internal workspace view keeps the desktop navigation.
   A responsive drawer must not leave its hidden state behind on wider screens. */
@media (min-width:861px){
  html body.shell-app #appShell:not([hidden])>#sidebar.sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    -webkit-transform:none!important;
    translate:none!important;
    z-index:45!important;
    width:var(--tle-fixed-sidebar-width)!important;
    min-width:var(--tle-fixed-sidebar-width)!important;
    max-width:var(--tle-fixed-sidebar-width)!important;
  }
  html body.shell-app #appShell:not([hidden])>.main{
    grid-column:2!important;
    min-width:0!important;
  }
}