/* V2 dashboard: subjects, upcoming and today panels. */

/* ── Dashboard ── */

:root[data-ui="v2"] .view[data-view="dashboard"].is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "stats stats"
    "week week"
    "today today"
    "subjects upcoming";
  gap: 24px;
  align-items: start;
}

/* responsive.css redefines the areas at 960px without the week row; this stronger selector
   keeps it there too. */
@media (max-width: 960px) {
  :root[data-ui="v2"] .view.view[data-view="dashboard"].is-active {
    grid-template-areas:
      "stats"
      "week"
      "today"
      "subjects"
      "upcoming";
  }
}

/* No subjects: the summary is hidden, so drop its row rather than leave a double gap. */
:root[data-ui="v2"] .view.view[data-view="dashboard"].is-active:has(> .week-summary[hidden]) {
  grid-template-areas:
    "stats stats"
    "today today"
    "subjects upcoming";
}

@media (max-width: 960px) {
  :root[data-ui="v2"] .view.view[data-view="dashboard"].is-active:has(> .week-summary[hidden]) {
    grid-template-areas:
      "stats"
      "today"
      "subjects"
      "upcoming";
  }
}

/* ── This week: one quiet line under the stat strip ── */

:root[data-ui="v2"] .week-summary {
  grid-area: week;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin: -10px 0;
  padding: 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

:root[data-ui="v2"] .week-summary[hidden] {
  display: none;
}

:root[data-ui="v2"] .week-summary-icon {
  flex: none;
  font-size: 16px;
  line-height: 20px;
  color: var(--accent);
}

:root[data-ui="v2"] .week-summary-label {
  flex: none;
  margin-left: -4px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-primary);
}

/* Each part carries its own leading dot; the strip is shifted left by one dot's width and
   clipped there, so whichever part starts a wrapped line loses its dot instead of orphaning it. */
:root[data-ui="v2"] .week-summary-parts {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  min-width: 0;
  margin-left: -20px;
  clip-path: inset(-8px -8px -8px 20px);
}

:root[data-ui="v2"] .week-summary-part {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

:root[data-ui="v2"] .week-summary-part::before {
  content: "·";
  flex: none;
  width: 20px;
  text-align: center;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .week-summary-counts {
  color: var(--text-primary);
}

:root[data-ui="v2"] .week-summary-counts.is-calm {
  color: var(--text-secondary);
}

:root[data-ui="v2"] .week-summary-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

:root[data-ui="v2"] .week-summary-item,
:root[data-ui="v2"] .week-summary-overdue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: -3px -6px;
  padding: 3px 6px;
  border: none;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

:root[data-ui="v2"] .week-summary-item:hover,
:root[data-ui="v2"] .week-summary-overdue:hover {
  background: var(--bg-hover);
}

:root[data-ui="v2"] .week-summary-item:focus-visible,
:root[data-ui="v2"] .week-summary-overdue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

:root[data-ui="v2"] .week-summary-name {
  min-width: 0;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-ui="v2"] .week-summary-subject {
  color: var(--text-secondary);
}

:root[data-ui="v2"] .week-summary-day {
  flex: none;
  color: var(--text-secondary);
}

:root[data-ui="v2"] .week-summary-overdue {
  font-weight: 500;
  color: var(--danger);
}

:root[data-ui="v2"] .week-summary-marks {
  color: var(--text-tertiary);
}

@media (max-width: 700px) {
  :root[data-ui="v2"] .week-summary {
    margin: -8px 0;
    padding: 0 2px;
  }

  :root[data-ui="v2"] .week-summary-subject {
    display: none;
  }
}

:root[data-ui="v2"] .dashboard-stack {
  display: contents;
}

:root[data-ui="v2"] .hero-grid {
  display: none;
}

:root[data-ui="v2"] .v2-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-surface);
  overflow: hidden;
}

:root[data-ui="v2"] .v2-stat {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 18px 20px;
  border-left: 1px solid var(--card-border);
}

:root[data-ui="v2"] .v2-stat:first-child {
  border-left: none;
}

:root[data-ui="v2"] .v2-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

