/* ==========================================================================
   LCSC University - Light / Dark theme
   - Light = original look.
   - Dark  = html[data-theme="dark"] overrides (specific enough to win over the
             inline <style> blocks that live inside individual views).
   ========================================================================== */

:root {
  color-scheme: light;
  --t-bg: #ffffff;
  --t-surface: #ffffff;
  --t-surface-alt: #f2f5fa;
  --t-text: #585a61;
  --t-heading: #47536e;
  --t-border: #dde3f0;
  --t-primary: #5777ba;
  --t-primary-hover: #748ec6;
  --t-primary-contrast: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #0f1623;
  --t-surface: #182133;
  --t-surface-alt: #121b2b;
  --t-text: #cdd5e4;
  --t-heading: #e8edf7;
  --t-border: #2b3850;
  --t-primary: #6f90dd;
  --t-primary-hover: #8fa9ec;
  --t-primary-contrast: #0b1220;
}

html, body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------- Toggle button (created by theme.js) ---------- */
.theme-toggle {
  position: fixed;
  right: 15px;
  bottom: 70px;
  z-index: 9990;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--t-border);
  border-radius: 50%;
  background: var(--t-surface);
  color: var(--t-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
}

button.theme-toggle,
button.theme-toggle:hover {
  width: 42px;
  padding: 0;
  background: var(--t-surface);
  color: var(--t-text);
  font-weight: 400;
}

.theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--t-primary);
}

/* icon placed inside the header menu (leftmost item) */
.theme-toggle-item { display: flex; align-items: center; }
button.theme-toggle.theme-toggle-nav,
button.theme-toggle.theme-toggle-nav:hover {
  position: static;
  width: 36px;
  height: 36px;
  margin: 0 0 0 4px;
  font-size: 17px;
  box-shadow: none;
}
.navbar-mobile .theme-toggle-item { justify-content: center; padding: 6px 0; }

.theme-toggle:focus-visible {
  outline: 3px solid var(--t-primary);
  outline-offset: 2px;
}

/* ---------- Error popup (app-error.js) ---------- */
.app-error-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 15, 25, 0.55);
  backdrop-filter: blur(2px);
}

.app-error-box {
  width: min(460px, 100%);
  max-height: 85vh;
  overflow: auto;
  padding: 26px 24px 22px;
  border-radius: 14px;
  background: var(--t-surface);
  color: var(--t-text);
  border: 1px solid var(--t-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

.app-error-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e5484d;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 52px;
}

.app-error-title {
  margin: 0 0 10px;
  font-size: 19px;
  color: var(--t-heading);
}

.app-error-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.app-error-list li + li {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--t-border);
}

.app-error-btn {
  width: auto;
  min-width: 120px;
  padding: 9px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--t-primary);
  color: var(--t-primary-contrast);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.app-error-btn:hover {
  background: var(--t-primary-hover);
}

/* images that were swapped for the placeholder */
img[data-fallback-applied] {
  background: #e9ecf3;
  border-radius: 6px;
  max-width: 100%;
}

/* ==========================================================================
   DARK MODE - base
   ========================================================================== */
html[data-theme="dark"] body { background-color: var(--t-bg); color: var(--t-text); }
html[data-theme="dark"] a { color: var(--t-primary); }
html[data-theme="dark"] a:hover { color: var(--t-primary-hover); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--t-heading); }
html[data-theme="dark"] hr { border-color: var(--t-border); opacity: 1; }
html[data-theme="dark"] .text-muted { color: #93a0b8 !important; }
html[data-theme="dark"] .text-dark { color: var(--t-text) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--t-surface) !important; color: var(--t-text); }
html[data-theme="dark"] ::placeholder { color: #7f8ca6 !important; opacity: 1; }

/* ---------- Header / navigation ---------- */
html[data-theme="dark"] #header { background: rgba(15, 22, 35, 0.95); }
html[data-theme="dark"] #header.header-transparent { background: transparent; }
html[data-theme="dark"] #header.header-scrolled {
  background: rgba(15, 22, 35, 0.95);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] #header .logo h1 a,
