/* =============================================================================
   Face Up Design System — Moodle Theme Override
   Applies the Face Up design system to Moodle 4.x Boost theme.
   Injected via additionalhtmlhead in Moodle's config.php.
   ============================================================================= */

/* ===== Font Loading ===== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700;800&display=swap');

/* ===== Force Light Color Scheme ===== */
:root,
html,
html[data-bs-theme="dark"],
html[data-bs-theme="light"],
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: light only !important;
}

@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    color-scheme: light only !important;
  }
}

/* =============================================================================
   1. DESIGN TOKENS — Face Up Design System
   All rules below reference these variables. Change a token, change everything.
   ============================================================================= */

:root,
html,
html[data-bs-theme="dark"],
html[data-bs-theme="light"] {
  /* --- Brand colors --- */
  --fu-blue: #2145EF;
  --fu-blue-hover: #1a37c7;
  --fu-blue-light: #3758f9;
  --fu-blue-muted: #ACBEFF;
  --fu-blue-subtle: #EEF1FF;
  --fu-green: #78FF84;
  --fu-green-hover: #5ee06a;
  --fu-green-light: #E6FAE8;
  --fu-green-contrast: #065F46;
  --fu-orange: #FEAA34;

  /* --- Text colors --- */
  --fu-text-primary: #111928;
  --fu-text-body: #333333;
  --fu-text-secondary: #333b52;
  --fu-text-muted: #ada1b3;

  /* --- Gray scale --- */
  --fu-gray-900: #1a1a1a;
  --fu-gray-800: #262626;
  --fu-gray-700: #333333;
  --fu-gray-600: #4a4a4a;
  --fu-gray-500: #6b6b6b;
  --fu-gray-400: #9ca3af;
  --fu-gray-300: #d1d5db;
  --fu-gray-200: #E8EBF0;
  --fu-gray-100: #F3F4F6;
  --fu-gray-50: #F9FAFB;
  --fu-white: #FFFFFF;

  /* --- Functional colors --- */
  --fu-error-bg: #fee2e2;
  --fu-error-light: #FFDEDE;
  --fu-error-text: #991B1B;
  --fu-warning-bg: #FEF3C7;
  --fu-warning-text: #92400E;
  --fu-success-bg: #E6FAE8;
  --fu-success-text: #065F46;
  --fu-info-bg: #EEF1FF;
  --fu-info-text: #2145EF;

  /* --- Border radius --- */
  --fu-radius-sm: 8px;
  --fu-radius-md: 15px;
  --fu-radius-lg: 20px;
  --fu-radius-xl: 25px;
  --fu-radius-pill: 999px;

  /* --- Shadows --- */
  --fu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fu-shadow-default: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --fu-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fu-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --fu-shadow-focus-ring: 0 0 0 3px rgba(33, 69, 239, 0.15);

  /* --- Moodle-specific semantic tokens --- */
  --fu-moodle-page-bg: var(--fu-gray-50);
  --fu-moodle-card-bg: var(--fu-white);
  --fu-moodle-nav-height: 56px;
  --fu-moodle-content-max-width: 1200px;

  /* --- Bootstrap 4/5 variable overrides --- */
  --white: var(--fu-white) !important;
  --gray-dark: #343a40 !important;
  --dark: #343a40 !important;
  --light: var(--fu-gray-50) !important;
  --body-bg: var(--fu-moodle-page-bg) !important;
  --body-color: var(--fu-text-body) !important;

  /* Bootstrap 5 variables */
  --bs-body-bg: var(--fu-moodle-page-bg) !important;
  --bs-body-bg-rgb: 249, 250, 251 !important;
  --bs-body-color: var(--fu-text-body) !important;
  --bs-body-color-rgb: 51, 51, 51 !important;
  --bs-emphasis-color: var(--fu-gray-900) !important;
  --bs-emphasis-color-rgb: 26, 26, 26 !important;
  --bs-secondary-bg: var(--fu-gray-100) !important;
  --bs-secondary-bg-rgb: 243, 244, 246 !important;
  --bs-secondary-color: var(--fu-gray-600) !important;
  --bs-tertiary-bg: var(--fu-gray-50) !important;
  --bs-tertiary-bg-rgb: 249, 250, 251 !important;
  --bs-tertiary-color: var(--fu-gray-500) !important;
  --bs-border-color: var(--fu-gray-200) !important;
  --bs-link-color: var(--fu-blue) !important;
  --bs-link-hover-color: var(--fu-blue-hover) !important;
  --bs-heading-color: var(--fu-gray-900) !important;
  --bs-card-bg: var(--fu-moodle-card-bg) !important;
  --bs-card-color: var(--fu-text-body) !important;
  --bs-card-border-color: var(--fu-gray-200) !important;

  /* Moodle Boost theme variables */
  --primary: var(--fu-blue) !important;
  --success: var(--fu-green) !important;
  --info: var(--fu-blue) !important;
  --warning: var(--fu-orange) !important;
  --danger: var(--fu-error-text) !important;
  --secondary: var(--fu-gray-500) !important;
}

