/*
 * EDinBook unified visual language
 * Brand source: the charcoal (#343A4B) and gold (#FFB11A) Logo2.gif.
 * This file deliberately loads after legacy/bootstrap styles so every active
 * web surface shares the same typography, colour, spacing and interaction cues.
 */

:root {
  --ed-logo-charcoal: #343a4b;
  --ed-logo-gold: #ffb11a;
  --ed-midnight: #1b1f29;
  --ed-midnight-2: #343a4b;
  --ed-ink: #292f3d;
  --ed-slate: #5f5d58;
  --ed-muted: #74716b;
  --ed-primary: #a56600;
  --ed-primary-strong: #855200;
  --ed-primary-deep: #5c3900;
  --ed-gold: #d89100;
  --ed-gold-bright: #ffb11a;
  --ed-gold-soft: #fff3d6;
  --ed-champagne: #c5a769;
  --ed-champagne-soft: #f6f0e3;
  --ed-canvas: #f5f4f0;
  --ed-canvas-warm: #fbfaf7;
  --ed-surface: #ffffff;
  --ed-surface-soft: #faf9f6;
  --ed-border: #e2dfd7;
  --ed-border-strong: #cec9bd;
  --ed-success: #855200;
  --ed-warning: #855200;
  --ed-danger: #343a4b;
  --ed-info: #5f5d58;
  --ed-radius-sm: 0.55rem;
  --ed-radius: 0.85rem;
  --ed-radius-lg: 1.15rem;
  --ed-shadow-sm: 0 2px 8px rgba(27, 31, 41, 0.06);
  --ed-shadow: 0 12px 32px rgba(27, 31, 41, 0.1);
  --ed-shadow-lg: 0 24px 60px rgba(27, 31, 41, 0.18);
  --ed-focus: 0 0 0 0.22rem rgba(255, 177, 26, 0.24);
  --ed-font: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --bs-blue: var(--ed-primary);
  --bs-primary: var(--ed-primary);
  --bs-primary-rgb: 165, 102, 0;
  --bs-secondary: var(--ed-logo-charcoal);
  --bs-secondary-rgb: 52, 58, 75;
  --bs-success: var(--ed-success);
  --bs-success-rgb: 133, 82, 0;
  --bs-warning: var(--ed-warning);
  --bs-warning-rgb: 167, 100, 22;
  --bs-danger: var(--ed-danger);
  --bs-danger-rgb: 143, 52, 52;
  --bs-info: var(--ed-info);
  --bs-info-rgb: 95, 93, 88;
  --bs-body-color: var(--ed-ink);
  --bs-body-bg: var(--ed-canvas);
  --bs-border-color: var(--ed-border);
  --bs-link-color: var(--ed-primary);
  --bs-link-hover-color: var(--ed-primary-deep);
  --bs-font-sans-serif: var(--ed-font);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--ed-canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ed-ink);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 177, 26, 0.12), transparent 30rem),
    linear-gradient(180deg, var(--ed-canvas-warm) 0, var(--ed-canvas) 22rem);
  font-family: var(--ed-font);
  font-size: 0.96rem;
  line-height: 1.58;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #fff;
  background: var(--ed-primary);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(255, 177, 26, 0.36);
  outline-offset: 2px;
}

a {
  color: var(--ed-primary);
  text-decoration-color: rgba(165, 102, 0, 0.38);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--ed-primary-deep);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ed-midnight);
  font-family: var(--ed-font);
  font-weight: 700;
  letter-spacing: -0.025em;
}

p, li, td, label, input, textarea, select, button {
  font-family: var(--ed-font);
}

.text-muted {
  color: var(--ed-muted) !important;
}

.small, small {
  letter-spacing: 0.005em;
}

/* Surfaces */
.card,
.panel-card,
.auth-card,
.chart-box,
.sidebar-panel,
.question-card,
.student-assessment-card,
.score-answer-card {
  border: 1px solid var(--ed-border) !important;
  border-radius: var(--ed-radius-lg) !important;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--ed-shadow-sm);
}

.card {
  overflow: hidden;
}

.card-header,
.card-footer {
  border-color: var(--ed-border);
  background: linear-gradient(180deg, #fff, var(--ed-surface-soft));
}

.card-header {
  padding: 0.68rem 1rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  padding: 0.72rem 1rem;
}

.shadow,
.shadow-sm {
  box-shadow: var(--ed-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--ed-shadow-lg) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--ed-border) !important;
}

/* Controls */
.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--ed-radius-sm);
  font-weight: 650;
  letter-spacing: 0.005em;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease,
    border-color 150ms ease, color 150ms ease;
}

.btn {
  min-height: 2.55rem;
  padding: 0.58rem 1rem;
}

.btn-sm {
  min-height: 2.15rem;
  padding: 0.4rem 0.72rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.72rem 1.2rem;
}

.btn:hover:not(:disabled),
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary,
.bg-primary,
input[type="submit"].btn-primary {
  border-color: var(--ed-primary) !important;
  background-color: var(--ed-primary) !important;
}

.btn-primary {
  color: var(--ed-midnight) !important;
  background-image: linear-gradient(135deg, var(--ed-logo-gold), #e39b0d);
  box-shadow: 0 7px 18px rgba(165, 102, 0, 0.22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff !important;
  border-color: var(--ed-logo-charcoal) !important;
  background: var(--ed-logo-charcoal) !important;
  box-shadow: 0 9px 22px rgba(27, 31, 41, 0.26) !important;
}

.btn-outline-primary {
  color: var(--ed-primary);
  border-color: rgba(165, 102, 0, 0.55);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff !important;
  border-color: var(--ed-primary);
  background: var(--ed-primary);
}

.btn-secondary {
  border-color: var(--ed-midnight-2);
  background-color: var(--ed-midnight-2);
  color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
}

.btn-success {
  color: #fff !important;
  border-color: var(--ed-success) !important;
  background: var(--ed-success) !important;
}

.btn-warning {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
}

.btn-danger {
  color: #fff !important;
  border-color: var(--ed-danger) !important;
  background: var(--ed-danger) !important;
}

.btn-info {
  color: #fff !important;
  border-color: var(--ed-logo-charcoal) !important;
  background: var(--ed-logo-charcoal) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-info:hover,
.btn-info:focus {
  color: #fff !important;
  border-color: var(--ed-midnight) !important;
  background: var(--ed-midnight) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  color: #fff !important;
  border-color: #1b1f29 !important;
  background: #1b1f29 !important;
}

.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: var(--ed-midnight) !important;
}

.btn-link {
  color: var(--ed-primary);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--ed-border-strong) !important;
  border-radius: var(--ed-radius-sm);
  color: var(--ed-ink);
  background-color: #fff;
  box-shadow: none;
}

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single {
  min-height: 2.75rem;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: #88857d;
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2-container--focus .select2-selection {
  border-color: var(--ed-primary) !important;
  box-shadow: var(--ed-focus) !important;
}

.form-check-input:checked {
  border-color: var(--ed-primary);
  background-color: var(--ed-primary);
}

.form-label,
label {
  color: var(--ed-ink);
  font-weight: 600;
}

.input-group-text {
  color: var(--ed-slate);
  background: var(--ed-surface-soft);
}

/* Navigation */
.topnav {
  min-height: 4.3rem;
  border-bottom: 1px solid var(--ed-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 5px 24px rgba(27, 31, 41, 0.07) !important;
  backdrop-filter: blur(18px);
}

.topnav .navbar-brand {
  color: var(--ed-midnight) !important;
  font-size: 1.16rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.topbar .navbar-brand::before {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.52rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ed-primary), var(--ed-gold-bright));
  box-shadow: 0 0 0 0.25rem rgba(255, 177, 26, 0.14);
  content: "";
  vertical-align: 0.04em;
}

.topnav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}

.topbar-brand-logo {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.48rem;
  background: var(--ed-logo-charcoal);
  box-shadow: 0 5px 14px rgba(27, 31, 41, 0.16);
  object-fit: contain;
  object-position: center;
}

.topbar-profile-button {
  position: relative;
  display: inline-grid !important;
  width: 3rem !important;
  height: 3rem !important;
  min-height: 3rem !important;
  padding: 0.2rem !important;
  place-items: center;
  overflow: visible !important;
  border: 1px solid rgba(165, 102, 0, 0.34) !important;
  border-radius: 0.9rem !important;
  background: linear-gradient(145deg, var(--ed-gold-soft), var(--ed-surface)) !important;
  box-shadow: 0 6px 18px rgba(27, 31, 41, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.topbar-profile-button:hover,
.topbar-profile-button:focus,
.topbar-profile-button[aria-expanded="true"] {
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
  box-shadow: 0 0 0 0.22rem rgba(255, 177, 26, 0.22), 0 8px 22px rgba(27, 31, 41, 0.16) !important;
}

.topbar-profile-avatar,
.dropdown-user-avatar {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: #fff;
  border-radius: 0.68rem;
  background: linear-gradient(135deg, var(--ed-midnight), var(--ed-logo-charcoal));
  font-weight: 800;
  line-height: 1;
}

.topbar-profile-avatar {
  width: 2.48rem;
  height: 2.48rem;
  border: 2px solid var(--ed-logo-gold);
}

.topbar-profile-avatar img,
.dropdown-user-avatar img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  object-fit: cover;
}

.topbar-profile-initial {
  font-size: 0.82rem;
}

.topbar-profile-status {
  position: absolute;
  z-index: 2;
  right: -0.08rem;
  bottom: -0.08rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--ed-surface);
  border-radius: 50%;
  background: var(--ed-logo-gold);
  box-shadow: 0 1px 3px rgba(27, 31, 41, 0.22);
}

.dropdown-user-avatar {
  width: 2.85rem;
  height: 2.85rem;
  flex: 0 0 auto;
  margin-right: 0.8rem;
  border: 2px solid var(--ed-logo-gold);
  font-size: 0.9rem;
}

.sidenav {
  border-right: 1px solid var(--ed-border);
  background: #fff !important;
}

.sidenav-light .sidenav-menu .nav-link {
  margin: 0.1rem 0.7rem;
  border-radius: 0.68rem;
  color: #53514c;
  font-weight: 550;
}

.sidenav-light .sidenav-menu .nav-link:hover {
  color: var(--ed-primary-deep);
  background: var(--ed-gold-soft);
}

.sidenav-light .sidenav-menu .nav-link.active {
  color: var(--ed-primary-strong);
  background: linear-gradient(90deg, rgba(255, 177, 26, 0.18), rgba(255, 177, 26, 0.06));
  box-shadow: inset 3px 0 var(--ed-primary);
}

.sidenav-light .sidenav-menu .nav-link .nav-link-icon {
  color: var(--ed-gold);
}

.sidenav-menu-heading {
  color: #77736a !important;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.12em !important;
}

.navbar.topbar {
  min-height: 4.35rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
  box-shadow: 0 10px 28px rgba(27, 31, 41, 0.2);
}

.navbar.topbar .navbar-brand,
.navbar.topbar .text-muted,
.navbar.topbar .nav-link {
  color: #fff !important;
}

.navbar.topbar .badge {
  color: var(--ed-midnight) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.navbar.topbar .btn-outline-secondary,
.navbar.topbar .btn-outline-warning {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.navbar.topbar .btn-outline-secondary:hover,
.navbar.topbar .btn-outline-warning:hover {
  color: var(--ed-midnight);
  border-color: #fff;
  background: #fff;
}

.dropdown-menu {
  padding: 0.5rem;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--ed-shadow);
}

.dropdown-item {
  border-radius: 0.55rem;
  color: var(--ed-ink);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  color: var(--ed-primary-deep);
  background: var(--ed-gold-soft);
}

.nav-tabs {
  border-color: var(--ed-border);
}

.nav-tabs .nav-link.active {
  color: var(--ed-primary);
  border-color: var(--ed-border) var(--ed-border) #fff;
  font-weight: 700;
}

/* Data and status */
.table {
  --bs-table-color: var(--ed-ink);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 243, 214, 0.38);
  --bs-table-hover-bg: rgba(255, 243, 214, 0.62);
  border-color: var(--ed-border);
}

.table > :not(caption) > * > * {
  padding: 0.82rem 0.75rem;
  border-bottom-color: var(--ed-border);
}

.table thead th,
.management-table thead th,
.datatable-table thead th {
  color: var(--ed-logo-charcoal) !important;
  background: #f5f3ed !important;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.075em !important;
  text-transform: uppercase;
}

.badge {
  border-radius: 999px;
  padding: 0.42em 0.7em;
  font-weight: 650;
  letter-spacing: 0.015em;
}

.badge.bg-primary,
.text-bg-primary {
  color: #fff !important;
  background: var(--ed-primary) !important;
}

.alert {
  border-width: 1px;
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow-sm);
}

