/* ============================================================================
   SupplyIQ App Shell
   ----------------------------------------------------------------------------
   The navigation layer of the design system: desktop sidebar application
   layout (S3) and the dedicated app-like mobile interface (S4).

   Companion to supplyiq.css (tokens + components). Loaded on every page that
   mounts the shared shell, so all five web applications get the same
   navigation behaviour from one implementation rather than four (S20).

   The governing rule from S4: on a phone this must NOT be the desktop
   sidebar made narrow. Below the lg breakpoint the sidebar is removed from
   the flow entirely and replaced by a compact top bar, an off-canvas drawer,
   and a bottom tab bar -- the pattern a phone user expects from an app.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESKTOP APPLICATION LAYOUT (S3)
   --------------------------------------------------------------------------- */
.navbar-vertical.navbar-dark {
  background: #0f1826;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.navbar-vertical .nav-link {
  border-radius: var(--sq-radius-sm);
  margin: 1px var(--sq-space-2);
  padding: 0.5rem 0.7rem;
  font-size: var(--sq-font-base);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Active item: tinted surface plus a left rule, so the current page is
   identifiable without relying on colour alone (S14). */
.navbar-vertical .nav-link.active {
  background: rgba(var(--tblr-primary-rgb), 0.18);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}

.navbar-vertical .nav-link-icon {
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Group headings inside the sidebar (S9 role-specific grouping) */
.nav-item-group-title {
  padding: var(--sq-space-4) 1.05rem var(--sq-space-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

/* Desktop topbar */
.page-header {
  background: var(--sq-surface);
  border-bottom: 1px solid var(--sq-border);
  padding: var(--sq-space-3) 0;
  margin-bottom: var(--sq-space-5);
}

.page-title {
  font-size: var(--sq-font-xl);
  font-weight: 700;
  color: var(--sq-text);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   2. NOTIFICATION / MESSAGE BADGES  (S12 presentation only)
   --------------------------------------------------------------------------- */
.topbar-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--sq-radius-pill);
  background: var(--sq-danger);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--sq-surface);
}

/* Notification rows: unread must be obvious at a glance (S12). Three cues,
   not one -- tinted surface, a leading dot, and heavier text. */
.sq-notif {
  display: flex;
  gap: var(--sq-space-3);
  padding: var(--sq-space-3) var(--sq-space-4);
  border-bottom: 1px solid var(--sq-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sq-notif:last-child {
  border-bottom: 0;
}

.sq-notif:hover,
.sq-notif:focus-visible {
  background: var(--sq-surface-sunken);
}

.sq-notif--unread {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}

.sq-notif-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--tblr-primary);
}

.sq-notif--read .sq-notif-dot {
  background: transparent;
  border: 1px solid var(--sq-border-strong);
}

.sq-notif-body {
  min-width: 0;
  flex: 1 1 auto;
}

.sq-notif-title {
  font-size: var(--sq-font-base);
  color: var(--sq-text);
  line-height: 1.35;
}

.sq-notif--unread .sq-notif-title {
  font-weight: 600;
}

.sq-notif-meta {
  display: flex;
  align-items: center;
  gap: var(--sq-space-2);
  margin-top: 2px;
  font-size: var(--sq-font-xs);
  color: var(--sq-text-subtle);
}

/* The body line under the meta row. Clamped to two lines so a long
   order-diff ("DAIRY CREAM: 60 -> 40, ASLI DESI GHEE: ...") cannot turn one
   notification into a 150px block -- S12 asks for a list that is easy to
   SCAN, and the full text is always available on the page the row opens. */
.sq-notif-body > .sq-notif-meta:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category chip -- S12 "clearly categorized". */
.sq-notif-cat {
  padding: 0.1em 0.5em;
  border-radius: var(--sq-radius-pill);
  background: var(--sq-neutral-bg);
  color: var(--sq-neutral);
  font-weight: 600;
  text-transform: capitalize;
}

.sq-notif-cat--order { background: var(--sq-info-bg); color: var(--sq-info); }
.sq-notif-cat--return { background: var(--sq-warning-bg); color: var(--sq-warning); }
.sq-notif-cat--message { background: var(--sq-success-bg); color: var(--sq-success); }

/* ---------------------------------------------------------------------------
   3. MOBILE APP SHELL  (S4 -- the critical Product Owner requirement)
   Below lg the desktop sidebar leaves the flow completely.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* --- 3a. Kill the desktop sidebar --- */
  .navbar-vertical.navbar-dark {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: 82vw;
    max-width: 320px;
    display: block;
    padding: 0;
    transform: translateX(-100%);
    /* visibility (not just transform) is what actually takes the closed
       drawer out of play: a translated-but-visible element still receives
       Tab focus and is still announced by screen readers, so a keyboard user
       would otherwise tab through the entire hidden nav before reaching the
       page (S14 keyboard navigation). It also guarantees the drawer cannot
       sit over the content if the transform is ever overridden. */
    visibility: hidden;
    transition: transform 0.22s var(--sq-ease), visibility 0.22s var(--sq-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.sq-drawer-open .navbar-vertical.navbar-dark {
    transform: translateX(0);
    visibility: visible;
  }

  /* Tabler collapses the nav list on small screens; in drawer mode it must
     always be visible, because the drawer itself is now the disclosure. */
  .navbar-vertical .navbar-collapse {
    display: block !important;
    height: auto !important;
  }

  /* The desktop toggler is redundant once the drawer exists. */
  .navbar-vertical .navbar-toggler {
    display: none;
  }

  .sq-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(8, 14, 24, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--sq-ease);
  }

  body.sq-drawer-open .sq-drawer-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  body.sq-drawer-open {
    overflow: hidden;           /* page must not scroll behind the drawer */
  }

  .navbar-vertical .nav-link {
    padding: 0.75rem 0.9rem;    /* comfortable touch rows */
    min-height: var(--sq-touch);
    display: flex;
    align-items: center;
  }

  /* --- 3b. Compact mobile top bar (S4) --- */
  .page-wrapper {
    margin-left: 0 !important;
    padding-top: var(--sq-topbar-h);
    /* Clear the bottom tab bar, including the iOS home indicator. */
    padding-bottom: calc(var(--sq-bottomnav-h) + env(safe-area-inset-bottom));
  }

  .sq-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--sq-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--sq-space-2);
    padding: 0 var(--sq-space-2);
    background: var(--sq-surface);
    border-bottom: 1px solid var(--sq-border);
  }

  .sq-mobile-topbar__btn {
    flex: 0 0 auto;
    width: var(--sq-touch);
    height: var(--sq-touch);
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    border-radius: var(--sq-radius-sm);
    color: var(--sq-text);
    font-size: 1.3rem;
    position: relative;
  }

  .sq-mobile-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--sq-font-md);
    font-weight: 700;
    color: var(--sq-text);
    /* Long page titles truncate rather than wrapping the bar to 2 lines. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The desktop page header is redundant once the mobile bar exists. */
  .page-header {
    display: none;
  }

  /* --- 3c. Bottom tab bar (S4) --- */
  .sq-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    background: var(--sq-surface);
    border-top: 1px solid var(--sq-border);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sq-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--sq-bottomnav-h);
    padding: 0 2px;
    text-decoration: none;
    color: var(--sq-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    background: transparent;
    border: 0;
    position: relative;
  }

  .sq-bottom-nav__item i {
    font-size: 1.3rem;
    line-height: 1;
  }

  .sq-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sq-bottom-nav__item.active {
    color: var(--tblr-primary);
  }

  /* Active tab also gets a top rule -- not colour alone (S14). */
  .sq-bottom-nav__item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--tblr-primary);
  }

  .sq-bottom-nav__badge {
    position: absolute;
    top: 6px;
    left: 55%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--sq-radius-pill);
    background: var(--sq-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* --- 3d. Mobile content density --- */
  .page-body {
    margin-top: var(--sq-space-4);
  }

  .container-xl {
    padding-left: var(--sq-space-3);
    padding-right: var(--sq-space-3);
  }

  .sq-card-body {
    padding: var(--sq-space-4);
  }

  /* Single-column KPIs read better than a cramped 2-up at <=430px. */
  .sq-kpi-grid {
    grid-template-columns: 1fr;
    gap: var(--sq-space-2);
  }

  .sq-kpi-value {
    font-size: var(--sq-font-lg);
  }
}

/* Desktop/tablet-landscape: the mobile chrome must never appear. */
@media (min-width: 992px) {
  .sq-mobile-topbar,
  .sq-bottom-nav,
  .sq-drawer-scrim {
    display: none !important;
  }
}

/* Small tablets in portrait (768x1024) get the two-up KPI grid rather than
   the phone's single column -- there is room for it. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .sq-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone landscape (e.g. 932x430): vertical space is scarce, so trim the
   fixed chrome rather than letting it eat the content area. */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --sq-topbar-h: 48px;
    --sq-bottomnav-h: 50px;
  }

  .sq-bottom-nav__item i {
    font-size: 1.1rem;
  }

  .sq-bottom-nav__label {
    display: none;              /* icons only when height is tight */
  }
}