/**
 * Portal app phone fit — customer portal + owner/Studio desks.
 * Load last among layout CSS so gutters / type / overflow win.
 */

/* Base: no horizontal scroll, readable text, safe areas */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 900px) {
  body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* Customer portal (index / account) */
  body:not(.drive-exact-live):not(.cc-body) .wrap,
  body[data-studio="portal"] .wrap,
  body.brand-portal:not(.drive-exact-live) .wrap {
    max-width: 100% !important;
    padding: 1rem max(0.85rem, env(safe-area-inset-right)) 2.5rem max(0.85rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }
  body:not(.drive-exact-live) .top,
  body[data-studio="portal"] .top {
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
  }
  body:not(.drive-exact-live) .brand h1,
  body[data-studio="portal"] .brand h1 {
    font-size: 1.05rem !important;
  }
  body:not(.drive-exact-live) .card,
  body[data-studio="portal"] .card {
    padding: 0.95rem 0.9rem !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body:not(.drive-exact-live) .grid2,
  body:not(.drive-exact-live) .grid3,
  body[data-studio="portal"] .grid2 {
    grid-template-columns: 1fr !important;
  }

  /* Forms: 16px inputs prevent iOS zoom; full-width buttons */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn,
  .cc-btn,
  button.btn,
  a.btn {
    min-height: 44px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .row {
    flex-wrap: wrap !important;
    gap: 0.55rem !important;
  }

  /* Login / gate cards */
  #authCard,
  #bizGate,
  .admin-login-gate,
  .login-card,
  .p100-login-card {
    width: min(100%, 28rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Owner / Studio desks */
  body.drive-exact-live.desk-open .float-stage,
  body.drive-exact-live.desk-open .biz-float-stage,
  body.drive-exact-live[data-it-session="1"] .float-stage,
  body.drive-exact-live[data-it-session="1"] .biz-float-stage {
    padding: 0.25rem 0.3rem 0.35rem !important;
  }
  body.drive-exact-live #bizDash.shell,
  body.drive-exact-live #ownerDash.shell {
    border-radius: 10px !important;
  }

  /* Desk bar: tighter, no overflow */
  body.drive-exact-live #bizDash .desk-bar.glass-card,
  body.drive-exact-live #ownerDash .desk-bar.glass-card {
    margin: 0.35rem 0.4rem 0 !important;
    padding: 0.3rem 0.35rem 0.3rem 0.5rem !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    max-width: calc(100% - 0.8rem) !important;
    box-sizing: border-box !important;
  }
  body.drive-exact-live #bizDash .desk-bar__titles,
  body.drive-exact-live #ownerDash .desk-bar__titles {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  body.drive-exact-live #bizDash .desk-bar__titles h1,
  body.drive-exact-live #bizDash .desk-bar__titles #bizTopTitle,
  body.drive-exact-live #ownerDash .desk-bar__titles h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  body.drive-exact-live #bizDash .desk-bar__search,
  body.drive-exact-live #ownerDash .desk-bar__search {
    flex: 1 1 100% !important;
    max-width: none !important;
    order: 3 !important;
  }
  body.drive-exact-live #bizDash .desk-bar .dash-search,
  body.drive-exact-live #ownerDash .desk-bar .dash-search {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* Panel content padding */
  body.drive-exact-live.desk-open:not(.biz-app-full) #bizDash .body.cc-body-area,
  body.drive-exact-live.desk-open:not(.biz-app-full) #bizDash .cc-body-area.body {
    padding: 0.65rem max(0.55rem, env(safe-area-inset-right)) 1.5rem max(0.55rem, env(safe-area-inset-left)) !important;
  }

  /* Cards / feature grids */
  body.drive-exact-live #bizDash .cc-panel-card,
  body.drive-exact-live #bizDash .glass-card,
  body.drive-exact-live #bizDash .feature-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.drive-exact-live #bizDash .feature-grid,
  body.drive-exact-live #bizDash .grid2,
  body.drive-exact-live #bizDash .grid3 {
    grid-template-columns: 1fr !important;
  }

  /* Tables scroll inside panel instead of page */
  body.drive-exact-live table,
  body.cc-body table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Home tiles */
  body.drive-exact-live #bizDash [data-biz-panel="home"] .feature-grid,
  body.drive-exact-live #bizDash .home-tiles,
  body.drive-exact-live #bizDash .cc-tile-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  /* Profile chip: avatar only on very small */
  body.drive-exact-live #bizDash .desk-bar__profile .dash-user-meta,
  body.drive-exact-live #ownerDash .desk-bar__profile .dash-user-meta {
    display: none !important;
  }

  img,
  video {
    max-width: 100% !important;
    height: auto;
  }
  /* Do not collapse help/docs iframes — height is intentional (vh) */
  iframe {
    max-width: 100% !important;
  }
  iframe.biz-help-frame,
  iframe.man-html-frame,
  iframe.man-pdf-frame,
  #bizHelpFrame {
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(62vh, 720px) !important;
    height: min(62vh, 720px) !important;
  }
}

@media (max-width: 420px) {
  body.drive-exact-live #bizDash .desk-bar.glass-card,
  body.drive-exact-live #ownerDash .desk-bar.glass-card {
    margin: 0.25rem 0.3rem 0 !important;
    padding: 0.28rem 0.3rem !important;
  }
  body:not(.drive-exact-live) .wrap,
  body[data-studio="portal"] .wrap {
    padding-left: max(0.7rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.7rem, env(safe-area-inset-right)) !important;
  }
  body.drive-exact-live.desk-open:not(.biz-app-full) #bizDash .body.cc-body-area {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }
}