.alert-primary,
.alert-info {
  color: var(--ed-primary-deep);
  border-color: #eed6a5;
  background: #fff8e8;
}

.progress {
  border-radius: 999px;
  background: #e8e3d8;
}

.progress-bar {
  background: linear-gradient(90deg, var(--ed-primary), var(--ed-gold-bright));
}

.pagination .page-link {
  color: var(--ed-primary);
  border-color: var(--ed-border);
}

.pagination .page-item.active .page-link {
  color: #fff;
  border-color: var(--ed-primary);
  background: var(--ed-primary);
}

.modal-content,
.offcanvas,
.toast {
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-lg);
  background: #fff;
  box-shadow: var(--ed-shadow-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--ed-border);
}

/* Modal-header brand logo: several modals drop in the full logo, which renders
   oversized. Constrain it to a header-appropriate height everywhere at once. */
.modal-header .modal-title img,
.modal-title img[alt="EDinBook"] {
  height: 28px;
  width: auto;
  max-width: 150px;
  vertical-align: middle;
}

/* When a modal header sits on a dark background, keep its text/icons readable. */
.modal-header.bg-dark,
.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header[class*="bg-gradient"] {
  color: #fff;
}
.modal-header.bg-dark :is(.modal-title, small, .text-muted, .btn-close),
.modal-header.bg-primary :is(.modal-title, small, .text-muted, .btn-close),
.modal-header.bg-secondary :is(.modal-title, small, .text-muted, .btn-close),
.modal-header[class*="bg-gradient"] :is(.modal-title, small, .text-muted) {
  color: #fff !important;
}

/* Authentication, legal and error pages.
 * The ring artwork (copy-06.svg) is layered ON TOP of the ambient gradient —
 * multiple backgrounds list top layer first. This block is the single source
 * of truth for the ungated-page background: it previously listed gradients
 * only, which (being later in the file, with !important) overrode both the
 * pages' inline background-image AND any earlier ring rule — that is exactly
 * why the rings were invisible on every auth page. */
body.bg-primary,
body[class*="bg-primary"] {
  background-color: var(--ed-midnight) !important;
  background-image:
    url('/images/copy-06.svg'),
    linear-gradient(135deg, #1b1f29 0%, #343a4b 56%, #222733 100%) !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed !important;
}

#layoutAuthentication_content main {
  display: flex;
  min-height: calc(100vh - 5.5rem);
  align-items: center;
  padding-block: 2.5rem;
}

#layoutAuthentication .card {
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 80px rgba(7, 10, 27, 0.34) !important;
  backdrop-filter: blur(18px);
}

#layoutAuthentication .card-header img {
  max-width: 12rem;
  object-fit: contain;
}

#layoutAuthentication .card-header h1::after {
  display: block;
  width: 2.8rem;
  height: 0.18rem;
  margin: 0.65rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ed-primary), var(--ed-gold-bright));
  content: "";
}

.footer-admin,
#layoutAuthentication_footer {
  color: var(--ed-muted);
  border-top: 1px solid var(--ed-border);
  background: rgba(255, 255, 255, 0.92);
}

body.bg-primary #layoutAuthentication_footer {
  color: rgba(255, 255, 255, 0.76);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 35, 0.3);
}

body.bg-primary #layoutAuthentication_footer a {
  color: #fff;
}

/* Assessment and classroom */
.builder-shell,
.exam-shell {
  gap: 1.25rem;
}

.question-card-header {
  border-color: var(--ed-border);
  background: linear-gradient(90deg, #f7f4ed, #fffdf8);
}

.template-btn {
  color: var(--ed-primary);
  border-color: var(--ed-primary);
  background: #fff;
}

.template-btn:hover,
.class-check-card:hover,
.answer-option:hover {
  color: var(--ed-primary-deep);
  border-color: var(--ed-primary) !important;
  background: var(--ed-gold-soft) !important;
}

.student-assessment-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.student-assessment-card:hover {
  transform: translateY(-3px);
  border-color: rgba(165, 102, 0, 0.42) !important;
  box-shadow: var(--ed-shadow);
}

.score-main {
  color: var(--ed-primary) !important;
}

.exam-body {
  background: var(--ed-canvas) !important;
}

.exam-timer {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--ed-midnight);
}

.question-nav-btn.is-answered {
  color: var(--ed-success);
  border-color: rgba(133, 82, 0, 0.38);
  background: var(--ed-gold-soft);
}

.camera-preview {
  border-color: var(--ed-midnight-2);
  background: var(--ed-midnight);
}

:is(.template-btn, .class-check-card, .answer-option, .media-drop, .exam-timer, .proctor-check, .question-nav-btn) {
  color: var(--ed-ink) !important;
  border-color: var(--ed-border) !important;
  background: var(--ed-surface) !important;
}

.question-card-header {
  color: var(--ed-ink);
  background: var(--ed-surface-soft) !important;
}

:root[data-ed-theme="dark"] .question-nav-btn.is-answered {
  color: #ffd47c !important;
  border-color: rgba(255, 177, 26, 0.42) !important;
  background: var(--ed-gold-soft) !important;
}

/* Legacy bookstore and custom sections */
.store-section,
.store-search-section,
.store-featured-section,
.store-free-section,
.store-paid-section,
.store-publisher-section,
.store-department-section,
.store-periodical-section {
  --store-primary: var(--ed-primary) !important;
  --store-dark: var(--ed-primary-deep) !important;
  --store-light: #fff8e8 !important;
  --store-soft: var(--ed-gold-soft) !important;
  --store-border: rgba(165, 102, 0, 0.18) !important;
  --store-shadow: rgba(165, 102, 0, 0.19) !important;
}

.store-read-btn,
.store-action-btn.btn-primary {
  background: linear-gradient(135deg, var(--ed-primary-deep), var(--ed-primary)) !important;
}

