/**
 * ============================================================================
 * SCHOLARION THEME STYLESHEET
 * ============================================================================
 *
 * @description  Comprehensive theme system for Scholarion Parent Portal
 *               Built on Power Pages with Bootstrap 5 foundation
 * @version      22.0
 * @author       Scholarion Development Team
 * @license      Proprietary
 *
 * ARCHITECTURE:
 * 1. Design Tokens (CSS Custom Properties)
 * 2. Theme Variants (Light, Dark, High Contrast)
 * 3. Layout System (Grid, Flexbox, Responsive)
 * 4. Component Styles (Header, Footer, Navigation, Forms, etc.)
 * 5. Utility & Helper Classes
 *
 * IMPORTANT: Root variables are dynamically overwritten with Site Setting Values
 * See "Scholarion Theme Colours Head" Template before modifying root variables
 *
 * ============================================================================
 */

/* ============================================================================
   1. DESIGN TOKENS - CSS CUSTOM PROPERTIES
   ============================================================================
   
   Central design token system following design system best practices.
   Tokens are organized by category: brand, semantics, typography, spacing,
   effects, and component-specific tokens.
   
   IMPORTANT: These values can be overridden by Power Pages Site Settings
   ============================================================================ */

:root {
  /* ------------------------------------
     Brand Colors
     Core brand identity colors
     ------------------------------------ */
  --scholarion-primary: #1a4a4a;
  --scholarion-secondary: #2d8a8a;
  --scholarion-secondary-rgb: 15, 107, 90;
  /* Used for rgba() with opacity */
  --scholarion-accent: #d97706;

  /* ------------------------------------
     Neutrals & Surface Colors
     Background, foreground, and border colors
     ------------------------------------ */
  --scholarion-bg: #f8f9fa;
  --scholarion-fg: #afe0d0;
  --scholarion-surface: #ffffff;
  --scholarion-border: #e9ecef;
  --scholarion-text: #1f2937;
  --scholarion-text-secondary: #1a7a7a;

  /* ------------------------------------
     Semantic Feedback Colors
     Success, warning, danger, info states
     ------------------------------------ */
  --scholarion-success: #059669;
  --scholarion-warning: #f59e0b;
  --scholarion-danger: #d83b01;
  --scholarion-danger-ring: color-mix(in oklab, var(--scholarion-danger), white 75%);

  /* ------------------------------------
     Alert System
     Alert background and spacing
     ------------------------------------ */
  --scholarion-alert: color-mix(in srgb, var(--scholarion-warning) 40%, white 60%);
  --scholarion-alert-padding-x: 1rem;
  --scholarion-alert-padding-y: 1rem;

  /* ------------------------------------
     Visual Effects
     Gradients, shadows, elevation
     ------------------------------------ */
  --scholarion-grad-1: linear-gradient(135deg,
      var(--scholarion-primary) 0%,
      color-mix(in oklab, var(--scholarion-primary) 80%, black) 100%);
  --scholarion-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.01);
  --scholarion-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --scholarion-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
  --scholarion-shadow-colour: rgba(0, 0, 0, 0.01);
  --scholarion-shadow-colour-hover: rgba(0, 0, 0, 0.2);

  /* ------------------------------------
     Focus & Selection States
     User interaction feedback
     ------------------------------------ */
  --scholarion-selection-bg: var(--scholarion-secondary);
  --scholarion-selection-fg: #fff;
  --scholarion-caret: var(--scholarion-secondary);

  /* ------------------------------------
     Header Component Tokens
     ------------------------------------ */
  --scholarion-header-fg: #afe0d0;
  --scholarion-header-bg: var(--scholarion-primary);
  --scholarion-header-fg-muted: #909291;
  --scholarion-header-hover: #fff;
  --scholarion-header-border: #0000001f;
  /* rgba(0, 0, 0, 0.12) */
  --scholarion-header-font: Poppins, sans-serif;
  --scholarion-header-title-font: var(--scholarion-header-font);
  --scholarion-header-title-weight: 400;

  /* ------------------------------------
     Footer Component Tokens
     ------------------------------------ */
  --scholarion-footer-font: var(--scholarion-header-font);
  --scholarion-footer-bg: var(--scholarion-primary);
  --scholarion-footer-fg: #afe0d0;
  --scholarion-footer-fg-muted: #909291;
  --scholarion-footer-link: #afe0d0;
  --scholarion-footer-link-hover: var(--scholarion-accent);

  /* ------------------------------------
     Link Tokens
     ------------------------------------ */
  --scholarion-link: var(--scholarion-secondary);
  --scholarion-link-hover: var(--scholarion-accent);


  /* ------------------------------------
     Navigation Tokens
     ------------------------------------ */
  --scholarion-nav-active-colour: #fff;
  --scholarion-nav-hover-colour: #fff;
  /* --scholarion-nav-active-bg: rgba(0, 95, 99, .14);
  --scholarion-nav-parent-bg:rgba(0, 95, 99, .14);
  --scholarion-nav-child-bg:rgba(0, 72, 75, 0.14); */
  --scholarion-nav-active-bg: color-mix(in srgb, var(--scholarion-secondary) 90%, white);
  --scholarion-nav-parent-bg: color-mix(in srgb, var(--scholarion-secondary) 92%, white);
  --scholarion-nav-child-bg: color-mix(in srgb, var(--scholarion-secondary) 95%, white);



  /* ------------------------------------
     Typography System
     Font families, sizes, line heights
     ------------------------------------ */
  --scholarion-font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --scholarion-font-serif: "Georgia", "Times New Roman", serif;
  --scholarion-font-mono: "Consolas", "Courier New", monospace;

  /* Font Size Scale (fluid, responsive) */
  --scholarion-fs-100: 0.875rem;
  /* 14px - small text */
  --scholarion-fs-200: 1rem;
  /* 16px - body text */
  --scholarion-fs-300: 1.125rem;
  /* 18px */
  --scholarion-fs-400: 1.25rem;
  /* 20px */
  --scholarion-fs-500: 1.5rem;
  /* 24px - h3 */
  --scholarion-fs-600: 1.75rem;
  /* 28px - h2 */
  --scholarion-fs-700: 1.8rem;
  /* 32px - h1 */

  /* Line Height Scale */
  --scholarion-lh-tight: 1.2;
  --scholarion-lh-default: 1.5;
  --scholarion-lh-loose: 1.75;

  /* ------------------------------------
     Layout Dimensions
     Updated at runtime via JavaScript
     ------------------------------------ */
  --scholarion-header-h: 90px;
  --scholarion-footer-h: 72px;
  --scholarion-nav-w: 280px;
  --scholarion-nav-w-collapsed: 60px;
  --scholarion-footer-pad-x: 16px;
  --scholarion-gap: 24px;

  /* ------------------------------------
     Subgrid Theme Tokens
     ------------------------------------ */
  --sg-bg: #fff;
  --sg-border: rgba(0, 0, 0, 0.08);
  --sg-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  --sg-header-bg: #f7f9fb;
  --sg-header-fg: #1b1f2a;
  --sg-row-hover: #f4f7fb;
  --sg-row-alt: #fbfcfe;
  --sg-text: #27313f;
  --sg-muted: #637083;
}

/* ============================================================================
   2. THEME VARIANTS
   ============================================================================
   
   Support for multiple theme modes: light (default), dark, and high contrast.
   Each theme overrides the core design tokens to maintain consistency.
   Themes can be applied via [data-theme] attribute on <html> element.
   
   ============================================================================ */

/* ------------------------------------
   Light Theme (Default)
   ------------------------------------ */
/* html[data-theme="light"] {
  --scholarion-bg: #ffffff;
  --scholarion-fg: #afe0d0;
  --scholarion-surface: #ffffff;
  --scholarion-text: #000;
  --scholarion-text-muted: #6b7280;
  --scholarion-text-secondary: #1a7a7a;
  --scholarion-primary: #004c45;
  --scholarion-secondary: #2d8a8a;
  --scholarion-tertiary: #6c757d;
  --scholarion-tertiary-dark: #374151;
  --scholarion-tertiary-light: #f8f9fa;
  --scholarion-accent: #d97706;
  --scholarion-border: #e9ecef;
  --scholarion-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); */

/* Component-specific overrides */
/* --scholarion-header-fg: #afe0d0;
  --scholarion-header-bg: var(--scholarion-primary);
  --scholarion-header-fg-muted: #afe0d0;
  --scholarion-header-hover: #0b1515;
  --scholarion-header-border: #0000001f;

  --scholarion-footer-bg: var(--scholarion-primary);
  --scholarion-footer-fg: #afe0d0;
  --scholarion-footer-fg-muted: #afe0d0;
  --scholarion-footer-link: #afe0d0;
  --scholarion-footer-link-hover: var(--scholarion-accent);

  --scholarion-success: #08bb82;
  --scholarion-warning: #f3a826;
  --scholarion-danger: #d83b01;
  --scholarion-danger-ring: color-mix(in oklab, var(--scholarion-danger), white 75%);
  --scholarion-alert: color-mix(in srgb, var(--scholarion-warning) 40%, white 60%);
} */

/* ------------------------------------
   Dark Theme
   Sophisticated dark mode with proper contrast ratios
   ------------------------------------ */