/* =============================================================================
   2. GLOBAL BACKGROUND & TEXT
   ============================================================================= */

body,
html,
body.pagelayout-standard,
body.pagelayout-mydashboard,
body.pagelayout-course,
body.pagelayout-incourse,
body.pagelayout-admin,
body.pagelayout-popup,
body.pagelayout-maintenance,
body.pagelayout-frontpage,
body.pagelayout-report,
body.pagelayout-embedded,
body[class*="pagelayout-"] {
  background-color: var(--fu-moodle-page-bg) !important;
  color: var(--fu-text-body) !important;
}

/* Login page gets the off-white background too */
body.pagelayout-login {
  background-color: var(--fu-moodle-page-bg) !important;
  color: var(--fu-text-body) !important;
}

#page-wrapper,
#page-content {
  background-color: transparent !important;
}

#page,
#region-main,
#region-main-box,
[role="main"],
.main-inner {
  background-color: transparent !important;
  color: var(--fu-text-body) !important;
}

/* =============================================================================
   3. GLOBAL TYPOGRAPHY
   ============================================================================= */

body,
.navbar,
.dropdown-menu,
.popover,
.popover-body,
.modal,
.modal-body,
.card,
.card-body,
.card-text,
[class*="block_"],
#region-main,
.usermenu,
p,
li,
td,
th,
span,
div,
label,
.form-group,
.fitem,
.felement {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Content text colors */
p,
li,
td,
span:not(.navbar span):not(.nav-link span),
div:not(.navbar div):not([class*="alert"]),
label,
.form-group,
.fitem,
.felement,
.fstatic,
.fdescription,
small,
.small {
  color: var(--fu-text-body) !important;
}

.text-muted {
  color: var(--fu-gray-500) !important;
}

.dimmed_text,
.text-info {
  color: var(--fu-gray-500) !important;
}

/* Headings — Inter Tight for h1–h3, Outfit for h4–h6 */
h1, h2, h3,
.page-header-headings h1,
.page-header-headings h2 {
  font-family: 'Inter Tight', 'Outfit', sans-serif !important;
  color: var(--fu-blue) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h1 {
  font-size: 28px !important;
}

h4, h5, h6 {
  font-family: 'Outfit', sans-serif !important;
  color: var(--fu-gray-900) !important;
  font-weight: 600 !important;
}

/* =============================================================================
   4. NAVBAR & BRAND IDENTITY
   ============================================================================= */

.navbar.fixed-top,
.navbar-light,
nav.navbar {
  background-color: var(--fu-blue) !important;
  border-bottom: none !important;
  box-shadow: var(--fu-shadow-default) !important;
  height: var(--fu-moodle-nav-height) !important;
  min-height: var(--fu-moodle-nav-height) !important;
}

/* --- Logo: replace site name with Face Up logo PNG --- */
.navbar .navbar-brand {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  background-image: url('/faceup-logo-white.png') !important;
  background-repeat: no-repeat !important;
  background-position: center left !important;
  background-size: contain !important;
  min-width: 120px !important;
  height: 32px !important;
}

/* Also handle site-name if it exists in some Moodle versions */
.navbar .navbar-brand .site-name {
  font-size: 0 !important;
  visibility: hidden !important;
}

/* Hide the default Moodle logo image if present */
.navbar .navbar-brand .logo {
  display: none !important;
}

/* --- Nav items — force ALL navbar content to white --- */
.navbar .navbar-brand,
.navbar a,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .usermenu .usertext,
.navbar .userbutton,
.navbar .icon,
.navbar span,
.navbar div,
.navbar label,
.navbar .popover-region-toggle,
.navbar i,
.navbar .badge,
.navbar .editmode-switch-form label,
.navbar .input-group label {
  color: var(--fu-white) !important;
}

.navbar .nav-link {
  position: relative !important;
  padding-bottom: 6px !important;
  transition: color 0.2s ease !important;
}

/* --- Navbar hover — override Bootstrap .navbar-light specificity --- */
.navbar.navbar-light .navbar-nav .nav-link,
.navbar .nav-link,
.navbar [role="menuitem"] {
  position: relative !important;
  padding-bottom: 6px !important;
  border-radius: var(--fu-radius-sm) !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  background-color: transparent !important;
}

.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar a:hover,
.navbar [role="menuitem"]:hover,
.navbar [role="menuitem"]:focus {
  color: var(--fu-green) !important;
  background-color: transparent !important;
}

/* Active nav indicator — green bottom border */
.navbar.navbar-light .navbar-nav .nav-link.active,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="true"] {
  color: var(--fu-white) !important;
  background-color: transparent !important;
}

.navbar.navbar-light .navbar-nav .nav-link.active:hover,
.navbar .nav-link.active:hover {
  color: var(--fu-green) !important;
  background-color: transparent !important;
}

.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="true"]::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 3px !important;
  background-color: var(--fu-green) !important;
  border-radius: var(--fu-radius-pill) !important;
}

