/* ============================================================
   portal-fix.css — v32 layering + responsive header fixes.
   Loaded LAST so it wins over app.css / unilorin.css / admin.css.

   Fixes:
   1. Opening the sidebar drawer dimmed the whole page and made the
      menu links unclickable — several stylesheets set conflicting
      z-index values for .sidebar and .scrim (39 / 55 / 60 / 200).
      Here the stack is defined once: content < scrim < sidebar.
   2. The utility strip above the header overflowed on phones.
   3. The topbar row now scales instead of squashing.
============================================================ */

/* ---------- 1. Drawer / scrim stack ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(8,14,32,.5);
  z-index:900 !important; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
body.drawer-open .scrim{ opacity:1; visibility:visible; pointer-events:auto }
/* Desktop never needs the scrim — the sidebar is docked. */
@media (min-width:1081px){
  .scrim{ display:none !important }
  body.drawer-open .scrim{ opacity:0; visibility:hidden; pointer-events:none }
}

@media (max-width:1080px){
  .sidebar{
    position:fixed !important; top:0; left:0; bottom:0; width:min(86vw,300px) !important;
    transform:translateX(-102%); transition:transform .25s ease;
    z-index:1000 !important;              /* always above the scrim */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 20px 60px rgba(0,10,40,.45);
  }
  body.drawer-open .sidebar{ transform:translateX(0) }
  /* The drawer must stay fully interactive while it is open. */
  body.drawer-open .sidebar,
  body.drawer-open .sidebar *{ pointer-events:auto !important; filter:none !important; opacity:1 }
  body.drawer-open{ overflow:hidden }
  /* Collapsed-mode rules must never shrink the mobile drawer. */
  body.sidebar-collapsed .sidebar{ width:min(86vw,300px) !important }
  body.sidebar-collapsed .sidebar .lb,
  body.sidebar-collapsed .sidebar .sb-section,
  body.sidebar-collapsed .sidebar .sb-foot{ display:revert !important }
  body.sidebar-collapsed .main{ margin-left:0 !important }
  .tb-toggle{ display:none !important }   /* collapse toggle is desktop-only */
}

/* Nothing else may sit on top of an open drawer. */
body.drawer-open .topbar,
body.drawer-open .uni-utility,
body.drawer-open .bottombar{ z-index:30 !important }

/* Guided tour: the dim layer is now dismissible instead of trapping the page. */
.ept-overlay{ cursor:pointer }
body:not(.ept-active) .ept-overlay,
body:not(.ept-active) .ept-spot,
body:not(.ept-active) .ept-tip{ display:none !important }

/* ---------- 2. Utility strip (top of the header) ---------- */
.uni-utility .wrap{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:7px clamp(12px,2.5vw,20px); line-height:1.4;
}
.uni-utility{ font-size:12.5px }

@media (max-width:900px){
  .uni-utility{ font-size:12px }
  .uni-utility .wrap{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:14px; padding:6px 12px;
  }
  .uni-utility .wrap::-webkit-scrollbar{ display:none }
  .uni-utility .wrap > *{ flex:0 0 auto; white-space:nowrap }
  .uni-utility .u-spacer{ flex:1 0 6px; min-width:6px }
  .uni-utility .u-sep{ display:none }
}
@media (max-width:560px){
  /* Keep the strip to a single tidy line: brand tagline is dropped, links stay. */
  .uni-utility .wrap > span:first-child{ max-width:52vw; overflow:hidden; text-overflow:ellipsis }
}

/* ---------- 3. Topbar ---------- */
.main > .topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  padding:10px clamp(12px,2.5vw,20px); min-height:60px;
}
.topbar .tb-search{ flex:1 1 auto; min-width:0 }
.topbar .tb-search input{ width:100%; min-width:0 }
.topbar .tb-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto }
.tb-hamburger{ display:none; border:1px solid var(--border,#e4e9f3); background:transparent;
  border-radius:10px; padding:8px 11px; font-size:17px; line-height:1; cursor:pointer }

@media (max-width:1080px){
  .tb-hamburger{ display:inline-flex; align-items:center; justify-content:center }
}
@media (max-width:820px){
  .topbar .tb-search{ display:none }
  .topbar .tb-spacer{ flex:1 1 auto }
  .topbar .tb-user .who-text{ display:none }
  .topbar .tb-actions{ gap:6px }
  .topbar .tb-actions .btn.sm,
  .topbar .tb-icon-btn{ padding:7px 9px; font-size:15px }
  #installBtn{ display:none !important }
}
@media (max-width:420px){
  .main > .topbar{ padding:8px 10px; gap:6px; min-height:54px }
  .topbar #tourBtn{ display:none }
}

/* Breadcrumbs shouldn't force horizontal scroll on phones. */
.ep-breadcrumbs{ flex-wrap:wrap; row-gap:4px }