/**
 * ============================================================================
 * BGS THEME STYLESHEET
 * ============================================================================
 *
 * @description  Comprehensive theme system for BGS Parent Portal
 *               Built on Power Pages with Bootstrap 5 foundation
 * @version      23.1
 * @author       Scholarion Development Team
 * @license      Proprietary
 * @modified     2026-02-12
 *
   ============================================================================ */

:root {
  /* ------------------------------------
     Brand Colors
     Core brand identity colors
     ------------------------------------ */
  --scholarion-primary: #0f2d52;
  --scholarion-primary-dark: #0d3d3a; /* Darker Teal - Darker accent for hover states */
  --scholarion-secondary: #0f2d52;
  --scholarion-secondary-light: #2d8a8a; /* Light Teal - Lighter secondary for subtle elements */  
  --scholarion-secondary-rgb: 15, 107, 90;  /* Used for rgba() with opacity */
  --scholarion-tertiary: #6c757d;  
  --scholarion-tertiary-light: #f8f9fa;  
  --scholarion-tertiary-dark: #374151;      
  --scholarion-accent: #0f2d52; /* #0d6efd;*/
  --scholarion-nav-active-colour: #ffff /* #ffd520*/ !important;
  /* ------------------------------------
     Neutrals & Surface Colors
     Background, foreground, and border colors
     ------------------------------------ */
  --scholarion-bg: #f8f9fa;
  --scholarion-fg: var(--scholarion-secondary);
  --scholarion-surface: #ffffff;
  --scholarion-border: #e6e7e8;
  --scholarion-text: #0060a9;
  --scholarion-text-secondary: #0060a9;
  --scholarion-text-muted: #6b7280;
  --scholarion-sidebar-toggle-color: #ffffff;
  --scholarion-sidebar-nav-links-color: #ffffff
  /* ------------------------------------
     Semantic Feedback Colors
     Success, warning, danger, info states
     ------------------------------------ */
  --scholarion-success: #08bb82;
  --scholarion-warning: #ffd520;
  --scholarion-danger: #ff0000;
  --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;
  --scholarion-validation-colour: #78350f;

  /* ------------------------------------
     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-accent) !important;

  /* ------------------------------------
     Header Component Tokens
     ------------------------------------ */
  --scholarion-header-fg: #ffffff;
  --scholarion-header-bg: var(--scholarion-primary);
  --scholarion-header-fg-muted: #ffffff;
  --scholarion-header-hover: #ffd520;
  --scholarion-header-border: #e9ecef;  /* rgba(0, 0, 0, 0.12) */
  --scholarion-header-font: Poppins, sans-serif;
  --scholarion-header-title-font: Source Sans Pro; /*var(--scholarion-header-font)*/;
  --scholarion-header-title-weight: 600;

  /* ------------------------------------
     Footer Component Tokens
     ------------------------------------ */
  --scholarion-footer-font: var(--scholarion-header-font);
  --scholarion-footer-bg: var(--scholarion-primary);
  --scholarion-footer-fg: #ffffff;
  --scholarion-footer-fg-muted: #0060a9 ;
  --scholarion-footer-link: #0060a9;
  --scholarion-footer-link-hover: #d97706;

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

  /* ------------------------------------
     Navigation Tokens
     ------------------------------------ */
  --scholarion-nav-active-colour: var(--scholarion-accent);
  --scholarion-nav-hover-colour: var(--scholarion-accent);
  --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
     ------------------------------------ */
  --scholarion-header-h: 90px;
  --scholarion-header-h-mobile: 72px;
  --scholarion-footer-h: 72px;
  --scholarion-nav-w: 280px;
  --scholarion-nav-w-collapsed: 60px;
  --scholarion-footer-pad-x: 16px;
  --scholarion-gap: 24px;

  /* ------------------------------------
     Readonly Field Tokens
     Distinctive styling for non-editable form fields
     ------------------------------------ */
  --scholarion-readonly-border: #ccc;
  --scholarion-readonly-bg: #f2f2f2;

  /* ------------------------------------
     Toast Notification Tokens
     Semantic colors for success and danger toasts
     ------------------------------------ */
  --scholarion-toast-success-bg: #f3fbf3;
  --scholarion-toast-success-border: #c8e9c5;
  --scholarion-toast-success-fg: #146c2e;
  --scholarion-toast-save-bg: #1e7e34;
  --scholarion-toast-danger-bg: #fef3f2;
  --scholarion-toast-danger-border: #f5c2c0;
  --scholarion-toast-danger-fg: #b42318;

  /* ------------------------------------
     Filter Pill Tokens
     Tab-style filter button colors
     ------------------------------------ */
  --scholarion-pill-border: #d1d5db;
  --scholarion-pill-bg: #ffffff;
  --scholarion-pill-fg: #374151;
  --scholarion-pill-hover-bg: #f3f4f6;
  --scholarion-pill-hover-border: #9ca3af;
  --scholarion-pill-card-border: #e5e7eb;
  --scholarion-pill-title-fg: #1f2937;

  /* ------------------------------------
     Subgrid Theme Tokens
     ------------------------------------ */
  --scholarion-grid-bg: #fff;
  --scholarion-grid-border: rgba(0, 0, 0, 0.08);
  --scholarion-grid-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  --scholarion-grid-header-bg: #f7f9fb;
  --scholarion-grid-header-fg: #1b1f2a;
  --scholarion-grid-row-hover: #f4f7fb;
  --scholarion-grid-row-alt: #fbfcfe;
  --scholarion-grid-text: #27313f;
  --scholarion-grid-muted: #637083;
    
  /* ------------------------------------
     Transitions
     ------------------------------------ */
  --scholarion-transition-fast: 0.2s ease;
  --scholarion-transition-normal: 0.3s ease;
  --scholarion-transition-slow: 0.5s ease;

}

