/* ==========================================================================
   COLLEGE ERP - ROYAL INDIGO + AMBER PREMIUM DESIGN SYSTEM
   ========================================================================== */

/* Fonts are loaded via <link> tags in the page head (preconnect + stylesheet)
   instead of @import, so they don't serialize behind this file's download. */

:root {
  /* ONE TYPEFACE, EVERYWHERE. Inter carries the whole product - body,
     headings, buttons, badges, the printed card. Headings used to be set in
     Outfit, which meant a second family fetched on every page for the sake of
     a slightly rounder H1, and a report card whose title and figures were in
     two different hands. --font-heading is kept as a NAME because a hundred
     rules read it; it simply resolves to the same stack now. */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Compact control sizing (buttons, inputs) */
  --btn-padding-y: 0.3125rem;
  --btn-padding-x: 0.75rem;
  --btn-font-size: 0.8125rem;
  --btn-sm-padding-y: 0.2rem;
  --btn-sm-padding-x: 0.5rem;
  --btn-sm-font-size: 0.75rem;

  /* Palette taken from the ShikshaConnect logo
     (assets/images/shiksha-logo-horizontal.png): navy #022751 at hue 212,
     green #05912B at hue 136. The primary family below is that navy at
     four lightnesses; the success family further down is that green. Amber
     and the other semantics are not in the logo and stay as they are - a
     warning that shares the brand colour stops reading as a warning. */
  --color-primary: #0B3D7A;         /* brand navy, lifted for UI contrast */
  --color-primary-hover: #08305F;
  --color-primary-dark: #022751;
  --color-primary-soft: rgba(11, 61, 122, 0.08);
  --color-primary-gradient: linear-gradient(135deg, #1B5FAF 0%, #0B3D7A 50%, #022751 100%);

  --color-gold: #F59E0B;            /* Amber 500 */
  --color-gold-hover: #D97706;

  /* ---------------------------------------------------------------
     Colours that were hardcoded in rules until 2026-08-13.

     They are here for the reason every other colour is: when the palette
     changes, a hex sitting in a rule does not error - it simply keeps
     painting the old colour, on one screen, until somebody notices. That
     is the hardest kind of fault to find because nothing is broken.
     --------------------------------------------------------------- */

  /* Neutrals between --border-color and --text-muted. */
  --border-strong: #CBD5E1;
  --surface-tint: #EEF2F7;
  --surface-raised: #FBFCFD;

  /* Brand relatives: the lighter indigo used for focus rings and hovers,
     and the violet the gate pass screens borrow. */
  --color-primary-light: #1B5FAF;
  --color-violet: #7C3AED;

  /* Semantic colours at full strength - the text on a soft badge, where
     the -soft pair below is its background. */
  --color-success-strong: #0A7A29;
  --color-danger-strong: #C81E1E;
  --color-info-strong: #0369A1;
  --color-warning-strong: #A64B08;
  --color-gold-strong: #8A6600;

  /* Deep text for a badge that sits on its own soft background. */
  --on-success-soft: #064D19;
  --on-warning-soft: #92400E;
  --on-danger-soft: #991B1B;
  --on-info-soft: #0C4A6E;

  /* The soft badge family: a background and the border that goes with it.
     Always used as a pair - a background from one row with a border from
     another is how a badge ends up looking like a mistake. */
  --bg-primary-soft: #EDF3FB;
  --border-primary-soft: #BBD3EE;
  --bg-info-soft: #F0F9FF;
  --border-info-soft: #BAE6FD;
  --bg-danger-soft: #FEF2F2;
  --border-danger-soft: #FECACA;
  --bg-success-soft: #ECFBF0;
  --border-success-soft: #A8E9BB;

  /* WhatsApp. Not ours to choose - these are the brand values, and a
     palette change must NOT carry them along. */
  --brand-whatsapp: #25D366;
  --brand-whatsapp-dark: #128C7E;

  /* Violet soft pair, matching the badge family above. */
  --bg-violet-soft: #F5F3FF;
  --border-violet-soft: #DDD6FE;

  /* The template designer's own chrome. A dark bar and a mid grey desk, and
     they are deliberately NOT the page surfaces: the whole point of that
     screen is to show a white sheet as paper lying on something, which it
     cannot do if the something is the page colour. Tokens rather than
     literals so a palette change carries them. */
  --tpl-topbar-bg: #0F172A;
  --tpl-topbar-fg: #FFFFFF;
  --tpl-stage-bg: #6B7280;
  /* A disabled control. Grey by intent, not by palette - it must stay
     visibly dead when the brand colour changes around it. */
  --color-disabled: #CCCCCC;
  --color-gold-soft: rgba(245, 158, 11, 0.1);

  --color-secondary: #475569;

  --color-success: #0C9532;
  --color-success-soft: rgba(12, 149, 50, 0.08);
  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245, 158, 11, 0.08);
  --color-danger: #EF4444;
  --color-danger-soft: rgba(239, 68, 68, 0.08);
  --color-info: #0EA5E9;
  --color-info-soft: rgba(14, 165, 233, 0.08);

  /* Clean Backgrounds & Surfaces (Slate 50 / Slate 100) */
  --body-bg: #F8FAFC;
  --surface-bg: #FFFFFF;
  --surface-secondary: #F1F5F9;
  --border-color: #E2E8F0;
  
  /* Typography Tokens (Slate 900 / Slate 500) */
  --text-main: #0F172A;
  /* 4.23:1 on the tinted surfaces at #64748B - under the 4.5:1 a body
     of text needs, and it is the colour of every form label, every
     breadcrumb and every "showing 1 to 25 of 150". One step darker
     clears it on white, the body, the page and the tint at once. */
  --text-muted: #5A6B80;
  --text-inverse: #FFFFFF;

  /* Header Tokens */
  --header-bg: #022751;
  --header-height: 95px;
  --subnav-height: 48px;

  /* Shadows - Minimalist Razor-sharp & Elevated SaaS Elevation */
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.12), 0 6px 12px -4px rgba(15, 23, 42, 0.06);
  --shadow-primary: 0 4px 14px rgba(11, 61, 122, 0.35);
  --shadow-primary-hover: 0 6px 22px rgba(11, 61, 122, 0.48);

  /* Border Radius - Sharp Precision Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Header Gradient */
  --header-gradient: linear-gradient(135deg, #022044 0%, #0B3D7A 55%, #184A88 100%);

  /* Calendar type colours */

  /* Steer Bootstrap 5.3 utilities */
  --bs-primary: #0B3D7A;
  --bs-primary-rgb: 11, 61, 122;
  --bs-link-color: #0B3D7A;
  --bs-link-color-rgb: 11, 61, 122;
  --bs-link-hover-color: #08305F;
  --bs-link-hover-color-rgb: 8, 48, 95;
}

