/*
 * local_dhbtheme — udemy.css
 * DHB Training & Consulting | Abu Dhabi, UAE
 * Udemy-style skin for Moodle 5.2 Boost / Boost Child Theme
 * ============================================================
 */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Nunito+Sans:wght@400;600;700&display=swap');

/* ── CSS VARIABLES ────────────────────────────────────────── */
:root {
  --dhb-bg:           #1c1d1f;
  --dhb-surface:      #2d2f31;
  --dhb-accent:       #a435f0;
  --dhb-accent2:      #f5a623;
  --dhb-accent3:      #1db954;
  --dhb-text:         #1c1d1f;
  --dhb-muted:        #6a6f73;
  --dhb-border:       #e8e9eb;
  --dhb-star:         #e59819;
  --dhb-white:        #ffffff;
  --dhb-ff-head:      'Lato', sans-serif;
  --dhb-ff-body:      'Nunito Sans', sans-serif;
  --dhb-radius:       6px;
  --dhb-radius-lg:    10px;
}

/* ── BASE TYPOGRAPHY ──────────────────────────────────────── */
body,
#page,
#region-main,
.pagelayout-course,
.pagelayout-incourse {
  font-family: var(--dhb-ff-body) !important;
  background-color: #f7f9fa !important;
  color: var(--dhb-text) !important;
}

h1, h2, h3, h4, h5, h6,
.page-header-headings h1,
.section-title,
.activityname {
  font-family: var(--dhb-ff-head) !important;
  font-weight: 900 !important;
  color: var(--dhb-text) !important;
}

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar,
nav.navbar {
  background-color: var(--dhb-bg) !important;
  border-bottom: none !important;
  padding: 0 24px !important;
  min-height: 58px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

.navbar-brand,
.navbar-brand span,
.site-name {
  font-family: var(--dhb-ff-head) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: #fff !important;
  letter-spacing: -0.3px !important;
}

/* Logo accent colour on "learn" portion — set via JS */
.navbar .logo-accent { color: var(--dhb-accent2) !important; }

.navbar .nav-link,
.navbar-nav .nav-link {
  color: #d1d7dc !important;
  font-family: var(--dhb-ff-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  transition: background .15s !important;
}

.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
  background: #3e4143 !important;
  color: #fff !important;
}

/* Search bar */
.navbar .search-input-wrapper input,
.navbar #searchinput {
  background: #2d2f31 !important;
  border: 1.5px solid #3e4143 !important;
  border-radius: 22px !important;
  color: #fff !important;
  font-size: 13.5px !important;
  padding: 7px 16px 7px 38px !important;
}

.navbar .search-input-wrapper input::placeholder { color: #8c8c8c !important; }

/* ── NAV DRAWER (Left Sidebar) ────────────────────────────── */
#nav-drawer,
.drawer {
  background: var(--dhb-bg) !important;
  border-right: none !important;
}

#nav-drawer .list-group-item,
.drawer .list-group-item {
  background: transparent !important;
  color: #d1d7dc !important;
  border: none !important;
  font-family: var(--dhb-ff-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  border-radius: 0 !important;
  transition: background .15s !important;
}

#nav-drawer .list-group-item:hover,
.drawer .list-group-item:hover {
  background: #2d2f31 !important;
  color: #fff !important;
}

#nav-drawer .list-group-item.active,
.drawer .list-group-item.active {
  background: var(--dhb-accent) !important;
  color: #fff !important;
}

/* ── COURSE CARDS (Dashboard / Course Overview) ───────────── */
.card,
.dashboard-card,
.course-card,
[data-region="course-content"] .card {
  border: 1px solid var(--dhb-border) !important;
  border-radius: var(--dhb-radius) !important;
  box-shadow: none !important;
  transition: box-shadow .2s !important;
  overflow: hidden !important;
  font-family: var(--dhb-ff-body) !important;
}

.card:hover,
.dashboard-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.12) !important;
}

.card-title,
.coursename a,
.course-card .card-title {
  font-family: var(--dhb-ff-head) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--dhb-text) !important;
  line-height: 1.35 !important;
}

.card-text,
.coursecat {
  font-size: 12.5px !important;
  color: var(--dhb-muted) !important;
}