:root[data-ui="v2"] .v2-stat-value {
  display: flex;
  align-items: baseline;
  min-height: 36px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

:root[data-ui="v2"] .v2-stat-value .v2-grade {
  height: 32px;
  min-width: 44px;
  font-size: 18px;
  letter-spacing: 0;
}

:root[data-ui="v2"] .v2-stat-mark {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  font-size: 18px;
  vertical-align: -3px;
}

:root[data-ui="v2"] .v2-stat--text .v2-stat-value {
  display: block;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .v2-stat-unit {
  margin-left: 2px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-secondary);
}

:root[data-ui="v2"] .v2-stat-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Narrow cards: let the detail line wrap once rather than cutting off the date. */
@media (max-width: 960px) {
  :root[data-ui="v2"] .v2-stat-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
}

/* Subjects panel */
:root[data-ui="v2"] .subjects-section {
  grid-area: subjects;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
}

:root[data-ui="v2"] .subjects-section .section-header {
  margin: 0;
}

:root[data-ui="v2"] .subjects-section .section-eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

:root[data-ui="v2"] .subjects-section .section-title,
:root[data-ui="v2"] .subjects-section .section-meta {
  display: none;
}

:root[data-ui="v2"] .subjects-toolbar {
  margin: 0;
  gap: 8px;
}

:root[data-ui="v2"] .subjects-toolbar .ghost-button,
:root[data-ui="v2"] .subjects-toolbar .primary-button {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: var(--radius);
}

/* "New subject" is secondary here; "Add mark" is the page's primary action. */
:root[data-ui="v2"] .subjects-toolbar .primary-button {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
}

:root[data-ui="v2"] .subjects-toolbar .primary-button:hover {
  background: var(--bg-hover);
}

:root[data-ui="v2"] .subjects-grid {
  grid-column: 1 / -1;
  display: block;
}

:root[data-ui="v2"] .subjects-grid > .empty-state {
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-lg);
}

:root[data-ui="v2"] .v2-subject-list {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-surface);
  overflow: hidden;
}

:root[data-ui="v2"] .v2-subject-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(80px, 160px) 64px 44px 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-top: 1px solid var(--card-border);
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

:root[data-ui="v2"] .v2-subject-row:first-child {
  border-top: none;
}

:root[data-ui="v2"] .v2-subject-row:hover {
  background: var(--bg-hover);
}

:root[data-ui="v2"] .v2-subject-row:focus-visible {
  outline-offset: -2px;
}

:root[data-ui="v2"] .v2-subject-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  color: var(--subject-color);
  background: color-mix(in srgb, var(--subject-color) 14%, transparent);
}

:root[data-ui="v2"] .v2-subject-icon .button-icon {
  font-size: 18px;
}

:root[data-ui="v2"] .v2-subject-main {
  display: grid;
  min-width: 0;
}

:root[data-ui="v2"] .v2-subject-name {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .v2-subject-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .v2-target {
  color: var(--grade-c);
}

:root[data-ui="v2"] .v2-target.is-met {
  color: var(--grade-a);
}

/* Light theme: darken the amber/green so the 13px meta text clears 4.5:1 on white. */
:root[data-ui="v2"]:not([data-theme="dark"]) .v2-target {
  color: color-mix(in srgb, var(--grade-c) 72%, #000000);
}

:root[data-ui="v2"]:not([data-theme="dark"]) .v2-target.is-met {
  color: color-mix(in srgb, var(--grade-a) 72%, #000000);
}

:root[data-ui="v2"] .v2-subject-progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--track);
}

:root[data-ui="v2"] .v2-subject-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--subject-color);
}

:root[data-ui="v2"] .v2-subject-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-primary);
}

