:root {
  --mw-orange: #F87F08;
  --mw-orange-dark: #E66F00;
  --mw-gold: #F8A820;
  --mw-light-gold: #FFF4E0;
  --mw-navy: #102A43;
  --mw-slate: #32445A;
  --mw-teal: #168C8C;
  --mw-blue: #1769AA;
  --mw-bg: #F6F9FC;
  --mw-border: #D8E2EE;
}

/* ---------- Global ---------- */

html,
body {
  background-color: var(--mw-bg) !important;
  color: var(--mw-slate) !important;
}

body:not(.pagelayout-login) {
  background-image:
    linear-gradient(rgba(246,249,252,0.56), rgba(246,249,252,0.78)),
    url('/local/mindworxassets/mindworx-background.svg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

h1, h2, h3, h4, h5,
.page-header-headings h1,
.sectionname {
  color: var(--mw-navy) !important;
  font-weight: 800 !important;
}

/* ---------- Top navigation ---------- */

.navbar,
.navbar.fixed-top {
  background: linear-gradient(90deg, var(--mw-orange), var(--mw-gold)) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(16,42,67,0.10) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar a,
.navbar .dropdown-toggle,
.navbar .usertext {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.navbar .nav-link:hover,
.navbar a:hover,
.navbar .dropdown-toggle:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.navbar-brand::after {
  content: "" !important;
}

/* Menu / popover readability */
.dropdown-menu,
.popover-region-container,
.notification-area,
.messaging-area-container,
.drawer {
  background: #ffffff !important;
  color: var(--mw-navy) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(16,42,67,0.16) !important;
}

.dropdown-menu *,
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.popover-region-container *,
.popover-region-container a,
.notification-area *,
.messaging-area-container *,
.drawer * {
  color: var(--mw-navy) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.popover-region-container a:hover {
  background-color: var(--mw-light-gold) !important;
  color: var(--mw-navy) !important;
}

/* ---------- Buttons ---------- */

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

a:hover {
  color: var(--mw-orange-dark) !important;
}

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--mw-orange) !important;
  border-color: var(--mw-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(248,127,8,0.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background-color: var(--mw-orange-dark) !important;
  border-color: var(--mw-orange-dark) !important;
  color: #ffffff !important;
}

.btn-secondary {
  border-radius: 999px !important;
  color: var(--mw-navy) !important;
  background-color: #ffffff !important;
  border-color: var(--mw-border) !important;
}

/* ---------- Login page ---------- */

body.pagelayout-login,
.pagelayout-login body {
  min-height: 100vh !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0.24)),
    url('/local/mindworxassets/login-background.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* If PNG was not uploaded, fallback to SVG */
body.pagelayout-login:not(.has-login-bg),
.pagelayout-login body:not(.has-login-bg) {
  background-color: var(--mw-bg) !important;
}

.pagelayout-login #page,
.pagelayout-login #page-wrapper {
  min-height: 100vh !important;
  background: transparent !important;
}

.pagelayout-login #region-main {
  min-height: calc(100vh - 20px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
}

/* Remove Moodle's left welcome/marketing panel and duplicate visuals */
.pagelayout-login .logininfo,
.pagelayout-login .login-logo,
.pagelayout-login .login-heading + div:not(form),
.pagelayout-login .login-container > .row,
.pagelayout-login .login-container .left-column,
.pagelayout-login .login-container .login-instructions,
.pagelayout-login .login-container .login-identityproviders,
.pagelayout-login .login-divider,
.pagelayout-login .potentialidps,
.pagelayout-login .login-languagemenu,
.pagelayout-login .login-container [class*="marketing"],
.pagelayout-login .login-container [class*="welcome"],
.pagelayout-login .login-container img,
.pagelayout-login .login-container .logo {
  display: none !important;
}

.pagelayout-login .login-container {
  width: min(470px, 92vw) !important;
  margin: 0 auto !important;
  padding: 40px !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(216,226,238,0.80) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(16,42,67,0.18) !important;
}

.pagelayout-login .login-container::before {
  content: "";
  display: block;
  width: 225px;
  height: 58px;
  background-image: url('/local/mindworxassets/mindworx-compact-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin: 0 0 18px 0;
}

.pagelayout-login .login-container::after {
  content: "Prototype learning experience for the Mindworx Academy Instructional Designer assessment.";
  display: block;
  margin-top: 18px;
  color: var(--mw-slate);
  font-size: .9rem;
  text-align: center;
}

.pagelayout-login .login-heading,
.pagelayout-login h1,
.pagelayout-login h2 {
  color: var(--mw-navy) !important;
  font-weight: 900 !important;
  margin-top: 0 !important;
}

.pagelayout-login .login-heading {
  font-size: 1.85rem !important;
}

.pagelayout-login .login-container input.form-control {
  border-radius: 12px !important;
  border: 1px solid var(--mw-border) !important;
  padding: 13px 14px !important;
}

.pagelayout-login .login-container .btn-primary {
  width: 100% !important;
  padding: 13px 20px !important;
  margin-top: 12px !important;
}

/* ---------- Dashboard: one clean translucent panel ---------- */

#page-my-index #page.drawers .main-inner,
.pagelayout-mydashboard #page.drawers .main-inner {
  max-width: 1420px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

#page-my-index #region-main,
.pagelayout-mydashboard #region-main {
  width: 100% !important;
  max-width: 1420px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 44px rgba(16,42,67,0.09) !important;
  padding: 28px !important;
}

/* Remove inner block borders/layering */
#page-my-index .block,
#page-my-index .card,
#page-my-index .block_myoverview,
#page-my-index .block_timeline,
.pagelayout-mydashboard .block,
.pagelayout-mydashboard .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#page-my-index .block .card-body,
.pagelayout-mydashboard .block .card-body {
  background: transparent !important;
}

/* Course overview card shell */
#page-my-index .block_myoverview,
.pagelayout-mydashboard .block_myoverview {
  background: rgba(255,255,255,0.46) !important;
  border-radius: 20px !important;
  padding: 16px !important;
}

/* Keep course cards at normal size */
.dashboard-card,
.card.dashboard-card {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(216,226,238,0.80) !important;
  box-shadow: 0 10px 24px rgba(16,42,67,0.08) !important;
}

/* Moodle course thumbnail: no clipping */
.dashboard-card-img,
.card-img.dashboard-card-img,
.card-img-top,
.courseimage,
.course-card .card-img-top {
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  object-fit: contain !important;
}

/* If Moodle uses img tags inside card images */
.dashboard-card img,
.course-card img,
.card.dashboard-card img {
  object-fit: contain !important;
  width: 100% !important;
  height: 116px !important;
  background: #ffffff !important;
}

/* Hide injected dashboard/frontpage hero */
.mw-dashboard-hero,
.mw-frontpage-hero {
  display: none !important;
}

/* ---------- Course page cleanup ---------- */

body.path-course-view #page.drawers .main-inner {
  max-width: 1480px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.path-course-view #region-main::before,
body.path-course-view #region-main::after {
  display: none !important;
  content: none !important;
}

body.path-course-view #region-main {
  width: 100% !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 44px rgba(16,42,67,0.08) !important;
  padding: 28px !important;
}

body.path-course-view .page-header-headings h1 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
}

body.path-course-view .secondary-navigation {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(8px);
  border: none !important;
  border-radius: 18px !important;
  padding: 6px 12px !important;
}

/* Course sections */
body.path-course-view .course-section {
  background: rgba(255,255,255,0.64) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(16,42,67,0.06) !important;
  overflow: hidden;
  margin-bottom: 18px !important;
  padding: 16px !important;
}

body.path-course-view .course-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--mw-orange), var(--mw-gold));
}