/* override --scholarion-header-h on mobile. */
  @media (max-width: 991.98px){
    :root{
      --scholarion-header-h: var(--scholarion-header-h-mobile);
    }
  }

 .sidebar-header .sidebar-title {
   color: var(--scholarion-sidebar-toggle-color) !important;
    font-weight: 600 !important;
 }

 #sidebarToggle{
  color:  var(--scholarion-sidebar-toggle-color);
 }

 .site-logo {
   max-height: 60px !important;
 }

 .button1,
 .btn-primary,
 .btn-info {
   background-color: var(--scholarion-accent) !important;
 }

 .button1:hover,
 .btn-primary:hover,
 .button1:focus,
 .btn-primary:focus {
   background-color: color-mix(in srgb, var(--scholarion-accent) 75%, black) !important;
 }

 :where(input[type="radio"], input[type="checkbox"]) {
   accent-color: var(--scholarion-accent) !important;
 }

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


 /* ------------------------------------
   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-accent) !important;
   box-shadow: 0 0 0 .25rem rgba(var(--scholarion-accent), 0.25) !important;
 }


 /* Entity List Filters */

 body:is([data-sitemap-state*="absence-notices-list"],
   [data-sitemap-state*="data-collections"],
   [data-sitemap-state*="enrolments"],
   [data-sitemap-state*="student-details-consent"],
   [data-sitemap-state*="extension-requests"]) .filter-pill.selected {
   background: var(--scholarion-accent);
   border-color: var(--scholarion-secondary);
 }

 body:is([data-sitemap-state*="absence-notices-list"],
   [data-sitemap-state*="data-collections"],
   [data-sitemap-state*="enrolments"],
   [data-sitemap-state*="student-details-consent"],
   [data-sitemap-state*="extension-requests"]) .btn-apply-filter {
   background: var(--scholarion-accent);
 }

 /* Hover state */
 body:is([data-sitemap-state*="absence-notices-list"],
   [data-sitemap-state*="data-collections"],
   [data-sitemap-state*="enrolments"],
   [data-sitemap-state*="student-details-consent"],
   [data-sitemap-state*="extension-requests"]) .filter-pill:hover {
   background: color-mix(in srgb, var(--scholarion-accent) 75%, black) !important;
   border-color: color-mix(in srgb, var(--scholarion-accent) 65%, black) !important;
   color: #ffffff;
 }

body:is(
    [data-sitemap-state*="absence-notices-list"],
    [data-sitemap-state*="data-collections"],
    [data-sitemap-state*="enrolments"],
    [data-sitemap-state*="student-details-consent"],
    [data-sitemap-state*="extension-requests"]
  )
  .btn-apply-filter:hover {
  background: color-mix(in srgb, var(--scholarion-accent) 75%, black) !important;
}

.navbar-dark .navbar-nav a.show, .navbar-dark .navbar-nav a.dropdown-toggle.show {
    background-color: var(--scholarion-accent) !important;
}



.btn-primary, .button1, btn-group>.btn {
    background-color: var(--scholarion-primary) !important;
    color: var(--scholarion-nav-active-colour) !important;;
}




/*Enrolment Application Tabs*/

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

/* Completed steps */
[id^="WebFormControl_"][id$="_ProgressIndicator"]>ol.progress li.list-group-item-success {
  color: #fff !important;
  background-color: #e5f3f3 !important;
  border-bottom-color: #0060a9 !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: #0060a9 !important;
}

.list-group-item {
  color: var(--scholarion-sidebar-nav-links-color) !important;
}

.navbar-nav .show.dropdown-menu>li>a{
  color: #ffffff !important;
}

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