/* ==========================================================================
   QZONE OMS — APP SHELL
   Structure: [icon rail] [contextual panel] [topbar + content]

   Responsive ladder:
     >= 1200px  rail + panel + content   (desktop / PC)
     992–1199   rail + narrow panel      (laptop)
     768–991    rail only, panel flies out over content   (tablet)
     < 768      no rail; topbar + full drawer + bottom tab bar  (mobile)
   ========================================================================== */

.qz-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--qz-bg);
}

/* ==========================================================================
   1. ICON RAIL — the app's spine. Always visible from tablet up.
   ========================================================================== */

.qz-rail {
  position: sticky;
  top: 0;
  z-index: var(--qz-z-rail);
  display: flex;
  flex: 0 0 var(--qz-rail-w);
  flex-direction: column;
  align-items: center;
  width: var(--qz-rail-w);
  height: 100vh;
  height: 100dvh;
  padding: var(--qz-s-3) 0;
  background: var(--qz-rail-bg);
  border-right: 1px solid var(--qz-rail-line);
}

/* The logo is a wide 1.67:1 lockup (wordmark + strapline) drawn on transparent,
   so the box carries no fill of its own and the mark sits straight on the rail.
   It still has to match the artwork's proportions — a square box with
   object-fit:cover cropped it down to the middle of the wordmark. Sized to sit
   inside --qz-rail-w (60px) with breathing room either side. */
.qz-rail__brand {
  display: grid;
  place-items: center;
  width: 46px;
  height: 28px;
  padding: 3px;
  margin-bottom: var(--qz-s-4);
  flex: 0 0 auto;
}
.qz-rail__brand img { width: 100%; height: 100%; object-fit: contain; display: block; }

.qz-rail__items {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--qz-s-1);
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.qz-rail__items::-webkit-scrollbar { width: 0; }

.qz-rail__foot {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--qz-s-1);
  width: 100%;
  padding-top: var(--qz-s-3);
  margin-top: var(--qz-s-2);
  border-top: 1px solid var(--qz-rail-line);
}

.qz-rail__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--qz-r-lg);
  background: transparent;
  color: var(--qz-rail-text);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--qz-dur-fast) var(--qz-ease),
              background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-rail__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--qz-rail-active);
}
.qz-rail__item.is-active {
  background: var(--qz-accent-weak);
  color: var(--qz-accent);
}

/* Active marker: a 3px bar on the rail's inner edge. Reads instantly at a
   glance and needs no color to be understood. */
.qz-rail__item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--qz-accent);
  transform: translateY(-50%);
}

/* Unread/pending count on a rail icon */
.qz-rail__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-family: var(--qz-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--qz-rail-bg);
}

/* Tooltip — the rail is icon-only, so every item must name itself on hover.
   Positioned `fixed`, not `absolute`: .qz-rail__items is a scroll container
   (overflow-y:auto pairs with overflow-x:hidden), which clips on BOTH axes, so
   an absolutely-positioned tip sitting past the 60px rail was cut off entirely
   and never appeared. A fixed element is not clipped by an ancestor's overflow.
   The shell script writes --qz-tip-x / --qz-tip-y from the hovered item's rect
   and marks the rail .is-tips-ready, so the tip is only revealed once it has
   real coordinates. The rail's own z-index (60) is above the panel's (55), so
   the tip paints over the section panel it overlaps. */
.qz-rail__tip {
  position: fixed;
  left: var(--qz-tip-x, calc(var(--qz-rail-w) + 10px));
  top: var(--qz-tip-y, 50%);
  z-index: 10;
  padding: 5px 9px;
  border-radius: var(--qz-r-md);
  background: var(--qz-surface-4);
  box-shadow: var(--qz-ring-strong), var(--qz-shadow-2);
  color: var(--qz-text);
  font-size: var(--qz-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--qz-dur-fast) var(--qz-ease),
              transform var(--qz-dur-fast) var(--qz-ease);
}
.is-tips-ready .qz-rail__item:hover .qz-rail__tip,
.is-tips-ready .qz-rail__item:focus-visible .qz-rail__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   2. CONTEXTUAL PANEL — second tier, changes with the active rail section.
   ========================================================================== */

.qz-panel {
  position: sticky;
  top: 0;
  z-index: var(--qz-z-panel);
  display: flex;
  flex: 0 0 var(--qz-panel-w);
  flex-direction: column;
  width: var(--qz-panel-w);
  height: 100vh;
  height: 100dvh;
  background: var(--qz-surface-1);
  border-right: 1px solid var(--qz-line);
}

.qz-panel__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-2);
  height: var(--qz-topbar-h);
  padding: 0 var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line);
}