body.path-course-view .course-section .sectionname {
  border-left: none !important;
  padding-left: 0 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.02em;
}

/* Section intro cards */
.mw-learning-card {
  background: rgba(255,255,255,0.62) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}

.mw-learning-card::before {
  display: none !important;
}

.mw-learning-card h2 {
  font-size: 1.5rem !important;
  margin: 4px 0 10px !important;
}

/* Visual slots */
.mw-placeholder {
  min-height: 92px !important;
  border: 1.5px dashed rgba(248,127,8,.38) !important;
  border-radius: 15px !important;
  background: rgba(255,244,224,0.42) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  color: var(--mw-navy) !important;
  padding: 12px !important;
  margin: 8px 0 14px !important;
}

.mw-placeholder strong {
  color: var(--mw-orange-dark) !important;
  font-size: .8rem !important;
  text-transform: uppercase !important;
}

.mw-placeholder small {
  color: var(--mw-slate) !important;
  font-size: .8rem !important;
}

/* Activities */
.activity-item {
  background: rgba(255,255,255,0.72) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(16,42,67,0.05) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}

.activity-item:hover {
  outline: 1px solid rgba(248,127,8,0.42) !important;
}

/* Evidence cards */
.mw-evidence-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}

.mw-evidence-item {
  background: rgba(255,255,255,0.72) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 11px 12px !important;
  color: var(--mw-navy) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Edit mode */
.editing .section .activity .actions a,
.editing .section .activity .actions i,
.editing .section .activity .dropdown-toggle,
.editing .dropdown-menu,
.editing .dropdown-menu * {
  color: var(--mw-navy) !important;
}

@media (max-width: 900px) {
  #page-my-index #region-main,
  body.path-course-view #region-main {
    max-width: 100% !important;
    padding: 18px !important;
  }

  .dashboard-card,
  .card.dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mw-evidence-grid {
    grid-template-columns: 1fr !important;
  }

  .pagelayout-login .login-container {
    padding: 28px !important;
  }
}

