/* Public, student and teacher colors only. Not loaded by either admin portal.
   This file changes paint and contrast; page layouts stay in their own sheets. */
:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-3: #eef2f8;
  --color-text: #06377f;
  --color-heading: #06377f;
  --color-text-muted: #667085;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #4264e9;
  --color-secondary: #8825e5;
  --color-primary-contrast: #ffffff;
  --color-success: #16724b;
  --color-warning: #975600;
  --color-danger: #a33a32;
  --color-info: #1464aa;
  --color-overlay: #06377f66;
  --color-press-overlay: #4264e912;
  --home-background: var(--color-bg);
  --home-blue: #06377f;
  --home-muted: var(--color-text-muted);
  --home-accent: var(--color-primary);
  --app-brand-gradient: linear-gradient(105deg, #078fd0 0%, #4c68d6 48%, #a33bd2 100%);
  --app-link: #3155b8;
  --app-error-bg: #fff0ed;
  --app-success-bg: #edf7ef;
  --app-warning-bg: #fff8eb;
  --app-info-bg: #edf4ff;
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary);
  --bg-color: var(--color-bg);
  --white: var(--color-surface);
  --text-color: var(--color-text);
  --text-light: var(--color-text-muted);
  --border-color: var(--color-border);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --home-blue: #e5edff;
  --color-bg: #111827;
  --color-surface: #192235;
  --color-surface-2: #1e293b;
  --color-surface-3: #29364c;
  --color-text: #e5edff;
  --color-heading: #e5edff;
  --color-text-muted: #b4bdd0;
  --color-border: #36445c;
  --color-border-strong: #526078;
  --color-primary: #9dacff;
  --color-secondary: #c78cec;
  --color-success: #76d5a3;
  --color-warning: #f6c36b;
  --color-danger: #ffaaa3;
  --color-info: #8acbff;
  --color-overlay: #020617ad;
  --color-press-overlay: #ffffff14;
  --app-link: #a8baff;
  --app-error-bg: #38232d;
  --app-success-bg: #19372f;
  --app-warning-bg: #362e23;
  --app-info-bg: #1e304b;
}
html { background-color: var(--color-bg); }
body { color: var(--color-text); }
/* Native fields and date/time icons follow the selected app theme, even when
   the OS uses the other theme. Don't recolor checkboxes or media controls. */
body:not(.video-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]), select, textarea) {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
body:not(.video-page) :is(input, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
body:not(.video-page) :is(input, select, textarea):disabled { color: var(--color-text-muted); }
body:not(.video-page) :is(input, select, textarea):focus-visible { outline-color: var(--color-primary); }

/* Keep the public landing/register/login composition and branded waves. */
body.login-page { --login-background: var(--color-bg); }
.home-page .user-type-card,
.home-page .user-type-card:hover,
.register-page .section,
.login-page .login-dialog-content,
.login-page #cancelResetBtn {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
.home-page .user-type-icon,
.register-page .section-title i { color: var(--color-info); }
.home-page .feature,
.home-page .additional-features,
.login-page :is(.back-home, .field-action-link),
.register-page :is(.back-home, .checkbox-group a, .sign-in-link a) { color: var(--app-link); }
.login-page .login-dialog { background: var(--color-overlay); }
.login-page .error-message,
.register-page .error-message { color: var(--color-danger); background: var(--app-error-bg); border-color: var(--color-danger); }
.login-page .success-message,
.register-page .success-message { color: var(--color-success); background: var(--app-success-bg); border-color: var(--color-success); }
.register-page .required { color: var(--color-danger); }
.register-page .error-field { border-color: var(--color-danger) !important; background-color: var(--app-error-bg) !important; }
.register-page .form-group .skeleton { background-image: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%); }

/* Legal pages and the same text inside the registration reader. */
.legal-navigation { background: color-mix(in srgb, var(--color-bg) 96%, transparent); border-color: var(--color-border); }
.legal-back,
.legal-reader .legal-section,
.registration-legal-dialog,
.registration-legal-toolbar { background: var(--color-surface); border-color: var(--color-border); }
.legal-reader,
.registration-legal-dialog { color: var(--color-text); }
.legal-reader :is(.legal-brand, .legal-title, .legal-index summary, h2, .legal-footer strong),
.registration-legal-toolbar h2 { color: var(--color-heading); }
.legal-reader :is(.legal-kicker, h3) { color: var(--color-secondary); }
.legal-reader :is(.legal-meta span, .legal-note) { background: var(--color-surface-2); color: var(--color-secondary); }
.legal-reader .legal-index,
.legal-back:hover { background: var(--color-surface-2); border-color: var(--color-border); }
.legal-reader a,
.legal-back { color: var(--app-link); }
.legal-reader .legal-footer,
.registration-legal-status { color: var(--color-text-muted); border-color: var(--color-border); }
.registration-legal-content { background: radial-gradient(ellipse at top right, var(--app-info-bg) 0%, transparent 48%) var(--color-bg); }

/* Inputs inside the student profile used browser-default black text. */
.student-dashboard-page #profileModal :is(input, select) { color: var(--color-text); background-color: var(--color-surface); border-color: var(--color-border); }
.student-dashboard-page #profileModal input[readonly] { background-color: var(--color-surface-2); }
.teacher-dashboard-page h2 { border-bottom-color: var(--color-border); }
.teacher-dashboard-page .day-chip { background: var(--color-surface); color: var(--color-text); }
.teacher-dashboard-page .subject-tag,
.teacher-dashboard-page .subject-chip { background: var(--color-surface-2); color: var(--color-primary); border-color: var(--color-border); }
.teacher-dashboard-page .subject-tag :is(span, button),
.teacher-dashboard-page .subject-chip :is(span, button) { color: inherit; }

/* Dynamic notification styles are inserted later, so use a page ancestor. */
body .push-permission-prompt { border-color: var(--color-border); }
body .push-permission-prompt button { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); }
body :is(.in-app-notification, .push-message) { background: var(--color-surface); color: var(--color-text); }
body .notification-title { color: var(--color-heading); }
body :is(.notification-body, .notification-close) { color: var(--color-text-muted); }
body .notification-close:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Standalone account/payment screens use the same colors without moving any
   sections, controls or text. */