.qz-panel__title {
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text);
}

.qz-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--qz-s-3) var(--qz-s-2);
  overflow-y: auto;
}

.qz-panel__group + .qz-panel__group { margin-top: var(--qz-s-4); }

.qz-panel__group-label {
  padding: 0 var(--qz-s-3) var(--qz-s-2);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-faint);
}

.qz-panel__nav { margin: 0; padding: 0; list-style: none; }

.qz-panel__link {
  display: flex;
  align-items: center;
  gap: var(--qz-s-3);
  padding: 7px var(--qz-s-3);
  border-radius: var(--qz-r-md);
  color: var(--qz-text-dim);
  font-size: var(--qz-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  transition: color var(--qz-dur-fast) var(--qz-ease),
              background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-panel__link:hover {
  background: var(--qz-surface-3);
  color: var(--qz-text);
}
.qz-panel__link.is-active {
  background: var(--qz-accent-weak);
  color: var(--qz-accent);
  font-weight: 600;
}
.qz-panel__link i {
  flex: 0 0 16px;
  width: 16px;
  font-size: 12px;
  text-align: center;
  opacity: 0.85;
}
.qz-panel__link-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qz-panel__foot {
  flex: 0 0 auto;
  padding: var(--qz-s-3);
  border-top: 1px solid var(--qz-line);
}

/* User identity block at the panel foot */
.qz-user {
  display: flex;
  align-items: center;
  gap: var(--qz-s-3);
  width: 100%;
  padding: var(--qz-s-2);
  border: 0;
  border-radius: var(--qz-r-md);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-user:hover { background: var(--qz-surface-3); }

.qz-user__avatar {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--qz-r-md);
  background: var(--qz-accent-weak);
  box-shadow: inset 0 0 0 1px var(--qz-accent-line);
  color: var(--qz-accent);
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-xs);
  font-weight: 700;
  overflow: hidden;
}
.qz-user__avatar img { width: 100%; height: 100%; object-fit: cover; }

.qz-user__meta { flex: 1 1 auto; min-width: 0; }
.qz-user__name {
  display: block;
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  color: var(--qz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qz-user__role {
  display: block;
  font-size: var(--qz-fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qz-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   3. MAIN COLUMN — topbar + content
   ========================================================================== */

.qz-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;      /* lets wide tables shrink instead of pushing the page */
  min-height: 100vh;
  min-height: 100dvh;
}

.qz-topbar {
  position: sticky;
  top: 0;
  z-index: var(--qz-z-topbar);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--qz-s-3);
  height: var(--qz-topbar-h);
  /* The bar itself spans the column so its rule runs edge to edge, but its
     contents track the centred content well below it. */
  padding-block: 0;
  padding-inline: max(var(--qz-s-5), calc((100% - var(--qz-content-max)) / 2 + var(--qz-s-5)));
  background: var(--qz-bg);
  border-bottom: 1px solid var(--qz-line);
}

.qz-topbar__lead { display: flex; align-items: center; gap: var(--qz-s-3); min-width: 0; flex: 1 1 auto; }
.qz-topbar__actions { display: flex; align-items: center; gap: var(--qz-s-2); flex: 0 0 auto; }

/* Icon button used in the topbar, panel head and toolbars */
.qz-iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: transparent;
  color: var(--qz-text-mute);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--qz-dur-fast) var(--qz-ease),
              background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-iconbtn:hover { background: var(--qz-surface-3); color: var(--qz-text); }

/* Breadcrumbs */
.qz-crumbs {
  display: flex;
  align-items: center;
  gap: var(--qz-s-2);
  min-width: 0;
  font-size: var(--qz-fs-xs);
  color: var(--qz-text-mute);
  overflow: hidden;
}
.qz-crumbs a { color: var(--qz-text-mute); }
.qz-crumbs a:hover { color: var(--qz-text); }
.qz-crumbs__sep { color: var(--qz-text-faint); flex: 0 0 auto; }
.qz-crumbs__current {
  color: var(--qz-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Content well — capped for readability, and centred in whatever space the
   rail and panel leave behind so wide screens don't strand a gutter on the
   right. */
.qz-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--qz-content-max);
  margin-inline: auto;
  padding: var(--qz-s-6) var(--qz-s-5) var(--qz-s-12);
}

/* Page header inside content — plain type, no card, no gradient. */
.qz-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qz-s-4);
  flex-wrap: wrap;
  margin-bottom: var(--qz-s-6);
  padding-bottom: var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line);
}
.qz-page-head__text { min-width: 0; }
.qz-page-head__title {
  margin: 0;
  font-size: var(--qz-fs-xl);
  font-weight: 600;
  letter-spacing: var(--qz-track-tight);
}
.qz-page-head__sub {
  margin: var(--qz-s-1) 0 0;
  font-size: var(--qz-fs-sm);
  color: var(--qz-text-mute);
}
.qz-page-head__actions { display: flex; align-items: center; gap: var(--qz-s-2); flex-wrap: wrap; }

