/* ============================================================
   ATLEARN REDESIGN — Conflict Fixes for alpha/style/custom.css
   These overrides MUST load AFTER custom.css to win specificity
   ============================================================ */

/* ── SIDEBAR CUSTOM REPORTS MENU (Reviews, Assignments, Online Meetings, Quiz Attempts) ── */
/* Exact class found via DOM inspection: custom-report-menu-item nav-link report-head */
a.custom-report-menu-item,
.custom-report-menu-item,
a.custom-report-menu-item.nav-link,
a.custom-report-menu-item.report-head,
#nav-drawer a.custom-report-menu-item,
#nav-drawer .custom-report-menu-item {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--al-side-tx2) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
  margin: 2px 0 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
a.custom-report-menu-item:hover,
#nav-drawer a.custom-report-menu-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--al-side-tx) !important;
}
a.custom-report-menu-item.active,
#nav-drawer a.custom-report-menu-item.active {
  background: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
/* The white card wrapper around these links */
.rui-custom-reports-menu,
[class*="custom-reports"],
[class*="custom_reports"],
.rui-reports-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}


/* ── FONT: Override the 'Inter' reference in custom.css ── */
body,
.student-list-page,
.wrapper-course,
*:not(code):not(pre) {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── SIDEBAR: custom.css sets #nav-drawer { background: #fff } — fix it ── */
#nav-drawer,
#nav-drawer .nav-drawer-container,
div#nav-drawer {
  background-color: var(--al-side-bg) !important; /* #0E1A3C */
  color: var(--al-side-tx) !important;
}

/* Nav item text & icons — custom.css sets #001b48 — override to light */
#nav-drawer .rui-sidebar-nav-text,
#nav-drawer .rui-sidebar-nav-icon,
#nav-drawer .rui-sidebar-abtn,
#nav-drawer .rui-sidebar-abtn .rui-sidebar-nav-text,
#nav-drawer .rui-sidebar-abtn .rui-sidebar-nav-icon,
#nav-drawer .rui-sidebar-nav-item-link .rui-sidebar-nav-text,
#nav-drawer .rui-sidebar-nav-item-link .rui-sidebar-nav-icon,
#nav-drawer a,
#nav-drawer span:not(.badge),
#nav-drawer svg {
  color: var(--al-side-tx2) !important;
}

/* Active nav item — custom.css sets rgb(0 26 71) — change to indigo */
#nav-drawer .rui-sidebar-nav-item-link.active,
#nav-drawer .rui-flatnavigation .rui-sidebar-nav-item-link.active {
  background-color: var(--al-pri) !important; /* #4F46E5 */
  border-radius: 10px !important;
}
#nav-drawer .rui-sidebar-nav-item-link.active .rui-sidebar-nav-text,
#nav-drawer .rui-sidebar-nav-item-link.active .rui-sidebar-nav-icon,
#nav-drawer .rui-sidebar-nav-item-link.active svg {
  color: #fff !important;
}

/* Nav item hover — custom.css uses #ebebfc (light) — keep but on dark bg */
#nav-drawer .rui-sidebar-nav-item-link:hover {
  background-color: rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
#nav-drawer .rui-sidebar-nav-item-link:hover .rui-sidebar-nav-text,
#nav-drawer .rui-sidebar-nav-item-link:hover .rui-sidebar-nav-icon,
#nav-drawer .rui-sidebar-nav-item-link:hover svg {
  color: var(--al-side-tx) !important;
}

/* Drawer footer admin link — keep white */
#nav-drawer .rui-drawer-footer .rui-sidebar-nav-item-link .rui-sidebar-nav-icon,
#nav-drawer .rui-drawer-footer .rui-sidebar-nav-item-link .rui-sidebar-nav-text {
  color: #ffffff !important;
}

/* ── TOPBAR: custom.css sets rui-topbar-wrapper { background: #fff } ── */
.rui-topbar-wrapper,
nav#topBar,
#topBar,
#topBar .rui-topbar {
  background-color: var(--al-surface) !important;
  border-bottom: 1px solid var(--al-line) !important;
  box-shadow: none !important;
}

/* Topbar text colors */
.rui-topbar-wrapper *,
#topBar .site-name,
#topBar .rui-navbar-brand {
  color: var(--al-tx) !important;
}
.primary-navigation .navigation .nav-link,
.rui-topbar-special-btn {
  color: var(--al-tx2) !important;
}