/* html[data-theme="dark"] {
  --scholarion-bg: #0f1419;
  --scholarion-fg: #7dd3c0;
  --scholarion-surface: #1a2332;
  --scholarion-text: #000000;
  --scholarion-text-muted: #8b9eb5;
  --scholarion-text-secondary: #0d3d3a;
  --scholarion-primary: #0d3d3a;
  --scholarion-secondary: #3ba89f;
  --scholarion-tertiary: #4a5568;
  --scholarion-tertiary-dark: #2d3748;
  --scholarion-tertiary-light: #2a3441;
  --scholarion-accent: #fbbf24;
  --scholarion-border: #2d3748;
  --scholarion-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); */

/* Component-specific overrides */
/* --scholarion-header-fg: #7dd3c0;
  --scholarion-header-bg: #0a2e2c;
  --scholarion-header-fg-muted: #5fb5a5;
  --scholarion-header-hover: #a8e6d7;
  --scholarion-header-border: #0000001f;

  --scholarion-footer-bg: #0a1e24;
  --scholarion-footer-fg: #7dd3c0;
  --scholarion-footer-fg-muted: #5fb5a5;
  --scholarion-footer-link: #7dd3c0;
  --scholarion-footer-link-hover: #fbbf24;

  --scholarion-success: #10b981;
  --scholarion-warning: #f59e0b;
  --scholarion-danger: #ef4444;
  --scholarion-danger-ring: color-mix(in oklab, var(--scholarion-danger), white 75%);
  --scholarion-alert: color-mix(in srgb, var(--scholarion-warning) 40%, white 60%); 
}*/

/* Dark mode card styling override */
/* html[data-theme="dark"] .sis-card {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
} */

/* ------------------------------------
   High Contrast Theme
   WCAG AAA compliant for maximum accessibility
   ------------------------------------ */
/* html[data-theme="contrast"] {
  --scholarion-bg: #000000;
  --scholarion-fg: #00ffff;
  --scholarion-surface: #000000;
  --scholarion-text: #ffffff;
  --scholarion-text-muted: #cccccc;
  --scholarion-text-secondary: #bbfff8;
  --scholarion-primary: #008b8b;
  --scholarion-secondary: #00ffff;
  --scholarion-tertiary: #ffffff;
  --scholarion-tertiary-dark: #ffffff;
  --scholarion-tertiary-light: #1a1a1a;
  --scholarion-accent: #ffff00;
  --scholarion-border: #ffffff;
  --scholarion-shadow-sm: 0 0 0 2px #ffffff; */

/* Component-specific overrides */
/* --scholarion-header-fg: #ffffff;
  --scholarion-header-bg: #000000;
  --scholarion-header-fg-muted: #cccccc;
  --scholarion-header-hover: #ffff00;
  --scholarion-header-border: #0000001f;

  --scholarion-footer-bg: #000000;
  --scholarion-footer-fg: #ffffff;
  --scholarion-footer-fg-muted: #cccccc;
  --scholarion-footer-link: #00ffff;
  --scholarion-footer-link-hover: #ffff00;

  --scholarion-success: #00ff00;
  --scholarion-warning: #ffff00;
  --scholarion-danger: #ff0000;
  --scholarion-danger-ring: color-mix(in oklab, var(--scholarion-danger), white 75%);
  --scholarion-alert: color-mix(in srgb, var(--scholarion-warning) 40%, white 60%);
} */

/* High contrast navigation enhancements */
/* html[data-theme="contrast"] [role="banner"] .navbar .nav-link {
  text-decoration: underline;
}

html[data-theme="contrast"] [role="banner"] .navbar .nav-link:focus {
  outline: 3px solid var(--scholarion-accent);
  outline-offset: 2px;
}

html[data-theme="contrast"] footer[role="contentinfo"].footer a,
html[data-theme="contrast"] .sis-footer a {
  text-decoration: underline;
}

html[data-theme="contrast"] footer[role="contentinfo"].footer a:focus,
html[data-theme="contrast"] .sis-footer a:focus {
  outline: 3px solid var(--scholarion-accent);
  outline-offset: 2px;
} */

/* High contrast alert text override to ensure readability */
/* .alert[data-theme="contrast"],
.alert-info[data-theme="contrast"],
div.message.error[data-theme="contrast"] {
  color: #000000 !important;
}  */

/* ============================================================================contrast
   3. BASE & RESET STYLES
   ============================================================================
   
   Foundation styles including html/body setup, box-sizing, and global resets.
   Establishes the base structure for the entire application.
   
   ============================================================================ */

/* ------------------------------------
   Document Foundation
   Full viewport height layout with overflow control
   ------------------------------------ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  /* Controlled scrolling in layout sections */
}

/* html[data-theme="dark"] ,
body[data-theme="dark"]  {
  background:var(--scholarion-bg);
}

html[data-theme="contrast"] ,
body[data-theme="contrast"]  {
  background:var(--scholarion-bg);
} */

/* Mobile viewport overflow adjustment */
@media (max-width: 991.98px) {

  html,
  body {
    overflow: auto;
    /* Allow natural scrolling on mobile */
  }
}

/* ------------------------------------
   Text Selection Styling
   Branded selection colors for better UX
   ------------------------------------ */
::selection {
  background: var(--scholarion-selection-bg);
  color: var(--scholarion-selection-fg);
}

::-moz-selection {
  background: var(--scholarion-selection-bg);
  color: var(--scholarion-selection-fg);
}

/* Form control selection */
input::selection,
textarea::selection,
select::selection {
  background: var(--scholarion-selection-bg);
  color: var(--scholarion-selection-fg);
}

input::-moz-selection,
textarea::-moz-selection,
select::-moz-selection {
  background: var(--scholarion-selection-bg);
  color: var(--scholarion-selection-fg);
}

/* ------------------------------------
   Caret (Text Cursor) Styling
   ------------------------------------ */
input,
textarea {
  caret-color: var(--scholarion-caret);
}

/* ------------------------------------
   Native Form Control Accent Colors
   Applies brand colors to checkboxes and radios
   ------------------------------------ */
:where(input[type="radio"], input[type="checkbox"]) {
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--scholarion-secondary) !important;
}

/* ------------------------------------
   Utility Classes
   ------------------------------------ */
.hidden {
  display: none !important;
}

/* Hide rows with hidden controls */
tr:has(.control-row-hidden) {
  display: none !important;
}

/* Remove empty rows to eliminate dead space */
.row:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* ============================================================================
   4. LAYOUT SYSTEM
   ============================================================================
   
   Grid-based layout system for desktop with mobile-first responsive design.
   Manages header, footer, sidebar, and main content positioning.
   
   ============================================================================ */

/* ------------------------------------
   Main Container Layout
   Calculates available height minus header
   ------------------------------------ */
.main-container {
  height: calc(100dvh - var(--scholarion-header-h));
}

.main-container>.container,
.main-container>.container-fluid {
  height: 100%;
  max-width: none;
  padding: 0;
}

/* ------------------------------------
   Desktop Grid Layout
   Two-column grid: sidebar + main content
   ------------------------------------ */