/* --- Override .nav-item parent hover backgrounds --- */
.navbar .nav-item,
.navbar .nav-item:hover,
.navbar .nav-item:focus-within,
.navbar.navbar-light .navbar-nav .nav-item:hover,
.navbar .more-nav .nav-item:hover {
  background-color: transparent !important;
}

/* --- Navbar icon/button hover targets --- */
.navbar .popover-region-toggle,
.navbar button:not(.btn) {
  border-radius: var(--fu-radius-sm) !important;
  transition: background-color 0.2s ease !important;
}

.navbar .popover-region-toggle:hover,
.navbar button:not(.btn):hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- User avatar ring (both image and initials) --- */
.navbar .userpicture,
.navbar .userinitials {
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  transition: border-color 0.2s ease !important;
}

.navbar .userpicture:hover,
.navbar .userinitials:hover {
  border-color: var(--fu-white) !important;
}

/* User initials circle — fix contrast: blue bg with white text */
.userinitials {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 700 !important;
  background-color: var(--fu-blue-hover) !important;
  color: var(--fu-white) !important;
}

/* Navbar user initials — slightly lighter blue to stand out on blue navbar */
.navbar .userinitials {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--fu-white) !important;
}

/* Profile page large avatar */
.page-header-image .userinitials {
  background-color: var(--fu-blue) !important;
  color: var(--fu-white) !important;
}

/* --- User menu toggle — transparent on navbar, not a white button --- */
.navbar .usermenu .dropdown-toggle,
.navbar .usermenu .dropdown-toggle.btn,
.navbar #user-menu-toggle {
  background-color: transparent !important;
  border: none !important;
  color: var(--fu-white) !important;
  padding: 4px 8px !important;
}

.navbar .usermenu .dropdown-toggle:hover,
.navbar #user-menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--fu-radius-pill) !important;
}

/* Fix Font Awesome 6 icons */
.navbar .fa,
.navbar .icon.fa {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* Notification/messaging popover transparent background */
.navbar .popover-region {
  background-color: transparent !important;
}

/* --- Navbar dropdowns --- */
.navbar .dropdown-menu,
.navbar .popover-region-container {
  background-color: var(--fu-moodle-card-bg) !important;
  border-radius: var(--fu-radius-md) !important;
  border: 1px solid var(--fu-gray-200) !important;
  box-shadow: var(--fu-shadow-md) !important;
  overflow: hidden;
  margin-top: 4px !important;
}

.navbar .dropdown-menu a,
.navbar .dropdown-menu span,
.navbar .dropdown-menu div,
.navbar .dropdown-item,
.navbar .popover-region-container a,
.navbar .popover-region-container span,
.navbar .popover-region-container div {
  color: var(--fu-text-body) !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
}

/* =============================================================================
   5. BUTTONS — Proper Severity Hierarchy
   ============================================================================= */

/* --- Base button reset --- */
.btn {
  border-radius: var(--fu-radius-pill) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--fu-shadow-focus-ring) !important;
  outline: none !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* --- CTA buttons (Save changes, login) --- */
.btn-success,
.btn[value="Save changes"],
input[type="submit"][value="Save changes"],
#loginbtn {
  background-color: var(--fu-green) !important;
  border-color: var(--fu-green) !important;
  color: var(--fu-gray-900) !important;
}

