/**
 * KAIROS ACADEMY TECH
 * kairos-calendar.css — KCAL.1 · Unified Calendar Module kit
 *
 * The Cube calendar layout kit (.calendar-page / .calendar-layout /
 * .calendar-toolbar / .calendar-surface / .calendar-sidebar / mini-month /
 * month grid / week columns / .event-card / .upcoming-item / .view-switch /
 * .cal-empty), ported onto the Kairos dark-glass system and scoped under the
 * .kairos-cal root that /shared/js/kairos-calendar.js mounts.
 *
 * Theming contract:
 *   - Surfaces:  glass rgba(22,17,48,.72) + var(--kairos-border) borders.
 *   - Text:      var(--kairos-text) / var(--kairos-muted).
 *   - Accent:    var(--kairos-cal-accent, #7b6cf6) — each page fixes it for
 *                its domain (tetra azure #4db6ff · cube violet #7b6cf6 ·
 *                guardian light violet #a78bfa · octa teal #4fd1c5), either
 *                in page CSS or via the module's `accent` config.
 *   - Event-type colors are open tokens (--kcal-ev-*): assignment_due first,
 *     lesson / exam / class_session / school_event pre-wired.
 *
 * Presentation only — no data, no writes. Responsive at ≤980px and ≤720px.
 */