/* Bootstrap components that carry their own colour variables */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination {
  --bs-pagination-color: var(--color-primary);
  --bs-pagination-hover-color: var(--color-primary-hover);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-focus-color: var(--color-primary-hover);
}

/* Dark Theme Overrides.
   NOT REACHABLE TODAY, and kept on purpose. All five layouts hardcode
   data-bs-theme="light" on <html> and nothing anywhere sets dark, so this
   block never matches - it is the groundwork for a switch that has not been
   built, not an accident. Said here because a colour audit that reads the
   whole file will otherwise weigh these nine values against the light
   surfaces and report forty failures that are not there. */
[data-bs-theme="dark"] {
  --body-bg: #090D16;
  --surface-bg: #0F172A;
  --surface-secondary: #1E293B;
  --border-color: #334155;
  
  --text-main: #F8FAFC;
  
  --text-muted: #94A3B8;

  --header-bg: #020617;
  --header-gradient: linear-gradient(90deg, #020617 0%, #0F172A 50%, #020617 100%);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Global Styles & Sticky Layout */
html, body {
  height: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--body-bg);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.8125rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, .h1 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-main); margin-bottom: 0.45rem; }
h2, .h2 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text-main); margin-bottom: 0.4rem; }
h3, .h3 { font-family: var(--font-heading); font-size: 0.975rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); margin-bottom: 0.35rem; }
h4, .h4 { font-family: var(--font-heading); font-size: 0.925rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); margin-bottom: 0.35rem; }
h5, .h5 { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.3rem; }
h6, .h6 { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.3rem; }
.font-heading { font-family: var(--font-heading); }

a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   1. SHIKSHACONNECT TOP HEADER BAR & STICKY WRAPPER
   ========================================================================== */
.sticky-header-master-wrapper {
  position: sticky;
  top: 0;
  z-index: 1040;
  transition: all 0.25s ease;
}

.erp-top-header {
  background: var(--header-gradient) !important;
  height: var(--header-height);
  min-height: 95px;
  color: var(--surface-bg);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 3.5rem 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  box-shadow: 0 8px 24px rgba(2, 32, 68, 0.22);
  position: relative;
  transition: all 0.3s ease;
}

.dropdown-menu {
  z-index: 1100 !important;
}

/* the brand + college-name group */
.header-brand-group {
  min-width: 0;
  flex: 0 0 auto;
}

/* Center Search Pill */
.header-search-wrap {
  flex: 1;
  max-width: 380px;
  position: relative;
  margin: 0 0.5rem;
}

.header-search-input {
  width: 100%;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 0 3.8rem 0 2.3rem;
  color: var(--text-inverse);
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
}

.header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.header-search-input:focus {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.header-search-icon-left {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  pointer-events: none;
}

.header-search-badge {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-inverse);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* THE ONE HEADER THAT STILL CARRIES THE NAME is the public admission form:
   a parent arriving from a link has nothing else on the page telling them
   whose school this is. It is a two line block - the name over "Admission
   enquiry" - so the rule has to reach the lines as well as the box: the flex
   item needs min-width so it can shrink at all, and each line inside it needs
   the ellipsis. With only one of the two, a long name wrapped to three lines
   and pushed the year badge out of a bar whose height is fixed. */
.header-college-name,
.header-college-name > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 1400px) {
  .erp-top-header { padding: 0.85rem 1.25rem 0; }
}

@media (max-width: 1200px) {
  .erp-top-header { padding: 0.85rem 1rem 0; }
  .header-right-tools { gap: 0.6rem; }
  .session-picker { max-width: 140px; }
}

@media (max-width: 992px) {
  .erp-top-header {
    height: auto;
    min-height: 85px;
    padding: 0.85rem 1.5rem 2.8rem;
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
  }
}

@media (max-width: 768px) {
  .erp-top-header {
    padding: 0.75rem 1.25rem 2.6rem;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  .session-picker { max-width: 110px; }
}

@media (max-width: 576px) {
  .erp-top-header {
    padding: 0.65rem 0.85rem 2.4rem;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }
  .session-picker {
    max-width: 105px;
    font-size: 0.75rem;
    height: 32px;
    padding: 0 0.5rem;
  }
  .user-profile-badge {
    padding: 0 0.2rem 0 0.5rem;
    height: 32px;
  }
}

.erp-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--surface-bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

/* The brand was a lettered pill once. Both places that draw it now -
   layout/default.php and login.php - carry an <img>, so the three rules
   that styled .erp-logo-pill had nothing left to reach. Removed. */

.header-right-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* One control family: session pill, icon circles and the user badge share a
   36px height, one border alpha and one calm hover. The mixed heights and the
   lift-and-scale hovers were what made this corner read as unserious. */
.session-picker {
  background: rgba(255, 255, 255, 0.08);
  color: var(--surface-bg);
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 50px;
  height: 36px;
  padding: 0 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  outline: none;
  max-width: 190px;
  text-overflow: ellipsis;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.session-picker:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.session-picker option { background-color: var(--text-main); color: var(--surface-bg); }

.header-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--surface-bg);
  font-size: 0.95rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.header-icon-btn .badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.6rem;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50px;
  border: 2px solid var(--header-bg);
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--surface-bg);
  font-weight: 500;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  height: 36px;
  padding: 0 0.3rem 0 0.95rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.user-profile-badge:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  flex-shrink: 0;
  position: relative;
}

