/* ═══════════════════════════════════════════════════════════════════
   APLUS CRM — SIDEBAR REDESIGN (UI/UX only, no logic changes)
   Modern premium SaaS education-CRM sidebar.
   Loaded AFTER styles.css & custom.css so overrides win on equal
   specificity. All rules stay scoped to .app-menubar-tabs so the
   remainder of the CRM is untouched.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --app-menubar-tabs: 240px;
  --sb-navy: #123B68;
  --sb-navy-2: #123B68;
  --sb-bg: #E9EDF5;
  --sb-border: #D2D9E5;
  --sb-text: #18324F;
  --sb-muted: #607089;
  --sb-soft: #E1E6F0;
  /* Hover fill. Matches --bs-primary (#5955D1) in styles.css, so a hovered row
     reads as the brand colour rather than the grey --sb-soft wash. White text
     on #5955D1 measures 5.8:1, so labels clear WCAG AA at this size. */
  --sb-hover-bg: #5955D1;
  --sb-active-bg: #D9DDF8;
  --sb-active-color: #4F46E5;
  --sb-active-text: #172554;
}

/* ── Overall shell ────────────────────────────────────────────── */
.app-menubar-tabs {
  box-sizing: border-box;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  box-shadow: none;
  overflow: hidden;
  font-family: "Instrument Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.app-menubar-tabs * { box-sizing: border-box; }
.app-menubar-tabs .app-navbar-brand,
.app-menubar-tabs .app-navbar-brand:hover { box-shadow: none; }

/* ── Logo / navy brand tile ───────────────────────────────────── */
.app-menubar-tabs .app-navbar-brand {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  min-width: 0;
  height: 72px;
  padding: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-navy);
  border-right: none;
}
.app-menubar-tabs .app-navbar-brand .navbar-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.app-menubar-tabs .app-navbar-brand img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 13px;
  background: #ffffff;
  padding: 5px;
  box-sizing: border-box;
  outline: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Content column (whole sidebar body) ──────────────────────── */
.app-menubar-tabs .app-tab-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--sb-bg);
  transition-property: width, left;
  transition-duration: 0.3s;
}

/* ── Brand header (navy) ──────────────────────────────────────── */
.app-menubar-tabs .app-tab-content .app-side-brands {
  height: 80px;
  width: 100%;
  padding: 0 14px 0 88px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--sb-navy-2), var(--sb-navy));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-menubar-tabs .app-side-brands .navbar-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  line-height: 1.1;
  min-width: 0;
  white-space: normal;
}
.app-menubar-tabs .app-side-brands .navbar-brand-text strong {
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.app-menubar-tabs .app-side-brands .navbar-brand-text small {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 4px;
  white-space: nowrap;
}

/* Collapse button (top-right of brand header) */
.app-menubar-tabs .sidebar-collapse-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.app-menubar-tabs .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.28); }
.app-menubar-tabs .sidebar-collapse-btn svg { width: 15px; height: 15px; }

/* ── Role switcher (segmented control, admins only) ───────────── */
.app-menubar-tabs .role-switch {
  padding: 10px 14px 4px;
  display: flex;
}
.app-menubar-tabs .role-switch .nav {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}
.app-menubar-tabs .role-switch .nav-item { flex: 1 1 0; margin: 0; }
.app-menubar-tabs .role-switch .menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text);
  background: #ffffff;
  border: 1px solid var(--sb-border);
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.app-menubar-tabs .role-switch .menu-link i { font-size: 15px; line-height: 1; }
.app-menubar-tabs .role-switch .menu-link:hover { background: var(--sb-soft); }
.app-menubar-tabs .role-switch .menu-link.active {
  background: var(--sb-active-bg);
  border-color: #C7CDF8;
  color: var(--sb-active-color);
}

/* ── Navigation area ──────────────────────────────────────────── */
.app-menubar-tabs .app-content-inner { position: relative; }
.app-menubar-tabs .app-tab-content .app-navbar {
  width: 100% !important;
  padding: 8px 14px 16px;
}
.app-menubar-tabs .side-menubar { padding: 0; margin: 0; list-style: none; }
.app-menubar-tabs .side-menubar > li { display: block; }

