/* Material Design 3 foundation adapted to NUD orange and gray identity. */
:root {
  color-scheme: light;
  font-family: Sarabun, sans-serif;
  font-synthesis: none;
  color: #1d1b19;
  background: #f8f7f5;

  --md-sys-color-primary: #7b4b00;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffdcbd;
  --md-sys-color-on-primary-container: #2a1700;
  --md-sys-color-secondary: #55595b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e5e5e3;
  --md-sys-color-on-secondary-container: #1d1f20;
  --md-sys-color-tertiary: #735b00;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffdf79;
  --md-sys-color-on-tertiary-container: #241a00;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #f8f7f5;
  --md-sys-color-on-surface: #1d1b19;
  --md-sys-color-on-surface-variant: #494541;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f1ee;
  --md-sys-color-surface-container: #eeece9;
  --md-sys-color-surface-container-high: #e8e6e3;
  --md-sys-color-surface-container-highest: #e2e0dd;
  --md-sys-color-surface-variant: #e8e2da;
  --md-sys-color-outline: #79746e;
  --md-sys-color-outline-variant: #cbc6c0;
  --md-sys-color-school-orange: #f7931e;
  --md-sys-color-school-gray: #888888;
  --md-sys-state-hover: rgb(29 27 25 / 8%);
  --md-sys-state-focus: rgb(29 27 25 / 12%);
  --md-sys-state-pressed: rgb(29 27 25 / 12%);
  --md-sys-state-disabled: rgb(29 27 25 / 12%);
  --md-sys-elevation-level1: 0 1px 2px rgb(29 27 25 / 12%), 0 1px 3px 1px rgb(29 27 25 / 6%);
  --md-sys-elevation-level2: 0 1px 2px rgb(29 27 25 / 18%), 0 2px 6px 2px rgb(29 27 25 / 8%);
  --md-sys-elevation-level3: 0 4px 8px 3px rgb(29 27 25 / 12%), 0 1px 3px rgb(29 27 25 / 18%);
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 220ms;

  /* Existing product tokens retained as compatibility aliases. */
  --ink: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --line: var(--md-sys-color-outline-variant);
  --canvas: var(--md-sys-color-surface);
  --surface: var(--md-sys-color-surface-container-lowest);
  --orange: var(--md-sys-color-school-orange);
  --orange-dark: var(--md-sys-color-primary);
  --orange-soft: var(--md-sys-color-primary-container);
  --gray: var(--md-sys-color-school-gray);
  --gray-soft: var(--md-sys-color-secondary-container);
  --purple: var(--md-sys-color-primary);
  --soft-purple: var(--md-sys-color-primary-container);
  --shadow: var(--md-sys-elevation-level1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: Sarabun, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
:where(button, a, input, select, textarea, summary) { transition: background-color var(--md-sys-motion-duration-short) ease, border-color var(--md-sys-motion-duration-short) ease, color var(--md-sys-motion-duration-short) ease, box-shadow var(--md-sys-motion-duration-short) ease; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .58; }

/* Application shell and navigation drawer */
.sidebar {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: none;
}
.brand { color: var(--md-sys-color-on-surface); }
.brand-sub, .nav-label, .nav-heading { color: var(--md-sys-color-on-surface-variant); }
.nav-item, .nav-link { color: var(--md-sys-color-on-surface-variant); }
.nav-item, .nav-link, .nav-group-title { border-radius: var(--md-sys-shape-corner-large); }
.nav-item:hover, .nav-link:hover, .nav-group-title:hover, .icon-button:hover { background: var(--md-sys-state-hover); }
.nav-item.active, .nav-link.active {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}
.nav-item.active .material-symbols-rounded, .nav-link.active .material-symbols-rounded { color: var(--md-sys-color-primary); }
.help-card { background: var(--md-sys-color-secondary-container); border-radius: var(--md-sys-shape-corner-large); box-shadow: none; }
.help-card > .material-symbols-rounded, .help-card a { color: var(--md-sys-color-on-secondary-container); }
.profile, .sidebar-footer { border-color: var(--md-sys-color-outline-variant); }
.topbar { background: var(--md-sys-color-surface-container-lowest); border-color: var(--md-sys-color-outline-variant); }
.breadcrumbs strong, .breadcrumb strong, .schedule-heading h2, .courses-title h2 { color: var(--md-sys-color-on-surface); }
.breadcrumbs, .breadcrumb, .eyebrow, .welcome p, .schedule-heading p, .courses-title p { color: var(--md-sys-color-on-surface-variant); }
.nav-heading { font-size: 12px; }
.nav-group-title, .nav-link { font-size: 13px; }
.sidebar-footer, .docs-link, .user-chip, .breadcrumb { font-size: 12px; }
.page-heading h1, .welcome h1 { font-size: clamp(24px, 2vw, 30px); line-height: 1.3; letter-spacing: 0; }
.page-heading p { font-size: 14px; line-height: 1.55; }
.panel-heading h2 { font-size: 18px; line-height: 1.4; }
.panel-heading p { font-size: 13px; line-height: 1.5; }
.eyebrow { font-size: 12px; letter-spacing: 0; }

/* Buttons and interactive controls */
.button, .today-button, .public-login {
  min-height: 40px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
  box-shadow: none;
  text-decoration: none;
}
.button:hover, .today-button:hover, .public-login:hover { background: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.button.primary {
  background: var(--md-sys-color-school-orange);
  border-color: var(--md-sys-color-school-orange);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 600;
}
.button.primary:hover { background: #e98612; border-color: #e98612; color: var(--md-sys-color-on-primary-container); }
.primary-button {
  min-height: 44px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level1);
}
.primary-button:hover { background: #673f00; }
.icon-button { color: var(--md-sys-color-on-surface-variant); }
.font-size-controls { background: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); }
.font-size-button { color: var(--md-sys-color-on-surface-variant); }
.font-size-button:hover { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.button, .today-button, .public-login { font-size: 13px; font-weight: 600; }
.primary-button { font-size: 14px; font-weight: 600; }

/* Surfaces, cards and data dense areas */
.card, .stat-card, .course-item, .schedule-card, .feature-card, .login-card {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: none;
}
.panel { background: var(--md-sys-color-surface-container-lowest); }
.stat-icon.lavender, .stat-icon.peach, .dialog-icon, .preview-calendar { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.stat-icon.mint, .green-feature { background: #dceee3; color: #183a28; }
.stat-card div:nth-child(2) > span, .stat-note, .stat-card strong small, .course-time strong { color: var(--md-sys-color-on-surface-variant); }
.table-wrap { max-width: 100%; border-color: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-lowest); }
.data-table { color: var(--md-sys-color-on-surface); }
.data-table { font-size: 12px; line-height: 1.5; }
.data-table th { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); border-color: var(--md-sys-color-outline-variant); font-size: 11px; font-weight: 600; }
.data-table td { color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-surface-container); }
.data-table tbody tr:hover { background: #fff8f0; }
.data-table tfoot { background: var(--md-sys-color-primary-container); }
.data-table tfoot th, .data-table tfoot td { color: var(--md-sys-color-on-primary-container); border-color: var(--md-sys-color-outline-variant); }
.selector-row, .plan-item-form { background: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); }

/* Inputs, select fields and validation */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background-color: var(--md-sys-color-surface-container-lowest);
}
input::placeholder, textarea::placeholder { color: #68635e; opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 40px; font-size: 14px; }
input:focus, select:focus, textarea:focus, .form-input:focus, .search-box input:focus {
  border-color: var(--md-sys-color-primary);
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
  box-shadow: none;
}
/* Login fields use the surrounding container as their single focus surface. */
.login-input-wrap input {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.login-input-wrap input:focus {
  border-color: transparent;
  outline: 0;
  outline-offset: 0;
  box-shadow: none;
}
.login-input-wrap input:-webkit-autofill,
.login-input-wrap input:-webkit-autofill:hover,
.login-input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--md-sys-color-on-surface);
  -webkit-box-shadow: 0 0 0 1000px var(--md-sys-color-surface-container-lowest) inset;
  caret-color: var(--md-sys-color-on-surface);
}
[aria-invalid="true"] { border-color: var(--md-sys-color-error) !important; }
.form-label, .selector-field label { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.form-hint, .page-footnote { color: #5e5a55; font-size: 11px; line-height: 1.5; }

/* Status, feedback, dialogs and overlays */
.status-pill { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.status-pill.good { background: #dceee3; color: #155b35; }
.status-pill.warn { background: #ffead2; color: #6b3500; }
.status-pill.bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.notice { border-radius: var(--md-sys-shape-corner-large); }
.notice.info { background: #edf3f6; border-color: #c9d9e1; color: #344b57; }
.notice.info .material-symbols-rounded { color: #405f6f; }
.empty-state, .loading-state, .error-state { color: var(--md-sys-color-on-surface-variant); }
.empty-state strong, .loading-state strong, .error-state strong { color: var(--md-sys-color-on-surface); }
.notice { font-size: 13px; line-height: 1.6; }
.status-pill { font-size: 11px; }
.empty-state strong, .loading-state strong, .error-state strong { font-size: 16px; }
.empty-state p, .loading-state p, .error-state p { font-size: 13px; line-height: 1.6; }
.dialog-card h2 { font-size: 22px; line-height: 1.35; }
.dialog-card > p { font-size: 13px; line-height: 1.6; }
.toast { font-size: 13px; line-height: 1.5; }
.login-form label { font-size: 12px; }
.login-input-wrap input { font-size: 14px; }
.login-card-description { font-size: 13px; }
.login-help { font-size: 11px; }
.hero-description { font-size: 15px; }
.feature-card p { font-size: 13px; }
.feature-card h3 { font-size: 17px; }
.public-links a, .about-link, .text-link { font-size: 13px; }
.toast { border-radius: var(--md-sys-shape-corner-small); box-shadow: var(--md-sys-elevation-level3); }
.toast.error, .login-message { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
dialog, .user-dialog {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level3);
}
dialog::backdrop, .user-dialog::backdrop { background: rgb(29 27 25 / 42%); backdrop-filter: blur(2px); }
.dialog-card { color: var(--md-sys-color-on-surface); }
.dialog-card > p { color: var(--md-sys-color-on-surface-variant); }

/* Timetable surfaces retain their existing category colors and meaning. */
.schedule-grid { border-color: var(--md-sys-color-outline-variant); }
.day-head { color: var(--md-sys-color-on-surface-variant); border-color: var(--md-sys-color-outline-variant); }
.day-head strong { color: var(--md-sys-color-on-surface); }
.day-head.today strong { color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); }
.time-col, .day-col { border-color: var(--md-sys-color-surface-container); }
.day-col { border-left-color: var(--md-sys-color-outline-variant); }
.time-label, .schedule-footer { color: var(--md-sys-color-on-surface-variant); }
.course-purple, .orange-class { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-left-color: var(--md-sys-color-school-orange); }
.course-mint, .green-class { background: #dceee3; color: #183a28; border-left-color: #43815a; }
.course-peach { background: #f1e1d2; color: #38291c; border-left-color: var(--md-sys-color-school-gray); }
.course-blue, .gray-class { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-left-color: var(--md-sys-color-school-gray); }
.class-block { border-radius: var(--md-sys-shape-corner-small); }
.class-block:hover { filter: brightness(.97); }
.courses-title a, .feature-card a, .text-link { color: var(--md-sys-color-primary); }
.live-dot { background: var(--md-sys-color-school-orange); }

@media (max-width: 760px) {
  .topbar { gap: 8px; padding-inline: 14px; }
  .breadcrumb { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11px; }
  .breadcrumb > * { flex: 0 0 auto; white-space: nowrap; }
  .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { flex: 0 0 auto; min-width: 0; gap: 6px; }
  .page-shell, .content { padding-inline: clamp(14px, 4vw, 24px); }
  .page-heading { flex-wrap: wrap; }
  .heading-actions { flex-wrap: wrap; }
  .selector-row { align-items: stretch; }
  .selector-field { min-width: min(100%, 190px); }
  .data-toolbar { flex-wrap: wrap; }
  .table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
  .user-dialog, .details-dialog, .plan-item-dialog, .version-classroom-dialog { max-width: calc(100vw - 24px); max-height: min(92vh, 900px); overflow: auto; }
  .dialog-card { padding: 22px 18px; }
  .dialog-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .page-shell, .content { padding-inline: 12px; }
  .panel { padding: 16px 12px; }
  .page-heading h1, .welcome h1 { overflow-wrap: anywhere; }
  .heading-actions .button { flex: 1 1 auto; justify-content: center; }
  .selector-row { display: grid; grid-template-columns: 1fr; }
  .selector-field, .selector-field select, .filter-select { width: 100%; max-width: none; }
  .plan-item-fields, .details-grid { grid-template-columns: 1fr; }
  .public-hero { min-height: unset; }
  .login-layout { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}