.user-profile-badge .user-avatar-circle {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.18);
  color: var(--surface-bg);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.user-profile-badge .user-avatar-circle::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background-color: var(--color-success);
  border: 2px solid var(--header-bg);
  border-radius: 50%;
}

/* User Profile Dropdown Styling */
.erp-user-dropdown {
  min-width: 250px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  padding: 0 !important;
  overflow: hidden;
  animation: dropdownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
  padding: 0.9rem 1rem 0.75rem;
  background: linear-gradient(180deg, var(--body-bg) 0%, var(--surface-bg) 100%);
}

.user-dropdown-item {
  padding: 0.5rem 0.85rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.user-dropdown-item i {
  font-size: 0.95rem;
  opacity: 0.85;
}

.user-dropdown-item:hover {
  background-color: var(--surface-secondary) !important;
  color: var(--color-primary) !important;
  transform: translateX(3px);
}

.user-dropdown-item:hover i {
  opacity: 1;
}

.user-dropdown-item.logout-item {
  color: var(--color-danger) !important;
}

.user-dropdown-item.logout-item i {
  color: var(--color-danger) !important;
}

.user-dropdown-item.logout-item:hover {
  background-color: var(--bg-danger-soft) !important;
  color: var(--color-danger-strong) !important;
}

/* ==========================================================================
   2. SUB-HEADER TOP NAVIGATION TABS BAR & OVERLAPPING FLOATING CARD
   ========================================================================== */
.menu-overlap-container {
  padding: 0 3.5rem;
  max-width: 100%;
  margin: -30px auto 0;
  position: relative;
  z-index: 25;
}

.erp-subnav-bar {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -4px rgba(2, 32, 68, 0.12), 0 3px 8px -2px rgba(2, 32, 68, 0.04);
  padding: 0.42rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: all 0.2s ease;
}

.subnav-tabs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.subnav-tabs::-webkit-scrollbar { display: none; }

.subnav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.subnav-link .title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.005em;
}

.subnav-link .title i {
  font-size: 0.95rem;
  opacity: 0.85;
  transition: opacity 0.18s ease;
}

.subnav-link:hover {
  background-color: var(--bg-primary-soft);
  color: var(--color-primary);
  border-color: var(--border-primary-soft);
}

.subnav-link:hover .title i { opacity: 1; }

.subnav-link:focus-visible {
  color: var(--text-main);
}

.subnav-link.active {
  background: var(--color-primary) !important;
  color: var(--text-inverse) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 3px 12px rgba(11, 61, 122, 0.32) !important;
}

.subnav-link.active .title {
  color: var(--text-inverse) !important;
  font-weight: 600;
}

.subnav-link.active .title i {
  color: var(--text-inverse) !important;
  opacity: 1;
}

/* Institution / School Name Badge inside Menu Bar in Grey Box */
.menu-school-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.menu-school-badge i {
  color: var(--color-primary);
  font-size: 0.88rem;
}

.menu-card-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.live-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-success);
  background: var(--color-success-soft);
  border: 1px solid var(--border-success-soft);
  padding: 3px 10px;
  border-radius: 50px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background-color: var(--color-success);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(12, 149, 50, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(12, 149, 50, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(12, 149, 50, 0); }
}

@media (max-width: 1200px) {
  .menu-overlap-container {
    padding: 0 1rem;
    margin-top: -30px;
  }
}

@media (max-width: 992px) {
  .menu-overlap-container {
    padding: 0 0.875rem;
    margin-top: -26px;
  }
  .erp-subnav-bar {
    padding: 0.42rem 0.65rem;
  }
  .subnav-link {
    padding: 0.42rem 0.95rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 768px) {
  .menu-overlap-container {
    padding: 0 1rem;
    margin-top: -24px;
  }
  .menu-card-right {
    display: none !important;
  }
  .erp-subnav-bar {
    padding: 0.35rem 0.5rem;
  }
  .subnav-link {
    padding: 0.38rem 0.8rem;
    font-size: 0.8rem;
  }
  .subnav-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subnav-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 576px) {
  .menu-overlap-container {
    padding: 0 0.75rem;
    margin-top: -22px;
  }
  .subnav-link {
    padding: 0.35rem 0.7rem;
    font-size: 0.76rem;
  }
}

@media print {
  .sticky-header-master-wrapper {
    display: none !important;
  }
}

/* ==========================================================================
   3. EVENT BANNER BARS & SYSTEM TICKER
   ========================================================================== */
.event-banner-bar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--surface-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 14px rgba(11, 61, 122, 0.25);
  font-weight: 600;
  font-size: 0.875rem;
}