/* Course image overlay */
.card-img-top {
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary,
button.btn-primary {
  background: var(--dhb-accent) !important;
  border-color: var(--dhb-accent) !important;
  font-family: var(--dhb-ff-body) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  transition: background .15s, transform .1s !important;
}

.btn-primary:hover { background: #8b22d9 !important; border-color: #8b22d9 !important; }
.btn-primary:active { transform: scale(0.97) !important; }

.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--dhb-text) !important;
  color: var(--dhb-text) !important;
  font-family: var(--dhb-ff-body) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

.btn-secondary:hover { background: #f0f0f0 !important; }

/* Enrol button — prominent accent2 */
.btn-enrol,
[data-action="enrolself"],
.enrolment-btn {
  background: var(--dhb-accent2) !important;
  border-color: var(--dhb-accent2) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 10px 28px !important;
  border-radius: 4px !important;
}

/* ── TOPIC SECTIONS (Topical format) ─────────────────────── */
/* Section header — mimics Udemy chapter headers */
.topics li.section,
ul.topics > li {
  background: #fff !important;
  border: 1px solid var(--dhb-border) !important;
  border-radius: var(--dhb-radius-lg) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: box-shadow .2s !important;
}

.topics li.section:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; }

.topics .sectionname,
.section-title h3,
h3.sectionname {
  font-family: var(--dhb-ff-head) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: var(--dhb-text) !important;
  padding: 14px 20px !important;
  background: #f7f9fa !important;
  border-bottom: 1px solid var(--dhb-border) !important;
  margin: 0 !important;
}

/* Activity list items */
.activity,
li.activity {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 10px 20px !important;
  transition: background .15s !important;
  font-family: var(--dhb-ff-body) !important;
}

.activity:last-child { border-bottom: none !important; }
.activity:hover { background: #fafafa !important; }

.activity .activityname a,
.instancename {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dhb-text) !important;
  text-decoration: none !important;
}

.activity .activityname a:hover { color: var(--dhb-accent) !important; }

/* Activity type icons — accent colour */
.activity .activityiconcontainer {
  background: #f0e6ff !important;
  border-radius: 6px !important;
}

/* Completion checkbox */
.autocompletion .btn,
.togglecompletion {
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--dhb-border) !important;
  background: transparent !important;
  transition: all .15s !important;
}

.autocompletion .btn.btn-success,
.togglecompletion.btn-success {
  background: var(--dhb-accent3) !important;
  border-color: var(--dhb-accent3) !important;
}

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.progress,
.course-progress .progress {
  height: 6px !important;
  border-radius: 4px !important;
  background: #e8e9eb !important;
}

.progress-bar {
  background: var(--dhb-accent3) !important;
  border-radius: 4px !important;
}

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 6px 0 !important;
  font-size: 12.5px !important;
  font-family: var(--dhb-ff-body) !important;
}

.breadcrumb-item a { color: var(--dhb-accent) !important; text-decoration: none !important; }
.breadcrumb-item.active { color: var(--dhb-muted) !important; }