/* ── BUTTONS: custom.css breaks btn-primary with white bg ── */
button.btn.btn-primary,
a.btn.btn-primary,
input.btn.btn-primary,
.btn-primary {
  background: var(--al-pri) !important;
  background-color: var(--al-pri) !important;
  color: #fff !important;
  border-color: var(--al-pri) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.25) !important;
}
button.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.btn-primary:hover {
  filter: brightness(1.08) !important;
  background: var(--al-pri) !important;
  color: #fff !important;
}

/* Save & display buttons */
input#id_saveanddisplay,
input.btn.btn-primary {
  background: var(--al-pri) !important;
  color: #fff !important;
  border-color: var(--al-pri) !important;
}

/* ── BTN-SECONDARY: custom.css forces white bg/dark text ── */
button.btn.btn-secondary,
a.btn.btn-secondary,
.btn-secondary {
  background-color: var(--al-surface) !important;
  color: var(--al-tx) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
button.btn.btn-secondary:hover,
.btn-secondary:hover {
  border-color: var(--al-pri) !important;
  color: var(--al-pri) !important;
  background-color: var(--al-priw) !important;
}

/* ── PROGRESS BARS: custom.css has a nice gradient already — refine ── */
.rui-progress-bar,
.progress-bar {
  background: linear-gradient(90deg, var(--al-pri) 0%, #818cf8 100%) !important;
  border-radius: 99px !important;
}
.rui-mo-progress,
.progress {
  height: 6px !important;
  background-color: var(--al-line2) !important;
  border-radius: 99px !important;
}

/* ── COURSE CARDS: custom.css has some good styles — augment with our tokens ── */
.mkcustom.rui-course-card {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background-color: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
}
.mkcustom.rui-course-card:hover {
  box-shadow: var(--al-shadow2) !important;
  transform: translateY(-4px) !important;
  border-color: var(--al-line) !important;
}
.mkcustom .rui-course-card-title a {
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
}
.mkcustom .rui-course-card-title a:hover {
  color: var(--al-pri) !important;
}

/* ── PAGE BODY BACKGROUND ── */
body,
#page,
#page-wrapper,
.rui-page,
#region-main,
.main-content {
}

/* ── SECONDARY NAV: custom.css sets #f7f8ff ── */
.secondary-navigation {
  background-color: var(--al-surface2) !important;
  border-bottom: 1px solid var(--al-line) !important;
}

/* ── CALENDAR: unify with design token colors ── */
.calendarwrapper {
  background: var(--al-surface) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--al-shadow) !important;
}
.calendarmonth.calendartable thead th {
  background: var(--al-surface2) !important;
  color: var(--al-tx3) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.calendarmonth.calendartable td.day {
  background: var(--al-surface) !important;
}
.calendarmonth.calendartable td.day:hover {
  background: var(--al-surface2) !important;
}
.today .day-number-circle {
  background: var(--al-pri) !important;
  color: #fff !important;
}

/* Calendar event color scheme using design tokens */
.calendar_event_course {
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-left: 3px solid var(--al-pri) !important;
}
.calendar_event_site {
  background: var(--al-okw) !important;
  color: var(--al-ok) !important;
  border-left: 3px solid var(--al-ok) !important;
}
.calendar_event_group {
  background: var(--al-warnw) !important;
  color: var(--al-warn) !important;
  border-left: 3px solid var(--al-warn) !important;
}
.calendar_event_user {
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-left: 3px solid var(--al-pri) !important;
}

/* ── DROPDOWN MENUS ── */
.dropdown-menu {
  border: 1px solid var(--al-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--al-shadow2) !important;
  background: var(--al-surface) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  padding: 6px !important;
}
.dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--al-tx2) !important;
  padding: 8px 12px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.dropdown-menu .dropdown-item:hover {
  background-color: var(--al-priw) !important;
  color: var(--al-pri) !important;
}
.dropdown-item a.active {
  background-color: var(--al-pri) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ── TABLES: students.php and other alpha custom pages ── */
table {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
table thead th,
.dataTables_wrapper thead th {
  background: var(--al-surface2) !important;
  color: var(--al-tx3) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 11px 8px !important;
  border-bottom: 1px solid var(--al-line2) !important;
  border-top: none !important;
}

/* Ensure sorting arrows in DataTables render correctly by restoring icon fonts */
table thead th::before,
table thead th::after,
.dataTables_wrapper thead th::before,
.dataTables_wrapper thead th::after {
  font-family: "FontAwesome", "Font Awesome 6 Free", "Font Awesome 5 Free", system-ui, sans-serif !important;
}
table tbody tr {
  border-top: 1px solid var(--al-line2) !important;
  transition: background .1s !important;
}
table tbody tr:hover { background: var(--al-surface2) !important; }
table tbody td {
  padding: var(--al-rowpad) 8px !important;
  font-size: 13px !important;
  color: var(--al-tx2) !important;
  border-top: 1px solid var(--al-line2) !important;
  border-left: none !important;
  border-right: none !important;
}

/* ── CARDS / BLOCKS ── */
.card,
.block {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
}
.card-header,
.block-header {
  background: var(--al-surface) !important;
  border-bottom: 1px solid var(--al-line2) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  padding: 16px 18px !important;
}
.card-body {
  padding: 18px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--al-tx2) !important;
}

/* ── BADGES ── */
span.badge-sq.badge-light {
  background-color: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-radius: 99px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── FORMS ── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: var(--al-surface2) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 9px !important;
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
}
.form-control:focus,
input:focus,
select:focus {
  border-color: var(--al-pri) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
  background: var(--al-surface) !important;
}

/* ── ALERTS & NOTICES ── */
.alert {
  border-radius: 12px !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
}
.alert-success  { background: var(--al-okw)   !important; color: var(--al-ok)   !important; }
.alert-warning  { background: var(--al-warnw) !important; color: var(--al-warn) !important; }
.alert-danger   { background: var(--al-dangw) !important; color: var(--al-dang) !important; }
.alert-info,
.alert-primary  { background: var(--al-priw)  !important; color: var(--al-pri)  !important; }

/* ── MODALS ── */
.modal-content {
  border-radius: 16px !important;
  border: 1px solid var(--al-line) !important;
  box-shadow: var(--al-shadow2) !important;
  background: var(--al-surface) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.modal-header {
  border-bottom: 1px solid var(--al-line2) !important;
  padding: 16px 18px !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--al-tx) !important;
}

/* ── CATEGORY CARDS ── */
.rui-category-link:hover {
  color: var(--al-pri) !important;
}
.subcategories.custom_categoreis .rui-category-link {
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ── NAVIGATION COLLAPSE BUTTONS ── */
a#collapsesections,
.btn.btn-secondary.collapseexpand {
  background-color: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border: none !important;
  border-radius: 9px !important;
}

/* ── CALENDAR VIEW DROPDOWN ── */
#calendarviewdropdown,
.btn.btn-sm.btn-secondary.dropdown-toggle {
  background-color: var(--al-surface) !important;
  border: 1px solid var(--al-line) !important;
  color: var(--al-tx) !important;
  border-radius: 9px !important;
}

/* ── FOOTER ── */
.footer-link a.btn.btn-secondary {
  background-color: var(--al-priw) !important;
  color: var(--al-pri) !important;
}

/* ── PAGE HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--al-tx) !important;
}
h1 { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
h2 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
h3 { font-size: 18px !important; font-weight: 700 !important; }

/* ── BREADCRUMBS ── */
.breadcrumb {
  background: transparent !important;
  font-size: 12.5px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  padding: 0 !important;
}
.breadcrumb-item a { color: var(--al-pri) !important; }
.breadcrumb-item.active { color: var(--al-tx3) !important; }

/* ── TABS ── */
.nav-tabs .nav-link {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  border-radius: 9px 9px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--al-tx2) !important;
}
.nav-tabs .nav-link.active {
  background: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-color: var(--al-pri) !important;
}

/* ── PAGINATION ── */
.pagination .page-link {
  border-radius: 8px !important;
  border: 1px solid var(--al-line) !important;
  color: var(--al-tx2) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  transition: background .15s !important;
}
.pagination .page-item.active .page-link {
  background: var(--al-pri) !important;
  border-color: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.pagination .page-link:hover {
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-color: var(--al-priw) !important;
}

/* ── SEARCH INPUTS ── */
.simplesearchform input[type="text"],
.search-input {
  background: var(--al-surface2) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 9px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--al-tx) !important;
}

/* ── GENERAL TEXT UTILITIES ── */
.text-muted { color: var(--al-tx3) !important; }
.text-primary { color: var(--al-pri) !important; }
p, li, td, th, label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Ensure FontAwesome is respected anywhere in the theme */
.fa, .fas, .far, .fal, .fab, i[class*="fa-"] {
  font-family: "FontAwesome", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
}

/* ── DASHBOARD: UNBOX "SUMMARY" & "OVERVIEW" BLOCKS ── */
/* 1. Unbox the main block container so it blends into the page background */
section.block_summarycards.block.card,
.block_summarycards,
section.block_myoverview.block.card,
.block_myoverview {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 16px !important;
}
section.block_summarycards.block.card .card-body,
.block_summarycards .card-body,
.block_summarycards .card-text,
section.block_myoverview.block.card .card-body,
.block_myoverview .card-body {
  padding: 0 !important;
  background: transparent !important;
}
section.block_summarycards.block.card .card-title,
.block_summarycards .card-title,
.block_summarycards h5,
.block_summarycards .rui-cal-header {
  display: none !important; /* Hide the grey "SUMMARY" header pill completely */
}

/* 2. Restyle the grid container */
.block_summarycards .summarycard-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 0 !important;
}
@media (max-width: 1200px) {
  .block_summarycards .summarycard-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .block_summarycards .summarycard-container {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Restyle the individual cards to match the redesign document exactly */
.block_summarycards .summarycard-item {
  background: var(--al-surface) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--al-shadow) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: row-reverse !important; /* Move icon to the right, content to the left */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  transition: all 0.2s ease !important;
}
.block_summarycards .summarycard-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--al-shadow2) !important;
  border-color: var(--al-pri) !important;
  padding: 16px 18px !important; /* Fix hover padding from PHP */
  border-top: 1px solid var(--al-pri) !important;
}