.event-banner-bar .btn-banner {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--surface-bg) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 0.3rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.event-banner-bar .btn-banner:hover {
  background-color: var(--surface-bg) !important;
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

.system-status-ticker {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 0.45rem 1.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.status-indicator-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-success-soft);
  color: var(--on-success-soft);
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-dot-pulse {
  width: 7px;
  height: 7px;
  background-color: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(12, 149, 50, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(12, 149, 50, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(12, 149, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 149, 50, 0); }
}

/* ==========================================================================
   4. MAIN WRAPPER & CARDS
   ========================================================================== */
.main-wrapper {
  padding: 1.15rem 3.5rem;
  max-width: 100%;
  margin: 0 auto;
  flex: 1 0 auto;
  width: 100%;
}

@media (max-width: 992px) {
  .main-wrapper { padding: 0.875rem 0.875rem; }
}

@media (max-width: 576px) {
  .main-wrapper { padding: 0.65rem 0.5rem; }
}

.card-custom {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-custom:hover {
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

.card-custom-header {
  padding: 0.65rem 1.15rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-bg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* Everything after the title clusters right. space-between let a lone
     primary button float mid-air between the title and the export tools,
     and each screen looked arranged by accident. */
  justify-content: flex-end;
}

.card-custom-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 auto 0 0;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: -0.01em;
}

/* One height for every control that sits in a card header, whatever class
   soup the view gave it. The views reached for py-2/px-3/btn-sm by hand and
   no two screens agreed, which is why the toolbar read as clutter. */
.card-custom-header .btn,
.card-custom-header a[class*="btn-"],
.card-custom-header button[class*="btn"] {
  height: 32px;
  min-height: 32px !important; /* .btn-primary-custom pins 34px, out-specify it */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.card-custom-header .btn i,
.card-custom-header a[class*="btn-"] i {
  font-size: 0.85rem;
}

.card-custom-body { padding: 1.3rem 1.4rem; }

/* ==========================================================================
   5. STAT CARDS & SOFT BADGES
   ========================================================================== */
/* Forms & Inputs */
.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 0.42rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-main);
  background-color: var(--surface-bg);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 38px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary-light);
  background-color: var(--surface-bg);
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.14);
  outline: none;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}

/* Textarea */
textarea.form-control {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

/* Placeholder */
.form-control::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

/* Disabled & Readonly */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--surface-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.75;
  border-color: var(--border-color);
}

/* Validation: Invalid */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* Validation: Valid */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(12, 149, 50, 0.08) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(12, 149, 50, 0.18) !important;
}

.invalid-feedback {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-danger-strong);
  margin-top: 0.2rem;
}

.valid-feedback {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-success-strong);
  margin-top: 0.2rem;
}

/* Form Check / Radio */
.form-check {
  min-height: auto;
  margin-bottom: 0.3rem;
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  border: 1.5px solid var(--border-strong);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.form-check-input:hover {
  border-color: var(--color-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.14);
  border-color: var(--color-primary);
}

.form-check-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  padding-left: 0.15rem;
}

/* Switch Toggle */
.form-switch .form-check-input {
  width: 2.25em;
  height: 1.2em;
  border-radius: 50px;
  border: 1.5px solid var(--border-strong);
  background-color: var(--border-color);
  background-image: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
}

