/* ==========================================================================
   LiftOps — Responsive layer
   Mobile-first. Breakpoints:
     <  576  phone (360 / 390 / 430 targets)
     >= 576  large phone
     >= 768  tablet
     >= 992  small desktop  -> operations shell switches to sidebar layout
     >= 1280 desktop
     >= 1600 wide
   ========================================================================== */

/* --------------------------------------------------------------------------
   Very small phones (360px) — protect the layout from overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 379px) {
  :root { --fs-md: 14px; --sp-4: 14px; }
  .hero__card-value { font-size: var(--fs-lg); }
  .hero__card-label { font-size: 9.5px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .auth__roles { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Phone defaults: the operations shell collapses into a mobile layout with
   an off-canvas sidebar. Management still gets cards instead of wide tables.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .osidebar {
    transform: translateX(100%);   /* RTL: off-canvas to the right */
    box-shadow: var(--sh-xl); width: 280px; flex-basis: 280px;
  }
  .osidebar.is-open { transform: translateX(0); }
  .osidebar__backdrop {
    display: block; position: fixed; inset: 0; background: var(--overlay);
    z-index: calc(var(--z-drawer) - 1); animation: fadeIn var(--dur) var(--ease);
  }
  .omain { margin-inline-start: 0; }
  .ocontent { padding: var(--sp-4) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-6)); }
  .otopbar { padding-inline: var(--sp-4); }
  .otopbar__search { display: none; }

  .grid--2, .grid--3, .grid--4, .grid--2-1, .grid--1-2 { grid-template-columns: minmax(0, 1fr); }
  .page-head__title { font-size: var(--fs-xl); }

  /* Desktop tables are unusable on a phone — modules render card lists instead. */
  .only-desktop { display: none !important; }
  .only-mobile  { display: block !important; }

  .ba-compare { grid-template-columns: 1fr; }
  .modal { max-height: 92vh; }
  .audit__row { grid-template-columns: 78px 1fr; }
}

@media (min-width: 992px) {
  .only-desktop { display: block !important; }
  .only-mobile  { display: none !important; }
  .osidebar__backdrop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocontent { padding: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Desktop presentation of the MOBILE shell.
   Customer + technician are phone-first products; on a large screen we frame
   them as a device so demos read correctly instead of stretching to 1920px.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.shell-mobile {
    background:
      radial-gradient(circle at 18% 12%, rgba(36,86,230,.10), transparent 46%),
      radial-gradient(circle at 84% 78%, rgba(18,161,80,.08), transparent 46%),
      var(--bg-alt);
  }
  body.shell-mobile .app {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; padding: var(--sp-6) var(--sp-4);
  }
  body.shell-mobile.has-demobar .app { padding-bottom: calc(var(--demobar-h) + var(--sp-6)); }
  .mshell {
    width: var(--mobile-max); max-width: var(--mobile-max);
    height: min(880px, calc(100dvh - 64px)); min-height: 0;
    border-radius: 30px; overflow: hidden; position: relative;
    box-shadow: var(--sh-xl), 0 0 0 9px #10192C, 0 0 0 11px #26324A;
    background: var(--bg);
  }
  .mshell__main { overflow-y: auto; }
  .mshell__top { border-radius: 0; }
  .bnav {
    position: absolute; inset-inline: 0; inset-block-end: 0; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface);
  }
  /* Inside the device frame the bar sits outside the phone, so the in-frame
     navigation and content do not need to move for it. */
  body.has-demobar .bnav { inset-block-end: 0; }
  body.has-demobar .mshell__main {
    padding-bottom: calc(var(--bottomnav-h) + var(--sp-6));
  }
  body.has-demobar .sticky-cta { inset-block-end: calc(var(--bottomnav-h) + var(--sp-2)); }
  .toast-root { inset-block-end: 96px; }

  /* Device context rail beside the frame */
  .device-note {
    position: fixed; inset-block-start: var(--sp-6); inset-inline-start: var(--sp-6);
    max-width: 260px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7;
  }
}
@media (max-width: 991px) {
  .device-note { display: none; }
}

/* --------------------------------------------------------------------------
   Login split view
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .auth__aside { display: flex; }
  .auth__main { padding: var(--sp-9) var(--sp-8); }
}
@media (max-width: 991px) {
  .auth { flex-direction: column; }
  .auth__main { max-width: 100%; box-shadow: none; min-height: 100dvh; justify-content: flex-start;
    padding-top: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   Wide desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .ocontent { padding: var(--sp-6); }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .ocontent { max-width: 1560px; }
  .kpi-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Print (reports)
   -------------------------------------------------------------------------- */
@media print {
  .osidebar, .otopbar, .bnav, .demobar, .toast-root, .page-head__actions, .filterbar { display: none !important; }
  .omain { margin: 0; }
  .ocontent { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}