@media (min-width: 992px) {
  .main-container .row {
    display: grid;
    grid-template-columns: var(--scholarion-nav-w) minmax(0, 1fr);
    gap: var(--scholarion-gap);
    height: 100%;
    align-items: stretch;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }

  /* Reset Bootstrap column defaults for grid */
  .main-container .row>[class*="col-"] {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* Collapsed sidebar layout */
  .main-container.is-collapsed .row {
    grid-template-columns: var(--scholarion-nav-w-collapsed) minmax(0, 1fr);
  }

  /* Sidebar styling */
  .sidebar-col {
    background: var(--scholarion-secondary);
  }

  .sidebar {
    height: calc(100dvh - var(--scholarion-header-h) - var(--scholarion-footer-h));
    overflow: auto;
    background: inherit;
    color: #fff;
  }

  /* Main content area with scroll */
  .main-content {
    min-width: 0;
    /* Prevents grid blowout */
    height: calc(100dvh - var(--scholarion-header-h) - var(--scholarion-footer-h));
    overflow: auto;
  }
}

/* When any Bootstrap modal is open, stop the page content scrolling */
body.modal-open .main-content {
  overflow: hidden !important;   /* hides the outer (background) scrollbar */
}


@media (min-width: 1400px) {

  .row.sectionBlockLayout>.container,
  .row.sectionBlockLayout>.container-lg,
  .row.sectionBlockLayout>.container-md,
  .row.sectionBlockLayout>.container-sm,
  .row.sectionBlockLayout>.container-xl,
  .row.sectionBlockLayout>.container-xxl {
    max-width: none !important;
  }
}

/* ------------------------------------
   Mobile sidebar overlay styles 
   Fixed header with expandable menu
   ------------------------------------ */

@media (max-width: 991px) {

  /* Override desktop sidebar positioning on mobile */
  .sidebar-col {
    width: 100% !important;
    position: static !important;
  }

  /* Sidebar header stays fixed at top, menu expands below */
  .sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  /* Fixed sidebar header below page header */
  .sidebar-header {
    position: fixed !important;
    /* top: var(--scholarion-header-h, 60px) !important; */
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    /* width: 100% !important; */
    border-radius: 8px;
    max-width: 180px !important;
    min-width: 180px;
    z-index: 1001 !important;
    background-color: var(--scholarion-secondary, #005f63) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 0 !important;
  }

  /* List group hidden by default, expands as overlay when active */
  .sidebar .list-group {
    position: fixed !important;
    /* top: calc(var(--scholarion-header-h, 60px) + 52px) !important; Header height + sidebar-header height */
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
    z-index: 1000 !important;
    background-color: var(--scholarion-secondary, #005f63) !important;
    box-shadow: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* When sidebar is active, expand the list-group */
  .sidebar.mobile-active .list-group {
    max-height: calc(100vh - var(--scholarion-header-h, 60px) - 52px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Disable desktop collapse behavior on mobile */
  .sidebar.is-collapsed,
  .sidebar-col.is-collapsed {
    width: 100% !important;
    transform: none !important;
  }

  /* Add backdrop when sidebar is open */
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: 999;
    pointer-events: none;
  }

  .mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navbar-dark .navbar-toggler {
    border: 1px solid var(--scholarion-secondary) !important;
    background-color: var(--scholarion-secondary) !important;
  }

  .navbar-dark .navbar-toggler:hover {
    background-color: var(--scholarion-accent) !important;
    border-color: var(--scholarion-accent) !important;
  }

  .sch-footer .gap-3 {
    gap: unset !important;
  }

  .page-heading {
    padding-top: 0px;
  }
}

/* Desktop: keep normal sidebar behavior */
@media (min-width: 992px) {
  .sidebar {
    position: sticky !important;
    max-height: calc(100dvh - var(--scholarion-header-h, 0px)) !important;
  }

  .sidebar-header {
    position: relative !important;
  }

  .sidebar .list-group {
    position: relative !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide mobile overlay on desktop */
  .mobile-overlay {
    display: none !important;
  }
}


/* ------------------------------------
   Content Cards & Blocks
   Reusable card components with consistent styling
   ------------------------------------ */
.sectionBlockLayout {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-right: 20px !important;
  margin-bottom: 20px !important;
  min-height: auto;
  padding: 8px;
  border: 1px solid var(--scholarion-border);
  border-radius: 12px;
  box-shadow: var(--scholarion-shadow-md);
  background: color-mix(in oklab, var(--scholarion-bg) 80%, white);
  justify-content: center;
}

/* ------------------------------------
   Content Card Base
   ------------------------------------ */
/* Set transparent background to let header breathe and hero show through */
.content-card {
  background: transparent;
  /* Allows page header transparency to work effectively */
  border-radius: 12px;
  box-shadow: var(--scholarion-shadow-md);
  margin-bottom: 1rem;
  margin-right: 20px;
  overflow: hidden;
  border: 1px solid var(--colour-primary);
}

.content-card-header {
  padding-top: 1.15rem;
  border-bottom: 3px solid var(--scholarion-accent);
  font-weight: 600;
  font-size: 12px;
}

.content-card-header h1 {
  color: var(--scholarion-accent);
  font-family: var(--scholarion-header-font);
  margin: 0;
  font-size: 30px !important;
}

.content-card-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.content-card-body>.row {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------
   Welcome Screen Card
   Landing page hero card with glassmorphism effect
   ------------------------------------ */
.sis-fore {
  position: relative;
  z-index: 5;
}

.sis-welcome {
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
}

.sis-card {
  max-width: min(880px, 94vw);
  padding: clamp(16px, 3vw, 28px) clamp(18px, 3.5vw, 32px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.sis-card .eyebrow {
  font-weight: 700;
  margin: 0 0 .25rem;
  opacity: 0.9;
}

.sis-card h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}

/* ------------------------------------
   Form Instructions Block 
   ------------------------------------ */

/* Form instruction blocks */
.formInstructions {
  border: 1px solid var(--scholarion-primary) !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem;
  background-color: var(--scholarion-bg) !important;
  color: var(--scholarion-primary) !important;
}

.formInstructions h1 {
  color: var(--scholarion-primary) !important;
  font-size: 16px !important;
  font-family: var(--scholarion-font-sans) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.5 !important;
}

.formInstructions p {
  color: var(--scholarion-primary) !important;
  font-size: 16px !important;
  font-family: var(--scholarion-font-sans) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  /* margin-bottom: 1rem !important; */
}


/* ============================================================================
   5. HEADER COMPONENT
   ============================================================================
   
   Top navigation bar with branding, site title, and user controls.
   Includes responsive behavior and theme integration.
   
   ============================================================================ */

/* ------------------------------------
   Base Header Styles
   Maps design tokens into Bootstrap navbar CSS variables
   ------------------------------------ */
[role="banner"].navbar {
  --bs-navbar-color: var(--scholarion-header-fg-muted);
  --bs-navbar-hover-color: var(--scholarion-header-hover);
  --bs-navbar-active-color: var(--scholarion-header-hover);
  --bs-navbar-brand-color: var(--scholarion-header-fg);
  --bs-navbar-brand-hover-color: var(--scholarion-header-hover);
  font-family: var(--scholarion-header-font) !important;
}

.static-top.navbar-dark {
  background: var(--scholarion-primary);
  border: 0;
  box-shadow: none;
}

.navbar {
  min-height: var(--scholarion-header-h);
  display: flex;
  align-items: center;
  background: var(--scholarion-grad-1) !important;
  border-bottom: 3px solid var(--scholarion-secondary);
}

/* ------------------------------------
   Site Title / Brand
   Large heading displayed in header
   ------------------------------------ */
[role="banner"].navbar .siteTitle,
[role="banner"].navbar .custom-sitetitle,
[role="banner"].navbar .navbar-brand,
[role="banner"].navbar .navbar-brand a {
  color: var(--scholarion-header-fg) !important;
  font-family: var(--scholarion-header-title-font);
  font-weight: var(--scholarion-header-title-weight);
  text-decoration: none !important;
  font-size: 2.5rem !important;
}

/* ------------------------------------
   Navigation Links & Icons
   ------------------------------------ */
[role="banner"].navbar .nav-link,
[role="banner"].navbar .navbar-icon,
[role="banner"].navbar .dropdown-toggle {
  color: var(--scholarion-header-fg-muted) !important;
}

[role="banner"].navbar .nav-link:hover,
[role="banner"].navbar .nav-link:focus,
[role="banner"].navbar .dropdown-item:hover,
[role="banner"].navbar .dropdown-item:focus {
  color: var(--scholarion-header-hover) !important;
  background: var(--scholarion-secondary) !important;
}

/* ------------------------------------
   Dropdown Menus
   ------------------------------------ */
[role="banner"].navbar .dropdown-menu {
  color: var(--scholarion-header-fg);
  background: var(--scholarion-secondary) !important;
}

[role="banner"] .navbar .dropdown-item:hover,
[role="banner"] .navbar .dropdown-item:focus {
  color: var(--scholarion-header-hover);
  background: var(--scholarion-secondary) !important;
}

/* ============================================================================
   6. SIDEBAR NAVIGATION
   ============================================================================
   
   Collapsible side navigation with icons and labels.
   Supports both expanded and collapsed states.
   
   ============================================================================ */

/* ------------------------------------
   Sidebar Header (Collapse Toggle)
   ------------------------------------ */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-header .sidebar-title {
  font-weight: 600;
  color: #fff;
}

/* Layout row */
.sch-row {
  display: flex;
  gap: 0;
}

/* Sidebar + content columns */
.sidebar-col {
  width: var(--scholarion-nav-w, 280px);
  transition: width .2s ease;
}

.content-col {
  flex: 1 1 auto;
  min-width: 0;
  transition: width .2s ease;
}

/* Sidebar container */
.sidebar {
  position: sticky;
  top: var(--scholarion-header-h, 0);
  padding: .25rem;
  max-height: calc(100dvh - var(--scholarion-header-h, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Collapsed behaviour controlled by classes */
#sidebar.is-collapsed {
  overflow-y: auto;
}

.list-group {
  display: flex;
  flex-direction: column;
}

/* Navigation item layout */
#sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: .5rem;
  text-decoration: none;
  background-color: var(--scholarion-nav-parent-bg);

}

.nav-icon {
  width: 1.5rem;
  text-align: center;
  opacity: .9;
  flex: 0 0 1.5rem;
}

.nav-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-caret {
  margin-left: .25rem;
  opacity: .7;
}

/* Hover/focus styles */
#sidebar .nav-item:hover,
#sidebar .nav-item:focus {
  outline: none;
  text-decoration: none !important;
}

/* Hover styles */
#sidebar .nav-item:hover {
  background: var(--scholarion-nav-active-bg, #fff) !important;
  color: var(--scholarion-nav-active-colour, #fff) !important;
  border-color: var(--scholarion-nav-active-colour, #fff) !important;
}

/* Child lists */
.sub-list {
  margin-left: .75rem;
  display: flex;
  flex-direction: column;
  margin-top: .25rem;
}

.nav-item.child {
  padding-left: .4rem;
  background: var(--scholarion-nav-child-bg) !important;
}

/* Parent caret animation */
.nav-item.parent-trigger .nav-caret i {
  transition: transform .15s ease;
}

.nav-item.parent-trigger.open .nav-caret i {
  transform: rotate(180deg);
}

/* Sidebar collapsed styles */
.sidebar-col.is-collapsed {
  width: var(--scholarion-nav-w-collapsed, 60px);
}

#sidebar.is-collapsed .nav-text,
#sidebar.is-collapsed .nav-caret,
#sidebar.is-collapsed .sub-list {
  display: none !important;
}

#sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: .5rem 0;
}

#sidebar.is-collapsed .nav-icon {
  width: 2rem;
}

#sidebar.is-collapsed .sidebar-title {
  display: none;
}

.main-content {
  width: 100%;
  max-width: none;
}

/* Active states */
#sidebar .nav-item.active {
  /* background: var(--scholarion-nav-active-bg, rgba(0, 95, 99, .14)) !important; */
  font-weight: 600;
  color: var(--scholarion-nav-active-colour, #fff) !important;
  border-color: #fff !important;
}

#sidebar .parent-trigger.active-parent {
  background: var(--scholarion-nav-active-bg, rgba(0, 95, 99, .14));
}


#sidebar .list-group-item+.list-group-item {
  border-top-width: 1px;
}



/* ------------------------------------
   Navigation Icons
   ------------------------------------ */
#sidebar .nav-icon {
  width: 28px;
  min-width: 28px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

#sidebar .nav-icon img {
  max-width: 20px;
  max-height: 20px;
}

/* ------------------------------------
   Collapsed Sidebar State
   Hides text labels, centers icons
   ------------------------------------ */
.main-container.is-collapsed .sidebar-header {
  justify-content: center;
}

.main-container.is-collapsed .sidebar-header .sidebar-title,
.main-container.is-collapsed .nav-item .nav-text {
  display: none;
}

.main-container.is-collapsed .nav-item {
  justify-content: center;
  padding: .65rem 0;
}





/* ============================================================================
   7. FOOTER COMPONENT
   ============================================================================
   
   Fixed footer with links, copyright, and social media icons.
   Matches header styling for visual cohesion.
   
   ============================================================================ */

/* ------------------------------------
   Footer Base Styles
   Fixed positioning at bottom of viewport
   ------------------------------------ */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scholarion-footer-h);
  z-index: 1030;
}

.footer .footer-bottom {
  background: var(--scholarion-grad-1) !important;
  border: 0;
  box-shadow: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0px 0;
}

/* Footer content wrapper (OOB class from Power Pages) */
footer[role="contentinfo"].footer,
.sis-footer {
  background: var(--scholarion-grad-1) !important;
  color: var(--scholarion-footer-fg) !important;
  font-family: var(--scholarion-footer-font);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--scholarion-footer-h);
  padding-left: var(--scholarion-footer-pad-x);
  padding-right: var(--scholarion-footer-pad-x);
  box-sizing: border-box;
  z-index: 1040;
  border-top: 3px solid var(--scholarion-secondary);
}