.form-switch .form-check-input::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: var(--surface-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-switch .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-switch .form-check-input:checked::before {
  left: calc(100% - 0.85em - 2px);
}

/* File Input */
input[type="file"].form-control {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.6;
}

input[type="file"].form-control::file-selector-button {
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  margin-right: 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

input[type="file"].form-control::file-selector-button:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Input Group */
.input-group-text {
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius-md);
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}

/* A STRAY CLOSING BRACE STOOD HERE, and it closed nothing - brace depth went
   to -1 at this line. A CSS parser meeting one at the top level enters error
   recovery and discards the NEXT rule whole, so .badge-soft-primary below was
   never applied at all: no fill, no border, and Bootstrap's own white .badge
   colour - i.e. invisible - on every screen in the ERP that draws a primary
   soft pill. Every badge from .badge-soft-gold down was fine, which is what
   made it read as one broken badge rather than as a parse error.
   Do not put a literal brace in this comment: a brace-balance check counts
   comments too, and this file would look unbalanced again. */

/* Soft Badges */
.badge-soft-primary { background: rgba(11, 61, 122, 0.08); color: var(--color-primary); border: 1px solid rgba(11, 61, 122, 0.22); }
.badge-soft-gold { background: rgba(245, 158, 11, 0.08); color: var(--color-warning-strong); border: 1px solid rgba(245, 158, 11, 0.22); }
.badge-soft-success { background: rgba(12, 149, 50, 0.08); color: var(--on-success-soft); border: 1px solid rgba(12, 149, 50, 0.22); }
.badge-soft-warning { background: rgba(245, 158, 11, 0.08); color: var(--on-warning-soft); border: 1px solid rgba(245, 158, 11, 0.22); }
.badge-soft-danger { background: rgba(239, 68, 68, 0.08); color: var(--on-danger-soft); border: 1px solid rgba(239, 68, 68, 0.22); }
.badge-soft-info { background: rgba(14, 165, 233, 0.08); color: var(--on-info-soft); border: 1px solid rgba(14, 165, 233, 0.22); }
/* The last two rounded the set out. Both are returned by helpers that build a
   class name - get_student_status_class() and friends - so a plain scan of the
   views never sees them and an "Alumni" or a "Not gone yet" pill was rendering
   with no fill and no border at all.
   secondary : a state that is neither good nor bad
   dark      : a state that is finished and filed - Alumni, Completed */
.badge-soft-secondary { background: rgba(71, 85, 105, 0.08); color: var(--color-secondary); border: 1px solid rgba(71, 85, 105, 0.22); }
.badge-soft-dark { background: rgba(15, 23, 42, 0.08); color: var(--text-main); border: 1px solid rgba(15, 23, 42, 0.22); }

.badge-custom {
  padding: 0.25em 0.65em;
  font-weight: 500;
  border-radius: 50px;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   BUTTONS & SEARCH CONTROLS DESIGN SYSTEM (COMPACT ENTERPRISE SAAS)
   ========================================================================== */
.btn-primary-custom,
.btn-primary {
  background: var(--color-primary-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--surface-bg) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.35rem 0.95rem !important;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(11, 61, 122, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  min-height: 34px !important;
  line-height: 1.4;
}

.btn-primary-custom:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 60%, var(--color-primary-dark) 100%) !important;
  color: var(--surface-bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(11, 61, 122, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary-custom:active,
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(11, 61, 122, 0.3);
}

/* Dedicated Search Button Enhancements */
.btn-primary-custom i.bi-search,
.btn-primary i.bi-search,
button[type="submit"] i.bi-search {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.btn-primary-custom:hover i.bi-search,
.btn-primary:hover i.bi-search,
button[type="submit"]:hover i.bi-search {
  transform: scale(1.15) rotate(-6deg);
}

.btn-secondary-custom,
.btn-light {
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.35rem 0.9rem !important;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  min-height: 34px !important;
  line-height: 1.4;
}

.btn-secondary-custom:hover,
.btn-light:hover {
  background-color: var(--surface-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

/* Compact Utility Overrides */
.btn-primary-custom.py-2,
.btn-primary.py-2,
.btn-secondary-custom.py-2,
.btn-light.py-2 {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Modern Soft Outline & Action Chips */
.btn-outline-danger {
  background-color: var(--bg-danger-soft) !important;
  border: 1px solid var(--border-danger-soft) !important;
  color: var(--color-danger-strong) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  border-radius: var(--radius-md) !important;
  padding: 0.25rem 0.62rem !important;
  transition: all 0.18s ease;
}

.btn-outline-danger:hover {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--text-inverse) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}

.btn-outline-warning {
  background-color: var(--color-warning-soft) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: var(--on-warning-soft) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  border-radius: var(--radius-md) !important;
  padding: 0.25rem 0.62rem !important;
  transition: all 0.18s ease;
}

.btn-outline-warning:hover {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--text-inverse) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.btn-outline-secondary {
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  border-radius: var(--radius-md) !important;
  padding: 0.25rem 0.62rem !important;
  transition: all 0.18s ease;
}

.btn-outline-secondary:hover {
  background-color: var(--surface-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

/* (Consolidated into DATATABLES & GLOBAL TABLES section below) */

.dataTables_wrapper .row {
  align-items: center;
}

.dataTables_info,
.dataTables_wrapper .dataTables_info {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding-top: 0.75rem !important;
}

.dataTables_length,
.dataTables_wrapper .dataTables_length {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

.dataTables_length select,
.dataTables_wrapper .dataTables_length select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0.2rem 1.75rem 0.2rem 0.65rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  background-color: var(--surface-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.dataTables_length select:focus {
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.14) !important;
}

.dataTables_filter,
.dataTables_wrapper .dataTables_filter {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

.dataTables_filter input,
.dataTables_wrapper .dataTables_filter input {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  background-color: var(--surface-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-left: 0.5rem !important;
}

.dataTables_filter input:focus {
  border-color: var(--color-primary-light) !important;
  background-color: var(--surface-bg) !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.14) !important;
  outline: none !important;
}

.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate,
.pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  padding-top: 0.75rem !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Reset parent list items so they never draw duplicate borders or backgrounds */
.pagination .page-item,
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Target strictly the inner clickable anchor links */
.pagination .page-item .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button > a {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 0.65rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--surface-bg) !important;
  color: var(--color-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
}

/* Hover State */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.disabled):not(.current),
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button:not(.active):not(.disabled) > a:hover {
  background: var(--body-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--color-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
}

/* Active / Current Page State */
.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button.active > a {
  background: var(--color-primary-gradient) !important;
  border: 1px solid transparent !important;
  color: var(--surface-bg) !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(11, 61, 122, 0.35) !important;
  transform: none !important;
}

/* Disabled State (Previous / Next when inactive) */
.pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button.disabled > a {
  background: var(--body-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   6. FULLCALENDAR & DATATABLES CUSTOMIZATIONS
   ========================================================================== */
.fc {
  font-family: var(--font-primary) !important;
}

.fc-header-toolbar {
  margin-bottom: 1rem !important;
}

.fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fc .fc-button-group {
  display: flex;
  align-items: center;
  gap: 0.35rem !important;
}

.fc .fc-button-group > .fc-button {
  border-radius: 6px !important;
  margin: 0 !important;
}

.fc-toolbar-title {
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  color: var(--text-main) !important;
  font-size: 1.2rem !important;
}

.fc-button-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  box-shadow: 0 2px 6px rgba(11, 61, 122, 0.2) !important;
}

.fc-button-primary:hover {
  background-color: var(--color-primary-hover) !important;
}

.fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.fc-col-header-cell {
  background-color: var(--surface-secondary);
  padding: 8px 0 !important;
}

.fc-col-header-cell-cushion {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}

.fc-daygrid-day-number {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-main);
  text-decoration: none !important;
  padding: 4px 8px !important;
}

.fc-event {
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border: none !important;
}

/* ==========================================================================
   7. SHIKSHACONNECT FLOATING RIGHT SIDE-DOCK DRAWER (WHATSAPP, CALL, APP LINKS)
   ========================================================================== */
/* z-layers: subnav 1040 < dock 1045 < backdrop/header 1050 < modal 1055 < toast 20000 */
.erp-side-dock {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  /* THE CONTAINER MUST NOT BE A HIT TARGET.
     It is a fixed flex column at z-index 1045, so its box sits over whatever
     the page has at the right-hand edge - and the box is far taller than the
     three chips inside it, because the gaps between them and the space either
     side are part of it. Without this, a click aimed at a control underneath
     lands on this empty div instead and simply does nothing. That is what made
     "Save layout" on the template designer unclickable: the button was under a
     GAP between two dock chips, not under a chip.
     Pointer events are handed back to the chips themselves below, so the dock
     still works exactly as before - it just stops swallowing clicks meant for
     the page. */
  pointer-events: none;
}

body.modal-open .erp-side-dock { display: none; }

.side-dock-item {
  /* clicks come back on the chips themselves - see .erp-side-dock above */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 50px 0 0 50px;
  padding: 0.35rem 0.4rem 0.35rem 0.6rem;
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.12);
  transform: translateX(calc(100% - 40px));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-main);
  text-decoration: none;
}

.side-dock-item:hover {
  transform: translateX(0);
  box-shadow: -6px 6px 20px rgba(0, 0, 0, 0.18);
}

/* A CHIP MUST NOT SLIDE OVER THE PAGE.
   The dock is pinned to the middle of the right edge, and on anything short
   of a 1950px screen that is exactly where every list keeps its action
   column : hovering a chip slid a 208px white pill across the edit / status
   / delete buttons of three or four rows, so a hovered row looked as if the
   highlight stopped half way. The label therefore only opens where the
   gutter beside the card is wide enough to hold it. Below that the chip
   stays the icon it already is and the label is the title tooltip. */
@media (max-width: 1949px) {
  .side-dock-text { display: none; }
  .side-dock-item,
  .side-dock-item:hover { transform: translateX(0); }
  .side-dock-item { padding: 0.35rem 0.5rem; }
}

.side-dock-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--surface-bg);
  flex-shrink: 0;
}

.side-dock-item.whatsapp .side-dock-icon {
  background: linear-gradient(135deg, var(--brand-whatsapp) 0%, var(--brand-whatsapp-dark) 100%);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

.side-dock-item.helpline .side-dock-icon {
  background: var(--header-gradient);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.35);
}

.side-dock-item.app-links .side-dock-icon {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: var(--surface-bg);
  box-shadow: 0 2px 8px rgba(11, 61, 122, 0.4);
}

.side-dock-text {
  font-weight: 600;
  font-size: 0.825rem;
  padding: 0 0.75rem 0 0.5rem;
  color: var(--text-main);
}

/* ==========================================================================
   9. SPOTLIGHT COMMAND PALETTE MODAL (Ctrl + K)
   ========================================================================== */
.command-palette-modal .modal-content {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.command-search-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--surface-secondary);
}

.command-search-header input {
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  width: 100%;
  padding: 0;
}

.command-search-header kbd {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-main);
}

.command-item:last-child {
  border-bottom: none;
}

/* The heading over each kind of hit in the Ctrl+K box - Students, Staff,
   Fee receipts, and Screens. Same shape as .sidebar-title, because it is
   doing the same job: naming a short list somebody is scanning. */
.command-group-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.6rem 1.5rem 0.35rem;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-color);
}

.command-item:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  padding-left: 1.85rem;
}

/* ==========================================================================
   DATATABLES & GLOBAL TABLES DESIGN SYSTEM
   ========================================================================== */

.table-responsive {
  border-radius: var(--radius-lg, 8px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--surface-secondary);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* 1. Global Table Formatting */
.table {
  color: var(--text-main);
  font-size: 0.8125rem;
  margin-bottom: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: var(--surface-secondary) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 0.6rem 0.75rem !important;
  border-bottom: 1.5px solid var(--border-color) !important;
  border-top: none !important;
  white-space: nowrap;
  position: relative;
}

.table tbody td {
  padding: 0.6rem 0.75rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  vertical-align: middle !important;
  color: var(--text-main);
  line-height: 1.45;
  transition: background-color 0.15s ease;
}

/* Active / Highlighted row in tables (e.g. running session) */
.table tr.table-active,
.table tr.table-active td,
.table-active {
  background-color: var(--bg-primary-soft) !important;
  color: var(--color-primary-dark) !important;
}

/* Alternating row tint */
.table tbody tr:nth-child(even):not(.table-active) {
  background-color: var(--surface-raised);
}

/* Remove bottom border from last row */
.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Compact Table Modifiers */
.table-sm tbody td,
.table-compact tbody td {
  padding: 0.38rem 0.5rem !important;
}

.table-sm thead th,
.table-compact thead th {
  padding: 0.4rem 0.5rem !important;
}

/* Row hover */
.table-hover tbody tr:hover {
  background-color: rgba(11, 61, 122, 0.025) !important;
}

/* Sticky Header Support — add .table-sticky-header to .table-responsive */
.table-sticky-header .table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* 2. DataTables Sorting Icons Overlap Fix */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  padding-right: 1.75rem !important;
  position: relative;
  cursor: pointer;
}

table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before {
  display: none !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: "bootstrap-icons" !important;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.4;
  content: "\F282" !important; /* bi-arrow-down-up */
}

table.dataTable thead th.sorting_asc::after {
  content: "\F128" !important; /* bi-arrow-up */
  opacity: 1;
  color: var(--color-primary);
}

table.dataTable thead th.sorting_desc::after {
  content: "\F125" !important; /* bi-arrow-down */
  opacity: 1;
  color: var(--color-primary);
}

/* 3. DataTables Controls Bar (Length & Search Filter) */
.dataTables_wrapper {
  padding: 0.75rem 0.5rem 0.5rem;
}

.dataTables_wrapper .dataTables_length {
  float: left;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.25rem 1.6rem 0.25rem 0.6rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  background-color: var(--surface-bg) !important;
  color: var(--text-main) !important;
  outline: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.75rem !important;
  font-size: 0.78rem !important;
  background-color: var(--surface-bg) !important;
  color: var(--text-main) !important;
  outline: none !important;
  width: 220px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.1) !important;
}