/* =========================================================
   MINDWORX LAYERING FIX PATCH
   Purpose:
   - keep background fixed while scrolling
   - remove competing Moodle content backgrounds
   - restore lifted course-card styling
   - clean course view page layering
   ========================================================= */

/* ---------- Persistent background layer ---------- */

html,
body {
  min-height: 100% !important;
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(246,249,252,0.58), rgba(246,249,252,0.82)),
    url('/local/mindworxassets/mindworx-background.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Login page should use its own image, not the general course background */
body.pagelayout-login::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.24)),
    url('/local/mindworxassets/login-background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Stop older body background rules competing with fixed pseudo background */
body:not(.pagelayout-login),
body.pagelayout-login,
.pagelayout-login body {
  background-image: none !important;
  background-color: transparent !important;
}

/* ---------- Remove Moodle wrapper layering ---------- */

#page,
#page-wrapper,
#page.drawers,
#page.drawers .main-inner,
#page-content,
#region-main-box,
#region-main-settings-menu,
#page-navbar,
.secondary-navigation,
.moremenu,
.drawercontent {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep nav readable but not heavy */
.secondary-navigation {
  border: none !important;
}

/* Remove default white Moodle container backgrounds that create stacked panels */
#page.drawers .main-inner,
#page.drawers div[role="main"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Dashboard: one clean surface only ---------- */

#page-my-index #region-main,
.pagelayout-mydashboard #region-main {
  max-width: 1440px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.64) !important;
  backdrop-filter: blur(12px);
  border: none !important;
  border-radius: 26px !important;
  box-shadow: 0 22px 56px rgba(16,42,67,0.12) !important;
  padding: 34px !important;
}

/* Do not make every block a new white surface */
#page-my-index .block,
#page-my-index .card:not(.dashboard-card),
#page-my-index .block_myoverview,
#page-my-index .block_timeline,
.pagelayout-mydashboard .block,
.pagelayout-mydashboard .card:not(.dashboard-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* But keep internal controls readable */
#page-my-index .form-control,
#page-my-index .custom-select,
#page-my-index select,
#page-my-index input[type="text"],
#page-my-index .btn-secondary {
  background: rgba(255,255,255,0.92) !important;
}

