/* ============================================
   iSAMS Theme for Parents Booking
   Color scheme: White, Navy Blue, and Pink (#ce415c)
   
   IMPORTANT FOR BACKEND INTEGRATION:
   This CSS file is self-contained and includes all necessary styling
   for the Parents Booking application. It minimizes dependency on
   bootstrap.css and styles.css by including utility classes and
   component styles directly.
   
   All styles use !important to ensure they override any conflicting
   styles from other CSS files or inline styles.
   
   Color Palette:
   - Primary Pink: #ce415c (accent color, active states, highlights)
   - Dark Gray: #3f404e (header, sidebar, booked appointments)
   - Navy Blue: #1a3a5f (links, text)
   - Medium Blue: #5ac1d2 (borders, form elements)
   - Red: #dc3545 (blocked/unavailable states)
   - White: #ffffff (backgrounds, available states)
   - Light Gray: #f5f5f5 (subtle backgrounds)
   
   ============================================ */

/* ========== SIDEBAR STYLING ========== */
/* Left sidebar background - iSAMS dark gray (#3f404e) */
div.a,
#header div.a,
.header div.a,
div.a.a {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

div.d,
#header div.d,
.header div.d {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

/* ========== HEADER STYLING ========== */
/* Top header bar - iSAMS dark gray matching sidebar */
#hedr {
  background-color: #3f404e !important; /* iSAMS dark gray */
  color: #ffffff !important; /* White text for all header content */
}

.b-c-hdiv {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

/* Header text elements - white for readability */
#hedr .scnholder,
#hedr .admnnameholder,
#hedr .sn,
#hedr .sntxt {
  color: #ffffff !important; /* White text for school name and username */
}

/* Header right side elements - white text */
#hedr .ln-lt,
#hedr .ln-lt > div,
#hedr .lan,
#hedr .lout {
  color: #ffffff !important; /* White text for Back to Superadmin, Language, Logout */
}

/* Log Out link - white by default, pink on hover */
#hedr .lout:hover,
.lout:hover {
  color: #ce415c !important; /* Pink on hover */
  transition: color 0.2s ease !important;
}

/* Header icons - white (excluding school and language icons) */
#hedr svg,
#hedr .louticon {
  filter: brightness(0) invert(1) !important; /* Make icons white */
  opacity: 0.95 !important;
}

/* School icon - keep original colors */
#hedr .schoolicon,
.schoolicon,
.snimg img {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Language icon - keep original colors */
#hedr .lanicon,
.lanicon {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Parents Booking logo in top right corner - keep original colors */
#hedr .ico,
#hedr img.ico,
.ln-lt .ico,
.ln-lt img.ico {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Header separator */
#hedr .sep {
  background-color: rgba(255, 255, 255, 0.3) !important; /* Light white separator */
}

/* ========== MENU ITEMS ========== */
/* Menu list items background - slightly darker than sidebar for contrast */
.list-h ul li {
  background-color: #353642 !important; /* Slightly darker gray for menu items */
  font-weight: 600 !important; /* Increased font weight for better visibility */
  letter-spacing: 0.3px !important; /* Slight letter spacing for clarity */
}

/* Active/Hover menu items - pink with enhanced visibility */
.list-h ul li:hover,
.list-h ul li.active {
  background: #ce415c !important; /* Pink for active/hover - override gradient */
  background-color: #ce415c !important; /* Pink for active/hover */
  background-image: none !important; /* Remove any gradient */
  color: #ffffff !important; /* White text on pink background */
  font-weight: 700 !important; /* Bolder font weight on hover/active for emphasis */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Active menu item indicator - enhanced pink bar on left */
.list-h ul li.active {
  position: relative;
  font-weight: 700 !important; /* Bolder font for active item */
}

.list-h ul li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px !important; /* Increased width from 4px to 5px for better visibility */
  background-color: #ce415c !important;
  box-shadow: 0 0 3px rgba(206, 65, 92, 0.5) !important; /* Subtle glow for visibility */
}

/* ========== FOOTER ========== */
.footer {
  background-color: #3f404e !important; /* iSAMS dark gray to match sidebar */
}

/* ========== BUTTONS ========== */
/* Primary buttons - #395ea3 with white text */
.c1e {
  background-color: #395ea3 !important; /* Button blue */
  color: #ffffff !important; /* White text */
  border: 0px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.c1e:hover,
.c1e:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important; /* White text */
}

/* Links inside buttons - ensure white text on hover for Notification Centre buttons */
.c1e a,
.c1e > a,
button.c1e a,
button.c1e > a {
  color: #ffffff !important; /* White text for links inside buttons */
  text-decoration: none !important;
}

.c1e:hover a,
.c1e:active a,
.c1e:hover > a,
.c1e:active > a,
button.c1e:hover a,
button.c1e:active a,
button.c1e:hover > a,
button.c1e:active > a {
  color: #ffffff !important; /* White text on hover - ensures readability */
}

/* Text-light class inside buttons should remain white */
.c1e .text-light,
button.c1e .text-light {
  color: #ffffff !important;
}

.c1e:hover .text-light,
.c1e:active .text-light,
button.c1e:hover .text-light,
button.c1e:active .text-light {
  color: #ffffff !important; /* White text on hover for Notification Centre buttons */
}

/* Notification Centre specific button hover - darker blue background with white text */
.b1 .c1e:hover,
.b1 button.c1e:hover,
#hid .c1e:hover,
#hid button.c1e:hover {
  background-color: #2d4a7a !important; /* Darker blue background on hover for Notification Centre */
  color: #ffffff !important; /* White text */
}

.b1 .c1e:hover a,
.b1 .c1e:hover > a,
.b1 button.c1e:hover a,
.b1 button.c1e:hover > a,
#hid .c1e:hover a,
#hid .c1e:hover > a,
#hid button.c1e:hover a,
#hid button.c1e:hover > a {
  color: #ffffff !important; /* White text on hover - ensures accessibility */
}