.kairos-cal{
  --kcal-accent: var(--kairos-cal-accent, #7b6cf6);
  --kcal-surface: rgba(22,17,48,.72);
  --kcal-border: var(--kairos-border, rgba(255,255,255,.14));
  --kcal-text: var(--kairos-text, #f4f1ff);
  --kcal-muted: var(--kairos-muted, #a9a3c4);
  --kcal-glass: var(--kairos-glass, rgba(255,255,255,.06));
  --kcal-grad-glass: var(--kairos-grad-glass, linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 100%));
  --kcal-inset: var(--kairos-inset, inset 0 1px 0 rgba(255,255,255,.08));
  --kcal-shadow: var(--kairos-shadow, 0 18px 48px rgba(0,0,0,.5));

  /* Event-type color tokens — assignment_due first; map open to more types. */
  --kcal-ev-assignment_due: var(--kcal-accent);
  --kcal-ev-lesson: var(--kairos-purple-soft, #a78bfa);
  --kcal-ev-exam: var(--kairos-warn, #f2b134);
  --kcal-ev-class_session: var(--kairos-purple, #7c4dff);
  --kcal-ev-quiz: var(--kairos-purple-soft, #a78bfa);
  --kcal-ev-school_event: var(--kairos-good, #4fd1c5);

  color: var(--kcal-text);
  min-width: 0;
}
.kairos-cal *{ box-sizing: border-box; }
.kairos-cal button{ font-family: inherit; }

/* Light portal theme (Tetrahedron): the calendar is fully token-driven, so
   flipping --kcal-* re-lights every surface at once. Scoped to
   [data-tetra-theme="light"] .kairos-cal (specificity out-ranks the base
   .kairos-cal tokens); the dark portals never set that attribute so they are
   untouched. */
:root[data-tetra-theme="light"] .kairos-cal{
  --kcal-surface: #ffffff;
  --kcal-border: #e7eaf3;
  --kcal-text: #182033;
  --kcal-muted: #6d7688;
  --kcal-glass: #ffffff;
  --kcal-grad-glass: linear-gradient(160deg, #ffffff 0%, #fbfbff 100%);
  --kcal-inset: inset 0 1px 0 rgba(255,255,255,.8);
  --kcal-shadow: 0 16px 40px rgba(31,36,48,.08);
}
:root[data-tetra-theme="light"] .kairos-cal .kcal-course-select option{
  background: #ffffff; color: #182033;
}
/* The related-tools subnav sits outside .kairos-cal and uses the page's
   --panel/--text (skin-darkened); re-light it explicitly under light theme. */
:root[data-tetra-theme="light"] .kcal-subnav a{
  background: #ffffff !important;
  border-color: #e7eaf3 !important;
  color: #182033 !important;
}
:root[data-tetra-theme="light"] .kcal-subnav a:hover{ border-color: #4b2aad !important; }

/* ── Page frame ── */
.kairos-cal .calendar-page{ display: grid; gap: 14px; }
.kairos-cal .calendar-layout{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.kairos-cal .calendar-sidebar{ display: grid; gap: 12px; align-self: start; min-width: 0; }
.kairos-cal .calendar-main{ display: grid; gap: 12px; min-width: 0; align-self: start; }

/* ── Glass panels ── */
.kairos-cal .calendar-toolbar,
.kairos-cal .calendar-surface,
.kairos-cal .side-panel{
  background: var(--kcal-grad-glass);
  background-color: var(--kcal-surface);
  border: 1px solid var(--kcal-border);
  border-radius: 18px;
  box-shadow: var(--kcal-inset);
  color: var(--kcal-text);
}

/* ── Toolbar ── */
.kairos-cal .calendar-toolbar{
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kairos-cal .toolbar-left,
.kairos-cal .toolbar-right{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kairos-cal .range-label{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--kcal-text);
  margin-left: 4px;
}
.kairos-cal .icon-btn{
  width: 34px; height: 34px;
  border: 1px solid var(--kcal-border);
  border-radius: 12px;
  background: var(--kcal-glass);
  color: var(--kcal-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .14s ease, background .14s ease;
}
.kairos-cal .icon-btn svg{ width: 16px; height: 16px; }
.kairos-cal .icon-btn:hover{ border-color: var(--kcal-accent); }
.kairos-cal .k-btn{
  border: 1px solid var(--kcal-border);
  background: var(--kcal-glass);
  color: var(--kcal-text);
  border-radius: 12px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease;
}
.kairos-cal .k-btn:hover{
  border-color: var(--kcal-accent);
  background: color-mix(in srgb, var(--kcal-accent) 12%, transparent);
}

/* View switch */
.kairos-cal .view-switch{
  display: inline-flex;
  padding: 3px;
  background: var(--kcal-glass);
  border: 1px solid var(--kcal-border);
  border-radius: 13px;
  gap: 3px;
}
.kairos-cal .view-btn{
  border: none;
  background: transparent;
  color: var(--kcal-muted);
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.kairos-cal .view-btn:hover{ color: var(--kcal-text); }
.kairos-cal .view-btn.active{
  background: color-mix(in srgb, var(--kcal-accent) 18%, transparent);
  color: var(--kcal-accent);
}

/* Course filter (octa) */
.kairos-cal .kcal-course-filter{ display: inline-flex; align-items: center; gap: 8px; }
.kairos-cal .kcal-course-label{
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--kcal-muted);
}
.kairos-cal .kcal-course-select{
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--kcal-border);
  border-radius: 12px;
  background: var(--kcal-glass);
  color: var(--kcal-text);
  outline: none;
  cursor: pointer;
}
.kairos-cal .kcal-course-select:focus{ border-color: var(--kcal-accent); }
.kairos-cal .kcal-course-select option{ background: #161130; color: var(--kcal-text); }

/* ── Sidebar panels ── */
.kairos-cal .side-panel{ padding: 14px; }
.kairos-cal .side-panel h3{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--kcal-text);
}

/* Mini-month */
.kairos-cal .mini-month-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kairos-cal .mini-month-label{ font-size: 13px; font-weight: 800; color: var(--kcal-text); }
.kairos-cal .mini-month-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kairos-cal .mini-dow{
  text-align: center;
  color: var(--kcal-muted);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 0;
}
.kairos-cal .mini-day{
  aspect-ratio: 1/1;
  border-radius: 9px;
  border: 1px solid var(--kcal-border);
  background: transparent;
  font-size: 11px; font-weight: 700;
  color: var(--kcal-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.kairos-cal .mini-day:hover{ background: color-mix(in srgb, var(--kcal-accent) 12%, transparent); }
.kairos-cal .mini-day.muted{ color: rgba(169,163,196,.4); border-color: transparent; cursor: default; }
.kairos-cal .mini-day.muted:hover{ background: transparent; }
.kairos-cal .mini-day.today{
  border-color: var(--kcal-accent);
  color: var(--kcal-accent);
  background: color-mix(in srgb, var(--kcal-accent) 16%, transparent);
  font-weight: 800;
}
.kairos-cal .mini-day.selected{ border-color: var(--kcal-accent); }
.kairos-cal .mini-day.has-event::after{
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--kcal-accent);
}

/* Upcoming */
.kairos-cal .upcoming-empty{ font-size: 12px; color: var(--kcal-muted); line-height: 1.5; padding: 4px 0; }
.kairos-cal .upcoming-item{
  border-left: 3px solid var(--kcal-accent);
  border-radius: 0 10px 10px 0;
  background: var(--kcal-glass);
  padding: 8px 10px;
  margin-bottom: 7px;
  font-size: 12px;
}
.kairos-cal .upcoming-item:last-child{ margin-bottom: 0; }
.kairos-cal .upcoming-title{ font-weight: 700; line-height: 1.3; color: var(--kcal-text); }
.kairos-cal .upcoming-meta{ color: var(--kcal-muted); margin-top: 2px; font-size: 11px; }

/* Legend */
.kairos-cal .legend-list{ display: grid; gap: 7px; }
.kairos-cal .legend-item{ display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--kcal-muted); }
.kairos-cal .dot{ width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: var(--kcal-accent); }

/* ── Event-type coloring (shared by dots · chips · cards · upcoming) ── */
.kairos-cal .t-assignment_due{ --kcal-ev: var(--kcal-ev-assignment_due); }
.kairos-cal .t-lesson{ --kcal-ev: var(--kcal-ev-lesson); }
.kairos-cal .t-exam{ --kcal-ev: var(--kcal-ev-exam); }
.kairos-cal .t-class_session{ --kcal-ev: var(--kcal-ev-class_session); }
.kairos-cal .t-quiz{ --kcal-ev: var(--kcal-ev-quiz); }
.kairos-cal .t-school_event{ --kcal-ev: var(--kcal-ev-school_event); }
.kairos-cal .dot[class*="t-"]{ background: var(--kcal-ev, var(--kcal-accent)); }
.kairos-cal .upcoming-item[class*="t-"]{
  border-left-color: var(--kcal-ev, var(--kcal-accent));
  background: color-mix(in srgb, var(--kcal-ev, var(--kcal-accent)) 10%, transparent);
}

/* ── Calendar surface ── */
.kairos-cal .calendar-surface{ padding: 14px; overflow: hidden; }

/* Month grid */
.kairos-cal .month-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.kairos-cal .month-dow{
  text-align: center;
  color: var(--kcal-muted);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 0;
}
.kairos-cal .month-cell{
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--kcal-text);
  padding: 7px;
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: stretch;
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease;
}
.kairos-cal .month-cell:hover{
  background: color-mix(in srgb, var(--kcal-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--kcal-accent) 30%, transparent);
}
.kairos-cal .month-cell.is-out{ background: transparent; border-color: rgba(255,255,255,.04); }
.kairos-cal .month-cell.is-out .mc-date{ color: rgba(169,163,196,.35); }
.kairos-cal .month-cell.is-today{
  border-color: var(--kcal-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kcal-accent) 40%, transparent);
}
.kairos-cal .month-cell.is-today .mc-date{ color: var(--kcal-accent); }
.kairos-cal .month-cell.is-selected{
  border-color: var(--kcal-accent);
  background: color-mix(in srgb, var(--kcal-accent) 10%, transparent);
}
.kairos-cal .mc-date{ font-size: 12px; font-weight: 800; color: var(--kcal-muted); }
.kairos-cal .mc-ev{
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
  border-radius: 7px;
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--kcal-ev, var(--kcal-accent));
  background: color-mix(in srgb, var(--kcal-ev, var(--kcal-accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kcal-ev, var(--kcal-accent)) 30%, transparent);
}
.kairos-cal .mc-more{ font-size: 10px; font-weight: 700; color: var(--kcal-muted); }

/* Week columns */
.kairos-cal .week-shell{ overflow-x: auto; }
.kairos-cal .week-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(122px, 1fr));
  gap: 6px;
  min-width: 900px;
}
.kairos-cal .week-col{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  display: grid;
  align-content: start;
  min-height: 260px;
  min-width: 0;
}
.kairos-cal .week-col.is-today{
  border-color: var(--kcal-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kcal-accent) 35%, transparent);
}
.kairos-cal .dow-cell{
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.kairos-cal .dow-name{
  font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  font-weight: 800;
  color: var(--kcal-muted);
}
.kairos-cal .dow-date{ font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--kcal-text); }
.kairos-cal .dow-date.is-today{ color: var(--kcal-accent); }
.kairos-cal .week-col-body{ padding: 7px; display: grid; gap: 6px; align-content: start; }

/* Event cards */
.kairos-cal .event-card{
  border-radius: 12px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  text-decoration: none;
  min-width: 0;
  color: var(--kcal-ev, var(--kcal-accent));
  background: color-mix(in srgb, var(--kcal-ev, var(--kcal-accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--kcal-ev, var(--kcal-accent)) 26%, transparent);
  transition: border-color .12s ease;
}
.kairos-cal a.event-card:hover{ border-color: var(--kcal-ev, var(--kcal-accent)); }
.kairos-cal .event-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kairos-cal .event-title{ font-size: 11px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.kairos-cal .event-badge{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(13,10,31,.45);
  color: inherit;
}
.kairos-cal .event-meta{ font-size: 10px; color: var(--kcal-muted); }

/* Day panel (month view: click a day → list) */
.kairos-cal .kcal-day-panel{ padding: 14px; }
.kairos-cal .kcal-day-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.kairos-cal .kcal-day-head h3{ margin: 0; font-size: 13px; font-weight: 800; color: var(--kcal-text); }
.kairos-cal .kcal-day-group{ margin-bottom: 10px; }
.kairos-cal .kcal-day-group:last-child{ margin-bottom: 0; }
.kairos-cal .kcal-day-group-title{
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--kcal-muted);
  margin-bottom: 6px;
}

/* ── Empty state ── */
.kairos-cal .cal-empty{ text-align: center; padding: 32px 20px 24px; color: var(--kcal-muted); }
.kairos-cal .cal-empty .ce-icon{
  margin-bottom: 8px;
  color: var(--kcal-accent);
  opacity: .9;
  display: flex; justify-content: center;
}
.kairos-cal .cal-empty .ce-label{ font-size: 14px; font-weight: 800; color: var(--kcal-text); margin-bottom: 5px; }
.kairos-cal .cal-empty .ce-sub{ font-size: 12px; line-height: 1.55; max-width: 360px; margin: 0 auto; }

/* ── Loading skeleton ── */
.kairos-cal .kcal-skeleton{ display: grid; gap: 10px; }
.kairos-cal .sk-bar,
.kairos-cal .sk-cell{
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 70%);
  background-size: 220% 100%;
  animation: kcal-shimmer 1.4s ease infinite;
}
.kairos-cal .sk-bar{ height: 20px; width: 40%; }
.kairos-cal .sk-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kairos-cal .sk-cell{ height: 68px; }
@keyframes kcal-shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce){
  .kairos-cal .sk-bar, .kairos-cal .sk-cell{ animation: none; }
}

/* ── Responsive ── */
@media (max-width: 1280px){
  .kairos-cal .calendar-layout{ grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 980px){
  .kairos-cal .calendar-layout{ grid-template-columns: 1fr; }
  .kairos-cal .calendar-sidebar{ order: 2; }
  .kairos-cal .calendar-main{ order: 1; }
}
@media (max-width: 720px){
  .kairos-cal .calendar-toolbar{ padding: 10px 12px; }
  .kairos-cal .range-label{ font-size: 15px; }
  .kairos-cal .toolbar-right{ width: 100%; justify-content: space-between; }
  .kairos-cal .kcal-course-select{ max-width: 170px; }
  .kairos-cal .month-grid{ gap: 4px; }
  .kairos-cal .month-cell{ min-height: 64px; padding: 5px; border-radius: 9px; }
  .kairos-cal .mc-ev{ font-size: 0; padding: 0; height: 6px; width: 100%; border-radius: 3px; }
  .kairos-cal .mc-more{ font-size: 9px; }
  .kairos-cal .week-grid{ min-width: 680px; grid-template-columns: repeat(7, minmax(92px, 1fr)); }
  .kairos-cal .calendar-surface{ padding: 10px; }
  .kairos-cal .side-panel{ padding: 12px; }
}