/* moodlectf/css/theme.css */
/* MoodleCTF Theme - Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #0d1117;
  --surf: #161b22;
  --surf2: #1c2128;
  --bdr: #30363d;
  --pri: #00d4aa;
  --pri-d: #00b38f;
  --pri-gl: rgba(0, 212, 170, 0.12);
  --blue: #58a6ff;
  --txt: #e6edf3;
  --muted: #8b949e;
  --muted2: #6e7681;
  --danger: #f85149;
  --warn: #d29922;
  --succ: #3fb950;
  --mono: 'JetBrains Mono', monospace;
  --body: 'JetBrains Mono', monospace;
  --r: 6px;
  --r2: 10px;
}

/* Base overrides for Moodle */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
button,
select,
textarea,
label,
span,
div,
a,
.btn,
.form-control,
.form-select,
.input-group-text,
.navbar,
.nav,
.nav-link,
.breadcrumb,
.breadcrumb-item,
.dropdown-menu,
.dropdown-item,
.modal,
.modal-title,
.modal-body,
.modal-header,
.modal-footer,
.card,
.card-title,
.card-body,
.card-header,
.card-footer,
.list-group-item,
.badge,
.alert,
.toast,
.popover,
.tooltip {
  font-family: var(--body) !important;
}

code,
pre,
kbd,
samp,
.text-monospace,
.font-monospace,
[class*="mono"] {
  font-family: var(--mono) !important;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-size: 13px;
  line-height: 1.6;
  font-family: var(--body) !important;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-font-sans-serif: 'Inter', sans-serif;
  --bs-font-monospace: 'JetBrains Mono', monospace;
}

a {
  color: var(--pri);
}

a:hover {
  color: var(--pri-d);
}

/* Navbar */
#page-navbar {
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  padding: 0 16px;
}

.navbar {
  background: var(--surf) !important;
}

.navbar .nav-link {
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r);
  transition: all .15s;
}

.navbar .nav-link:hover {
  color: var(--txt) !important;
  background: rgba(255, 255, 255, .05);
}

.navbar .nav-link.active {
  color: var(--pri) !important;
  background: var(--pri-gl);
}

/* Sidebar regions */
.drawer {
  background: var(--surf) !important;
  border-right: 1px solid var(--bdr) !important;
}

.drawer .list-group-item {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 16px;
  border-left: 3px solid transparent;
}

.drawer .list-group-item:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, .04);
}

.drawer .list-group-item.active {
  color: var(--pri);
  background: var(--pri-gl);
  border-left-color: var(--pri);
}

/* Cards and containers */
.card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
}

.card-header {
  background: var(--surf2);
  border-bottom: 1px solid var(--bdr);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Dashboard specific blocks */
.dashboard-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}

.dashboard-card:hover {
  border-color: var(--pri);
  box-shadow: 0 0 12px rgba(0, 212, 170, .18);
}

.dashboard-card .stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.dashboard-card .stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--txt);
  font-family: var(--mono);
  letter-spacing: -.02em;
}

/* Course cards */
.course-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 1rem;
}

.course-card:hover {
  border-color: var(--pri);
  box-shadow: 0 0 12px rgba(0, 212, 170, .15);
}

.moodlectf-usermenu {
  display: inline-block;
}

.moodlectf-usermenu-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #e6edf3;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.moodlectf-usermenu-button:hover {
  background: rgba(255, 255, 255, .08);
}

.moodlectf-usermenu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  z-index: 10000;
}

.moodlectf-usermenu:hover .moodlectf-usermenu-dropdown {
  display: block;
}

.moodlectf-usermenu-item {
  display: block;
  padding: 10px 14px;
  color: var(--txt);
  text-decoration: none;
  font-size: 13px;
}

.moodlectf-usermenu-item:hover {
  background: var(--surf2);
}

.course-banner {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}

.course-banner.green {
  background: linear-gradient(135deg, #0f2419, #163d2a);
}

.course-banner.blue {
  background: linear-gradient(135deg, #0c1f35, #142d50);
}

.course-banner.purple {
  background: linear-gradient(135deg, #1a0f2e, #2a1547);
}

.course-banner.orange {
  background: linear-gradient(135deg, #231509, #3d2510);
}

.course-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.course-icon.green {
  background: rgba(0, 212, 170, .18);
  border: 1px solid rgba(0, 212, 170, .3);
}

.course-icon.blue {
  background: rgba(88, 166, 255, .18);
  border: 1px solid rgba(88, 166, 255, .3);
}

.course-icon.purple {
  background: rgba(139, 92, 246, .18);
  border: 1px solid rgba(139, 92, 246, .3);
}

.course-icon.orange {
  background: rgba(210, 153, 34, .18);
  border: 1px solid rgba(210, 153, 34, .3);
}

.course-body {
  padding: 10px 14px 12px;
}

.course-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 2px;
}

.course-cat {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

/* Progress bar */
.progress {
  height: 4px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 99px;
}

.progress-bar {
  background: var(--pri);
  border-radius: 99px;
  box-shadow: 0 0 6px rgba(0, 212, 170, .5);
}

/* Tables */
.table {
  color: var(--txt);
}

.table thead th {
  background: var(--surf2);
  border-bottom: 1px solid var(--bdr);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.table tbody tr {
  border-bottom: 1px solid var(--bdr);
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, .03);
}

.table td {
  font-size: 12px;
  color: var(--txt);
}

/* Badges */
.badge-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 500;
}

.badge-green {
  background: rgba(63, 185, 80, .1);
  color: var(--succ);
  border: 1px solid rgba(63, 185, 80, .3);
}

.badge-blue {
  background: rgba(88, 166, 255, .1);
  color: var(--blue);
  border: 1px solid rgba(88, 166, 255, .25);
}

.badge-pri {
  background: var(--pri-gl);
  color: var(--pri);
  border: 1px solid rgba(0, 212, 170, .3);
}

/* Activity feed */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bdr);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-dot.green {
  background: var(--pri);
}

.activity-dot.blue {
  background: var(--blue);
}

.activity-dot.warn {
  background: var(--warn);
}

.activity-time {
  font-size: 10px;
  color: var(--muted2);
  font-family: var(--mono);
  margin-top: 1px;
}

/* Login page */
.login-page {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
  padding: 2rem;
  width: 100%;
  max-width: 600px;
}

.login-card .logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-card .logo-mark {
  width: 48px;
  height: 48px;
  background: var(--pri);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  color: #0d1117;
}

.login-card h2 {
  color: var(--txt);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.login-card .form-control {
  background: var(--bg);
  border: 1px solid var(--bdr);
  color: var(--txt);
}

.login-card .btn-primary {
  background: var(--pri);
  border: none;
  width: 100%;
}

.login-card .btn-primary:hover {
  background: var(--pri-d);
}

/* Login page modern override */
.login-page {
  min-height: 100vh;
  background-color: #0d1117 !important;
  background-image: radial-gradient(at 40% 20%,hsl(var(--glow-primary) / .08) 0px,transparent 50%),radial-gradient(at 80% 0%,hsl(var(--glow-secondary) / .06) 0px,transparent 50%),radial-gradient(at 0% 50%,hsl(var(--glow-accent) / .05) 0px,transparent 50%) !important;
  color: #e6edf3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.login-wrapper {
  position: relative;
  width: 100%;
  max-width: 1320px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
}

.login-hero {
  flex: 1;
  min-width: 320px;
  background: rgba(10, 18, 34, .9);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
  border-radius: 28px;
  padding: 48px 40px;
  display: flex;
  align-items: center;
}

.login-hero-inner {
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 212, 170, .14);
  color: #7ef1d3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.login-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 24px;
}

.login-hero p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 1rem;
  max-width: 520px;
  line-height: 1.8;
}

.login-panel {
  width: 100%;
  max-width: 420px;
}

.login-card {
  background: rgba(12, 18, 34, .98);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 28px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .32);
  padding: 40px;
}