body.account-page { background: var(--color-bg); color: var(--color-text); }
.account-page :is(.card, .payment-card, .profile-header, .profile-section),
.reset-password-page .container { background: var(--color-surface); }
.account-page :is(.title, .payment-title, .profile-info h2, .profile-section h3, label) { color: var(--color-heading); }
.account-page :is(.sub, .subtitle, .payment-subtitle, .profile-info p, .muted, .meta) { color: var(--color-text-muted); }
.account-page :is(.status, .toggle) { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.account-page .status.error { background: var(--app-error-bg); color: var(--color-danger); }
.account-page .status.success { background: var(--app-success-bg); color: var(--color-success); }
.account-page .status-processing { background: var(--app-info-bg); color: var(--color-info); }
.account-page .status-approved { background: var(--app-success-bg); color: var(--color-success); }
.account-page .status-pending { background: var(--app-warning-bg); color: var(--color-warning); }
.account-page .status-rejected { background: var(--app-error-bg); color: var(--color-danger); }
.account-page .btn:not(.btn-primary),
.account-page .btn-delete { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.account-page :is(.btn-primary, .btn-save),
.verify-email-page .btn { background: var(--app-brand-gradient); color: #fff; }
.account-page .btn-delete { color: var(--color-danger); border-color: var(--color-danger); }
.account-page .profile-section h3 { border-color: var(--color-border); }

/* Independent teacher profile: retain its cards, avatar and grid. */
.teacher-profile-page .header,
.teacher-profile-page :is(.profile-header, .profile-section, .modal-content) { background: var(--color-surface); }
.teacher-profile-page :is(.profile-name, .section-title, .info-value, .modal-title) { color: var(--color-heading); }
.teacher-profile-page :is(.stat-label, .info-label, .description-text, .review-text) { color: var(--color-text-muted); }
.teacher-profile-page :is(.logo, .profile-title, .stat-number) { color: var(--color-primary); }
.teacher-profile-page :is(.stat-item, .subject-tag, .review-item) { background: var(--color-surface-2); border-color: var(--color-border); }
.teacher-profile-page .profile-photo { border-color: var(--color-surface); }
.teacher-profile-page .btn-cancel { background: var(--color-surface-2); color: var(--color-text); }

html.teacher-theme:not([data-theme="dark"]) { --color-border: #e2e8f0; --color-border-strong: #cbd5e1; }
.reset-password-page :is(.toggleBtn, .hint) { color: var(--color-text-muted); }
.reset-password-page .toggleBtn { background: var(--color-surface-2); border-color: var(--color-border); }
.reset-password-page .btnPrimary { background: var(--app-brand-gradient); }
.reset-password-page .btnLink { color: var(--app-link); }
.teacher-profile-page .subject-tag { color: var(--color-text); }
.teacher-profile-page :is(.experience-title, .form-label) { color: var(--color-heading); }
.teacher-profile-page :is(.experience-details, .experience-description) { color: var(--color-text-muted); }
.account-page.verify-email-page .btn { background: var(--app-brand-gradient); color: #fff; }
[data-theme="dark"] .toast:is(.success, .error, .warning, .info, .neutral) { color: #111827; }
/* The older classroom creates these colors inline; keep its video canvas dark. */
.video-page #permission-overlay > div { background: var(--color-surface) !important; color: var(--color-text); }
.video-page #permission-overlay h3 { color: var(--color-heading) !important; }
.video-page #permission-overlay p { color: var(--color-text-muted) !important; }
.video-page #permission-overlay span { color: var(--color-primary) !important; }
.student-dashboard-page .booking-section-header { color: var(--color-heading) !important; border-bottom-color: var(--color-border); }
.account-page a:not(.btn):not(.nav-btn) { color: var(--app-link); }
@media (max-width: 600px) {
  .teacher-profile-page .header { flex-wrap: wrap; gap: 12px; }
  .teacher-profile-page .nav-buttons { flex-wrap: wrap; }
}