/* Vividh Health — desktop layout v1
 *
 * Loaded after app.css. Activates at >=1024px.
 * Adds:
 *   - Top nav (replaces app bar; has search/location/cart/avatar for customer)
 *   - 1440px container max-width
 *   - Ops sidebar layout (left rail, content right)
 *   - Multi-column home page (right body sidebar)
 *   - Sticky sidebars for product/cart/checkout
 *   - Hides mobile bottom tab bar
 */

/* Active hide of the mobile-only chrome we don't want at desktop */
@media (min-width: 1024px) {
  /* Hide the mobile bottom tab bar; the new top nav covers it */
  .vh-tabbar { display: none; }

  /* The body padding-bottom we used for the tab bar isn't needed */
  body.vh-body { padding-bottom: 0; }

  /* Default container widens. Pages that want full-bleed override below. */
  .vh-main {
    max-width: 1440px;
    padding: var(--vh-space-6) var(--vh-space-6);
  }
}

/* ============================================================
 * Top nav (desktop only)
 *   Mobile keeps the existing .vh-appbar in app.css.
 * ========================================================== */

.vh-topnav { display: none; }

@media (min-width: 1024px) {
  /* Mobile app bar hides; desktop top nav shows */
  .vh-appbar { display: none; }

  .vh-topnav {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--vh-space-4);
    height: 68px;
    padding: 0 var(--vh-space-6);
    background: var(--vh-glass-bg-strong);
    backdrop-filter: var(--vh-glass-blur-lg);
    -webkit-backdrop-filter: var(--vh-glass-blur-lg);
    border-bottom: 1px solid var(--vh-glass-border);
    transition: background var(--vh-dur-cinematic) var(--vh-ease-soft),
                border-color var(--vh-dur-cinematic) var(--vh-ease-soft);
  }

  .vh-topnav__inner {
    width: 100%; max-width: 1440px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--vh-space-4);
  }

  .vh-topnav__brand {
    display: inline-flex; align-items: center; gap: var(--vh-space-2);
    font-weight: var(--vh-weight-bold);
    color: var(--vh-primary);
    font-size: var(--vh-text-md);
    letter-spacing: var(--vh-tracking-tight);
    flex: 0 0 auto;
  }
  .vh-topnav__brand .vh-brand__mark { width: 32px; height: 30px; }

  /* Persona role badge next to the logo (vendor / partner / ops) */
  .vh-topnav__role {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
    border-radius: var(--vh-radius-pill);
    font-size: var(--vh-text-2xs);
    font-weight: var(--vh-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--vh-tracking-wide);
  }
  .vh-topnav__role--ops     { background: var(--vh-info-50);    color: var(--vh-info); }
  .vh-topnav__role--vendor  { background: var(--vh-secondary-soft); color: var(--vh-gold-700); }
  .vh-topnav__role--partner { background: color-mix(in srgb, var(--vh-product-physio) 18%, transparent); color: #b45309; }

  /* Primary link list (used by vendor/partner; customer uses compact variant) */
  .vh-topnav__links {
    display: flex; align-items: center; gap: var(--vh-space-1);
    flex: 1;
  }
  .vh-topnav__links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    color: var(--vh-text);
    font-size: var(--vh-text-sm);
    font-weight: var(--vh-weight-medium);
    border-radius: var(--vh-radius-sm);
    transition: background var(--vh-dur-fast) var(--vh-ease), color var(--vh-dur-fast) var(--vh-ease);
  }
  .vh-topnav__links a svg {
    width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7;
  }
  .vh-topnav__links a:hover { background: var(--vh-bg-muted); }
  .vh-topnav__links a.is-active {
    background: var(--vh-primary-soft);
    color: var(--vh-primary);
  }
  /* Compact variant when sitting next to a search bar (customer surface). */
  body[data-persona="customer"] .vh-topnav__links { flex: 0 0 auto; }
  /* Hide the inline nav at narrow desktop widths; mobile bottom-tabs cover it. */
  @media (max-width: 1199px) {
    body[data-persona="customer"] .vh-topnav__links { display: none; }
  }

  /* Search bar in the top nav (customer surface) */
  .vh-topnav__search {
    flex: 1 1 480px; max-width: 720px;
  }
  .vh-topnav__search .vh-home__search { box-shadow: none; }

  /* Right cluster (location, cart, avatar) */
  .vh-topnav__right {
    display: flex; align-items: center; gap: var(--vh-space-2);
    flex: 0 0 auto;
  }
  .vh-topnav__right a, .vh-topnav__right button {
    color: var(--vh-text);
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: var(--vh-text-sm);
  }

  .vh-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--vh-bg-elevated);
    border: 1px solid var(--vh-border);
    border-radius: var(--vh-radius-pill);
    color: var(--vh-text);
    font-size: var(--vh-text-sm);
    font-weight: var(--vh-weight-medium);
    transition: background var(--vh-dur-fast) var(--vh-ease), border-color var(--vh-dur-fast) var(--vh-ease);
  }
  .vh-pill:hover { background: var(--vh-bg-muted); border-color: var(--vh-border-strong); }
  .vh-pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }

  /* Cart button + badge */
  .vh-cartbtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--vh-radius-pill);
    color: var(--vh-text);
    transition: background var(--vh-dur-fast) var(--vh-ease);
  }
  .vh-cartbtn:hover { background: var(--vh-bg-muted); }
  .vh-cartbtn svg  { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .vh-cartbtn__badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--vh-secondary);
    color: var(--vh-neutral-900);
    border-radius: var(--vh-radius-pill);
    font-size: 10px; font-weight: var(--vh-weight-bold);
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--vh-bg);
    font-variant-numeric: tabular-nums;
  }

  /* Avatar menu */
  .vh-avatar {
    position: relative;
  }
  .vh-avatar__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vh-primary), var(--vh-green-700));
    color: var(--vh-text-on-brand);
    font-weight: var(--vh-weight-bold);
    font-size: var(--vh-text-xs);
    border: 0; cursor: pointer;
    transition: transform var(--vh-dur-fast) var(--vh-ease), box-shadow var(--vh-dur-fast) var(--vh-ease);
  }
  .vh-avatar__btn:hover { transform: scale(1.05); box-shadow: var(--vh-shadow-1); }

  .vh-avatar__menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 380px;        /* widened so 2-column link grid fits cleanly */
    background: var(--vh-bg-elevated);
    border: 1px solid var(--vh-border);
    border-radius: var(--vh-radius-md);
    box-shadow: var(--vh-shadow-3);
    padding: var(--vh-space-1);
    z-index: 50;
  }
  /* 2-column grid for the icon-link sections. Wrapper keeps the menu
   * full-width sections (header, wallet, sound, ops) intact while the
   * link list itself splits into two columns. */
  .vh-avatar__menu__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  /* A row that should still span the whole grid (e.g. ABHA, since it's
   * an odd item out and reads better full-width with the longer label). */
  .vh-avatar__menu__grid > .vh-avatar__menu__grid__wide {
    grid-column: 1 / -1;
  }
  /* Standard menu rows. Excludes .vh-walletcard, which is also an <a>
   * but has its own display/padding/background and would be flattened
   * into a one-line flex row by these rules. */
  .vh-avatar__menu a:not(.vh-walletcard),
  .vh-avatar__menu > button {
    display: flex; align-items: center; gap: var(--vh-space-2);
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--vh-radius-sm);
    background: transparent; border: 0;
    font-family: inherit; font-size: var(--vh-text-sm);
    color: var(--vh-text); text-align: left;
    cursor: pointer;
    transition: background var(--vh-dur-fast) var(--vh-ease);
  }
  /* Icon on each menu row — muted by default, brand on hover */
  .vh-avatar__menu a:not(.vh-walletcard) > .vh-icon {
    color: var(--vh-text-muted);
    flex: 0 0 auto;
    transition: color var(--vh-dur-fast) var(--vh-ease);
  }
  .vh-avatar__menu a:not(.vh-walletcard):hover > .vh-icon { color: var(--vh-primary); }
  .vh-avatar__menu a:not(.vh-walletcard):hover {
    background: var(--vh-bg-muted); color: var(--vh-text);
  }
  .vh-avatar__menu hr {
    border: 0; border-top: 1px solid var(--vh-border);
    margin: var(--vh-space-1) 0;
  }
  .vh-avatar__menu__head {
    padding: var(--vh-space-2) 12px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .vh-avatar__menu__phone {
    font-size: var(--vh-text-xs);
    color: var(--vh-text-subtle);
  }
  .vh-avatar__menu__name {
    font-size: var(--vh-text-sm);
    color: var(--vh-text);
    font-weight: var(--vh-weight-semibold);
  }
  /* Sound-cues row with slider switch — sits like a regular menu row but
   * with a switch on the right instead of being clickable as a whole. */
  .vh-avatar__menu__sound {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--vh-space-2);
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: var(--vh-radius-sm);
  }
  .vh-avatar__menu__soundlbl {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--vh-text-sm);
    color: var(--vh-text);
  }
  .vh-avatar__menu__soundlbl .vh-icon { color: var(--vh-text-muted); }

  /* Ops console row — staff-only, has a "Team" badge */
  .vh-avatar__menu__ops {
    color: var(--vh-info) !important;
  }
  .vh-avatar__menu__ops > .vh-icon { color: var(--vh-info) !important; }
  .vh-avatar__menu__opsbadge {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--vh-info-50);
    color: var(--vh-info);
    border-radius: var(--vh-radius-pill);
    font-size: 10px;
    font-weight: var(--vh-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--vh-tracking-wide);
  }
}

