/* UpTime Invoice Pro V17.12.2 — app-responsive.css
   Responsive/mobile/print production guardrails and shell stabilization.
   Cascade segment 2213-2494; keep load order unchanged. */
/* V16.6 Final Mobile Polish Pro
   Mobile-first finish pass: consistent spacing, action grids, detail views, public docs, and QA pages.
   No database, PHP, Supabase, cron, or business logic changes.
*/
:root{
  --app-gutter:18px;
  --app-gutter-sm:12px;
  --card-pad:18px;
  --card-pad-sm:14px;
  --touch:44px;
}
.main,.panel,.glass,.docCard,.clientDetailShell,.qaShell,.manualShell,.releaseShell{min-width:0}
.panel,.metric,.projectCard,.portalItemCard,.clientPortfolioRow,.docListRow,.projectPortfolioRow{overflow-wrap:anywhere}
.muted,p,small,span,b,strong,h1,h2,h3{max-width:100%}
.actions,.docActions,.topActions,.clientDetailHeroActions,.documentDetailActions,.projectDetailActions,.releaseActions,.manualHeroActions,.qaRunnerActions{row-gap:8px}
.actions button,.actions a,.docActions button,.docActions a,.topActions button,.topActions a{min-height:var(--touch)}
.tableWrap{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.35) transparent}
.tableWrap::-webkit-scrollbar{height:8px;width:8px}.tableWrap::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:999px}.tableWrap::-webkit-scrollbar-track{background:transparent}

/* Tablet discipline */
@media(max-width:1180px){
  .app{gap:14px;padding:14px}
  .main{gap:14px}
  .panel{padding:17px;border-radius:22px}
  .grid,.miniStats,.proofGrid,.projectGrid{gap:12px}
  .metric strong{font-size:clamp(22px,3.1vw,30px)}
  .top{padding:17px 18px}
  .top h2{font-size:clamp(24px,3vw,32px)}
}