/* Admin Navigation Tabs */
.admin-navigation-wrapper {
  margin-bottom: 24px;
  padding-bottom: 0;
}

.admin-tabs-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.admin-tab-group {
  position: relative;
}

.admin-tab-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.admin-tab-header:hover {
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.05);
}

.admin-tab-header.active {
  background: rgba(0, 255, 255, 0.1);
  color: var(--pri);
}

.admin-tab-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-tab-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-top: none;
  border-radius: 0 0 var(--r2) var(--r2);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.admin-menu-items {
  padding: 8px 0;
  max-height: 400px;
  overflow-y: auto;
}

.admin-menu-item {
  display: block;
  padding: 8px 16px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.admin-menu-item:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, 0.04);
  border-left-color: var(--pri);
}

.admin-menu-item .item-name {
  display: block;
  font-weight: 500;
}

.login-card-header {
  margin-bottom: 32px;
}

.login-card-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.login-card-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
}

.login-card .form-control,
.login-card .form-group .controls input,
.login-card .form-group .controls select,
.login-card .form-group .controls textarea {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e6edf3;
}

.login-card .form-control:focus,
.login-card .form-group .controls input:focus,
.login-card .form-group .controls select:focus,
.login-card .form-group .controls textarea:focus {
  border-color: rgba(0, 212, 170, .6);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, .12);
}

.login-card .btn-primary {
  background: linear-gradient(90deg, #00d4aa, #7c3aed);
  border: none;
  width: 100%;
  color: #ffffff;
}

.login-card .btn-primary:hover {
  background: linear-gradient(90deg, #00c69d, #8b3cef);
}

@media (max-width: 960px) {
  .login-wrapper {
    flex-direction: column;
    gap: 24px;
  }

  .login-hero,
  .login-panel {
    max-width: 100%;
  }
}

/* Admin Bookmarks Block Override - White Color */
.block_admin_bookmarks,
.block_admin_bookmarks .card-title,
.block_admin_bookmarks h3,
.block_admin_bookmarks h5,
.block_admin_bookmarks .block-title,
.block_admin_bookmarks a,
.block_admin_bookmarks .content,
#instance-1-header {
  color: #ffffff !important;
}

/* Explicitly set form helper text and admin descriptions to wheat */
.form-text,
.form-text p,
.form-description,
.form-description p,
.form-defaultinfo,
.form-defaultinfo p,
.form-item .text-muted,
.setting-description,
.setting-description p,
.mform .form-text,
.mform .form-text p {
  color: wheat !important;
}

/* ============================================
   COURSE VIEW PAGE — /course/view.php
   ============================================ */

/* Course content wrapper */
#page-course-view-topics #region-main,
#page-course-view-weeks #region-main,
#page-course-view-singleactivity #region-main,
[id^="page-course-view"] #region-main {
  background: var(--bg) !important;
  color: var(--txt) !important;
}

/* Course header / title area */
.course-content .course-section-header,
.course-content #section-0 .course-section-header {
  background: linear-gradient(135deg, #0f1f2e, #0d2136) !important;
  border: 1px solid rgba(0, 212, 170, 0.15) !important;
  border-left: 3px solid var(--pri) !important;
  border-radius: var(--r2) !important;
  padding: 16px 20px !important;
  margin-bottom: 4px !important;
}

/* Section name text */
.course-content .course-section-header .sectionname,
.course-content .course-section-header .sectionname a,
.course-content .section-title h3,
.course-content .section-title h3 a,
.course-content .sectionname,
.course-content .sectionname a,
.course-section .sectionname a,
.course-section .sectionname,
h3.sectionname a,
.section_title .sectionname a,
[data-for="section_title"] .sectionname a,
[data-for="section_title"] a {
  color: #ffffff !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

/* Each course section container */
.course-content li.section,
.course-content .section,
.course-content .course-section {
  background: var(--surf) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r2) !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Section content area */
.course-content .section .content,
.course-content .course-section .content {
  padding: 12px 20px !important;
}

/* Activity / module items */
.course-content .section .activity,
.course-content .course-section .activity,
.course-content .activity-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.course-content .section .activity:hover,
.course-content .course-section .activity:hover,
.course-content .activity-item:hover {
  border-color: rgba(0, 212, 170, 0.35) !important;
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.1) !important;
}