.btn-success:hover,
.btn[value="Save changes"]:hover,
input[type="submit"][value="Save changes"]:hover,
#loginbtn:hover {
  background-color: var(--fu-green-hover) !important;
  border-color: var(--fu-green-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--fu-shadow-md) !important;
}

/* --- Primary buttons --- */
.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--fu-blue) !important;
  border-color: var(--fu-blue) !important;
  color: var(--fu-white) !important;
}

.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background-color: var(--fu-blue-hover) !important;
  border-color: var(--fu-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--fu-shadow-md) !important;
}

/* --- Secondary buttons (no longer looks like primary) --- */
.btn-secondary {
  background-color: var(--fu-gray-50) !important;
  border-color: var(--fu-gray-300) !important;
  color: var(--fu-gray-700) !important;
}

.btn-secondary:hover {
  background-color: var(--fu-gray-100) !important;
  border-color: var(--fu-gray-400) !important;
  color: var(--fu-gray-900) !important;
  transform: translateY(-1px) !important;
}

/* --- Outline buttons (cancel, guest access) --- */
.btn-outline-secondary,
.btn-cancel,
.btn-outline-primary {
  background-color: var(--fu-white) !important;
  color: var(--fu-gray-900) !important;
  border: 1px solid var(--fu-gray-300) !important;
}

.btn-outline-secondary:hover,
.btn-cancel:hover,
.btn-outline-primary:hover {
  background-color: var(--fu-gray-900) !important;
  border-color: var(--fu-gray-900) !important;
  color: var(--fu-white) !important;
  transform: translateY(-1px) !important;
}

/* --- Ghost / link buttons (cookies notice, dismiss) --- */
.btn-link {
  background-color: transparent !important;
  color: var(--fu-blue) !important;
  border: none !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
}

.btn-link:hover {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue-hover) !important;
  text-decoration: none !important;
}

/* --- Warning buttons --- */
.btn-warning {
  background-color: var(--fu-orange) !important;
  border-color: var(--fu-orange) !important;
  color: var(--fu-gray-900) !important;
}

.btn-warning:hover {
  filter: brightness(0.92) !important;
  transform: translateY(-1px) !important;
}

/* --- Danger buttons --- */
.btn-danger {
  background-color: var(--fu-error-text) !important;
  border-color: var(--fu-error-text) !important;
  color: var(--fu-white) !important;
}

.btn-danger:hover {
  filter: brightness(0.85) !important;
  transform: translateY(-1px) !important;
}

/* =============================================================================
   6. LOGIN PAGE
   ============================================================================= */

/* --- Face Up logo above the login card --- */
#page-login-index #region-main::before {
  content: '' !important;
  display: block !important;
  background-image: url('/faceup-logo-blue.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 200px !important;
  height: 50px !important;
  margin: 0 auto 8px auto !important;
}

#page-login-index h2,
.login-heading {
  font-family: 'Inter Tight', sans-serif !important;
  color: var(--fu-blue) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.login-wrapper .card,
#page-login-index .card {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-xl) !important;
  box-shadow: var(--fu-shadow-md) !important;
  border: 1px solid var(--fu-gray-200) !important;
}

.login-wrapper,
.login-container {
  font-family: 'Outfit', sans-serif !important;
  background-color: transparent !important;
  color: var(--fu-text-body) !important;
}

.login-form label,
.login-form .form-group,
.login-form input {
  color: var(--fu-text-body) !important;
}

/* "Lost password?" link — subtle */
#page-login-index a[href*="forgot_password"] {
  color: var(--fu-gray-500) !important;
  font-size: 13px !important;
  transition: color 0.2s ease !important;
}

#page-login-index a[href*="forgot_password"]:hover {
  color: var(--fu-blue) !important;
}

/* "Access as a guest" button — outline style, not primary */
#loginguestbtn {
  background-color: var(--fu-white) !important;
  color: var(--fu-gray-700) !important;
  border: 1px solid var(--fu-gray-300) !important;
  font-size: 14px !important;
}

#loginguestbtn:hover {
  background-color: var(--fu-gray-100) !important;
  color: var(--fu-gray-900) !important;
  border-color: var(--fu-gray-400) !important;
  transform: translateY(-1px) !important;
}