.b1 .c1e:hover .text-light,
.b1 button.c1e:hover .text-light,
#hid .c1e:hover .text-light,
#hid button.c1e:hover .text-light {
  color: #ffffff !important; /* White text on hover for Notification Centre buttons */
}

/* Action buttons - #395ea3 with white text */
.a-btn,
.a-btn2 {
  background-color: #395ea3 !important; /* Button blue */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.a-btn:hover,
.a-btn:active,
.a-btn2:hover,
.a-btn2:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important;
}

/* ========== ACCENT COLORS ========== */
/* Pink divider between header and main content area */
.divline {
  background-color: #ce415c !important; /* Pink */
}

/* Section titles - pink */
.ic2f1 {
  background-color: #ce415c !important; /* Pink for section titles */
  color: #ffffff !important; /* White text */
}

/* Pink for sidebar headers and category sections */
.ic2f2 {
  background-color: #ce415c !important; /* Pink for headers */
}

/* ========== PROGRESS BARS ========== */
/* Progress bar - pink */
.percentage-progress {
  background-color: #ce415c !important; /* Pink */
}

/* Progress bar container border */
.percentage-div {
  border: 2px solid #1a3a5f !important; /* Navy blue border */
  background-color: #f5f5f5 !important; /* Light gray/white background */
}

/* ========== ALERT BORDERS ========== */
.alert-border {
  border: 3px solid #ce415c !important; /* Pink */
}

/* ========== PAGINATION ========== */
.page-item.active .page-link {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  color: #ffffff !important;
}

.black-line {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
}

/* ========== RADIO BUTTONS ========== */
.table input[type="radio"]:checked,
[name="block"]:checked {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue border */
}

/* ========== BACKGROUND COLORS ========== */
/* Main content area - white */
body {
  background-color: #ffffff !important; /* White background */
}

/* Content boxes - white */
div.b1,
div.b2,
div#c {
  background-color: #ffffff !important; /* White for content boxes */
}

.bg-gray {
  background-color: #f5f5f5 !important; /* Very light gray (almost white) */
}

/* ========== SEPARATOR LINES ========== */
.sep {
  background-color: #e0e0e0 !important; /* Light gray separator */
}

.uline {
  background-color: #e0e0e0 !important; /* Light gray underline */
}

.sline {
  background-color: #e0e0e0 !important; /* Light gray separator line */
}

/* ========== TEXT COLORS ========== */
/* Main text - dark/black for readability */
body,
div.b1,
div.b2 {
  color: #000000 !important; /* Black text */
}

/* Links - navy blue */
a {
  color: #1a3a5f !important; /* Navy blue for links */
}

a:hover {
  color: #ce415c !important; /* Pink on hover */
}

/* ============================================
   FORM ELEMENTS STYLING
   Used in: All pages with forms (teachers.html, teacher-availability.html, index.html)
   
   Purpose: Provides consistent styling for all form inputs, selects, and textareas.
   All form elements use the theme's medium blue (#5ac1d2) for borders and focus states.
   ============================================ */