/* Activity name link */
.course-content .activity .activityname a,
.course-content .activity-item .activityname a,
.course-content .aalink,
.course-content .activity-name-area a {
  color: var(--pri) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.course-content .activity .activityname a:hover,
.course-content .activity-item .activityname a:hover,
.course-content .aalink:hover,
.course-content .activity-name-area a:hover {
  color: var(--pri-d) !important;
  text-decoration: underline !important;
}

/* Activity icons */
.course-content .activity img.activityicon,
.course-content .activity-item img.activityicon {
  filter: brightness(1.2) !important;
}

/* Section toggle / collapse buttons */
.course-content .section-chevron,
.course-content .icons-collapse-expand,
.course-content .collapseall,
.course-content .section .right a {
  color: var(--pri) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

/* Completion checkboxes */
.course-content .completioncheck,
.course-content .togglecompletion {
  color: var(--pri) !important;
}

/* Availability info */
.course-content .availabilityinfo,
.course-content .dimmed_text {
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* Section summary text */
.course-content .section .summary,
.course-content .section .section_availability {
  color: var(--muted) !important;
  font-size: 13px !important;
}

/* Collapse/expand all link */
.collapsible-actions .collapseall,
.collapsible-actions .expandall {
  color: var(--pri) !important;
  font-size: 12px !important;
}

/* Section action menus */
.course-content .section .section_action_menu,
.course-content .actions .action-menu {
  color: var(--muted) !important;
}

.course-content .section .section_action_menu .dropdown-toggle,
.course-content .actions .action-menu .dropdown-toggle {
  color: var(--muted) !important;
}

/* Editing controls when editing is on */
.course-content .editing .activity .actions a,
.course-content .course-section .action-menu a {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.course-content .editing .activity .actions a:hover,
.course-content .course-section .action-menu a:hover {
  color: var(--pri) !important;
}

/* Add activity/resource button */
.course-content .section .activity-add,
.course-content .section-modchooser,
.course-content .activity-add .btn {
  color: var(--pri) !important;
  border-color: var(--bdr) !important;
}

/* Breadcrumb on course pages */
[id^="page-course-view"] .breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
  margin-bottom: 16px !important;
}

[id^="page-course-view"] .breadcrumb-item,
[id^="page-course-view"] .breadcrumb-item a {
  color: var(--muted) !important;
  font-size: 12px !important;
}

[id^="page-course-view"] .breadcrumb-item a:hover {
  color: var(--pri) !important;
}

[id^="page-course-view"] .breadcrumb-item.active {
  color: var(--txt) !important;
}

/* Course page heading */
[id^="page-course-view"] h1.h2,
[id^="page-course-view"] .page-header-headings h1 {
  color: var(--txt) !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

/* Drawer / sidebar override on course pages */
[id^="page-course-view"] .drawercontent {
  background: var(--surf) !important;
}

[id^="page-course-view"] .drawercontent .list-group-item {
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
}

[id^="page-course-view"] .drawercontent .list-group-item:hover {
  color: var(--txt) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

[id^="page-course-view"] .drawercontent .list-group-item.active {
  color: var(--pri) !important;
  background: var(--pri-gl) !important;
}

/* ============================================
   TURN EDITING ON BUTTON — Navbar
   ============================================ */
.mctf-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid rgba(0, 212, 170, 0.4);
  background: rgba(0, 212, 170, 0.1);
  color: #00d4aa;
}

.mctf-edit-btn:hover {
  background: rgba(0, 212, 170, 0.2);
  border-color: #00d4aa;
  color: #00d4aa;
  box-shadow: 0 0 10px rgba(0, 212, 170, 0.15);
}

.mctf-edit-btn.editing-on {
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.1);
  color: #f85149;
}

.mctf-edit-btn.editing-on:hover {
  background: rgba(248, 81, 73, 0.2);
  border-color: #f85149;
  color: #f85149;
  box-shadow: 0 0 10px rgba(248, 81, 73, 0.15);
}

/* ============================================
   GLOBAL FORM INPUTS OVERRIDE
   ============================================ */
.form-control,
.form-select,
.custom-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: #ffffff !important;
  border: 1px solid var(--bdr) !important;
  color: #000000 !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background-color: #ffffff !important;
  border-color: var(--pri) !important;
  color: #000000 !important;
  box-shadow: 0 0 0 2px var(--pri-gl) !important;
}



/* Restyle Admin Notifications to match theme */
#page-admin-index .adminwarning,
#page-admin-index .environmentbox,
#page-admin-index .alert,
#page-admin-index .core_admin_notification,
.admin-notifications .alert {
    background: rgba(124, 58, 237, 0.1) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    color: #e6edf3 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

#page-admin-index .adminwarning.alert-danger,
#page-admin-index .alert-danger,
.admin-notifications .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ffb3b3 !important;
}

#page-admin-index .adminwarning.alert-warning,
#page-admin-index .alert-warning,
.admin-notifications .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #ffe6b3 !important;
}

#page-admin-index .adminwarning.alert-info,
#page-admin-index .alert-info,
.admin-notifications .alert-info {
    background: rgba(0, 212, 170, 0.1) !important;
    border: 1px solid rgba(0, 212, 170, 0.3) !important;
    color: #b3fff0 !important;
}

#page-admin-index .adminwarning a,
#page-admin-index .environmentbox a,
#page-admin-index .alert a {
    color: #00FFFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#page-admin-index .adminwarning a:hover,
#page-admin-index .environmentbox a:hover,
#page-admin-index .alert a:hover {
    text-decoration: underline !important;
}

/* Cleanup specific admin elements */
#page-admin-index .adminregistration,
#page-admin-index .adminmoodle,
#page-admin-index .registration-container,
#page-admin-index .moodle-services,
#page-admin-index #services-support-content,
#page-admin-index iframe[src*="campaign.moodle.org"] {
    display: none !important;
}

/* Hide global notifications area from top of all admin pages */
/* But keep them styled on the index page */
.admin-notifications,
.core_admin_notification,
.adminwarning {
    display: none !important;
}

/* Show them ONLY on the specific Notifications page (admin/index.php) */
body#page-admin-index .admin-notifications,
body#page-admin-index .core_admin_notification,
body#page-admin-index .adminwarning,
body#page-admin-index div[role="main"] {
    display: block !important;
}

#page-admin-index div[role="main"] > h2:first-child {
    display: block !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    font-family: var(--mono) !important;
}

/* Improved Contrast for Active/Selected States */
:root {
    --active-state-bg: rgba(0, 255, 255, 0.15);
    --active-state-txt: #00FFFF;
    --active-state-border: #00FFFF;
}

/* Update Navbar Active State */
.mctf-nav-link.active {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
    box-shadow: inset 0 0 0 1px rgba(0, 255, 255, 0.2);
}

/* Update Site Admin Tabs Active State */
.admin-tab-header.active {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
    box-shadow: 0 2px 0 0 #00FFFF;
}

/* Fix Moodle's generic active list items (like Site Settings highlight) */
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
    border-color: #00FFFF !important;
}

/* Fix the specific hover/active state on admin settings links seen in screenshot */
#region-main .mform .list-group-item.active,
#region-main .admin_setting_configtext:focus,
#region-main .list-group-item:hover {
    background-color: rgba(0, 255, 255, 0.05) !important;
    color: #00FFFF !important;
}

/* Precise fixes for Site Admin settings highlight and overall active contrast */
#region-main .list-group-item.active,
#region-main .nav-pills .nav-link.active,
.admin_setting_configtext:focus,
.path-admin .list-group-item.active {
    background-color: rgba(0, 255, 255, 0.1) !important;
    color: #ffffff !important; /* Force white text on the selected state for maximum readability */
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
}

/* Fix the specific 'Site settings' highlighted link in the screenshot */
.path-admin #region-main a[href*="admin/settings.php"].list-group-item.active,
.path-admin #region-main .list-group-item.active {
    background-color: #003d3d !important; /* Deeper background to avoid wash-out */
    color: #ffffff !important;
    border-left: 3px solid #00FFFF !important;
}

/* Improve the secondary navigation tabs contrast */
.admin-tab-header.active {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
    box-shadow: 0 2px 0 0 #00FFFF !important;
}

