/* ============================================================================
   iesmac-support.css — permanent, Phoenix-native support layer
   ----------------------------------------------------------------------------
   The single home for cross-cutting UI tokens/overrides as the bolted-on
   "material-skin" layer is decomposed (see docs/DESIGN-SYSTEM.md).
   Rules here MUST be Phoenix-sourced: reference --phoenix-* vars, no --md-*,
   no font-family !important. Loaded LAST so its :root token wins.
   ============================================================================ */

/* --- Typography: single font family = Phoenix's native Nunito Sans ----------
   The app standardises on Phoenix's own font. material-skin had forced 'Inter'
   in two ways — var redefinitions in _tokens.css AND ~88 literal
   `font-family:'Inter'` declarations — which fought Phoenix's Nunito base.
   We set the Phoenix font vars to Nunito here (loaded LAST, so this wins the
   var battle) and the literal Inter declarations are stripped from material-skin.
   To switch to Inter instead: swap 'Nunito Sans' for 'Inter' below. */
:root {
  --phoenix-font-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
  --phoenix-body-font-family: var(--phoenix-font-sans-serif);
  --phoenix-headings-font-family: var(--phoenix-font-sans-serif);

  /* --- IESMAC brand default (teal #1A8294) -----------------------------------
     House default for everyone WITHOUT tenant branding: platform admin, login,
     public pages, and unbranded tenants. Branded tenants override via their own
     inline :root block (loaded after this file → wins). Both the hex AND the
     -rgb triplet are set, since Phoenix uses --phoenix-*-rgb inside rgba() for
     soft / subtle / tinted UI (see feedback-phoenix-branding-rgb memory). */
  --phoenix-primary: #1A8294;
  --phoenix-primary-rgb: 26, 130, 148;
  --phoenix-secondary: #31474F;
  --phoenix-secondary-rgb: 49, 71, 79;
  --phoenix-accent: #2FBFD4;
}

/* -- Z-index ladder (a11y/stacking) -----------------------------------------
   Templates currently sprinkle ~18 distinct inline z-index magic values
   (1..10000). This names a single ladder aligned to Bootstrap 5.3's own scale
   so NEW code can use var(--z-*) instead of guessing. Existing inline values
   are intentionally NOT remapped here — that needs a visual stacking pass
   (tracker P1-2). See DESIGN-SYSTEM.md §8. */
:root {
  --z-dropdown:            1000;
  --z-sticky:              1020;
  --z-fixed:               1030;   /* fixed top navbar / sidebar */
  --z-offcanvas-backdrop:  1040;
  --z-offcanvas:           1045;
  --z-modal-backdrop:      1050;
  --z-modal:               1055;
  --z-top-strip:           1056;   /* impersonation / super-user safety strip — just above modal */
  --z-context-menu:        1060;   /* right-click / cell context menus (above modal+strip) */
  --z-popover:             1070;
  --z-tooltip:             1080;
  --z-chat-call:           1085;   /* chat call overlay (aria-modal dialog) */
  --z-toast:               1090;
  --z-chat:                1046;   /* floating chat widget launcher + panel (above content, below modal) */
  --z-skiplink:            1100;   /* a11y skip-to-content link — above everything when focused */
}

/* -- Purple accent: NOC / AI / bulk-process context colour --------------------
   Phoenix doesn't ship a named purple token; pages using #6f42c1 (Bootstrap's
   $purple) must go through a CSS var so dark-mode gets the lighter variant. */
:root {
  --phoenix-purple:     #6f42c1;
  --phoenix-purple-rgb: 111, 66, 193;
}
.dark {
  --phoenix-purple:     #a78bde;   /* ~1.5× lighter for dark-mode contrast */
  --phoenix-purple-rgb: 167, 139, 222;
}
.text-purple { color: var(--phoenix-purple) !important; }
.bg-purple   { background-color: rgba(var(--phoenix-purple-rgb), 1) !important; color: #fff !important; }

/* -- Global keyboard focus ring (a11y) --------------------------------------
   Phoenix/Bootstrap give form controls + buttons a box-shadow focus ring, and
   iesmac-admin-polish rings the navbar icons, but plain links, nav-links,
   dropdown items, and custom role="button" elements had no consistent visible
   focus. Add a brand-colour outline on KEYBOARD focus only (:focus-visible, so
   mouse clicks don't show it). Outline (not box-shadow) → no clash with the
   controls Phoenix already styles. Adapts to dark mode via --phoenix-primary. */
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.btn-link:focus-visible,
.page-link:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--phoenix-primary);
  outline-offset: 2px;
  border-radius: .35rem;
}