/* ============================================================
 * Ops console — responsive layout
 *   Mobile (<1024px): slim top bar + off-canvas sidebar drawer.
 *   Desktop (≥1024px): sticky 240px left sidebar.
 * ========================================================== */

/* --- Shared sidebar inner styles (both viewports) --- */
.vh-sidenav__group + .vh-sidenav__group { margin-top: var(--vh-space-4); }
.vh-sidenav__label {
  font-size: var(--vh-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--vh-tracking-wide);
  font-weight: var(--vh-weight-bold);
  color: var(--vh-text-subtle);
  padding: 0 var(--vh-space-3);
  margin-bottom: var(--vh-space-2);
}
.vh-sidenav__list { display: flex; flex-direction: column; gap: 2px; }
.vh-sidenav__list a {
  display: flex; align-items: center; gap: var(--vh-space-2);
  padding: 10px 12px;
  color: var(--vh-text);
  font-size: var(--vh-text-sm);
  font-weight: var(--vh-weight-medium);
  border-radius: var(--vh-radius-sm);
  transition: background var(--vh-dur-fast) var(--vh-ease), color var(--vh-dur-fast) var(--vh-ease);
}
.vh-sidenav__list a:hover { background: var(--vh-bg-muted); }
.vh-sidenav__list a.is-active {
  background: var(--vh-primary-soft);
  color: var(--vh-primary);
  font-weight: var(--vh-weight-semibold);
}
/* Drawer footer — account actions, surfaced on mobile where the
   slim top bar hides the avatar menu. */
