:root {
  --bg:      #0d0d0d;
  --bg2:     #161616;
  --card:    #1c1c1c;
  --border:  #2c2c2c;
  --text:    #f2f2f2;
  --muted:   #9a9a9a;
  --red:     #e10600;
  --red2:    #ff2b1f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
}

h1, h2, h3, .display {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

a { color: var(--red2); }

/* App shell: persistent left sidebar + main content area */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex: none;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .brand {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 20px 18px 14px;
  display: block;
}

.sidebar .brand .dot { color: var(--red); }

.sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px;
}

.sidebar .nav-section-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 10px 6px;
}

.sidebar .nav-item {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 2px;
}

.sidebar .nav-item.active,
.sidebar .nav-item:hover {
  color: var(--text);
  background: var(--card);
}

.sidebar .nav-item.active { border-left: 3px solid var(--red); padding-left: 9px; }

.sidebar .nav-item.nav-item-sub {
  padding-left: 28px;
  font-size: 13.5px;
}
.sidebar .nav-item.nav-item-sub.active { padding-left: 25px; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.sidebar-footer a {
  color: var(--muted);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.sidebar-footer a:hover, .sidebar-footer a.active { color: var(--text); }

.main-area {
  flex: 1;
  min-width: 0;
}

.page-body {
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: var(--red2); }

.btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn.secondary:hover { border-color: var(--muted); }

.btn.small { padding: 6px 10px; font-size: 12px; }

input, select, textarea {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field { margin-bottom: 14px; }

.error-banner {
  background: rgba(225,6,0,0.12);
  border: 1px solid var(--red);
  color: #ffb3ae;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 14px;
  display: none;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: 360px;
  padding: 28px;
}

.auth-card h1 { margin: 0 0 4px; font-size: 26px; }
.auth-card p.sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.tabs button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tabs button.active {
  color: var(--text);
  border-bottom-color: var(--red);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.row-actions { display: flex; gap: 6px; }

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-backdrop.open { display: flex; }

.modal {
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.modal.modal-wide {
  width: 760px;
}

.modal h3 { margin-top: 0; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-two-col {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.modal-col-main {
  flex: 1;
  min-width: 0;
}

.modal-col-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.modal-col-side .field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.subject-picker-scroll {
  flex: 1;
  min-height: 220px;
  max-height: 520px;
  overflow-y: auto;
}

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

.color-swatch-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.color-swatch:hover { border-color: var(--muted); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--card); }

/* Calendar */

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav button { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.cal-nav .label { font-size: 18px; font-weight: 600; }

.cal-legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.cal-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot-class { background: var(--text); }
.dot-exam  { background: var(--red); }
.dot-task  { background: #ffb020; }

.cal-day-header { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cal-day-header .num { color: var(--text); font-weight: 700; font-size: 16px; margin-left: 4px; }

.class-card {
  border-left: 4px solid #3a86ff;
  background: rgba(58,134,255,0.10);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.class-card .title { font-weight: 700; }
.class-card .time { color: var(--muted); }

.chip {
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.chip.exam { background: rgba(225,6,0,0.12); border-left: 4px solid var(--red); }
.chip.task { background: rgba(255,176,32,0.12); border-left: 4px solid #ffb020; }
.chip.task.completed { opacity: 0.5; text-decoration: line-through; }

/* Day/Week hour grid */

.cal-allday-row {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 10px;
  overflow: hidden;
}

.cal-allday-label {
  width: 64px;
  flex: none;
  font-size: 11px;
  color: var(--muted);
  padding: 8px;
  border-right: 1px solid var(--border);
}

.cal-allday-days {
  display: flex;
  flex: 1;
}

.cal-allday-cell {
  flex: 1;
  min-width: 0;
  padding: 6px;
  border-right: 1px solid var(--border);
}
.cal-allday-cell:last-child { border-right: none; }

.cal-hourgrid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cal-time-wrap {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}

.cal-time-col {
  width: 64px;
  flex: none;
  position: relative;
  border-right: 1px solid var(--border);
}

.cal-time-slot {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 8px;
  transform: translateY(-50%);
}

.cal-days-area {
  display: flex;
  flex: 1;
  position: relative;
}

.cal-day-column {
  flex: 1;
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--border);
}
.cal-day-column:last-child { border-right: none; }

.cal-day-column.today { background: rgba(58,134,255,0.05); }

.cal-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}

.cal-event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 5px;
  border-left: 3px solid;
  padding: 3px 6px;
  font-size: 11.5px;
  overflow: hidden;
  line-height: 1.25;
  container-type: size;
}

/* Card background/border is always set inline per-item to the course's
   color; these classes only control text color, by item type. Text wraps
   and uses however many lines the card's actual height allows (via
   container queries below, keyed to the card's own height) rather than
   always truncating to one line — an ellipsis only appears once a line
   genuinely can't fit inside the card. */
.cal-event .ev-title, .cal-event .ev-topics, .cal-event .ev-exam, .cal-event .ev-task {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
@container (min-height: 45px) {
  .cal-event .ev-title, .cal-event .ev-topics, .cal-event .ev-exam, .cal-event .ev-task { -webkit-line-clamp: 2; }
}
@container (min-height: 75px) {
  .cal-event .ev-title, .cal-event .ev-topics, .cal-event .ev-exam, .cal-event .ev-task { -webkit-line-clamp: 3; }
}
@container (min-height: 110px) {
  .cal-event .ev-title, .cal-event .ev-topics, .cal-event .ev-exam, .cal-event .ev-task { -webkit-line-clamp: 4; }
}
.cal-event .ev-title { font-weight: 700; }
.cal-event .ev-topics { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.cal-event .ev-exam, .ev-text-exam { color: var(--red2); }
.cal-event .ev-exam { font-size: 10.5px; font-weight: 600; margin-top: 2px; }
.cal-event .ev-task, .ev-text-task { color: #ffb020; }
.cal-event .ev-task { font-size: 10.5px; font-weight: 600; margin-top: 2px; }
.cal-event .ev-task.completed, .ev-text-task.completed {
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

/* Right-click status menu (calendar tasks) */
.ctx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-size: 13px;
}
.ctx-menu-item {
  padding: 7px 10px 7px 26px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.ctx-menu-item:hover { background: var(--bg2); }
.ctx-menu-item.active { color: var(--red2); font-weight: 600; }
.ctx-menu-item.active::before {
  content: "✓";
  position: absolute;
  left: 9px;
}

/* On-card task status badge (calendar). Clickable control that opens the
   status picker; kept out of the title's strike-through so the glyph stays
   legible on done/skipped tasks. */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.14);
}
.status-badge:hover { background: rgba(255, 255, 255, 0.3); }
.status-badge.status-todo { color: var(--muted); }
.status-badge.status-in_progress { color: #4c8dff; }
.status-badge.status-done { color: var(--red2); }
.status-badge.status-skipped { color: var(--muted); }

/* Flex rows that place the badge beside the (line-clamped) task text without
   the badge getting caught in the -webkit-box clamp of .ev-title / .ev-task. */
.cal-event .ev-title-row,
.cal-event .ev-task-row { display: flex; align-items: flex-start; gap: 4px; }
.cal-event .ev-title-row { min-width: 0; }
.cal-event .ev-title-row .ev-title { min-width: 0; }
.cal-event .ev-task-row { margin-top: 2px; }
.cal-event .ev-task-row .ev-task { margin-top: 0; min-width: 0; }
.cal-month-item .status-badge { width: 14px; height: 14px; font-size: 9px; margin-right: 3px; vertical-align: middle; }
.cal-event[data-item-type], .cal-event .item-link { cursor: pointer; }
.cal-event-draggable { cursor: grab; }
.cal-event-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 5;
}
.cal-event-resize-top { top: 0; }
.cal-event-resize-bottom { bottom: 0; }
.cal-event-resize-handle:hover { background: rgba(255,255,255,0.25); }
.cal-event-draggable.dragging {
  cursor: grabbing;
  opacity: 0.85;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  z-index: 20;
}

.cal-col-headers {
  display: flex;
  margin-bottom: 8px;
}
.cal-col-headers .cal-time-col { border-right: none; }
.cal-col-header-cell {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 4px;
}
.cal-col-header-cell .num { color: var(--text); font-weight: 700; font-size: 16px; margin-left: 4px; }
.cal-col-header-cell.today .num {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

/* Month grid */

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
  gap: 1px;
}

.cal-month-weekday {
  background: var(--bg2);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px;
  text-align: center;
}

.cal-month-cell {
  background: var(--card);
  min-height: 100px;
  min-width: 0; /* grid items default to min-width:auto, which lets long
    unwrapped chip text (e.g. a class's subject-topic list) force its whole
    column wider than its 1fr share — this is the actual fix, not just the
    chip's own overflow:hidden, since that only clips the chip's own box. */
  overflow: hidden;
  padding: 6px;
}

.cal-month-cell.other-month { background: var(--bg2); opacity: 0.5; }
.cal-month-cell .cal-month-day-num { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cal-month-cell.today .cal-month-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-weight: 700;
}

.cal-month-item {
  font-size: 11px;
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile nav: hidden by default, shown only under the mobile breakpoint below */

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 90;
}

.sidebar-backdrop.open { display: block; }

/* Mobile breakpoint: off-canvas sidebar drawer, stacked columns, scrollable tables */

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 95;
  }

  .app-shell { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .sidebar.open { transform: translateX(0); }

  .main-area { min-width: 0; }

  .page-body { padding: 64px 16px 16px; }

  .cal-toolbar { flex-wrap: wrap; gap: 10px; }

  table { display: block; overflow-x: auto; white-space: nowrap; }

  .modal-two-col { flex-direction: column; }

  .agent-columns { flex-direction: column; }
  .agent-col { height: auto; min-height: 60vh; }

  .auth-card { width: 100%; max-width: 360px; padding: 20px; }

  .cal-month-cell { min-height: 70px; padding: 4px; }
}