/* 4. Restyle the content inside the card */
.block_summarycards .summarycard-content {
  display: flex !important;
  flex-direction: column-reverse !important; /* Label on top, number on bottom */
  align-items: flex-start !important;
}
.block_summarycards .summarycard-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--al-tx3) !important;
  margin-bottom: 6px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.block_summarycards .summarycard-count {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* 5. Restyle the icons to be smaller and use the primary accent */
.block_summarycards .summarycard-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--al-priw) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.block_summarycards .summarycard-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* ── INJECT "Good morning" GREETING ── */
.block_summarycards .card-text::before {
  content: "Good morning, User";
  display: block !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  margin-bottom: 20px !important;
}

/* ── INNER PAGES: RESTYLE COURSE OVERVIEW & OTHER BLOCK HEADERS ── */
/* The target design uses clean text headers, no grey pill backgrounds */
.card-title,
.block-title,
.rui-cal-header,
h5.card-title,
.card-body .d-flex.align-items-center.flex-wrap,
.rui-cal-header.header.d-flex.flex-wrap,
.rui-course-header.d-flex.align-items-center {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--al-tx) !important;
  text-transform: none !important;
  margin-bottom: 14px !important;
}
/* Disable hover/border on these pill structures if they exist */
.card-body .d-flex.align-items-center.flex-wrap:hover,
.rui-cal-header.header.d-flex.flex-wrap:hover {
  background: transparent !important;
}
/* For the card header container itself */
.card-header,
.block-header,
.rui-course-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 18px 18px 0 18px !important; /* Spacing matching the target design */
}
/* Ensure the content aligns well inside the cards */
.block .card-body,
.card .card-body {
  padding: 18px !important;
}

