/*
 * Blue theme for the school activity calendar.
 * This file intentionally overrides the legacy inline green theme.
 */

:root {
  --theme-blue-950: #082f67;
  --theme-blue-900: #0b438c;
  --theme-blue-800: #0757b5;
  --theme-blue-700: #0969da;
  --theme-blue-600: #0b78ff;
  --theme-blue-200: #bfdbfe;
  --theme-blue-100: #dbeafe;
  --theme-blue-50: #eff6ff;
  --theme-ink: #10244a;
  --theme-orange: #f59e0b;
}

body.theme-blue {
  color: var(--theme-ink);
  background:
    radial-gradient(circle at 94% 12%, rgba(147, 197, 253, 0.22), transparent 20rem),
    radial-gradient(circle at 4% 96%, rgba(191, 219, 254, 0.28), transparent 18rem),
    linear-gradient(145deg, #f8fbff 0%, #edf6ff 54%, #f8fbff 100%);
}

/* Main frame */
.theme-blue #mainHeader {
  background: linear-gradient(120deg, var(--theme-blue-950) 0%, #0759bc 48%, #0877e8 100%) !important;
  box-shadow: 0 4px 18px rgba(8, 47, 103, 0.24) !important;
}

.theme-blue #mainHeader button {
  color: var(--theme-blue-700) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 14px rgba(8, 47, 103, 0.18);
}

.theme-blue .logo-container img {
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 7px 18px rgba(3, 39, 89, .28);
}

.theme-blue #mainFooter {
  background: linear-gradient(120deg, #082f67, #071d40) !important;
}

.theme-blue .toast-loading {
  background: var(--theme-blue-900);
}

/* Month, year and view controls */
.theme-blue #monthSelector,
.theme-blue #yearSelector {
  color: var(--theme-ink) !important;
  border-color: #60a5fa !important;
  background-color: #fff !important;
  box-shadow: 0 3px 12px rgba(9, 105, 218, .09);
}

.theme-blue .view-toggle {
  background: #dbeafe;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.theme-blue .view-btn {
  color: var(--theme-blue-800);
}

.theme-blue .view-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--theme-blue-700), var(--theme-blue-600));
  box-shadow: 0 5px 12px rgba(9, 105, 218, .25);
}

/* Calendar shell and weekday headings */
.theme-blue #calendarViewContainer {
  background: rgba(255,255,255,.96) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 8px 28px rgba(30, 64, 175, .12) !important;
}

.theme-blue .calendar-header {
  border: 1px solid #bfdbfe;
}