/* "Cookies notice" — ghost/subtle style */
#page-login-index .d-flex > .btn-secondary {
  background-color: transparent !important;
  color: var(--fu-gray-500) !important;
  border: none !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
}

#page-login-index .d-flex > .btn-secondary:hover {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
}

/* Horizontal rules on login page */
#page-login-index hr {
  border-color: var(--fu-gray-200) !important;
  margin: 20px 0 !important;
}

/* "Some courses may allow guest access" heading — tone it down */
#page-login-index h2 {
  font-size: 15px !important;
  color: var(--fu-gray-500) !important;
  font-weight: 500 !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 0 !important;
}

/* =============================================================================
   7. CARDS
   ============================================================================= */

.card,
.block,
.course-content .section,
.generalbox {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-lg) !important;
  border: 1px solid var(--fu-gray-200) !important;
  box-shadow: var(--fu-shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card:hover {
  box-shadow: var(--fu-shadow-default) !important;
}

.card-header,
.card-footer {
  background-color: var(--fu-gray-50) !important;
  color: var(--fu-text-body) !important;
  border-color: var(--fu-gray-200) !important;
}

.card-body,
.card-text,
.block .card-body,
.block_tree .card-body {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

.card-title,
.card-header h3,
.card-header h4,
.card-header h5 {
  color: var(--fu-gray-900) !important;
}

/* =============================================================================
   8. FORM INPUTS
   ============================================================================= */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea {
  background-color: var(--fu-white) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-md) !important;
  border: 1px solid var(--fu-gray-200) !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Selects need smaller radius and extra right padding for the native arrow */
select,
.custom-select {
  background-color: var(--fu-white) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-sm) !important;
  border: 1px solid var(--fu-gray-200) !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 6px 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: auto !important;
  max-width: 100% !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.custom-select:focus {
  background-color: var(--fu-white) !important;
  color: var(--fu-text-body) !important;
  border-color: var(--fu-blue) !important;
  box-shadow: var(--fu-shadow-focus-ring) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--fu-gray-400) !important;
}

/* Checkbox / toggle accent */
input[type="checkbox"]:checked {
  accent-color: var(--fu-blue) !important;
}

/* =============================================================================
   9. LINKS
   ============================================================================= */

a {
  color: var(--fu-blue) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

a:hover {
  color: var(--fu-blue-hover) !important;
}

/* =============================================================================
   10. DROPDOWNS (global)
   ============================================================================= */

.dropdown-menu {
  background-color: var(--fu-moodle-card-bg) !important;
  border: 1px solid var(--fu-gray-200) !important;
  border-radius: var(--fu-radius-md) !important;
  box-shadow: var(--fu-shadow-md) !important;
}

.dropdown-menu a,
.dropdown-menu span,
.dropdown-menu .dropdown-item {
  color: var(--fu-text-body) !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--fu-gray-200) !important;
}

/* =============================================================================
   11. BREADCRUMBS
   ============================================================================= */

.breadcrumb {
  background-color: transparent !important;
  border-radius: var(--fu-radius-pill) !important;
  padding: 8px 0 !important;
}

.breadcrumb-item a {
  color: var(--fu-blue) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--fu-gray-400) !important;
}

.breadcrumb-item.active {
  color: var(--fu-gray-500) !important;
}

/* =============================================================================
   12. ALERTS — Left accent border style
   ============================================================================= */

.alert {
  border-radius: var(--fu-radius-md) !important;
  border: none !important;
  border-left: 4px solid !important;
  font-family: 'Outfit', sans-serif !important;
}

.alert-info {
  background-color: var(--fu-info-bg) !important;
  color: var(--fu-info-text) !important;
  border-left-color: var(--fu-blue) !important;
}

.alert-success {
  background-color: var(--fu-success-bg) !important;
  color: var(--fu-success-text) !important;
  border-left-color: var(--fu-green) !important;
}

.alert-warning {
  background-color: var(--fu-warning-bg) !important;
  color: var(--fu-warning-text) !important;
  border-left-color: var(--fu-orange) !important;
}

.alert-danger,
.alert-error {
  background-color: var(--fu-error-light) !important;
  color: var(--fu-error-text) !important;
  border-left-color: var(--fu-error-text) !important;
}

/* =============================================================================
   13. TABLES
   ============================================================================= */