/* -- Section-header utility for JS-generated dropdown dividers ---------------
   Replaces the common inline style="color:#9da9bb" pattern in navbar JS. */
.dropdown-section-label {
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--phoenix-gray-600);  /* adapts to dark mode automatically */
}

/* Dark mode: Phoenix lightens --phoenix-primary under `.dark` for contrast;
   mirror that with a lightened brand teal so the house default stays on-brand
   in dark mode too. Loaded after theme.min.css → beats Phoenix's .dark; a
   branded tenant's inline :root still wins by source order. */
.dark {
  --phoenix-primary: #2BA5B8;
  --phoenix-primary-rgb: 43, 165, 184;
  /* Phoenix's .dark remaps the --phoenix-body-color HEX (#9fa6bc) but NOT its
     -rgb triplet (left at the light value 49,55,74). `.text-body` reads the
     TRIPLET (color:rgba(var(--phoenix-body-color-rgb),…)!important), so body-
     text links (e.g. list/table name links using `text-body text-hover-primary`)
     render dark-on-dark (#31374a, contrast 1.49). Sync the triplet to the dark hex. */
  --phoenix-body-color-rgb: 159, 166, 188;
}
/* text-muted is hardcoded #8a94ad in Phoenix's theme.min.css; shift it one
   stop lighter in dark mode so it reads on bg-light (#31374a) headers. */
.dark .text-muted { color: var(--phoenix-gray-800) !important; }  /* #949db5 */

/* Dark mode: Phoenix's `.bg-soft-*` utilities are hardcoded LIGHT pastels in
   theme.min.css (e.g. .bg-soft-success{background:#f0fdec!important}) with NO
   .dark variant — so soft-tinted cards (e.g. platform-home KPI tiles) render
   as light patches on the dark page. Re-tint them from the dark-remapped
   --phoenix-*-rgb triplets at low alpha so they stay subtle AND on-theme.
   !important + .dark specificity beats theme.min.css's own !important. */
.dark .bg-soft-primary   { background-color: rgba(var(--phoenix-primary-rgb), .15) !important; }
.dark .bg-soft-secondary { background-color: rgba(var(--phoenix-secondary-rgb), .22) !important; }
.dark .bg-soft-success   { background-color: rgba(var(--phoenix-success-rgb), .15) !important; }
.dark .bg-soft-info      { background-color: rgba(var(--phoenix-info-rgb), .15) !important; }
.dark .bg-soft-warning   { background-color: rgba(var(--phoenix-warning-rgb), .15) !important; }
.dark .bg-soft-danger    { background-color: rgba(var(--phoenix-danger-rgb), .15) !important; }
.dark .bg-soft-light     { background-color: rgba(255, 255, 255, .05) !important; }

/* Badge contrast (WCAG AA): solid `.badge.bg-{success,info,warning,danger,primary}` use white text
   (`.badge` default --phoenix-badge-color:#fff) on Phoenix's mid-tone fills, which FAIL AA (e.g. white on
   success #25b003 = 2.88). Rather than touch the standardized brand colours, remap these solid badges to
   Phoenix's own AA-friendly SOFT style (the `badge-phoenix-*` values: pale tint + dark coloured text), light
   AND dark — using Phoenix's exact tokens so this is adoption, not a new palette. `.badge.bg-X` (0,0,2,0) +
   !important beats the `bg-X` utility's own !important fill. Only badges are affected (not other bg-* elems).
   `:not(.position-absolute)` EXEMPTS corner count-bubbles (notification/compliance dots are
   `position-absolute … badge rounded-pill bg-danger`) — those must stay SOLID/prominent, not faint.
   See tracker P2-5/P3-5. */