html[data-theme="dark"] #header .logo h1 a:hover { color: var(--t-primary); }
html[data-theme="dark"] .navbar a { color: #c3cde0; }
html[data-theme="dark"] .navbar a:hover,
html[data-theme="dark"] .navbar .active,
html[data-theme="dark"] .navbar li:hover > a { color: var(--t-primary); }
html[data-theme="dark"] .navbar .getstarted,
html[data-theme="dark"] .navbar .getstarted:focus {
  background: var(--t-primary);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .navbar .getstarted:hover {
  background: var(--t-primary-hover);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .navbar .dropdown ul,
html[data-theme="dark"] .navbar-mobile ul,
html[data-theme="dark"] .navbar-mobile .dropdown ul { background: var(--t-surface); }
html[data-theme="dark"] .navbar-mobile a { color: #c3cde0; }
html[data-theme="dark"] .navbar-mobile a:hover,
html[data-theme="dark"] .navbar-mobile .active,
html[data-theme="dark"] .navbar-mobile li:hover > a { color: var(--t-primary); }
html[data-theme="dark"] .navbar-mobile .getstarted { color: var(--t-primary-contrast); }
html[data-theme="dark"] .mobile-nav-toggle { color: #c3cde0; }
html[data-theme="dark"] .navbar-mobile .mobile-nav-toggle { color: #fff; }
html[data-theme="dark"] .navbar-mobile { background: rgba(5, 8, 14, 0.85); }

/* ---------- Hero / sections ---------- */
html[data-theme="dark"] #hero::before { background-color: #16213a; }
html[data-theme="dark"] #hero h1 { color: var(--t-primary); }
html[data-theme="dark"] #hero h2 { color: #aab6cd; }
html[data-theme="dark"] #hero .download-btn { background: var(--t-primary); color: var(--t-primary-contrast); }
html[data-theme="dark"] #hero .download-btn:hover { background: var(--t-primary-hover); }
html[data-theme="dark"] .section-bg { background-color: var(--t-surface-alt); }
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title p { color: var(--t-heading); }
html[data-theme="dark"] .breadcrumbs { background-color: var(--t-surface-alt); }
html[data-theme="dark"] .features .content .icon-box h4,
html[data-theme="dark"] .details .content h3 { color: var(--t-heading); }
html[data-theme="dark"] .features .content .icon-box p { color: var(--t-text); }
html[data-theme="dark"] .pricing .box,
html[data-theme="dark"] .testimonials .testimonial-item,
html[data-theme="dark"] .faq .accordion-list li,
html[data-theme="dark"] .contact .info { background: var(--t-surface); }

/* ---------- Footer ---------- */
html[data-theme="dark"] #footer { background: var(--t-surface-alt); }
html[data-theme="dark"] #footer .footer-top,
html[data-theme="dark"] #footer .footer-newsletter { background: var(--t-surface); }
html[data-theme="dark"] #footer .copyright,
html[data-theme="dark"] #footer .credits,
html[data-theme="dark"] #footer .footer-top h4,
html[data-theme="dark"] #footer .footer-top .footer-contact h4 { color: var(--t-heading); }
html[data-theme="dark"] #footer .footer-top .footer-contact p,
html[data-theme="dark"] #footer .footer-top .footer-links ul a { color: #9aa7bf; }

/* ---------- Cards, panels, tables (Bootstrap 5 + template) ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item {
  background-color: var(--t-surface);
  color: var(--t-text);
  border-color: var(--t-border);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background-color: var(--t-surface-alt);
  border-color: var(--t-border);
  color: var(--t-heading);
}
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
  color: var(--t-text);
  border-color: var(--t-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
  color: var(--t-text);
  border-bottom-color: var(--t-border);
  background-color: transparent;
}
html[data-theme="dark"] .table thead th { color: var(--t-heading); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > :not(caption) > * > * {
  background-color: var(--t-surface-alt) !important;
  color: var(--t-heading) !important;
}
html[data-theme="dark"] .card-img-wrap,
html[data-theme="dark"] .card-img-spinner { background: var(--t-surface-alt) !important; }
html[data-theme="dark"] .ci-ring { border-color: var(--t-border) !important; border-top-color: var(--t-primary) !important; }
html[data-theme="dark"] .class-skeleton-card { background: var(--t-surface-alt) !important; border-color: var(--t-border) !important; }
html[data-theme="dark"] .sk-title,
html[data-theme="dark"] .sk-row span {
  background: linear-gradient(90deg, #1b2740 25%, #26344f 37%, #1b2740 63%) !important;
  background-size: 400% 100% !important;
}
html[data-theme="dark"] .tab-loading-text { color: var(--t-primary) !important; }

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #101a2b;
  color: var(--t-text);
  border-color: var(--t-border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #14213a;
  color: var(--t-heading);
  border-color: var(--t-primary);
  box-shadow: 0 0 0 0.2rem rgba(111, 144, 221, 0.25);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input:disabled { background-color: #0c1423; opacity: 0.8; }
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-text { color: var(--t-text); }
html[data-theme="dark"] .contact .php-email-form input,
html[data-theme="dark"] .contact .php-email-form textarea { background: #101a2b; color: var(--t-text); }

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn-primary {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
  background-color: var(--t-primary-hover);
  border-color: var(--t-primary-hover);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .btn-secondary { background-color: #3a4763; border-color: #3a4763; color: #fff; }
html[data-theme="dark"] .btn-secondary:hover { background-color: #4a5a7c; border-color: #4a5a7c; }
html[data-theme="dark"] .btn-success { background-color: #2e9e5b; border-color: #2e9e5b; color: #fff; }
html[data-theme="dark"] .btn-danger { background-color: #d9444a; border-color: #d9444a; color: #fff; }
html[data-theme="dark"] .btn-warning { background-color: #e0a526; border-color: #e0a526; color: #1b1b1b; }
html[data-theme="dark"] .btn-info { background-color: #2fa4c7; border-color: #2fa4c7; color: #08141a; }
html[data-theme="dark"] .btn-light { background-color: #26344f; border-color: #26344f; color: var(--t-heading); }
html[data-theme="dark"] .btn-light:hover { background-color: #314264; border-color: #314264; color: #fff; }
html[data-theme="dark"] .btn-outline-primary { color: var(--t-primary); border-color: var(--t-primary); }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--t-primary); color: var(--t-primary-contrast); }
html[data-theme="dark"] .btn-outline-secondary { color: #b4bfd5; border-color: #4a5a7c; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #4a5a7c; color: #fff; }
html[data-theme="dark"] .pricing .get-started-btn,
html[data-theme="dark"] .pricing .featured .get-started-btn { background: var(--t-primary); color: var(--t-primary-contrast); }
html[data-theme="dark"] .contact .php-email-form button[type="submit"] {
  background: var(--t-surface);
  color: var(--t-primary);
  border-color: var(--t-primary);
}
html[data-theme="dark"] .contact .php-email-form button[type="submit"]:hover {
  background: var(--t-primary);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .back-to-top { background: var(--t-primary); }
html[data-theme="dark"] .back-to-top i { color: var(--t-primary-contrast); }

/* ---------- Tabs / pills (override inline "lightgray") ---------- */
html[data-theme="dark"] .nav-pills .nav-link { background-color: #26344f; color: #cdd5e4; }
html[data-theme="dark"] .nav-pills .nav-link:hover { background-color: #31426b; color: #fff; }
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link {
  background-color: var(--t-primary);
  color: var(--t-primary-contrast);
}
html[data-theme="dark"] .nav-tabs { border-color: var(--t-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--t-text); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--t-surface);
  border-color: var(--t-border) var(--t-border) var(--t-surface);
  color: var(--t-heading);
}

/* ---------- Alerts (readable on dark) ---------- */
html[data-theme="dark"] .alert { border-color: var(--t-border); }
html[data-theme="dark"] .alert-success { background-color: #12301f; color: #a9e3c0; border-color: #1f5636; }
html[data-theme="dark"] .alert-danger { background-color: #3a1519; color: #f4b3b7; border-color: #6a2a30; }
html[data-theme="dark"] .alert-warning { background-color: #3a2e0f; color: #f1d58b; border-color: #6b551a; }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary { background-color: #12273d; color: #a9d0f2; border-color: #1f4a73; }
html[data-theme="dark"] .alert-secondary { background-color: #1d2535; color: #c0c9db; border-color: #333f57; }
html[data-theme="dark"] .alert .alert-heading,
html[data-theme="dark"] .alert h4 { color: inherit; }
html[data-theme="dark"] .alert hr { border-color: currentColor; opacity: 0.25; }
html[data-theme="dark"] .alert a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-dark { background-color: #26344f !important; color: var(--t-heading) !important; }

/* ---------- Standalone pages (Login / Register / Forgot password) ---------- */
html[data-theme="dark"] .main-block {
  background-image: linear-gradient(rgba(6, 10, 18, 0.62), rgba(6, 10, 18, 0.62)) !important;
}
html[data-theme="dark"] .main-block form {
  background: var(--t-surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--t-border);
  border-radius: 8px;
}
html[data-theme="dark"] .main-block h1,
html[data-theme="dark"] .main-block h1 span { color: var(--t-heading) !important; }
html[data-theme="dark"] .main-block p,
html[data-theme="dark"] .main-block label { color: var(--t-text); }
html[data-theme="dark"] .main-block button {
  background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  color: #fff;
}
html[data-theme="dark"] .main-block button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
}

/* ---------- Approval dashboard cards ---------- */
html[data-theme="dark"] .card-custom-blue { background: linear-gradient(to right, #35508f, #5877c4); color: #fff; }
html[data-theme="dark"] .card-custom-green { background: linear-gradient(to right, #1f7a3a, #4f9a3c); color: #fff; }

/* ---------- Page loader (_Layout inline style) ---------- */
html[data-theme="dark"] #page-loader { background: rgba(10, 15, 25, 0.9) !important; }
html[data-theme="dark"] .ldr-ring { border-color: var(--t-border) !important; border-top-color: var(--t-primary) !important; }
html[data-theme="dark"] .ldr-dots span { background: var(--t-primary) !important; }
html[data-theme="dark"] .ldr-text { color: var(--t-primary) !important; }

/* ---------- Misc ---------- */
html[data-theme="dark"] [style*="color:red"],
html[data-theme="dark"] [style*="color: red"] { color: #ff7b80 !important; }
html[data-theme="dark"] [style*="color:#5777ba"] { color: var(--t-primary) !important; }
html[data-theme="dark"] .swiper-pagination-bullet { background-color: #cdd5e4; }
html[data-theme="dark"] img.card-img-preview { box-shadow: 0 0 0 1px var(--t-border); }
html[data-theme="dark"] img[data-fallback-applied] { background: #26344f; filter: brightness(0.85); }


/* ---------- Class: "view my card" bar (passed courses) - soft colours ---------- */
.table > tbody > tr.card-link-row > td,
tr.card-link-row > td {
  background-color: #fff6d6;
  border-color: #f3e3a6;
}
input.btn-card-link,
.btn-card-link {
  color: #8a3b3b;
  background-color: #f9c9c9;
  border: 1px solid #f0a9a9;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
input.btn-card-link:hover,
.btn-card-link:hover,
.btn-card-link:focus {
  color: #7a2f2f;
  background-color: #f4b3b3;
  border-color: #e99393;
  transform: translateY(-1px);
}
html[data-theme="dark"] .table > tbody > tr.card-link-row > td,
html[data-theme="dark"] tr.card-link-row > td {
  background-color: #3a3418 !important;
  border-color: #5a5024 !important;
}
html[data-theme="dark"] input.btn-card-link,
html[data-theme="dark"] .btn-card-link {
  color: #ffd9d9;
  background-color: #7d3a40;
  border-color: #a44f57;
}
html[data-theme="dark"] input.btn-card-link:hover,
html[data-theme="dark"] .btn-card-link:hover,
html[data-theme="dark"] .btn-card-link:focus {
  color: #fff;
  background-color: #94474e;
  border-color: #bd5f68;
}