:root[data-ui="v2"] .v2-subject-average {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

:root[data-ui="v2"] .v2-subject-chevron {
  color: var(--text-tertiary);
  font-size: 16px;
}

/* Upcoming and Today panels in the right column */
:root[data-ui="v2"] .upcoming-card {
  grid-area: upcoming;
  gap: 4px;
  padding: 16px;
}

:root[data-ui="v2"] .timetable-dashboard-card {
  grid-area: today;
  gap: 8px;
  padding: 16px;
}

:root[data-ui="v2"] .upcoming-card > .section-eyebrow,
:root[data-ui="v2"] .timetable-dashboard-card > .section-eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

:root[data-ui="v2"] .timetable-dashboard-card > .section-title {
  margin: -6px 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .upcoming-card--wide .upcoming-list,
:root[data-ui="v2"] .upcoming-card--wide.is-expanded .upcoming-list {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Today's lessons run left to right, sized by length (set inline by js/timetable.js). */
:root[data-ui="v2"] .timetable-dashboard-list {
  --today-grid-gap: 8px;
}

/* Medium screens: keep lessons on one row that scrolls sideways (as on phones) instead of
   V1's wrapping grid, so the day's progress bar still reads as one strip under one row. */
@media (max-width: 960px) {
  :root[data-ui="v2"] .timetable-dashboard-list {
    grid-template-columns: repeat(var(--today-lesson-columns, 1), minmax(150px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }
}

:root[data-ui="v2"] .timetable-dashboard-list > .muted {
  font-size: 13px;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .today-lesson-card {
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  /* Thin outline in the subject's colour; the current lesson gets a thicker one.
     The extra thickness is an inset shadow so cards don't change size. */
  border: 1px solid color-mix(in srgb, var(--lesson-border) 50%, var(--card-surface));
  background: var(--card-surface);
  box-shadow: none;
}

:root[data-ui="v2"] .today-lesson-card.is-current {
  border-color: color-mix(in srgb, var(--lesson-border) 75%, var(--card-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lesson-border) 75%, var(--card-surface));
  background: color-mix(in srgb, var(--lesson-border) 8%, var(--card-surface));
}

:root[data-ui="v2"] .today-lesson-card .lesson-top {
  font-size: 12px;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .today-lesson-card .lesson-time {
  font-variant-numeric: tabular-nums;
}

:root[data-ui="v2"] .today-lesson-card .lesson-subject-row {
  gap: 8px;
}

:root[data-ui="v2"] .today-lesson-card .lesson-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: none;
  color: var(--lesson-border);
}

:root[data-ui="v2"] .today-lesson-card .lesson-subject {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .today-lesson-card .lesson-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .timetable-progress {
  height: 6px;
  border: none;
  background: var(--track);
}

:root[data-ui="v2"] .timetable-progress-track {
  opacity: 0.25;
}

:root[data-ui="v2"] .timetable-progress-fill {
  opacity: 1;
}

:root[data-ui="v2"] .timetable-progress-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .upcoming-item {
  margin: 0;
  padding: 10px 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--card-border);
  background: none;
  align-items: center;
  gap: 8px;
}

:root[data-ui="v2"] .upcoming-list > .upcoming-item:first-child {
  border-top: none;
}

:root[data-ui="v2"] .upcoming-item:hover {
  background: none;
}

:root[data-ui="v2"] .upcoming-item:hover .upcoming-name {
  color: var(--accent);
}

:root[data-ui="v2"] .upcoming-name {
  align-items: flex-start;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-primary);
}

/* Keep the subject icon on the first line when a long name wraps. */
:root[data-ui="v2"] .upcoming-mark {
  margin-top: 2px;
}

:root[data-ui="v2"] .upcoming-meta {
  font-size: 13px;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .upcoming-right {
  gap: 6px;
}

/* Dashboard Upcoming: every item stacks the same way in the narrow column (details, then a
   row with the type tags on the left and the actions on the right) instead of wrapping only
   when its text happens to be long. Wide containers keep everything on one line. */
:root[data-ui="v2"] .upcoming-card .upcoming-list {
  container-type: inline-size;
}

:root[data-ui="v2"] .upcoming-card .upcoming-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

:root[data-ui="v2"] .upcoming-card .upcoming-right {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-left: 0;
  min-height: 30px;
}

:root[data-ui="v2"] .upcoming-card .upcoming-right > button:first-of-type {
  margin-left: auto;
}

@container (min-width: 480px) {
  :root[data-ui="v2"] .upcoming-card .upcoming-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
}

:root[data-ui="v2"] .upcoming-tag {
  height: 20px;
  font-size: 11px;
}

:root[data-ui="v2"] .upcoming-tag.is-overdue {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}

:root[data-ui="v2"] .upcoming-remove {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--text-tertiary);
}

:root[data-ui="v2"] .upcoming-remove-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-ui="v2"] .upcoming-footer {
  padding-top: 8px;
  border-top: 1px solid var(--card-border);
  gap: 8px;
}

:root[data-ui="v2"] .upcoming-list:has(> .empty-state) + .upcoming-footer {
  border-top: none;
}

:root[data-ui="v2"] .upcoming-list > .empty-state,
:root[data-ui="v2"] .timetable-dashboard-list .empty-state {
  padding: 8px 0;
}

/* ── Exam countdown: one row at the top of the Upcoming panel (js/countdown.js) ── */

:root[data-ui="v2"] .exam-countdown {
  margin: 8px 0 2px;
}

:root[data-ui="v2"] .exam-countdown[hidden] {
  display: none;
}

:root[data-ui="v2"] .countdown-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

:root[data-ui="v2"] .countdown-next:hover {
  border-color: var(--accent-border);
}

:root[data-ui="v2"] .countdown-next:hover .countdown-name {
  color: var(--accent);
}

:root[data-ui="v2"] .countdown-next:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

:root[data-ui="v2"] .countdown-mark {
  align-self: start;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  font-size: 17px;
}

:root[data-ui="v2"] .countdown-body {
  display: grid;
  min-width: 0;
}

:root[data-ui="v2"] .countdown-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}

/* Wraps between parts only, so a date never splits. */
:root[data-ui="v2"] .countdown-meta {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

:root[data-ui="v2"] .countdown-meta > span {
  white-space: nowrap;
}

:root[data-ui="v2"] .countdown-when {
  padding: 2px 8px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--bg-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

:root[data-ui="v2"] .countdown-when.is-soon {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

/* The countdown already shows this item, so the list skips it. */
:root[data-ui="v2"] .upcoming-list > .upcoming-item.is-in-countdown {
  display: none;
}

:root[data-ui="v2"] .upcoming-list > .upcoming-item.is-in-countdown:first-child + .upcoming-item {
  border-top: none;
}

/* Only the countdown's item was in the list: no rule left to separate the footer from. */
:root[data-ui="v2"] .upcoming-list:has(> .upcoming-item.is-in-countdown):not(:has(> .upcoming-item:not(.is-in-countdown))) + .upcoming-footer {
  border-top: none;
}