/* ── COURSE CARDS (MY LEARNING PAGE) ── */
.al-course-card {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}
.al-course-card:hover {
  box-shadow: var(--al-shadow2) !important;
  transform: translateY(-2px) !important;
}

/* ── DEFAULT MOODLE COURSE CARDS (block_myoverview) - VIBRANT COLORS ── */
.block_myoverview .dashboard-card {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
}
.block_myoverview .dashboard-card:hover {
  box-shadow: var(--al-shadow2) !important;
  transform: translateY(-4px) !important;
}

/* Colorful backgrounds for the top half of the course cards */
.al-course-card:nth-child(6n+1) .al-course-card-cover { background-image: none !important; background-color: #6366f1 !important; } /* Indigo */
.al-course-card:nth-child(6n+2) .al-course-card-cover { background-image: none !important; background-color: #0ea5e9 !important; } /* Light Blue */
.al-course-card:nth-child(6n+3) .al-course-card-cover { background-image: none !important; background-color: #10b981 !important; } /* Green */
.al-course-card:nth-child(6n+4) .al-course-card-cover { background-image: none !important; background-color: #f59e0b !important; } /* Orange */
.al-course-card:nth-child(6n+5) .al-course-card-cover { background-image: none !important; background-color: #ec4899 !important; } /* Pink */
.al-course-card:nth-child(6n+6) .al-course-card-cover { background-image: none !important; background-color: #0f172a !important; } /* Slate/Navy */

/* Style the text inside the card */
.block_myoverview .dashboard-card .card-body {
  padding: 20px !important;
  background: transparent !important;
}
.block_myoverview .dashboard-card .coursename {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--al-tx) !important;
  margin-bottom: 8px !important;
}

/* ── RESTORE DARK BLUE BANNER & FORCE WHITE TEXT ── */
/* We removed the transparent hack so the original dark blue gradient returns */
div.my-courses-header h2.welcome-title,
div.my-courses-header .welcome-title {
  color: #ffffff !important;
  font-size: 28px !important;
}
div.my-courses-header p.welcome-subtitle,
div.my-courses-header .welcome-subtitle {
  color: #e2e8f0 !important;
  font-size: 16px !important;
}

/* ── ELIMINATE MASSIVE GAP BEFORE FOOTER ── */
#page-wrapper,
#page,
#page-content,
#region-main,
.rui-dashboard-main {
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.block-region,
#block-region-content,
#block-region-side-pre,
#block-region-side-post {
  min-height: auto !important;
}
.rui-page-footer {
  margin-top: 40px !important;
}

/* Fix generic page headers */
.path-my-courses .rui-title-wrapper h1,
.path-my-courses .rui-title-wrapper h2,
.path-my-courses .rui-page-title h1,
.path-my-courses .page-header-headings h1,
.path-my-courses .rui-page-title-text,
.path-my-courses .page-context-header h1 {
  color: var(--al-tx) !important;
}
.path-my-courses .rui-title-wrapper p,
.path-my-courses .rui-page-title p,
.path-my-courses .page-context-header p,
.path-my-courses .rui-page-title-description {
  color: var(--al-tx2) !important;
}

.al-course-card-cover {
  height: 96px !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
  background-color: var(--al-pri) !important; /* Fallback if no image */
}
.al-course-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.1), transparent) !important;
}
.al-course-badge-cat {
  position: relative !important;
  z-index: 2 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: rgba(0,0,0,.28) !important;
  padding: 4px 9px !important;
  border-radius: 99px !important;
}
.al-course-badge-vis {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(0,0,0,.28) !important;
  padding: 4px 9px !important;
  border-radius: 99px !important;
}
.al-course-card-body {
  padding: 15px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background: transparent !important;
}
.al-course-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--al-tx) !important;
  text-decoration: none !important;
}
.al-course-title:hover {
  color: var(--al-pri) !important;
}
.al-course-meta {
  display: flex !important;
  gap: 14px !important;
  margin-top: 9px !important;
  font-size: 11.5px !important;
  color: var(--al-tx3) !important;
  font-weight: 600 !important;
}
.al-course-meta-item {
  display: flex !important;
  align-items: center !important;
}
.al-course-progress {
  margin-top: 14px !important;
}
.al-progress-labels {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--al-tx3) !important;
  margin-bottom: 6px !important;
}
.al-progress-track {
  height: 5px !important;
  border-radius: 99px !important;
  background: var(--al-line2) !important;
  overflow: hidden !important;
}
.al-progress-fill {
  height: 100% !important;
  background: var(--al-pri) !important;
  border-radius: 99px !important;
  transition: width 0.3s ease !important;
}
.al-course-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 15px !important;
}
.al-btn-continue {
  flex: 1 !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.al-btn-continue:hover {
  background: var(--al-pri) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.al-btn-more {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  position: relative !important;
}
.al-btn-more > div,
.al-btn-more .dropdown {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.al-btn-more .dropdown-toggle,
.al-btn-more button.btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--al-tx3) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.al-btn-more .dropdown-toggle:after {
  display: none !important;
}
.al-btn-more .dropdown-toggle:hover {
  color: var(--al-pri) !important;
}

/* Aggressive Sidebar Fixes for Custom User HTML */
#nav-drawer img:not(.rui-custom-logo):not(.rui-custom-dmlogo) {
  display: none !important;
}
#nav-drawer br {
  display: none !important;
}
#nav-drawer p:empty, #nav-drawer div:empty {
  display: none !important;
}