/* ------------------------------------
   Footer Links
   ------------------------------------ */
footer[role="contentinfo"].footer a,
.sis-footer a {
  color: var(--scholarion-footer-link) !important;
  text-decoration: none;
}

footer[role="contentinfo"].footer a:hover,
footer[role="contentinfo"].footer a:focus,
.sis-footer a:hover,
.sis-footer a:focus {
  color: var(--scholarion-footer-link-hover) !important;
  text-decoration: underline;
  outline: none;
}

/* ------------------------------------
   Footer Icons
   ------------------------------------ */
footer[role="contentinfo"].footer i,
footer[role="contentinfo"].footer svg,
.sis-footer i,
.sis-footer svg {
  color: var(--scholarion-footer-fg-muted) !important;
  fill: currentColor;
}

/* ============================================================================
   8. PAGE HERO HEADER
   ============================================================================
   
   Page-level hero sections with gradient backgrounds and optional images.
   
   ============================================================================ */

/* ------------------------------------
   Softer Page Header with Transparency
   ------------------------------------ */
/**
 * Page Header - Modern Glass Effect
 *
 * Creates a semi-transparent header that allows the hero background to show through
 * while maintaining readability. Uses backdrop-filter for a modern glass morphism effect.
 *
 * Design Tokens Used:
 * - --scholarion-primary: Border color for visual emphasis
 * - --bs-border-radius: Consistent corner rounding (fallback: .75rem)
 *
 * Features:
 * - 50% transparency to reveal underlying hero imagery
 * - Backdrop blur and saturation for glass effect
 * - Enhanced left padding for icon alignment
 * - Primary color accent border at bottom
 */
.sch-page-header {
  border-bottom: 3px solid var(--scholarion-primary);
  background-color: rgba(255, 255, 255, 0.5);
  /* 50% transparency allows hero to show through */
  backdrop-filter: saturate(1.2) blur(2px);
  /* Modern glass morphism effect */
  padding: 1rem 1.25rem 0.5rem 1.5rem;
  /* Extra left padding for icon alignment */
  border-radius: var(--bs-border-radius, .75rem);
}

/* ------------------------------------
   Hero Container
   ------------------------------------ */
.page-hero-header {
  position: relative;
  background: linear-gradient(135deg, var(--colour-tertiary-light) 0%, #ffffff 100%);
  padding: 1.25rem;
  padding-top: 0.5rem;
  border-bottom: 2px solid var(--colour-secondary);
  font-weight: 600;
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Background image overlay */
.page-hero-header .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

/* Content above overlay */
.page-hero-header .hero-content {
  position: relative;
  z-index: 2;
}

/* ------------------------------------
   Hero Typography
   ------------------------------------ */
.page-hero-header h1 {
  font-weight: 400;
  font-size: 35px;
  margin-bottom: 0.25rem;
  color: var(--colour-primary);
  font-family: var(--font-display);
}

.page-hero-header .subtitle {
  font-size: 1rem;
  margin-bottom: 0;
  color: var(--bs-secondary-color) !important;
  font-family: Arial;
  font-weight: 400;
}

/* Student's name in page header */
.sch-facepile-wrapper h4 {
  font-size: var(--scholarion-fs-200) !important;
  color: var(--scholarion-primary);
  font-weight: var(--scholarion-fs-500);
}

/* ------------------------------------
   Hero Buttons
   ------------------------------------ */
.hero-button1 {
  color: var(--colour-primary);
}

.hero-button2 {
  background: var(--colour-primary);
}

/* ------------------------------------
   Hero Loading State
   ------------------------------------ */
.page-hero-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #0078d4;
}

/* ============================================================================
   9. FORM COMPONENTS
   ============================================================================
   
   Comprehensive form styling including inputs, textareas, selects, radios,
   checkboxes, toggles, and validation states.
   
   ============================================================================ */

/* ------------------------------------
   CRM Entity Form Theming
   Background and border colors
   ------------------------------------ */
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  background: var(--scholarion-bg) !important;
  color: var(--scholarion-text) !important;
  border: 1px solid var(--scholarion-bg) !important;
  padding-left: 5px;
  padding-right: 5px;
}

.card-body,
.list-group-item {
  background: var(--scholarion-secondary) !important;
  color: var(--scholarion-text) !important;
}

/* ------------------------------------
   Form Labels
   Consistent weight and color
   ------------------------------------ */
label {
  font-weight: 500;
}

.crmEntityFormView label {
  color: var(--scholarion-text) !important;
  background-color: unset !important;
}

/* Exclude subgrid labels from font-weight override */
.subgrid-cell label,
.form-subgrid-heading label,
.entity-grid label {
  font-weight: normal !important;
}

.field-label,
.control-label-addfile,
.add-file .col-md-9.checkbox label {
  background-color: transparent !important;
}

/* ------------------------------------
   Form Section Titles & Tabs
   ------------------------------------ */
#EntityFormView h1,
h2,
h3,
h4,
h5 {
  color: var(--scholarion-text);
}

.crmEntityFormView .tab-title {
  color: var(--scholarion-primary) !important;
  border-bottom: 1px solid var(--scholarion-border);
}

.crmEntityFormView .tab-h3,
.section-title {
  color: var(--scholarion-primary) !important;
}

/* Remove unnecessary space between form sections */
.crmEntityFormView fieldset {
  margin-bottom: -5px !important;
}

/* ------------------------------------
   Form Section Accordion Toggle
   Collapsible sections with animated triangle indicator
   ------------------------------------ */
details.form-section>summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

/* Remove native disclosure triangle */
details.form-section>summary::-webkit-details-marker {
  display: none;
}

/* Custom triangle indicator - closed state */
details.form-section>summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--scholarion-primary);
  transition: transform 0.2s ease;
  transform-origin: center;
}

/* Triangle rotation on open */
details.form-section[open]>summary::before {
  transform: rotate(90deg);
}

/* ------------------------------------
   Text Inputs & Textareas
   Rounded corners and consistent padding
   ------------------------------------ */
.crmEntityFormView .cell.text div.control input,
.crmEntityFormView .cell.cell.picklist-cell div.control select,
.crmEntityFormView .cell.cell.lookup div.control select,
.crmEntityFormView .cell.cell.datetime div.control input,
.crmEntityFormView .cell.cell.datetime div.control span.input-group-addon,
.crmEntityFormView .cell.cell.integer div.control input,
.crmEntityFormView .textarea div.control textarea,
.crmEntityFormView .msos-container,
a.btn,
.btn-primary,
.btn-grey,
.btn-info,
.btn-default,
.crmEntityFormView .cell.cell.datetime div.control select.lookup {
  border-radius: 5px !important;
}

/* ------------------------------------
   Readonly Input Styling
   Distinctive styling for non-editable fields
   ------------------------------------ */
.crmEntityFormView .cell.text div.control input.readonly,
.crmEntityFormView .cell.text div.control input[readonly="readonly"],
.crmEntityFormView .cell.cell.datetime div.control input[readonly="readonly"],
.crmEntityFormView .cell.cell.picklist-cell div.control select.readonly,
.crmEntityFormView .lookup div.control select.readonly,
.crmEntityFormView .cell.cell.picklist-cell div.control select.aspNetDisabled,
.crmEntityFormView .cell.cell.lookup div.control input.aspNetDisabled,
.crmEntityFormView .cell.lookup div.control select.aspNetDisabled,
.crmEntityFormView .textarea div.control textarea[readonly="readonly"],
.crmEntityFormView .cell.integer div.control input.integer[readonly="readonly"],
.crmEntityFormView .cell.text div.control textarea[readonly="readonly"],
.crmEntityFormView .msos-viewmode-text {
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  padding-left: 12px !important;
  background-color: #f2f2f2 !important;
}

