/* ============================================================================
   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/UI-CONSOLIDATION-PLAN.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;
}

/* -- 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; }

/* -- 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;
}
/* 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 */

/* --- Preserved from material-skin-data.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;
}