/* Central Uniar theme tokens. Light remains the default; only data-theme="dark" changes colors. */
:root {
  --theme-page: #f5f8ff;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f6f9ff;
  --theme-border: #e4ebf7;
  --theme-text: #13285a;
  --theme-muted: #70809b;
  --theme-primary: #2f76f6;
  --theme-input: #fbfcff;
  --theme-overlay: rgba(24, 39, 71, .34);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #081222;
  --theme-surface: #12223d;
  --theme-surface-soft: #172a49;
  --theme-border: #294a78;
  --theme-text: #f4f8ff;
  --theme-muted: #b8c8e2;
  --theme-primary: #3b7cff;
  --theme-input: #0e1d35;
  --theme-overlay: rgba(2, 8, 20, .76);
  background: var(--theme-page);
}

html[data-theme="dark"] body {
  color: var(--theme-text);
  background: var(--theme-page) !important;
}

html[data-theme="dark"] :is(.phone-shell, .home-screen, .more-page, .news-shell, .not-found, .classmates__shell, .ai-assistant__shell, .support__shell, .notifications__shell, .about-page__shell, .student-profile__shell, .user-panel__shell) {
  color: var(--theme-text);
  background: var(--theme-page) !important;
}

html[data-theme="dark"] :is(.app-header, .bottom-nav, .more-page__nav, .classmates__header, .ai-assistant__header, .about-page__header, .student-profile__header, .user-panel__content, .user-panel__main, .user-panel__aside) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: #101f38 !important;
}