/* Hide em dash placeholders in readonly controls */
.control input[readonly]+div.text-muted[aria-hidden="true"],
.control textarea[readonly]+div.text-muted[aria-hidden="true"] {
  display: none !important;
}

/* ------------------------------------
   Focus States - Unified Brand Ring
   Consistent focus styling across all input types
   ------------------------------------ */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
textarea:focus,
select:focus {
  border-color: var(--scholarion-secondary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .25rem rgba(var(--scholarion-secondary-rgb), 0.25) !important;
}

/* Keyboard-only focus styling (focus-visible) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--scholarion-secondary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--scholarion-secondary-rgb), 0.25) !important;
}

/* ------------------------------------
   Date/Time Picker Styling
   Browser-native calendar icon theming
   ------------------------------------ */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: saturate(1.1) hue-rotate(2deg);
  cursor: pointer;
}

.crmEntityFormView .control:has(input.shortCalenderControl) {
  max-width: 300px;
}

.shortControl {
  width: 20% !important;
}

/* ------------------------------------
   Radio Buttons & Picklists
   Horizontal layout with proper spacing
   ------------------------------------ */

/* Container layout */
.boolean-radio-cell .control,
.picklist-cell .control {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem 2rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Individual radio + label pairs */
.boolean-radio-cell [type="radio"]+label,
.picklist-cell [type="radio"]+label,
.boolean-radio-cell .form-check,
.picklist-cell .form-check,
.boolean-radio-cell .radio-inline,
.picklist-cell .radio-inline {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 1rem 0 0 !important;
  padding: 0 !important;
}

/* Radio input spacing and alignment */
.boolean-radio-cell input[type="radio"],
.picklist-cell input[type="radio"] {
  vertical-align: middle !important;
  position: relative !important;
  margin: 0 0.5rem 0 0 !important;
  float: none !important;
  transform: translateY(0.5px);
}

/* Radio labels */
.boolean-radio-cell label,
.picklist-cell label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}

/* Label positioning */
.boolean-radio-cell .table-info,
.picklist-cell .table-info {
  float: none !important;
  width: 100% !important;
  margin-bottom: 6px;
}

.boolean-radio-cell .control,
.picklist-cell .control {
  display: block !important;
  margin-left: 0 !important;
  clear: both;
}

/* Horizontal layout variant */
.boolean-radio,
.picklist.horizontal {
  display: flex;
  flex-wrap: wrap;
}

.boolean-radio input[type="radio"] {
  margin-right: 6px;
}

.boolean-radio label {
  margin-right: 10px;
}

/* ------------------------------------
   Checkboxes
   Enhanced with flexbox alignment
   ------------------------------------ */
.col-md-9.checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------
   Radio & Checkbox Focus States
   Remove default outline, add themed ring
   ------------------------------------ */

/* Remove default focus outline */
:where(input[type="radio"], input[type="checkbox"]):focus {
  outline: none;
  box-shadow: none;
}

/* Add accessible themed focus ring */
:where(input[type="radio"], input[type="checkbox"]):focus-visible {
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--scholarion-secondary), white 80%);
  border-color: var(--scholarion-secondary);
}

/* Only show keyboard focus, not mouse click */
:where(input[type="radio"], input[type="checkbox"]):focus:not(:focus-visible) {
  box-shadow: none;
}

/* High contrast mode: preserve outlines for accessibility */
@media (forced-colors: active) {
  :where(input[type="radio"], input[type="checkbox"]):focus {
    outline: 1px solid CanvasText;
  }
}

/* ------------------------------------
   Microsoft Toggle Switch (Fluent UI Override)
   Custom branded toggle styling
   ------------------------------------ */
.ms-Toggle,
.ms-Toggle-innerContainer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-family: var(--scholarion-font-sans, "Segoe UI", sans-serif) !important;
}

