:root {
  --theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

html,
body,
.page-content,
.card,
.dropdown-menu,
.modal-content,
input,
textarea,
select,
button {
  transition: var(--theme-transition);
}

/* ----------- Dark variable overrides ----------- */
html[data-theme="dark"] {
  --text-color: #f1f1f1;
  --light-text-color: #b8b8b8;
  --background-color: #121212;
  --surface-color: #1e1e1e;
  --surface-elevated: #262626;
  --border-color: #2e2e2e;

  --to-right-gradient-background: linear-gradient(262.55deg, #0e1a17 -0.07%, #498C7C 99.93%);
  --to-top-gradient-background: linear-gradient(180deg, #0e1a17 0%, #498C7C 100%);
  --to-bottom-gradient-background: linear-gradient(180deg, #498C7C 0%, #0e1a17 100%);
  --to-right-gradient-background-2: linear-gradient(262.55deg, #1a1a1a 22.93%, #2a2418 99%);
  --to-left-gradient-background-2: linear-gradient(262.55deg, #2a2418 22.93%, #1a1a1a 99%);

  color-scheme: dark;
}

/* ----------- Page chrome ----------- */
html[data-theme="dark"] body {
  background-color: var(--background-color);
  color: var(--text-color);
}

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

/* ----------- Bootstrap utility overrides ----------- */
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: var(--surface-color) !important;
}

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

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .light-text {
  color: var(--light-text-color) !important;
}

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

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: var(--border-color) !important;
}

/* ----------- Cards / surfaces ----------- */
html[data-theme="dark"] .card {
  background-color: var(--surface-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas {
  background-color: var(--surface-color);
  color: var(--text-color);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--border-color);
}

/* ----------- Navbar ----------- */
html[data-theme="dark"] .navbar .nav-content {
  background-color: var(--surface-color) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link {
  color: var(--text-color);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link.active {
  color: var(--primary-color);
}

html[data-theme="dark"] .navbar .navbar-nav .dropdown .dropdown-toggle::after {
  border-color: transparent var(--text-color) var(--text-color) transparent;
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-menu {
  background-color: var(--surface-elevated);
  border-color: rgba(73, 140, 124, 0.25);
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.7),
              0 6px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-menu::before {
  background-color: var(--surface-elevated);
  border-top-color: rgba(73, 140, 124, 0.25);
  border-inline-start-color: rgba(73, 140, 124, 0.25);
}

html[data-theme="dark"] .navbar .header-buttons .dropdown-menu {
  background-color: var(--surface-elevated);
  border-color: rgba(73, 140, 124, 0.25);
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.7),
              0 6px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .navbar .header-buttons .dropdown-menu .dropdown-item:hover {
  background-color: rgba(73, 140, 124, 0.22);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-item {
  color: var(--text-color);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-item:hover,
html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-item:focus {
  background-color: rgba(73, 140, 124, 0.18);
  color: var(--text-color);
}

html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-item.disabled,
html[data-theme="dark"] .navbar .navbar-nav .nav-item .dropdown-item.disabled.text-muted {
  color: #6f6f6f !important;
}

html[data-theme="dark"] .navbar-toggler {
  border-color: var(--border-color);
}

html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) brightness(1.4);
}

/* Mobile offcanvas sidebar */
html[data-theme="dark"] .nav-offcanvas {
  --bs-offcanvas-bg: var(--surface-color);
  --bs-offcanvas-color: var(--text-color);
}

html[data-theme="dark"] .nav-offcanvas .offcanvas-header {
  border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .nav-offcanvas .header-buttons {
  border-top-color: var(--border-color);
}

@media (max-width: 991.98px) {
  html[data-theme="dark"] .nav-offcanvas .navbar-nav .nav-item .nav-link:hover,
  html[data-theme="dark"] .nav-offcanvas .navbar-nav .nav-item .nav-link:focus {
    background-color: rgba(73, 140, 124, 0.18);
  }

  html[data-theme="dark"] .navbar-toggler {
    border-color: var(--primary-color);
  }
}

/* Backdrop a touch darker on dark theme */
html[data-theme="dark"] .offcanvas-backdrop.show {
  opacity: 0.7;
}

/* User dropdown menu (account) */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface-elevated);
  border-color: var(--border-color);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--text-color);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-color);
}

/* ----------- Footer ----------- */
html[data-theme="dark"] footer {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* ----------- Forms ----------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
  background-color: var(--surface-elevated);
  color: var(--text-color);
  border-color: var(--border-color);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--light-text-color);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--surface-elevated);
  color: var(--text-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(73, 140, 124, 0.35);
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label {
  color: var(--text-color);
}

html[data-theme="dark"] .form-check-input {
  background-color: var(--surface-elevated);
  border-color: var(--border-color);
}

html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ----------- Tables ----------- */
html[data-theme="dark"] .table {
  --bs-table-bg: var(--surface-color);
  --bs-table-color: var(--text-color);
  --bs-table-striped-bg: var(--surface-elevated);
  --bs-table-striped-color: var(--text-color);
  --bs-table-border-color: var(--border-color);
  color: var(--text-color);
}

/* ----------- Override page-specific hardcoded backgrounds ----------- */

/* Home page: white→fade gradient backgrounds */
html[data-theme="dark"] .gradient-background {
  background: linear-gradient(-81deg, #1a1a1a 65%, #2a2418 85%) !important;
}

html[data-theme="dark"] .page-content .latest-news .card {
  background-color: transparent !important;
}

html[data-theme="dark"] .page-content .latest-news .card .title {
  color: var(--text-color);
}

html[data-theme="dark"] .page-content .latest-news .card .description {
  color: var(--light-text-color);
}

/* Home loader overlay (was rgba white .7) */
html[data-theme="dark"] .section-loading .loader-overlay {
  background-color: rgba(18, 18, 18, 0.75) !important;
}

/* Generic light surfaces seen across pages */
html[data-theme="dark"] [class*="bg-"][class*="white"],
html[data-theme="dark"] .page-content [style*="background:#fff" i],
html[data-theme="dark"] .page-content [style*="background-color:#fff" i] {
  background-color: var(--surface-color) !important;
}

/* Common light backgrounds: #F6F4F5, #F5FFFD, #FFFFFF used across pages */
html[data-theme="dark"] .page-content .card,
html[data-theme="dark"] .page-content .panel,
html[data-theme="dark"] .page-content .box,
html[data-theme="dark"] .page-content section > .container > .card {
  background-color: var(--surface-color) !important;
  color: var(--text-color);
}

/* News/Policies page surfaces commonly use #F6F4F5 backgrounds */
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .policy-card,
html[data-theme="dark"] .policy-item,
html[data-theme="dark"] .supervisor-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .project-card {
  background-color: var(--surface-color) !important;
  color: var(--text-color);
  border-color: var(--border-color);
}

/* Sign-in and reset password forms */
html[data-theme="dark"] #signInForm .sign-in-form,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] .auth-card {
  background-color: var(--surface-color);
  color: var(--text-color);
}

/* ---------- Specific hardcoded light surfaces in page CSS ----------
   These exist as plain background-color declarations in pages-styles/*.css.
   With !important they win regardless of load order. */

/* contact-us.css, news.css, projects.css, policies.css, supervisors.css, my-profile.css */
html[data-theme="dark"] .page-content .contact-us,
html[data-theme="dark"] .page-content .news,
html[data-theme="dark"] .page-content .policies,
html[data-theme="dark"] .page-content .project,
html[data-theme="dark"] .page-content .supervisors,
html[data-theme="dark"] .page-content .my-profile,
html[data-theme="dark"] .page-content .financial-statements {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* Generic: any page-content section using the brand off-white */
html[data-theme="dark"] .page-content > section,
html[data-theme="dark"] .page-content .section {
  color: var(--text-color);
}

/* projects.css: goal cards (#F5FFFD) and detail cards (#FFFFFF) */
html[data-theme="dark"] .page-content .goals .card,
html[data-theme="dark"] .page-content .project-details .details .data-card,
html[data-theme="dark"] .page-content .project-details .details .info-card,
html[data-theme="dark"] .page-content .project-details .swiper-btn-prev,
html[data-theme="dark"] .page-content .project-details .swiper-btn-next {
  background-color: var(--surface-elevated) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* about.css: value cards (white with light border) */
html[data-theme="dark"] .page-content .values .card,
html[data-theme="dark"] .page-content .values-section .card,
html[data-theme="dark"] .page-content .vision .card,
html[data-theme="dark"] .page-content .message .card,
html[data-theme="dark"] .page-content .goals-section .card {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* supervisors.css: image holders (white) */
html[data-theme="dark"] .page-content .supervisors .card,
html[data-theme="dark"] .page-content .supervisors .card .img-holder,
html[data-theme="dark"] .page-content .supervisory-board .card,
html[data-theme="dark"] .page-content .supervisory-board .card .img-holder,
html[data-theme="dark"] .page-content .board .card {
  background-color: var(--surface-elevated) !important;
}

/* my-profile.css: profile-edit avatar overlay (white circular badge) — keep as-is for icon contrast */
html[data-theme="dark"] .page-content .my-profile .profile-img .edit-icon {
  background-color: var(--surface-elevated) !important;
}

/* about.css gradient section */
html[data-theme="dark"] .page-content .about .gradient-section {
  background: linear-gradient(90deg, #FFD050 0%, #498C7C 100%) !important;
  color: #161616 !important;
}

/* News listing: card backgrounds */
html[data-theme="dark"] .page-content .news .card,
html[data-theme="dark"] .page-content .news-list .card,
html[data-theme="dark"] .page-content .news-card {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Policies/financial accordion or list rows */
html[data-theme="dark"] .page-content .policies .accordion-item,
html[data-theme="dark"] .page-content .financial-statements .accordion-item {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .accordion-button {
  background-color: var(--surface-elevated) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(73, 140, 124, 0.18) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.4);
}

/* Inputs that have a fixed light bg in custom checkbox styles */
html[data-theme="dark"] .form-group .input.checkbox .checkmark {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   Page-by-page hardcoded color overrides
   These are the exact selectors used in pages-styles/*.css.
   Using !important guarantees we win regardless of source order.
   ============================================================ */

/* ----- about.css ----- */
html[data-theme="dark"] .page-content .definition .small-img {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .page-content .goals .card,
html[data-theme="dark"] .page-content .values .card {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .page-content .goals .icon {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .page-content .values .card {
  background-color: rgba(73, 140, 124, 0.12) !important;
}

/* Gradient-clipped headings: switch the dark stop so it stays readable */
html[data-theme="dark"] .page-content .goals .our-vision-heading,
html[data-theme="dark"] .page-content .goals .our-message-heading,
html[data-theme="dark"] .page-content .goals .our-mission-heading {
  background: linear-gradient(to left,
    var(--primary-color) 0%,
    var(--primary-color) 60%,
    #f1f1f1 55%,
    #f1f1f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ----- home.css ----- */
html[data-theme="dark"] .gradient-background {
  background: linear-gradient(-81deg, #1a1a1a 65%, #2a2418 85%) !important;
}

html[data-theme="dark"] .page-content .latest-news {
  background: var(--to-left-gradient-background-2) !important;
}

html[data-theme="dark"] .page-content .awqaf-partners {
  background: var(--to-right-gradient-background-2) !important;
}

html[data-theme="dark"] .page-content .latest-news .swiper .card {
  background-color: var(--surface-color) !important;
  border-color: rgba(73, 140, 124, 0.22) !important;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6),
              0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .page-content .latest-news .swiper .card:hover {
  border-color: rgba(73, 140, 124, 0.40) !important;
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.7),
              0 8px 18px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .page-content .latest-news .card .title {
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .latest-news .card .description {
  color: var(--light-text-color) !important;
}

html[data-theme="dark"] .page-content .latest-news .swiper-btn-next {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .section-loading .loader-overlay {
  background-color: rgba(18, 18, 18, 0.75) !important;
}

/* ----- contact-us.css ----- */
html[data-theme="dark"] .page-content .contact-us {
  background-color: var(--background-color) !important;
}

/* Contact form card on dark surfaces. */
html[data-theme="dark"] .page-content .contact-us-form form {
  background-color: var(--surface-color) !important;
  border-color: rgba(73, 140, 124, 0.25) !important;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.7),
              0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .form-control {
  background-color: var(--surface-elevated) !important;
  border-color: rgba(73, 140, 124, 0.22) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .form-control:hover {
  border-color: rgba(73, 140, 124, 0.45) !important;
  background-color: var(--surface-elevated) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .form-control:focus {
  background-color: var(--surface-elevated) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(73, 140, 124, 0.28) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .form-label {
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .page-content .contact-us-form .input:focus-within .form-label {
  color: #6fb3a3 !important;
}

html[data-theme="dark"] .page-content .contact-us-form .validation-message {
  color: #ff8a8a !important;
}

/* ----- news.css ----- */
html[data-theme="dark"] .page-content {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .news-content .links,
html[data-theme="dark"] .page-content .news-paragraph,
html[data-theme="dark"] .page-content .other-details .paragraph {
  color: var(--light-text-color) !important;
}

html[data-theme="dark"] .page-content .news-title {
  color: var(--text-color) !important;
}

/* ----- policies.css / financial-statements ----- */
html[data-theme="dark"] .page-content .policies,
html[data-theme="dark"] .page-content .financial-statements {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* ----- supervisors.css ----- */
html[data-theme="dark"] .page-content .supervisors {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .supervisors .card .img-holder {
  background-color: var(--surface-elevated) !important;
}

/* ----- projects.css ----- */
html[data-theme="dark"] .page-content .project-details {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .project-details .description {
  color: var(--light-text-color) !important;
}

/* Outer two-column card frame around the gallery + details on project pages. */
html[data-theme="dark"] .page-content .gallery-container {
  background-color: var(--surface-color) !important;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.7),
              0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card {
  background-color: var(--surface-elevated) !important;
  border-color: rgba(73, 140, 124, 0.22) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card:hover {
  border-color: rgba(73, 140, 124, 0.40) !important;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card .title {
  color: var(--text-color) !important;
  border-bottom-color: rgba(73, 140, 124, 0.35) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card li::before {
  background-color: var(--primary-color) !important;
}

/* Thumbnail strip on dark: keep dim until hovered/active. */
html[data-theme="dark"] .page-content .swiper .small-gallery .swiper-wrapper .swiper-slide {
  opacity: 0.45;
}

html[data-theme="dark"] .page-content .swiper .small-gallery .swiper-wrapper .swiper-slide:hover,
html[data-theme="dark"] .page-content .swiper .small-gallery .swiper-wrapper .active-slide {
  opacity: 1;
}

html[data-theme="dark"] .page-content .goals .card {
  background-color: var(--surface-color) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card {
  background-color: var(--surface-elevated) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .project-details .details .data-card li::before {
  background-color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .gallery {
  background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .page-content .project-details .swiper-btn-prev,
html[data-theme="dark"] .page-content .project-details .swiper-btn-next,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-prev,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-next {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border-color) !important;
  color: #d9d9d9 !important;
}

html[data-theme="dark"] .page-content .project-details .swiper-btn-prev:hover,
html[data-theme="dark"] .page-content .project-details .swiper-btn-next:hover,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-prev:hover,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-next:hover {
  background: var(--to-bottom-gradient-background) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Arrow icons need to be light on dark surfaces (black would vanish) and
   pure white on the green-gradient hover. */
html[data-theme="dark"] .page-content .project-details .swiper-btn-next svg path,
html[data-theme="dark"] .page-content .project-details .swiper-btn-prev svg path,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-next svg path,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-prev svg path {
  stroke: #e8e8e8 !important;
}

html[data-theme="dark"] .page-content .project-details .swiper-btn-next:hover svg path,
html[data-theme="dark"] .page-content .project-details .swiper-btn-prev:hover svg path,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-next:hover svg path,
html[data-theme="dark"] .page-content .latest-news .swiper-btn-prev:hover svg path {
  stroke: #ffffff !important;
}

html[data-theme="dark"] .page-content .swiper .small-gallery .swiper-wrapper .active-slide {
  border-color: var(--primary-color) !important;
}

/* ----- my-profile.css ----- */
html[data-theme="dark"] .page-content .my-profile {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .my-profile .side {
  background-color: var(--surface-color) !important;
  border: 1px solid var(--border-color);
}

html[data-theme="dark"] .page-content .my-profile .page-content {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .my-profile .page-aside a {
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .my-profile .page-aside a:where(.active, :hover) {
  background-color: rgba(73, 140, 124, 0.22) !important;
}

html[data-theme="dark"] .navbar .nav-content .profile-logo .name {
  color: var(--text-color) !important;
}

html[data-theme="dark"] .my-profile form .image-input {
  background-color: rgba(73, 140, 124, 0.18) !important;
}

html[data-theme="dark"] .my-profile form .image-input .image-capture {
  background-color: var(--surface-elevated) !important;
}

html[data-theme="dark"] .my-profile form .image-input .btn-close {
  background-color: #6b7280 !important;
}

html[data-theme="dark"] .my-profile form .form-control {
  background-color: var(--surface-elevated) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .my-profile form .form-control::placeholder {
  color: var(--light-text-color) !important;
}

html[data-theme="dark"] .my-profile form .form-label {
  color: var(--light-text-color) !important;
}

/* ----- sign-in.css / auth.css / reset password ----- */
html[data-theme="dark"] .auth,
html[data-theme="dark"] .sign-in,
html[data-theme="dark"] .reset-password {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* The shared sign-in background image stays — overlay it for legibility */
html[data-theme="dark"] .sign-in[style*="background-image"],
html[data-theme="dark"] .reset-password[style*="background-image"],
html[data-theme="dark"] [class*="sign-in"][class*="background"] {
  background-blend-mode: multiply !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .sign-in-form,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] .reset-form,
html[data-theme="dark"] form.card,
html[data-theme="dark"] .form-card {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-group .input .icon path,
html[data-theme="dark"] .form-group .input .icon circle {
  stroke: var(--light-text-color);
}

/* Scarf banner uses gradient + dark text by design — keep it on dark too */
html[data-theme="dark"] .page-content .definition .scarf {
  color: #161616 !important;
}

/* Generic cards inside any page that don't have specific overrides */
html[data-theme="dark"] .card {
  background-color: var(--surface-color) !important;
  color: var(--text-color);
  border-color: var(--border-color);
}

/* Override Bootstrap's default card body bg */
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: transparent !important;
  color: var(--text-color);
  border-color: var(--border-color);
}

/* List groups */
html[data-theme="dark"] .list-group-item {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Generic catch-all: any element using the brand off-whites becomes a surface.
   Limited to descendants of .page-content so we don't fight intentional whites. */
html[data-theme="dark"] .page-content [style*="background-color: #F6F4F5" i],
html[data-theme="dark"] .page-content [style*="background-color:#F6F4F5" i],
html[data-theme="dark"] .page-content [style*="background-color: #f6f4f5" i],
html[data-theme="dark"] .page-content [style*="background:#fff" i],
html[data-theme="dark"] .page-content [style*="background: #fff" i],
html[data-theme="dark"] .page-content [style*="background-color:#fff" i],
html[data-theme="dark"] .page-content [style*="background-color: #fff" i],
html[data-theme="dark"] .page-content [style*="background-color: white" i] {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
}

/* Anchors inherit text-dark in footer */
html[data-theme="dark"] footer a.text-dark,
html[data-theme="dark"] footer .text-dark {
  color: var(--text-color) !important;
}

/* Headings stay legible */
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(--text-color);
}

/* Generic anchors */
html[data-theme="dark"] a {
  color: #6fb3a3;
}

html[data-theme="dark"] a:hover {
  color: #8fcebd;
}

/* Keep buttons styled with primary gradient readable */
html[data-theme="dark"] .signIn-btn,
html[data-theme="dark"] .readMore-btn {
  color: #ffffff !important;
}

/* Bootstrap close button (modals, alerts) */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Validation summary readability */
html[data-theme="dark"] .validation-message,
html[data-theme="dark"] .invalid-feedback {
  color: #ff8a8a;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1a1a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* ============================================================
   Theme Toggle Button
   ============================================================ */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: var(--theme-transition), transform 0.2s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.05);
  background-color: rgba(73, 140, 124, 0.08);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(73, 140, 124, 0.3);
}

.theme-toggle-btn svg {
  width: 2.2rem;
  height: 2.2rem;
}

html[data-theme="dark"] .theme-toggle-btn {
  border-color: #f1c75a;
  color: #f1c75a;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(241, 199, 90, 0.1);
}

/* show sun in dark mode, moon in light mode */
.theme-toggle-btn .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: inline-block;
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: none;
}

@media screen and (max-width: 991px) {
  .theme-toggle-btn {
    width: 4rem;
    height: 4rem;
  }
}

/* ============================================================
   Additional dark-on-dark contrast fixes
   These target text colors that were hardcoded in page CSS or
   used Bootstrap utility classes (text-dark/text-black) that
   resolve to dark colors on dark surfaces.
   ============================================================ */

/* contact-us.css: contact-info link uses color: black */
html[data-theme="dark"] .page-content .contact-us-info .part a,
html[data-theme="dark"] .page-content .contact-us-info .part a .data,
html[data-theme="dark"] .page-content .contact-us-info .part a .key,
html[data-theme="dark"] .page-content .contact-us-info .part a .value {
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .contact-us-info .part a:hover .data {
  color: var(--primary-color) !important;
}

/* supervisors.css: card title uses color: #3a3c3b */
html[data-theme="dark"] .page-content .supervisors .card .card-title,
html[data-theme="dark"] .page-content .supervisors .card .card-text,
html[data-theme="dark"] .page-content .supervisory-board .card .card-title,
html[data-theme="dark"] .page-content .supervisory-board .card .card-text,
html[data-theme="dark"] .page-content .board .card .card-title,
html[data-theme="dark"] .page-content .board .card .card-text {
  color: var(--text-color) !important;
}

/* my-profile.css: profile-logo name uses color: black */
html[data-theme="dark"] .navbar .nav-content .profile-logo .name,
html[data-theme="dark"] .navbar .profile-logo .name {
  color: var(--text-color) !important;
}

/* Footer Bootstrap text-dark links */
html[data-theme="dark"] footer a.text-dark,
html[data-theme="dark"] footer .text-dark,
html[data-theme="dark"] footer .link {
  color: var(--text-color) !important;
}

html[data-theme="dark"] footer a.text-dark:hover,
html[data-theme="dark"] footer .link:hover {
  color: var(--primary-color) !important;
}

/* My Profile sidebar nav links (text-dark utility) */
html[data-theme="dark"] .page-content .my-profile .page-aside a.text-dark,
html[data-theme="dark"] .page-content .my-profile .page-aside a {
  color: var(--text-color) !important;
}

/* NavBar dropdown text-black fw-bold link */
html[data-theme="dark"] .navbar .dropdown-item.text-black {
  color: var(--text-color) !important;
}

/* Generic card-title / card-text inside dark surfaces */
html[data-theme="dark"] .page-content .card-title,
html[data-theme="dark"] .page-content .card-text {
  color: var(--text-color) !important;
}

/* Bootstrap text utility classes that resolve to dark colors */
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-body-tertiary {
  color: var(--text-color) !important;
}

/* About page values/goals/vision/message card text */
html[data-theme="dark"] .page-content .values .value-title,
html[data-theme="dark"] .page-content .values .card-title,
html[data-theme="dark"] .page-content .values .card-text,
html[data-theme="dark"] .page-content .values .description,
html[data-theme="dark"] .page-content .goals .card .card-title,
html[data-theme="dark"] .page-content .goals .card .card-text,
html[data-theme="dark"] .page-content .vision .card .card-title,
html[data-theme="dark"] .page-content .vision .card .card-text,
html[data-theme="dark"] .page-content .message .card .card-title,
html[data-theme="dark"] .page-content .message .card .card-text {
  color: var(--text-color) !important;
}

/* Project details list items */
html[data-theme="dark"] .page-content .project-details ul li,
html[data-theme="dark"] .page-content .project-details ol li,
html[data-theme="dark"] .page-content .project-details .details li,
html[data-theme="dark"] .page-content .project-details .info-card .key,
html[data-theme="dark"] .page-content .project-details .info-card .value,
html[data-theme="dark"] .page-content .project-details .data-card .key,
html[data-theme="dark"] .page-content .project-details .data-card .value {
  color: var(--text-color) !important;
}

/* Spinner uses green that disappears on dark — keep it brand-teal */
html[data-theme="dark"] .loader-overlay .spinner-border {
  color: #6fb3a3 !important;
}

/* News page: title and body text */
html[data-theme="dark"] .page-content .news-title,
html[data-theme="dark"] .page-content .news-card .title,
html[data-theme="dark"] .page-content .news-item .title,
html[data-theme="dark"] .page-content .news .card .card-title,
html[data-theme="dark"] .page-content .news-list .card .card-title {
  color: var(--text-color) !important;
}

html[data-theme="dark"] .page-content .news-card .description,
html[data-theme="dark"] .page-content .news-item .description,
html[data-theme="dark"] .page-content .news .card .card-text,
html[data-theme="dark"] .page-content .news-list .card .card-text {
  color: var(--light-text-color) !important;
}

/* Policies/financial accordion text */
html[data-theme="dark"] .page-content .policies .accordion-body,
html[data-theme="dark"] .page-content .financial-statements .accordion-body {
  color: var(--text-color) !important;
}

/* Sign-in / auth label colors that use #A2A2A4 (already light-ish but ensure visible) */
html[data-theme="dark"] .sign-in-form .form-control::placeholder,
html[data-theme="dark"] .auth-form .form-control::placeholder,
html[data-theme="dark"] .reset-form .form-control::placeholder {
  color: var(--light-text-color) !important;
}

/* Ensure cards inherit readable text */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .offcanvas-body {
  color: var(--text-color);
}

/* Catch-all: any descendant of .page-content that uses pure black text */
html[data-theme="dark"] .page-content [style*="color: black" i],
html[data-theme="dark"] .page-content [style*="color:#000" i],
html[data-theme="dark"] .page-content [style*="color: #000" i] {
  color: var(--text-color) !important;
}

/* About page small-img border */
html[data-theme="dark"] .page-content .definition .small-img,
html[data-theme="dark"] .page-content .goals .card,
html[data-theme="dark"] .page-content .values .card {
  border-color: var(--border-color);
}

/* ============================================================
   Scroll reveal animation
   Elements marked .reveal-init start hidden and fade up when
   they enter the viewport (JS adds .is-visible).
   ============================================================ */
.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Honour user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .reveal-init,
  .reveal-init.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .navbar .navbar-nav .nav-item .dropdown-menu.show,
  .navbar .header-buttons .dropdown-menu.show {
    animation: none !important;
  }
}

/* ============================================================
   Initial page loader (logo + spinner)
   Rendered in App.razor body; JS removes it after window.load.
   ============================================================ */
.initial-page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

html[data-theme="dark"] .initial-page-loader {
  background-color: var(--background-color, #121212);
}

.initial-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.initial-page-loader .ipl-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}

.initial-page-loader .ipl-logo {
  width: 12rem;
  height: auto;
  object-fit: contain;
  animation: iplPulse 1.6s infinite ease-in-out;
  filter: drop-shadow(0 6px 18px rgba(73, 140, 124, 0.18));
}

.initial-page-loader .ipl-spinner {
  width: 3.2rem;
  height: 3.2rem;
  border: 3px solid rgba(73, 140, 124, 0.18);
  border-top-color: var(--primary-color, #498C7C);
  border-radius: 50%;
  animation: iplSpin 0.9s linear infinite;
}

html[data-theme="dark"] .initial-page-loader .ipl-spinner {
  border-color: rgba(241, 199, 90, 0.18);
  border-top-color: #f1c75a;
}

.initial-page-loader .ipl-text {
  color: var(--primary-color, #498C7C);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

html[data-theme="dark"] .initial-page-loader .ipl-text {
  color: #f1c75a;
}

@keyframes iplPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes iplSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .initial-page-loader .ipl-logo,
  .initial-page-loader .ipl-spinner {
    animation: none !important;
  }
}

/* ============================================================
   Silent Blazor reconnect toast
   Replaces the full-screen reconnect modal with a tiny non-blocking
   indicator at the bottom of the screen. The JS in App.razor only
   reveals it if reconnect actually takes more than ~1.5s, so the
   user almost never sees it on a quick tab-switch.
   ============================================================ */
#components-reconnect-modal.reconnect-toast {
  position: fixed;
  bottom: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background-color: #ffffff;
  color: #161616;
  border: 1px solid rgba(73, 140, 124, 0.18);
  border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(73, 140, 124, 0.35),
              0 4px 12px rgba(83, 98, 115, 0.08);
  font-size: 0.95rem;
  font-weight: 600;

  /* Hidden by default — JS adds .is-visible after the delay, and Blazor
     adds its own state classes which we explicitly override. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#components-reconnect-modal.reconnect-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#components-reconnect-modal .reconnect-toast-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--primary-color, #498C7C);
  box-shadow: 0 0 0 0 rgba(73, 140, 124, 0.6);
  animation: reconnectPulse 1.4s ease-in-out infinite;
}

@keyframes reconnectPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(73, 140, 124, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(73, 140, 124, 0); }
}

html[data-theme="dark"] #components-reconnect-modal.reconnect-toast {
  background-color: var(--surface-elevated);
  color: var(--text-color);
  border-color: rgba(73, 140, 124, 0.35);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6),
              0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Aggressively neutralize the default Blazor reconnect modal styling — even
   though we supply our own element with the same id, Blazor's state classes
   on <html> could still try to flex it into a fullscreen overlay. */
.components-reconnect-show #components-reconnect-modal,
.components-reconnect-hide #components-reconnect-modal,
.components-reconnect-failed #components-reconnect-modal,
.components-reconnect-rejected #components-reconnect-modal {
  display: flex !important;
  position: fixed !important;
  bottom: 1.25rem !important;
  inset-inline-end: 1.25rem !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  background: #ffffff !important;
}

html[data-theme="dark"].components-reconnect-show #components-reconnect-modal,
html[data-theme="dark"].components-reconnect-hide #components-reconnect-modal,
html[data-theme="dark"].components-reconnect-failed #components-reconnect-modal,
html[data-theme="dark"].components-reconnect-rejected #components-reconnect-modal {
  background: var(--surface-elevated) !important;
}

.components-reconnect-hide #components-reconnect-modal {
  display: none !important;
}