.table,
.generaltable {
  background-color: var(--fu-moodle-card-bg) !important;
  border-radius: var(--fu-radius-sm) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th,
.generaltable thead th {
  background-color: var(--fu-gray-50) !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--fu-gray-600) !important;
  border-bottom: 1px solid var(--fu-gray-200) !important;
}

.table td,
.generaltable td {
  background-color: var(--fu-moodle-card-bg) !important;
  border-bottom: 1px solid var(--fu-gray-100) !important;
  color: var(--fu-gray-600) !important;
  font-size: 14px !important;
}

.table tbody tr:hover td,
.generaltable tbody tr:hover td {
  background-color: var(--fu-gray-50) !important;
}

/* =============================================================================
   14. BADGES
   ============================================================================= */

.badge {
  border-radius: var(--fu-radius-pill) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
}

.badge-primary,
.badge.bg-primary {
  background-color: var(--fu-blue) !important;
  color: var(--fu-white) !important;
}

.badge-success,
.badge.bg-success {
  background-color: var(--fu-green) !important;
  color: var(--fu-gray-900) !important;
}

.badge-warning,
.badge.bg-warning {
  background-color: var(--fu-orange) !important;
  color: var(--fu-gray-900) !important;
}

/* =============================================================================
   15. SIDEBAR / DRAWER
   ============================================================================= */

[data-region="right-hand-drawer"],
.drawer,
.drawer-right,
.drawer-left,
#nav-drawer {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  box-shadow: var(--fu-shadow-lg) !important;
  transition: transform 0.3s ease !important;
}

.drawer a,
.drawer span,
.drawer div,
.drawer p,
.drawer li,
#nav-drawer a,
#nav-drawer span,
#nav-drawer div,
#nav-drawer .list-group-item {
  color: var(--fu-text-body) !important;
}

#nav-drawer .list-group-item {
  background-color: var(--fu-moodle-card-bg) !important;
  border-color: var(--fu-gray-100) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

#nav-drawer .list-group-item:hover {
  background-color: var(--fu-blue-subtle) !important;
}

#nav-drawer .list-group-item.active {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
  border-left: 3px solid var(--fu-blue) !important;
  font-weight: 500 !important;
}

/* =============================================================================
   16. DASHBOARD & CONTENT PAGES
   ============================================================================= */

/* --- Page header --- */
.page-header-headings h1 {
  font-size: 28px !important;
}

/* --- Timeline & Calendar blocks --- */
.block .header,
.block .title {
  background-color: var(--fu-gray-50) !important;
  color: var(--fu-gray-900) !important;
}

.section .content,
.section .summary {
  background-color: transparent !important;
  color: var(--fu-text-body) !important;
}

/* --- Calendar refinement --- */
.calendarwrapper .calendartable td {
  border-color: var(--fu-gray-100) !important;
}