.store-save-btn,
.store-empty-icon {
  color: var(--ed-primary) !important;
  background: var(--ed-gold-soft) !important;
}

.store-book-card,
.book-card,
.pricing-card {
  border-color: var(--ed-border) !important;
  border-radius: var(--ed-radius-lg) !important;
  box-shadow: var(--ed-shadow-sm) !important;
}

/* Public-store surfaces are tokenised as well; otherwise Dark appearance can
   place its light form labels and headings on legacy white cards. */
:is(.category-link, .store-search, .public-book-card, .store-empty) {
  color: var(--ed-ink) !important;
  border-color: var(--ed-border) !important;
  background: var(--ed-surface) !important;
}

.category-link :is(strong, i),
.public-book-body :is(h3, h3 a) {
  color: var(--ed-ink) !important;
}

.category-link:hover,
.category-link:hover :is(strong, i),
.public-book-body h3 a:hover {
  color: var(--ed-primary) !important;
}

:is(.public-book-body p, .store-empty) {
  color: var(--ed-muted) !important;
}

.public-book-cover {
  background: var(--ed-surface-soft) !important;
}

/* Standalone administration */
.admin-shell,
body > .container {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.admin-nav {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  min-height: 4.4rem;
  align-items: center;
  gap: 1.2rem;
  padding: 0.65rem clamp(1rem, 3vw, 2.5rem);
  color: #fff;
  border-bottom: 2px solid var(--ed-logo-gold);
  background: var(--ed-logo-charcoal);
  box-shadow: 0 10px 28px rgba(27, 31, 41, 0.18);
}

.admin-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.72rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
}

.admin-brand:hover {
  color: var(--ed-logo-gold);
}

.admin-brand img {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.65rem;
  object-fit: cover;
}

.admin-brand small {
  display: block;
  color: #cfd2da;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-nav nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.25rem;
}

.admin-nav nav a,
.admin-portal-link {
  padding: 0.48rem 0.68rem;
  color: #e9e9eb;
  border-radius: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.admin-nav nav a:hover,
.admin-nav nav a.active,
.admin-nav nav a[aria-current="page"] {
  color: var(--ed-midnight);
  background: var(--ed-logo-gold);
}

.admin-portal-link {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.admin-portal-link:hover {
  color: var(--ed-midnight);
  border-color: var(--ed-logo-gold);
  background: var(--ed-logo-gold);
}

.admin-shell {
  padding-block: 2.4rem 4rem;
}

.admin-page-heading {
  margin-bottom: 1.6rem;
}

.admin-page-heading h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.admin-eyebrow {
  margin: 0 0 0.2rem;
  color: var(--ed-primary);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
}

.admin-action-card {
  display: block;
  min-height: 10rem;
  padding: 1.25rem;
  color: var(--ed-ink);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-lg);
  background: #fff;
  box-shadow: var(--ed-shadow-sm);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-action-card:hover {
  transform: translateY(-3px);
  color: var(--ed-ink);
  border-color: var(--ed-logo-gold);
  box-shadow: var(--ed-shadow);
}

.admin-action-card strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ed-midnight);
  font-size: 1.05rem;
}

.admin-action-card span {
  color: var(--ed-muted);
  font-size: 0.88rem;
}

.admin-panel {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-lg);
  background: #fff;
  box-shadow: var(--ed-shadow-sm);
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.admin-form-grid label {
  display: grid;
  gap: 0.38rem;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
  width: 100%;
  min-height: 2.7rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid var(--ed-border-strong);
  border-radius: var(--ed-radius-sm);
  background: #fff;
}

.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus {
  border-color: var(--ed-logo-gold);
  box-shadow: var(--ed-focus);
  outline: none;
}

.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  background: #fff;
}

.admin-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.78rem;
  border-bottom: 1px solid var(--ed-border);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: #505665;
  background: #f5f3ed;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-footer {
  padding: 1.25rem;
  color: var(--ed-muted);
  border-top: 1px solid var(--ed-border);
  background: #fff;
  font-size: 0.78rem;
  text-align: center;
}

.stats {
  align-items: stretch;
  gap: 1rem;
}

.stats > .card {
  min-width: 11rem;
  padding: 1.15rem;
  color: var(--ed-ink);
  text-align: left;
}

.stats > .card h2 {
  color: var(--ed-primary);
  font-variant-numeric: tabular-nums;
}

.chart-box {
  margin-top: 1.25rem;
  padding: 1.25rem;
  color: var(--ed-ink);
}

canvas {
  max-width: 100%;
}

/* Compact page framing and publisher library */
.page-header.page-header-dark {
  position: relative;
  padding-bottom: 2.5rem !important;
  overflow: hidden;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 177, 26, 0.58);
  background:
    radial-gradient(circle at 90% 0, rgba(255, 177, 26, 0.28), transparent 18rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
}

