/* =========================================================
   ORSV2 — Global Styles (Updated & Refined)
   - A more subtle color palette using blue as an accent.
   - Optimized selectors and consolidated styles.
   - Modernized header, cards, and buttons.
   ========================================================= */

/* =========================================================
   1. CSS Variables & Base Styles
   ========================================================= */
:root {
  /* Refined Brand Palette */
  --orenda-primary: #0022C5;
  --orenda-primary-hover: #001aa0;
  --orenda-text-primary: #1e293b;      /* Dark Slate */
  --orenda-text-secondary: #64748b;    /* Medium Slate */
  --orenda-accent-light: #eef2ff;      /* Light Lavender Blue */
  --orenda-bg-subtle: #f8fafc;         /* Very Light Gray */
  --orenda-border-subtle: #e2e8f0;     /* Light Gray Border */
  --orenda-text-white: #fff;

  /* Shadows */
  --orenda-shadow: rgba(0, 34, 197, .08);
  --orenda-shadow-hover: rgba(0, 34, 197, .15);
  --orenda-shadow-lg: 0 8px 25px rgba(0, 34, 197, .1);

  /* Gradient Tokens */
  --orenda-grad-start: #0022C5;
  --orenda-grad-end: #1a4fb8;
  --orenda-grad-hover-start: #001aa0;
  --orenda-grad-hover-end: #1640a0;

  /* Quadrant Colors (for chips/gantt) */
  --quad-challenge-bg: #ecfdf5;  /* light green */
  --quad-challenge-fg: #065f46;
  --quad-benchmark-bg: #eff6ff;  /* light blue */
  --quad-benchmark-fg: #1e40af;
  --quad-strategic-bg: #fffbeb;  /* light yellow */
  --quad-strategic-fg: #92400e;
  --quad-intensive-bg: #fef2f2;  /* light red */
  --quad-intensive-fg: #991b1b;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 12pt;
  font-weight: 400;
  color: var(--orenda-text-primary);
  background-color: var(--orenda-bg-subtle);
}

a {
  color: var(--orenda-primary);
  text-decoration: none;
}
a:hover {
  color: var(--orenda-primary-hover);
}

/* =========================================================
   2. Layout & Containers (Header, Footer, Cards)
   ========================================================= */

/* --- Main Header & Navigation (Refined for light background) --- */
.main-header {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  border-bottom: 1px solid var(--orenda-border-subtle);
  padding: 0;
  min-height: 60px;
}
.main-header .navbar { padding: 0; min-height: 60px; }
.main-header .container-fluid { padding: .375rem 1rem; align-items: center; min-height: 60px; }
.brand-logo { height: 48px; transition: transform .3s ease; }
.brand-logo:hover { transform: scale(1.05); }

.nav-main { gap: .125rem; }
.nav-main .nav-link,
.nav-main .dropdown-toggle {
  color: var(--orenda-text-primary) !important;
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: .375rem;
  transition: all .2s ease;
  font-size: .9rem;
  border: none;
  background: transparent;
}
.nav-main .nav-link:hover,
.nav-main .dropdown-toggle:hover {
  background: var(--orenda-accent-light);
  color: var(--orenda-primary) !important;
}

.user-profile .dropdown-toggle {
  color: var(--orenda-text-secondary);
  font-weight: 500;
  font-size: .875rem;
  transition: color .2s ease;
}
.user-profile .dropdown-toggle:hover {
  color: var(--orenda-primary);
}