/* ============================================================
   Instantly hide Moodle admin notifications on page render
   (prevents flash-of-content before JS removes them)
   Classes confirmed from page source inspection.
   ============================================================ */

/* Hide the notification alert boxes inside role=main */
div[role="main"] > .box.generalbox.alert,
div[role="main"] > .alert-secondary.alert-block,
div[role="main"] > .box.copyright,
div[role="main"] > .alert-block.fade {
    display: none !important;
    visibility: hidden !important;
}

/* Hide the "Notifications" heading */
div[role="main"] > h2:first-of-type {
    display: none !important;
}

/* Fix active/current admin link highlight - high contrast dark theme */
.path-admin .admin-links-list a.current,
.path-admin .admin-links-list a:focus,
.path-admin .admin-links-list a:active,
.admin-links-list a.active,
/* Moodle native admin current state */
#region-main li.current > a,
.path-admin #region-main .current > a,
.admin_setting li.current a,
/* Bootstrap list-group active */
.path-admin .list-group-item.active,
.path-admin .list-group-item.active a,
/* Generic deep fallbacks */
#page-admin-index .admin-links-list a:focus,
.admin-links-list a[aria-current="page"] {
    background-color: #1a1f2e !important;    /* Dark navy, not blinding light blue */
    color: #00FFFF !important;
    border-left: 3px solid #00FFFF !important;
    padding-left: 10px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Also fix browser default :focus which makes backgrounds light blue */
.admin-links-list a:focus {
    background-color: #1a1f2e !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Moodle's native Bootstrap focus ring globally on admin nav */
.path-admin a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Aggressively remove all click/focus highlight on admin nav links */
.admin-links-list a:active,
.admin-links-list a:focus,
.admin-links-list a:visited,
.admin-links-list a:focus-visible,
.path-admin a:active,
.path-admin a:focus,
.path-admin a:focus-visible,
#region-main a:active,
#region-main a:focus {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove the blue flash on click (webkit/mobile) */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Override Moodle core hover state on admin links that injects #d2e8fb */
.admin-links-list a:hover,
.admin-links-list a:hover:focus,
.admin-links-list a:focus,
.admin-links-list a:active,
.admin-links-list a:focus-visible {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    color: #00FFFF !important;
    border-left: 2px solid #00FFFF !important;
    padding-left: 8px !important;
    text-decoration: none !important;
}

/* Override Boost compiled SCSS white background on .secondary-navigation */
.secondary-navigation {
    background: #0d1117 !important;
}

#mctf-course-subnav {
    background: #0d1117 !important;
    border-bottom: 1px solid #21262d !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

#mctf-course-subnav .secondary-navigation {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
}

/* Nav tab list */
#mctf-course-subnav .nav-tabs,
#mctf-course-subnav ul.nav {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: none !important;
    background: transparent !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

#mctf-course-subnav .nav-item {
    margin: 0 !important;
}

/* All nav links */
#mctf-course-subnav .nav-link,
#mctf-course-subnav .nav-tabs .nav-link {
    color: #8b949e !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
    transition: color 0.2s, border-color 0.2s !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
}

#mctf-course-subnav .nav-link:hover,
#mctf-course-subnav .nav-tabs .nav-link:hover {
    color: #e6edf3 !important;
    background: rgba(255,255,255,0.04) !important;
    border-bottom-color: #30363d !important;
}

/* Active tab — cyan underline */
#mctf-course-subnav .nav-link.active,
#mctf-course-subnav .nav-tabs .nav-link.active {
    color: #00FFFF !important;
    background: transparent !important;
    border-bottom: 2px solid #00FFFF !important;
}

/* More ▾ dropdown toggle */
#mctf-course-subnav .nav-link.dropdown-toggle {
    color: #8b949e !important;
}
#mctf-course-subnav .nav-link.dropdown-toggle:hover,
#mctf-course-subnav .nav-link.dropdown-toggle.show {
    color: #e6edf3 !important;
    background: rgba(255,255,255,0.04) !important;
}

/* Dropdown panel */
#mctf-course-subnav .dropdown-menu {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    min-width: 200px !important;
}

#mctf-course-subnav .dropdown-item {
    color: #e6edf3 !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
}

#mctf-course-subnav .dropdown-item:hover,
/* ============================================================
   Instantly hide Moodle admin notifications on page render
   (prevents flash-of-content before JS removes them)
   Classes confirmed from page source inspection.
   ============================================================ */

/* Hide the notification alert boxes inside role=main */
div[role="main"] > .box.generalbox.alert,
div[role="main"] > .alert-secondary.alert-block,
div[role="main"] > .box.copyright,
div[role="main"] > .alert-block.fade {
    display: none !important;
    visibility: hidden !important;
}

/* Hide the "Notifications" heading */
div[role="main"] > h2:first-of-type {
    display: none !important;
}

/* Fix active/current admin link highlight - high contrast dark theme */
.path-admin .admin-links-list a.current,
.path-admin .admin-links-list a:focus,
.path-admin .admin-links-list a:active,
.admin-links-list a.active,
/* Moodle native admin current state */
#region-main li.current > a,
.path-admin #region-main .current > a,
.admin_setting li.current a,
/* Bootstrap list-group active */
.path-admin .list-group-item.active,
.path-admin .list-group-item.active a,
/* Generic deep fallbacks */
#page-admin-index .admin-links-list a:focus,
.admin-links-list a[aria-current="page"] {
    background-color: #1a1f2e !important;    /* Dark navy, not blinding light blue */
    color: #00FFFF !important;
    border-left: 3px solid #00FFFF !important;
    padding-left: 10px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Also fix browser default :focus which makes backgrounds light blue */
.admin-links-list a:focus {
    background-color: #1a1f2e !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Moodle's native Bootstrap focus ring globally on admin nav */
.path-admin a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Aggressively remove all click/focus highlight on admin nav links */
.admin-links-list a:active,
.admin-links-list a:focus,
.admin-links-list a:visited,
.admin-links-list a:focus-visible,
.path-admin a:active,
.path-admin a:focus,
.path-admin a:focus-visible,
#region-main a:active,
#region-main a:focus {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove the blue flash on click (webkit/mobile) */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Override Moodle core hover state on admin links that injects #d2e8fb */
.admin-links-list a:hover,
.admin-links-list a:hover:focus,
.admin-links-list a:focus,
.admin-links-list a:active,
.admin-links-list a:focus-visible {
    background-color: transparent !important;
    background: transparent !important;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    color: #00FFFF !important;
    border-left: 2px solid #00FFFF !important;
    padding-left: 8px !important;
    text-decoration: none !important;
}

/* Override Boost compiled SCSS white background on .secondary-navigation */
.secondary-navigation {
    background: #0d1117 !important;
}

#mctf-course-subnav {
    background: #0d1117 !important;
    border-bottom: 1px solid #21262d !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

#mctf-course-subnav .secondary-navigation {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
}

/* Nav tab list */
#mctf-course-subnav .nav-tabs,
#mctf-course-subnav ul.nav {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: none !important;
    background: transparent !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

#mctf-course-subnav .nav-item {
    margin: 0 !important;
}