/* ==========================================================================
   4. SCRIM + MOBILE DRAWER + BOTTOM TABS
   ========================================================================== */

.qz-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--qz-z-scrim);
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--qz-dur) var(--qz-ease), visibility var(--qz-dur);
}
.qz-scrim.is-open { opacity: 1; visibility: visible; }

/* Bottom tab bar — mobile only. Native-app navigation, not a hamburger. */
.qz-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--qz-z-tabbar);
  display: none;
  align-items: stretch;
  height: calc(var(--qz-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--qz-surface-1);
  border-top: 1px solid var(--qz-line);
}

.qz-tabbar__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--qz-text-mute);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qz-tabbar__item i { font-size: 17px; line-height: 1; }
.qz-tabbar__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qz-tabbar__item.is-active { color: var(--qz-accent); }
.qz-tabbar__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 2px;
  background: var(--qz-accent);
  transform: translateX(-50%);
}
.qz-tabbar__dot {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 6px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--qz-crit);
  color: #fff;
  font-family: var(--qz-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Full navigation drawer — mobile "More" tab and tablet panel flyout */
.qz-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--qz-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(200px, 86vw);
  background: var(--qz-surface-1);
  border-right: 1px solid var(--qz-line);
  box-shadow: var(--qz-shadow-3);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--qz-dur-slow) var(--qz-ease-out), visibility var(--qz-dur-slow);

  /* Local type scale — one knob per role. These are the tablet-flyout values;
     the mobile query in section 5 re-declares them on .qz-drawer, so the two
     contexts can be tuned apart without duplicating any rule below. */
  --qz-drawer-fs-title: var(--qz-fs-sm);    /* 13px — brand wordmark  */
  --qz-drawer-fs-link:  var(--qz-fs-base);  /* 14px — nav item label  */
  --qz-drawer-fs-label: var(--qz-fs-2xs);   /* 11px — group heading   */
  --qz-drawer-fs-user:  var(--qz-fs-sm);    /* 13px — account name    */
  --qz-drawer-fs-icon:  13px;               /* glyph inside the 16px box */
}
.qz-drawer.is-open { transform: translateX(0); visibility: visible; }

.qz-drawer__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line);
}
.qz-drawer__brand { display: flex; align-items: center; gap: var(--qz-s-3); min-width: 0; }
/* Same transparent box and aspect ratio as .qz-rail__brand — see the note there. */
.qz-drawer__logo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 30px;
  padding: 3px;
  border-radius: var(--qz-r-md);

  flex: 0 0 auto;
}
.qz-drawer__logo img { width: 100%; height: 100%; object-fit: contain; }
.qz-drawer__title {
  font-family: var(--qz-font-display);
  font-size: var(--qz-drawer-fs-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--qz-text);
}
.qz-drawer__body { flex: 1 1 auto; min-height: 0; padding: var(--qz-s-3) var(--qz-s-2); overflow-y: auto; }
.qz-drawer__foot { flex: 0 0 auto; padding: var(--qz-s-3); border-top: 1px solid var(--qz-line); }

/* Reuse panel link styling inside the drawer, at a touch-friendly height.
   Sizes come from the --qz-drawer-fs-* knobs declared on .qz-drawer, so the
   mobile query can retune them without restating these selectors. */
.qz-drawer .qz-panel__link {
  padding: 10px var(--qz-s-3);
  font-size: var(--qz-drawer-fs-link);
}
.qz-drawer .qz-panel__link i { font-size: var(--qz-drawer-fs-icon); }
.qz-drawer .qz-panel__group-label {
  padding-top: var(--qz-s-2);
  font-size: var(--qz-drawer-fs-label);
}

/* The account block shares .qz-user with the desktop panel foot, so its sizes
   are scoped here rather than changed at source. */
.qz-drawer .qz-user__name { font-size: var(--qz-drawer-fs-user); }
.qz-drawer .qz-user__role { font-size: var(--qz-drawer-fs-label); }

/* Locks background scroll while drawer/menu is open */
body.qz-noscroll { overflow: hidden; }

/* ==========================================================================
   5. RESPONSIVE LADDER
   ========================================================================== */

