*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:            #ffffff;
  --color-surface:       #f5f5f3;
  --color-border:        rgba(0,0,0,0.12);
  --color-border-strong: rgba(0,0,0,0.28);
  --color-text:          #1a1a18;
  --color-text-muted:    #6b6b67;
  --color-text-hint:     #9b9b97;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Distinct named colors — no amber bleed between orange and yellow */
  --orange-bg: #FDE8D0; --orange-text: #7A3200; --orange-border: #E8711A;
  --yellow-bg: #FDFAD0; --yellow-text: #5C4D00; --yellow-border: #C9A800;
  --green-bg:  #EAF3DE; --green-text:  #3B6D11; --green-border:  #639922;
  --blue-bg:   #E6F1FB; --blue-text:   #185FA5; --blue-border:   #378ADD;
  --red-bg:    #FCEBEB; --red-text:    #A32D2D; --red-border:    #E24B4A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #1e1e1c;
    --color-surface:       #2a2a28;
    --color-border:        rgba(255,255,255,0.12);
    --color-border-strong: rgba(255,255,255,0.28);
    --color-text:          #f0efe8;
    --color-text-muted:    #a8a8a4;
    --color-text-hint:     #6b6b67;
    --orange-bg: #4a1e00; --orange-text: #FFB07A; --orange-border: #E8711A;
    --yellow-bg: #3a3300; --yellow-text: #FFE566; --yellow-border: #C9A800;
    --green-bg:  #1a2d0a; --green-text:  #97C459; --green-border:  #3B6D11;
    --blue-bg:   #0a1e35; --blue-text:   #85B7EB; --blue-border:   #185FA5;
    --red-bg:    #2d0a0a; --red-text:    #F09595; --red-border:    #A32D2D;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

.app { max-width: 480px; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* Hero */
.hero { text-align: center; padding: 1.5rem 0 1.25rem; }
.hero h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.hero p  { font-size: 14px; color: var(--color-text-muted); }

/* Search */
.search-wrap { position: relative; margin-bottom: 1rem; }

input[type="text"] {
  width: 100%; padding: 12px 14px;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: 16px; font-family: inherit;
  background: var(--color-bg); color: var(--color-text);
  outline: none; transition: border-color 0.15s;
}
input[type="text"]:focus { border-color: var(--blue-border); }

/* Search results dropdown */
#search-results {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 4px;
}
#search-results:empty { display: none; }

.result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 0.5px solid var(--color-border);
  transition: background 0.1s;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: var(--color-surface); }

.result-badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
  border-width: 2px; border-style: solid;
}
.result-name  { font-size: 15px; font-weight: 500; }
.result-sub   { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }

.empty-msg {
  font-size: 14px; color: var(--color-text-muted);
  text-align: center; padding: 1rem;
}

/* Schedule view */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; font-size: 13px;
  color: var(--color-text-muted); cursor: pointer;
  padding: 0; margin-bottom: 1rem; font-family: inherit;
}
.back-btn:hover { color: var(--color-text); }

/* Student identity badge */
.student-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--color-border);
  background: var(--color-surface);
}
.badge-circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
  border-width: 2.5px; border-style: solid;
}
.badge-name  { font-size: 16px; font-weight: 600; }
.badge-group { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

/* Day tabs */
.day-tabs {
  display: flex; gap: 6px; margin-bottom: 1rem;
  overflow-x: auto; padding-bottom: 2px;
}
.day-tab {
  padding: 7px 14px; border-radius: 20px; white-space: nowrap;
  border: 0.5px solid var(--color-border); background: var(--color-bg);
  font-size: 13px; font-weight: 500; color: var(--color-text-muted);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  flex-shrink: 0;
}
.day-tab.active {
  background: var(--color-text); color: var(--color-bg);
  border-color: var(--color-text);
}
.day-tab.today::after {
  content: ' ·'; color: var(--green-border);
}

/* Schedule blocks */
.card {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 1.25rem;
}
.sched-block { padding: 10px 0; border-bottom: 0.5px solid var(--color-border); }
.sched-block:last-child { border-bottom: none; }
.sched-time     { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.sched-activity { font-size: 14px; font-weight: 500; }
.sched-room     { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Pending notice */
.notice-card {
  border-radius: var(--radius-md); padding: 10px 14px;
  margin-bottom: 1rem; font-size: 13px; line-height: 1.5;
  background: var(--yellow-bg); color: var(--yellow-text);
  border: 1px solid var(--yellow-border);
}

/* ─── Top-level tabs (Student / Teacher) ─────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4px; margin-bottom: 1.25rem;
}
.tab {
  flex: 1; padding: 8px 4px; border: none; background: transparent;
  font-size: 14px; font-weight: 400; color: var(--color-text-muted);
  border-radius: 6px; cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.tab.active {
  background: var(--color-bg); color: var(--color-text); font-weight: 500;
  border: 0.5px solid var(--color-border);
}

.section { display: none; }
.section.active { display: block; }

/* ─── Teacher view ───────────────────────────────────────────────────────── */
.teacher-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--color-border);
  background: var(--color-surface);
}
.teacher-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; flex-shrink: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text);
}
.teacher-name  { font-size: 16px; font-weight: 600; }
.teacher-room  { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

/* Teacher rotation block */
.rot-block {
  margin-bottom: 1rem;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rot-header {
  padding: 10px 14px;
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
}
.rot-time     { font-size: 11px; color: var(--color-text-hint); text-transform: uppercase; letter-spacing: .06em; }
.rot-activity { font-size: 14px; font-weight: 500; margin-top: 2px; }
.rot-location { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.rot-location.traveling { color: var(--orange-text); font-style: italic; }

.student-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--color-border);
}
.student-chip:last-child { border-bottom: none; }
.chip-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border-width: 1.5px; border-style: solid;
}
.chip-name { font-size: 14px; font-weight: 500; }
.chip-group { font-size: 12px; color: var(--color-text-muted); }

.no-students {
  padding: 12px 14px;
  font-size: 13px; color: var(--color-text-muted); font-style: italic;
}

.nlc-travel-card {
  padding: 14px;
  background: var(--orange-bg);
  color: var(--orange-text);
  border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.6;
  margin-bottom: 1rem;
  border: 1px solid var(--orange-border);
}

/* ─── Collapsible roster toggle ─────────────────────────────────────────── */
.roster-toggle {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: 12px; margin-top: 2px;
}
.roster-count {
  font-size: 12px; color: var(--color-text-muted);
}
.toggle-arrow {
  font-size: 12px; color: var(--color-text-hint);
}
.rot-roster {
  border-top: 0.5px solid var(--color-border);
}

/* ─── Group pill on teacher rotation header ─────────────────────────────── */
.group-pill {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px;
  margin-top: 4px;
}

.sched-room.traveling { color: var(--orange-text); font-style: italic; }
.roster-toggle-row { font-size: 12px; color: var(--color-text-muted); }