:root {
  color-scheme: light;
  --sfms-page: #fff8ff;
  --sfms-panel: #ffffff;
  --sfms-panel-soft: #fbf5ff;
  --sfms-panel-muted: #f3edf8;
  --sfms-border: #e2d8e9;
  --sfms-ink: #211c29;
  --sfms-muted: #6c6673;
  --sfms-sidebar: #302d36;
  --sfms-sidebar-hover: #45414c;
  --sfms-purple: #650ed4;
  --sfms-purple-hover: #5208b6;
}

html,
body {
  min-height: 100%;
  background: var(--sfms-page) !important;
  color: var(--sfms-ink) !important;
  color-scheme: light;
}

body,
body.bg-surface,
body.bg-background,
body.bg-zinc-950,
body.bg-slate-50 {
  background-color: var(--sfms-page) !important;
  color: var(--sfms-ink) !important;
}

/* Shared light surfaces used by the Tailwind-based screens. */
.bg-surface,
.bg-background,
.bg-surface\/80,
.bg-surface\/90,
.bg-zinc-950,
.bg-zinc-950\/90,
.bg-slate-50 {
  background-color: var(--sfms-page) !important;
}

.bg-surface-container,
.bg-surface-bright,
.bg-zinc-900,
.bg-white {
  background-color: var(--sfms-panel) !important;
}

.bg-surface-container-low,
.bg-surface-container-high,
.bg-zinc-800,
.bg-slate-100,
.bg-slate-200,
.bg-slate-50\/50 {
  background-color: var(--sfms-panel-soft) !important;
}

.border-outline,
.border-outline-variant,
.border-zinc-800,
.border-zinc-700,
.border-slate-100,
.border-slate-200 {
  border-color: var(--sfms-border) !important;
}

[class~="bg-[#17181c]"] {
  background-color: var(--sfms-page) !important;
}

[class~="bg-[#191a1f]"],
[class~="bg-white/[.03]"] {
  background-color: var(--sfms-panel) !important;
}

/* Dean dashboard cards previously kept a dark background after their text
   switched to the light theme, making table and filter labels unreadable. */
.section-card {
  background: var(--sfms-panel) !important;
  border-color: var(--sfms-border) !important;
  color: var(--sfms-ink) !important;
  box-shadow: 0 8px 24px rgb(33 28 41 / 10%);
}

.table-row-hover:hover {
  background: var(--sfms-panel-soft) !important;
}

[class~="border-white/10"] {
  border-color: var(--sfms-border) !important;
}

[class~="hover:bg-white/[.02]"]:hover,
.hover\:bg-white\/5:hover {
  background-color: var(--sfms-panel-soft) !important;
}

.text-on-surface,
.text-zinc-100,
.text-zinc-200,
.text-slate-900,
.text-slate-800,
.text-gray-900 {
  color: var(--sfms-ink) !important;
}

.text-on-surface-variant,
.text-zinc-300,
.text-zinc-400,
.text-zinc-500,
.text-gray-400,
.text-gray-300,
.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-slate-400,
.text-gray-600,
.text-gray-500 {
  color: var(--sfms-muted) !important;
}

/* The sidebar stays charcoal, as in the reference screen. */
#sidebar,
aside.sidebar-gradient,
.sidebar-gradient,
.bg-sidebar-bg {
  background: var(--sfms-sidebar) !important;
  color: #ffffff !important;
}

.sidebar-gradient a:hover,
#sidebar a:hover,
.bg-sidebar-bg a:hover {
  background-color: var(--sfms-sidebar-hover) !important;
}

/* Shared university identity block for every role sidebar. */
#sidebar > div:first-child {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 0 1.5rem !important;
  padding: 1rem 13px 0 !important;
}

#sidebar > div:first-child > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

#sidebar > div:first-child img[alt="College of Engineering Logo"] {
  display: block;
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 18px !important;
  border-radius: 50%;
  object-fit: contain;
}

#sidebar > div:first-child p:first-of-type {
  margin: 0 0 2px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  letter-spacing: 0;
}

#sidebar > div:first-child p:last-of-type {
  margin: 0 !important;
  color: rgb(255 255 255 / 60%) !important;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  letter-spacing: 0;
  text-transform: uppercase;
}

#sidebar > div:first-child > button {
  position: absolute;
  top: 6px;
  right: 6px;
}

#sidebar nav a[aria-current="page"],
.sidebar-gradient nav a[aria-current="page"] {
  background-color: var(--sfms-sidebar-hover) !important;
  border-left: 3px solid #b879ff;
  color: #ffffff !important;
}

/* Use the reference purple for primary controls and navigation accents. */
.bg-primary,
.bg-accent-indigo,
.bg-blue-600,
.bg-blue-700,
.bg-purple-600,
.bg-purple-700 {
  background-color: var(--sfms-purple) !important;
}

.hover\:bg-primary\/90:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-purple-700:hover {
  background-color: var(--sfms-purple-hover) !important;
}

.text-primary,
.text-accent-indigo,
.text-blue-300,
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-purple-600,
.text-purple-700 {
  color: var(--sfms-purple) !important;
}

/* Darker status foregrounds retain the existing green, amber, and red meaning
   while meeting contrast on the light surfaces used throughout the app. */
.text-accent-green,
.text-success {
  color: #187a43 !important;
}

.text-accent-amber,
.text-warning {
  color: #805200 !important;
}

.text-accent-red,
.text-error,
.text-danger {
  color: #b42318 !important;
}

.border-primary,
.border-accent-indigo,
.border-blue-500,
.border-purple-600 {
  border-color: var(--sfms-purple) !important;
}

/* Keep keyboard focus visible with the restored accent. */
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--sfms-purple);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sfms-purple);
  outline-offset: 2px;
}

input,
select,
textarea {
  color: var(--sfms-ink);
  background-color: var(--sfms-panel);
  border-color: var(--sfms-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--sfms-muted);
  opacity: 1;
}

/* Keep small labels readable and the shared sidebar icon alignment consistent. */
[class~="text-[10px]"],
[class~="text-[11px]"] {
  font-size: 0.75rem !important;
  line-height: 1.25rem;
}

#sidebar nav a > svg,
.sidebar-gradient nav a > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  stroke-width: 2;
}

/* Dialog panels use the light modal styling from the supplied reference. */
[role="dialog"] > div,
dialog,
div[id$="-modal"]:not([id$="-overlay"]),
div[id$="-dialog"] {
  background-color: var(--sfms-panel) !important;
  color: var(--sfms-ink) !important;
  border-color: var(--sfms-border) !important;
}

[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] p,
dialog h1,
dialog h2,
dialog h3,
dialog p {
  color: var(--sfms-ink);
}

[role="dialog"] .text-on-surface-variant,
dialog .text-on-surface-variant {
  color: var(--sfms-muted) !important;
}

/* Native and custom overlay backdrops remain dimmed over the light UI. */
dialog::backdrop,
#logout-modal-overlay,
[id$="-modal-overlay"] {
  background: rgb(25 20 31 / 52%);
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 1rem;
  }
}