/* ---------- Course cards: lifted, bordered, normal image ---------- */

.dashboard-card,
.card.dashboard-card,
.block_myoverview .dashboard-card {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(216,226,238,0.95) !important;
  border-radius: 18px !important;
  box-shadow:
    0 16px 34px rgba(16,42,67,0.12),
    0 2px 6px rgba(16,42,67,0.05) !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dashboard-card:hover,
.card.dashboard-card:hover {
  transform: translateY(-3px);
  border-color: rgba(248,127,8,0.55) !important;
  box-shadow:
    0 22px 44px rgba(16,42,67,0.16),
    0 4px 10px rgba(16,42,67,0.06) !important;
}

.dashboard-card .card-body,
.card.dashboard-card .card-body {
  background: #ffffff !important;
  padding: 16px !important;
}

/* Preserve course image without clipping */
.dashboard-card-img,
.card-img.dashboard-card-img,
.card-img-top,
.courseimage,
.course-card .card-img-top,
.dashboard-card .card-img-top {
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  object-fit: contain !important;
}

/* If Moodle renders an actual img tag */
.dashboard-card img,
.course-card img,
.card.dashboard-card img {
  object-fit: contain !important;
  width: 100% !important;
  height: 124px !important;
  background-color: #ffffff !important;
}

/* ---------- Course page: remove competing panels ---------- */

body.path-course-view #region-main {
  max-width: 1380px !important;
  margin: 0 auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 24px 40px !important;
}

/* Course title area cleaner */
body.path-course-view .page-header-headings {
  max-width: 1380px;
  margin: 0 auto 16px;
}

body.path-course-view .page-header-headings h1 {
  font-size: clamp(2rem, 3vw, 3.05rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
}

/* Course navigation is one thin translucent strip */
body.path-course-view .secondary-navigation {
  max-width: 1380px !important;
  margin: 0 auto 18px !important;
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(16,42,67,0.05) !important;
}

/* Course sections are the main content cards */
body.path-course-view .course-section {
  max-width: 1380px !important;
  margin: 0 auto 22px !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(216,226,238,0.80) !important;
  border-radius: 24px !important;
  box-shadow:
    0 18px 42px rgba(16,42,67,0.10),
    0 2px 6px rgba(16,42,67,0.04) !important;
  overflow: hidden;
  padding: 20px !important;
}

/* Keep left orange accent but make it intentional */
body.path-course-view .course-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--mw-orange), var(--mw-gold));
}

/* Inner Moodle activity/text containers should not become competing panels */
body.path-course-view .course-section .content,
body.path-course-view .course-section .summary,
body.path-course-view .course-section .section,
body.path-course-view .course-section .course-content-item-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Learner copy card: light but not another major container */
.mw-learning-card {
  background: rgba(255,255,255,0.52) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

.mw-learning-card h2 {
  font-size: 1.45rem !important;
  margin: 4px 0 10px !important;
}

/* Moodle activity items: lifted but smaller than section cards */
.activity-item {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(216,226,238,0.70) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(16,42,67,0.06) !important;
  padding: 13px !important;
  margin-bottom: 12px !important;
}

.activity-item:hover {
  border-color: rgba(248,127,8,0.50) !important;
  box-shadow: 0 12px 26px rgba(16,42,67,0.09) !important;
  transform: translateY(-1px);
}

/* Visual slot: visible but not dominating */
.mw-placeholder {
  min-height: 88px !important;
  border: 1.5px dashed rgba(248,127,8,.35) !important;
  border-radius: 16px !important;
  background: rgba(255,244,224,0.36) !important;
  padding: 12px !important;
  margin: 8px 0 14px !important;
}

/* ---------- Drawer/left index should not create harsh white block ---------- */

.drawer-left,
.drawer-left .drawercontent,
.courseindex,
#courseindex {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(10px);
}