.vh-sidenav__foot {
  margin-top: var(--vh-space-4);
  padding-top: var(--vh-space-3);
  border-top: 1px solid var(--vh-border);
}

/* Hamburger that opens the ops drawer — shown only on mobile (below). */
.vh-opsmenu-btn { display: none; }

/* --- Mobile (<1024px): slim top bar + off-canvas drawer --- */
@media (max-width: 1023px) {
  /* The desktop .vh-topnav is display:none on mobile; ops still needs a
     bar to host the drawer trigger, so re-show a slim version of it. */
  body[data-persona="ops"] .vh-topnav {
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 45;
    height: 56px;
    padding: 0 var(--vh-space-2);
    background: var(--vh-glass-bg-strong);
    backdrop-filter: var(--vh-glass-blur);
    -webkit-backdrop-filter: var(--vh-glass-blur);
    border-bottom: 1px solid var(--vh-glass-border);
  }
  body[data-persona="ops"] .vh-topnav__inner {
    display: flex; align-items: center; gap: var(--vh-space-2);
    width: 100%;
  }
  body[data-persona="ops"] .vh-topnav__brand {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: var(--vh-weight-bold);
    color: var(--vh-primary);
    font-size: var(--vh-text-md);
  }
  body[data-persona="ops"] .vh-topnav__brand .vh-brand__mark { width: 26px; height: 24px; }
  body[data-persona="ops"] .vh-topnav__role {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    background: var(--vh-info-50); color: var(--vh-info);
    border-radius: var(--vh-radius-pill);
    font-size: var(--vh-text-2xs); font-weight: var(--vh-weight-bold);
    text-transform: uppercase; letter-spacing: var(--vh-tracking-wide);
  }
  /* Search + right cluster are dropped on the slim bar; account actions
     move into the drawer footer instead. */
  body[data-persona="ops"] .vh-topnav__search,
  body[data-persona="ops"] .vh-topnav__right { display: none; }

  .vh-opsmenu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 0; background: transparent; cursor: pointer;
    color: var(--vh-text); border-radius: var(--vh-radius-sm);
  }
  .vh-opsmenu-btn:hover { background: var(--vh-bg-muted); }
  .vh-opsmenu-btn svg { width: 22px; height: 22px; }

  /* Sidebar → off-canvas drawer */
  .vh-sidenav {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 70;
    width: 284px; max-width: 86vw;
    background: var(--vh-bg-elevated);
    border-right: 1px solid var(--vh-border);
    padding: var(--vh-space-4) var(--vh-space-3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform var(--vh-dur-base) var(--vh-ease);
  }
  .vh-sidenav.is-open { transform: translateX(0); box-shadow: var(--vh-shadow-4); }
  .vh-sidenav__scrim {
    position: fixed; inset: 0; z-index: 69;
    background: rgba(15, 22, 18, 0.45);
  }
}