/* All nav links */
#mctf-course-subnav .nav-link,
#mctf-course-subnav .nav-tabs .nav-link {
    color: #8b949e !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    white-space: nowrap !important;
    transition: color 0.2s, border-color 0.2s !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
}

#mctf-course-subnav .nav-link:hover,
#mctf-course-subnav .nav-tabs .nav-link:hover {
    color: #e6edf3 !important;
    background: rgba(255,255,255,0.04) !important;
    border-bottom-color: #30363d !important;
}

/* Active tab — cyan underline */
#mctf-course-subnav .nav-link.active,
#mctf-course-subnav .nav-tabs .nav-link.active {
    color: #00FFFF !important;
    background: transparent !important;
    border-bottom: 2px solid #00FFFF !important;
}

/* More ▾ dropdown toggle */
#mctf-course-subnav .nav-link.dropdown-toggle {
    color: #8b949e !important;
}
#mctf-course-subnav .nav-link.dropdown-toggle:hover,
#mctf-course-subnav .nav-link.dropdown-toggle.show {
    color: #e6edf3 !important;
    background: rgba(255,255,255,0.04) !important;
}

/* Dropdown panel */
#mctf-course-subnav .dropdown-menu {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    min-width: 200px !important;
}

#mctf-course-subnav .dropdown-item {
    color: #e6edf3 !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
}

#mctf-course-subnav .dropdown-item:hover,
#mctf-course-subnav .dropdown-item:focus {
    background: rgba(0,255,255,0.08) !important;
    color: #00FFFF !important;
}

#mctf-course-subnav .dropdown-divider {
    border-color: #30363d !important;
}

/* ============================================================
   GRADEBOOK / SCORES overrides
   Ensures student information is visible and tables are dark
   ============================================================ */

/* Generic table background fixes for grading pages */
.path-grade .table, 
.path-grade table.flexible, 
.path-grade .generaltable,
.gradereport-grader table,
.path-grade-report-grader .gradeparent table,
table.gradereport-grader-table {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Striped rows in gradebook */
.path-grade .table-striped tbody tr:nth-of-type(odd),
.path-grade .table.table-striped tbody tr:nth-of-type(odd),
.path-grade .gradeparent tr:nth-of-type(odd) .cell {
    background-color: #f8f9fa !important;
    color: #000000 !important;
}

.path-grade .table-striped tbody tr:nth-of-type(even),
.path-grade .table.table-striped tbody tr:nth-of-type(even),
.path-grade .gradeparent tr:nth-of-type(even) .cell {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Gradebook headers and sticky columns */
.path-grade th.header, 
.path-grade td.header,
.path-grade .grading-report th,
.path-grade .grading-report td,
.path-grade .user-report th,
.path-grade .user-report td {
    background-color: #f1f3f5 !important;
    color: #000000 !important;
    border-color: #dee2e6 !important;
}

/* Hover effect on grade rows */
.path-grade .table-hover tbody tr:hover,
.path-grade .table-hover tbody tr:hover .cell,
.path-grade .grading-report tbody tr:hover,
.path-grade .grading-report tbody tr:hover .cell {
    background-color: #e9ecef !important;
    color: #000000 !important;
}

/* Grader report specific cells */
.path-grade .gradeparent tr .cell {
    border-color: #dee2e6 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Inputs and select boxes within gradebook */
.path-grade select,
.path-grade input[type="text"],
.path-grade .quickedit input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ced4da !important;
}

/* Sticky headers in grader report (often have white bg by default in Boost) */
.path-grade .gradeparent table th,
.path-grade .gradeparent table td {
    background-color: #f1f3f5 !important;
    border-color: #dee2e6 !important;
    color: #000000 !important;
}

.path-grade .gradebook-navigation {
    background-color: #0d1117 !important;
}

/* Ensure links in gradebook are legible */
.path-grade table a {
    color: #00FFFF !important;
}
.path-grade table a:hover {
    color: #00cccc !important;
    text-decoration: underline !important;
}

/* Grade item header background override */
.path-grade .gradeitemheader {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}

/* Pagination container if exists */
.path-grade .pagination {
    background-color: transparent !important;
}

/* ============================================================
   CAMPAIGN MODAL — CHALLENGE CARD CHECKBOXES
   Replaces old .mctf-cc-radio (radio-button style) with
   proper multi-select checkboxes matching the dark theme.
   ============================================================ */

/* Challenge card layout */
.mctf-cc-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid #21262d !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    background: #0d1117 !important;
    transition: border-color 0.15s, background 0.15s !important;
}

.mctf-cc-card:hover {
    border-color: #30363d !important;
    background: #161b22 !important;
}

.mctf-cc-card.selected {
    border-color: #00FFFF !important;
    background: rgba(0, 255, 255, 0.05) !important;
}

/* Checkbox wrapper — keeps checkbox aligned top-left in card */
.mctf-cc-checkbox-wrap {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The actual checkbox — custom styled */
.mctf-cc-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #30363d !important;
    border-radius: 4px !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: border-color 0.15s, background 0.15s !important;
    pointer-events: none !important; /* card handles the click */
}

/* Checked state */
.mctf-cc-checkbox:checked {
    background: #00FFFF !important;
    border-color: #00FFFF !important;
}

/* Checkmark tick via pseudo-element */
.mctf-cc-checkbox:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid #0d1117 !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}

/* Hide old radio div if it still exists somewhere */
.mctf-cc-radio {
    display: none !important;
}

/* ============================================================
   LOGIN PAGE — Full Layout & Element Styles
   ============================================================ */

/* Page background */
body.login-page {
    margin: 0;
    padding: 0;
    background: #0d1117;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    color: #e6edf3;
}

/* Center wrapper */
.login-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    min-height: 100vh;
}

/* Panel (the card container) */
.login-panel {
    width: 100%;
    max-width: 440px;
}

/* Card */
.login-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* Card header */
.login-card-header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid #21262d;
    background: linear-gradient(135deg, rgba(0,212,170,0.05), rgba(121,40,202,0.05));
}

.login-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: -0.02em;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 4px;
}

.login-card-subtitle {
    font-size: 13px;
    color: #8b949e;
    line-height: 1.5;
}

/* Main content area inside the card */
.login-card #page-content,
.login-card .loginpanel,
.login-card #loginform,
.login-card form {
    padding: 0;
    margin: 0;
}

/* Form fields wrapper */
.login-page .loginform,
.login-page #loginform {
    padding: 24px 28px 0;
}

/* Username / password form groups */
.login-page .form-group,
.login-page .mb-3 {
    margin-bottom: 16px;
}