/* 4. DataTables Bottom Footer (Info & Pagination) */
.dataTables_wrapper .dataTables_info {
  float: left;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: 0.6rem;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-top: 0.4rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--border-color) !important;
  background: var(--surface-bg) !important;
  color: var(--color-secondary) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.65rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--body-bg) !important;
  color: var(--color-primary) !important;
  border-color: var(--border-strong) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--text-main) !important;
  color: var(--surface-bg) !important;
  border-color: var(--text-main) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4 !important;
  background: var(--surface-secondary) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
  cursor: not-allowed !important;
}

/* Select2's clipped original <select> keeps its static-position footprint in
   Chrome and widens the page scroll area; pin it so it can never add scroll. */
select.select2-hidden-accessible {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
}

/* Select2 Custom Theme */
.select2-container--bootstrap-5 .select2-selection--single {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--surface-bg) !important;
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  width: 100%;
  padding: 0.42rem 2rem 0.42rem 0.85rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--text-main);
  line-height: 1.4;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.12) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--surface-bg) !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 2px 6px !important;
  font-size: 0.85rem !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(11, 61, 122, 0.2) !important;
  border-radius: 50px !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  padding: 2px 8px !important;
  margin: 2px 4px 2px 0 !important;
}

/* CHIPS SIT IN A ROW.
   erp.js initialises select2 with theme: "bootstrap-5", and the theme
   stylesheet is deliberately not loaded (see layout/default.php) - so a
   .select2-container--bootstrap-5 gets NO layout from select2 itself; the
   rules above give a multi-select its box and its chip colours and nothing
   said how the chips should sit. Each <li> therefore rendered as a block,
   one chip per line across the whole width, with the search box on a line of
   its own underneath. These are the layout rules the theme would have
   supplied, and only those: the look stays this file's. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 4px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: 100%;
  line-height: 1.5;
  white-space: nowrap;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  border: 0;
  background: transparent;
  padding: 0 6px 0 0;
  margin: 0;
  color: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
  padding: 0;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
  display: inline-flex !important;
  flex: 1 1 80px;
  width: auto !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  min-width: 80px;
  height: 28px;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 0.85rem;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
  margin-right: 4px;
}
/* Toast lives in erp.css (#customToast, bottom-right) - defined once only. */