.theme-blue .header-mon { background: #dbeeff; color: #17355f; }
.theme-blue .header-tue { background: #cfe2ff; color: #17355f; }
.theme-blue .header-wed { background: #d7f1f5; color: #17355f; }
.theme-blue .header-thu { background: #c7ddff; color: #17355f; }
.theme-blue .header-fri { background: #78b7fa; color: #0b2c5a; }
.theme-blue .header-sat { background: #e4ddff; color: #43327d; }
.theme-blue .header-sun { background: #fee2e2; color: #b91c1c; }

.theme-blue .calendar-grid {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.theme-blue .calendar-day {
  color: var(--theme-ink);
  background: #fff;
  border-color: #cfe3fb;
  box-shadow: 0 2px 7px rgba(30, 64, 175, .07);
}

/* Future dates with events use a blue rail instead of a solid fill. */
.theme-blue .day-has-event {
  color: var(--theme-ink) !important;
  background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
  border-color: #b7d7fb !important;
  box-shadow: inset 5px 0 0 var(--theme-blue-600), 0 2px 8px rgba(30, 64, 175, .09) !important;
}

.theme-blue .day-has-event .day-number {
  color: var(--theme-ink) !important;
}

.theme-blue .day-has-event .day-event-dot {
  width: 7px;
  height: 7px;
  background: var(--theme-blue-600) !important;
}

.theme-blue .day-has-event:hover {
  color: var(--theme-ink) !important;
  background: #e4f1ff !important;
  border-color: #60a5fa !important;
}

/* Past dates remain blue, but visually recede. */
.theme-blue .day-is-past {
  background: #f1f7ff !important;
  border-color: #dbeafe !important;
}

.theme-blue .day-is-past.day-past-has-event {
  color: #45617e !important;
  background: #e3effc !important;
  border-color: #bfd8f3 !important;
  box-shadow: inset 4px 0 0 #83b9ee !important;
}

.theme-blue .day-is-past.day-past-has-event .day-number {
  color: #45617e !important;
}

.theme-blue .day-is-past.day-past-has-event .day-event-dot {
  background: #75aee6 !important;
}

/* Today remains a strong orange focal point. */
.theme-blue .day-is-today {
  background: linear-gradient(135deg, #ffb11b, #f28a00) !important;
  border-color: #fff2cc !important;
  box-shadow: 0 7px 18px rgba(245, 158, 11, .38) !important;
}

.theme-blue .day-is-today::after {
  content: "★";
  color: #fff;
  font-size: .65rem;
  margin-top: 4px;
}

.theme-blue .day-is-today .day-event-dot { display: none !important; }
.theme-blue .day-is-today > span:last-child:not(.day-number) { display: none; }

/* Sundays use red numbers, except when the date is today. */
.theme-blue .calendar-grid > .calendar-day:nth-child(7n):not(.day-is-today) .day-number {
  color: #dc2626 !important;
}

/* List view */
.theme-blue .list-date-group::before {
  background: #bfdbfe;
}

.theme-blue .list-date-dot {
  background: var(--theme-blue-600);
  border-color: #eff6ff;
}

.theme-blue .list-card {
  border: 1px solid #cfe3fb;
  border-left: 4px solid var(--theme-blue-600) !important;
  box-shadow: 0 3px 12px rgba(30, 64, 175, .08);
}

.theme-blue .list-card > div:first-child > div:first-child {
  color: #123c70 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 2px 7px !important;
}

.theme-blue .list-card > div:first-child > div:first-child i {
  color: var(--theme-blue-700) !important;
}

.theme-blue .list-card > div:first-child > div:nth-child(2) {
  background: #f5f9fe !important;
  border: 0 !important;
  border-left: 3px solid #60a5fa !important;
  border-radius: 7px !important;
}

.theme-blue .list-card > div:last-child {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #dbeafe !important;
  border-radius: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.theme-blue .list-group-past .list-card {
  background: #f7fbff;
  border-color: #dbeafe;
}

.theme-blue .list-group-past .list-date-dot {
  background: #8eb9e8;
  border-color: #eff6ff;
}

/* Data-entry form: three related blue-family sections remain distinct. */
.theme-blue #eventForm > section:nth-of-type(1) {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  border-left-color: var(--theme-blue-700) !important;
}

.theme-blue #eventForm > section:nth-of-type(2) {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  border-left-color: #4f46e5 !important;
}

.theme-blue #eventForm > section:nth-of-type(3) {
  background: #ecfeff !important;
  border-color: #67e8f9 !important;
  border-left-color: #0891b2 !important;
}

.theme-blue #eventForm > section:nth-of-type(1) span.w-6 { background: var(--theme-blue-700) !important; }
.theme-blue #eventForm > section:nth-of-type(2) span.w-6 { background: #4f46e5 !important; }
.theme-blue #eventForm > section:nth-of-type(3) span.w-6 { background: #0891b2 !important; }

.theme-blue #eventSubmitButton {
  background: linear-gradient(135deg, var(--theme-blue-700), var(--theme-blue-600)) !important;
}

@media (max-width: 767px) {
  .theme-blue #mainHeader {
    box-shadow: 0 4px 16px rgba(8, 47, 103, .22) !important;
  }

  .theme-blue .list-date-group {
    padding-left: 30px;
    margin-bottom: 20px;
  }

  .theme-blue .list-date-group::before {
    left: 10px;
    width: 2px;
    background: #bfdbfe;
  }

  .theme-blue .list-date-dot {
    left: -25px;
    width: 18px;
    height: 18px;
    background: var(--theme-blue-600);
    border: 3px solid #eff6ff;
    box-shadow: 0 0 0 3px rgba(11, 120, 255, .10);
  }

  .theme-blue .list-date-header {
    margin-bottom: 10px;
  }

  .theme-blue .list-date-header .date-text {
    color: var(--theme-ink);
    font-size: 1rem;
  }

  .theme-blue .list-date-header > span:nth-of-type(2) {
    color: var(--theme-blue-800);
    background: #eff6ff;
  }

  .theme-blue .list-card {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #bfdbfe;
    border-left: 5px solid var(--theme-blue-600) !important;
    border-radius: 15px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 5px 16px rgba(30, 64, 175, .12);
  }

  .theme-blue .list-card > div:first-child > div:first-child {
    padding: 3px 3px 8px !important;
    color: var(--theme-ink) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .95rem;
  }

  .theme-blue .list-card > div:first-child > div:first-child i {
    color: var(--theme-blue-600) !important;
    font-size: 1rem;
  }

  .theme-blue .list-card > div:first-child > div:nth-child(2) {
    padding: 11px 12px;
    color: #253b5c;
    background: #f7fbff !important;
    border: 0 !important;
    border-left-color: #60a5fa !important;
    border-left-style: solid !important;
    border-left-width: 3px !important;
    border-radius: 10px;
    line-height: 1.55;
  }

  .theme-blue .list-card > div:last-child {
    margin-top: 10px;
    padding: 9px 3px 2px;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #dbeafe !important;
    border-radius: 0 !important;
  }

  .theme-blue .list-card > div:last-child > div:first-child {
    color: #60728c;
  }

  .theme-blue .list-card > div:last-child button {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .theme-blue .list-group-past .list-card {
    background: #f9fcff;
    border-color: #d7e8fa;
    border-left-color: #8ebceb !important;
    box-shadow: 0 3px 11px rgba(30, 64, 175, .07);
  }

  .theme-blue .list-group-today {
    border-color: #fbbf24;
    background: #fffbeb;
  }

  .theme-blue .list-group-today .list-date-dot {
    left: -25px;
    background: var(--theme-orange);
    border-color: #fff7d6;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
  }

  .theme-blue .day-has-event {
    box-shadow: inset 3px 0 0 var(--theme-blue-600) !important;
  }

  .theme-blue .day-is-today::after {
    font-size: .55rem;
    margin-top: 2px;
  }
}