/* Toggle label */
.ms-Toggle .ms-Toggle-stateText {
  font-weight: 600 !important;
  color: var(--scholarion-text, #1d1d1d) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Toggle track */
.ms-Toggle .ms-Toggle-background {
  width: 42px !important;
  height: 24px !important;
  border-radius: 50px !important;
  background-color: var(--sg-bg, #fff) !important;
  border: 1.5px solid var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
  padding: 2px !important;
  display: inline-block !important;
  position: relative !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Toggle thumb (circle) */
.ms-Toggle .ms-Toggle-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Checked state */
.ms-Toggle.is-checked .ms-Toggle-background {
  background-color: var(--scholarion-secondary) !important;
  border-color: var(--scholarion-secondary) !important;
}

.ms-Toggle.is-checked .ms-Toggle-thumb {
  transform: translateX(18px) !important;
}

/* Hover states */
.ms-Toggle:hover .ms-Toggle-background {
  border-color: var(--scholarion-accent) !important;
}

.ms-Toggle.is-checked:hover .ms-Toggle-background {
  background-color: var(--scholarion-accent) !important;
}

/* Focus ring */
.ms-Toggle .ms-Toggle-background:focus,
.ms-Toggle .ms-Toggle-background:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.25) !important;
}

/* Disabled state */
.ms-Toggle[aria-disabled="true"],
.ms-Toggle.is-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* Prevent label wrapping */
.ms-Toggle-innerContainer {
  flex-wrap: nowrap !important;
}

/* ------------------------------------
   Form Validation & Error States
   Visual indicators for invalid fields
   ------------------------------------ */

/* Error field styling - applied via JavaScript */
.scholarion-error {
  border-color: var(--scholarion-danger) !important;
  box-shadow: 0 0 0 .2rem var(--scholarion-danger-ring);
}

/* Error message text */
.scholarion-error-message {
  color: var(--scholarion-danger);
  font-size: 0.875em;
  margin-top: 4px;
}

/* Checkbox error messages on new line */
.checkbox-cell .control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.checkbox-cell .scholarion-error-message {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
}

/* Required field indicators */
.scholarion-required-indicator,
.required-marker {
  color: var(--scholarion-danger);
  font-weight: 700;
  margin-left: 0.2rem;
  font-size: 1em;
  line-height: 1;
  background: transparent !important;
  /* Override bootstrap bg colour */
}

/* Override inline validation colors from Power Pages */
.validators span[id^="RequiredFieldValidator"],
.validators span[id^="DateFormatValidator"],
.validators span[id^="RequiredFieldValidator"][style],
.validators span[id^="DateFormatValidator"][style],
.validators>span:first-of-type {
  color: var(--scholarion-danger) !important;
  font-weight: 700 !important;
  font-size: 1em !important;
  margin-left: 0.25rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}


/* Reduce h2 header size in validation summary */
#ValidationSummaryEntityFormView .validation-header,
.validation-summary .validation-header {
  font-size: 1.25rem !important;
  /* ~20px - Reduced from default h2 size */
  line-height: 1.4 !important;
  margin-bottom: 0.75rem;
  color: color-mix(in oklab, var(--scholarion-link) 70%, black);
}

/* Add icon before each list item in validation summary */
#ValidationSummaryEntityFormView ul[role="presentation"] li,
.validation-summary ul[role="presentation"] li {
  position: relative;
  padding-left: 1.25rem;
  /* Space for icon */
  margin-bottom: 0.25rem;
  margin-left: 25px;
}

#ValidationSummaryEntityFormView ul[role="presentation"] li::before,
.validation-summary ul[role="presentation"] li::before {
  content: "\f06a";
  /* Font Awesome exclamation-circle icon */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  /* Solid style */
  position: absolute;
  left: 0;
  top: 0.125rem;
  /* Slight vertical adjustment for alignment */
  color: color-mix(in oklab, var(--scholarion-link) 70%, black);
  font-size: 0.875rem;
  /* ~14px */
}

/* Ensure link doesn't overlap with icon */
#ValidationSummaryEntityFormView ul[role="presentation"] li a,
.validation-summary ul[role="presentation"] li a {
  display: inline-block;
  color: color-mix(in oklab, var(--scholarion-link) 70%, black) !important;
  text-decoration: none;
}


/* ------------------------------------
   Field Descriptions
   ------------------------------------ */
.field-description {
  padding-top: 25px;
}

.section-title-description {
  padding-left: 28px;
}

/* ------------------------------------
   File Upload Links
   Icon before upload links
   ------------------------------------ */

.hyperlink.l {
  color: var(--scholarion-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s;
}

.hyperlink.l::before {
  content: "\f574";
  /* fa-solid fa-file-arrow-up */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5rem;
  display: inline-block;
}

/* Remove abbreviation underline */
abbr[title] {
  text-decoration: unset;
}


/* ============================================================================
   10. BUTTONS
   ============================================================================
   
   Consistent button styling with primary, secondary, and disabled states.
   Includes hover, focus, and active state transitions.
   
   ============================================================================ */

/* ------------------------------------
   Base Button Styles
   Unified shape, typography, and spacing
   ------------------------------------ */
.button1,
.button2,
.btn,
.btn-primary,
.btn-secondary,
.btn-default,
.btn-info {
  border-radius: 12px !important;
  font-family: var(--scholarion-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 6px 20px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all .2s ease;
  margin-left: 5px !important;
  color: var(--scholarion-primary);
}

/* Special styling for view-toolbar buttons */
.view-toolbar .btn-info {
  font-family: var(--scholarion-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 6px 20px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all .2s ease;
  margin-left: 5px !important;
  color: #fff;
}

/* Remove underline from anchor buttons */
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-default,
a.btn:hover,
a.btn:focus,
a.btn:active {
  text-decoration: none !important;
}

/* ------------------------------------
   Primary Buttons
   Filled style with primary brand color
   ------------------------------------ */
.button1,
.btn-primary,
.btn-info {
  color: #fff !important;
  background-color: var(--scholarion-primary) !important;
  border: 1px solid var(--scholarion-primary) !important;
}

.button1:hover,
.btn-primary:hover,
.button1:focus,
.btn-primary:focus {
  background-color: var(--scholarion-accent) !important;
  border-color: var(--scholarion-accent) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.button1:active,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--scholarion-secondary) !important;
  border-color: var(--scholarion-secondary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--sg-header-bg, #f7f9fb) !important;
  color: var(--sg-muted, #637083) !important;
  border-color: var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
  opacity: 0.65;
  box-shadow: none;
  cursor: not-allowed;
}

/* ------------------------------------
   Secondary Buttons
   Outlined style with transparent background
   ------------------------------------ */
.button2,
.btn-secondary,
.btn-default {
  background-color: var(--sg-bg, #fff) !important;
  color: var(--scholarion-primary) !important;
  border: 1px solid var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
}

.button2:hover,
.btn-secondary:hover,
.btn-default:hover,
.button2:focus,
.btn-secondary:focus,
.btn-default:focus {
  background: var(--scholarion-accent) !important;
  border-color: var(--scholarion-accent) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.button2:active,
.btn-secondary:active,
.btn-default:active,
.btn-secondary.active,
.btn-default.active {
  background: var(--scholarion-secondary) !important;
  border-color: var(--scholarion-secondary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.btn-secondary:disabled,
.btn-default:disabled,
.btn-secondary.disabled,
.btn-default.disabled {
  background: var(--sg-header-bg, #f7f9fb) !important;
  color: var(--sg-muted, #637083) !important;
  border-color: var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
  opacity: 0.65;
  box-shadow: none;
  cursor: not-allowed;
}

/* ------------------------------------
   Button Icon Spacing
   ------------------------------------ */
.btn i,
.button1 i,
.button2 i {
  margin-inline-start: .35rem;
  font-size: 1rem;
  line-height: 1;
}

/* Icon spacing in view-toolbar action buttons */
.view-toolbar .action .fa {
  margin-right: 8px;
}

/* ------------------------------------
   Button Focus States
   Accessible focus rings for keyboard navigation
   ------------------------------------ */

/* Remove default focus outline */
.btn:focus,
input[type="button"].btn:focus,
input[type="submit"].btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Themed focus ring on keyboard focus */
.btn:focus-visible,
input[type="button"].btn:focus-visible,
input[type="submit"].btn:focus-visible {
  box-shadow: 0 0 0 .22rem color-mix(in oklab, var(--scholarion-primary), white 78%), 0 2px 6px rgba(0, 0, 0, 0.12);
  border-color: var(--scholarion-primary) !important;
}

/* Focus styling for outlined buttons */
.btn-default:focus-visible,
.btn-secondary:focus-visible {
  border-color: var(--scholarion-primary) !important;
}

/* No ring on mouse click */
.btn:focus:not(:focus-visible) {
  box-shadow: none !important;
}

/* High contrast mode outline */
@media (forced-colors: active) {
  .btn:focus {
    outline: 1px solid CanvasText;
    outline-offset: 2px;
  }
}

/* ------------------------------------
   Utility - Hide "Add Folder" Buttons
   ------------------------------------ */
.view-toolbar a.add-folder.btn-info {
  display: none !important;
}

/* ------------------------------------
   Utility - "Edit" Buttons on Review & Submit steps
   ------------------------------------ */

/* Make h2 and button container appear on one line */
h2.tab-title.review {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h2.tab-title.review .section-actions {
  margin-left: auto;
}





/* ============================================================================
   11. ALERTS & NOTIFICATIONS
   ============================================================================
   
   System alerts, validation messages, and toast notifications.
   
   ============================================================================ */

/* ------------------------------------
   Alert Base Styles
   ------------------------------------ */
.alert {
  --bs-alert-bg: var(--scholarion-alert);
  --bs-alert-padding-x: var(--scholarion-alert-padding-x);
  --bs-alert-padding-y: var(--scholarion-alert-padding-y);
  --bs-alert-margin-bottom: 0px;
  --bs-alert-color: inherit;
  --bs-alert-border-color: var(--scholarion-alert);
  --bs-alert-border: none;
  position: relative;
  color: var(--scholarion-text);
  background: var(--scholarion-alert);
}

.alert-info {
  --bs-alert-color: var(--scholarion-text) !important;
  --bs-alert-bg: var(--scholarion-alert) !important;
}

/* Error message styling */
div.message.error {
  background: var(--scholarion-warning);
  border-color: var(--scholarion-warning);
  color: var(--scholarion-text);
  border-radius: 12px;
  margin-bottom: 20px;
  text-shadow: var(--scholarion-shadow-md);
}

/* ------------------------------------
   Toast Notification System
   Modern slide-in notifications (replaces OOB banners)
   ------------------------------------ */

/* Hide default Power Pages notification wrappers */
body>.notifications,
body .notifications {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: 0 !important;
}

/* Toast container - fixed top-right */
#sch-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 580px;
  pointer-events: none;
  width: 400px;
  /* Allows clicks through except on toast elements */
}

/* Individual toast styling */
#sch-toast-container .sch-toast {
  pointer-events: auto;
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 580px;
  opacity: 1;
  transition: opacity 300ms ease, transform 300ms ease;
  transform: translateY(0);
}

/* Toast fade-out animation */
#sch-toast-container .sch-toast.sch-toast-hide {
  opacity: 0 !important;
  transform: translateY(-10px);
}

/* Success toast variant */
#sch-toast-container .alert-success {
  background-color: #f3fbf3;
  border-color: #c8e9c5;
  color: #146c2e;
}

/* Error toast variant */
#sch-toast-container .alert-danger {
  background-color: #fef3f2;
  border-color: #f5c2c0;
  color: #b42318;
}

/* Toast close button */
#sch-toast-container .sch-toast .btn-close {
  width: 36px;
  height: 36px;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 5px !important;
  border: 1px solid var(--scholarion-border);
  border-radius: 9999px;
  background-color: var(--scholarion-surface);
  box-shadow: var(--scholarion-shadow-sm);
  opacity: 1;
  filter: none;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sch-toast-container .sch-toast .btn-close:hover {
  opacity: 1;
}

/* ============================================================================
   12. DATA GRIDS & TABLES
   ============================================================================
   
   Entity lists, subgrids, and data tables with sorting, pagination,
   and inline actions.
   
   ============================================================================ */

/* ------------------------------------
   Grid Actions Toolbar
   ------------------------------------ */
.grid-actions {
  border-bottom: none;
  margin-bottom: 9px;
  padding-bottom: 9px;
}

/* ------------------------------------
   Table Container
   Responsive wrapper with rounded corners and shadow
   ------------------------------------ */
.table-responsive {
  background: var(--sg-bg);
  border: 1px solid var(--sg-border);
  border-radius: 12px;
  box-shadow: var(--sg-shadow);
  overflow: hidden;
  /* Maintains rounded corners with horizontal scroll */
}

/* ------------------------------------
   Table Base Styling
   ------------------------------------ */
.table-responsive table.entity-grid,
table.entity-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  color: var(--sg-text);
  font-size: 0.9375rem;
  /* 15px */
}

/* ------------------------------------
   Table Header
   Sticky header for long lists
   ------------------------------------ */
table.entity-grid thead th {
  position: sticky;
  top: 0;
  background: var(--sg-header-bg);
  color: var(--sg-header-fg);
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: none;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--sg-border);
  z-index: 2;
}

/* Header link styling */
table.entity-grid thead th a,
.view-grid table.table thead th a {
  font-weight: 700 !important;
  color: var(--scholarion-primary) !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}

table.entity-grid thead th a:hover,
.view-grid table.table thead th a:hover,
table.entity-grid thead th a:focus,
.view-grid table.table thead th a:focus {
  color: var(--scholarion-accent) !important;
  text-decoration: none !important;
}

/* Active sort column */
table.entity-grid thead th.sort a,
.view-grid table.table thead th.sort a {
  color: var(--scholarion-primary) !important;
}

/* Sort indicator icons */
table.entity-grid thead th .fa,
.view-grid table.table thead th .fa,
table.entity-grid thead th [class*="fa-"] {
  margin-left: .35rem !important;
  font-size: .9rem !important;
  opacity: 0.7 !important;
  transition: opacity .15s ease, color .15s ease !important;
}

table.entity-grid thead th a:hover .fa,
.view-grid table.table thead th a:hover .fa,
table.entity-grid thead th a:focus .fa,
.view-grid table.table thead th a:focus .fa {
  opacity: 1 !important;
  color: var(--scholarion-accent) !important;
}

/* ------------------------------------
   Table Body Cells
   ------------------------------------ */
table.entity-grid tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--sg-border);
}

/* ------------------------------------
   Table Row Styling
   Zebra striping and hover effects
   ------------------------------------ */
table.entity-grid tbody tr:nth-child(even) {
  background: var(--sg-row-alt);
}

table.entity-grid tbody tr:hover {
  background: var(--sg-row-hover);
}

/* ------------------------------------
   Primary Column Links
   ------------------------------------ */
table.entity-grid tbody a.details-link {
  color: var(--scholarion-primary);
  text-decoration: none;
  font-weight: 600;
}

table.entity-grid tbody a.details-link:hover {
  color: var(--scholarion-accent);
}

/* ------------------------------------
   Inline Action Icons
   Edit, delete, and custom actions
   ------------------------------------ */

/* Action column fixed width */
td[aria-label="action menu"] {
  width: 72px;
  text-align: center;
}

/* Icon container */
.inline-action-icons {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
}

/* Remove all default link styling */
.inline-action-icons .list-action-icon,
.inline-action-icons .list-action-icon:link,
.inline-action-icons .list-action-icon:visited,
.inline-action-icons .list-action-icon:hover,
.inline-action-icons .list-action-icon:focus,
.inline-action-icons .list-action-icon:active {
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Icon colors */
.inline-action-icons .list-action-icon {
  color: var(--scholarion-primary);
  transition: color 0.2s ease;
}

.inline-action-icons .list-action-icon:hover,
.inline-action-icons .list-action-icon:focus {
  color: var(--scholarion-accent);
}

/* Visited link color override */
.inline-action-icons .list-action-icon:visited,
.inline-action-icons:visited .list-action-icon:visited {
  color: var(--scholarion-secondary) !important;
}

.inline-action-icons .list-action-icon:visited:hover {
  color: var(--scholarion-accent) !important;
}

/* Icon sizing */
.inline-action-icons .list-action-icon i {
  pointer-events: none;
  font-size: 1rem;
  line-height: 1;
}

/* Force-hide pseudo elements */
.inline-action-icons .list-action-icon::after {
  content: none !important;
}

/* Hide original OOB dropdown chevron (keep in DOM for functionality) */
td[aria-label="action menu"] .dropdown.action,
td[aria-label="action menu"] .dropdown.action .btn,
td[aria-label="action menu"] .dropdown.action .dropdown-toggle,
td[aria-label="action menu"] .dropdown.action .dropdown-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
}

/* ------------------------------------
   Empty & Loading States
   ------------------------------------ */
.entity-grid .view-empty-message,
.entity-grid .view-loading {
  color: var(--sg-muted);
  padding: 2rem 1rem;
  text-align: center;
}

/* ------------------------------------
   Special Column Badges
   Optional categorical column styling
   ------------------------------------ */
td[data-attribute="ata_leavetypeid"] {
  font-weight: 600;
}

td[data-attribute="ata_leavetypeid"]::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  margin-right: .5rem;
  background: var(--scholarion-primary);
  opacity: 0.6;
  vertical-align: middle;
}

/* ------------------------------------
   Pagination
   Centered pagination controls with icons
   ------------------------------------ */

/* Pagination container */
.view-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  margin-top: 1.5rem !important;
  text-align: center;
}

/* Pagination list */
.view-pagination .pagination {
  display: inline-flex;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Reset Bootstrap interference */
.view-pagination .pagination .page-item {
  border: none !important;
  margin: 0;
}

/* Page link base styling */
.view-pagination .pagination .page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-bg, #fff) !important;
  color: var(--scholarion-primary) !important;
  border: 1px solid var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  min-width: 38px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Hover and focus states */
.view-pagination .pagination .page-link:hover,
.view-pagination .pagination .page-link:focus {
  background: var(--scholarion-accent) !important;
  color: #fff !important;
  border-color: var(--scholarion-accent) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Active page */
.view-pagination .pagination .page-item.active .page-link {
  background: var(--scholarion-primary) !important;
  border-color: var(--scholarion-primary) !important;
  color: #fff !important;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Disabled state */
.view-pagination .pagination .page-item.disabled .page-link {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--sg-header-bg, #f7f9fb) !important;
  color: var(--sg-muted, #637083) !important;
  border-color: var(--sg-border, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: none !important;
}

/* ------------------------------------
   Pagination Icons (Font Awesome)
   Replace default < > with double-angle icons
   ------------------------------------ */

/* Hide default text */
.view-pagination .entity-pager-prev-link,
.view-pagination .entity-pager-next-link {
  font-size: 0 !important;
  color: var(--scholarion-primary) !important;
  position: relative;
}

/* Previous icon */
.view-pagination .entity-pager-prev-link::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f100";
  /* fa-angles-left */
  font-size: 1rem;
  color: var(--scholarion-primary);
  transition: color 0.15s ease;
}

/* Next icon */
.view-pagination .entity-pager-next-link::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f101";
  /* fa-angles-right */
  font-size: 1rem;
  color: var(--scholarion-primary);
  transition: color 0.15s ease;
}

/* Icon hover color */
.view-pagination .entity-pager-prev-link:hover::before,
.view-pagination .entity-pager-next-link:hover::after {
  color: var(--scholarion-accent);
}

/* ------------------------------------
   Custom Scrollbar (Wide Grids)
   ------------------------------------ */
.table-responsive::-webkit-scrollbar {
  height: 10px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

/* ------------------------------------
   Responsive Adjustments
   ------------------------------------ */
@media (max-width: 768px) {

  /* Compact table cells on mobile */
  table.entity-grid thead th {
    padding: .7rem .75rem;
    font-size: .85rem;
  }

  table.entity-grid tbody td {
    padding: .7rem .75rem;
  }

  /* Narrower action column */
  td[aria-label="action menu"] {
    width: 64px;
  }

  /* Smaller pagination controls */
  .view-pagination .pagination .page-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
    min-width: 32px;
  }
}

/* ============================================================================
   13. MULTI-STEP FORM PROGRESS INDICATOR
   ============================================================================
   
   Visual progress tracker for Power Pages webforms with multiple steps.
   
   ============================================================================ */

/* ------------------------------------
   Progress Indicator Container
   Target only enhanced webform progress bars
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"] {
  margin-bottom: 2rem !important;
  padding: 0 !important;
  font-family: "Segoe UI", system-ui, sans-serif;
  border-bottom: 2px solid var(--scholarion-border, #d9d9d9);
}

/* ------------------------------------
   Progress Step List
   Horizontal flex layout
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress.list-group.top {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  counter-reset: step;
}

/* ------------------------------------
   Individual Step Items
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.list-group-item {
  position: relative !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: #444 !important;
  background: #f8f9fa !important;
  border: none !important;
  border-bottom: 3px solid #ccc !important;
  padding: 0.75rem 0.5rem !important;
  transition: all 0.25s ease !important;
  cursor: default !important;
}

/* Completed steps */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.list-group-item-success {
  color: #0d3d3d !important;
  background-color: #e5f3f3 !important;
  border-bottom-color: #1a7a7a !important;
}

[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.list-group-item-success .fa-check {
  color: #1a7a7a !important;
  margin-left: 0.35rem;
}

/* Active step (current) */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.active {
  background-color: #1a7a7a !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-bottom-color: #1a7a7a !important;
  box-shadow: inset 0 -3px 0 #125c5c, 0 1px 0 rgba(0, 0, 0, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Upcoming/incomplete steps */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.incomplete {
  background-color: #f2f2f2 !important;
  color: #777 !important;
  border-bottom-color: #d0d0d0 !important;
}

/* Hover effect for non-active steps */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.list-group-item:not(.active):hover {
  background-color: #f0f8f8 !important;
  color: #1a7a7a !important;
}

/* ------------------------------------
   Step Dividers
   Subtle separator between steps
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30%;
  height: 40%;
  width: 2px;
  background-color: rgba(0, 0, 0, 0.05);
}

[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li:last-child::after {
  display: none;
}

/* ------------------------------------
   Rounded Corners
   Only on first and last steps
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 0 !important;
}

[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 0 !important;
}

[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* ------------------------------------
   Accessibility - Focus Highlight
   ------------------------------------ */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li:focus {
  outline: 2px solid #1a7a7a;
  outline-offset: 2px;
}

/* ============================================================================
   14. LINK STYLING
   ============================================================================
   
   Branded link styling with icons for external, email, and telephone links.
   
   ============================================================================ */

/* ------------------------------------
   Base Link Styling
   ------------------------------------ */
.main-content a {
  color: var(--scholarion-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s;
}

.main-content a:hover,
.main-content a:active {
  color: var(--scholarion-link-hover);
  text-decoration-color: currentColor;
}

.main-content a:focus-visible {
  outline: 2px solid var(--scholarion-link-hover);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* ------------------------------------
   External Links (target="_blank")
   Icon indicator for new window
   ------------------------------------ */
.main-content a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"]) {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.main-content a[target="_blank"]:not([href^="mailto:"]):not([href^="tel:"])::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f35d";
  /* up-right-from-square */
  font-size: .6em;
  line-height: 1;
  transform: translateY(1px);
}

/* ------------------------------------
   Email Links
   Envelope icon before mailto links
   ------------------------------------ */
.main-content a[href^="mailto:"],
.main-content a[href^="mailto:"].text-primary {
  color: var(--scholarion-link) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.main-content a[href^="mailto:"]::before,
.main-content a[href^="mailto:"].text-primary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0e0";
  /* envelope */
  font-size: 0.95em;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
  text-decoration: none !important;
}

.main-content a[href^="mailto:"]:hover,
.main-content a[href^="mailto:"].text-primary:hover,
.main-content a[href^="mailto:"]:active,
.main-content a[href^="mailto:"].text-primary:active {
  color: var(--scholarion-link-hover) !important;
  text-decoration-color: currentColor;
}

.main-content a[href^="mailto:"]:focus-visible,
.main-content a[href^="mailto:"].text-primary:focus-visible {
  outline: 2px solid var(--scholarion-link-hover);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* ------------------------------------
   Telephone Links
   Phone icon before tel links
   ------------------------------------ */
.main-content a[href^="tel:"] {
  color: var(--scholarion-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s, transform .15s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.main-content a[href^="tel:"]::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f095";
  /* phone */
  font-size: 0.95em;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
  text-decoration: none !important;
}

.main-content a[href^="tel:"]:hover,
.main-content a[href^="tel:"]:active {
  color: var(--scholarion-link-hover);
  text-decoration-color: currentColor;
}

.main-content a[href^="tel:"]:focus-visible {
  outline: 2px solid var(--scholarion-link-hover);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* ============================================================================
   15. MODAL DIALOGS
   ============================================================================
   
   Custom modal styling for Power Pages entity forms and detail views.
   Includes branded close button and title formatting.
   
   ============================================================================ */

/* ------------------------------------
   Modal Close Button
   Circular button with Font Awesome X icon
   ------------------------------------ */
#ModalDialog .modal-header,
.modal-dialog .modal-header {
  position: relative;
}

#ModalDialog .btn-close,
.modal-header .btn-close,
.modal-dialog .form-close {
  width: 36px;
  height: 36px;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 12px !important;
  border: 1px solid var(--scholarion-border);
  border-radius: 9999px;
  background-color: var(--scholarion-surface);
  box-shadow: var(--scholarion-shadow-sm);
  opacity: 1;
  filter: none;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide default button text/icon */
#ModalDialog .btn-close span,
.modal-dialog .form-close span {
  display: none !important;
}

/* Custom X icon */
#ModalDialog .btn-close::before,
.modal-dialog .form-close::before {
  content: "\f00d";
  /* fa-times */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  font-size: 14px;
  color: var(--scholarion-primary);
  line-height: 1;
}

/* Close button hover state */
#ModalDialog .btn-close:hover,
.modal-dialog .form-close:hover {
  background-color: color-mix(in oklab, var(--scholarion-primary) 10%, var(--scholarion-surface));
  border-color: var(--scholarion-primary);
}

#ModalDialog .btn-close:hover::before,
.modal-dialog .form-close:hover::before {
  color: var(--scholarion-primary);
}

/* Close button active state */
#ModalDialog .btn-close:active,
.modal-dialog .form-close:active {
  background-color: color-mix(in oklab, var(--scholarion-primary) 20%, var(--scholarion-surface));
  border-color: var(--scholarion-primary);
}

/* Close button focus state */
#ModalDialog .btn-close:focus,
.modal-dialog .form-close:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(26, 74, 74, 0.3), var(--scholarion-shadow-sm);
}

/* White variant support */
#ModalDialog .btn-close.btn-close-white,
.modal-dialog .form-close.btn-close-white {
  filter: none !important;
  background-image: none !important;
  opacity: 1 !important;
}

#ModalDialog .btn-close.btn-close-white::before,
.modal-dialog .form-close.btn-close-white::before {
  color: var(--scholarion-primary);
}

/* ------------------------------------
   Modal Title
   Branded typography with optional icon
   ------------------------------------ */
#ModalDialog .modal-title,
.modal-dialog .modal-title {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--scholarion-primary) !important;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding-right: 3rem;
  /* Space for close button */
}

#ModalDialog .modal-title i,
.modal-dialog .modal-title i {
  color: var(--scholarion-secondary);
  font-size: 1.5rem;
  line-height: 1;
}

/* ------------------------------------
   Modal Header
   ------------------------------------ */
#ModalDialog .modal-header,
.modal-dialog .modal-header {
  background-color: color-mix(in oklab, var(--scholarion-fg) 20%, var(--scholarion-surface));
  border-bottom: 2px solid var(--scholarion-secondary);
  padding: 1.25rem 1.5rem;
}

/* ------------------------------------
   Modal Body
   ------------------------------------ */
#ModalDialog .modal-body,
.modal-dialog .modal-body {
  padding: 1.5rem;
}

#ModalDialog h2,
.modal-dialog h2 {
  font-size: 18px !important;
}

#ModalDialog .modal-body iframe,
.modal-dialog .modal-body iframe {
  border: none;
  width: 100%;
  min-height: 550px;
}

/* Modal form labels - transparent background */
#ModalDialog .crmEntityFormView label {
  background-color: transparent !important;
}

@media (min-width: 576px) {

  .modal-body .container,
  .modal-body .container-sm,
  #content-container.container,
  #content-container.container-sm {
    max-width: 100% !important;
  }
}

/* Specify the "Add Medical Condition" modal height */
/* .modal-form .modal-body iframe[data-page="/_portal/modal-form-template-path/3440e126-3dea-4d25-bfe4-91948b553a54"] {
    height: 570px !important;
} */



/* ------------------------------------
   Modal Loading State
   ------------------------------------ */
#ModalDialog .form-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--scholarion-primary);
}

#ModalDialog .form-loading .fa-spinner {
  color: var(--scholarion-primary);
}



/* ------------------------------------
   Modal Responsive Adjustments
   ------------------------------------ */
@media (max-width: 768px) {
  #ModalDialog .modal-title {
    font-size: 1.125rem;
    padding-right: 2.5rem;
  }

  #ModalDialog .btn-close {
    width: 32px;
    height: 32px;
    right: 8px;
    top: 8px;
  }

  #ModalDialog .btn-close::before {
    font-size: 12px;
  }

  #ModalDialog .modal-header {
    padding: 1rem 1.25rem;
  }

  #ModalDialog .modal-body {
    padding: 1rem;
  }
}

