/* ══════════════════════════════════════════════════════════════
   SeatSniper — SCHEDULE SKIN  (cinematic-dark revamp of ScheduleSniper)
   Loads LAST (after schedule.css + app-skin.css). Replaces the old
   light/pastel ranking + calendar with the dark ember system, and
   styles the redesigned ranking header. Uses !important to win over
   schedule.css's light defaults AND its [data-theme="dark"] block.
   ══════════════════════════════════════════════════════════════ */

/* ── Rating tier palette (one source of truth for pills, score, blocks) ── */
.ss-rating-5, .ss-block-rating-5 { --rc: #3ddc97; --rc-bg: rgba(61,220,151,0.15); }
.ss-rating-4, .ss-block-rating-4 { --rc: #86e3b0; --rc-bg: rgba(134,227,176,0.13); }
.ss-rating-3, .ss-block-rating-3 { --rc: #f3c969; --rc-bg: rgba(243,201,105,0.14); }
.ss-rating-2, .ss-block-rating-2 { --rc: #f0a45a; --rc-bg: rgba(240,164,90,0.14); }
.ss-rating-1, .ss-block-rating-1 { --rc: #e0564f; --rc-bg: rgba(224,86,79,0.16); }
.ss-rating-none, .ss-block-rating-na { --rc: #9c918d; --rc-bg: rgba(255,255,255,0.05); }
/* Per-course calendar colors (used when no prof rating is available, e.g. a
   school without RMP data) so the schedule is still clearly colour-coded. */
.ss-cc-0 { --rc: #e0564f; --rc-bg: rgba(224,86,79,0.18); }
.ss-cc-1 { --rc: #5b9bf0; --rc-bg: rgba(91,155,240,0.18); }
.ss-cc-2 { --rc: #b18bf0; --rc-bg: rgba(177,139,240,0.18); }
.ss-cc-3 { --rc: #3ddc97; --rc-bg: rgba(61,220,151,0.16); }
.ss-cc-4 { --rc: #f3c969; --rc-bg: rgba(243,201,105,0.18); }
.ss-cc-5 { --rc: #f48fb1; --rc-bg: rgba(244,143,177,0.18); }
.ss-cc-6 { --rc: #4dd0e1; --rc-bg: rgba(77,208,225,0.18); }
.ss-cc-7 { --rc: #ffa657; --rc-bg: rgba(255,166,87,0.18); }

/* generic rating pills (legend, prof rating, etc.) */
.ss-rating-5, .ss-rating-4, .ss-rating-3, .ss-rating-2, .ss-rating-1, .ss-rating-none,
.ss-prof-rating, .ss-legend-badge {
  background: var(--rc-bg) !important;
  color: var(--rc) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Results summary ── */
.ss-results-header { color: #fff !important; font-family: var(--app-display, 'General Sans', sans-serif) !important; letter-spacing: -0.02em; }
.ss-results-meta { color: var(--text-muted) !important; }
.ss-results-meta::before { content: "◇ "; color: var(--ember, #e0564f); }

/* ════════════ SCHEDULE CARD ════════════ */
.ss-schedule-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ss-schedule-card:hover { transform: translateY(-3px); border-color: rgba(224,86,79,0.3) !important; box-shadow: 0 24px 60px -18px rgba(0,0,0,0.6), 0 0 40px rgba(224,86,79,0.08) !important; }
.ss-card-best { border-color: rgba(224,86,79,0.45) !important; box-shadow: 0 0 0 1px rgba(224,86,79,0.25), 0 28px 70px -22px rgba(224,86,79,0.3) !important; }

/* ── Ranking header (the centerpiece) ── */
.ss-card-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.ss-rank-badge {
  flex-shrink: 0; padding: 7px 13px; border-radius: 999px;
  font-weight: 700; font-size: 12px; letter-spacing: 0.02em; white-space: nowrap;
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border);
  font-family: var(--app-font, 'Satoshi', sans-serif);
}
.ss-card-best .ss-rank-badge {
  background: linear-gradient(120deg, var(--ember, #e0564f), #b8362a); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(224,86,79,0.4);
}
.ss-card-headinfo { flex: 1; min-width: 0; }
.ss-card-title { font-family: var(--app-display, 'General Sans', sans-serif) !important; color: #fff !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: -0.02em; }
.ss-card-meta { color: var(--text-muted) !important; font-size: 12.5px; margin-top: 3px; font-family: var(--app-font, 'Satoshi', sans-serif); }

/* score block — fractional star bar + big number, colored by tier */
.ss-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ss-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; }
.ss-stars-bg { color: rgba(255,255,255,0.16); }
.ss-stars-fg { position: absolute; left: 0; top: 0; width: var(--fill, 0%); overflow: hidden; white-space: nowrap; color: var(--rc, #f3c969); }
.ss-score-val { font-family: var(--app-display, 'General Sans', sans-serif); line-height: 1; margin-top: 2px; }
.ss-score-val b { font-size: 23px; font-weight: 700; color: var(--rc, #fff); }
.ss-score-val span { font-size: 12px; color: var(--text-muted); margin-left: 3px; }
.ss-score-val .ss-score-na { color: var(--text-muted); font-size: 17px; }
.ss-score-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); font-family: var(--app-font, 'Satoshi', sans-serif); }

/* ════════════ CALENDAR ════════════ */
.ss-calendar { border: 1px solid var(--border); border-radius: 12px; overflow: auto; background: rgba(0,0,0,0.18); }
.ss-cal-grid { background: transparent; }
.ss-cal-header { color: #fff !important; background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid var(--border) !important; font-weight: 600; font-family: var(--app-font, 'Satoshi', sans-serif); }
.ss-cal-corner { background: transparent !important; }
.ss-cal-time-label { color: var(--text-muted) !important; background: transparent !important; height: var(--row-height, 52px) !important; font-size: 11px; border-right: 1px solid var(--border) !important; }
.ss-cal-cell {
  height: var(--row-height, 52px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-right: 1px solid rgba(255,255,255,0.045) !important;
  background: transparent !important;
}

/* course blocks — tinted + bordered by professor rating, readable */
.ss-cal-block {
  background: var(--rc-bg, rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 3px solid var(--rc, #9c918d) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 5px 7px !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  overflow: hidden;
}
.ss-cal-block:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--rc, #e0564f) !important; z-index: 5; }
.ss-cal-block:focus-visible { outline: 2px solid var(--rc, #e0564f); outline-offset: 1px; }
.ss-cal-block-course { color: #fff !important; font-weight: 700 !important; font-size: 12px; }
.ss-cal-block-section { color: var(--rc, #cbb6b2) !important; font-size: 11px; font-weight: 600; }
.ss-cal-block-teacher { color: var(--text-muted) !important; font-size: 10.5px; }
.ss-block-tooltip { background: #1b1413 !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important; }
.ss-block-tooltip strong { color: #fff !important; }
.ss-cal-note { color: var(--text-muted) !important; }

/* ════════════ SECTION DETAIL CARDS ════════════ */
.ss-details-divider { color: var(--text-muted) !important; font-size: 10.5px; letter-spacing: 0.1em; }
.ss-section-card { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--border) !important; }
.ss-section-card strong { color: #fff !important; }
.ss-section-pill { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.ss-section-time, .ss-section-sep, .ss-section-card-prof { color: var(--text-muted) !important; }
.ss-day-pill { background: rgba(255,255,255,0.06) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; }

/* ════════════ MOBILE SCHEDULE ════════════ */
.ss-mobile-day-header { color: #fff !important; border-bottom: 1px solid var(--border) !important; }
.ss-mobile-block {
  background: var(--rc-bg, rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 3px solid var(--rc, #9c918d) !important;
}
.ss-mobile-block strong { color: #fff !important; }
.ss-mobile-block-time { color: var(--rc, var(--text-muted)) !important; font-weight: 600; }
.ss-mobile-block-teacher { color: var(--text-muted) !important; }

/* ════════════ ACTION ROW ════════════ */
.ss-card-actions { background: rgba(255,255,255,0.02) !important; border-top: 1px solid var(--border) !important; }
.ss-action-btn { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.ss-action-btn:hover { background: rgba(224,86,79,0.12) !important; border-color: rgba(224,86,79,0.4) !important; color: #fff !important; }
.ss-watch-btn.btn-watching { background: rgba(61,220,151,0.14) !important; border-color: rgba(61,220,151,0.4) !important; color: var(--green, #3ddc97) !important; }

/* ════════════ EMPTY STATE ════════════ */
.ss-no-results { color: var(--text-muted) !important; }
.ss-no-results h3 { color: #fff !important; font-family: var(--app-display, 'General Sans', sans-serif) !important; }

/* legend chips already get tier colors above; legend label muted */
.ss-legend-label { color: var(--text-muted) !important; }

/* ════════════ READABILITY: wider cards + bigger calendar text ════════════ */
.ss-results-summary, .ss-schedule-card { max-width: 1040px !important; }
.ss-calendar { min-width: 0; }
.ss-cal-grid { min-width: 540px; }                /* fewer days now → wide columns */
.ss-cal-header { font-size: 0.82rem !important; color: var(--text) !important; }
.ss-cal-block { font-size: 0.76rem !important; padding: 5px 8px !important; }
.ss-cal-block-course { font-size: 12.5px !important; line-height: 1.25; }
.ss-cal-block-section { font-size: 11.5px !important; }
.ss-cal-block-teacher { font-size: 11px !important; }

/* Mobile: the "bigger calendar text" rules above are desktop-only in spirit but use
   !important and load last, so they pin 12.5px on phones too and the course code
   truncates to "CO...". Re-shrink here (later + !important) so the full code fits the
   narrow columns. Pairs with schedule.css's --time-col:38px + minmax(0,1fr) grid. */
@media (max-width: 640px) {
  .ss-cal-grid { min-width: 0 !important; }
  .ss-cal-header { font-size: 0.6rem !important; padding: 6px 1px !important; }
  .ss-cal-block { font-size: 0.56rem !important; padding: 2px 2px 2px 4px !important; }
  .ss-cal-block-course { font-size: 9px !important; line-height: 1.2; letter-spacing: -0.2px; }
  .ss-cal-block-section { font-size: 8.5px !important; }
  .ss-cal-block-teacher { display: none !important; }
}

/* ════════════ TIME SLIDER FIX ════════════ */
/* visible bound values (were var(--gray-900) = invisible on dark) */
.ss-time-bound { color: var(--text-muted) !important; }
.ss-time-bound strong { color: #fff !important; }
.ss-time-bound-label { color: var(--text-muted) !important; }
.ss-time-range-track { background: rgba(255,255,255,0.12) !important; }
.ss-time-range-fill { background: linear-gradient(90deg, #b8362a, var(--ember, #e0564f)) !important; }
/* box-sizing:border-box → thumb is EXACTLY 20px incl. its 3px ring, so its travel
   is [10px, W-10px] and lines up with the JS fill calc(frac*(100%-20px)+10px). */
.ss-range-input::-webkit-slider-thumb { box-sizing: border-box !important; width: 20px !important; height: 20px !important; background: var(--ember, #e0564f) !important; border: 3px solid #fff !important; }
.ss-range-input::-moz-range-thumb { box-sizing: border-box !important; width: 20px !important; height: 20px !important; background: var(--ember, #e0564f) !important; border: 3px solid #fff !important; }
.ss-time-ticks { padding: 0 6px !important; margin-top: 2px; }
.ss-time-ticks span { color: var(--text-muted) !important; }

/* ── noUiSlider, themed ember-on-dark (replaces the broken native range) ── */
#ss-time-slider { height: 6px; margin: 18px 6px 12px; border: none !important; box-shadow: none !important; background: rgba(255,255,255,0.12) !important; border-radius: 99px; }
#ss-time-slider .noUi-connects { border-radius: 99px; }
#ss-time-slider .noUi-connect { background: linear-gradient(90deg, #b8362a, var(--ember, #e0564f)) !important; }
#ss-time-slider .noUi-handle {
  width: 20px; height: 20px; right: -10px !important; top: -7px !important;
  border-radius: 50%; background: var(--ember, #e0564f); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: grab;
}
#ss-time-slider .noUi-handle::before, #ss-time-slider .noUi-handle::after { display: none; }
#ss-time-slider .noUi-handle:focus { outline: none; }
#ss-time-slider .noUi-handle:hover, #ss-time-slider .noUi-active { box-shadow: 0 0 0 6px rgba(224,86,79,0.2), 0 2px 8px rgba(0,0,0,0.5); }
#ss-time-slider .noUi-touch-area { width: 220%; height: 220%; left: -60%; top: -60%; }

/* ── Give the schedule results real width so the calendar is readable ── */
#page-schedulesniper .container { max-width: 1140px !important; }
.ss-results-summary, .ss-schedule-card { max-width: 1100px !important; }

/* ── Desktop: lay schedules out TWO side-by-side (was one full-width at a time).
   auto-fit + min(440px,100%) → 2 columns when wide, gracefully 1 when narrow. ── */
.ss-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 18px auto 0;
  align-items: start;
}
.ss-results-grid .ss-schedule-card { max-width: none !important; width: 100%; margin: 0 !important; }
.ss-results-grid .ss-cal-grid { min-width: 0 !important; }   /* fit the narrower column */

/* ── Selected-course chips: code was var(--gray-900) = dark slate ("blue text") ── */
.ss-course-chip { background: var(--card-bg) !important; border: 1px solid var(--border) !important; }
.ss-course-chip .ss-chip-name { color: var(--ember, #e0564f) !important; font-weight: 700 !important; }
.ss-course-chip .ss-chip-title { color: var(--text-muted) !important; }

/* ── per-prof RMP rating + difficulty stars (under each schedule) ── */
/* grid so the rating/difficulty columns line up across rows no matter the name length */
.ss-section-card-prof { display: grid !important; grid-template-columns: minmax(140px, 230px) max-content max-content; align-items: center; gap: 20px; color: var(--text-muted) !important; }
.ss-prof-id { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ss-section-card-prof .ss-prof-name { color: #fff !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .ss-section-card-prof { grid-template-columns: 1fr; gap: 8px; } }
/* In the desktop 2-up grid (≥2 schedules => ~535px columns) the 3-col prof row
   overflows. Stack it: name on its own row, the two RMP metrics side-by-side
   below. Gated on .ss-grid-2up so the full-width single-schedule keeps its inline
   3-column layout. */
.ss-results-grid.ss-grid-2up .ss-section-card-prof { grid-template-columns: 1fr 1fr !important; gap: 8px 16px !important; }
.ss-results-grid.ss-grid-2up .ss-section-card-prof .ss-prof-id { grid-column: 1 / -1 !important; }
.ss-pm { display: inline-flex; align-items: center; gap: 6px; }
.ss-pm-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted) !important; }
.ss-pm .ss-stars-sm { font-size: 12px; letter-spacing: 1px; }
.ss-pm-val { font-family: var(--app-font, 'Satoshi', sans-serif); font-size: 12.5px; font-weight: 700; color: var(--text) !important; }
.ss-pm-rating .ss-stars-fg { color: #f3c969 !important; }                    /* gold = quality */
.ss-pm-difficulty .ss-stars-fg { color: var(--ember, #e0564f) !important; } /* ember = difficulty */
/* All meta + actions (seat pill, Watch, RateMyProf) flow inline-left and wrap
   naturally — no margin-left:auto, which used to orphan the Watch button onto a
   right-floating second line with an awkward gap. */
.ss-section-card-main { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; }
.ss-rmp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ember, #e0564f) !important; background: rgba(224,86,79,0.1); border: 1px solid rgba(224,86,79,0.32); white-space: nowrap; transition: background .15s, transform .12s; }
.ss-rmp-btn:hover { background: rgba(224,86,79,0.2); transform: translateY(-1px); }

/* Per-section live seat status pill + subtle one-tap watch button */
.ss-seat-pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ss-seat-pill.ss-seat-open { color: #3ddc97; background: rgba(61,220,151,0.12); border: 1px solid rgba(61,220,151,0.3); }
.ss-seat-pill.ss-seat-full { color: var(--ember, #e0564f); background: rgba(224,86,79,0.12); border: 1px solid rgba(224,86,79,0.32); }
.ss-sec-watch {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  font-family: var(--app-font, 'Satoshi', sans-serif);
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.ss-sec-watch:hover { color: var(--ember, #e0564f); background: rgba(224,86,79,0.12); border-color: rgba(224,86,79,0.32); transform: translateY(-1px); }
.ss-sec-watch.btn-watching { color: #3ddc97 !important; background: rgba(61,220,151,0.12) !important; border-color: rgba(61,220,151,0.3) !important; cursor: default; }

/* ── Clear-all toolbar above the selected courses ── */
.ss-courses-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.ss-courses-toolbar-count { font-size: 11px; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.07em; font-family: var(--app-font, 'Satoshi', sans-serif); }
.ss-clear-all-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ember, #e0564f); background: transparent; border: 1px solid var(--border); cursor: pointer; transition: background .15s, border-color .15s; }
.ss-clear-all-btn:hover { background: rgba(224,86,79,0.12); border-color: rgba(224,86,79,0.4); }

@media (prefers-reduced-motion: reduce) {
  .ss-schedule-card:hover { transform: none; }
}