/* Group / heading labels */
.app-menubar-tabs .side-menubar .menu-heading { padding: 16px 10px 8px; }
.app-menubar-tabs .side-menubar .menu-heading .menu-label {
  color: var(--sb-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

/* Menu items */
.app-menubar-tabs .side-menubar .menu-item {
  position: relative;
  margin: 4px 0;
  border-radius: 10px;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--sb-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link > i {
  display: inline-flex;
  font-size: 20px;
  width: 22px;
  text-align: center;
  line-height: 1;
  color: #7B8FA8;
  transition: color 0.18s ease;
}
/* `white-space: nowrap` here is what pushed "Communication & Admin" underneath
   the collapse arrow. The label gets a 96px text box once the 22px icon, the
   14px gap and both 14px paddings are taken out of the 180px the link occupies
   alongside the arrow's grid column - and a flex item will not shrink below its
   content width (min-width:auto), so the text simply painted over the arrow and
   1px past the row edge. min-width:0 permits the shrink and the label wraps to
   two lines instead; labels that already fit stay on one line and are unaffected.
   overflow-wrap guards a single unbroken word. The arrow's column is reached
   under with a negative margin further down, which hands the 32px straight back
   as padding, so this 96px is not squeezed any further. */
.app-menubar-tabs .side-menubar .menu-item .menu-link .menu-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link:hover {
  background: var(--sb-hover-bg);
  color: #ffffff;
  transform: translateX(2px);
}
/* The icon carries its own colour (base #7B8FA8) and would stay grey on the
   blue fill, so it has to be pulled to white explicitly. */
.app-menubar-tabs .side-menubar .menu-item .menu-link:hover > i { color: #ffffff; }

/* Active item — light lavender */
.app-menubar-tabs .side-menubar .menu-item .menu-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.10);
}
.app-menubar-tabs .side-menubar .menu-item .menu-link.active > i { color: var(--sb-active-color); }
/* The active row is already a filled block: styles.css gives
   .app-menubar-tabs ... .menu-link.active a !important var(--bs-primary)
   background and white text, which beats the --sb-active-bg declared below.
   --bs-primary and --sb-hover-bg are both #5955D1, so the active row looks the
   same hovered as it does at rest - no visual change, but the row still gets
   the pointer feedback of every other item. Kept in case that !important rule
   is ever removed, in which case .active would otherwise out-specify :hover
   here and the current page's own link would stop responding.
   `transform` is left at the active rule's `none` - the row is already a filled
   block, so nudging it would just jitter. */
.app-menubar-tabs .side-menubar .menu-item .menu-link.active:hover {
  background: var(--sb-hover-bg);
  color: #ffffff;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link.active:hover > i { color: #ffffff; }

/* Submenu items (has-sub) — one row, one fill

   The arrow is a SIBLING of .menu-link, not a child, so it cannot be positioned
   from the link and never inherited its fill. Giving each half its own
   background is what split the row in two: the link carries
   `transform: translateX(2px)` on hover, so on :hover its rounded box slid 2px
   right and butted up against the arrow's own 7px-radius box with a notch
   between them - and hovering the arrow lit ONLY the arrow, leaving the label
   unfilled beside it.

   Laying the item out as a grid puts the arrow in the same cell as the link, so
   `align-items: center` centres it on the link row itself - correct at any
   label height and whether the submenu is open or closed, with no magic numbers
   and no change to the markup.

   The link then reaches back UNDER the arrow's column with a negative margin, so
   the link's own background IS the whole row bar: one box, one 10px radius, one
   fill. The arrow becomes a transparent control sitting on top of that bar
   rather than a second coloured box beside it. */
.app-menubar-tabs .side-menubar .menu-item.has-sub {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.app-menubar-tabs .side-menubar .menu-item.has-sub > .menu-link {
  grid-column: 1;
  /* Reach under the arrow's column - a 26px button plus a 6px margin = 32px -
     so the fill runs the full width of the row. The 32px is handed straight
     back as right padding, so the label keeps exactly the room it had while the
     arrow had a column of its own (measured: 96px text box, unchanged) and long
     labels wrap no earlier than before. */
  margin-right: -32px;
  padding-right: 46px;
}
.app-menubar-tabs .side-menubar .menu-item.has-sub > .sub-menu { grid-column: 1 / -1; }
.app-menubar-tabs .menu-item.has-sub .sub-toggle {
  grid-column: 2;
  /* Above the link, which now paints under this column: .menu-link is
     position: relative, so without this the bar would cover the chevron. It also
     keeps the button hit-testable over the wider link, so clicking the arrow
     still toggles instead of navigating. */
  position: relative;
  z-index: 2;
  margin-right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sb-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.app-menubar-tabs .menu-item.has-sub .sub-toggle:hover { background: var(--sb-active-bg); color: var(--sb-active-color); }
.app-menubar-tabs .menu-item.has-sub .sub-toggle i {
  font-size: 13px;
  line-height: 1;
  color: inherit;
  transition: transform 0.18s ease;
}
.app-menubar-tabs .menu-item.has-sub.open .sub-toggle i { transform: rotate(90deg); }

.app-menubar-tabs .side-menubar .menu-item.has-sub .sub-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}
.app-menubar-tabs .side-menubar .menu-item.has-sub.open .sub-menu { max-height: 200px; opacity: 1; }
.app-menubar-tabs .side-menubar .sub-menu .sub-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 12px 4px 44px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #78849A;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Inactive text/icon is a light, desaturated grey so the active row's
   #5955d1 blue separates from it by hue as well as brightness. The old
   #42546A sat within 1.35:1 of the active blue, which read as "no
   change at all". Icons carry no text contrast requirement, so they
   sit a shade lighter than the label. */
.app-menubar-tabs .side-menubar .sub-menu .sub-link i { font-size: 13px; color: #9AA5B5; }
.app-menubar-tabs .side-menubar .sub-menu .sub-link:hover { background: var(--sb-hover-bg); color: #ffffff; }
.app-menubar-tabs .side-menubar .sub-menu .sub-link:hover > i { color: #ffffff; }
/* Active child: text colour only. Must be DARKER than the parent's solid
   --bs-primary #5955d1 fill - measured at only ~11 rows of glyph sitting
   directly under a 48-row block of that identical blue, so matching it made
   the child read as part of the parent bar instead of as the selected page.
   #2F2AA8 separates by lightness (1.8:1 vs the parent, 3.0:1 vs inactive)
   and lands at 8.9:1 on the #E9EDF5 sidebar. Still blue, never white. */
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active,
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active:hover {
  background: transparent;
  color: #2F2AA8 !important;
  font-weight: 600;
}
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active i,
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active:hover i { color: #2F2AA8 !important; }
/* Same treatment as the top-level active link above: at rest the selected child
   stays dark-blue-on-transparent, but hovering fills the row so it still
   acknowledges the pointer. The text has to go white here - #2F2AA8 on #5955D1
   is roughly 2:1, whereas white is 5.8:1. */
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active:hover {
  background: var(--sb-hover-bg);
  color: #ffffff !important;
}
.app-menubar-tabs .side-menubar .sub-menu .sub-link.active:hover i { color: #ffffff !important; }

/* ── One row, one fill: label and arrow can never disagree ─────
   The chevron is a SIBLING of .menu-link and no longer has a background of its
   own - it sits on the link's fill. So it inherits nothing and would keep
   --sb-muted #607089, which measures 1.2:1 against the #5955D1 bar: invisible.
   It turns white whenever there is a bar behind it.

   Hovering the ARROW has to fill that bar too, or the arrow would be a lone
   chip floating beside an unfilled label - which is the same split, just
   narrower. So the row is driven by the ITEM rather than by the link:
     :not(:has(.sub-menu:hover))  a child row must not re-highlight its parent
                                  while the pointer is down inside the submenu
     :has(> a.menu-link)          the label-only (static) parents are <span>s,
                                  deliberately not links, and have no bar of
                                  their own to fill */
.app-menubar-tabs .side-menubar .menu-item.has-sub:not(:has(.sub-menu:hover)):hover:has(> a.menu-link) > .menu-link {
  background: var(--sb-hover-bg);
  color: #ffffff;
}
.app-menubar-tabs .side-menubar .menu-item.has-sub:not(:has(.sub-menu:hover)):hover:has(> a.menu-link) > .menu-link > i { color: #ffffff; }
/* The row nudges 2px right when the pointer is on the label, so hovering the
   arrow has to nudge it by the same amount - otherwise the bar jumps as the
   pointer crosses the seam. .active already pins `transform: none` (the row is a
   filled block there, so nudging it would only jitter), hence the :not(.active)
   on the arrow's own target. */
.app-menubar-tabs .side-menubar .menu-item.has-sub:not(:has(.sub-menu:hover)):hover:has(> a.menu-link:not(.active)) > .menu-link {
  transform: translateX(2px);
}
/* Chevron colour follows the bar behind it. `+` is the adjacent-sibling
   combinator; the markup is <a class="menu-link">…</a><button class="sub-toggle">.
   All three selectors require the parent to be a real <a>, i.e. a row that
   actually has a bar: a .menu-link-static <span> stays unfilled on hover (see
   its own rule below), so a white chevron there would be 1.2:1 on the sidebar
   and 1.2:1 on its lavender chip too - invisible either way. */
.app-menubar-tabs .side-menubar .menu-item.has-sub > a.menu-link:hover + .sub-toggle,
.app-menubar-tabs .side-menubar .menu-item.has-sub > a.menu-link.active + .sub-toggle,
.app-menubar-tabs .side-menubar .menu-item.has-sub:not(:has(.sub-menu:hover)):hover:has(> a.menu-link) > .sub-toggle {
  color: #ffffff;
}
/* Hovering the arrow on a filled row gets a white wash ON the brand blue - the
   lavender chip above is only legible against the unfilled #E9EDF5 sidebar. */
.app-menubar-tabs .side-menubar .menu-item.has-sub:not(:has(.sub-menu:hover)):hover:has(> a.menu-link) > .sub-toggle:hover {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}
/* Unfilled parents keep the muted chevron, tinted when the group is open. */
.app-menubar-tabs .side-menubar .menu-item.has-sub > .sub-toggle { color: var(--sb-muted); }
.app-menubar-tabs .side-menubar .menu-item.has-sub > .sub-toggle i { color: inherit; }
.app-menubar-tabs .side-menubar .menu-item.has-sub.open > .sub-toggle { color: var(--sb-active-color); }
.app-menubar-tabs .side-menubar .menu-item.has-sub.open > .sub-toggle i { transform: rotate(90deg); }

/* Group divider */
.app-menubar-tabs .side-menubar .menu-divider {
  border-bottom: 1px solid #E1E7F0;
  height: 0;
  min-height: 0;
  margin: 8px 10px;
}

/* Thin scrollbar */
.app-menubar-tabs .simplebar-scrollbar::before { background: #C3CEDA; }
.app-menubar-tabs .simplebar-track.simplebar-vertical { width: 6px; }

/* ── Collapsed (mini) state: icons only, tooltips on hover ─────── */
[data-app-sidebar=mini] { --app-menubar-tabs: 72px; }
[data-app-sidebar=mini] .app-menubar-tabs { width: 72px; }
[data-app-sidebar=mini] .app-menubar-tabs .app-navbar-brand { width: 72px; }
[data-app-sidebar=mini] .app-menubar-tabs .app-tab-content { width: 72px; overflow: hidden; }
[data-app-sidebar=mini] .app-menubar-tabs .app-side-brands { padding: 0; }
[data-app-sidebar=mini] .app-menubar-tabs .navbar-brand-text,
[data-app-sidebar=mini] .app-menubar-tabs .sidebar-collapse-btn,
[data-app-sidebar=mini] .app-menubar-tabs .role-switch,
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-label,
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-heading,
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-divider,
[data-app-sidebar=mini] .app-menubar-tabs .menu-item.has-sub .sub-toggle,
[data-app-sidebar=mini] .app-menubar-tabs .menu-item.has-sub .sub-menu { display: none; }
[data-app-sidebar=mini] .app-menubar-tabs .app-content-inner { padding: 6px 0; }
[data-app-sidebar=mini] .app-menubar-tabs .app-tab-content .app-navbar { padding: 4px 0; max-height: calc(100vh - 96px) !important; }
[data-app-sidebar=mini] .app-menubar-tabs .app-navbar { height: auto !important; }
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-item { margin: 3px 10px; }
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-item .menu-link {
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  min-height: 44px;
  transform: none;
  /* The arrow is display:none here, so its grid column collapses to 0 and there
     is no cell to reach under. Without this the link would stay 32px too wide
     and `justify-content: center` would park the icon 16px left of the rail. */
  margin-right: 0;
}
[data-app-sidebar=mini] .app-menubar-tabs .side-menubar .menu-item .menu-link > i { font-size: 20px; width: auto; }

/* ── Mini hover: temporarily reveal full sidebar ───────────────── */
[data-app-sidebar=mini-hover] { --app-menubar-tabs: 240px; }
[data-app-sidebar=mini-hover] .app-menubar-tabs { width: 240px; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .app-navbar-brand { width: 72px; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .app-tab-content { width: 240px; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .app-side-brands { padding: 0 14px 0 88px; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .navbar-brand-text,
[data-app-sidebar=mini-hover] .app-menubar-tabs .sidebar-collapse-btn { display: flex; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .role-switch { display: flex; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .side-menubar .menu-label { display: inline-block; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .side-menubar .menu-heading { display: block; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .side-menubar .menu-divider { display: block; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .menu-item.has-sub .sub-toggle { display: inline-flex; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .menu-item.has-sub .sub-menu { display: block; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .app-content-inner { padding: 0; }
[data-app-sidebar=mini-hover] .app-menubar-tabs .app-tab-content .app-navbar { padding: 8px 14px 16px; }

/* ── Page layout uses sidebar width ────────────────────────────── */
:has(.app-menubar-tabs) .app-wrapper { margin-left: var(--app-menubar-tabs); }

/* ── Neutralise the vendor theme's forced-collapse rules ──────────
   styles.css sets `--app-menubar-tabs: 80px` and offsets
   `.app-tab-content { left: -160px }` for every viewport <= 1480px,
   which is what collapses the desktop sidebar to a rail. The sidebar is
   loaded after styles.css, so these re-assert the real width. */
@media (min-width: 1192px) and (max-width: 1480px) {
  :root { --app-menubar-tabs: 240px; }
  :has(.app-menubar-tabs) .app-wrapper {
    margin-left: var(--app-menubar-tabs);
    padding-left: 0;
    padding-right: 0;
  }
  :has(.app-menubar-tabs) .app-toggler::after { display: none !important; }
}
@media (min-width: 1481px) {
  :root { --app-menubar-tabs: 240px; }
}
:has(.app-menubar-tabs) .app-header { padding-left: var(--app-menubar-tabs); }
:has(.app-menubar-tabs) .footer-wrapper { margin-left: var(--app-menubar-tabs); }

/* ── Icon accent colors per menu item ──────────────────────────── */
.app-menubar-tabs .side-menubar .menu-link[href="index.php"] > i { color: #4F46E5; }
.app-menubar-tabs .side-menubar .menu-link[href="chats.php"] > i { color: #4F46E5; }
.app-menubar-tabs .side-menubar .menu-link[href="classroom.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-assessments.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="classes.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-student-subject.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-student-schedule.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="class-holds.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="feedback.php"] > i { color: #EC4899; }
.app-menubar-tabs .side-menubar .menu-link[href="invoice-india.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="invoice-international.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-remuneration.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="reports.php"] > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link[href="class-reports.php"] > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link[href="missed-reports.php"] > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="registration-form.php"] > i { color: #7C3AED; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-registration.php"] > i { color: #7C3AED; }

/* Parent-only dropdown label (Registration, Parent Invoice, Reports, People,
   Communication & Admin). They are <span>s, not <a>s, so they must not borrow
   the link affordances (styles.css gives every .menu-link:hover the primary
   pill). They ARE clickable now - they open/close their own submenu - so they
   get the same row hover fill and a pointer cursor, just no navigation. */
.app-menubar-tabs .side-menubar .menu-link.menu-link-static { cursor: pointer; }
.app-menubar-tabs .side-menubar .menu-item .menu-link.menu-link-static:hover {
  background: var(--sb-hover-bg);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link.menu-link-static:hover > i { color: #ffffff; }
.app-menubar-tabs .side-menubar .menu-link.menu-link-static:focus {
  background: transparent;
  color: var(--sb-text);
  box-shadow: none;
  transform: none;
}
/* The href-based icon colour above no longer applies once the href is gone,
   so the dropdown parents carry their own colour class instead. */
.app-menubar-tabs .side-menubar .menu-link.menu-link-static:not(.active) > i { color: #7C3AED; }
.app-menubar-tabs .side-menubar .menu-link.menu-link-static.menu-ic-invoice:not(.active):not(:hover) > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link.menu-link-static.menu-ic-reports:not(.active):not(:hover) > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link.menu-link-static.menu-ic-people:not(.active):not(:hover) > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link.menu-link-static.menu-ic-admin:not(.active):not(:hover) > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="students.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="teachers.php"] > i { color: #16A34A; }
.app-menubar-tabs .side-menubar .menu-link[href="substitute-teachers.php"] > i { color: #16A34A; }
.app-menubar-tabs .side-menubar .menu-link[href="announcements.php"] > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-user.php"] > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-curriculum.php"] > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-subject.php"] > i { color: #7C3AED; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-academic-year.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-time-slot.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-timezone.php"] > i { color: #7C3AED; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-category.php"] > i { color: #EC4899; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-currency.php"] > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-country.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="terms.php"] > i { color: #7C3AED; }
.app-menubar-tabs .side-menubar .menu-link[href="email-reminder-settings.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="manage-settings.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="activity-logs.php"] > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link[href="student-home.php"] > i { color: #4F46E5; }
.app-menubar-tabs .side-menubar .menu-link[href="student-classroom.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="student-schedule.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="students-payment.php"] > i { color: #F59E0B; }
.app-menubar-tabs .side-menubar .menu-link[href="student-reports.php"] > i { color: #64748B; }
.app-menubar-tabs .side-menubar .menu-link[href="student-assignments.php"] > i { color: #EF4444; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-home.php"] > i { color: #4F46E5; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-classroom.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-schedule.php"] > i { color: #14B8A6; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-students.php"] > i { color: #2563EB; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-attendance.php"] > i { color: #16A34A; }
.app-menubar-tabs .side-menubar .menu-link[href="teacher-salary.php"] > i { color: #F59E0B; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* Desktop: 240px expanded sidebar (spec §18) */
@media (min-width: 1192px) {
  :root { --app-menubar-tabs: 240px; }
  .app-menubar-tabs { left: 0 !important; width: 240px; }
  .app-menubar-tabs .app-tab-content { left: 0 !important; top: 0; width: 240px !important; }
  .app-menubar-tabs.open .app-tab-content { left: 0 !important; }
  .app-menubar-tabs .app-side-brands { padding-left: 88px; }
  .app-menubar-tabs .app-side-brands .navbar-brand-text strong { font-size: 18px; }
  .app-menubar-tabs .app-side-brands .navbar-brand-text small { font-size: 11px; }
  [data-app-sidebar=mini] .app-menubar-tabs { left: 0 !important; width: 72px; }
  [data-app-sidebar=mini] .app-menubar-tabs .app-tab-content { width: 72px !important; }
  [data-app-sidebar=mini-hover] .app-menubar-tabs { width: 240px; }
  [data-app-sidebar=mini-hover] .app-menubar-tabs .app-tab-content { width: 240px !important; }
  [data-app-sidebar=mini-hover] { --app-menubar-tabs: 240px; }
  /* No backdrop needed while sidebar is inline on desktop */
  :has(.app-menubar-tabs) .app-toggler::after { display: none !important; }
}

/* Mobile / tablet portrait — off-canvas drawer (spec §20) */
@media (max-width: 1191px) {
  :root { --app-menubar-tabs: 240px; }
  .app-menubar-tabs {
    left: calc(-1 * var(--app-menubar-tabs));
    width: 240px;
    box-shadow: 10px 0 32px rgba(18, 59, 109, 0.14);
  }
  .app-menubar-tabs.open { left: 0; }
  .app-menubar-tabs .app-tab-content { left: 0 !important; width: 240px !important; }
  .app-menubar-tabs.open .app-tab-content { left: 0 !important; }
  .app-menubar-tabs .app-side-brands { padding-left: 88px; }
  .app-menubar-tabs .app-side-brands .navbar-brand-text strong { font-size: 18px; }
  .app-menubar-tabs .app-side-brands .navbar-brand-text small { font-size: 11px; }
  :has(.app-menubar-tabs) .app-wrapper { margin-left: 0; }
  :has(.app-menubar-tabs) .app-header { padding-left: 0; }
  :has(.app-menubar-tabs) .footer-wrapper { margin-left: 0; }
}