/* ==========================================================================
   CUSTOM STYLESHEET FOR TAILWIND-BASED DJANGO PROJECT

   static > shared > css > bootstrap_overrides_for_tailwind.css
   ==========================================================================

   ✨ Purpose:
   This stylesheet defines custom utility classes to complement Tailwind CSS
   when using the CDN version, which does not allow @apply or Tailwind config
   extension. These custom classes help reduce repetition and promote
   maintainability.

   ✅ What to Customize Here:
   - Colors (e.g., text colors, background colors)
   - Fonts (font-family, size for headings or branding)
   - Button styles (visual only — not layout/position)
   - Reusable component appearance (e.g., cards, tags, badges)
   - Shadow, border, hover transitions

   ❌ What NOT to Customize Here:
   - Layout (flex, grid, spacing, positioning)
   - Responsiveness (breakpoints, screen-based styles)
   - Visibility or Tailwind-specific utilities

   ⚠️ Warning:
   DO NOT load full Bootstrap alongside Tailwind.
   - Bootstrap and Tailwind may conflict (e.g., `container`, `text-*`)
   - Bootstrap inflates CSS size and creates inconsistency in design language

   💡 Naming Convention:
   - All custom classes are prefixed with `bs-` to prevent conflicts and clarify intent
     (e.g., `.bs-h2-color`, `.bs-card`, `.bs-btn-primary`)
   - Keep naming semantic and consistent

   ========================================================================== */