.login-page .form-group label,
.login-page label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b949e;
    margin-bottom: 6px;
    display: block;
}

.login-page input[type="text"],
.login-page input[type="password"],
.login-page input[type="email"],
.login-page .form-control {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    color: #e6edf3 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-page input[type="text"]:focus,
.login-page input[type="password"]:focus,
.login-page .form-control:focus {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 3px rgba(0,255,255,0.1) !important;
    outline: none !important;
    background: #0d1117 !important;
}

/* Login (submit) button */
.login-page #loginbtn,
.login-page input[type="submit"],
.login-page button[type="submit"] {
    display: block;
    width: 100%;
    padding: 11px 20px;
    background: linear-gradient(135deg, #00FFFF, #7928ca);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
}

.login-page #loginbtn:hover,
.login-page input[type="submit"]:hover,
.login-page button[type="submit"]:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* Forgot password link */
.login-page .forgetpass,
.login-page a.btn.btn-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #8b949e !important;
    text-decoration: none;
    margin-top: 12px;
    padding: 0 0 4px;
    transition: color 0.2s;
}

.login-page .forgetpass:hover,
.login-page a.btn.btn-link:hover {
    color: #00FFFF !important;
}

/* ── Guest Access button ──────────────────────────── */
/* Moodle renders: <button id="loginguestbtn" class="btn btn-secondary"> */
.login-page #loginguestbtn {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    color: #8b949e !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 0.2s, color 0.2s, background 0.2s !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 0 !important;
    letter-spacing: 0.02em !important;
}

.login-page #loginguestbtn:hover {
    border-color: #00FFFF !important;
    color: #00FFFF !important;
    background: rgba(0,255,255,0.06) !important;
}

/* ── Login divider (between guest btn and cookies btn) ─ */
/* Moodle renders: <div class="login-divider"></div>      */
.login-page .login-divider {
    height: 1px !important;
    background: #21262d !important;
    margin: 0 !important;
}

/* ── Cookies Notice button ────────────────────────── */
/* Moodle renders: <div class="d-flex"><button class="btn btn-secondary" data-modal="alert"> */
.login-page .d-flex {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 28px 16px !important;
    background: transparent !important;
}

.login-page .d-flex .btn-secondary,
.login-page [data-modal="alert"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: transparent !important;
    border: none !important;
    color: #484f58 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 3px !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 4px !important;
    transition: color 0.2s !important;
    letter-spacing: 0.02em !important;
}

.login-page .d-flex .btn-secondary:hover,
.login-page [data-modal="alert"]:hover {
    color: #8b949e !important;
    background: transparent !important;
    text-decoration: underline !important;
}

/* Add a small cookie emoji before the text */
.login-page [data-modal="alert"]::before {
    content: '🍪';
    font-size: 12px;
}

/* ============================================================
   ACTIVITY CHOOSER MODAL — Complete Dark Theme Override
   Moodle 4.x "Add an activity or resource" modal
   ============================================================ */

/* 1. Modal body — main white panel fix */
.modal-body {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

/* 2. Full chooser wrapper */
.activitychooser,
[data-region="activitychooser"],
.modchooser,
.modchoosercontainer {
    background: #161b22 !important;
    color: #e6edf3 !important;
}

/* 3. Left category panel */
[data-region="categories-view"],
.activitychooser .categories-view,
.activitychooser [data-region="category-list"] {
    background: #0d1117 !important;
    border-right: 1px solid #30363d !important;
}

/* 4. Category list items (Assessment, Collaboration, etc.) */
[data-region="categories-view"] .list-group-item,
.activitychooser .list-group-item,
[data-region="category-list"] .list-group-item {
    background: transparent !important;
    border-color: #30363d !important;
    color: #8b949e !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: color 0.15s, background 0.15s !important;
}

[data-region="categories-view"] .list-group-item:hover,
.activitychooser .list-group-item:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #e6edf3 !important;
}

[data-region="categories-view"] .list-group-item.active,
.activitychooser .list-group-item.active,
[data-region="categories-view"] .list-group-item[aria-selected="true"] {
    background: rgba(0,255,255,0.08) !important;
    border-left: 3px solid #00FFFF !important;
    color: #00FFFF !important;
    font-weight: 600 !important;
}

/* 5. "All" tag / category filter button */
[data-region="categories-view"] .btn,
[data-region="categories-view"] .category-selector,
.activitychooser [data-region="category-search"],
.activitychooser .category-filter-area .btn {
    background: transparent !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
    border-radius: 20px !important;
    transition: all 0.15s !important;
}

[data-region="categories-view"] .btn:hover,
[data-region="categories-view"] .btn.selected,
[data-region="categories-view"] .category-selector.selected,
[data-region="categories-view"] .btn[aria-pressed="true"] {
    border-color: #00FFFF !important;
    color: #00FFFF !important;
    background: rgba(0,255,255,0.08) !important;
}

/* 6. Search area */
[data-region="search-area"],
.activitychooser [data-region="search-area"] {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
    padding: 12px 16px !important;
}