/* --- Laptop: tighten the panel ------------------------------------------ */
@media (max-width: 1199.98px) {
  :root { --qz-panel-w: 200px; }
  .qz-content { padding: var(--qz-s-5) var(--qz-s-4) var(--qz-s-10); }
  .qz-topbar { padding-inline: max(var(--qz-s-4), calc((100% - var(--qz-content-max)) / 2 + var(--qz-s-4))); }
}

/* --- Tablet: rail stays, panel becomes an overlay flyout ----------------- */
@media (max-width: 991.98px) {
  .qz-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--qz-rail-w);
    z-index: var(--qz-z-drawer);
    width: 260px;
    flex-basis: 0;
    box-shadow: var(--qz-shadow-3);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--qz-dur-slow) var(--qz-ease-out), visibility var(--qz-dur-slow);
  }
  .qz-panel.is-open { transform: translateX(0); visibility: visible; }

  /* The panel toggle is the rail item itself; show an explicit close too. */
  .qz-panel__close { display: grid; }
}

/* --- Mobile: no rail, no panel. Topbar + drawer + bottom tabs ------------ */
@media (max-width: 767.98px) {
  .qz-rail { display: none; }
  .qz-panel { display: none; }

  .qz-tabbar { display: flex; }

  .qz-main { min-height: 100vh; }

  /* Drawer type. The drawer is 200px here, so the nav label has roughly 130px
     once the icon, gap and padding are taken out — one notch down from the
     tablet flyout keeps the longer items off the ellipsis. Touch targets are
     unaffected: the 10px link padding sets the row height, not the text.

     Three tiers, all on the existing scale, with the nav link as the anchor:
       13px  nav link          the thing you came here to press
       12px  wordmark, account name
       11px  group heading, account role
     The account name was previously 13px, tying with the nav links and
     pulling the eye to the footer instead of the navigation. */
  .qz-drawer {
    --qz-drawer-fs-title: var(--qz-fs-xs);   /* 12px */
    --qz-drawer-fs-link:  var(--qz-fs-sm);   /* 13px */
    --qz-drawer-fs-label: var(--qz-fs-2xs);  /* 11px */
    --qz-drawer-fs-user:  var(--qz-fs-xs);   /* 12px */
    --qz-drawer-fs-icon:  12px;
  }

  /* Head geometry. At 200px the wordmark was left 62px for a string that wants
     ~86px, so "Q-ZONE Admin" broke across two loosely-spaced lines. Trimming
     the side padding, the logo chip and the brand gap returns it to 84px:
     200 - 24 padding - 32 close - 12 between - 40 logo - 8 gap.
     That is deliberately not tuned to fit on one line — "Super Admin" never
     could. The tight line-height is what carries it: whether the label lands
     on one line or two, it reads as an intentional lockup. */
  .qz-drawer__head  { padding: var(--qz-s-3); }
  .qz-drawer__brand { gap: var(--qz-s-2); }
  .qz-drawer__logo  { width: 40px; height: 24px; }
  .qz-drawer__title { line-height: 1.15; }

  /* Avatar follows the account name down a notch so the footer stays a
     footer and does not out-weigh the nav list above it. */
  .qz-drawer .qz-user__avatar {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .qz-topbar {
    padding: 0 var(--qz-s-4);
    background: var(--qz-surface-1);
  }

  .qz-content {
    padding: var(--qz-s-4) var(--qz-s-4)
             calc(var(--qz-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--qz-s-8));
  }

  .qz-page-head {
    margin-bottom: var(--qz-s-4);
    padding-bottom: var(--qz-s-3);
  }
  .qz-page-head__title { font-size: var(--qz-fs-lg); }
  .qz-page-head__actions { width: 100%; }
  .qz-page-head__actions > * { flex: 1 1 auto; justify-content: center; }
}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 400px) {
  .qz-content { padding-left: var(--qz-s-3); padding-right: var(--qz-s-3); }
  .qz-topbar { padding: 0 var(--qz-s-3); }
  .qz-tabbar__item { font-size: 9px; }
  .qz-tabbar__item i { font-size: 16px; }
}

/* --- Ultra-wide: keep the reading measure sane --------------------------- */
@media (min-width: 1800px) {
  .qz-content { padding-left: var(--qz-s-8); padding-right: var(--qz-s-8); }
  .qz-topbar { padding-inline: max(var(--qz-s-8), calc((100% - var(--qz-content-max)) / 2 + var(--qz-s-8))); }
}

/* --- Touch: no hover-dependent affordances ------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .qz-rail__tip { display: none; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .qz-rail, .qz-panel, .qz-topbar, .qz-tabbar, .qz-drawer, .qz-scrim { display: none !important; }
  .qz-shell { display: block; }
  .qz-content { max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
}