/* Sticky Footer */
.app-footer {
  margin-top: auto;
  padding: 0.85rem 3.5rem;
  border-top: 1px solid var(--border-color);
  background-color: var(--surface-bg);
  color: var(--text-muted);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* (card-custom-header consolidated into section 4 above) */

/* ==========================================================================
   MODAL THEMING
   ========================================================================== */
.modal-content {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--surface-bg) 0%, var(--surface-secondary) 100%);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 1.25rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-main);
}

.modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-secondary);
  gap: 0.5rem;
}

.modal .btn-close {
  opacity: 0.5;
  filter: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 0.75rem;
}

.modal .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.modal-backdrop.show {
  opacity: 0.35;
  backdrop-filter: blur(3px);
}

/* ==========================================================================
   ALERT POLISH
   ========================================================================== */
.alert {
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border: none;
  border-left: 4px solid transparent;
}

.alert-primary {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-left-color: var(--color-primary);
}

.alert-success {
  background: var(--color-success-soft);
  color: var(--on-success-soft);
  border-left-color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-soft);
  color: var(--on-warning-soft);
  border-left-color: var(--color-warning);
}

.alert-danger {
  background: var(--color-danger-soft);
  color: var(--on-danger-soft);
  border-left-color: var(--color-danger);
}

.alert-info {
  background: var(--color-info-soft);
  color: var(--on-info-soft);
  border-left-color: var(--color-info);
}

/* ==========================================================================
   TOOLTIP & POPOVER
   ========================================================================== */
.tooltip-inner {
  background: var(--text-main);
  color: var(--surface-bg);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-width: 240px;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--text-main); }
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--text-main); }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--text-main); }
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--text-main); }

.popover {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-primary);
}

.popover-header {
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.6rem 0.85rem;
}

.popover-body {
  font-size: 0.82rem;
  padding: 0.65rem 0.85rem;
  color: var(--text-main);
}

/* ==========================================================================
   DROPDOWN POLISH
   ========================================================================== */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  min-width: 160px;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-main);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.12s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--color-primary) !important;
  color: var(--surface-bg) !important;
}

.dropdown-item i {
  font-size: 0.88rem;
  margin-right: 0.4rem;
  width: 1rem;
  text-align: center;
}

.dropdown-divider {
  border-color: var(--border-color);
  margin: 0.25rem 0;
}

.dropdown-header {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.45rem 0.75rem 0.25rem;
}

/* ==========================================================================
   NAV TABS & PILLS
   ========================================================================== */
.nav-tabs {
  border-bottom: 1.5px solid var(--border-color);
  gap: 0.15rem;
}

.nav-tabs .nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.55rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  color: var(--color-primary);
  border-bottom-color: rgba(11, 61, 122, 0.3);
}

.nav-tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
  background: transparent;
}

.nav-pills {
  gap: 0.25rem;
}

.nav-pills .nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.nav-pills .nav-link:hover {
  background: var(--surface-secondary);
  color: var(--color-primary);
}

.nav-pills .nav-link.active {
  background: var(--color-primary-gradient);
  color: var(--surface-bg);
  box-shadow: 0 2px 6px rgba(11, 61, 122, 0.28);
}

/* ==========================================================================
   CARD FOOTER
   ========================================================================== */
.card-custom-footer {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}


/* ==========================================================================
   13. TOKEN UTILITIES  (small helpers the views rely on)
   ========================================================================== */