/* Owner desk welcome modal — fit phone + keep Got it tappable */
.biz-welcome:not([hidden]),
.biz-welcome.is-open:not([hidden]) {
  z-index: 10100 !important;
  pointer-events: auto !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
}
.biz-welcome__card {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.biz-welcome__actions .cc-btn,
#bizWelcomeOk,
#bizWelcomeSettings {
  pointer-events: auto !important;
  min-height: 48px !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
}
@media (max-width: 900px) {
  .biz-welcome:not([hidden]),
  .biz-welcome.is-open:not([hidden]) {
    align-items: flex-end !important;
    padding: 0.65rem max(0.65rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left)) !important;
  }
  .biz-welcome__card {
    max-height: min(84dvh, 32rem) !important;
    width: 100% !important;
  }
}

/* Floating tips — fixed viewport corner; room for multi-line items + controls.
   z-index 10050 keeps tips above desk content so mobile ×/settings receive taps. */
@media (max-width: 900px) {
  body.drive-exact-live #bizDash .biz-glass-tip,
  body[data-page="business"] .biz-glass-tip {
    position: fixed !important;
    right: max(0.65rem, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
    width: min(19.5rem, calc(100vw - 1.3rem)) !important;
    max-width: min(19.5rem, calc(100vw - 1.3rem)) !important;
    z-index: 10050 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__panel,
  body[data-page="business"] .biz-glass-tip__panel {
    max-height: min(48dvh, 22rem) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__close,
  body[data-page="business"] .biz-glass-tip__close,
  body.drive-exact-live #bizDash .biz-glass-tip__settings,
  body[data-page="business"] .biz-glass-tip__settings,
  body.drive-exact-live #bizDash .biz-glass-tip__arrow,
  body[data-page="business"] .biz-glass-tip__arrow {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-width: 2.35rem !important;
    min-height: 2.35rem !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__list,
  body[data-page="business"] .biz-glass-tip__list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__list li,
  body[data-page="business"] .biz-glass-tip__list li {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__list li::before,
  body[data-page="business"] .biz-glass-tip__list li::before {
    top: 0.45rem !important;
    transform: none !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip__foot,
  body[data-page="business"] .biz-glass-tip__foot {
    display: none !important;
  }
  body.drive-exact-live #bizDash .biz-glass-tip-reopen,
  body[data-page="business"] .biz-glass-tip-reopen {
    position: fixed !important;
    right: max(0.65rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* railSolid2 — opaque menu per brand (loads last). Do not hard-code 100 Club navy. */
body.lg-desk .cc-rail,
body.cc-body .cc-rail,
body.drive-exact-live .cc-rail,
body.drive-exact-live #bizDash .cc-rail,
body.drive-exact-live #ownerDash .cc-rail,
body[data-page="admin"] .cc-rail,
body[data-page="business"] .cc-rail {
  background: var(--cc-rail, #0c1016) !important;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, var(--lg-accent, #6d8fb5)) 14%, var(--cc-rail, #0c1016)) 0%,
      var(--cc-rail, #0c1016) 100%
    ) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.lg-desk.theme-light .cc-rail,
body.drive-exact-live.theme-light .cc-rail,
body.theme-light[data-page="business"] .cc-rail,
body.theme-light[data-page="admin"] .cc-rail {
  background: var(--cc-rail, #ffffff) !important;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, var(--lg-accent, #9c6b5e)) 10%, var(--cc-rail, #ffffff)) 0%,
      var(--cc-rail, #ffffff) 100%
    ) !important;
}
body.lg-desk .cc-rail__item,
body.cc-body .cc-rail__item,
body.drive-exact-live .cc-rail__item,
body.drive-exact-live .cc-rail a,
body.drive-exact-live .cc-rail button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  body.drive-exact-live .cc-app,
  body.cc-body .cc-app,
  body.lg-desk .cc-app {
    overflow: visible !important;
  }
  body.drive-exact-live #bizDash .rail.cc-rail,
  body.drive-exact-live #bizDash .cc-rail.rail,
  body.drive-exact-live #ownerDash .rail.cc-rail,
  body.drive-exact-live #ownerDash .cc-rail.rail,
  body.drive-exact-live #ownerDash .cc-rail.admin-nav,
  body[data-page="business"] #bizRail,
  body[data-page="business"] .cc-rail,
  body[data-page="admin"] #adminNavDrawer,
  body[data-page="admin"] .cc-rail,
  body.cc-body .cc-rail {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: min(300px, 86vw) !important;
    height: auto !important;
    max-height: none !important;
    z-index: 10060 !important;
    transform: translate3d(-105%, 0, 0) !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.drive-exact-live.cc-nav-open #bizDash .cc-rail,
  body.drive-exact-live.is-mobile-nav-open #bizDash .cc-rail,
  body[data-page="business"].cc-nav-open .cc-rail,
  body[data-page="business"].is-mobile-nav-open .cc-rail,
  body[data-page="business"] .cc-rail.is-open,
  body[data-page="admin"].admin-nav-open .cc-rail,
  body[data-page="admin"].is-mobile-nav-open .cc-rail,
  body[data-page="admin"] #adminNavDrawer.is-open,
  body.cc-body.cc-nav-open .cc-rail,
  body.cc-body.is-mobile-nav-open .cc-rail,
  body.cc-body.admin-nav-open .cc-rail,
  body.cc-body .cc-rail.is-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10060 !important;
  }
  /* IT MODE: never keep a 16rem rail column on phones (drawer is position:fixed) */
  body[data-page="business"][data-it-session="1"] #bizDash,
  body[data-page="business"][data-it-session="1"] #bizDash.shell,
  body[data-page="business"][data-it-session="1"] #bizDash.biz-shell,
  body[data-page="business"][data-it-session="1"] #bizDash.cc-app {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
}