.badge.bg-primary:not(.position-absolute) { background-color: #e8f2f4 !important; color: #135e6b !important; }
.badge.bg-success:not(.position-absolute) { background-color: #d9fbd0 !important; color: #1c6c09 !important; }
.badge.bg-info:not(.position-absolute)    { background-color: #c7ebff !important; color: #005585 !important; }
.badge.bg-warning:not(.position-absolute) { background-color: #ffefca !important; color: #bc3803 !important; }
.badge.bg-danger:not(.position-absolute)  { background-color: #ffe0db !important; color: #b81800 !important; }
.dark .badge.bg-primary:not(.position-absolute) { background-color: rgba(var(--phoenix-primary-rgb), .08) !important; color: #7ab6c1 !important; }
.dark .badge.bg-success:not(.position-absolute) { background-color: rgba(var(--phoenix-success-rgb), .08) !important; color: #90d67f !important; }
.dark .badge.bg-info:not(.position-absolute)    { background-color: rgba(var(--phoenix-info-rgb), .08) !important; color: #60c6ff !important; }
.dark .badge.bg-warning:not(.position-absolute) { background-color: rgba(var(--phoenix-warning-rgb), .08) !important; color: #ffcc85 !important; }
.dark .badge.bg-danger:not(.position-absolute)  { background-color: rgba(var(--phoenix-danger-rgb), .08) !important; color: #f48270 !important; }

/* --- Preserved from iesmac-support.css (now stripped) -------------------
   Two small legacy bits the data-table override layer carried that a few pages
   still use directly. Re-authored Phoenix-sourced (no --md-*). The newer
   iesmac-empty-state component (_components.css) is the preferred API; this
   bare .empty-state covers the 2 legacy callers. */
.empty-state, .table-empty-state, .no-data {
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--phoenix-gray-700);
}
.empty-state > .ti:first-child, .empty-state .empty-icon, .empty-state > .icon-wrapper {
  font-size: 2.5rem;
  color: var(--phoenix-gray-400);
  margin-bottom: .5rem;
}
.empty-state .empty-title, .empty-state h3, .empty-state h4 {
  font-size: .875rem; font-weight: 600; color: var(--phoenix-emphasis-color, var(--phoenix-gray-900)); margin-bottom: .25rem;
}
.empty-state .empty-description, .empty-state .empty-text, .empty-state p {
  font-size: .75rem; color: var(--phoenix-gray-700); max-width: 280px; line-height: 1.5; margin: 0 auto;
}

/* Small status indicator dot (1 caller). */
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--phoenix-gray-400); }
.status-dot.success { background-color: var(--phoenix-success); }
.status-dot.warning { background-color: var(--phoenix-warning); }
.status-dot.danger  { background-color: var(--phoenix-danger); }
.status-dot.info    { background-color: var(--phoenix-info); }
.status-dot.primary { background-color: var(--phoenix-primary); }
.status-dot.pending { background-color: var(--phoenix-gray-400); }

/* --- Bootstrap 5.3 utility backfill -----------------------------------------
   This Phoenix build predates BS5.3's subtle/emphasis/utility classes; they
   existed only in the now-orphaned Vite bundle + material-skin's dark rules.
   Re-authored Phoenix-sourced so they (a) work in light mode (were no-ops) and
   (b) auto-adapt to dark mode via Phoenix's gray/brand var flipping — no
   separate dark rules needed. Branding flows through --phoenix-*-rgb. */
.fw-semibold { font-weight: 600 !important; }
.z-1 { z-index: 1 !important; } .z-2 { z-index: 2 !important; } .z-3 { z-index: 3 !important; }
.object-fit-cover { object-fit: cover !important; }

.text-body-secondary { color: var(--phoenix-gray-700) !important; }
.text-body-tertiary  { color: var(--phoenix-gray-600) !important; }
.text-body-emphasis  { color: var(--phoenix-gray-1000) !important; }
.text-primary-emphasis { color: var(--phoenix-primary) !important; }
.text-secondary-emphasis { color: var(--phoenix-secondary) !important; }
.text-success-emphasis { color: var(--phoenix-success) !important; }
.text-danger-emphasis  { color: var(--phoenix-danger) !important; }
.text-warning-emphasis { color: var(--phoenix-warning) !important; }
.text-info-emphasis    { color: var(--phoenix-info) !important; }

.bg-body-secondary { background-color: var(--phoenix-gray-100) !important; }
.bg-body-tertiary  { background-color: var(--phoenix-gray-200) !important; }
.bg-primary-subtle   { background-color: rgba(var(--phoenix-primary-rgb), .12) !important; }
.bg-secondary-subtle { background-color: rgba(var(--phoenix-secondary-rgb), .12) !important; }
.bg-success-subtle   { background-color: rgba(var(--phoenix-success-rgb), .12) !important; }
.bg-danger-subtle    { background-color: rgba(var(--phoenix-danger-rgb), .12) !important; }
.bg-warning-subtle   { background-color: rgba(var(--phoenix-warning-rgb), .12) !important; }
.bg-info-subtle      { background-color: rgba(var(--phoenix-info-rgb), .12) !important; }
.border-primary-subtle   { border-color: rgba(var(--phoenix-primary-rgb), .3) !important; }
.border-secondary-subtle { border-color: rgba(var(--phoenix-secondary-rgb), .3) !important; }
.border-success-subtle   { border-color: rgba(var(--phoenix-success-rgb), .3) !important; }
.border-danger-subtle    { border-color: rgba(var(--phoenix-danger-rgb), .3) !important; }
.border-warning-subtle   { border-color: rgba(var(--phoenix-warning-rgb), .3) !important; }
.border-info-subtle      { border-color: rgba(var(--phoenix-info-rgb), .3) !important; }

.btn-light  { color: var(--phoenix-gray-1100); background-color: var(--phoenix-gray-200); border-color: var(--phoenix-gray-200); }
.btn-light:hover, .btn-light:focus { color: var(--phoenix-gray-1100); background-color: var(--phoenix-gray-300); border-color: var(--phoenix-gray-300); }
.btn-dark   { color: #fff; background-color: var(--phoenix-gray-1100); border-color: var(--phoenix-gray-1100); }
.btn-dark:hover, .btn-dark:focus { color: #fff; background-color: var(--phoenix-gray-900); border-color: var(--phoenix-gray-900); }
.btn-outline-light { color: var(--phoenix-gray-700); border-color: var(--phoenix-gray-300); background-color: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus { color: var(--phoenix-gray-900); background-color: var(--phoenix-gray-100); border-color: var(--phoenix-gray-300); }

/* ============================================================================
   IESMAC bespoke components — ported Phoenix-clean (material-skin removed).
   Phoenix never had these (they were added during the material era); re-authored
   from --phoenix-* tokens so they're brand/dark-aware with no --md dependency.
   ============================================================================ */

/* Navbar search-close + calendar-toggle (were in _patterns.css). */
.navbar-top .search-box .search-close-btn, .navbar-top .search-box .btn-close-falcon,
.search-box .search-close-btn, .search-box .btn-close-falcon {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; opacity: .6;
  background-image: none; position: relative; right: 14px; cursor: pointer;
}
.navbar-top .search-box .search-close-btn::before, .search-box .search-close-btn::before {
  content: '×'; font-size: 18px; line-height: 1; color: var(--phoenix-gray-700); font-weight: 300;
}
.navbar-top .search-box .search-close-btn:hover, .search-box .search-close-btn:hover {
  background-color: var(--phoenix-gray-200); opacity: 1;
}
.navbar-top .calendar-toggle-btn {
  background: transparent; border: 0; padding: 0 6px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem; box-shadow: none;
}
.navbar-top .calendar-toggle-btn:hover { background-color: rgba(var(--phoenix-primary-rgb), .08); }

/* Empty-state component (iesmac-empty-*). */
.iesmac-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; }
.iesmac-empty-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--phoenix-gray-400); margin-bottom: .75rem; }
.iesmac-empty-icon-sm { font-size: 2rem; } .iesmac-empty-icon-md { font-size: 3rem; } .iesmac-empty-icon-lg { font-size: 4rem; }
.iesmac-empty-title { font-size: 1rem; font-weight: 600; color: var(--phoenix-gray-900); margin-bottom: .25rem; }
.iesmac-empty-message { font-size: .875rem; color: var(--phoenix-gray-700); max-width: 320px; margin: 0 auto; }

/* Filter bar (iesmac-filter-bar-*). */
.iesmac-filter-bar-search { flex: 1 1 auto; }
.iesmac-filter-bar-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.iesmac-filter-bar-action { margin-left: auto; }

/* Stat card + chart container + legend dot. */
.stat-card { padding: 1rem 1.25rem; border-radius: .5rem; background: var(--phoenix-card-bg, #fff); border: 1px solid var(--phoenix-gray-200); }
.chart-container { position: relative; width: 100%; min-height: 250px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; }

/* Stepper / wizard. */
.stepper, .stepper-horizontal { display: flex; align-items: center; gap: .5rem; }
.step { display: flex; align-items: center; gap: .5rem; flex: 1; }
.step-indicator { display: flex; align-items: center; }
.step-circle { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--phoenix-gray-300); color: var(--phoenix-gray-800); font-size: .8rem; font-weight: 600; }
.step.active .step-circle, .step.completed .step-circle { background: var(--phoenix-primary); color: #fff; }
.step-label { font-size: .8rem; color: var(--phoenix-gray-700); }

/* Timeline. */
.timeline-content { position: relative; padding-bottom: 1rem; padding-left: .25rem; }
.timeline-title { font-weight: 600; font-size: .875rem; }
.timeline-date { font-size: .75rem; color: var(--phoenix-gray-700); }

/* Kanban board. */
.iesmac-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.iesmac-kanban-column { flex: 0 0 300px; background: var(--phoenix-gray-100); border-radius: .5rem; display: flex; flex-direction: column; }
.iesmac-kanban-column-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--phoenix-gray-200); }
.iesmac-kanban-count { background: var(--phoenix-gray-300); color: var(--phoenix-gray-800); border-radius: 1rem; padding: .1rem .5rem; font-size: .75rem; }
.iesmac-kanban-column-body { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; min-height: 60px; }
.iesmac-kanban-card { background: var(--phoenix-card-bg, #fff); border: 1px solid var(--phoenix-gray-200); border-radius: .5rem; padding: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.iesmac-kanban-card-title { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.iesmac-kanban-card-subtitle { font-size: .75rem; color: var(--phoenix-gray-700); }
.iesmac-kanban-empty { padding: 1rem; text-align: center; color: var(--phoenix-gray-500); font-size: .8rem; }

/* --- Sidebar icon-aligned tree indent (AppGroup → Module → MenuItem) ---------
   Target: each level's left edge starts at the parent icon's x-position.
   AppGroup content starts at margin(0.75) + padding(1rem) = 1.75rem.
   AppGroup icon lands at ~2.75rem (1.75 + caret ~1rem).
   Module content must start there  → padding = 2.75 - 0.75(margin) = 2rem.
   Module icon lands at ~3.75rem    → menu padding = 3.75 - 0.75(margin) = 3rem.
   Phoenix default was 3.3rem (module) / 3.875rem (menu) — far too deep. */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav-link,
.navbar-vertical.navbar-expand-xxl .navbar-vertical-content .navbar-nav .nav .nav-link {
    padding-left: 2rem !important;
    scroll-margin-top: 200px;
}
.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav .nav-link,
.navbar-vertical.navbar-expand-xxl .navbar-vertical-content .navbar-nav .nav .nav .nav-link {
    padding-left: 3rem !important;
}
/* Allow multi-word labels to wrap rather than clip at reduced widths. */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav-link-text,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav .nav-link-text {
    white-space: normal;
    line-height: 1.3;
}

/* --- Sidebar hover: brand-aware light tint -----------------------------------
   Phoenix uses --phoenix-navbar-vertical-link-hover-bg for the hover fill; it
   defaults to a fixed gray. Wire it to the brand primary so every tenant gets
   their own colour at 8% opacity.
   CSS custom properties resolve lazily — rgba(var(--phoenix-primary-rgb), .08)
   evaluates at paint time, so each tenant's inline :root override is picked up
   automatically without any extra JS or server-side injection. */
:root {
    --phoenix-navbar-vertical-link-hover-bg: rgba(var(--phoenix-primary-rgb), .08);
}
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover {
    background-color: rgba(var(--phoenix-primary-rgb), .08) !important;
}

/* --- Sidebar compact icon→label gap ------------------------------------------
   Theme: nav-link-icon margin-right .625rem + nav-link-text padding-left 15px
   = ~25px dead space. Reduce to a tight 4px total. */
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link-icon {
    margin-right: 0.25rem !important;
}
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link-text {
    padding-left: 0 !important;
}

/* --- Sidebar caret rotation ---------------------------------------------------
   Phoenix rotation CSS targets .fa-caret-right (Font Awesome); we use Tabler
   Icons (.ti-caret-right) so the expand/collapse animation never fired. */
.dropdown-indicator .dropdown-indicator-icon .ti-caret-right {
    display: inline-block;
    transition: transform .2s ease;
}
.dropdown-indicator[aria-expanded=true] .dropdown-indicator-icon .ti-caret-right {
    transform: rotate(90deg);
}

/* ============================================================================
   Collapsed (icon-only) sidebar flyout — fix for the app's 3-LEVEL menu.
   Phoenix's collapsed-nav CSS assumes ONE `label-1` level (group → links) and
   turns every `.parent-wrapper.label-1` under a hovered item into its own
   absolute flyout. Our menu nests label-1 twice (AppGroup → Module → links), so
   the inner module wrappers became extra cascading flyouts that overlapped, with
   module labels hidden. Here we flatten the inner level INTO the single top-level
   flyout: render it inline, force its collapsed submenu open, and reveal labels.
   Scoped to .navbar-vertical-collapsed + :hover so the expanded sidebar is untouched.
   ============================================================================ */

/* 2nd-level wrapper: render inline inside the top-level flyout (not a 2nd cascade) */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .parent-wrapper.label-1 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    padding-bottom: 0 !important;
}
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .parent-wrapper.label-1 > .parent {
    width: auto !important;
    margin-left: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}
/* drop the speech-bubble caret on the inner (inline) panel */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .parent-wrapper.label-1 > .parent:after {
    display: none !important;
}
/* force nested module submenus (Bootstrap .collapse) open within the flyout so leaf links show */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .collapse.parent {
    display: block !important;
    height: auto !important;
}
/* reveal the nested module label-1 text + indent it; hide its caret (it's inline now) */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .nav-link.label-1 .nav-link-text {
    display: block !important;
    font-weight: 600;
}
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .nav-link.label-1 .dropdown-indicator-icon {
    display: none !important;
}
/* the inner module link shouldn't get the rounded hover-pill of a top-level item */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 .nav-link.label-1 {
    pointer-events: auto;
    border-radius: 0 !important;
}
/* Tall groups (many modules) → keep the flyout within the viewport and scroll.
   This is a static fallback: it can't account for the panel's runtime top offset,
   so on tall (1080p+) displays a high-anchored big group still ran past the bottom.
   The precise per-position clamp is applied inline by JS (page-scripts.html →
   "Collapsed sidebar fly-out viewport clamp"), which overrides this max-height. */
.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper:hover .parent-wrapper.label-1 > .parent {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}

/* Nepali (BS) datepicker popup ships with z-index:1000, which sits BELOW a Bootstrap
   modal (1055) / backdrop (1050) — so the calendar opened behind the modal and looked
   like "the picker isn't coming" on every in-modal date field (NOC orientation/insurance/
   welfare, work-permit, etc.). Lift it above the modal layer. !important because the
   vendor stylesheet loads after this file. */
.ndp-container {
    z-index: 1060 !important;
}