/* --- Desktop (≥1024px): sticky left sidebar --- */
@media (min-width: 1024px) {
  /* The drawer footer is mobile-only; the topnav avatar covers desktop. */
  .vh-sidenav__foot { display: none; }

  .vh-opslayout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--vh-space-6);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--vh-space-6);
  }
  /* Fill the grid column. The element also carries .vh-main (for its
     padding), whose max-width:720px + margin:0 auto would otherwise cap
     and centre ops content — floating it in a void on wide screens.
     The two-class selector outspecs .vh-main to undo just those two. */
  .vh-opslayout .vh-opslayout__main {
    min-width: 0;          /* prevent overflow from wide tables */
    max-width: none;
    margin: 0;
  }

  .vh-sidenav {
    position: sticky; top: 88px;  /* below sticky top nav */
    background: var(--vh-bg-elevated);
    border: 1px solid var(--vh-border);
    border-radius: var(--vh-radius-md);
    padding: var(--vh-space-3);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* ============================================================
 * Two-column page layouts (cart, checkout, product detail, reports)
 * ========================================================== */

@media (min-width: 1024px) {
  .vh-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--vh-space-phi-3);
    align-items: start;
  }
  .vh-2col__main { min-width: 0; }
  .vh-2col__aside {
    position: sticky; top: 88px;
  }
}

/* ============================================================
 * Home page desktop — collapsible right sidebar for body selector
 * ========================================================== */

@media (min-width: 1024px) {
  /* Desktop home: use larger product cards; rails become 4-column grids */
  .vh-rail {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vh-space-3);
    scroll-snap-type: none;
  }
  .vh-rail .vh-pcard {
    flex: unset; max-width: unset;
    scroll-snap-align: unset;
  }

  /* Mobile-only in-page search row hidden at desktop (top nav handles search) */
  .vh-home__search-mobile { display: none; }

  /* Hero gets editorial type at desktop */
  .vh-hero { padding: var(--vh-space-10) var(--vh-space-8); }
  .vh-hero__title { font-size: var(--vh-text-3xl); }
  .vh-hero::after { width: 360px; height: 360px; right: -80px; top: -80px; opacity: 0.55; }
}

/* ============================================================
 * Product detail desktop — hero left, sticky CTA right
 * ========================================================== */

@media (min-width: 1024px) {
  .vh-pdp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--vh-space-6);
    align-items: start;
  }
  .vh-pdp__hero {
    border-radius: var(--vh-radius-xl);
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--_pdp-color, var(--vh-primary)) 30%, transparent) 0%, transparent 60%),
      linear-gradient(135deg, var(--vh-bg-elevated) 0%, color-mix(in srgb, var(--_pdp-color, var(--vh-primary)) 12%, var(--vh-bg-elevated)) 100%);
    border: 1px solid var(--vh-border);
    display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--_pdp-color, var(--vh-primary)) 70%, var(--vh-neutral-900));
    overflow: hidden;
    position: relative;
  }
  .vh-pdp__hero svg.vh-pdp__heroglyph {
    width: 38%; height: 38%; opacity: 0.85;
    stroke: currentColor; fill: none; stroke-width: 1.4;
  }

  .vh-pdp__cta-aside {
    position: sticky; top: 88px;
  }
}

/* Mobile-only PDP hero — hidden at desktop, simple at mobile */
.vh-pdp__hero { display: none; }
@media (min-width: 1024px) {
  .vh-pdp__hero { display: flex; }
}

/* ============================================================
 * Section headers — desktop edition
 * ========================================================== */

@media (min-width: 1024px) {
  .vh-rail__title { font-size: var(--vh-text-lg); }
  .vh-card { padding: var(--vh-space-5); }
  .vh-card--xl { padding: var(--vh-space-6); }
}