/* ========== INPUT FIELDS ========== */
/* Base styling for all text inputs */
[type="text"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  background-color: #ffffff !important;
  border: 1px solid #5ac1d2 !important; /* iSAMS medium blue border */
  color: #000000 !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Form control class - Bootstrap-compatible class name */
.form-control {
  display: block !important;
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 1px solid #5ac1d2 !important;
  box-sizing: border-box !important;
}

/* Input focus state - blue border with subtle glow */
[type="text"]:focus,
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
  box-shadow: 0 0 0 0.2rem rgba(90, 193, 210, 0.25) !important; /* Blue glow effect */
  outline: none !important;
}

/* ========== SELECT DROPDOWNS ========== */
/* Base styling for select dropdowns */
select {
  background-color: #ffffff !important;
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue border (thicker for selects) */
  color: #000000 !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Form select class - Bootstrap-compatible class name */
.form-select {
  display: block !important;
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 2px solid #5ac1d2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Select focus state */
select:focus,
.form-select:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
  box-shadow: 0 0 0 0.2rem rgba(90, 193, 210, 0.25) !important;
  outline: none !important;
}

/* ========== TEXTAREA ========== */
/* Multi-line text input */
textarea {
  min-height: 100px !important;
  resize: vertical !important; /* Allow vertical resizing only */
}

/* ========== LABELS ========== */
/* Form labels - bold text for better readability */
label {
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

/* ========== TABLE STYLING ========== */
/* Table headers - light gray/white background */
th {
  background-color: #f5f5f5 !important; /* Very light gray for table headers */
  color: #000000 !important; /* Black text */
  border: 1px solid #e0e0e0 !important;
}

/* Table cells */
td {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
}

/* ========== MODAL STYLING ========== */
.parent-details-modal .c1e {
  background-color: #395ea3 !important; /* Button blue - consistent with primary buttons */
  color: #ffffff !important;
}

.parent-details-modal .c1e:hover,
.parent-details-modal .c1e:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important;
}

/* ========== DELETE BUTTON ========== */
.delete {
  background-color: #395ea3 !important; /* Button blue - consistent with other buttons */
  color: #ffffff !important;
}

.delete:hover {
  background-color: #2d4a7a !important; /* Darker blue for delete hover */
  color: #ffffff !important;
}

/* ========== DROPDOWN MENUS ========== */
.second-drop ol,
.third-drop ol,
.forth-drop ol,
.form-div-4 ol {
  background: #ffffff !important;
  border: 1px solid #1a3a5f !important; /* Navy blue border */
  box-shadow: 0 2px 8px rgba(26, 58, 95, 0.2) !important;
}

.second-drop ol li a:hover,
.third-drop ol li a:hover,
.forth-drop ol li a:hover,
.form-div-4 ol li a:hover {
  background-color: #f5f5f5 !important; /* Light gray hover */
  color: #1a3a5f !important; /* Navy blue text */
}

/* ============================================
   ACCORDION STYLING
   Used in: teachers.html (Student Selection modal)
   
   Purpose: Provides collapsible sections for organizing content.
   Used in modals to show/hide sections like "Select a class", "Select a class code".
   ============================================ */

/* Accordion container - removes default list styling */
.accordion {
  display: block !important;
}

.accordion-flush {
  border: none !important;
}

/* Accordion item - individual collapsible section */
.accordion-item {
  border: 1px solid #e0e0e0 !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
}

/* Accordion header - clickable button that toggles the section */
.accordion-header {
  margin-bottom: 0 !important;
}

/* Accordion button - the clickable element */
.accordion-button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  padding: 12px 15px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

/* Accordion button when section is expanded (not collapsed) */
.accordion-button:not(.collapsed) {
  background-color: #f5f5f5 !important; /* Very light gray when expanded */
  color: #1a3a5f !important; /* Navy blue text */
  box-shadow: inset 0 -1px 0 rgba(206, 65, 92, 0.3) !important; /* Subtle pink shadow */
}

/* Accordion button when collapsed */
.accordion-button.collapsed {
  background-color: #ffffff !important;
}

/* Accordion collapse - the collapsible content area */
.accordion-collapse {
  display: none !important;
}

.accordion-collapse.show,
.accordion-collapse:not(.collapse) {
  display: block !important;
}

/* Accordion body - content inside the collapsible section */
.accordion-body {
  padding: 15px !important;
  background-color: #ffffff !important;
}

/* ============================================
   MODAL STYLING
   Used in: teachers.html (Student Selection modal)
   
   Purpose: Provides overlay dialogs for user interactions.
   Modals appear on top of the main content and require user action to dismiss.
   ============================================ */

/* Modal backdrop - dark overlay behind the modal */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1040 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent black */
}