/* Mobile app shell */
@media(max-width:1000px){
  html,body,#root{width:100%;max-width:100%;overflow-x:hidden!important}
  body{background:radial-gradient(circle at 0 0,rgba(37,214,162,.16),transparent 30%),radial-gradient(circle at 100% 0,rgba(96,165,250,.12),transparent 34%),linear-gradient(180deg,#07101f,#050814 64%)}
  .mobileTop{min-height:62px;padding:10px var(--app-gutter-sm)!important;border-radius:0 0 22px 22px!important}
  .mobileMenuBtn{width:42px!important;height:42px!important;min-width:42px!important;border-radius:15px!important}
  .mobileTop .brandFree{flex:1;min-width:0}.mobileTop .brandFree>div{min-width:0}
  .mobileTop .brandFree strong{font-size:14px!important;line-height:1.05!important}.mobileTop .brandFree span{font-size:10.5px!important;max-width:100%}
  .app{padding:10px!important;display:block!important}
  .main{padding:0!important;margin-top:10px!important;gap:12px!important;align-content:start!important}
  .side{top:10px!important;left:10px!important;bottom:10px!important;width:min(310px,calc(100vw - 20px))!important;border-radius:24px!important;padding:14px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .side .brandFree{padding-bottom:8px!important;border-bottom:1px solid rgba(255,255,255,.075)!important}
  .side .nav{display:grid!important;gap:7px!important;flex:1 1 auto!important;overflow:auto!important;padding-right:1px!important;scrollbar-width:none!important}.side .nav::-webkit-scrollbar{display:none!important}
  .side .nav button{min-height:42px!important;padding:10px 12px!important;border-radius:15px!important;font-size:13.5px!important;line-height:1!important;box-shadow:none!important}
  .side #logout{min-height:42px!important;border-radius:15px!important;margin-top:4px!important}
  .side .footer{display:block!important;font-size:10.5px!important;line-height:1.35!important;margin:0!important;padding-top:8px!important;border-top:1px solid rgba(255,255,255,.075)!important;color:#8799b7!important}
}

/* Mobile content rhythm */
@media(max-width:760px){
  :root{--card-pad:14px;--card-pad-sm:12px;--touch:44px}
  .panel,.glass{border-radius:20px!important}
  .panel{padding:var(--card-pad)!important}
  .grid,.two,.split,.miniStats,.proofGrid,.projectGrid,.paymentActionGrid,.serviceStats,.clientDetailKpis,.releaseStats,.releaseChecklist,.qaRunnerStats,.qaRunnerFields,.qaRunnerGrid{grid-template-columns:1fr!important;gap:10px!important}
  .toolbar,.sectionHead,.cardHead,.clients360LibraryHead,.releaseCardHead,.manualCardHead,.qaCardHead{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:10px!important}
  .toolbar>*{min-width:0!important}.toolbar .searchBox,.searchBox{width:100%!important;max-width:none!important}
  h1{font-size:clamp(28px,9.5vw,36px)!important;line-height:1.02!important;letter-spacing:-.055em!important}
  h2{font-size:clamp(22px,7.6vw,28px)!important;line-height:1.05!important;letter-spacing:-.045em!important}
  h3{font-size:clamp(18px,5.8vw,22px)!important;line-height:1.1!important}
  .eyebrow{font-size:10px!important;letter-spacing:.12em!important}
  .muted{font-size:13px!important;line-height:1.42!important}
  input,select,textarea{min-height:44px!important;border-radius:14px!important;font-size:16px!important}
  textarea{line-height:1.38!important}
  button,.button,a.tiny,a.ghost,a.success,a.primary,.tiny{min-height:var(--touch)!important;border-radius:15px!important;white-space:normal!important;text-align:center!important;line-height:1.12!important}
  .tiny{padding:10px 12px!important;font-size:12px!important}
  .actions,.docActions,.topActions,.clientDetailHeroActions,.documentDetailActions,.projectDetailActions,.releaseActions,.manualHeroActions,.qaRunnerActions,.proofReviewActions,.serviceActions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;justify-content:stretch!important}
  .actions>*,.docActions>*,.topActions>*,.clientDetailHeroActions>*,.documentDetailActions>*,.projectDetailActions>*,.releaseActions>*,.manualHeroActions>*,.qaRunnerActions>*,.proofReviewActions>*,.serviceActions>*{width:100%!important;min-width:0!important}
  .badge,.subStatus,.catPill{max-width:100%;white-space:normal!important;text-align:center!important;justify-content:center!important;line-height:1.15!important}
  .metric{min-height:auto!important;padding:14px!important;border-radius:18px!important}.metric strong{font-size:clamp(23px,8vw,31px)!important}.metric small{font-size:11px!important}
  .miniStats div,.proofMeta div,.projectMeta div,.portalInfoGrid div{padding:12px!important;border-radius:16px!important}
  .tableWrap{border:0!important;overflow:visible!important}.tableWrap table{min-width:0!important}
  .toast{left:10px!important;right:10px!important;bottom:10px!important;max-width:none!important;border-radius:18px!important}
}

/* Clean compact list rows on mobile */
@media(max-width:760px){
  .clientPortfolioRow,.docListRow,.projectPortfolioRow{grid-template-columns:1fr!important;gap:9px!important;padding:13px!important;border-radius:19px!important;min-height:auto!important}
  .clientPortfolioIdentity,.docListMain,.projectPortfolioMain{align-items:center!important;gap:10px!important}
  .clientPortfolioIdentity strong,.docListMain strong,.projectPortfolioMain strong{font-size:14.5px!important;white-space:normal!important;line-height:1.15!important}
  .clientPortfolioIdentity small,.docListMain small,.projectPortfolioMain small{font-size:11.5px!important;white-space:normal!important;line-height:1.3!important;max-width:100%!important}
  .clientPortfolioStatus,.docListStatus,.projectPortfolioStatus{justify-content:flex-start!important;display:flex!important;gap:8px!important;flex-wrap:wrap!important}
  .docListMeta,.projectPortfolioMeta{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;padding:9px 10px!important;border-radius:14px!important;width:100%!important}
  .docListMeta b,.projectPortfolioMeta b{font-size:14px!important;white-space:normal!important;text-align:right!important}
  .docListActions,.projectPortfolioRow>a,.clientOpenBtn{width:100%!important}.docListActions .tiny{width:100%!important}
}

/* Detail pages: client/document/project */
@media(max-width:760px){
  .clientDetailWrap,.documentDetailWrap,.projectDetailWrap,.qaWrap,.manualWrap,.releaseWrap{padding:10px!important;min-height:100vh!important}
  .clientDetailShell,.documentDetailShell,.projectDetailShell,.qaShell,.manualShell,.releaseShell{width:100%!important;border-radius:23px!important;padding:11px!important;gap:11px!important}
  .clientDetailTop,.documentDetailTop,.projectDetailTop{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .clientDetailHero,.documentDetailHero,.projectDetailHero,.qaHero,.manualHero,.releaseHero{grid-template-columns:1fr!important;padding:16px!important;border-radius:22px!important;gap:14px!important}
  .clientDetailIdentity,.documentDetailIdentity,.projectDetailIdentity{align-items:flex-start!important;gap:12px!important;min-width:0!important}
  .clientDetailAvatar,.documentDetailIcon,.projectDetailIcon{width:56px!important;height:56px!important;border-radius:19px!important;font-size:20px!important}
  .clientDetailHero h1,.documentDetailHero h1,.projectDetailHero h1,.qaHero h1,.manualHero h1,.releaseHero h1{font-size:clamp(30px,10vw,38px)!important;line-height:1!important}
  .clientDetailGrid,.documentDetailGrid,.projectDetailGrid,.manualLayout,.releaseGrid,.securityGrid,.securityGrid.two{grid-template-columns:1fr!important;gap:11px!important}
  .clientDetailInfoGrid,.documentDetailSummary,.projectDetailSummary,.portalInfoGrid,.portalInfoGrid.three{grid-template-columns:1fr!important}
  .clientDetailDocCard,.documentDetailDocCard,.projectDetailTask,.projectDetailFile{grid-template-columns:1fr!important;gap:9px!important;padding:12px!important;border-radius:17px!important}
  .clientDetailDocCard b,.documentDetailDocCard b{font-size:16px!important;text-align:left!important}
}

/* Public documents + customer portal final mobile polish */
@media(max-width:760px){
  .docWrap,.docWrap.portalWrap,.publicDocWrap{padding:10px!important;display:block!important}
  .docCard,.portalWrap .docCard,.publicDocShell{padding:16px!important;border-radius:24px!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
  .docHead,.portalWrap .docHead,.publicDocHero{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;text-align:left!important}
  .docHead>div:last-child,.portalBalance,.publicDocTotalPanel{text-align:left!important;justify-items:start!important;align-items:start!important}
  .docTotal,.portalWrap .docTotal,.publicDocTotalPanel strong{font-size:clamp(32px,11vw,42px)!important;line-height:1!important;letter-spacing:-.06em!important}
  .portalMetrics,.publicDocMiniTotals,.publicDocTopGrid,.publicDocTopGrid.compact,.paymentProfileGrid,.paymentIdentityBox{grid-template-columns:1fr!important;gap:10px!important}
  .portalItemCard,.publicDocItemCard,.paymentProfileCard,.payActionCard{border-radius:18px!important;padding:13px!important}
  .portalItemTop,.publicDocSectionHead{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;align-items:start!important}
  .portalOpenBtn,.publicDocPaymentRail .docActions>*{width:100%!important}
  .proofForm .split{grid-template-columns:1fr!important}
}

/* Ultra-small screens */
@media(max-width:390px){
  .mobileTop{padding:9px 10px!important}.mobileMenuBtn{width:40px!important;height:40px!important;min-width:40px!important}
  .panel,.docCard,.publicDocShell{padding:12px!important;border-radius:20px!important}
  h1{font-size:29px!important}h2{font-size:23px!important}h3{font-size:18px!important}
  .brandLogoFree{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex-basis:38px!important}
  .clientDetailAvatar,.documentDetailIcon,.projectDetailIcon{width:50px!important;height:50px!important;border-radius:17px!important}
}

/* Print safety for new operations pages */
@media print{
  .mobileTop,.side,.topActions,.actions,.docActions,.releaseActions,.manualHeroActions,.qaRunnerActions{display:none!important}
  body{background:#fff!important;color:#111827!important}.glass,.panel{box-shadow:none!important;background:#fff!important;color:#111827!important;border-color:#e5e7eb!important}
}

/* V16.9 Production Final Pro
   Final production hardening: consistent wrapping, no surprise overflow,
   cleaner print behavior, and safer card/action alignment across modules. */
:root{
  --ui-card-min: 0;
  --ui-action-gap: 8px;
}
html,body,#root{max-width:100%;}
.main,.panel,.glass,.docCard,.clientDetailShell,.clientDetailWrap,.publicDocShell,.releaseShell,.qaShell,.manualShell{min-width:0;}
.panel *, .glass *, .clientDetailShell *, .publicDocShell *, .releaseShell *, .qaShell *, .manualShell *{min-width:0;}
strong,b,h1,h2,h3,p,span,small,td,th,label,a,button{overflow-wrap:anywhere;}
button,a.tiny,.tiny,.primary,.ghost,.success,.danger{flex-shrink:0;}
.actions,.topActions,.docActions,.clientDetailHeroActions,.documentDetailActions,.releaseActions,.proofReviewActions{gap:var(--ui-action-gap);align-items:center;}
.clientPortfolioRow,.client360Row,.clientDetailDocCard,.documentCard,.invoiceCard,.estimateCard,.projectCard,.proofCard,.portalItemCard{contain:layout paint;}
.clientDetailHero,.documentDetailHero,.projectDetailHero{align-items:stretch;}
.clientDetailHeroActions,.documentDetailActions{align-content:flex-start;}
.clientDetailKpis article strong,.metric strong,.miniStats strong{font-variant-numeric:tabular-nums;}
.tableWrap table{border-spacing:0;}
.tableWrap th,.tableWrap td{overflow-wrap:break-word;}
input,select,textarea{min-width:0;}
textarea{resize:vertical;}
.loading{gap:12px;text-align:center;padding:24px;color:var(--txt);}
.loading:before{content:'';width:26px;height:26px;border-radius:999px;border:3px solid rgba(255,255,255,.16);border-top-color:var(--brand);display:block;animation:uptimeSpin .8s linear infinite;margin:0 auto 10px;}
.appFatalError{min-height:100vh;display:grid;place-items:center;padding:22px;}
.appFatalError .panel{width:min(760px,100%);}
.appFatalError code{display:block;white-space:pre-wrap;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:12px;color:#fecdd3;}
@keyframes uptimeSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){
  .grid,.miniStats,.clientDetailKpis,.documentDetailKpis{gap:10px;}
  .topActions{width:100%;justify-content:flex-start;}
}
@media(max-width:760px){
  h1{letter-spacing:-.045em;}
  .clientDetailHeroActions,.documentDetailActions,.releaseActions,.docActions,.actions{display:grid!important;grid-template-columns:1fr!important;width:100%;}
  .clientDetailHeroActions > *, .documentDetailActions > *, .releaseActions > *, .docActions > *, .actions > *{width:100%;justify-content:center;text-align:center;}
  .clientDetailDocCard{grid-template-columns:1fr!important;}
  .clientDetailDocCard > b{text-align:left!important;}
  .tableWrap{overflow-x:auto;}
  .publicPaymentGrid,.paymentActionGrid,.portalInfoGrid,.portalInfoGrid.three{grid-template-columns:1fr!important;}
  .brandFree span,.brandFree strong{max-width:100%;}
}
@media print{
  body{background:#fff!important;color:#111!important;}
  .side,.mobileTop,.mobileBackdrop,.top,.printbar,.toast,.releaseActions,.qaActions,.actions button,.actions a:not(.printKeep),button{display:none!important;}
  .app,.main,.docWrap,.clientDetailWrap,.publicDocWrap{display:block!important;padding:0!important;margin:0!important;}
  .panel,.glass,.docCard,.clientDetailShell,.publicDocShell{box-shadow:none!important;border-color:#d1d5db!important;background:#fff!important;color:#111!important;}
  a{color:#111!important;text-decoration:none!important;}
}


/* V16.9 Production Final Pro + Restored Premium Boot Loader */
.loading{
  position:fixed!important;
  inset:0!important;
  z-index:9999;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:24px!important;
  min-height:100vh!important;
  color:#eaf7ff!important;
  text-align:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(37,214,162,.20),transparent 22%),
    radial-gradient(circle at 68% 58%,rgba(96,165,250,.13),transparent 28%),
    linear-gradient(135deg,#030711,#08111f 48%,#050814)!important;
}
.loading:before{
  content:''!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:3px solid rgba(255,255,255,.14)!important;
  border-top-color:var(--brand)!important;
  border-right-color:rgba(96,165,250,.75)!important;
  display:block!important;
  animation:uptimeSpin .78s linear infinite!important;
  box-shadow:0 0 28px rgba(37,214,162,.28)!important;
  margin:0!important;
}
.bootLoader:before{content:none!important;display:none!important;}
.bootLoader:after{content:none!important;display:none!important;}
.bootLogo{
  position:relative;
  z-index:1;
  width:clamp(190px,16vw,270px);
  height:auto;
  display:grid;
  place-items:center;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.bootLogo:before{content:none!important;display:none!important;}
.bootLogo img{width:100%;height:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 18px 28px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(37,214,162,.18));}
.bootCopy{position:relative;z-index:1;display:grid;gap:5px;justify-items:center;}
.bootCopy strong{font-size:22px;letter-spacing:-.045em;line-height:1.05;}
.bootCopy span{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);font-weight:950;}
.bootProgress{
  position:relative;
  z-index:1;
  width:min(280px,70vw);
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.28);
}
.bootProgress span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#60a5fa,var(--brand));
  box-shadow:0 0 26px rgba(37,214,162,.55);
  animation:uptimeBootBar 4s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes uptimeBootBar{0%{width:0}100%{width:100%}}
@media(max-width:640px){.bootLogo{width:168px;height:auto}.bootCopy strong{font-size:20px}.bootCopy span{font-size:10.5px;letter-spacing:.12em}.bootProgress{width:min(240px,78vw)}}

/* V16.9 final production guardrails */
.releaseShell .releaseTimeline div:first-child b:after{content:' · Production Final';color:var(--brand);font-weight:950;}