.navbar-toggler {
  border: 1px solid var(--orenda-border-subtle);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2830,41,59,.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Dropdowns --- */
.dropdown-menu {
  border: 1px solid var(--orenda-border-subtle);
  box-shadow: var(--orenda-shadow-lg);
  border-radius: .5rem;
  padding: .5rem 0;
}
.dropdown-item {
  padding: .6rem 1.25rem;
  font-weight: 500;
  transition: all .2s ease;
  color: var(--orenda-text-primary);
}
.dropdown-item:hover {
  background: var(--orenda-primary);
  color: var(--orenda-text-white);
}
.dropdown-item i {
  width: 1.25rem;
  opacity: .7;
}
.dropdown-item:hover i {
  opacity: 1;
}

/* --- Main Content & Cards --- */
.orenda-container, .orenda-container-sm {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.orenda-container-sm { max-width: 900px; }

/* Welcome Header - Updated with a subtle background color */
.orenda-header {
  background: var(--orenda-accent-light); /* Changed from #fff */
  color: var(--orenda-text-primary);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  border: 1px solid #e0e7ff; /* A slightly darker border to complement the background */
  /* border-left property removed */
  box-shadow: var(--orenda-shadow);
}
.orenda-header h2 { 
  color: var(--orenda-primary); 
  font-weight: 600; 
}
.orenda-header p { 
  color: var(--orenda-text-secondary); 
}

/* Base Card Style */
.orenda-card,
.orenda-table-wrapper {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
  border: 1px solid var(--orenda-border-subtle);
  transition: all .3s ease;
}
.orenda-card:hover {
  box-shadow: var(--orenda-shadow-lg);
  transform: translateY(-2px);
}
.orenda-card-body { padding: 1.5rem; }

/* =========================================================
   3. Components (Buttons, Tables, Badges)
   ========================================================= */

/* --- Buttons --- */
/* Base styles for all buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: none;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-weight: 600;
  font-size: .95rem;
  transition: all .2s ease;
  cursor: pointer;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--orenda-accent-light);
}

/* Default Button: Soft Blue */
.btn {
  background: var(--orenda-accent-light);
  color: var(--orenda-primary);
}
.btn:hover {
  background: #e0e7ff; /* slightly darker */
  color: var(--orenda-primary-hover);
  transform: translateY(-1px);
}

/* Primary Button: Gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--orenda-grad-start) 0%, var(--orenda-grad-end) 100%);
  color: var(--orenda-text-white) !important;
  box-shadow: 0 4px 12px var(--orenda-shadow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--orenda-grad-hover-start) 0%, var(--orenda-grad-hover-end) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--orenda-shadow-hover);
}

/* Outline Button */
.btn-outline-primary {
  background: transparent;
  color: var(--orenda-primary);
  border: 2px solid var(--orenda-primary);
  box-shadow: none;
}
.btn-outline-primary:hover {
  background: var(--orenda-primary);
  color: var(--orenda-text-white);
}

/* --- Compact Action Buttons (for Edit, Print, etc.) --- */
.btn-action {
  font-weight: 500;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: .45rem;
  padding: .3rem .65rem;
  font-size: .8rem;
  line-height: 1.1;
  transition: all .2s ease;
  min-width: 68px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-action i {
  font-size: .85rem;
}

/* Edit Button Style */
.btn-edit {
  background: var(--orenda-accent-light);
  color: var(--orenda-primary);
  border-color: var(--orenda-border-subtle);
}
.btn-edit:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--orenda-shadow);
}

/* Refresh Button Style */
.btn-refresh {
  background: #e0f7fa; /* Light Cyan background */
  color: #006064;      /* Dark Cyan text for contrast */
  border: 1px solid #b2ebf2; /* Subtle border to define shape */
}

.btn-refresh:hover {
  background: #b2ebf2;
  color: #00838f;
  border-color: #80deea;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 150, 136, 0.15);
}

/* Print Button Style */
.btn-print {
  background: #fff;
  color: var(--orenda-text-secondary);
  border-color: var(--orenda-border-subtle);
}
.btn-print:hover {
  background: var(--orenda-bg-subtle);
  color: var(--orenda-text-primary);
  border-color: #ced4da;
  transform: translateY(-1px);
}

/* --- Tables --- */
.orenda-table {
  margin-bottom: 0;
  font-size: .95rem;
}
.orenda-table th {
  background: var(--orenda-bg-subtle);
  color: var(--orenda-text-secondary);
  font-weight: 600;
  padding: 1rem .75rem;
  border: none;
  border-bottom: 1px solid var(--orenda-border-subtle);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .5px;
}
.orenda-table td {
  padding: 1rem .75rem;
  border: none;
  border-bottom: 1px solid var(--orenda-border-subtle);
  vertical-align: middle;
}
.orenda-table tbody tr:last-child td { border-bottom: none; }
.orenda-table tbody tr:hover { background: #fcfdff; }


/* --- Badges & Chips --- */
.program-badge {
  display: inline-flex; align-items: center;
  padding: .25rem .5rem; border-radius: .375rem;
  font-size: .75rem; font-weight: 600;
  border: 1px solid;
}
.program-ga { background: var(--orenda-accent-light); color: var(--orenda-primary); border-color: rgba(0,34,197,.2); }
.program-ca { background: rgba(40,167,69,.08); color: #28a745; border-color: rgba(40,167,69,.2); }
.program-none { background: rgba(108,117,125,.08); color: #6c757d; border-color: rgba(108,117,125,.2); }

.ga-chip {
  display: inline-block; padding: .15rem .45rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.1;
  border: 1px solid rgba(0,0,0,.06);
}
.ga-chip.cp-cp1 { background: var(--quad-benchmark-bg); color: var(--quad-benchmark-fg); }
.ga-chip.cp-cp2 { background: var(--quad-challenge-bg); color: var(--quad-challenge-fg); }
.ga-chip.cp-cp3 { background: var(--quad-strategic-bg); color: var(--quad-strategic-fg); }
.ga-chip.cp-cp4 { background: var(--quad-intensive-bg); color: var(--quad-intensive-fg); }
.ga-chip.cp-cp5 { background: #eef2ff; color: #3730a3; } /* soft indigo */

.program-mini {
  font-size: .65rem; font-weight: 700; padding: .1rem .3rem; border-radius: .2rem;
}
.program-ga-mini { background: var(--orenda-accent-light); color: var(--orenda-primary); }
.program-ca-mini { background: rgba(40,167,69,.1); color: #28a745; }

/* =========================================================
   4. Page-Specific Styles (Index Page)
   ========================================================= */

/* --- District Cards --- */
.district-card-v2 {
  display: flex; flex-direction: column;
}

/* MODIFIED: Increased padding and added text-align for the new stacked layout */
.district-card-header {
  background: #fff;
  color: var(--orenda-primary);
  /* Updated padding for more vertical space */
  padding: 1.25rem; 
  border-bottom: 1px solid var(--orenda-border-subtle);
  /* Added to center the stacked logo and title */
  text-align: center; 
}
.district-card-header h4 { font-weight: 600; font-size: 1.15rem; }

/* ADDED: New style rule for the stacked district logo */
.district-logo-stacked {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: inline-block; /* Helps with centering */
    margin-bottom: 0.75rem; /* Space between logo and title */
}

.district-card-body {
  padding: 1.25rem;
  flex-grow: 1;
}

.district-card-footer {
  padding: .75rem;
  background-color: var(--orenda-bg-subtle);
  border-top: 1px solid var(--orenda-border-subtle);
  display: flex; flex-direction: column; gap: .5rem;
}

.action-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .75rem; border-radius: 8px;
  color: var(--orenda-primary); font-weight: 600;
  transition: all .2s ease;
}
.action-link:hover {
  background-color: var(--orenda-accent-light);
  transform: scale(1.02);
}

/* --- Compact District Stats & School List --- */
.district-overview {
  background: var(--orenda-bg-subtle);
  border-radius: .5rem; padding: .75rem;
  border: 1px solid var(--orenda-border-subtle);
}
.compact-stat {
  display: flex; align-items: center; gap: .375rem;
  font-size: .85rem; color: var(--orenda-text-secondary);
}
.compact-stat i { color: var(--orenda-primary); font-size: 1rem; }
.compact-stat .stat-number { font-weight: 700; color: var(--orenda-primary); }

.school-expand-btn {
  background: transparent; border: none;
  color: var(--orenda-primary); font-size: .8rem; font-weight: 500;
  padding: .25rem .5rem; border-radius: .375rem; cursor: pointer;
  transition: all .2s ease;
}
.school-expand-btn:hover {
  background: var(--orenda-accent-light);
  transform: translateY(-1px);
}
.expand-icon { transition: transform 0.3s ease; }

.schools-detail-section {
  margin-top: .75rem; padding: .5rem;
  background: rgba(0,34,197,.02);
  border: 1px solid rgba(0,34,197,.08);
  border-radius: .375rem;
}
.school-detail-item-compact {
  display: flex; justify-content: space-between; align-items: center;
  padding: .25rem .5rem; border-bottom: 1px solid rgba(0,0,0,.05);
  gap: .5rem;
}
.school-detail-item-compact:last-child { border-bottom: none; }
.school-detail-item-compact .school-name {
  font-weight: 500; font-size: .85rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;
}
.school-meta-inline { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.school-meta-inline .enrollment { font-size: .75rem; color: var(--orenda-primary); font-weight: 600; }

/* --- GA Gantt Chart --- */
.ga-gantt-card { margin-bottom: 3rem; }
.ga-gantt-scale { position: relative; margin-left: 220px; }
.ga-gantt-scale-track { position: relative; height: 24px; }
.ga-gantt-tick { position: absolute; top: 0; transform: translateX(-50%); height: 24px; border-left: 1px dashed var(--orenda-border-subtle); }
.ga-gantt-tick span { position: absolute; top: 0; left: 6px; font-size: .75rem; color: var(--orenda-text-secondary); transform: translateX(-50%); }

.ga-gantt { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.ga-gantt-row { display: grid; grid-template-columns: 210px 1fr; gap: .5rem; align-items: center; }
.ga-gantt-label { font-weight: 600; color: var(--orenda-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-gantt-track {
  position: relative; height: 34px;
  background: #fff; border-radius: 10px; border: 1px solid var(--orenda-border-subtle);
}
.ga-gantt-today {
    position: absolute;
    top: -8px; /* Start slightly above the track */
    bottom: -8px; /* End slightly below the track */
    width: 2px;
    background-color: #dc3545; /* Bootstrap's danger red */
    z-index: 10;
    transform: translateX(-50%);
    pointer-events: none; /* Make it unclickable */
}

.ga-gantt-today .today-label {
    position: absolute;
    top: -12px; /* Position the label above the top of the line */
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.ga-span {
  position: absolute; height: 100%; border-radius: 8px;
  display: flex; align-items: center; padding-left: .5rem;
  font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ga-span:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.ga-span-label { text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.ga-span.cp-cp1 { background: var(--quad-benchmark-bg); color: var(--quad-benchmark-fg); }
.ga-span.cp-cp2 { background: var(--quad-challenge-bg); color: var(--quad-challenge-fg); }
.ga-span.cp-cp3 { background: var(--quad-strategic-bg); color: var(--quad-strategic-fg); }
.ga-span.cp-cp4 { background: var(--quad-intensive-bg); color: var(--quad-intensive-fg); }
.ga-span.cp-cp5 { background: #eef2ff; color: #3730a3; }

/* --- Collapsible Gantt Chart Header --- */
.gantt-header-toggle {
    cursor: pointer;
    padding: .5rem;
    margin: -.5rem; /* Offsets padding to make the clickable area fill the corners */
    border-radius: 8px;
    transition: background-color .2s ease;
}

.gantt-header-toggle:hover {
    background-color: var(--orenda-bg-subtle);
}

.gantt-header-toggle .collapse-icon {
    transition: transform 0.3s ease;
}

/* Rotates the icon 180 degrees when the section is collapsed */
.gantt-header-toggle[aria-expanded="false"] .collapse-icon {
    transform: rotate(-180deg);
}

/* =========================================================
   5. Responsive Adjustments
   ========================================================= */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fff; border-radius: .5rem;
    margin-top: .5rem; padding: .75rem;
    border: 1px solid var(--orenda-border-subtle);
  }
  .ga-gantt-scale { margin-left: 180px; }
  .ga-gantt-row { grid-template-columns: 170px 1fr; }
}

@media (max-width: 768px) {
  .orenda-header, .orenda-card-body { padding: 1.5rem; }
  .orenda-container, .orenda-container-sm { margin: 0; padding: 0 .75rem; max-width: none; }
}

@media (max-width: 576px){
  .brand-logo { height: 32px; }
  .main-header, .main-header .navbar, .main-header .container-fluid { min-height: 55px; }
  .ga-gantt-scale { display: none; }
  .ga-gantt-row { grid-template-columns: 1fr; }
  .ga-gantt-label { margin-bottom: .25rem; }
}