.text-main { color: var(--text-main) !important; }
.bg-soft-primary { background-color: var(--color-primary-soft) !important; }
.bg-soft-success { background-color: var(--color-success-soft) !important; }
.fs-7 { font-size: 0.75rem !important; }
.extra-small { font-size: 0.72rem; }
.cursor-pointer { cursor: pointer; }

.required-star { color: var(--color-danger-strong); }

.error, .text-error {
  color: var(--color-danger-strong);
  font-size: 0.76rem;
  font-weight: 600;
}

/* A Select2 box the form is waiting on.
   The native <select> underneath is display:none, so the browser has
   nothing to outline and nowhere to put its bubble - see erp.js. This is
   what marks the field instead, and it has to sit on Select2's own
   rendered box because that is the thing on the screen. */
.select2-invalid .select2-selection {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}

/* Calendar type dots.
   THE SHAPE ONLY. The colour is a column on the calendar row - a school
   picks it per entry - so it arrives as an inline background and there is
   no class to write for it. Six .cal-dot-<type> modifiers used to sit here
   over six --cal-* tokens; nothing ever applied one, and four of the six
   had drifted from calendar_type_colour(), which is what actually paints.
   Removed 2026-08-25 with the tokens. */
.cal-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   14. KEYBOARD FOCUS  (custom controls have no Bootstrap focus ring)
   ========================================================================== */
.btn-primary-custom:focus-visible,
.btn-secondary-custom:focus-visible,
.header-icon-btn:focus-visible,
.user-profile-badge:focus-visible,
.session-picker:focus-visible,
.subnav-link:focus-visible,
.side-dock-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary-custom:focus-visible {
  box-shadow: 0 0 0 3px rgba(11, 61, 122, 0.25);
}

/* A subnav tab is flush with the bar on every side, so the 2px outset ring
   above would be drawn over the header. This one turns inward. */
.subnav-link:focus-visible {
  outline-offset: -3px;
}

/* =====================================================================
   PANEL LINK  |  append to assets/css/style.css
   ---------------------------------------------------------------------
   Vendor message severity variants for the existing .event-banner-bar.

   The wire carries a SEVERITY, never a colour. A hex arriving from the
   panel and going into a style attribute would break the standing rule
   that every colour in this product lives in the :root block below and
   no view carries one - and it hands a style attribute to a remote party.
   So the panel says "this is a warning" and the tenant owns the paint.

   severity 6 (custom) is the one declared exception, for the marketing
   case where free colour is a real requirement. It arrives as two hex
   strings that the panel validated on save, the tenant re-validates
   against /^#[0-9A-Fa-f]{6}$/ before rendering, and it is emitted as the
   two custom properties below - never as inline background/color rules.
   Anything that fails re-validation falls back to --info.

   Everything here rides on .event-banner-bar, which already exists at
   style.css:581. Only the paint is overridden; the layout, the button
   and the hover state are inherited.
   ===================================================================== */

:root {
  --vb-info-bg:      linear-gradient(135deg, #0B3D7A 0%, #08305F 100%);
  --vb-info-shadow:  0 4px 14px rgba(11, 61, 122, 0.25);

  --vb-success-bg:     linear-gradient(135deg, #0C9532 0%, #0A7A29 100%);
  --vb-success-shadow: 0 4px 14px rgba(12, 149, 50, 0.25);

  --vb-warning-bg:     linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --vb-warning-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);

  --vb-danger-bg:      linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  --vb-danger-shadow:  0 4px 14px rgba(239, 68, 68, 0.28);

  --vb-neutral-bg:     linear-gradient(135deg, #475569 0%, #334155 100%);
  --vb-neutral-shadow: 0 4px 14px rgba(71, 85, 105, 0.25);

  /* severity 6 only. The view sets these two inline on the element and
     nothing else - see the note above. */
  --vb-bg: var(--vb-info-bg);
  --vb-fg: #ffffff;
}

.event-banner-bar--info    { background: var(--vb-info-bg);    box-shadow: var(--vb-info-shadow); }
.event-banner-bar--success { background: var(--vb-success-bg); box-shadow: var(--vb-success-shadow); }
.event-banner-bar--warning { background: var(--vb-warning-bg); box-shadow: var(--vb-warning-shadow); }
.event-banner-bar--danger  { background: var(--vb-danger-bg);  box-shadow: var(--vb-danger-shadow); }
.event-banner-bar--neutral { background: var(--vb-neutral-bg); box-shadow: var(--vb-neutral-shadow); }

.event-banner-bar--custom {
  background: var(--vb-bg);
  color: var(--vb-fg);
  box-shadow: var(--shadow-md);
}

/* The vendor link health strip. Shown to a COLLEGEADMIN only, and only
   after twelve consecutive failed check ins - anything sooner and a
   flaky ten minutes becomes a support call about a red bar. */
.vendor-link-down {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  color: var(--on-danger-soft);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =====================================================================
   EMPTY STATES
   ---------------------------------------------------------------------
   Rendered by empty_state() into a DataTables emptyTable cell, so this
   lives inside a <td> that spans the table. Every colour is a token from
   the :root block above - no hex here, same rule as everywhere else.

   Deliberately quiet. An empty list is a normal state, not an error, and
   painting it in warning colours teaches people to ignore real warnings.
   ===================================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2.25rem 1rem;
    text-align: center;
    white-space: normal;      /* a td in a table defaults to nowrap here */
}

.empty-state-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 0.15rem;
}

.empty-state-what {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

/* The sentence that says what to do first. Capped so it stays readable on
   a wide table - a single line stretched across 1600px is unreadable. */
.empty-state-first {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 46rem;
}

.empty-state-cta {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
}