/* ── COURSE HEADER ────────────────────────────────────────── */
.course-header,
#page-header,
.page-header-headings {
  background: linear-gradient(135deg, #1a0533 0%, #2d0a52 50%, #0f2b5e 100%) !important;
  color: #fff !important;
  padding: 32px 32px 24px !important;
  border-radius: 0 0 var(--dhb-radius-lg) var(--dhb-radius-lg) !important;
  margin-bottom: 20px !important;
}

.page-header-headings h1 { color: #fff !important; font-size: 24px !important; }
.course-header .text-muted { color: rgba(255,255,255,.7) !important; }

/* ── TABS / NAV-TABS ──────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--dhb-border) !important;
  font-family: var(--dhb-ff-body) !important;
}

.nav-tabs .nav-link {
  color: var(--dhb-muted) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 10px 18px !important;
  border-radius: 0 !important;
  margin-bottom: -2px !important;
  transition: all .15s !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--dhb-text) !important;
  border-bottom-color: var(--dhb-text) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ── BADGES & PILLS ───────────────────────────────────────── */
.badge-primary { background: var(--dhb-accent) !important; }
.badge-success { background: var(--dhb-accent3) !important; }
.badge-warning { background: var(--dhb-accent2) !important; color: #fff !important; }

/* Custom DHB course-type badges (injected via JS) */
.dhb-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  display: inline-block !important;
  margin-bottom: 4px !important;
}
.dhb-badge-nebosh { background: #a435f0 !important; color: #fff !important; }
.dhb-badge-iosh   { background: #0ea5e9 !important; color: #fff !important; }
.dhb-badge-arabic { background: #1565c0 !important; color: #fff !important; }
.dhb-badge-best   { background: #e8a800 !important; color: #1c1d1f !important; }
.dhb-badge-new    { background: #4caf50 !important; color: #fff !important; }
.dhb-badge-hot    { background: #e74c3c !important; color: #fff !important; }

/* ── STAR RATING ─────────────────────────────────────────── */
.dhb-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  margin: 4px 0 !important;
}
.dhb-rating .score { color: #e59819 !important; font-weight: 700 !important; font-size: 13px !important; }
.dhb-rating .stars { color: #e59819 !important; letter-spacing: 1px !important; }
.dhb-rating .count { color: var(--dhb-muted) !important; font-size: 11.5px !important; }

/* ── FOOTER ───────────────────────────────────────────────── */
#page-footer,
footer#page-footer {
  background: var(--dhb-bg) !important;
  color: #8c8c8c !important;
  font-size: 12.5px !important;
  padding: 20px 24px !important;
  margin-top: 32px !important;
  text-align: center !important;
  font-family: var(--dhb-ff-body) !important;
}

#page-footer a { color: #8c8c8c !important; text-decoration: underline !important; }
#page-footer .logininfo,
#page-footer .homelink { color: #8c8c8c !important; }

/* ── FORMS ────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border: 1.5px solid #d1d5db !important;
  border-radius: 4px !important;
  font-family: var(--dhb-ff-body) !important;
  font-size: 14px !important;
  transition: border-color .2s !important;
}

.form-control:focus {
  border-color: var(--dhb-accent) !important;
  box-shadow: 0 0 0 3px rgba(164,53,240,.15) !important;
}

/* ── ALERTS / NOTIFICATIONS ───────────────────────────────── */
.alert-info    { background: #f0e6ff !important; border-color: #c4a0f5 !important; color: #4a148c !important; }
.alert-success { background: #e6f9f1 !important; border-color: #a7f3d0 !important; color: #065f46 !important; }
.alert-warning { background: #fffbeb !important; border-color: #fcd34d !important; color: #78350f !important; }
.alert-danger  { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #7f1d1d !important; }

/* ── GRADE BOOK ───────────────────────────────────────────── */
.gradereport-user-report-table th,
.generaltable th {
  background: var(--dhb-bg) !important;
  color: #fff !important;
  font-family: var(--dhb-ff-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
}

.gradereport-user-report-table td,
.generaltable td {
  font-family: var(--dhb-ff-body) !important;
  font-size: 13.5px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* ── VIDEO / IFRAME WRAPPER ───────────────────────────────── */
.mediaplugin,
.mediaplugin_videojs,
video,
.vjs-tech {
  border-radius: var(--dhb-radius) !important;
  overflow: hidden !important;
}

/* HLS iframe container */
.dhb-video-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  background: #000 !important;
  border-radius: var(--dhb-radius) !important;
  overflow: hidden !important;
}

.dhb-video-wrap iframe {
  position: absolute !important;
  top: 0; left: 0 !important;
  width: 100% !important; height: 100% !important;
  border: none !important;
}

/* ── QUIZ ─────────────────────────────────────────────────── */
.que {
  background: #fff !important;
  border: 1px solid var(--dhb-border) !important;
  border-radius: var(--dhb-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}

.que .qtext { font-size: 15px !important; font-weight: 600 !important; }
.que .answer label { font-size: 14px !important; }

/* ── RTL ARABIC SUPPORT ───────────────────────────────────── */
[lang="ar"],
.dir-rtl,
body.dir-rtl {
  font-family: 'Nunito Sans', 'Segoe UI', Tahoma, sans-serif !important;
  direction: rtl !important;
}

body.dir-rtl .navbar { flex-direction: row-reverse !important; }
body.dir-rtl .activity { padding: 10px 20px 10px 12px !important; }
body.dir-rtl .breadcrumb { direction: rtl !important; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header-headings h1 { font-size: 18px !important; }
  .course-header { padding: 20px 16px !important; }
  .topics .sectionname { font-size: 13.5px !important; }
  .activity { padding: 8px 14px !important; }
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* ── LOGIN PAGE - WHITE TEXT FIX ───────────────────────── */
#page-login-index .col-lg-6:first-child,
#page-login-index .col-lg-6:first-child *,
#page-login-index .login-banner,
#page-login-index .login-banner *,
#page-login-index .login-welcome,
#page-login-index .login-welcome *,
#page-login-index .login-stats,
#page-login-index .login-stats * {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}

#page-login-index h1,
#page-login-index h2 {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8) !important;
    font-weight: 900 !important;
}

/* ── LOGIN PAGE LEFT PANEL - WHITE TEXT ────────────────── */
.login-layout-left,
.login-layout-left *,
.login-layout-left-content,
.login-layout-left-content *,
.login-layout-left-content h1,
.login-layout-left-content h2,
.login-layout-left-content h3,
.login-layout-left-content p,
.login-layout-left-content div,
.login-layout-left-content span,
.login-layout-left-content strong {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}

.login-layout-left-content h1 {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8) !important;
    font-weight: 900 !important;
}

/* ── PDF VIEWER - HIDE DOWNLOAD/PRINT BUTTONS ──────────── */
/* Hide PDF.js toolbar buttons */
.resourcecontent embed,
.resourcecontent object,
.resourcecontent iframe[src*=".pdf"] {
    pointer-events: auto;
}

/* Hide print/download UI in browser PDF viewer */
#toolbarViewerRight,
#download,
#print,
#openFile,
#secondaryOpenFile,
#secondaryDownload,
#secondaryPrint,
.toolbarButton.download,
.toolbarButton.print {
    display: none !important;
    visibility: hidden !important;
}

/* Disable right-click on PDF embeds */
.resourcecontent {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}