/* Today's date number — circle highlight on the number only */
td.today .day-number-circle {
  background-color: var(--fu-blue) !important;
  color: var(--fu-white) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

td.today .day-number-circle .day-number {
  color: var(--fu-white) !important;
}

/* Today cell gets a very subtle blue wash */
td.today {
  background-color: var(--fu-blue-subtle) !important;
}

.calendarwrapper .calendartable th {
  color: var(--fu-gray-500) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* --- "New event" button — green CTA --- */
[data-action="new-event-button"] {
  background-color: var(--fu-green) !important;
  border-color: var(--fu-green) !important;
  color: var(--fu-gray-900) !important;
}

[data-action="new-event-button"]:hover {
  background-color: var(--fu-green-hover) !important;
  border-color: var(--fu-green-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--fu-shadow-md) !important;
}

/* --- Course cards --- */
.coursebox,
.course-info-container {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-lg) !important;
  border: 1px solid var(--fu-gray-200) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.coursebox:hover,
.course-info-container:hover {
  box-shadow: var(--fu-shadow-md) !important;
  transform: translateY(-2px) !important;
}

.coursebox .coursename a,
.course-info-container .coursename a {
  color: var(--fu-blue) !important;
  font-weight: 600 !important;
}

.coursebox .coursename a:hover,
.course-info-container .coursename a:hover {
  text-decoration: underline !important;
}

/* --- Course overview card images --- */
.dashboard-card .dashboard-card-img {
  border-radius: var(--fu-radius-lg) var(--fu-radius-lg) 0 0 !important;
}

/* --- Filter/sort dropdown buttons --- */
.btn.dropdown-toggle:not(.btn-primary):not(.btn-danger) {
  border: 1px solid var(--fu-gray-300) !important;
  border-radius: var(--fu-radius-pill) !important;
  background-color: var(--fu-white) !important;
  color: var(--fu-text-body) !important;
  font-weight: 400 !important;
  padding: 6px 14px !important;
}

.btn.dropdown-toggle:not(.btn-primary):not(.btn-danger):hover {
  border-color: var(--fu-gray-400) !important;
  background-color: var(--fu-gray-50) !important;
}

/* --- Empty states --- */
.empty-placeholder,
[data-region="empty-message"] {
  color: var(--fu-gray-500) !important;
}

/* --- Activity items --- */
.activity-item,
.activity-wrapper {
  background-color: transparent !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-md) !important;
  transition: background-color 0.15s ease !important;
}

.editing .activity-item:hover {
  background-color: var(--fu-gray-50) !important;
}

/* --- Activity icons --- */
.activityiconcontainer {
  border-radius: var(--fu-radius-md) !important;
}

/* --- Dashboard blocks --- */
.block_recentlyaccessedcourses .card,
.block_myoverview .card,
.block_timeline .card {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

/* =============================================================================
   17. MODALS
   ============================================================================= */

.modal-content {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border-radius: var(--fu-radius-lg) !important;
  border: 1px solid var(--fu-gray-200) !important;
  box-shadow: var(--fu-shadow-lg) !important;
  overflow: hidden;
}

.modal-header {
  background-color: var(--fu-gray-50) !important;
  color: var(--fu-text-body) !important;
  border-bottom: 1px solid var(--fu-gray-200) !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
  color: var(--fu-gray-900) !important;
}

.modal-body {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

.modal-footer {
  background-color: var(--fu-moodle-card-bg) !important;
  border-top: 1px solid var(--fu-gray-200) !important;
}

/* =============================================================================
   18. POPOVERS
   ============================================================================= */

.popover {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border: 1px solid var(--fu-gray-200) !important;
  border-radius: var(--fu-radius-md) !important;
  box-shadow: var(--fu-shadow-md) !important;
}

.popover-header {
  background-color: var(--fu-gray-50) !important;
  color: var(--fu-gray-900) !important;
  border-bottom: 1px solid var(--fu-gray-200) !important;
}

.popover-body {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

/* =============================================================================
   19. SECONDARY NAVIGATION
   ============================================================================= */

.secondary-navigation .navigation .nav-tabs .nav-link {
  border-radius: var(--fu-radius-pill) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  color: var(--fu-text-body) !important;
  transition: all 0.2s ease !important;
  padding: 6px 16px !important;
}

.secondary-navigation .navigation .nav-tabs .nav-link:hover {
  background-color: var(--fu-gray-100) !important;
}

.secondary-navigation .navigation .nav-tabs .nav-link.active {
  background-color: var(--fu-blue) !important;
  color: var(--fu-white) !important;
}

/* =============================================================================
   20. FOOTER
   ============================================================================= */

#page-footer {
  background-color: var(--fu-gray-50) !important;
  border-top: 1px solid var(--fu-gray-200) !important;
  color: var(--fu-gray-500) !important;
  font-size: 14px !important;
}

#page-footer a {
  color: var(--fu-blue) !important;
}

/* =============================================================================
   21. TOOLTIPS
   ============================================================================= */

.tooltip-inner {
  background-color: var(--fu-gray-900) !important;
  color: var(--fu-white) !important;
  border-radius: var(--fu-radius-sm) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
}

/* =============================================================================
   22. PROGRESS BARS
   ============================================================================= */

.progress {
  background-color: var(--fu-gray-100) !important;
  border-radius: var(--fu-radius-pill) !important;
  overflow: hidden;
}

.progress-bar {
  background-color: var(--fu-blue) !important;
}

/* =============================================================================
   23. LIST GROUPS
   ============================================================================= */

.list-group-item {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
  border-color: var(--fu-gray-100) !important;
  transition: background-color 0.15s ease !important;
}

.list-group-item:hover {
  background-color: var(--fu-gray-50) !important;
}

/* =============================================================================
   24. MOODLE-SPECIFIC ELEMENTS
   ============================================================================= */

/* --- Form accordion chevron toggles --- */
.fheader.btn,
a.fheader.btn.btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--fu-blue-subtle) !important;
  border: none !important;
  flex-shrink: 0 !important;
}