.courseindex .courseindex-item.pageitem {
  background: var(--mw-orange) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

/* ---------- Edit mode controls ---------- */

.editing .section .activity .actions a,
.editing .section .activity .actions i,
.editing .section .activity .dropdown-toggle,
.editing .dropdown-menu,
.editing .dropdown-menu * {
  color: var(--mw-navy) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  #page-my-index #region-main,
  .pagelayout-mydashboard #region-main,
  body.path-course-view #region-main,
  body.path-course-view .course-section {
    max-width: 100% !important;
    padding: 18px !important;
  }

  .dashboard-card,
  .card.dashboard-card,
  .block_myoverview .dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   DASHBOARD COURSE CARD LIFT PATCH
   Makes Moodle Course overview cards feel like raised cards
   ========================================================= */

/* Give the course overview block breathing room */
#page-my-index .block_myoverview,
.pagelayout-mydashboard .block_myoverview {
  background: rgba(255,255,255,0.38) !important;
  border-radius: 24px !important;
  padding: 22px !important;
}

/* The course card container itself */
#page-my-index .block_myoverview .dashboard-card,
#page-my-index .block_myoverview .card.dashboard-card,
#page-my-index .block_myoverview [data-region="course-content"] .card,
#page-my-index .block_myoverview .course-card,
.pagelayout-mydashboard .block_myoverview .dashboard-card,
.pagelayout-mydashboard .block_myoverview .card.dashboard-card,
.pagelayout-mydashboard .block_myoverview [data-region="course-content"] .card,
.pagelayout-mydashboard .block_myoverview .course-card {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  background: #ffffff !important;
  border: 1px solid rgba(216,226,238,0.96) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 48px rgba(16,42,67,0.18),
    0 8px 18px rgba(16,42,67,0.08),
    0 1px 0 rgba(255,255,255,0.9) inset !important;
  transform: translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

/* Hover lift */
#page-my-index .block_myoverview .dashboard-card:hover,
#page-my-index .block_myoverview .card.dashboard-card:hover,
#page-my-index .block_myoverview [data-region="course-content"] .card:hover,
#page-my-index .block_myoverview .course-card:hover,
.pagelayout-mydashboard .block_myoverview .dashboard-card:hover,
.pagelayout-mydashboard .block_myoverview .card.dashboard-card:hover,
.pagelayout-mydashboard .block_myoverview [data-region="course-content"] .card:hover,
.pagelayout-mydashboard .block_myoverview .course-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(248,127,8,0.65) !important;
  box-shadow:
    0 32px 62px rgba(16,42,67,0.24),
    0 12px 24px rgba(248,127,8,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset !important;
}

/* Image area: clean contained thumbnail with subtle separator */
#page-my-index .block_myoverview .dashboard-card-img,
#page-my-index .block_myoverview .card-img.dashboard-card-img,
#page-my-index .block_myoverview .card-img-top,
#page-my-index .block_myoverview .courseimage,
#page-my-index .block_myoverview .course-card .card-img-top,
.pagelayout-mydashboard .block_myoverview .dashboard-card-img,
.pagelayout-mydashboard .block_myoverview .card-img.dashboard-card-img,
.pagelayout-mydashboard .block_myoverview .card-img-top,
.pagelayout-mydashboard .block_myoverview .courseimage,
.pagelayout-mydashboard .block_myoverview .course-card .card-img-top {
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  object-fit: contain !important;
  border-bottom: 1px solid rgba(216,226,238,0.75) !important;
}

/* Actual img fallback */
#page-my-index .block_myoverview .dashboard-card img,
#page-my-index .block_myoverview .course-card img,
#page-my-index .block_myoverview .card.dashboard-card img,
.pagelayout-mydashboard .block_myoverview .dashboard-card img,
.pagelayout-mydashboard .block_myoverview .course-card img,
.pagelayout-mydashboard .block_myoverview .card.dashboard-card img {
  object-fit: contain !important;
  width: 100% !important;
  height: 132px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(216,226,238,0.75) !important;
}

/* Body should look like a proper card body */
#page-my-index .block_myoverview .dashboard-card .card-body,
#page-my-index .block_myoverview .card.dashboard-card .card-body,
#page-my-index .block_myoverview .course-card .card-body,
#page-my-index .block_myoverview [data-region="course-content"] .card .card-body,
.pagelayout-mydashboard .block_myoverview .dashboard-card .card-body,
.pagelayout-mydashboard .block_myoverview .card.dashboard-card .card-body,
.pagelayout-mydashboard .block_myoverview .course-card .card-body,
.pagelayout-mydashboard .block_myoverview [data-region="course-content"] .card .card-body {
  background: #ffffff !important;
  padding: 18px 18px 20px !important;
  min-height: 122px !important;
}

/* Course title */
#page-my-index .block_myoverview .dashboard-card .coursename,
#page-my-index .block_myoverview .dashboard-card .card-title,
#page-my-index .block_myoverview .dashboard-card a.coursename,
#page-my-index .block_myoverview [data-region="course-content"] .card a,
.pagelayout-mydashboard .block_myoverview .dashboard-card .coursename,
.pagelayout-mydashboard .block_myoverview .dashboard-card .card-title,
.pagelayout-mydashboard .block_myoverview .dashboard-card a.coursename,
.pagelayout-mydashboard .block_myoverview [data-region="course-content"] .card a {
  color: var(--mw-blue) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* Course category / subtitle */
#page-my-index .block_myoverview .dashboard-card .text-muted,
#page-my-index .block_myoverview .dashboard-card .small,
.pagelayout-mydashboard .block_myoverview .dashboard-card .text-muted,
.pagelayout-mydashboard .block_myoverview .dashboard-card .small {
  color: var(--mw-slate) !important;
}

/* Card menu button should float cleanly */
#page-my-index .block_myoverview .dashboard-card .dropdown,
#page-my-index .block_myoverview .dashboard-card .dropdown-toggle,
.pagelayout-mydashboard .block_myoverview .dashboard-card .dropdown,
.pagelayout-mydashboard .block_myoverview .dashboard-card .dropdown-toggle {
  color: var(--mw-navy) !important;
}

/* Add subtle orange top accent */
#page-my-index .block_myoverview .dashboard-card::before,
#page-my-index .block_myoverview .card.dashboard-card::before,
.pagelayout-mydashboard .block_myoverview .dashboard-card::before,
.pagelayout-mydashboard .block_myoverview .card.dashboard-card::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--mw-orange), var(--mw-gold));
}

/* Keep the card grid from stretching cards */
#page-my-index .block_myoverview [data-region="paged-content-page"],
#page-my-index .block_myoverview [data-region="courses-view"],
#page-my-index .block_myoverview .card-deck,
#page-my-index .block_myoverview .dashboard-card-deck,
.pagelayout-mydashboard .block_myoverview [data-region="paged-content-page"],
.pagelayout-mydashboard .block_myoverview [data-region="courses-view"],
.pagelayout-mydashboard .block_myoverview .card-deck,
.pagelayout-mydashboard .block_myoverview .dashboard-card-deck {
  align-items: flex-start !important;
}

/* Mobile fallback */
@media (max-width: 760px) {
  #page-my-index .block_myoverview .dashboard-card,
  #page-my-index .block_myoverview .card.dashboard-card,
  #page-my-index .block_myoverview [data-region="course-content"] .card,
  #page-my-index .block_myoverview .course-card,
  .pagelayout-mydashboard .block_myoverview .dashboard-card,
  .pagelayout-mydashboard .block_myoverview .card.dashboard-card,
  .pagelayout-mydashboard .block_myoverview [data-region="course-content"] .card,
  .pagelayout-mydashboard .block_myoverview .course-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}