/* Modal container - hidden by default */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1050 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
}

/* Modal visible state */
.modal.show,
.modal.fade.show {
  display: block !important;
}

/* Modal fade animation */
.modal.fade {
  transition: opacity 0.15s linear !important;
}

/* Modal dialog - the actual modal box */
.modal-dialog {
  position: relative !important;
  width: auto !important;
  margin: 1.75rem auto !important;
  pointer-events: none !important;
}

/* Modal dialog sizes */
.modal-lg {
  max-width: 900px !important;
}

.modal-sm {
  max-width: 300px !important;
}

/* Modal content - the white box containing modal content */
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.3rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  outline: 0 !important;
}

/* Modal header - top section with title and close button */
.modal-header {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1rem !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

.modal-title {
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

/* Modal body - main content area */
.modal-body {
  position: relative !important;
  flex: 1 1 auto !important;
  padding: 1rem !important;
}

.modal-body.pad-0 {
  padding: 0 !important;
}

/* Modal footer - bottom section with action buttons */
.modal-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0.75rem !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* Close button - X button in modal header */
.btn-close {
  box-sizing: content-box !important;
  width: 1em !important;
  height: 1em !important;
  padding: 0.25em 0.25em !important;
  color: #000 !important;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  border: 0 !important;
  border-radius: 0.25rem !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

.btn-close:hover {
  color: #000 !important;
  text-decoration: none !important;
  opacity: 0.75 !important;
}

/* ========== ACTIVE TAB STYLING ========== */
/* Pink underline for active tabs */
.active-tab,
.tab-active {
  border-bottom: 3px solid #ce415c !important; /* Pink */
  color: #ffffff !important;
}

/* ========== RESPONSIVE STYLING (Tablet & Mobile) ========== */
/* Tablet and below - maintain all color changes */
@media (max-width: 1000px) {
  div.a {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray on tablet */
  }
  
  .exp {
    background-color: #3f404e !important; /* iSAMS dark gray for mobile menu */
  }
  
  /* Ensure hover states work on touch devices */
  .list-h ul li:hover,
  .list-h ul li.active {
    background-color: #ce415c !important;
    color: #ffffff !important;
    font-weight: 700 !important; /* Maintain bold font on hover/active */
  }
  
  .list-h ul li {
    font-weight: 600 !important; /* Maintain increased font weight on tablet */
  }
  
  .list-h ul li.active::before {
    width: 5px !important; /* Maintain wider active indicator on tablet */
  }
  
  .c1e:hover,
  .c1e:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* Mobile devices - maintain all color changes */
@media (max-width: 700px) {
  div.a {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray on mobile */
  }
  
  .exp {
    background-color: #3f404e !important; /* iSAMS dark gray for mobile menu */
  }
  
  #hedr {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray header */
    color: #ffffff !important;
  }
  
  .b-c-hdiv {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray header */
  }
  
  /* Ensure header text remains white on mobile */
  #hedr .scnholder,
  #hedr .admnnameholder,
  #hedr .ln-lt,
  #hedr .lan,
  #hedr .lout {
    color: #ffffff !important;
  }
  
  /* Log Out link hover on mobile */
  #hedr .lout:hover,
  .lout:hover {
    color: #ce415c !important; /* Pink on hover */
  }
  
  /* Help button on mobile */
  .c1e.help:hover,
  .help.c1e:hover,
  div.c1e.help:hover,
  button.c1e.help:hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  /* Book Live Training button on mobile */
  .c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  .d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
  .d-flex > .c1e:first-child:not(.help):hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  .divline {
    background-color: #ce415c !important; /* Maintain pink divider */
  }
  
  /* Ensure all button hover states work */
  .a-btn:hover,
  .a-btn:active,
  .a-btn2:hover,
  .a-btn2:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  /* Maintain all color changes on small screens */
  div.a,
  div.d,
  .footer {
    background-color: #3f404e !important; /* iSAMS dark gray */
  }
  
  #hedr,
  .b-c-hdiv {
    background-color: #3f404e !important; /* iSAMS dark gray */
    color: #ffffff !important;
  }
  
  /* Ensure header text remains white on small screens */
  #hedr .scnholder,
  #hedr .admnnameholder,
  #hedr .ln-lt,
  #hedr .lan,
  #hedr .lout {
    color: #ffffff !important;
  }
  
  /* Log Out link hover on small screens */
  #hedr .lout:hover,
  .lout:hover {
    color: #ce415c !important; /* Pink on hover */
  }
  
  /* Help button on small screens */
  .c1e.help:hover,
  .help.c1e:hover,
  div.c1e.help:hover,
  button.c1e.help:hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  /* Book Live Training button on small screens */
  .c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  .d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
  .d-flex > .c1e:first-child:not(.help):hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  .divline {
    background-color: #ce415c !important;
  }
  
  .list-h ul li {
    background-color: #353642 !important; /* Slightly darker gray for menu items */
    font-weight: 600 !important; /* Maintain increased font weight on small screens */
  }
  
  .list-h ul li:hover,
  .list-h ul li.active {
    background-color: #ce415c !important;
    color: #ffffff !important;
    font-weight: 700 !important; /* Maintain bold font on hover/active */
  }
  
  .list-h ul li.active::before {
    width: 5px !important; /* Maintain wider active indicator on small screens */
  }
  
  .c1e {
    background-color: #395ea3 !important; /* Button blue */
  }
  
  .c1e:hover,
  .c1e:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* ========== ADDITIONAL STYLING ========== */
/* Ensure white text on dark sidebar backgrounds */
div.a,
div.d,
.footer,
.list-h ul li {
  color: #ffffff !important; /* White text for readability on dark background */
}

/* Active menu item text color - enhanced visibility */
.list-h ul li.active a,
.list-h ul li:hover a {
  color: #ffffff !important; /* White text on pink background */
  font-weight: 700 !important; /* Bolder font weight for active/hover items */
}

/* Icon colors - white on dark sidebar background */
div.a img,
div.a svg {
  filter: brightness(0) invert(1); /* Make icons white on dark sidebar for visibility */
  opacity: 0.95; /* Slight opacity for better visibility */
}

/* ========== ENHANCED HOVER STATES ========== */
/* Enhanced roll-over states for all interactive elements */
button:hover {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Additional button hover states */
button.c1e:hover,
button.a-btn:hover,
button.a-btn2:hover {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Dropdown item hover states */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f5f5 !important;
  color: #1a3a5f !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Override any gradient backgrounds with pink */
.hov-active {
  background: #ce415c !important; /* Pink - override gradient */
  background-color: #ce415c !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* ========== FOCUS STATES ========== */
/* Focus rings in pink */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #ce415c !important;
  outline-offset: 2px !important;
}

/* ========== NAVIGATION MENU LINKS ========== */
.list-h ul li a {
  color: #ffffff !important; /* White text on dark sidebar */
  text-decoration: none !important;
  font-weight: 600 !important; /* Increased font weight for better contrast */
}

.list-h ul li.active a,
.list-h ul li:hover a {
  color: #ffffff !important; /* White text when active/hovered */
  font-weight: 700 !important; /* Bolder font weight for active/hover items */
}

/* ========== BANNER/ALERT STYLING ========== */
/* Pink banner for alerts */
#red-banner {
  background-color: #ce415c !important; /* Pink */
  color: #ffffff !important;
}

/* ========== CHECKBOXES ========== */
[type="checkbox"] {
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue */
}

[type="checkbox"]:checked {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  border-color: #5ac1d2 !important;
}

/* ========== SEARCH INPUTS ========== */
.form-input {
  border: 1px solid #5ac1d2 !important; /* iSAMS medium blue */
  background-color: #ffffff !important;
}

.form-input:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
  box-shadow: 0 0 0 0.2rem rgba(90, 193, 210, 0.25) !important;
}

/* ========== DROPDOWN ITEMS ========== */
.dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #1a3a5f !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f5f5 !important;
  color: #1a3a5f !important;
}

/* ========== BADGES AND LABELS ========== */
.badge,
.label {
  background-color: #ce415c !important;
  color: #ffffff !important;
}

/* ========== CARD STYLING ========== */
.card {
  background-color: #ffffff !important;
  border: 1px solid #1a3a5f !important;
}

.card-header {
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #1a3a5f !important;
  color: #000000 !important;
}

/* ============================================
   SUBJECT SELECTION STYLING
   Used in: teachers.html - Edit a teacher page
   
   Purpose: Provides visual feedback for subject selection states.
   When a teacher has multiple subjects, selected subjects appear in pink,
   non-selected in white, with pink hover effect.
   ============================================ */

/* Subject names/chips - default state (white text) */
/* Apply to any element with class containing "subject" or specific subject classes */
.subject-item,
.subject-name,
.subject-chip,
.subject-tag,
[class*="subject"] {
  color: #ffffff !important; /* White text for non-selected subjects */
  background-color: transparent !important;
  padding: 5px 10px !important;
  margin: 3px !important;
  display: inline-block !important;
  cursor: pointer !important; /* Indicates clickable element */
  transition: color 0.2s ease, background-color 0.2s ease !important;
  border: 1px solid transparent !important;
}

/* Selected subject state - pink color to indicate active selection */
/* Add .selected class to the subject element when it's the active/selected subject */
.subject-item.selected,
.subject-name.selected,
.subject-chip.selected,
.subject-tag.selected,
[class*="subject"].selected {
  color: #ce415c !important; /* Pink (#ce415c) for selected subjects */
  background-color: transparent !important;
}

/* Hover state for non-selected subjects - pink on hover */
/* Provides visual feedback when user hovers over unselected subjects */
.subject-item:hover:not(.selected),
.subject-name:hover:not(.selected),
.subject-chip:hover:not(.selected),
.subject-tag:hover:not(.selected),
[class*="subject"]:hover:not(.selected) {
  color: #ce415c !important; /* Pink hover effect */
  transition: color 0.2s ease !important;
}

/* Subject pills/badges styling - rounded pill-shaped subject indicators */
/* Alternative styling option for subject display */
.subject-pill {
  display: inline-block !important;
  padding: 5px 15px !important;
  margin: 3px !important;
  border-radius: 20px !important; /* Rounded pill shape */
  cursor: pointer !important;
  color: #ffffff !important; /* White text by default */
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Selected pill state */
.subject-pill.selected {
  color: #ce415c !important; /* Pink when selected */
}

/* Hover state for non-selected pills */
.subject-pill:hover:not(.selected) {
  color: #ce415c !important; /* Pink on hover */
}

/* ============================================
   TEACHER AVAILABILITY PAGE STYLING
   Used in: teacher-availability.html
   
   Purpose: Creates a visual scheduling interface showing teacher availability
   with color-coded time slots. Each cell represents a time period and can be
   in one of four states: available (white), booked (gray), blocked (red), or break (light blue).
   ============================================ */

/* ========== TIMELINE HEADER ========== */
/* Horizontal timeline displaying time slots (e.g., 15:00, 16:00, etc.) */
/* This creates the top row showing time markers */
.availability-timeline {
  display: flex !important;
  border-bottom: 2px solid #e0e0e0 !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
  overflow-x: auto !important; /* Allows horizontal scrolling for long timelines */
}

/* Individual time slot marker (e.g., "15:00", "16:00") */
.time-slot {
  min-width: 60px !important; /* Minimum width for each time slot */
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  position: relative !important; /* Needed for ::after pseudo-element */
}

/* Vertical line after each time slot for visual separation */
.time-slot::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 20px !important;
  bottom: -7px !important;
  width: 1px !important;
  background-color: #e0e0e0 !important; /* Light gray separator line */
}

/* Remove line after the last time slot */
.time-slot:last-child::after {
  display: none !important;
}

/* Sub-slot markers for 15-minute intervals (lighter lines between main time slots) */
.time-subslot {
  position: absolute !important;
  right: 0 !important;
  top: 20px !important;
  bottom: -7px !important;
  width: 1px !important;
  background-color: #f0f0f0 !important; /* Very light gray for sub-intervals */
}

/* ========== TEACHER ROW LAYOUT ========== */
/* Container for each teacher's availability row */
/* Contains teacher name on left and availability grid on right */
.teacher-row {
  display: flex !important;
  align-items: center !important; /* Vertically centers teacher name with grid */
  margin-bottom: 10px !important;
  min-height: 40px !important;
}

/* Teacher name column - fixed width on left side */
.teacher-name {
  min-width: 200px !important; /* Fixed width to prevent name column from shrinking */
  font-weight: 600 !important;
  padding-right: 15px !important;
}

/* Teacher name link styling */
.teacher-name a {
  color: #1a3a5f !important; /* Navy blue for links */
  text-decoration: none !important;
}

/* Teacher name link hover state */
.teacher-name a:hover {
  color: #ce415c !important; /* Pink on hover */
}

/* ========== AVAILABILITY GRID ========== */
/* Horizontal grid container for availability cells */
/* This is the scrollable area showing time slots for each teacher */
.availability-grid {
  display: flex !important;
  flex: 1 !important; /* Takes up remaining space after teacher name */
  border: 1px solid #e0e0e0 !important;
  overflow-x: auto !important; /* Horizontal scroll for long time periods */
}

/* Individual availability cell - represents one time slot */
/* Each cell can be styled with one of the state classes below */
.availability-cell {
  min-width: 30px !important; /* Minimum width for each time slot cell */
  height: 35px !important;
  border-right: 1px solid #e0e0e0 !important; /* Vertical separator between cells */
  cursor: pointer !important; /* Indicates cells are interactive */
  transition: opacity 0.2s !important; /* Smooth hover effect */
}

/* Hover effect on availability cells */
.availability-cell:hover {
  opacity: 0.8 !important; /* Slight transparency on hover */
}

/* ========== AVAILABILITY CELL STATES ========== */
/* These classes define the four possible states for each time slot */

/* Available state - white background */
/* Use this class when the time slot is free and available for booking */
.cell-available {
  background-color: #ffffff !important; /* White = available */
}

/* Booked state - theme gray background */
/* Use this class when the time slot has a confirmed booking */
/* Color matches the theme's dark gray (#3f404e) for brand consistency */
.cell-booked {
  background-color: #3f404e !important; /* Theme gray = booked appointment */
}

/* Blocked state - red background */
/* Use this class when the teacher is unavailable (blocked out time) */
/* Red provides clear visual warning that this time is not available */
.cell-blocked {
  background-color: #dc3545 !important; /* Red = blocked/unavailable */
}

/* Break state - light blue background */
/* Use this class for break periods or special status time slots */
.cell-break {
  background-color: #5ac1d2 !important; /* Light blue = break period */
}

/* ========== SHORTCUT NAVIGATION LINKS ========== */
/* Horizontal navigation bar with links like "Edit Parents' Evening", "Edit Students", etc. */
/* Located below breadcrumbs on Teacher Availability page */
.shortcut-links {
  margin: 15px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e0e0e0 !important; /* Separator line below links */
}

/* Individual shortcut link styling */
.shortcut-links a {
  color: #1a3a5f !important; /* Navy blue for links */
  text-decoration: none !important;
  margin-right: 15px !important;
  padding-bottom: 5px !important;
}

/* Shortcut link hover state */
.shortcut-links a:hover {
  color: #ce415c !important; /* Pink on hover */
}

/* Active shortcut link - current page indicator */
/* Add .active class to the link representing the current page */
.shortcut-links a.active {
  border-bottom: 2px solid #ce415c !important; /* Pink underline for active link */
  color: #ce415c !important; /* Pink text */
  font-weight: 600 !important;
}

/* ============================================
   UTILITY CLASSES - Layout and Spacing
   These classes provide common layout utilities to minimize 
   dependency on Bootstrap. Use these for consistent spacing and layout.
   ============================================ */

/* ========== FLEXBOX UTILITIES ========== */
/* Display flex - creates a flex container */
.d-flex {
  display: flex !important;
}

/* Flex direction - row (default) */
.flex-row {
  flex-direction: row !important;
}

/* Flex direction - column */
.flex-column {
  flex-direction: column !important;
}

/* Flex wrap - allows items to wrap to next line */
.flex-wrap {
  flex-wrap: wrap !important;
}

/* Flex nowrap - prevents wrapping */
.flex-nowrap {
  flex-wrap: nowrap !important;
}

/* Justify content - space between items */
.justify-content-between {
  justify-content: space-between !important;
}

/* Justify content - start alignment */
.justify-content-start {
  justify-content: flex-start !important;
}

/* Justify content - end alignment */
.justify-content-end {
  justify-content: flex-end !important;
}

/* Justify content - center alignment */
.justify-content-center {
  justify-content: center !important;
}

/* Align items - center vertically */
.align-items-center {
  align-items: center !important;
}

/* Align items - start */
.align-items-start {
  align-items: flex-start !important;
}

/* Align items - end */
.align-items-end {
  align-items: flex-end !important;
}

/* Flex - grow to fill available space */
.flex-1 {
  flex: 1 !important;
}

/* ========== SPACING UTILITIES ========== */
/* Margin utilities - provides consistent spacing throughout the application */

/* Margin bottom - small (0.25rem / 4px) */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

/* Margin top */
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

/* Margin horizontal (left and right) */
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

/* Margin vertical (top and bottom) */
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Margin start (left in LTR, right in RTL) */
.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

/* Margin end (right in LTR, left in RTL) */
.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

/* ========== GAP UTILITIES ========== */
/* Gap between flex items - provides spacing in flex containers */
.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

/* ========== TEXT UTILITIES ========== */
/* Font weight - bold text */
.fw-bold {
  font-weight: 700 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

/* Text decoration - remove underline from links */
.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

/* Text color - light/white text for dark backgrounds */
.text-light {
  color: #ffffff !important;
}

.text-white {
  color: #ffffff !important;
}

.text-dark {
  color: #000000 !important;
}

/* Text alignment */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* List styling - remove default list styles */
.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* ========== BACKGROUND UTILITIES ========== */
/* Background color - light gray for form inputs */
.bg-gray {
  background-color: #f5f5f5 !important; /* Light gray background */
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

/* ========== WIDTH UTILITIES ========== */
/* Width - 100% of parent container */
.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-auto {
  width: auto !important;
}

/* ========== GRID SYSTEM UTILITIES ========== */
/* Row container - used for grid layouts */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* Column base - all column classes extend this */
[class*="col-"] {
  position: relative !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Extra extra large columns (1400px and up) */
.col-xxl-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.col-xxl-8 {
  flex: 0 0 66.666667% !important;
  max-width: 66.666667% !important;
}

.col-xxl-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
}

/* Extra large columns (1200px and up) */
.col-xl-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.col-xl-8 {
  flex: 0 0 66.666667% !important;
  max-width: 66.666667% !important;
}

.col-xl-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
}

/* Large columns (992px and up) */
.col-lg-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.col-lg-8 {
  flex: 0 0 66.666667% !important;
  max-width: 66.666667% !important;
}

.col-lg-4 {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
}

/* Medium columns (768px and up) */
.col-md-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Small columns (576px and up) */
.col-sm-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Extra small columns (default) */
.col-xs-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Responsive column behavior - stack on smaller screens */
@media (max-width: 1199px) {
  .col-xxl-8,
  .col-xxl-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 991px) {
  .col-xl-8,
  .col-xl-4,
  .col-lg-8,
  .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .col-sm-12,
  .col-xs-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ========== POSITION UTILITIES ========== */
/* Position relative - for positioning child elements */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

/* ========== CURSOR UTILITIES ========== */
/* Cursor pointer - indicates clickable elements */
.cursor-pointer {
  cursor: pointer !important;
}

/* ========== OVERFLOW UTILITIES ========== */
/* Overflow - horizontal scroll */
.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

/* ========== HELP BUTTON STYLING ========== */
/* Help button - pink by default, dark gray on hover */
.c1e.help,
.help.c1e,
div.c1e.help,
button.c1e.help {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.c1e.help:hover,
.help.c1e:hover,
div.c1e.help:hover,
button.c1e.help:hover,
.c1e.help:active,
.help.c1e:active,
div.c1e.help:active,
button.c1e.help:active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}

/* ========== BOOK LIVE TRAINING BUTTON STYLING ========== */
/* Book Live Training button - same design as Help button */
/* Target c1e buttons that contain the Book Live Training icon (Asset 10mdpi.png) */
.c1e img[src*="Asset 10mdpi.png"],
.c1e:has(img[src*="Asset 10mdpi.png"]),
div.c1e:has(img[src*="Asset 10mdpi.png"]),
button.c1e:has(img[src*="Asset 10mdpi.png"]) {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Target the parent container when it contains the Book Live Training icon */
.c1e img[src*="Asset 10mdpi.png"] {
  /* Icon styling handled by parent */
}

/* Hover state for Book Live Training button */
.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
.c1e:has(img[src*="Asset 10mdpi.png"]):active,
div.c1e:has(img[src*="Asset 10mdpi.png"]):active,
button.c1e:has(img[src*="Asset 10mdpi.png"]):active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}

/* Fallback for browsers that don't support :has() - target by sibling relationship */
.d-flex.justify-content-between > .c1e:first-child:not(.help),
.d-flex > .c1e:first-child:not(.help) {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
.d-flex > .c1e:first-child:not(.help):hover,
.d-flex.justify-content-between > .c1e:first-child:not(.help):active,
.d-flex > .c1e:first-child:not(.help):active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}