/* Typography */
.bs-h2-color {
    color: #8B0000; /* Deep Red for H2 headers (e.g., School Name Portal) */
    text-transform: uppercase; /* Convert text to uppercase */
}

  
  .bs-heading-font {
    font-family: 'Georgia', serif;
    font-weight: 700;
  }
  
  /* Buttons */
  .bs-btn-primary {
    background-color: #1d4ed8; /* Tailwind blue-700 */
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  
  .bs-btn-primary:hover {
    background-color: #1e40af; /* Tailwind blue-800 */
  }
  
  /* Cards */
  .bs-card {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6; /* Tailwind gray-100 */
    transition: box-shadow 0.3s ease;
  }
  
  .bs-card:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Tags / Labels */
  .bs-tag {
    font-size: 0.75rem;
    font-family: monospace;
    background-color: #f3f4f6; /* Tailwind gray-100 */
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    color: #6b7280; /* Tailwind gray-500 */
  }
  
  /* Images */
  .bs-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  

  /* ===========================================
   🎨 CUSTOM COLOR PALETTE EXTENSIONS
   For overriding Tailwind or Bootstrap clashes
=========================================== */

.bs-navbar-bg {
  background-color: #03081b; /* Deep corporate red */
}

.bs-navbar-bg-blue {
  background-color: #1D4ED8; /* Tailwind's preferred Blue-700 */
}

.bs-navbar-text-white {
  color: white;
}


/* ===================================
   📘 Custom Sidebar Theme Overrides
=================================== */

.bs-sidebar-bg {
  background-color: #010c29; /* Tailwind's blue-900 */
}

.bs-sidebar-text {
  color: #F3F4F6; /* Tailwind's gray-100 */
}

.bs-sidebar-hover:hover {
  background-color: #1E40AF; /* Tailwind's blue-800 */
}


/* ================================
   📘 SIDEBAR LINK STYLES
   ================================= */

/* Base sidebar link style */
.bs-sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;           /* Tailwind's py-2 px-4 */
  border-radius: 0.375rem;       /* Tailwind's rounded */
  color: #F3F4F6;                /* Light text */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for sidebar link */
.bs-sidebar-link:hover {
  background-color: #1E40AF;     /* Tailwind's blue-800 */
}


/* =====================================================
   🎯 BUTTON STYLES (Custom Primary Buttons)
   =====================================================

   Purpose:
   - Define primary action buttons used across the dashboard
   - Maintain consistent branding with custom colors and hover/focus effects
   - Override Tailwind or Bootstrap default button looks (without conflicts)

   Naming Convention:
   - Standard button uses `.btn-primary`
   - Disabled button appearance handled via `.btn-primary:disabled`

   Notes:
   - Use this class on buttons like "Save", "Submit", "Update"
   - Supports light/dark mode neutral contrast
   ===================================================== */

/* Primary Button */
.bs-btn-primary {
  background-color: #2563EB; /* Custom Primary Blue (Tailwind blue-600) */
  color: white;
  font-weight: bold;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-md */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow */
  transition: background-color 0.3s ease-in-out; /* smooth hover transition */
}

/* Primary Button Hover State */
.bs-btn-primary:hover {
  background-color: #1D4ED8; /* Darker Blue on Hover (Tailwind blue-700) */
}

/* Primary Button Focus State */
.bs-btn-primary:focus {
  outline: 2px solid #2563EB; /* Focus ring */
  outline-offset: 2px;
}

/* Primary Button Disabled State */
.bs-btn-primary:disabled {
  background-color: #9CA3AF; /* Tailwind gray-400 */
  cursor: not-allowed;
}


/* ==========================================================================
    🌐 Corporate Sidebar Buttons Color Scheme (Role Specific)
    Updated to match .bs-* academic color classes for full design consistency
========================================================================== */

/* 🎓 Student Buttons */
.bs-student-btn {
  background-color: #fcc30b; /* gold */
  color: #000000;
  transition: background-color 0.2s ease-in-out;
}
.bs-student-btn:hover {
  background-color: #dda63a; /* yellow */
}

/* 🏛️ Admin Buttons */
.bs-admin-btn {
  background-color: #e5243b; /* red */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-admin-btn:hover {
  background-color: #c5192d; /* dark red */
}

/* 👨‍👩‍👧 Parent Buttons */
.bs-parent-btn {
  background-color: #fd6925; /* orange */
  color: #000000;
  transition: background-color 0.2s ease-in-out;
}
.bs-parent-btn:hover {
  background-color: #fd9d24; /* dark orange */
}

/* 👑 Principal Buttons */
.bs-principal-btn {
  background-color: #00689d; /* deep blue */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-principal-btn:hover {
  background-color: #0a97d9; /* sea blue */
}

/* 🧑‍💼 Vice Principal Buttons */
.bs-vice-principal-btn {
  background-color: #19486a; /* navy blue */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-vice-principal-btn:hover {
  background-color: #00689d; /* deep blue */
}

/* 🧠 Head of Department (HOD) Buttons */
.bs-hod-btn {
  background-color: #0a97d9; /* sea blue */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-hod-btn:hover {
  background-color: #26bde2; /* light blue */
}

/* 🏫 Classroom Teacher Buttons */
.bs-classroom-teacher-btn {
  background-color: #4c9f38; /* green */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-classroom-teacher-btn:hover {
  background-color: #3f7e44; /* dark green */
}

/* 📚 Subject Teacher Buttons */
.bs-subject-teacher-btn {
  background-color: #56c02b; /* forest green */
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.bs-subject-teacher-btn:hover {
  background-color: #3f7e44; /* dark green */
}

/* ==========================================================================
  ✅ Shared Enhancements: depth, rounding, padding
========================================================================== */
.bs-student-btn,
.bs-admin-btn,
.bs-parent-btn,
.bs-principal-btn,
.bs-vice-principal-btn,
.bs-hod-btn,
.bs-classroom-teacher-btn,
.bs-subject-teacher-btn {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

/* ==========================================================================
  ✅ End of Corporate Sidebar Buttons Customizations
========================================================================== */



/* ==========================================================================
📁 Section: Parent Dashboard Styles
Prefix: bs-parent-*
Purpose: Specific styles for the Parent Portal pages
=========================================================================== */

/* Red Welcome Header */
.bs-parent-welcome {
  color: #8B0000 !important;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
}

/* Snapshot Line */
.bs-parent-snapshot {
  color: #374151;  /* Tailwind gray-700 */
  font-size: 0.875rem; /* text-sm */
  margin-top: 0.25rem;
}

/* Child Names Display */
.bs-parent-child-list {
  font-size: 0.75rem;      /* text-xs */
  margin-top: 0.25rem;
  color: #8B0000;          /* corporate red */
  font-weight: 500;
}



/* ============================================================================
   🎨 Parent Dashboard Metric Labels (Styled with bs-parent- prefix)
   - These classes apply to label headers inside the parent dashboard cards
   - Each metric has a distinct color tone for quick visual identification
   - Used in: dashboards/parent/includes/_child_card.html
============================================================================ */

/* 🏫 Label: Class Group (Bold, large, corporate red) */
.bs-parent-label-group {
  font-weight: bold;
  font-size: 120%;
  color: #d32f2f; /* Corporate red for group heading */
}

/* 📈 Label: Avg. Score (Bold, large, deep pink) */
.bs-parent-label-score {
  font-weight: bold;
  font-size: 120%;
  color: #c2185b; /* Eye-catching magenta/red for scores */
}

/* 📚 Label: Subjects (Bold, large, dark red) */
.bs-parent-label-subjects {
  font-weight: bold;
  font-size: 120%;
  color: #b71c1c; /* Rich maroon for subject count */
}




/* ============================================================
📁 Section: Report Comment Background Colors
Purpose: Apply subtle background colors based on grade feedback.
Prefix: bs-bg-*
============================================================ */

.bs-bg-success   { background-color: #198754 !important; }  /* A-grade: Green */
.bs-bg-primary   { background-color: #0d6efd !important; }  /* B-grade: Blue */
.bs-bg-info      { background-color: #0dcaf0 !important; }  /* C-grade: Light Blue */
.bs-bg-warning   { background-color: #ffc107 !important; }  /* D-grade: Yellow */
.bs-bg-danger    { background-color: #dc3545 !important; }  /* E/F-grade: Red */


/* ============================================================
📁 Section: Left Border Indicator Colors (Optional)
Purpose: Use a colored vertical bar to emphasize grade-based messages.
Prefix: bs-border-*
============================================================ */

.bs-border-success { border-left-color: #198754 !important; }
.bs-border-primary { border-left-color: #0d6efd !important; }
.bs-border-info    { border-left-color: #0dcaf0 !important; }
.bs-border-warning { border-left-color: #ffc107 !important; }
.bs-border-danger  { border-left-color: #dc3545 !important; }


/* ============================================================
📁 Section: Border Width Utility
Purpose: Enforce consistent left border width for comment blocks.
Applies to: use with `.border-start` (Bootstrap) and `bs-border-*`
============================================================ */

.border-start.border-4 {
  border-left-width: 0.4rem !important;  /* 4px left border */
}


/* =============================================================================
🎨 SUBJECT CARD BACKGROUND COLOR PALETTE
These utility classes (.bs-1 to .bs-17) are assigned as background colors
for subject cards in dashboards. When displaying subject cards dynamically,
the backend or frontend logic can loop through this color list to assign 
colors sequentially or by subject type.
============================================================================= */

/* 🌊 Cool / Calm / Academic Colors */
.bs-1  { background-color: #26bde2; }  /* light blue */
.bs-2  { background-color: #0a97d9; }  /* sea blue */
.bs-3  { background-color: #00689d; }  /* deep blue */
.bs-4  { background-color: #19486a; }  /* navy blue */
.bs-5  { background-color: #4c9f38; }  /* green */
.bs-6  { background-color: #3f7e44; }  /* dark green */
.bs-7  { background-color: #56c02b; }  /* forest green */

/* 🍊 Mid-Warm / Neutral Tones */
.bs-8  { background-color: #fcc30b; }  /* gold */
.bs-9  { background-color: #dda63a; }  /* yellow */
.bs-10 { background-color: #bf8b2e; }  /* bronze */
.bs-11 { background-color: #fd9d24; }  /* dark orange */
.bs-12 { background-color: #fd6925; }  /* orange */

/* 🔥 Warm / Alert / Intense Tones */
.bs-13 { background-color: #ff3a21; }  /* orange red */
.bs-14 { background-color: #e5243b; }  /* red */
.bs-15 { background-color: #c5192d; }  /* dark red */
.bs-16 { background-color: #a21942; }  /* maroon */
.bs-17 { background-color: #dd1367; }  /* pink */




/* =============================================================================
🎨 SUBJECT CARD TEXT COLOR PALETTE
These utility classes (.text-bs-1 to .text-bs-17) apply text color only.
Used for performance summaries, badge labels, comment tone cues, etc.
============================================================================= */

/* 🌊 Cool / Calm / Academic Colors */
.text-bs-1  { color: #26bde2; }  /* light blue */
.text-bs-2  { color: #0a97d9; }  /* sea blue */
.text-bs-3  { color: #00689d; }  /* deep blue */
.text-bs-4  { color: #19486a; }  /* navy blue */
.text-bs-5  { color: #4c9f38; }  /* green */
.text-bs-6  { color: #3f7e44; }  /* dark green */
.text-bs-7  { color: #56c02b; }  /* forest green */

/* 🍊 Mid-Warm / Neutral Tones */
.text-bs-8  { color: #fcc30b; }  /* gold */
.text-bs-9  { color: #dda63a; }  /* yellow */
.text-bs-10 { color: #bf8b2e; }  /* bronze */
.text-bs-11 { color: #fd9d24; }  /* dark orange */
.text-bs-12 { color: #fd6925; }  /* orange */

/* 🔥 Warm / Alert / Intense Tones */
.text-bs-13 { color: #ff3a21; }  /* orange red */
.text-bs-14 { color: #e5243b; }  /* red */
.text-bs-15 { color: #c5192d; }  /* dark red */
.text-bs-16 { color: #a21942; }  /* maroon */
.text-bs-17 { color: #dd1367; }  /* pink */



/* =============================================================================
🎨 SUBJECT CARD BORDER COLOR PALETTE
These classes (.border-bs-1 to .border-bs-17) define border colors
for use in dynamic left-border styling (e.g., performance comments).
============================================================================= */

/* 🌊 Cool / Calm / Academic Colors */
.border-bs-1  { border-color: #26bde2; }
.border-bs-2  { border-color: #0a97d9; }
.border-bs-3  { border-color: #00689d; }
.border-bs-4  { border-color: #19486a; }
.border-bs-5  { border-color: #4c9f38; }
.border-bs-6  { border-color: #3f7e44; }
.border-bs-7  { border-color: #56c02b; }

/* 🍊 Mid-Warm / Neutral Tones */
.border-bs-8  { border-color: #fcc30b; }
.border-bs-9  { border-color: #dda63a; }
.border-bs-10 { border-color: #bf8b2e; }
.border-bs-11 { border-color: #fd9d24; }
.border-bs-12 { border-color: #fd6925; }

/* 🔥 Warm / Alert / Intense Tones */
.border-bs-13 { border-color: #ff3a21; }
.border-bs-14 { border-color: #e5243b; }
.border-bs-15 { border-color: #c5192d; }
.border-bs-16 { border-color: #a21942; }
.border-bs-17 { border-color: #dd1367; }




/* =============================================================================
✅ END SUBJECT CARD COLOR DEFINITIONS
============================================================================= */


/* ============================================================
📏 Section: Divider Utilities
Purpose: Provide styled horizontal rules with ample spacing 
for use between content blocks (e.g., dashboards, sections)

Usage Example:
<hr class="bs-hr-spaced" />
============================================================ */

.bs-hr-spaced {
  margin-top: 2rem;     /* Equivalent to Tailwind's mt-8 */
  margin-bottom: 2rem;  /* Equivalent to Tailwind's mb-8 */
  border: none;
  border-top: 1px solid #e5e7eb; /* Tailwind's gray-200 */
  width: 100%;
}


/* 📌 Highlighted Role Display Block */
.bs-role-highlight {
  background-color: #1E3A8A; /* Tailwind's blue-900 */
  border-left: 4px solid #ee0b0b; /* Tailwind's blue-500 */
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #E5E7EB; /* Tailwind's gray-200 */
  font-weight: 600;
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* 📌 Styled Action Buttons Similar to Role Highlight */
.bs-action-link {
  background-color: #1E3A8A; /* Tailwind's blue-900 */
  border-left: 4px solid #ee0b0b;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  color: #E5E7EB;
  font-weight: 600;
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.bs-action-link:hover {
  background-color: #2c5282; /* Tailwind's blue-800 */
  text-decoration: none;
}


/* Adds vertical space like between paragraphs */
.br-spacer {
  display: block;       /* Ensures margins apply */
  margin-top: 1em;      /* Space above */
  margin-bottom: 1em;   /* Space below */
}


/* 
  Custom padding utility for table cells.
  Equivalent to Tailwind CSS classes:
  - py-3 (padding-top and padding-bottom: 0.75rem)
  - px-4 (padding-left and padding-right: 1rem)
  Use this class to maintain consistent cell spacing when Tailwind's @apply or config extensions are unavailable.
*/
.bs-td-padding {
  padding: 0.75rem 1rem; /* Equivalent to Tailwind's py-3 px-4 */
}



/* 🌈 Role-Based Header Gradients */
.bs-header-gradient-principal {
  background-image: linear-gradient(to right, #00689d, #26bde2); /* Principal: deep blue → light blue */
  color: #ffffff;
}

.bs-header-gradient-vice-principal {
  background-image: linear-gradient(to right, #19486a, #00689d); /* Vice Principal: navy → deep blue */
  color: #ffffff;
}

.bs-header-gradient-hod {
  background-image: linear-gradient(to right, #0a97d9, #26bde2); /* HOD: sea blue → light blue */
  color: #ffffff;
}

/* 👩‍🏫 Classroom Teacher Header Gradient */
.bs-header-gradient-classroom {
  background-image: linear-gradient(to right, #3f7e44, #4c9f38); /* dark green to green */
  color: white;
}


/* 📚 Subject Teacher Header Gradient */
.bs-header-gradient-subject-teacher {
  background-image: linear-gradient(to right, #56c02b, #3f7e44); /* Matches bs-subject-teacher-btn */
  color: white;
}


/* 🏛️ Admin Header Gradient */
.bs-header-gradient-admin {
  background-image: linear-gradient(to right, #c5192d, #e5243b); /* dark red to red */
  color: #ffffff;
}

/* 👨‍🎓 Student Header Gradient */
.bs-header-gradient-student {
  background-image: linear-gradient(to right, #fcc30b, #dda63a); /* gold → yellow */
  color: #000000;
}