/* Dashboard UI Fixes */
/* Fix search bar icon overlapping text */
.block_myoverview .searchbar .form-control,
.block_myoverview [data-region="filter"] input[type="text"],
.myoverview-search-wrap input[type="text"] {
    padding-left: 38px !important;
}
.block_myoverview .searchbar .icon,
.myoverview-search-wrap .icon {
    position: absolute;
    left: 12px;
    z-index: 5;
    pointer-events: none;
}

/* Hide the ugly redundant Moodle block header for Course Overview */
.block_myoverview .card-header,
.block_myoverview > .card-body > .card-title,
.block_myoverview h5.card-title {
    display: none !important;
}

/* Fix any rogue text bleeding on the far left edge of the screen */
body {
    /* overflow-x: hidden; removed to fix mobile scroll */
    max-width: 100vw;
}

/* Force hide legacy Moodle navigation and settings blocks which bleed raw text */
.block_navigation, 
.block_settings,
#block-region-side-pre .block_navigation,
#block-region-side-pre .block_settings {
    display: none !important;
}

/* Eliminate rogue text bleeding in the left margin of the main content area */
#page-my-index #block-region-side-pre,
#page-my-index #courseindex,
#page-my-index .drawer-left-outside,
aside#block-region-side-pre {
    display: none !important;
}