/* Page titles sit directly on the dark canvas; only their action controls are cards. */
html[data-theme="dark"] :is(.more-page__header, .news-topbar) {
  color: var(--theme-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .bottom-nav a,
html[data-theme="dark"] .bottom-nav a svg,
html[data-theme="dark"] .bottom-nav a span {
  color: #f1f6ff !important;
  stroke: currentColor;
}

html[data-theme="dark"] .bottom-nav a.active,
html[data-theme="dark"] .bottom-nav a.active svg,
html[data-theme="dark"] .bottom-nav a.active span {
  color: #ffffff !important;
}

/* Keep the mobile header as a rounded dark panel instead of a sharp rectangle. */
html[data-theme="dark"] .app-header {
  border: 0 !important;
  border-radius: 0 0 24px 24px;
  margin-bottom: 14px;
  padding-right: 14px;
  padding-left: 14px;
}

html[data-theme="dark"] body.is-authenticated .mobile-header-profile {
  border: 1px solid #36598c !important;
  background: #172a49 !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .mobile-header-profile__copy b {
  color: #ffffff !important;
}

html[data-theme="dark"] .mobile-header-profile__avatar {
  box-shadow: 0 0 0 2px #36598c, 0 5px 12px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] .home-quick-label {
  color: #ffffff !important;
}

html[data-theme="dark"] :is(.hero-card, .feature-card, .home-today, .home-suggestion, .mobile-about-link, .trust-card, .modal, .otp-modal, .pwa-install__card, .user-panel__shell, .profile-stats article, .user-panel__security, .about-side-card, .about-contact-card, .about-intro-card, .about-purpose-card, .classmates__shell, .cm-choice-list button, .cm-summary, .cm-selection-grid button, .cm-filter-row button, .cm-student-list article, .cm-profile, .cm-request-list article, .cm-bubbles p, .cm-composer, .ai-assistant__tools, .ai-assistant__tool-grid button, .ai-assistant__pro, .support__card, .notifications__card, .student-profile__card, .more-page__hero, .more-feature, .more-page__invite, .news-card, .news-article, .not-found__card) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .home-suggestions {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .about-page :is(.about-side-card p, .about-side-card li, .about-contact-card small, .about-purpose-card p, .about-stats small) {
  color: #e0ebff !important;
}

/* The mission stats deliberately remain white cards in dark mode; their
   labels must therefore keep a dark ink colour instead of inheriting the
   page's light muted text. */
html[data-theme="dark"] .about-stats > div {
  border-color: #e3eaf5 !important;
  background: #f9fbff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .about-stats small {
  color: #17316b !important;
}

html[data-theme="dark"] .about-contact-card button {
  color: #ffffff !important;
  border-color: #36598c !important;
}

/* News article details use their own markup, so give the whole reader a complete dark surface. */
html[data-theme="dark"] body.article-page,
html[data-theme="dark"] .article-screen {
  background: var(--theme-page) !important;
}

html[data-theme="dark"] :is(.article, .article-facts, .article-author, .article-viewer, .article-round-button, .article-icon-button) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
}

html[data-theme="dark"] :is(.article__head h1, .article__content, .article__content h2, .article__content h3, .article-author b, .article-viewer b, .article-facts b) {
  color: #ffffff !important;
}

html[data-theme="dark"] :is(.article__lead, .article__meta, .article__content p, .article__content li, .article__foot, .article-author small, .article-viewer small, .article-facts small) {
  color: #d8e5fa !important;
}

html[data-theme="dark"] .article__content blockquote {
  color: #dce9ff !important;
  background: #172a49 !important;
}

html[data-theme="dark"] .anon-security { color: #d8e5fa !important; background: #172a49 !important; }

/* Classmates: cover both the finder and direct-message views. */
html[data-theme="dark"] :is(.classmates, .classmates.is-open) { background: var(--theme-overlay) !important; }
html[data-theme="dark"] :is(.classmates__shell, .classmates__content, .cm-chat-screen, .cm-chat-screen.is-active, .cm-chat-head, .cm-bubbles, .cm-composer) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-page) !important;
}
html[data-theme="dark"] :is(.cm-screen h1, .cm-screen h2, .cm-student-list b, .cm-chat-head b, .cm-request-list b, .cm-profile-head h1) { color: #ffffff !important; }
html[data-theme="dark"] :is(.cm-lead, .cm-student-list small, .cm-chat-head small, .cm-request-list small, .cm-request-list em) { color: #d8e5fa !important; }
html[data-theme="dark"] :is(.cm-search, .cm-choice-list button, .cm-selection-grid button, .cm-filter-row button, .cm-summary, .cm-student-list article, .cm-request-list article, .cm-bubbles p:not(.mine), .cm-composer input, .cm-composer button:not(:last-child), .cm-chat-head > [data-cm="results"]) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
}

/* AI is a full screen in dark mode, never a transparent overlay over Home. */
html[data-theme="dark"] .ai-assistant { background: var(--theme-page) !important; }
html[data-theme="dark"] .ai-assistant__shell {
  background: var(--theme-page) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .ai-assistant__content,
html[data-theme="dark"] .ai-assistant__hero {
  color: var(--theme-text) !important;
  background: var(--theme-page) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .ai-assistant__tools {
  padding: 18px;
  border: 1px solid var(--theme-border) !important;
  border-radius: 22px;
  background: #101f38 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2) !important;
}
html[data-theme="dark"] :is(.ai-assistant h1, .ai-assistant__tools h2, .ai-assistant__tool-grid b) { color: #ffffff !important; }
html[data-theme="dark"] :is(.ai-assistant__hero > p, .ai-assistant__quota, .ai-assistant__tool-grid small) { color: #d8e5fa !important; }
html[data-theme="dark"] :is(.ai-assistant__ask, .ai-assistant__service-notice, .ai-assistant__message--assistant, .ai-assistant__message--user) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
}
html[data-theme="dark"] .ai-assistant__ask textarea,
html[data-theme="dark"] .ai-assistant__message p { color: #ffffff !important; }

/* Notifications keep separate class names from the other overlays. */
html[data-theme="dark"] .notifications-center { background: var(--theme-overlay) !important; }
html[data-theme="dark"] :is(.notifications-shell, .notifications-content, .notifications-header) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-page) !important;
}
html[data-theme="dark"] :is(.notifications-hero h1, .notifications-list h2, .notification-card b, .notification-card--system h3, .notifications-empty b) { color: #ffffff !important; }
html[data-theme="dark"] :is(.notifications-hero p, .notification-card p, .notification-card small, .notifications-empty p) { color: #d8e5fa !important; }
html[data-theme="dark"] :is(.notification-card, .notification-card--support, .notification-card--support-reply, .notification-card [data-notification="reject"], .notifications-empty span) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
}
html[data-theme="dark"] .notifications-header button[data-notification="close"] {
  color: #dbe8ff !important;
  border-color: var(--theme-border) !important;
  background: #172a49 !important;
}

/* Support center and ticket conversation. */
html[data-theme="dark"] .support-center { background: var(--theme-overlay) !important; }
html[data-theme="dark"] :is(.support-shell, .support-header, .support-content) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-page) !important;
}
html[data-theme="dark"] :is(.support-screen h1, .support-actions b, .support-recent article b, .support-online b, .support-ticket-list b) { color: #ffffff !important; }
html[data-theme="dark"] :is(.support-screen > p, .support-actions small, .support-recent article, .support-recent article small, .support-ticket-list small, .support-thread small) { color: #d8e5fa !important; }
html[data-theme="dark"] :is(.support-actions button, .support-form input, .support-form select, .support-form textarea, .support-priority button, .support-upload, .support-thread article:not(.mine), .support-composer input, .support-composer button:not(:last-child), .support-faq button, .support-online, .support-ticket-list button) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
}
html[data-theme="dark"] :is(.support-form label, .support-form legend, .support-thread article:not(.mine) p, .support-faq button small) { color: #e4edff !important; }
html[data-theme="dark"] .support-header button[data-support="back"] {
  color: #dbe8ff !important;
  border-color: var(--theme-border) !important;
  background: #172a49 !important;
}

/* Quick-access SVGs are transparent; remove the light square supplied by the shared image rule. */
html[data-theme="dark"] #features .feature-card > img {
  background: transparent !important;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, b, strong, .brand, .cm-brand, .news-brand, .more-page__header h1, .home-section-heading h2, .profile-welcome h1, .user-panel__form h2) {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] :is(p, small, .cm-lead, .profile-welcome p, .profile-welcome small, .user-panel__aside p, .feature-card small, .home-today__copy small, .more-feature b, .news-card p, .not-found__copy) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] :is(input, select, textarea, .cm-search, .cm-composer input, .ai-assistant__ask textarea, .user-panel__form input, .user-panel__form select) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-input) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder { color: #91a5c5 !important; }
html[data-theme="dark"] :is(.modal-backdrop, .user-panel, .classmates, .ai-assistant, .support, .notifications, .about-page, .student-profile) { background: var(--theme-overlay) !important; }

html[data-theme="dark"] :is(.home-today__item, .cm-chat-head, .cm-composer, .cm-student-list article, .more-feature, .news-card, .user-panel__menu button) {
  border-color: var(--theme-border) !important;
  background-color: transparent;
}

/* Classmate results are a compact list on mobile.  Individual dark cards keep
   the rows distinct without the bright, full-width divider that looked harsh. */
html[data-theme="dark"] .cm-student-list {
  gap: 7px;
}
html[data-theme="dark"] .cm-student-list article {
  min-height: 64px;
  border: 1px solid rgba(93, 139, 205, .34) !important;
  border-radius: 14px;
  padding: 8px 10px !important;
  background: rgba(15, 34, 62, .72) !important;
}
html[data-theme="dark"] .cm-student-list article:hover {
  border-color: rgba(103, 157, 235, .62) !important;
  background: rgba(20, 46, 82, .9) !important;
}

html[data-theme="dark"] :is(.cm-bubbles p.mine, .primary-button, .cm-primary) {
  color: #fff !important;
  background: linear-gradient(135deg, #427fff, #245de0) !important;
}

html[data-theme="dark"] :is(.user-panel__close, .close-button, .about-page__close, .cm-chat-head > [data-cm="results"], .more-page__back, .news-home) {
  color: #dbe8ff !important;
  border-color: var(--theme-border) !important;
  background: #172a49 !important;
}

/* Passwordless sign-in keeps its own labels, so do not let light-theme ink
   colours leak into the dark modal. */
html[data-theme="dark"] .auth-modal {
  color: #ffffff !important;
  background: #12223d !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.auth-brand, .auth-heading h2, .auth-field, .auth-otp-copy b, .auth-register-copy b, .otp-delivery, .otp-security) {
  color: #ffffff !important;
}
html[data-theme="dark"] :is(.auth-heading p, .auth-hint, .auth-otp-copy span, .auth-register-copy span, .auth-resend) {
  color: #d8e5fa !important;
}
html[data-theme="dark"] .auth-field > i { color: #c8d8f2 !important; }
html[data-theme="dark"] .auth-field__label i { color: #c8d8f2 !important; }
html[data-theme="dark"] .auth-field :is(input, select) {
  color: #ffffff !important;
  border-color: #36598c !important;
  background: #0e1d35 !important;
}
html[data-theme="dark"] .auth-field :is(input, select)::placeholder { color: #9bb0d1 !important; }

/* These three cards intentionally stay light, including when the About screen
   is dark, so their label needs an equally explicit dark foreground. */
html[data-theme="dark"] #aboutPage .about-stats > div {
  background: #f9fbff !important;
  border-color: #e3eaf5 !important;
}
html[data-theme="dark"] #aboutPage .about-stats small {
  color: #17316b !important;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(42, 105, 224, .18);
  border-radius: 12px;
  color: #1e64e9;
  background: #f3f7ff;
  cursor: pointer;
}
.theme-toggle svg { width: 20px; height: 20px; }
html[data-theme="dark"] .theme-toggle { color: #ffd778; border-color: #36598c; background: #172e51; }
html[data-theme="dark"] .user-panel__header { background: #15294a !important; }
html[data-theme="dark"] .user-panel__close {
  color: #1e64e9 !important;
  background: #f4f8ff !important;
}

.user-panel__theme-toggle {
  align-self: start;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .user-panel__aside { position: relative; }
  .user-panel__aside .user-panel__theme-toggle {
    position: absolute;
    left: 18px;
    top: 45px;
    bottom: auto;
    margin: 0;
  }
  .user-panel__header > div { min-width: 0; }
  .user-panel__header h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .theme-toggle { width: 38px; height: 38px; border-radius: 11px; }
  html[data-theme="dark"] :is(.phone-shell, .more-page, .news-shell) { min-height: 100vh; }
}

/* The university news index has its own component system. */
html[data-theme="dark"] body.news-list-page { background: var(--theme-page) !important; }
html[data-theme="dark"] :is(.university-feed__back, .university-feed__calendar, .university-feed__search, .university-feed__filter-toggle, .university-feed__filter, .university-feed__item, .university-feed__empty) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2) !important;
}
html[data-theme="dark"] .university-feed__filters { border-color: var(--theme-border) !important; background: var(--theme-surface-soft) !important; }
html[data-theme="dark"] :is(.university-feed__title h1, .university-feed__copy h2) { color: #ffffff !important; }
html[data-theme="dark"] :is(.university-feed__title p, .university-feed__copy p, .university-feed__meta, .university-feed__empty) { color: #c7d6ed !important; }
html[data-theme="dark"] .university-feed__search input { color: #ffffff !important; }
html[data-theme="dark"] .university-feed__search input::placeholder { color: #9bb0d1 !important; }
html[data-theme="dark"] .university-feed__image { background: #172a49 !important; }
html[data-theme="dark"] .university-feed__filter.is-active { color: #ffffff !important; border-color: #3d80ff !important; background: linear-gradient(135deg, #427fff, #245de0) !important; }

/* Final AI guard: later overlay rules must never reveal Home behind this screen. */
html[data-theme="dark"] :is(.ai-assistant, .ai-assistant.is-open, .ai-assistant__shell, .ai-assistant__content, .ai-assistant__hero) {
  background: var(--theme-page) !important;
}
html[data-theme="dark"] .ai-assistant__tools {
  padding: 18px;
  border: 1px solid var(--theme-border) !important;
  border-radius: 22px;
  background: #101f38 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2) !important;
}
html[data-theme="dark"] .ai-assistant__bell,
html[data-theme="dark"] .ai-assistant__bell svg {
  color: #ffffff !important;
  stroke: currentColor;
}