/* 7. Search input — override the global white-bg rule */
[data-region="search-area"] input,
[data-region="search-area"] input[type="search"],
[data-region="search-area"] input[type="text"],
[data-region="search-area"] .form-control,
.activitychooser input[type="search"],
.activitychooser [data-region="search-area"] input {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

[data-region="search-area"] input:focus,
[data-region="search-area"] input[type="search"]:focus,
[data-region="search-area"] .form-control:focus {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 3px rgba(0,255,255,0.12) !important;
    outline: none !important;
}

[data-region="search-area"] input::placeholder,
.activitychooser input[type="search"]::placeholder {
    color: #484f58 !important;
}

/* 8. Tab content / options list container */
[data-region="tab-content"],
[data-region="chooser-options-list"],
.activitychooser .optionlist,
.activitychooser [data-region="tab-content"],
.chooser-options-container {
    background: #161b22 !important;
}

/* 9. Individual activity option card */
.activitychooser .option,
[data-region="chooser-options-list"] .option,
.optionlist .option,
[data-region="chooser-option-container"] {
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    color: #e6edf3 !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    cursor: pointer !important;
}

.activitychooser .option:hover,
[data-region="chooser-options-list"] .option:hover,
.optionlist .option:hover {
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 2px rgba(0,255,255,0.14) !important;
    background: rgba(0,255,255,0.05) !important;
}

/* 9. Individual activity option card - SELECTION STATE */
.activitychooser .option.selected,
.activitychooser .option.active,
.activitychooser .option[aria-selected="true"],
.activitychooser .option[aria-checked="true"],
.activitychooser [data-region="chooser-option-container"].selected,
.activitychooser .option.btn.selected,
.activitychooser .option.btn:active,
.activitychooser .option.btn.active,
.modal-body .option.selected,
.modal-body .option.active {
    background-color: rgba(0, 255, 255, 0.15) !important;
    border-color: #00FFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.25) !important;
    outline: none !important;
}

/* Force text brightness when selected */
.activitychooser .option.selected .option-name,
.activitychooser .option.selected .optionname,
.activitychooser .option.selected *,
.activitychooser .option[aria-selected="true"] *,
.activitychooser .option[aria-checked="true"] * {
    color: #00FFFF !important;
    font-weight: 700 !important;
}

/* 10. Option name text */
.activitychooser .option .optionname,
.activitychooser .option [data-region="option-name"],
.activitychooser .option a,
.activitychooser .option .aalink,
.optionlist .option .optionname,
[data-region="chooser-options-list"] .option .optionname {
    color: #e6edf3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.activitychooser .option a:hover,
.activitychooser .option .aalink:hover {
    color: #00FFFF !important;
}

/* 11. Option description text */
.activitychooser .option .optiondescription,
.activitychooser .option .option-description,
.optionlist .option .optiondescription,
[data-region="chooser-options-list"] .option .optiondescription {
    color: #8b949e !important;
    font-size: 11px !important;
}

/* 12. Option icon area */
.activitychooser .option .optionicon,
.activitychooser .option .icon-container {
    background: transparent !important;
}

/* 13. No results / help text */
.activitychooser .no-items-found,
.activitychooser [data-region="chooser-no-results"] {
    color: #8b949e !important;
    background: transparent !important;
}

/* 14. MoodleNet footer link */
.modal-footer .modchooser-moodlenet,
.modal-footer .modchooser-moodlenet a,
.chooser-moodlenet-link,
.chooser-moodlenet-link a {
    color: #8b949e !important;
}

.modal-footer .modchooser-moodlenet a:hover {
    color: #00d4aa !important;
}

/* 15. Chooser section headings inside content area */
.activitychooser h5,
.activitychooser h4,
.activitychooser .chooser-title,
[data-region="activitychooser"] h5,
[data-region="activitychooser"] h6 {
    color: #e6edf3 !important;
}

/* 16. Scrollbar styling inside the chooser */
[data-region="categories-view"]::-webkit-scrollbar,
[data-region="tab-content"]::-webkit-scrollbar,
[data-region="chooser-options-list"]::-webkit-scrollbar {
    width: 4px !important;
    background: transparent !important;
}

[data-region="categories-view"]::-webkit-scrollbar-thumb,
[data-region="tab-content"]::-webkit-scrollbar-thumb,
[data-region="chooser-options-list"]::-webkit-scrollbar-thumb {
    background: #30363d !important;
    border-radius: 4px !important;
}

/* 17. Favourite star button */
.activitychooser .option .favourite-icon,
.activitychooser .option [data-action="favourite-option"] {
    color: #484f58 !important;
}

.activitychooser .option .favourite-icon:hover,
.activitychooser .option [data-action="favourite-option"]:hover,
.activitychooser .option .favourite-icon.active,
.activitychooser .option [data-action="favourite-option"].active {
    color: #d29922 !important;
}

/* 18. "Add" button in footer */
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #00FFFF, #7928ca) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.modal-footer .btn-primary:hover {
    opacity: 0.88 !important;
}

/* 19. carousel-item white background — THE ROOT CAUSE
   Moodle renders: .modchooser.modal-dialog .modal-body .carousel-item { background-color: var(--bs-body-bg) }
   --bs-body-bg defaults to #fff, so every slide panel is white.
   Fix: override the variable in modal scope AND hard-code the background. */

/* Scope the Bootstrap body-bg variable to dark inside the entire modal */
.modal-dialog,
.modal-content,
.modal-body,
.activitychooser,
[data-region="activitychooser"],
.modchooser {
    --bs-body-bg: #161b22 !important;
}

/* Direct hard-coded override matching Moodle's exact selector */
.modchooser.modal-dialog .modal-body .carousel-item {
    background-color: #161b22 !important;
    transition: none !important;
}

/* Belt-and-braces: any carousel-item inside any modal */
.modal .carousel-item,
.modal-body .carousel-item {
    background-color: #161b22 !important;
}

/* 20. Left category nav links — dark text fix
   Moodle sets --bs-nav-link-color: #1d2125 (near-black) on .modchoosernav .nav-link
   making the text invisible on a dark background. */
.modchoosernav,
.modchoosernav .nav-link,
.modchoosernav .nav-item,
[data-region="categories-view"] .nav-link,
[data-region="categories-view"] .nav-item {
    --bs-nav-link-color: #8b949e !important;
    --bs-nav-link-hover-color: #e6edf3 !important;
    color: #8b949e !important;
}

.modchoosernav .nav-link:hover,
[data-region="categories-view"] .nav-link:hover {
    color: #e6edf3 !important;
}

.modchoosernav .nav-link.active,
.modchoosernav .nav-link[aria-selected="true"],
[data-region="categories-view"] .nav-link.active,
[data-region="categories-view"] .nav-link[aria-selected="true"] {
    --bs-nav-link-color: #00FFFF !important;
    color: #00FFFF !important;
    font-weight: 600 !important;
}

/* 21. Option name .text-body fix
   Bootstrap's .text-body = color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity))
   --bs-body-color-rgb defaults to 33,37,41 (near-black), making names invisible.
   Fix: redefine the variables inside all modal elements. */

.modal-dialog,
.modal-content,
.modal-body,
.activitychooser,
[data-region="activitychooser"],
.modchooser {
    --bs-body-color: #e6edf3 !important;
    --bs-body-color-rgb: 230, 237, 243 !important;
    --bs-text-opacity: 1 !important;
}

.activitychooser .text-body,
[data-region="activitychooser"] .text-body,
.modchooser .text-body,
.modal-body .text-body {
    color: #e6edf3 !important;
}

/* Belt-and-braces: catch any Bootstrap text utility that still resolves dark */
.activitychooser .text-dark,
.activitychooser .text-black,
.activitychooser [class*="text-"] {
    color: #e6edf3 !important;
}

/* 22. Activity Help/Summary area (Info icon view) */
[data-region="help"],
.optionsummary,
[data-region="chooser-option-summary-container"] {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

.optionsummary h6,
.optionsummary .h3,
.optionsummary [data-region="summary-header"] {
    color: #e6edf3 !important;
}

.optionsummary p,
.optionsummary li,
.optionsummary .modchooser-detail-value {
    color: #e6edf3 !important;
}

.optionsummary .modchooser-detail-name,
.optionsummary .text-muted {
    color: #8b949e !important;
}

.optionsummary hr {
    border-color: #30363d !important;
    opacity: 1 !important;
}

/* Help area "Resources" pill/button */
.optionsummary [data-action="chooser-display-category"] {
    background: transparent !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
    border-radius: 20px !important;
}

/* Help area links */
.helpdoclink a {
    color: #00d4aa !important;
    text-decoration: none !important;
}

.helpdoclink a:hover {
    color: #00FFFF !important;
    text-decoration: underline !important;
}

/* "Back" button in footer */
[data-region="footer"] [data-action="close-summary"],
.modal-footer [data-action="close-summary"] {
    background: #30363d !important;
    border: 1px solid #484f58 !important;
    color: #e6edf3 !important;
    font-weight: 600 !important;
}

[data-region="footer"] [data-action="close-summary"]:hover,
.modal-footer [data-action="close-summary"]:hover {
    background: #484f58 !important;
    color: #ffffff !important;
}

/* 23. File Picker Modal */
.filepicker-container,
.file-picker,
.filemanager-container {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

/* File Picker Navbar (Left sidebar) */
.fp-navbar,
.fp-repo-items {
    background-color: #0d1117 !important;
    border-right: 1px solid #30363d !important;
}

.fp-repo {
    background-color: transparent !important;
    border-bottom: 1px solid #30363d !important;
}

.fp-repo.active,
.fp-repo:hover {
    background-color: rgba(0, 255, 255, 0.08) !important;
}

.fp-repo .fp-repo-name {
    color: #e6edf3 !important;
}

.fp-repo.active .fp-repo-name {
    color: #00FFFF !important;
    font-weight: 600 !important;
}

/* File Picker Content area */
.fp-content {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

.fp-content .fp-pathbar {
    background-color: #0d1117 !important;
    border-bottom: 1px solid #30363d !important;
    padding: 10px !important;
}

.fp-pathbar a {
    color: #8b949e !important;
}

.fp-pathbar a:hover {
    color: #00FFFF !important;
}

/* File Picker Form elements */
.fp-upload-form,
.fp-form,
.fp-login-form {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
    padding: 20px !important;
}

.fp-form label,
.fp-login-form label,
.fp-upload-form label {
    color: #e6edf3 !important;
}

.fp-form input[type="text"],
.fp-form input[type="password"],
.fp-form select,
.fp-form textarea,
.fp-upload-form input[type="text"],
.fp-upload-form select {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
}

/* File Picker Buttons */
.fp-login-submit,
.fp-select-confirm,
.fp-upload-btn {
    background: linear-gradient(135deg, #00FFFF, #7928ca) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
}

.fp-viewbar {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

.fp-viewbar a.checked {
    background-color: #30363d !important;
    border-color: #00FFFF !important;
}

/* File Picker file/folder icons */
.fp-filename {
    color: #e6edf3 !important;
}

.fp-file, .fp-folder {
    border: 1px solid transparent !important;
}

.fp-file:hover, .fp-folder:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: #30363d !important;
}

/* 24. YUI Dialogue / File Picker Shell */
.moodle-dialogue-wrap,
.moodle-dialogue-content,
.yui3-widget-stdmod,
.yui3-widget-content-expanded {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.moodle-dialogue-hd,
.yui3-widget-hd {
    background-color: #0d1117 !important;
    border-bottom: 1px solid #30363d !important;
    color: #e6edf3 !important;
    padding: 15px !important;
}

.moodle-dialogue-hd h3,
.moodle-dialogue-hd h5 {
    color: #e6edf3 !important;
    margin: 0 !important;
}

.moodle-dialogue-bd,
.yui3-widget-bd {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
}

/* Fix for the YUI close button */
.moodle-dialogue-hd .closebutton {
    filter: invert(1) brightness(2) !important;
    opacity: 0.7 !important;
}

.moodle-dialogue-hd .closebutton:hover {
    opacity: 1 !important;
}

/* Left sidebar links in File Picker */
.fp-repo-area .nav-link {
    color: #8b949e !important;
}

.fp-repo-area .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e6edf3 !important;
}

.fp-repo-area .nav-link.active {
    background-color: rgba(0, 255, 255, 0.1) !important;
    color: #00FFFF !important;
}

/* Card inside file picker */
.fp-repo-items.card {
    background-color: #0d1117 !important;
    border-color: #30363d !important;
}

/* Toolbars inside file picker */
.fp-navbar.bg-faded {
    background-color: #0d1117 !important;
    border-bottom-color: #30363d !important;
}

/* Selection overlay when picking a file */
.fp-select {
    background-color: #161b22 !important;
    color: #e6edf3 !important;
    border: 1px solid #30363d !important;
}

/* 25. Gradebook User Report */
.path-grade-report-user .user-report-container {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 20px 0 !important;
    color: #e6edf3 !important;
}

.path-grade-report-user .table-responsive {
    background-color: transparent !important;
    border: none !important;
}

.path-grade-report-user table.user-grade {
    width: 100% !important;
    background-color: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    color: #e6edf3 !important;
}

.path-grade-report-user table.user-grade thead th {
    background-color: #161b22 !important;
    color: #8b949e !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid #30363d !important;
    padding: 12px 16px !important;
}

.path-grade-report-user table.user-grade tbody tr {
    background-color: transparent !important;
}

/* Category rows */
.path-grade-report-user table.user-grade .category {
    background-color: #1c2128 !important;
    color: #00FFFF !important;
    font-weight: 700 !important;
    border: 1px solid #30363d !important;
    padding: 12px 16px !important;
}

.path-grade-report-user table.user-grade .toggle-category {
    color: #00FFFF !important;
    padding: 0 !important;
    margin-right: 8px !important;
}

/* Cells */
.path-grade-report-user table.user-grade td, 
.path-grade-report-user table.user-grade th.cell {
    background-color: #161b22 !important;
    border-top: 1px solid #30363d !important;
    border-bottom: 1px solid #30363d !important;
    padding: 16px !important;
    color: #e6edf3 !important;
}

.path-grade-report-user table.user-grade td:first-child,
.path-grade-report-user table.user-grade th.cell:first-child {
    border-left: 1px solid #30363d !important;
}

.path-grade-report-user table.user-grade td:last-child,
.path-grade-report-user table.user-grade th.cell:last-child {
    border-right: 1px solid #30363d !important;
}

/* Aggregation cells */
.path-grade-report-user table.user-grade .baggt {
    background-color: rgba(0, 255, 255, 0.05) !important;
    font-weight: 600 !important;
}

.path-grade-report-user table.user-grade .rowtitle {
    color: #00FFFF !important;
    font-weight: 700 !important;
}

.path-grade-report-user table.user-grade .text-uppercase.small {
    color: #8b949e !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
}

/* Icons */
.path-grade-report-user .itemicon,
.path-grade-report-user .icon {
    filter: brightness(1.2) contrast(1.2) !important;
}

/* Spacer rows */
.path-grade-report-user table.user-grade .spacer td {
    background-color: transparent !important;
    border: none !important;
    height: 8px !important;
    padding: 0 !important;
}