/* Do NOT override display on .expanded-icon / .collapsed-icon —
   Moodle toggles display:none on these based on aria-expanded state */
.fheader.btn .expanded-icon,
.fheader.btn .collapsed-icon {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fheader.btn .icon {
  color: var(--fu-blue) !important;
  margin: 0 !important;
}

/* --- Admin pages --- */
.path-admin #region-main,
.path-admin .settingsform,
.path-admin .form-item {
  background-color: transparent !important;
  color: var(--fu-text-body) !important;
}

/* --- User profile --- */
.userprofile,
.profile_tree {
  color: var(--fu-text-body) !important;
}

/* --- Notification area --- */
.popover-region,
.popover-region-container,
.content-item-container {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

.content-item-container .content-item-body {
  color: var(--fu-text-body) !important;
}

/* --- Message drawer --- */
[data-region="message-drawer"],
.message-app {
  background-color: var(--fu-moodle-card-bg) !important;
  color: var(--fu-text-body) !important;
}

[data-region="message-drawer"] a,
[data-region="message-drawer"] span,
[data-region="message-drawer"] div,
[data-region="message-drawer"] p {
  color: var(--fu-text-body) !important;
}

/* =============================================================================
   25. VISUAL FIXES — AUDIT ROUND
   ============================================================================= */

/* --- Home / Frontpage: Add logo above heading --- */
#page-site-index .page-header-headings::before {
  content: '' !important;
  display: block !important;
  background-image: url('/faceup-logo-blue.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 160px !important;
  height: 42px !important;
  margin-bottom: 12px !important;
}

/* Hide the text "Face Up Moodle" heading on frontpage — the logo replaces it */
#page-site-index .page-header-headings h1 {
  font-size: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Frontpage empty section — hide if empty */
#page-site-index .course-section .section-item:empty,
#page-site-index .section .course-content:empty {
  display: none !important;
}

/* Style the available courses section better */
#page-site-index .frontpage-course-list-all h2 {
  font-size: 20px !important;
  color: var(--fu-gray-700) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* Course listing card on frontpage */
#page-site-index .coursebox {
  padding: 16px !important;
}

/* --- Logged-out navbar: "Log in" link as button --- */
.navbar a[href*="login/index.php"] {
  background-color: var(--fu-white) !important;
  color: var(--fu-blue) !important;
  padding: 6px 20px !important;
  border-radius: var(--fu-radius-pill) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.navbar a[href*="login/index.php"]:hover {
  background-color: var(--fu-green) !important;
  color: var(--fu-gray-900) !important;
  transform: translateY(-1px) !important;
}

/* --- Edit mode toggle: style the switch itself --- */
.navbar .custom-control-input:checked ~ .custom-control-label::before,
.navbar input[type="checkbox"]:checked {
  background-color: var(--fu-green) !important;
  border-color: var(--fu-green) !important;
}

/* --- Footer help "?" button --- */
.btn-footer-popover {
  background-color: var(--fu-white) !important;
  color: var(--fu-gray-500) !important;
  border: 1px solid var(--fu-gray-200) !important;
  border-radius: 50% !important;
  box-shadow: var(--fu-shadow-sm) !important;
  width: 40px !important;
  height: 40px !important;
}

.btn-footer-popover:hover {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
  border-color: var(--fu-blue-muted) !important;
}

/* --- Profile page: "Message" button --- */
.userprofile .btn-outline-primary,
.page-header-image .btn {
  border: 1px solid var(--fu-gray-300) !important;
  color: var(--fu-gray-700) !important;
  background-color: var(--fu-white) !important;
}

.userprofile .btn-outline-primary:hover,
.page-header-image .btn:hover {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
  border-color: var(--fu-blue) !important;
}

/* --- Drawer toggle button (sidebar arrow) --- */
.drawer-toggler .btn {
  background-color: var(--fu-white) !important;
  color: var(--fu-gray-500) !important;
  border: 1px solid var(--fu-gray-200) !important;
  border-radius: 50% !important;
  box-shadow: var(--fu-shadow-sm) !important;
}

.drawer-toggler .btn:hover {
  background-color: var(--fu-blue-subtle) !important;
  color: var(--fu-blue) !important;
}

/* =============================================================================
   26. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fu-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--fu-gray-300);
  border-radius: var(--fu-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fu-gray-400);
}