/* Ensure Moodle's visually hidden skip links or screen reader texts haven't accidentally become visible and squished */
.sr-only,
.skip-block,
a.skip {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Hide Calendar blocks on the dashboard as requested by the user */
#page-my-index .block_calendar_month,
#page-my-index .block_calendar_upcoming {
    display: none !important;
}



/* %% SIDEBAR ACTIVE STATE (Vibrant Indigo block) %% */
.rui-sidebar-nav-item-link.active {
  background-color: #5d5fef !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 6px -1px rgba(93, 95, 239, 0.3) !important;
}
.rui-sidebar-nav-item-link.active .rui-sidebar-nav-icon,
.rui-sidebar-nav-item-link.active .rui-sidebar-nav-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}
.rui-sidebar-nav-item-link.active .rui-sidebar-nav-text {
  color: #ffffff !important;
}




/* ============================================================
   PERFECT COURSE GRID (HANDLES PAGINATION AND NO PAGINATION)
   ============================================================ */

/* 1. Base grid for the deck */
.block_myoverview .rui-course-card-deck,
.block_myoverview div[data-region="card-deck"],
.block_myoverview .dashboard-card-deck {
    display: grid !important;
    gap: 24px !important;
    align-items: stretch !important;
    justify-content: start !important;
    width: 100% !important;
}

/* 2. If pagination exists, force it to span full width and be a grid */
.block_myoverview div[data-region="card-deck"] > div[data-region="paged-content-page"],
.block_myoverview .rui-course-card-deck > div[data-region="paged-content-page"] {
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: 24px !important;
    align-items: stretch !important;
    justify-content: start !important;
    width: 100% !important;
}

/* Desktop: 3 columns */
@media (min-width: 992px) {
    .block_myoverview .rui-course-card-deck,
    .block_myoverview div[data-region="card-deck"],
    .block_myoverview .dashboard-card-deck {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .block_myoverview div[data-region="card-deck"] > div[data-region="paged-content-page"],
    .block_myoverview .rui-course-card-deck > div[data-region="paged-content-page"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Mobile/Tablet: Auto-fill */
@media (max-width: 991px) {
    .block_myoverview .rui-course-card-deck,
    .block_myoverview div[data-region="card-deck"],
    .block_myoverview .dashboard-card-deck {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
    .block_myoverview div[data-region="card-deck"] > div[data-region="paged-content-page"],
    .block_myoverview .rui-course-card-deck > div[data-region="paged-content-page"] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

/* 3. The actual cards span 1 column */
.al-course-card {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* Disable masonry / absolute positioning */
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* 4. Flex fix inside the card */
.al-course-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.al-course-card-body {
    flex: 1 1 auto !important;
}

/* ── MOBILE RESPONSIVENESS & SIDEBAR DRAWER FIXES ── */
@media (max-width: 991px) {
    body {
        /* overflow-x: hidden !important; removed to fix mobile scroll */
    }

    #nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 285px !important;
        max-width: 85vw !important;
        z-index: 1030 !important; /* Keep below topbar if topbar is 1040 */
        padding-top: 65px !important; /* Push menu down below topbar */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #nav-drawer.closed,
    #nav-drawer[aria-hidden="true"] {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #nav-drawer:not(.closed) {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 768px) {
    #topBar,
    .rui-topbar-wrapper {
        padding: 8px 12px !important;
        min-height: 56px !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #topBar .site-name,
    .rui-topbar .site-name {
        font-size: 15px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }

    #topBar .rui-custom-logo,
    #topBar .rui-custom-dmlogo {
        max-height: 28px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .rui-mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .nav-tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #meetingTabs .btn-primary {
        margin-left: 0 !important;
        margin-top: 10px !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}