/* =====================================================================
   V6.8 responsive/layout correction — 2026-09-03
   Requested changes:
   - New Case action belongs in topbar on desktop
   - topbar stays inside the app/content boundary (no full viewport bleed)
   - document-style I-MODE logo belongs in sidebar; module header has no logo
   - remove duplicate dashboard mobile hero
   - mobile KPI/icon collections use two columns, except Settings
   ===================================================================== */

html,body{max-width:100%;overflow-x:hidden!important}
body:not(.customer-portal-mode)::before{display:none!important;content:none!important}
.app-shell,.main,.v68-topbar,.v68-global-hero{max-width:100%;box-sizing:border-box}

/* ---------- Top bar ---------- */
.v68-topbar{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.v68-topbar-left{flex:0 1 auto!important;min-width:0!important}
.v68-topbar-actions{
  flex:1 1 auto!important;
  min-width:0!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.v68-topbar-actions>*{flex:0 0 auto;min-width:0}
.v68-top-accept{
  min-height:40px!important;
  height:40px!important;
  padding:8px 14px!important;
  border-radius:13px!important;
  font-size:11px!important;
  line-height:1.08!important;
  white-space:nowrap!important;
}
.v68-topbar .search-btn{min-width:150px!important;width:180px!important;max-width:190px!important}
.v68-topbar .topbar-user-card{max-width:210px!important;min-width:180px!important}

/* ---------- Module header ---------- */
.v68-global-hero{
  justify-content:flex-start!important;
  min-height:98px!important;
  padding:17px 22px!important;
}
.v68-hero-main{width:100%!important;gap:0!important;min-width:0!important}
.v68-hero-copy{padding-left:16px!important;max-width:min(850px,100%)!important}
.v68-hero-copy::before{left:0!important;top:2px!important;height:58px!important}
.v68-global-hero h2{margin:0 0 5px!important}
.v68-global-hero .v68-global-logo,.v68-global-hero .v68-hero-actions{display:none!important}

/* ---------- Sidebar logo: use the compact document-logo presentation ---------- */
.brand-logo-shell{
  min-height:82px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.brand-logo-shell .brand-logo{
  width:auto!important;
  max-width:155px!important;
  height:72px!important;
  object-fit:contain!important;
  border-radius:0!important;
  filter:drop-shadow(0 3px 8px rgba(2,24,78,.18))!important;
}

/* Legacy duplicate mobile hero must never return even if old media CSS matches. */
#page-dashboard>.hero-mobile,.hero-mobile.hero-digital{display:none!important}

/* ---------- Desktop/intermediate widths: keep topbar in one clean line ---------- */
@media (min-width:1181px){
  .v68-topbar{flex-wrap:nowrap!important}
}
@media (min-width:901px) and (max-width:1180px){
  .v68-topbar{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important}
  .v68-topbar .search-btn{display:none!important}
  .v68-topbar .font-quick-btn{display:none!important}
  .v68-topbar .topbar-user-card{min-width:155px!important;max-width:175px!important}
  .v68-top-accept{padding-inline:11px!important}
}
@media (min-width:901px) and (max-width:1030px){
  .v68-topbar .topbar-user-card{display:none!important}
}

/* ---------- Mobile/tablet header ---------- */
@media (max-width:900px){
  .main{padding-left:8px!important;padding-right:8px!important}
  .v68-topbar{
    margin:0!important;
    width:100%!important;
    border-radius:0 0 16px 16px!important;
    overflow:hidden!important;
  }
  .v68-top-accept{display:none!important} /* center + button in bottom nav is the mobile New Case action */
  .v68-global-hero{
    margin:8px 0 12px!important;
    border-radius:18px!important;
    min-height:96px!important;
    padding:14px 15px!important;
  }
  .v68-hero-main{display:block!important;width:100%!important}
  .v68-hero-copy{padding-left:13px!important;width:100%!important}
  .v68-hero-copy::before{height:50px!important;top:0!important}
}
@media (max-width:520px){
  .v68-global-hero{align-items:center!important;min-height:90px!important}
  .v68-hero-main{display:block!important;grid-template-columns:none!important}
  .v68-hero-copy{padding-left:12px!important}
  .v68-global-hero h2{font-size:16px!important;line-height:1.18!important}
  .v68-global-hero p{font-size:9px!important;line-height:1.35!important;margin-top:3px!important}
}

/* ---------- Mobile two-up KPI/icon layouts (Settings intentionally excluded) ---------- */
@media (max-width:640px){
  #page-dashboard>.metric-grid,
  #page-customers>.module-kpi-grid,
  #page-qc>.module-kpi-grid,
  #page-petty-cash>.module-kpi-grid,
  #page-spare-parts>.module-kpi-grid,
  #page-warranty>.module-kpi-grid,
  #page-documents>.doc-category-grid,
  #page-reports>.report-grid,
  #page-field-service>.field-kpi-grid,
  #page-onsite .v68-price-result-grid,
  #page-technicians .team-summary-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #page-dashboard>.metric-grid{
    margin-top:0!important;
    padding:8px!important;
    border-radius:18px!important;
  }
  #page-dashboard .metric-card{min-width:0!important;padding:10px 6px!important}
  #page-dashboard .metric-card small{font-size:9px!important;line-height:1.25!important}
  #page-dashboard .metric-card strong{font-size:22px!important}
  #page-dashboard .metric-icon{width:39px!important;height:39px!important}

  #page-customers .module-kpi,
  #page-warranty .module-kpi{
    min-width:0!important;
    padding:10px!important;
    gap:7px!important;
  }
  #page-customers .module-kpi .kpi-ico,
  #page-warranty .module-kpi .kpi-ico{width:40px!important;height:40px!important;flex:0 0 40px!important;font-size:13px!important}
  #page-customers .module-kpi small,
  #page-warranty .module-kpi small{font-size:9px!important;line-height:1.25!important}
  #page-customers .module-kpi b,
  #page-warranty .module-kpi b{font-size:21px!important}

  #page-qc .module-kpi-card,
  #page-petty-cash .module-kpi-card,
  #page-spare-parts .module-kpi-card{min-width:0!important;padding:11px!important;min-height:82px!important}
  #page-qc .module-kpi-card small,
  #page-petty-cash .module-kpi-card small,
  #page-spare-parts .module-kpi-card small{font-size:9.5px!important;line-height:1.25!important}
  #page-qc .module-kpi-card b,
  #page-petty-cash .module-kpi-card b,
  #page-spare-parts .module-kpi-card b{font-size:23px!important}

  #page-documents .doc-category-card{min-width:0!important;padding:10px!important;min-height:104px!important}
  #page-documents .doc-category-card span{width:34px!important;height:34px!important}
  #page-documents .doc-category-card b{font-size:10px!important;line-height:1.25!important;overflow-wrap:anywhere}
  #page-documents .doc-category-card small{font-size:8.5px!important}

  #page-reports .report-card{min-width:0!important;padding:11px!important}
  #page-reports .report-card span{font-size:20px!important}
  #page-reports .report-card b{font-size:10px!important;line-height:1.25!important}
  #page-reports .report-card strong{font-size:24px!important}
  #page-reports .report-card small{font-size:8.5px!important}

  /* QC action pair requested in the screenshot. */
  #page-qc>.plain-module-intro .button-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  #page-qc>.plain-module-intro .button-row>*{width:100%!important;min-width:0!important;margin:0!important}

  /* Keep module action pairs tidy where two actions exist. */
  #page-customers>.module-action-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #page-customers>.module-action-row>*{width:100%!important;min-width:0!important}

  /* Do not modify Settings responsive grid in this release. */
  #page-settings .settings-card-grid{ /* intentionally inherits existing V6.8/V6.7.1 rules */ }
}

/* Very narrow phones still keep the pair layout, but shrink spacing rather than falling to one column. */
@media (max-width:390px){
  #page-dashboard>.metric-grid,
  #page-customers>.module-kpi-grid,
  #page-qc>.module-kpi-grid,
  #page-petty-cash>.module-kpi-grid,
  #page-spare-parts>.module-kpi-grid,
  #page-warranty>.module-kpi-grid,
  #page-documents>.doc-category-grid,
  #page-reports>.report-grid,
  #page-field-service>.field-kpi-grid{
    gap:6px!important;
  }
  #page-customers .module-kpi,#page-warranty .module-kpi{padding:8px!important}
  #page-documents .doc-category-card{padding:8px!important}
}