/* ------------------------------------
   Modal Dark Mode Support
   ------------------------------------ */
/* @media (prefers-color-scheme: dark) {
  :root {
    --scholarion-surface: #1a1a1a;
    --scholarion-fg: #ffffff;
    --scholarion-border: #404040;
  }

  #ModalDialog .modal-title {
    color: var(--scholarion-fg);
  }

  #ModalDialog .modal-title i {
    color: var(--scholarion-secondary);
  }

  #ModalDialog .modal-header {
    background-color: color-mix(in oklab, var(--scholarion-surface) 80%, black);
    border-bottom-color: var(--scholarion-secondary);
  }

  #ModalDialog .modal-content {
    background-color: var(--scholarion-surface);
    color: var(--scholarion-fg);
  }
} */

/* ------------------------------------
   Modal High Contrast Mode
   ------------------------------------ */
/* [data-theme="high-contrast"] #ModalDialog .modal-title {
  font-weight: 700;
  color: #000;
}

[data-theme="high-contrast"] #ModalDialog .modal-title i {
  color: var(--scholarion-secondary);
  font-weight: 900;
}

[data-theme="high-contrast"] #ModalDialog .modal-header {
  border-bottom-width: 3px;
  background-color: #f0f0f0;
}

[data-theme="high-contrast"] #ModalDialog .btn-close {
  border-width: 2px;
  border-color: #000;
}

[data-theme="high-contrast"] #ModalDialog .btn-close::before {
  color: #000;
  font-weight: 900;
} */

