:root {
  --brand-navy: #0b2545;
  --brand-blue: #13315c;
  --brand-gold: #c9a227;
  --brand-light: #f5f7fa;
}
body { background-color: var(--brand-light); }
/* Fallback styling for plain fields rendered WITHOUT any Bootstrap class (e.g. a bare
   Django {{ field }}). Wrapped in :where() so it has ZERO specificity - it can never
   override .form-control / .form-control-sm / .form-select-sm etc. Without this, the
   attribute selector input[type="text"] (specificity 0,1,1) beat Bootstrap's own
   .form-control-sm (0,1,0), giving every text/number input the LARGE padding and font
   (40.4px tall) while selects (plain element selector, 0,0,1) correctly stayed small
   (31px) - a measured 9.4px mismatch in every compact row (e.g. Add Courses). */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="tel"], input[type="file"],
select, textarea) {
  display: block; width: 100%; padding: .45rem .75rem; font-size: 1rem;
  border: 1px solid #ced4da; border-radius: .375rem; background-color: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 .2rem rgba(19,49,92,.15);
}

/* --- Header / Footer ------------------------------------------------ */
.site-header {
  background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
}
.site-header .navbar-brand { color: #fff; font-size: 1.15rem; letter-spacing: .02em; }
/* The long site name used to be a single unbreakable line (~580px), so on a phone EVERY page scrolled sideways. Let it wrap
   and shrink, so the menu button stays on screen. */
.site-header .navbar-brand { white-space: normal; flex: 1 1 0; min-width: 0; line-height: 1.2; margin-right: .5rem; }
@media (max-width: 575.98px) { .site-header .navbar-brand { font-size: .95rem; } }
.brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--brand-gold); color: var(--brand-navy); font-weight: 700; font-size: .85rem;
}
.site-header .nav-link { color: rgba(255,255,255,.88) !important; }
.site-header .nav-link:hover { color: #fff !important; }
.site-header .dropdown-menu { border: none; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.site-header .dropdown-item:active { background-color: var(--brand-blue); }

.site-footer {
  background: var(--brand-navy); color: rgba(255,255,255,.85); font-size: .9rem;
}
.site-footer .text-muted { color: rgba(255,255,255,.6) !important; }

/* Primary buttons follow the same brand blue for consistency */
.btn-primary {
  --bs-btn-bg: var(--brand-blue); --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-navy); --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-bg: var(--brand-navy);
}
.routine-grid { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.routine-grid th, .routine-grid td { border: 1px solid #d7dee5; padding: 6px; vertical-align: top; text-align: center; }
.routine-grid th { background: #1f3b57; color: #fff; }
.routine-cell { min-height: 70px; }
.routine-entry { background: #eaf2ff; border-radius: 4px; padding: 4px; margin-bottom: 3px; font-size: 0.78rem; }
.day-col { background: #f1f3f5; font-weight: 600; }
.break-col { background: #fff3cd; }

/* Visual routine grid editing - hover-reveal controls, never resize the grid */
.routine-cell-editable { position: relative; }
.routine-cell-editable:hover { background: #f0f6ff; }
.routine-cell-editable.drag-over { background: #d7e8ff; outline: 2px dashed var(--brand-blue); outline-offset: -2px; }
.routine-entry[draggable="true"] { cursor: grab; position: relative; }
.routine-entry[draggable="true"]:active { cursor: grabbing; }

.cell-add-btn {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: var(--brand-blue); opacity: 0; transition: opacity .15s; cursor: pointer;
}
.routine-cell-editable:hover .cell-add-btn { opacity: 0.85; }
.cell-add-btn:hover { opacity: 1 !important; background: rgba(19,49,92,.06); }

.cell-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.routine-entry:hover .cell-actions { opacity: 1; }
.cell-actions button {
  border: none; border-radius: 3px; font-size: .7rem; line-height: 1; padding: 2px 5px; cursor: pointer;
}
.cell-action-edit { background: #e7f1ff; color: var(--brand-blue); }
.cell-action-delete { background: #fdeaea; color: #b02a2a; }

/* Floating popover editor - position:fixed, outside table flow, so it
   never causes the grid to resize while open. */
.cell-popover {
  position: fixed; z-index: 1060; width: 230px; background: #fff;
  border: 1px solid #ccd4dc; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 10px;
}

/* Django's default form-field/non-field error rendering ({{ field.errors }},
   {{ form.non_field_errors }}) uses a plain <ul class="errorlist"> with NO
   color styling at all - it renders in the browser's default black text,
   completely bypassing Bootstrap and unaffected by MESSAGE_TAGS (which only
   covers django.contrib.messages, not form validation errors). This was the
   actual "error text still shows black" bug - fixed globally here so every
   form error, on every page, is unmistakably red regardless of which
   template renders it. */
ul.errorlist {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: .375rem;
  padding: .5rem .75rem;
  margin: .25rem 0 .5rem;
  list-style: none;
  font-size: .9rem;
}
ul.errorlist li { margin: 0; }
ul.errorlist.nonfield { margin-bottom: 1rem; }

/* Cross-browser form-control/select/button height normalization.
   Safari renders native <select> and <input> box metrics (padding,
   line-height, font baseline) slightly differently from Chrome/Firefox
   even with the exact same Bootstrap classes applied, which shows up as
   a visible height mismatch next to a <button> in the same row. Forcing
   box-sizing and an explicit height on all three keeps them identical
   in every modern browser instead of relying on each browser's own
   (inconsistent) intrinsic sizing. */
.form-select,
.form-control,
.btn {
  box-sizing: border-box;
  min-height: calc(1.5em + 0.75rem + 2px); /* Bootstrap 5's own default control height, applied explicitly */
}
/* A <a class="btn"> and a <button class="btn"> can still end up looking
   like different heights sitting side by side (e.g. Export PDF/Excel
   links next to an Auto-Generate button) purely from inline-block
   baseline alignment - centering the content with flex fixes that
   regardless of which element type is used. */
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The "-sm" variants (compact filter rows, the Add Courses table, ...) get the same
   explicit control height so buttons, inputs and selects line up in every browser. */
.form-select-sm,
.form-control-sm,
.btn-sm {
  box-sizing: border-box;
  min-height: calc(1.5em + 0.5rem + 2px);
}
.form-select-lg,
.form-control-lg,
.btn-lg {
  min-height: calc(1.5em + 1rem + 2px);
}
/* Safari (and older WebKit) draw <select> elements with the platform's
   native appearance by default, which ignores several of the metrics
   above - this restores Bootstrap's own intended appearance so the
   height rule takes effect. */
select.form-select,
select.form-control {
  -webkit-appearance: none;
  appearance: none;
}

/* Choices.js (the faculty search/multi-select widget) replaces the
   native <select> with its own DOM entirely, so it doesn't pick up the
   .form-select height rule above at all by default - this made it look
   a different height from every plain dropdown and number field next to
   it (e.g. on the Course Assignment board). Match it exactly. */
.choices__inner {
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid #ced4da !important;
  background-color: #fff !important;
}
.choices__list--multiple .choices__item {
  margin-bottom: 0;
}

/* Small "?" help icon used throughout the app next to form fields/labels
   that need a short explanation - hover (or tap, on touch devices) shows
   a Bootstrap tooltip. See templates/partials/help_icon.html. */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #6c757d;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  margin-left: .25rem;
  line-height: 1;
}
.help-icon:hover { background: #495057; }