.page-header.page-header-dark::after {
  position: absolute;
  right: -7rem;
  bottom: -12rem;
  width: 24rem;
  height: 24rem;
  border: 4rem solid rgba(255, 177, 26, 0.10);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.page-header.page-header-dark .container,
.page-header.page-header-dark .container-fluid,
.page-header.page-header-dark .container-xl {
  position: relative;
  z-index: 1;
}

.page-header.page-header-dark .page-header-title,
.page-header.page-header-dark .page-header-subtitle,
.page-header.page-header-dark .page-header-icon {
  color: #fff !important;
  text-shadow: none !important;
}

.page-header.page-header-dark .page-header-icon {
  color: var(--ed-logo-gold) !important;
}

.page-header.page-header-dark .page-header-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

.page-header-content {
  padding-top: 1.35rem !important;
}

.page-header.page-header-dark + .container.mt-n10,
.page-header.page-header-dark + .container-fluid.mt-n10,
.page-header.page-header-dark + .container-xl.mt-n10 {
  margin-top: 0 !important;
}

.eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ed-logo-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.publisher-library-header {
  min-height: 14rem;
  margin-bottom: 1.5rem !important;
  padding: 2.4rem 0 2.5rem !important;
  background:
    radial-gradient(circle at 90% 0, rgba(255, 177, 26, 0.28), transparent 18rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
}

.publisher-library-header .page-header-content {
  display: flex;
  min-height: 9.1rem;
  align-items: stretch;
  flex-direction: column;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.publisher-library-header .page-header-content > :is(.row, .d-flex, form) {
  width: 100%;
}

.publisher-library-header .page-header-content > .row {
  margin-inline: 0;
}

.publisher-library-header .page-header-content > form {
  max-width: 58rem;
  margin-top: 0.85rem;
}

.publisher-library-header .page-header-content :is(.pt-3, .pt-4) {
  padding-top: 0 !important;
}

.publisher-library-header .page-header-content :is(.mt-4, .mb-3) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.publisher-library-header .eyebrow {
  margin-bottom: 0.42rem;
  color: var(--ed-logo-gold) !important;
}

.publisher-library-header .page-header-title {
  margin-bottom: 0.38rem !important;
}

.publisher-library-header .page-header-subtitle {
  max-width: 52rem;
  margin: 0 !important;
}

.publisher-library-header .page-header-title,
.publisher-library-header .page-header-subtitle {
  color: #fff !important;
}

.publisher-library-header .page-header-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
}

.publisher-library-add {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  align-self: flex-start;
}

.publisher-library-add svg,
.publisher-library-card .btn svg {
  width: 1rem;
  height: 1rem;
}

.publisher-library-content {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-bottom: 4rem;
}

body > .hero,
main > .hero,
header.hero {
  margin-bottom: 1.5rem;
}

.publisher-library-card {
  box-shadow: var(--ed-shadow);
}

.publisher-library-card .card-header h2 {
  color: var(--ed-midnight);
}

.card-header-meta {
  display: block;
  margin-top: 0.08rem;
  color: var(--ed-muted);
  font-size: 0.73rem;
  font-weight: 550;
}

.publisher-library-search {
  position: relative;
  width: min(100%, 15rem);
  margin: 0;
}

.publisher-library-search svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.72rem;
  width: 0.92rem;
  height: 0.92rem;
  color: var(--ed-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.publisher-library-search .form-control {
  min-height: 2.22rem;
  padding-left: 2.12rem;
}

.publisher-book-cell {
  display: flex;
  min-width: 14rem;
  align-items: center;
  gap: 0.78rem;
}

.publisher-book-cell strong,
.publisher-book-id {
  display: block;
}

.publisher-book-cell strong {
  color: var(--ed-ink);
}

.publisher-book-id {
  margin-top: 0.12rem;
  color: var(--ed-muted);
  font-size: 0.72rem;
}

.publisher-book-cover {
  width: 2.8rem;
  height: 3.7rem !important;
  flex: 0 0 auto;
  border: 1px solid var(--ed-border);
  border-radius: 0.42rem;
  background: var(--ed-surface-soft);
  box-shadow: var(--ed-shadow-sm);
  object-fit: cover;
}

.book-code {
  padding: 0.25rem 0.42rem;
  color: var(--ed-logo-charcoal);
  border: 1px solid var(--ed-border);
  border-radius: 0.38rem;
  background: var(--ed-surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
}

.publisher-status {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.58rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.publisher-status::before {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-published {
  color: #5c3900;
  background: #fff0c9;
}

.status-review {
  color: var(--ed-logo-charcoal);
  background: #e8e6e0;
}

.status-draft {
  color: #fff;
  background: var(--ed-logo-charcoal);
}

.publisher-library-empty,
.publisher-filter-empty {
  padding: clamp(2.4rem, 8vw, 5rem) 1.25rem;
  text-align: center;
}

.publisher-library-empty p {
  color: var(--ed-muted);
}

.empty-state-icon {
  display: inline-grid;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--ed-midnight);
  border-radius: 1.2rem;
  background: var(--ed-logo-gold);
}

.empty-state-icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

.publisher-filter-empty {
  margin: 0;
  color: var(--ed-muted);
}

/* Dashboard wallet */
.dashboard-wallet-card {
  position: relative;
  display: grid;
  min-width: min(100%, 23rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  overflow: hidden;
  padding: 1rem 1.05rem;
  color: #fff;
  border: 1px solid rgba(255, 177, 26, 0.48);
  border-radius: var(--ed-radius-lg);
  background:
    radial-gradient(circle at 90% 0, rgba(255, 177, 26, 0.28), transparent 8rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal));
  box-shadow: 0 14px 34px rgba(27, 31, 41, 0.20);
}

.dashboard-wallet-card::after {
  position: absolute;
  right: -2.2rem;
  bottom: -3.4rem;
  width: 7rem;
  height: 7rem;
  border: 1rem solid rgba(255, 177, 26, 0.10);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

/* Reusable "background ring" — the same corner ring the wallet card uses,
   for the publish dashboard statistics cards. Translucent white so it reads on
   any card colour; kept behind the card content and non-interactive. */
.ed-stat-ring {
  position: relative;
  overflow: hidden;
}

.ed-stat-ring > * {
  position: relative;
  z-index: 1;
}

.ed-stat-ring::after {
  position: absolute;
  right: -2.2rem;
  bottom: -3.4rem;
  z-index: 0;
  width: 7rem;
  height: 7rem;
  border: 1rem solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.dashboard-wallet-icon {
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  color: var(--ed-midnight);
  border-radius: 0.78rem;
  background: var(--ed-logo-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.dashboard-wallet-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dashboard-wallet-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.05rem;
}

.dashboard-wallet-eyebrow {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dashboard-wallet-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 0.79rem;
  font-weight: 650;
  letter-spacing: 0;
}

.dashboard-wallet-balance {
  color: var(--ed-logo-gold);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.dashboard-wallet-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.48rem 0.7rem;
  color: var(--ed-midnight);
  border: 1px solid var(--ed-logo-gold);
  border-radius: 0.62rem;
  background: var(--ed-logo-gold);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.dashboard-wallet-action:hover,
.dashboard-wallet-action:focus {
  color: #fff;
  border-color: #fff;
  background: transparent;
}

.dashboard-wallet-action svg {
  width: 0.92rem;
  height: 0.92rem;
}

/* Library and discovery cards use the same compact system header and tokens. */
.store-section,
.pinned-books-section,
.resume-reading-section {
  overflow: hidden;
  border: 1px solid var(--ed-border) !important;
  border-radius: var(--ed-radius-lg) !important;
  background: var(--ed-surface) !important;
  box-shadow: var(--ed-shadow-sm) !important;
}

.store-section-header,
.store-section-header.featured,
.store-section-header.paid,
.store-section-header.free,
.pinned-books-header,
.resume-reading-header {
  position: relative;
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  padding: 0.7rem 1rem !important;
  overflow: hidden;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 177, 26, 0.58) !important;
  background:
    radial-gradient(circle at 92% -30%, rgba(255, 177, 26, 0.30), transparent 9rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
  box-shadow: inset 0 -1px rgba(255, 177, 26, 0.12) !important;
}

.store-section-header::after,
.pinned-books-header::after,
.resume-reading-header::after {
  position: absolute !important;
  right: -2.2rem !important;
  bottom: -3.9rem !important;
  display: block !important;
  width: 7.5rem !important;
  height: 7.5rem !important;
  border: 1rem solid rgba(255, 177, 26, 0.10) !important;
  border-radius: 50% !important;
  background: transparent !important;
  content: "" !important;
  pointer-events: none !important;
}

.store-section-title,
.pinned-books-title,
.resume-reading-title {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 0.96rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.012em !important;
}

.store-section-title small,
.store-section-title .fw-300,
.pinned-books-title small,
.resume-reading-title small {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.75rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.store-section-icon,
.pinned-books-title-icon,
.resume-reading-title-icon {
  display: inline-flex;
  width: 2.15rem !important;
  height: 2.15rem !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ed-midnight) !important;
  border-radius: 0.62rem !important;
  background: var(--ed-logo-gold) !important;
  box-shadow: none !important;
}

.store-section-header > .d-flex {
  position: relative;
  z-index: 1;
  width: 100%;
}

.store-section-count {
  color: rgba(255, 255, 255, 0.76) !important;
}

.store-section-body,
.pinned-books-body,
.resume-reading-body {
  padding: 1rem !important;
  background: var(--ed-surface-soft) !important;
}

.store-section-footer,
.pinned-view-all,
.resume-view-all {
  padding: 0.72rem 1rem !important;
  border-top: 1px solid var(--ed-border) !important;
  background: var(--ed-surface) !important;
}

.store-book-card,
.pinned-book-card,
.resume-book-card,
.store-empty-state,
.pinned-empty-state,
.resume-empty-state {
  color: var(--ed-ink);
  border: 1px solid var(--ed-border) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-surface) !important;
  box-shadow: 0 4px 16px rgba(27, 31, 41, 0.08) !important;
}

.store-book-card:hover,
.pinned-book-card:hover,
.resume-book-card:hover {
  transform: translateY(-3px);
  border-color: rgba(165, 102, 0, 0.48) !important;
  box-shadow: var(--ed-shadow) !important;
}

.store-book-cover-wrap,
.pinned-book-cover-wrap,
.store-book-placeholder,
.pinned-book-cover-placeholder,
.resume-book-cover-placeholder {
  background: linear-gradient(135deg, var(--ed-gold-soft), var(--ed-champagne-soft)) !important;
}

.store-book-placeholder,
.pinned-book-cover-placeholder,
.resume-book-cover-placeholder,
.store-empty-icon,
.pinned-empty-icon,
.resume-empty-icon {
  color: var(--ed-primary-deep) !important;
}

.store-book-badge,
.pinned-book-badge {
  color: var(--ed-primary-deep) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.store-book-open,
.pinned-book-open {
  color: var(--ed-primary-deep) !important;
  background: #fff !important;
}

.store-book-open:hover,
.pinned-book-open:hover {
  color: var(--ed-midnight) !important;
  background: var(--ed-logo-gold) !important;
}

.store-book-title,
.store-book-title a,
.pinned-book-title-text,
.pinned-book-title-text a,
.resume-book-title,
.resume-progress-head,
.resume-meta-small strong {
  color: var(--ed-ink) !important;
}

.store-book-title a:hover,
.pinned-book-title-text a:hover {
  color: var(--ed-primary) !important;
}

.store-book-author,
.pinned-book-author {
  color: var(--ed-muted) !important;
  background: var(--ed-surface-soft) !important;
}

.store-book-author-icon,
.pinned-book-author-icon {
  color: var(--ed-primary-deep) !important;
  background: var(--ed-gold-soft) !important;
}

/* Author avatar replaces the generic user icon when a profile image exists. */
.store-book-author-icon {
  overflow: hidden;
}
.store-book-author-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Author profile block: avatar beside a stacked column of name + department +
   institution. The column is vertically centred against the avatar, so when a
   department or institution is absent the remaining lines stay centred rather
   than snapping to the top. */
.store-book-author {
  align-items: center !important;
}
.store-book-author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}
.store-book-author-name {
  font-weight: 700;
  color: var(--ed-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Author metadata rows (department, school/institution, release date). */
.store-book-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--ed-muted);
}
/* Inside the profile block the column gap handles spacing. */
.store-book-author-info .store-book-meta {
  margin-top: 0;
}
.store-book-meta i {
  width: 1rem;
  text-align: center;
  color: var(--ed-primary-deep);
  flex: 0 0 auto;
}
.store-book-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price: larger and bold per request. */
.store-book-price {
  margin-top: 0.55rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ed-primary-deep);
}
.store-book-price-free {
  color: #1b7f4b;
}

/* Engagement stats row: views / saves / activity. */
.store-book-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--ed-border);
  font-size: 0.8rem;
  color: var(--ed-muted);
}
.store-book-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-variant-numeric: tabular-nums;
}
.store-book-stat i {
  color: var(--ed-primary-deep);
}

.store-save-btn,
.store-remove-btn,
.pinned-remove-btn {
  color: var(--ed-primary-deep) !important;
  border: 1px solid rgba(165, 102, 0, 0.36) !important;
  background: var(--ed-gold-soft) !important;
  box-shadow: none !important;
}

.store-save-btn:hover,
.store-remove-btn:hover,
.pinned-remove-btn:hover {
  color: #fff !important;
  border-color: var(--ed-logo-charcoal) !important;
  background: var(--ed-logo-charcoal) !important;
  box-shadow: var(--ed-shadow-sm) !important;
}

.store-read-btn,
.resume-read-btn,
.read-book-btn {
  color: var(--ed-logo-gold) !important;
  border: 1px solid var(--ed-logo-gold) !important;
  background: linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
  box-shadow: none !important;
}

.store-read-btn:hover,
.store-read-btn:focus,
.resume-read-btn:hover,
.resume-read-btn:focus,
.read-book-btn:hover,
.read-book-btn:focus {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
  box-shadow: var(--ed-shadow-sm) !important;
}

.resume-progress-bar {
  background: linear-gradient(90deg, var(--ed-primary), var(--ed-logo-gold)) !important;
  box-shadow: 0 0 12px rgba(165, 102, 0, 0.24) !important;
}

.resume-book-bottom {
  border-color: var(--ed-border) !important;
  background: var(--ed-surface) !important;
}

.store-view-all-btn,
.pinned-view-all a,
.resume-view-all a {
  color: var(--ed-primary) !important;
}

/* Bootstrap status utilities are deliberately brand-toned; red remains
   reserved for destructive actions and validation errors. */
.bg-success,
.badge.bg-success,
.text-bg-success {
  color: #fff !important;
  background-color: var(--ed-success) !important;
}

.bg-info,
.badge.bg-info,
.text-bg-info {
  color: #fff !important;
  background-color: var(--ed-logo-charcoal) !important;
}

.bg-warning,
.badge.bg-warning,
.text-bg-warning {
  color: var(--ed-midnight) !important;
  background-color: var(--ed-logo-gold) !important;
}

.text-success,
.text-info,
.text-warning {
  color: var(--ed-primary-deep) !important;
}

/* Sidenav accordion controls use buttons for correct semantics. */
.sidenav-light .sidenav-menu .sidenav-group-toggle {
  width: calc(100% - 1.4rem);
  border: 0;
  background: transparent;
  text-align: left;
}

.sidenav-group-toggle .sidenav-collapse-arrow {
  margin-left: auto;
}

/* Appearance control */
.ed-theme-switcher {
  position: fixed;
  z-index: 1095;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  color: var(--ed-ink);
  font-family: var(--ed-font);
}

.ed-theme-toggle {
  display: flex;
  min-width: 8.8rem;
  min-height: 3rem;
  align-items: center;
  gap: 0.68rem;
  padding: 0.52rem 0.78rem;
  color: #fff;
  border: 1px solid rgba(255, 177, 26, 0.5);
  border-radius: 0.8rem;
  background: var(--ed-logo-charcoal);
  box-shadow: 0 12px 32px rgba(27, 31, 41, 0.24);
}

.ed-theme-toggle:hover,
.ed-theme-toggle:focus {
  color: var(--ed-midnight);
  border-color: var(--ed-logo-gold);
  background: var(--ed-logo-gold);
}

.ed-theme-toggle-mark {
  width: 1.02rem;
  height: 1.02rem;
  flex: 0 0 auto;
  border: 0.26rem solid currentColor;
  border-radius: 50%;
  background: var(--ed-logo-gold);
  box-shadow: inset 0 0 0 0.14rem var(--ed-logo-charcoal);
}

.ed-theme-toggle-copy {
  display: grid;
  line-height: 1.08;
  text-align: left;
}

.ed-theme-toggle-copy > span {
  font-size: 0.62rem;
  font-weight: 550;
  opacity: 0.75;
}

.ed-theme-toggle-copy strong {
  font-size: 0.78rem;
  font-weight: 750;
}

.ed-theme-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.55rem);
  width: 13.5rem;
  padding: 0.42rem;
  border: 1px solid var(--ed-border);
  border-radius: 0.9rem;
  background: var(--ed-surface);
  box-shadow: var(--ed-shadow-lg);
}

.ed-theme-menu[hidden] {
  display: none !important;
}

.ed-theme-option {
  display: grid;
  width: 100%;
  min-height: 2.65rem;
  grid-template-columns: 1.25rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.48rem 0.58rem;
  color: var(--ed-ink);
  border: 0;
  border-radius: 0.62rem;
  background: transparent;
  font-size: 0.82rem;
  text-align: left;
}

.ed-theme-option:hover,
.ed-theme-option:focus,
.ed-theme-option.is-active {
  color: var(--ed-midnight);
  background: var(--ed-gold-soft);
}

.ed-theme-swatch {
  width: 1.18rem;
  height: 1.18rem;
  border: 1px solid var(--ed-border-strong);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.2rem rgba(255, 255, 255, 0.72);
}

.ed-theme-swatch-light {
  background: #faf9f6;
}

.ed-theme-swatch-dark {
  background: #1b1f29;
}

.ed-theme-swatch-contemporary {
  background: linear-gradient(135deg, #343a4b 0 50%, #ffb11a 50%);
}

.ed-theme-check {
  color: var(--ed-primary-deep);
  font-weight: 850;
  opacity: 0;
}

.ed-theme-option.is-active .ed-theme-check {
  opacity: 1;
}

/* Dark appearance */
:root[data-ed-theme="dark"] {
  color-scheme: dark;
  --ed-ink: #f7f3e9;
  --ed-slate: #c3bfb5;
  --ed-muted: #aaa69d;
  --ed-primary: #ffb11a;
  --ed-primary-strong: #ffc454;
  --ed-primary-deep: #ffd47c;
  --ed-gold: #ffb11a;
  --ed-gold-soft: #3e3422;
  --ed-champagne-soft: #332f28;
  --ed-canvas: #1b1f29;
  --ed-canvas-warm: #202530;
  --ed-surface: #242936;
  --ed-surface-soft: #2d3342;
  --ed-border: #484d59;
  --ed-border-strong: #606572;
  --bs-body-color: var(--ed-ink);
  --bs-body-bg: var(--ed-canvas);
  --bs-link-color: var(--ed-primary);
  --bs-link-hover-color: #ffd47c;
}

:root[data-ed-theme="dark"] body {
  color: var(--ed-ink);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 177, 26, 0.12), transparent 28rem),
    var(--ed-canvas);
}

/* Dark theme: native <select> options and Select2 dropdown items rendered dark
   text on a dark surface, so unselected / list items were invisible (fine on
   the light themes). Give them explicit light-on-dark colours; the highlighted
   option uses the gold accent with dark text for readability. */
:root[data-ed-theme="dark"] select,
:root[data-ed-theme="dark"] .form-select,
:root[data-ed-theme="dark"] select option,
:root[data-ed-theme="dark"] .form-select option,
:root[data-ed-theme="dark"] select optgroup {
  color: var(--ed-ink);
  background-color: var(--ed-surface);
}

:root[data-ed-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-ed-theme="dark"] .select2-container--default .select2-selection--multiple,
:root[data-ed-theme="dark"] .select2-dropdown,
:root[data-ed-theme="dark"] .select2-results__option {
  color: var(--ed-ink);
  background-color: var(--ed-surface);
  border-color: var(--ed-border);
}

:root[data-ed-theme="dark"] .select2-container--default .select2-selection__rendered,
:root[data-ed-theme="dark"] .select2-selection__placeholder,
:root[data-ed-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  color: var(--ed-ink) !important;
}

:root[data-ed-theme="dark"] .select2-results__option--highlighted,
:root[data-ed-theme="dark"] .select2-results__option[aria-selected="true"] {
  color: #1b1f29 !important;
  background-color: var(--ed-primary) !important;
}

:root[data-ed-theme="dark"] .select2-search--dropdown .select2-search__field {
  color: var(--ed-ink);
  background-color: var(--ed-canvas);
  border-color: var(--ed-border);
}

:root[data-ed-theme="dark"] .page-header.page-header-dark {
  color: #fff !important;
  border-color: rgba(255, 177, 26, 0.44);
  background:
    radial-gradient(circle at 90% 0, rgba(255, 177, 26, 0.28), transparent 18rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
}

:root[data-ed-theme="dark"] .page-header.page-header-dark .page-header-title,
:root[data-ed-theme="dark"] .page-header.page-header-dark .page-header-subtitle {
  color: #fff !important;
}

:root[data-ed-theme="dark"] .page-header.page-header-dark .page-header-icon,
:root[data-ed-theme="dark"] .publisher-library-header .eyebrow {
  color: var(--ed-logo-gold) !important;
}

:root[data-ed-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
:root[data-ed-theme="dark"] label,
:root[data-ed-theme="dark"] .publisher-book-cell strong,
:root[data-ed-theme="dark"] .publisher-library-card .card-header h2,
:root[data-ed-theme="dark"] .admin-action-card strong {
  color: var(--ed-ink);
}

:root[data-ed-theme="dark"] :is(.card, .panel-card, .auth-card, .chart-box, .sidebar-panel, .question-card, .student-assessment-card, .score-answer-card, .admin-panel, .admin-action-card, .admin-table-wrap),
:root[data-ed-theme="dark"] :is(.modal-content, .offcanvas, .toast, .dropdown-menu),
:root[data-ed-theme="dark"] .admin-footer,
:root[data-ed-theme="dark"] .footer-admin {
  color: var(--ed-ink);
  background: var(--ed-surface) !important;
}

:root[data-ed-theme="dark"] :is(.card-header, .card-footer, .question-card-header) {
  color: var(--ed-ink);
  background: var(--ed-surface-soft);
}

:root[data-ed-theme="dark"] :is(.form-control, .form-select, .form-check-input, .input-group-text),
:root[data-ed-theme="dark"] :is(.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea) {
  color: var(--ed-ink);
  background-color: #202530;
}

:root[data-ed-theme="dark"] .form-control::placeholder,
:root[data-ed-theme="dark"] textarea::placeholder,
:root[data-ed-theme="dark"] input::placeholder {
  color: #aaa69d;
}

:root[data-ed-theme="dark"] .topnav,
:root[data-ed-theme="dark"] .sidenav {
  color: var(--ed-ink);
  border-color: var(--ed-border) !important;
  background: var(--ed-surface) !important;
}

:root[data-ed-theme="dark"] .topnav .navbar-brand,
:root[data-ed-theme="dark"] .sidenav-light .sidenav-menu .nav-link,
:root[data-ed-theme="dark"] .dropdown-item {
  color: var(--ed-ink) !important;
}

:root[data-ed-theme="dark"] .table {
  --bs-table-color: var(--ed-ink);
  --bs-table-striped-color: var(--ed-ink);
  --bs-table-striped-bg: rgba(255, 177, 26, 0.05);
  --bs-table-hover-color: var(--ed-ink);
  --bs-table-hover-bg: rgba(255, 177, 26, 0.09);
}

:root[data-ed-theme="dark"] :is(.table thead th, .management-table thead th, .datatable-table thead th, .admin-table th) {
  color: #f3ead7 !important;
  background: #343a4b !important;
}

:root[data-ed-theme="dark"] :is(.book-code, .input-group-text) {
  color: var(--ed-ink);
  background: var(--ed-surface-soft);
}

:root[data-ed-theme="dark"] :is(.store-book-badge, .pinned-book-badge, .store-book-open, .pinned-book-open) {
  color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-charcoal) !important;
}

:root[data-ed-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--ed-logo-gold);
  border-color: var(--ed-border) var(--ed-border) var(--ed-surface);
  background: var(--ed-surface);
}

:root[data-ed-theme="dark"] .ed-theme-option:hover,
:root[data-ed-theme="dark"] .ed-theme-option:focus,
:root[data-ed-theme="dark"] .ed-theme-option.is-active {
  color: #fff;
}

/* Contemporary is an editorial, higher-contrast interpretation of the same
   two logo colours—not an additional accent palette. */
:root[data-ed-theme="contemporary"] {
  color-scheme: light;
  --ed-ink: #252a35;
  --ed-slate: #5a5852;
  --ed-muted: #6c6961;
  --ed-primary: #8c5700;
  --ed-primary-strong: #704600;
  --ed-primary-deep: #533400;
  --ed-canvas: #e9e4da;
  --ed-canvas-warm: #f7f1e4;
  --ed-surface: #fffdf8;
  --ed-surface-soft: #f3ecdd;
  --ed-border: #ccc2ae;
  --ed-border-strong: #a99d87;
  --ed-radius: 0.45rem;
  --ed-radius-lg: 0.62rem;
  --ed-shadow-sm: 4px 4px 0 rgba(52, 58, 75, 0.10);
  --ed-shadow: 9px 10px 0 rgba(52, 58, 75, 0.12);
}

:root[data-ed-theme="contemporary"] body {
  background:
    linear-gradient(115deg, transparent 0 76%, rgba(255, 177, 26, 0.12) 76% 77%, transparent 77%),
    radial-gradient(circle at 8% 4%, rgba(255, 177, 26, 0.18), transparent 24rem),
    var(--ed-canvas);
}

:root[data-ed-theme="contemporary"] .topnav {
  color: #fff;
  border-bottom: 3px solid var(--ed-logo-gold) !important;
  background: var(--ed-logo-charcoal) !important;
}

:root[data-ed-theme="contemporary"] .topnav .navbar-brand,
:root[data-ed-theme="contemporary"] .topnav .btn-transparent-dark {
  color: #fff !important;
}

:root[data-ed-theme="contemporary"] .card,
:root[data-ed-theme="contemporary"] .admin-panel,
:root[data-ed-theme="contemporary"] .admin-action-card {
  border-top: 3px solid var(--ed-logo-gold) !important;
}

:root[data-ed-theme="contemporary"] .card-header {
  background: var(--ed-surface-soft);
}

:root[data-ed-theme="contemporary"] .sidenav {
  background: #f7f1e4 !important;
}

/* Usability safeguards */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img:not([height]) {
  height: auto;
}

.table-responsive,
.datatable-wrapper,
.dataTables_wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.edin-loader-overlay {
  background: rgba(27, 31, 41, 0.74) !important;
  backdrop-filter: blur(8px);
}

.edin-loader-box {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ed-radius-lg);
  background: var(--ed-midnight-2);
  box-shadow: var(--ed-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 991.98px) {
  body {
    font-size: 0.94rem;
  }

  .navbar.topbar {
    align-items: flex-start;
    gap: 0.7rem;
    padding-block: 0.75rem;
  }

  .navbar.topbar > .d-flex {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .card-body {
    padding: 1.05rem;
  }

  .publisher-library-header {
    min-height: 12rem;
    padding: 1.5rem 0 2.5rem !important;
  }

  .dashboard-wallet-card {
    width: 100%;
  }

  .builder-shell,
  .exam-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-nav {
    position: static;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-nav nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .admin-nav nav a {
    flex: 0 0 auto;
  }
}

@media (max-width: 575.98px) {
  :root {
    --ed-radius-lg: 0.95rem;
  }

  body {
    background: var(--ed-canvas);
  }

  h1, .h1 {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  h2, .h2 {
    font-size: clamp(1.35rem, 6.5vw, 1.72rem);
  }

  .container,
  .container-fluid,
  .container-xl,
  body > .container {
    max-width: 100%;
    padding-right: 0.85rem !important;
    padding-left: 0.85rem !important;
  }

  .btn:not(.btn-icon) {
    min-height: 2.7rem;
  }

  .form-control,
  .form-select,
  .input-group-text {
    min-height: 2.85rem;
    font-size: 1rem;
  }

  .stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stats > .card {
    min-width: 0;
  }

  .table > :not(caption) > * > * {
    padding: 0.7rem 0.62rem;
  }

  .card-header {
    padding: 0.62rem 0.78rem;
  }

  .publisher-library-header {
    padding-bottom: 2.5rem !important;
  }

  .publisher-library-content {
    margin-top: -1.1rem;
  }

  .publisher-library-search {
    width: 100%;
  }

  .publisher-library-card .table {
    min-width: 61rem;
  }

  .dashboard-wallet-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-wallet-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .store-section-title,
  .pinned-books-title,
  .resume-reading-title {
    align-items: flex-start;
  }

  .store-section-title small,
  .store-section-title .fw-300,
  .pinned-books-title small,
  .resume-reading-title small {
    flex-basis: calc(100% - 2.8rem);
  }

  .ed-theme-switcher {
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: max(0.65rem, env(safe-area-inset-bottom));
  }

  .ed-theme-toggle {
    min-width: 3rem;
    width: 3rem;
    justify-content: center;
    padding: 0.5rem;
  }

  .ed-theme-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #layoutAuthentication_content main {
    min-height: auto;
    padding-block: 1rem 2rem;
  }

  #layoutAuthentication .card {
    margin-top: 1rem !important;
  }

  .modal-dialog {
    margin: 0.7rem;
  }

  .admin-nav {
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
  }

  .admin-portal-link {
    margin-left: auto;
  }

  .admin-shell {
    width: min(100% - 1.25rem, 1180px);
    padding-block: 1.5rem 3rem;
  }
}

@media print {
  body {
    color: #000;
    background: #fff !important;
  }

  .topnav,
  .topbar,
  .sidenav,
  .btn,
  .footer-admin,
  .ed-theme-switcher {
    display: none !important;
  }

  .card,
  .chart-box,
  .table {
    border-color: #bbb !important;
    box-shadow: none !important;
  }
}

/* The public React bundle uses Tailwind colour utilities. Keeping these
   compatibility aliases here avoids editing generated JavaScript while moving
   every landing, sign-in, wallet and publisher view onto the brand palette. */
.text-blue-100 { color: #fff0cc !important; }
.text-blue-500 { color: #b97400 !important; }
.text-blue-600,
.hover\:text-blue-600:hover { color: var(--ed-primary) !important; }
.text-blue-700,
.hover\:text-blue-700:hover { color: var(--ed-primary-deep) !important; }
.text-blue-900 { color: var(--ed-logo-charcoal) !important; }
.group:hover .group-hover\:text-blue-600 { color: var(--ed-primary) !important; }
.text-cyan-500,
.text-cyan-600 { color: var(--ed-gold) !important; }
.bg-blue-50,
.hover\:bg-blue-50:hover { background-color: #fff8e8 !important; }
.bg-blue-100,
.hover\:bg-blue-100:hover { background-color: #fff0cc !important; }
.bg-blue-500 { background-color: #9a6000 !important; }
.bg-blue-600,
.hover\:bg-blue-600:hover { background-color: #8b5700 !important; }
.hover\:bg-blue-700:hover { background-color: var(--ed-primary-deep) !important; }
.bg-cyan-50 { background-color: #fff8e8 !important; }
.bg-cyan-100 { background-color: #fff0cc !important; }
.bg-cyan-500,
.bg-cyan-600 { background-color: var(--ed-logo-charcoal) !important; }
.border-blue-200,
.border-blue-300 { border-color: var(--ed-champagne) !important; }
.border-blue-500,
.border-blue-600,
.hover\:border-blue-300:hover,
.hover\:border-blue-500:hover,
.hover\:border-blue-600:hover { border-color: var(--ed-primary) !important; }
.ring-blue-500,
.focus\:ring-blue-500:focus { --tw-ring-color: rgba(255, 177, 26, 0.5) !important; }
.from-blue-500,
.from-blue-600,
.from-cyan-500,
.from-cyan-600 {
  --tw-gradient-from: #343a4b var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(52, 58, 75, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-blue-50,
.from-green-50,
.hover\:from-blue-50:hover,
.hover\:from-blue-100:hover {
  --tw-gradient-from: var(--ed-gold-soft) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 243, 214, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-50 {
  --tw-gradient-to: #fff8e8 var(--tw-gradient-to-position) !important;
}
.to-blue-600,
.to-blue-700,
.to-cyan-500,
.to-cyan-600 {
  --tw-gradient-to: #8b5700 var(--tw-gradient-to-position) !important;
}
.to-cyan-50,
.hover\:to-cyan-50:hover,
.hover\:to-cyan-100:hover {
  --tw-gradient-to: var(--ed-gold-soft) var(--tw-gradient-to-position) !important;
}
.via-blue-50 {
  --tw-gradient-to: rgba(255, 243, 214, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--ed-gold-soft) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.via-blue-600 {
  --tw-gradient-to: rgba(165, 102, 0, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #a56600 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.via-cyan-600,
.via-pink-600,
.via-teal-600 {
  --tw-gradient-to: rgba(165, 102, 0, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--ed-primary) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.hover\:shadow-blue-500\/50:hover {
  --tw-shadow-color: rgba(165, 102, 0, 0.36) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* Additional generated utility aliases: names remain for bundle
   compatibility, but every rendered value resolves to the brand system. */
.text-purple-500,
.text-purple-600,
.text-pink-500,
.text-pink-600,
.text-teal-500,
.text-teal-600,
.text-green-500,
.text-green-600,
.text-yellow-500,
.text-yellow-600,
.text-orange-500,
.text-orange-600 { color: var(--ed-primary) !important; }

.text-purple-700,
.text-pink-700,
.text-teal-700,
.text-green-700,
.text-green-800,
.text-green-900,
.text-yellow-700,
.text-yellow-800,
.text-orange-700,
.text-orange-800,
.text-pink-900,
.text-purple-900,
.text-yellow-900,
.text-orange-900 { color: var(--ed-primary-deep) !important; }

.text-green-300 { color: var(--ed-champagne) !important; }

.bg-purple-50,
.bg-pink-50,
.bg-teal-50,
.bg-green-50,
.bg-yellow-50,
.bg-orange-50 { background-color: var(--ed-gold-soft) !important; }

.bg-purple-100,
.bg-pink-100,
.bg-teal-100,
.bg-green-100,
.hover\:bg-green-100:hover,
.bg-yellow-100,
.bg-orange-100 { background-color: #fff0cc !important; }

.bg-purple-500,
.bg-pink-500,
.bg-teal-500,
.bg-green-500,
.bg-yellow-500,
.bg-orange-500 { background-color: var(--ed-gold) !important; }

.bg-purple-600,
.bg-pink-600,
.bg-teal-600,
.bg-green-600,
.bg-yellow-600,
.bg-orange-600,
.hover\:bg-purple-700:hover,
.hover\:bg-pink-700:hover,
.hover\:bg-teal-700:hover,
.hover\:bg-green-700:hover,
.hover\:bg-yellow-700:hover,
.hover\:bg-orange-700:hover { background-color: var(--ed-primary-strong) !important; }

.border-purple-200,
.border-purple-300,
.border-pink-200,
.border-pink-300,
.border-teal-200,
.border-teal-300,
.border-green-200,
.border-green-300,
.border-yellow-200,
.border-yellow-300,
.border-orange-200,
.border-orange-300 { border-color: var(--ed-champagne) !important; }

.fill-yellow-500 { fill: var(--ed-logo-gold) !important; }

.from-purple-500,
.from-purple-600,
.from-pink-500,
.from-pink-600,
.from-teal-500,
.from-teal-600,
.from-green-500,
.from-green-600,
.from-yellow-500,
.from-yellow-600,
.from-orange-500,
.from-orange-600 {
  --tw-gradient-from: var(--ed-logo-charcoal) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(52, 58, 75, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple-500,
.to-purple-600,
.to-pink-500,
.to-pink-600,
.to-teal-500,
.to-teal-600,
.to-green-500,
.to-green-600,
.to-yellow-500,
.to-yellow-600,
.to-orange-500,
.to-orange-600 { --tw-gradient-to: var(--ed-primary) var(--tw-gradient-to-position) !important; }

/* Cross-theme contrast contract
   Keep semantic text, accent surfaces and interactive states readable in every
   appearance. These rules intentionally follow the compatibility utilities so
   legacy Bootstrap/Tailwind markup cannot reintroduce an inaccessible colour. */
.card-body,
.modal-body,
.offcanvas-body,
.dropdown-menu,
.list-group-item,
.accordion-body {
  color: var(--ed-ink);
}

:is(.text-gray-400, .text-gray-500, .text-gray-600, .text-black-50) {
  color: var(--ed-muted) !important;
}

:is(.text-gray-700, .text-gray-800, .text-gray-900, .text-dark, .text-body) {
  color: var(--ed-ink) !important;
}

.text-secondary {
  color: var(--ed-slate) !important;
}

/* Accent surfaces use fixed, WCAG-safe pairs rather than theme-dependent
   foregrounds. This also prevents the dark card surface from flattening them. */
:root :is(.card.bg-primary, .alert.bg-primary, .badge.bg-primary, .text-bg-primary, .bg-primary.text-white) {
  --ed-accent-foreground: #ffffff;
  color: var(--ed-accent-foreground) !important;
  border-color: #5c3900 !important;
  background: #5c3900 !important;
}

:root :is(.card.bg-secondary, .alert.bg-secondary, .badge.bg-secondary, .text-bg-secondary, .bg-secondary.text-white) {
  --ed-accent-foreground: #ffffff;
  color: var(--ed-accent-foreground) !important;
  border-color: #343a4b !important;
  background: #343a4b !important;
}

:root :is(.card.bg-success, .alert.bg-success, .badge.bg-success, .text-bg-success, .bg-success.text-white) {
  --ed-accent-foreground: #ffffff;
  color: var(--ed-accent-foreground) !important;
  border-color: #855200 !important;
  background: #855200 !important;
}

:root :is(.card.bg-warning, .alert.bg-warning, .badge.bg-warning, .text-bg-warning, .bg-warning.text-white) {
  --ed-accent-foreground: #1b1f29;
  color: var(--ed-accent-foreground) !important;
  border-color: #ffb11a !important;
  background: #ffb11a !important;
}

:root :is(.card.bg-danger, .alert.bg-danger, .badge.bg-danger, .text-bg-danger, .bg-danger.text-white) {
  --ed-accent-foreground: #ffffff;
  color: var(--ed-accent-foreground) !important;
  border-color: #343a4b !important;
  background: #343a4b !important;
}

:root :is(.card.bg-info, .alert.bg-info, .badge.bg-info, .text-bg-info, .bg-info.text-white) {
  --ed-accent-foreground: #ffffff;
  color: var(--ed-accent-foreground) !important;
  border-color: #343a4b !important;
  background: #343a4b !important;
}

:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info),
:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info)
  :is(.card-body, h1, h2, h3, h4, h5, h6, p, small, strong, a, i, svg, .text-white, .text-white-75, .text-white-50) {
  color: var(--ed-accent-foreground) !important;
}

:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info) .card-footer {
  color: var(--ed-accent-foreground) !important;
  border-top-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

:root .card.bg-warning .card-footer {
  border-top-color: rgba(27, 31, 41, 0.2) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info) .text-white-75 {
  opacity: 0.88;
}

:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info) .text-white-50 {
  opacity: 0.74;
}

:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info) a:hover,
:root .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-warning, .bg-danger, .bg-info) a:focus-visible {
  color: var(--ed-accent-foreground) !important;
  opacity: 1;
  text-decoration-thickness: 2px;
}

/* SmartAdmin-era numbered helpers used throughout reporting dashboards. */
:root .bg-warning-200 {
  color: #5c3900 !important;
  background-color: #fff0cc !important;
}

:root :is(.bg-warning-400, .bg-warning-400.text-white) {
  color: #1b1f29 !important;
  background-color: #ffb11a !important;
}

/* ---------------------------------------------------------------------------
   SYSTEM DARK CARD
   ---------------------------------------------------------------------------
   The dark "figure card" used for the wallet balance on the dashboard. Modals
   across the admin and publisher dashboards render the same thing — a large
   amount, a caption and a decorative glyph — but were using a flat
   `background-color: #343a4b` with no border, depth or highlight, so the same
   component looked like two different products depending on where you met it.

   `.bg-info-400` IS that dark card in the legacy markup, so styling it here
   upgrades all six modals without editing their markup. `.ed-dark-card` is the
   name to use for anything new.
--------------------------------------------------------------------------- */
:root :is(.bg-info-400, .bg-info-400.text-white, .ed-dark-card) {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  border: 1px solid rgba(255, 177, 26, 0.48);
  border-radius: var(--ed-radius-lg);
  /* Same amber corner-glow over the midnight gradient as .dashboard-wallet-card. */
  background:
    radial-gradient(circle at 90% 0, rgba(255, 177, 26, 0.28), transparent 8rem),
    linear-gradient(120deg, var(--ed-midnight), var(--ed-logo-charcoal)) !important;
  box-shadow: 0 14px 34px rgba(27, 31, 41, 0.20);
}

/* The decorative ring that gives the wallet card its depth. Suppressed when the
   card already carries its own absolutely-positioned glyph, so the two do not
   overlap into a smudge. */
:root :is(.bg-info-400, .ed-dark-card)::after {
  position: absolute;
  right: -2.2rem;
  bottom: -3.4rem;
  width: 7rem;
  height: 7rem;
  border: 1rem solid rgba(255, 177, 26, 0.10);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

/* Keep the amount legible against the gradient. */
:root :is(.bg-info-400, .ed-dark-card) :is(h1, h2, h3, h4, .display-4) {
  color: #fff !important;
}

:root :is(.bg-info-400, .ed-dark-card) small {
  display: block;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* The oversized glyph these cards carry sits above the ring, dimmed so it reads
   as texture rather than content. */
:root :is(.bg-info-400, .ed-dark-card) > i[class*="fa-"] {
  z-index: 1;
  color: rgba(255, 177, 26, 0.22) !important;
  opacity: 1 !important;
}

/* Theme-aware legacy surfaces. */
:root[data-ed-theme="dark"] :is(.text-gray-100, .text-gray-200, .text-gray-300) {
  color: #f0eadf !important;
}

:root[data-ed-theme="dark"] :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-black-50) {
  color: #c3bfb5 !important;
}

:root[data-ed-theme="dark"] :is(.text-gray-700, .text-gray-800, .text-gray-900, .text-dark, .text-body, .text-body-secondary) {
  color: var(--ed-ink) !important;
}

:root[data-ed-theme="dark"] :is(.bg-white, .bg-light, .bg-gray-100, .bg-gray-200, .list-group-item, .accordion-item, .accordion-button, .table-light) {
  color: var(--ed-ink) !important;
  border-color: var(--ed-border) !important;
  background-color: var(--ed-surface-soft) !important;
}

:root[data-ed-theme="dark"] .bg-warning-200 {
  color: #f7f3e9 !important;
  background-color: #3e3422 !important;
}

:root[data-ed-theme="dark"] :is(.list-group-item-action:hover, .list-group-item-action:focus, .accordion-button:not(.collapsed)) {
  color: var(--ed-ink) !important;
  background-color: #383e4e !important;
}

:root[data-ed-theme="dark"] .text-danger {
  color: #ffd47c !important;
}

/* Outline button hover/focus states remain legible even when --ed-primary is
   gold in Dark appearance. */
:is(.btn-outline-primary, .btn-outline-warning):is(:hover, :focus-visible, :active, .active) {
  color: #1b1f29 !important;
  border-color: #ffb11a !important;
  background: #ffb11a !important;
}

.btn-outline-secondary:is(:hover, :focus-visible, :active, .active),
.btn-outline-info:is(:hover, :focus-visible, :active, .active) {
  color: #ffffff !important;
  border-color: #343a4b !important;
  background: #343a4b !important;
}

.btn-outline-success:is(:hover, :focus-visible, :active, .active) {
  color: #ffffff !important;
  border-color: #855200 !important;
  background: #855200 !important;
}

.btn-outline-danger:is(:hover, :focus-visible, :active, .active) {
  color: #ffffff !important;
  border-color: #343a4b !important;
  background: #343a4b !important;
}

/* Navigation icons: explicitly own colour, stroke and active-state surfaces so
   legacy Bootstrap or generated utility specificity cannot turn them blue. */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon {
  display: inline-grid;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  margin-right: 0.58rem;
  padding: 0 !important;
  place-items: center;
  color: var(--ed-primary-deep) !important;
  border: 1px solid rgba(165, 102, 0, 0.2);
  border-radius: 0.55rem;
  background: var(--ed-gold-soft);
}

.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon :is(i, svg),
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon .feather {
  width: 1rem;
  height: 1rem;
  color: inherit !important;
  stroke: currentColor !important;
}

.sidenav.sidenav-light .sidenav-menu .nav .nav-link:is(:hover, .active) .nav-link-icon,
.sidenav.sidenav-light .sidenav-menu .nav .sidenav-group-toggle[aria-expanded="true"] .nav-link-icon {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold);
  background: var(--ed-logo-gold);
}

:root[data-ed-theme="dark"] .sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon {
  color: var(--ed-logo-gold) !important;
  border-color: rgba(255, 177, 26, 0.35);
  background: var(--ed-gold-soft);
}

:root[data-ed-theme="dark"] .sidenav.sidenav-light .sidenav-menu .nav .nav-link:is(:hover, .active) .nav-link-icon,
:root[data-ed-theme="dark"] .sidenav.sidenav-light .sidenav-menu .nav .sidenav-group-toggle[aria-expanded="true"] .nav-link-icon {
  color: var(--ed-midnight) !important;
  background: var(--ed-logo-gold);
}

.topnav :is(.btn, .nav-link, .input-group-text, .dropdown-item-icon) :is(i, svg) {
  color: inherit !important;
  stroke: currentColor !important;
}

.topnav .btn-transparent-dark {
  color: var(--ed-primary-deep) !important;
}

:root[data-ed-theme="contemporary"] .topnav .btn-transparent-dark,
:root[data-ed-theme="dark"] .topnav .btn-transparent-dark {
  color: var(--ed-logo-gold) !important;
}

/* Remaining generated colour helpers are deliberately translated to logo
   charcoal/gold so the compiled landing navigation cannot leak vendor hues. */
.bg-blue-700 { background-color: var(--ed-primary-deep) !important; }
.from-blue-100 {
  --tw-gradient-from: var(--ed-gold-soft) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 243, 214, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-500 { --tw-gradient-to: var(--ed-primary) var(--tw-gradient-to-position) !important; }
.text-red-600,
.text-red-700,
.text-red-800 { color: var(--ed-primary-deep) !important; }
.bg-red-50,
.bg-red-100,
.hover\:bg-red-50:hover,
.hover\:bg-red-100:hover { background-color: var(--ed-gold-soft) !important; }
.bg-red-500 { background-color: var(--ed-logo-charcoal) !important; }
.border-red-200 { border-color: var(--ed-champagne) !important; }
.to-red-600 { --tw-gradient-to: var(--ed-logo-charcoal) var(--tw-gradient-to-position) !important; }

/* Final legacy/runtime colour containment. These classes are emitted by older
   Bootstrap templates and third-party widgets after page load. */
:is(.border-primary, .border-success, .border-info, .border-warning,
    .border-blue, .border-cyan, .border-green, .border-teal,
    .border-indigo, .border-purple) {
  border-color: var(--ed-primary) !important;
}

:is(.text-primary, .text-success, .text-info, .text-warning,
    .color-primary, .color-success, .color-info, .color-warning,
    .text-blue, .text-cyan, .text-green, .text-teal,
    .text-indigo, .text-purple) {
  color: var(--ed-primary-deep) !important;
}

:is(.bg-primary-soft, .bg-success-soft, .bg-info-soft, .bg-warning-soft,
    .bg-blue-soft, .bg-cyan-soft, .bg-green-soft, .bg-teal-soft,
    .bg-indigo-soft, .bg-purple-soft) {
  color: var(--ed-primary-deep) !important;
  background-color: var(--ed-gold-soft) !important;
}

:is(.btn-blue, .btn-cyan, .btn-green, .btn-teal, .btn-indigo, .btn-purple,
    .btn-facebook, .btn-twitter, .btn-google, .btn-github) {
  color: #ffffff !important;
  border-color: var(--ed-logo-charcoal) !important;
  background: var(--ed-logo-charcoal) !important;
}

:is(.btn-blue, .btn-cyan, .btn-green, .btn-teal, .btn-indigo, .btn-purple,
    .btn-facebook, .btn-twitter, .btn-google, .btn-github):is(:hover, :focus-visible, :active) {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
}

:is(.form-control, .form-select).is-valid,
.was-validated :is(.form-control, .form-select):valid {
  border-color: var(--ed-primary) !important;
  background-image: none !important;
}

:is(.form-control, .form-select).is-invalid,
.was-validated :is(.form-control, .form-select):invalid {
  border-color: var(--ed-logo-charcoal) !important;
  background-image: none !important;
}

:is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip) {
  color: var(--ed-primary-deep) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-selection__choice {
  color: var(--ed-midnight) !important;
  border-color: var(--ed-logo-gold) !important;
  background: var(--ed-logo-gold) !important;
}

.swal2-popup .swal2-icon.swal2-success,
.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question {
  color: var(--ed-primary) !important;
  border-color: rgba(165, 102, 0, 0.55) !important;
}

.swal2-popup .swal2-success-circular-line-left,
.swal2-popup .swal2-success-circular-line-right,
.swal2-popup .swal2-success-fix {
  background: transparent !important;
}

.swal2-popup .swal2-success-line-tip,
.swal2-popup .swal2-success-line-long {
  background-color: var(--ed-primary) !important;
}

.swal2-popup .swal2-success-ring {
  border-color: rgba(255, 177, 26, 0.42) !important;
}