/* ============================================================================
   16. LOADING INDICATORS
   ============================================================================
   
   Full-page spinner overlay for async operations.
   
   ============================================================================ */

/* ------------------------------------
   Global Loading Overlay
   ------------------------------------ */
#loading-spinner {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ------------------------------------
   Spinner Animation
   ------------------------------------ */
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--scholarion-primary);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   11. BREADCRUMB NAVIGATION
   ============================================================================
   
   Breadcrumb navigation for hierarchical page location indication.
   Provides visual wayfinding with minimal spacing and subtle separators.
   
   ============================================================================ */

/* ------------------------------------
   Breadcrumb Container
   ------------------------------------ */
/**
 * Breadcrumb Base Styles
 *
 * Compact breadcrumb navigation with tight spacing to maximize
 * available space for page content. Minimal margin prevents
 * excessive whitespace above page content.
 */
.breadcrumb {
  margin: .25rem 0 0;
  /* Tight top margin for compact header layout */
}

/* ------------------------------------
   Breadcrumb Separators
   ------------------------------------ */
/**
 * Breadcrumb Item Separators
 *
 * Uses the "›" character (single right-pointing angle quotation mark)
 * as a subtle visual separator between breadcrumb items.
 *
 * Design Decisions:
 * - 60% opacity for subtle, non-intrusive separators
 * - Inherits text color for theme consistency
 * - Symmetric horizontal padding for balanced spacing
 */
.breadcrumb li+li:before {
  content: "›";
  /* Unicode U+203A: single right-pointing angle quotation mark */
  padding: 0 .5rem;
  /* Balanced horizontal spacing around separator */
  color: inherit;
  /* Inherits parent text color for theme consistency */
  opacity: 0.6;
  /* Subtle appearance to de-emphasize separator */
}




/* HACK TO REMOVE PRIVATE MODE BANNER IN TEST */
.private-mode-text,
.private-mode-banner,
#privateModeText {
  display: none;
}



























/* END OF SCHOLARION THEME STYLESHEET
   ============================================================================ */