/* EVSU-Ormoc INFO custom styles (maroon/yellow/white) */
:root{
  --maroon: #800000;
  --maroon-dark: #5a0000;
  --yellow: #ffcc00;
  --white: #ffffff;
  --muted: #f5f5f5;
}
html,body{height:100%;background:var(--white);color:#222}
.site-brand{color:var(--maroon);}
.navbar{background:var(--white)}
.navbar-item, .navbar-link{color:var(--maroon)}
a.button.is-accent{background:var(--maroon);color:var(--white);border-radius:6px}
.section.card{border:1px solid #eee}
.card-header{background:linear-gradient(90deg,var(--maroon) 0%,var(--yellow) 100%);color:var(--white)}
.table.is-striped tbody tr:nth-child(odd){background:var(--muted)}
/* Responsive SVG chart container */
.chart-wrap{max-width:800px;margin:0 auto}
svg{width:100%;height:auto}

/* Fixed footer */
.footer{position:fixed;left:0;right:0;bottom:0;padding:1rem;background:var(--white);border-top:1px solid #eee}
/* ensure content doesn't hide behind footer */
body > .section, .container{padding-bottom:80px}
/* Calendar styles */
.calendar{max-width:900px;margin:0 auto}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-header{margin-bottom:6px}
.calendar-cell{min-height:90px;border:1px solid #eee;padding:6px;background:#fff}
.calendar-cell.empty{background:#fafafa}
.date-num{font-weight:600;margin-bottom:6px}
.event-item{
  background: var(--maroon);
  color: var(--white);
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  display: block;
  white-space: normal; /* allow wrapping */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Ensure event item text is white even if other rules (Bulma) set different colors */
.calendar .calendar-cell .event-item,
.calendar .calendar-cell .event-item strong,
.calendar .calendar-cell .event-item .is-size-7,
.calendar .calendar-cell .event-item a {
  color: var(--white) !important;
}

/* Event title sizing and weight */
.event-item .event-title {
  font-size: 0.9rem; /* slightly smaller */
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.1;
  color: var(--white) !important;
}
.calendar-header-cell{background:transparent;border:none;font-weight:700;text-align:center}

/* Enrollees chart: make SVG responsive and taller to maximize width */
.enrollees-chart { display: block; height: 440px; }
.enrollees-chart svg { height: 100%; display: block; }

/* Horizontal scroll wrapper for wide charts */
.enrollees-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.enrollees-chart-scroll::-webkit-scrollbar{height:10px}
.enrollees-chart-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}

/* scholars chart - reuse the enrollees scroll style */
.scholars-chart-scroll {
  overflow-x: auto;
}
.scholars-chart {
  min-width: 600px;
}

/* Vertical reference line on SVG charts (e.g., latest period) */

/* Overlay vertical guide that stays centered in the scroll container */
.enrollees-chart-scroll, .scholars-chart-scroll { position: relative; }

/* vertical grid lines for each x tick inside SVG charts */
.chart-vline {
  stroke: rgba(0,0,0,0.06);
  stroke-width: 1;
}

.chart-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  transform: translate(-50%, -120%);
  white-space: nowrap;
  z-index: 60;
}
.chart-tooltip.is-hidden { display: none; }

/* tooltip for enrollee points */
.enrollee-tooltip{position:fixed;pointer-events:none;background:var(--maroon);color:var(--white);padding:6px 8px;border-radius:4px;font-size:13px;z-index:60;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.enrollee-tooltip.is-hidden{display:none}

/* scrollable table container for enrollees to prevent long pages */
.table-scroll{max-height:360px;overflow-y:auto;padding:0}
.table-scroll .table{margin-bottom:0}
.table-scroll::-webkit-scrollbar{width:10px}
.table-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}

/* Sticky table headers inside scrollable table containers */
.table-scroll thead th {
  position: sticky;
  top: 0; /* stick to the top of the scroll container */
  z-index: 5;
  background: var(--white); /* ensure header has an opaque background */
  border-bottom: 1px solid #e6e6e6; /* subtle divider */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Slightly raise header z-index when used with Bulma's table classes */
.table-scroll .table thead th { z-index: 6 }

/* Modal tweaks to match site theme (Bulma modal is used) */
.modal-card-head{
  background: linear-gradient(90deg, var(--maroon) 0%, var(--yellow) 100%);
  color: var(--white);
}
.modal-card-foot .button.is-accent{background:var(--maroon);color:var(--white)}
.modal{z-index:60}
.modal-background{background:rgba(0,0,0,0.5)}
.modal-card{border-radius:8px;overflow:hidden}
.modal .box{background:transparent;border:none;padding:0}

/* Root page blur effect for background when showing modal */
/* (root-blur styles intentionally removed to revert to previous design) */