:root{
  --bg:#f7f3e8;
  --surface:#fffdf8;
  --soft:#f1ecdf;
  --ink:#292b2f;
  --muted:#73736e;
  --gold:#d6a514;
  --border:#e6dece;
  --green:#287449;
  --greenbg:#eaf6ed;
  --orange:#a95c35;
  --orangebg:#fff0e8;
}

body{
  background:var(--bg)!important;
  color:var(--ink)!important;
}

header{
  position:sticky!important;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(255,253,248,.94)!important;
  border-bottom:1px solid var(--border)!important;
}

main,.container,.page,.app-shell{
  max-width:1400px!important;
  width:min(1400px,calc(100% - 28px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

section,.panel,.card,.course-card,.admin-card{
  border-color:var(--border)!important;
}

button,.btn,a.button{
  border-radius:12px!important;
  font-weight:700!important;
}

/* ===== PESERTA ===== */
.v23-section{
  margin-top:20px!important;
}

.v23-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.v23-grid > *{
  margin:0!important;
  min-width:0!important;
  height:100%;
}

.v23-card{
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  background:var(--surface)!important;
  box-shadow:0 5px 16px rgba(40,40,35,.04)!important;
}

/* ===== ADMIN ===== */
.v23-admin-card{
  padding:14px 16px!important;
  margin-bottom:10px!important;
}

.v23-admin-card h3,
.v23-admin-card h4{
  margin-bottom:5px!important;
}

.v23-admin-card button,
.v23-admin-card .btn{
  min-height:38px!important;
  padding:8px 13px!important;
}

.v23-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

/* ===== STATUS ===== */
.v23-ok{
  background:var(--greenbg)!important;
  color:var(--green)!important;
  border-radius:999px!important;
  padding:4px 9px!important;
}

.v23-warn{
  background:var(--orangebg)!important;
  color:var(--orange)!important;
  border-radius:999px!important;
  padding:4px 9px!important;
}

/* ===== QR ===== */
.v23-qr-wrap{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.v23-qr-wrap img,
.v23-qr-wrap canvas{
  max-width:240px!important;
  height:auto!important;
}

/* ===== TABLE ===== */
table{
  background:var(--surface)!important;
  border-radius:14px!important;
  overflow:hidden!important;
}

th{
  background:#f0eadc!important;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .v23-grid,
  .v23-qr-wrap{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:640px){
  main,.container,.page,.app-shell{
    width:calc(100% - 16px)!important;
  }

  button,.btn,a.button{
    min-height:44px!important;
  }

  h1{font-size:1.5rem!important;}
  h2{font-size:1.2rem!important;}
}

/* HADIR V2.3.1 STRUCTURAL UI/UX */

#courses,
#myCourses{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.v231-course-card,
.v231-my-card,
.v231-info-card,
.v231-report-card{
  background:var(--v23-surface,#fffdf8);
  border:1px solid var(--v23-border,#e7dfcf);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(35,36,39,.04);
}

.v231-course-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.v231-course-card h3,
.v231-my-card h3{
  margin:0;
  font-size:1rem;
  line-height:1.35;
}

.v231-course-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.v231-course-meta{
  display:grid;
  gap:6px;
  color:#6f716f;
  font-size:.86rem;
}

.v231-course-footer{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.v231-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
}

.v231-status.is-open,
.v231-status.is-complete{
  background:#e9f6ec;
  color:#267145;
}

.v231-status.is-waiting,
.v231-status.is-progress{
  background:#fff2d6;
  color:#8a6310;
}

.v231-my-card{
  padding:15px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}

.v231-my-main h3{
  margin-top:9px;
}

.v231-my-stats{
  display:grid;
  grid-template-columns:repeat(3,68px);
  gap:7px;
}

.v231-my-stats > div{
  padding:9px 6px;
  border-radius:13px;
  text-align:center;
  background:#f4efe4;
}

.v231-my-stats strong,
.v231-my-stats small{
  display:block;
}

.v231-progress{
  height:6px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:#eee8db;
}

.v231-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#d6a514;
}

.v231-admin-kpis,
.v231-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.v231-admin-kpis{
  margin-bottom:14px;
}

.v231-metric{
  padding:13px 14px;
  border:1px solid var(--v23-border,#e7dfcf);
  border-radius:15px;
  background:var(--v23-surface,#fffdf8);
}

.v231-metric strong,
.v231-metric small{
  display:block;
}

.v231-metric strong{
  font-size:1.35rem;
}

.v231-metric small{
  margin-top:5px;
  color:#77756f;
}

.v231-admin-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.v231-search-wrap{
  flex:1;
}

.v231-admin-toolbar input,
.v231-admin-toolbar select{
  width:100%;
  min-height:42px;
  border:1px solid var(--v23-border,#e7dfcf);
  border-radius:12px;
  background:#fffdf8;
  padding:0 12px;
}

.v231-admin-toolbar select{
  width:auto;
  min-width:150px;
}

.v231-admin-rows{
  display:grid;
  gap:8px;
}

.v231-admin-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  gap:14px!important;
  align-items:center!important;
  padding:12px 14px!important;
  margin:0!important;
}

.v231-admin-row .admin-course-main strong{
  display:block;
  margin:5px 0 3px;
}

.v231-admin-row .admin-course-stats{
  display:flex!important;
  gap:8px!important;
}

.v231-admin-row .admin-course-stats span{
  min-width:58px;
  padding:7px 8px;
  border-radius:12px;
  background:#f4efe4;
  text-align:center;
}

.v231-admin-row .admin-course-stats b,
.v231-admin-row .admin-course-stats small{
  display:block;
}

.v231-admin-row .admin-course-actions{
  display:flex!important;
  gap:6px!important;
}

.v231-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.v231-detail-head h2{
  margin:7px 0 4px;
  font-size:1.25rem;
}

.v231-detail-head p{
  margin:0;
  color:#73736e;
}

.v231-metric-grid{
  margin-bottom:14px;
}

.v231-tabs{
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:5px;
  margin:14px 0;
  border:1px solid var(--v23-border,#e7dfcf);
  border-radius:14px;
  background:#f1ecdf;
}

.v231-tab{
  min-height:38px;
  white-space:nowrap;
  border:0;
  border-radius:10px!important;
  padding:8px 13px;
  background:transparent;
  color:#5e5f5b;
  cursor:pointer;
}

.v231-tab.active{
  background:#292b2f!important;
  color:#fff!important;
}

.v231-tab-panel{
  display:none;
}

.v231-tab-panel.active{
  display:block;
}

.v231-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.v231-info-card,
.v231-report-card{
  padding:16px;
}

.v231-info-card dl > div{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid #eee7da;
}

.v231-info-card dt{
  color:#77756f;
}

.v231-info-card dd{
  margin:0;
  font-weight:700;
}

.v231-qr-list{
  display:grid;
  gap:9px;
}

.v231-qr-row{
  padding:12px 14px;
  border:1px solid var(--v23-border,#e7dfcf);
  border-radius:15px;
  background:#fffdf8;
}

.v231-qr-row-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.v231-qr-row-main > div{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.v231-qr-row-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
}

.v231-qr-reveal{
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee7da;
}

.v231-qr-reveal.hidden{
  display:none!important;
}

.v231-qr-reveal .qr-image{
  max-width:230px!important;
}

@media(max-width:1000px){
  #courses,
  #myCourses{
    grid-template-columns:1fr!important;
  }

  .v231-admin-kpis,
  .v231-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v231-admin-row{
    grid-template-columns:1fr!important;
  }

  .v231-summary-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .v231-my-card{
    grid-template-columns:1fr;
  }

  .v231-my-stats{
    grid-template-columns:repeat(3,1fr);
  }

  .v231-course-footer,
  .v231-detail-head,
  .v231-qr-row-main{
    align-items:stretch;
    flex-direction:column;
  }

  .v231-admin-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .v231-admin-toolbar select{
    width:100%;
  }

  .v231-qr-row-main > div{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* HADIR UAT VERSION BADGE */
.hadir-uat-version-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  background:#292b2f;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.hadir-uat-version-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e0ad16;
}
@media(max-width:640px){
  .hadir-uat-version-badge{
    padding:5px 8px;
    font-size:.65rem;
    margin-left:6px;
  }
}

/* =========================================================
   HADIR V2.3.2 FINAL POLISH
   ========================================================= */

/* Use more of the page width on desktop */
main,.container,.page,.app-shell{
  max-width:1520px!important;
  width:min(1520px,calc(100% - 36px))!important;
}

/* Participant profile/instructions balance */
@media (min-width:1100px){
  #profileCard,
  .profile-card,
  [id*="profile"][class*="card"]{
    min-width:0;
  }
}

/* Section spacing */
.v23-section{
  margin-top:18px!important;
}

.v23-section h2,
.v23-section h3{
  letter-spacing:-.015em;
}

/* Course cards: slightly denser and more aligned */
.v231-course-card{
  min-height:220px;
  padding:15px 16px 14px;
}

.v231-course-card h3{
  min-height:44px;
  display:flex;
  align-items:flex-start;
}

.v231-course-meta{
  margin-top:2px;
  gap:5px;
}

.v231-course-footer{
  min-height:46px;
  padding-top:4px;
}

.v231-course-footer .button{
  flex:0 0 auto;
}

/* My Courses: more compact, better title/stats balance */
.v231-my-card{
  min-height:180px;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:16px;
  padding:15px 16px;
}

.v231-my-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.v231-my-main h3{
  max-width:100%;
  font-size:1rem;
  line-height:1.32;
  margin-top:10px;
}

.v231-my-stats{
  grid-template-columns:repeat(3,62px);
  justify-content:end;
  align-self:center;
}

.v231-my-stats > div{
  min-height:62px;
  padding:9px 5px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.v231-my-stats strong{
  font-size:1rem;
}

.v231-my-stats small{
  font-size:.7rem;
}

.v231-progress{
  margin-top:auto;
  width:min(180px,100%);
}

.v231-status.is-progress{
  font-size:.69rem;
  padding:4px 8px;
}

/* Admin list refinements */
.v231-admin-kpis{
  gap:12px;
}

.v231-admin-row{
  border-radius:16px!important;
  min-height:92px;
}

.v231-admin-row .admin-course-main{
  min-width:0;
}

.v231-admin-row .admin-course-main strong{
  font-size:.98rem;
  line-height:1.3;
}

.v231-admin-row .admin-course-stats span{
  min-width:60px;
  padding:8px 9px;
}

.v231-admin-row .admin-course-actions{
  align-items:center;
}

/* Detail header + tabs */
.v231-detail-head{
  padding:2px 2px 4px;
}

.v231-detail-head h2{
  font-size:1.32rem;
}

.v231-tabs{
  position:sticky;
  top:82px;
  z-index:20;
  background:rgba(241,236,223,.96);
  backdrop-filter:blur(10px);
}

.v231-tab{
  font-size:.88rem;
}

.v231-tab[data-tab="qr"]{
  font-weight:800!important;
}

/* Summary blocks */
.v231-info-card{
  min-height:220px;
}

.v231-info-card h3{
  margin-bottom:12px;
}

/* QR section */
.v231-qr-row{
  padding:14px 16px;
}

.v231-qr-row-main strong{
  font-size:.95rem;
}

.v231-qr-row-actions{
  margin-top:12px;
}

.v231-show-qr{
  background:#292b2f!important;
  color:#fff!important;
  border-color:#292b2f!important;
}

/* Reduce visual noise on technical code labels */
.course-code{
  font-size:.72rem!important;
  letter-spacing:.08em!important;
}

/* Buttons */
.admin-mini-btn,
.button,
.btn{
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

@media (hover:hover){
  .admin-mini-btn:hover,
  .button:hover,
  .btn:hover{
    transform:translateY(-1px);
  }
}

/* Mobile polish */
@media(max-width:1000px){
  main,.container,.page,.app-shell{
    width:min(100% - 18px,1520px)!important;
  }

  .v231-my-card{
    grid-template-columns:1fr!important;
  }

  .v231-my-stats{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    justify-content:stretch;
  }

  .v231-progress{
    width:100%;
  }

  .v231-tabs{
    top:72px;
  }
}

@media(max-width:640px){
  .v231-course-card,
  .v231-my-card{
    min-height:0;
  }

  .v231-course-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .v231-course-footer .button{
    width:100%;
  }
}

/* =========================================================
   HADIR V2.3.3 - FINAL PARTICIPANT LAYOUT
   ========================================================= */

/* Make participant course sections span the whole dashboard width */
.v233-full-span{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:none!important;
}

/* Desktop: reduce vertical scrolling */
@media(min-width:1350px){
  #courses{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  #myCourses{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .v231-my-card{
    grid-template-columns:1fr!important;
    min-height:190px;
  }

  .v231-my-stats{
    width:100%;
    grid-template-columns:repeat(3,1fr)!important;
    justify-content:stretch!important;
    margin-top:12px;
  }

  .v231-progress{
    width:100%!important;
  }
}

/* Mid desktop: 2 columns */
@media(min-width:900px) and (max-width:1349px){
  #courses,
  #myCourses{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Improve section headings */
.v233-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:14px!important;
}

/* Course cards equal height/alignment */
#courses > .v231-course-card{
  height:100%;
}

#myCourses > .v231-my-card{
  height:100%;
}

/* Slightly softer card density */
.v231-course-card,
.v231-my-card{
  box-shadow:0 4px 14px rgba(35,36,39,.035)!important;
}

/* Remove excessive whitespace from participant area */
.v233-full-span{
  margin-top:18px!important;
}

/* =========================================================
   HADIR V2.3.3.1 - CSS ONLY POLISH
   TIADA JavaScript / Auth / RPC / DB diubah
   ========================================================= */

/* PROFIL: Lengkap = hijau, Belum lengkap = merah */
#profileCard .v23-status-ok,
.profile-card .v23-status-ok,
[id*="profile"] .v23-status-ok{
  background:#e9f6ec!important;
  color:#267145!important;
  border:1px solid #cfe8d6!important;
}

#profileCard .v23-status-warn,
.profile-card .v23-status-warn,
[id*="profile"] .v23-status-warn{
  background:#fdecec!important;
  color:#b33a32!important;
  border:1px solid #f4c7c4!important;
}

/* Status positif lain */
.v23-status-ok{
  background:#e9f6ec!important;
  color:#267145!important;
}

/* Status amaran/negatif */
.v23-status-warn{
  background:#fff0e8!important;
  color:#a45131!important;
}

/* Profil peserta */
#profileCard,
.profile-card{
  box-shadow:0 5px 18px rgba(35,36,39,.035)!important;
}

#profileCard input,
#profileCard select,
.profile-card input,
.profile-card select{
  min-height:42px!important;
}

/* Kursus Dibuka */
.v231-course-card{
  border-color:#e3dac8!important;
  box-shadow:0 4px 14px rgba(35,36,39,.03)!important;
}

.v231-course-card h3{
  line-height:1.32!important;
}

.v231-course-footer{
  border-top:1px solid #f1eadc;
  padding-top:10px!important;
}

/* Kursus Saya */
.v231-my-card{
  border-color:#e3dac8!important;
  box-shadow:0 4px 14px rgba(35,36,39,.03)!important;
}

.v231-my-stats > div{
  background:#f3eee3!important;
  border:1px solid #eee5d5;
}

.v231-progress{
  height:5px!important;
}

/* Admin */
.v231-admin-row{
  border-color:#e4dccd!important;
}

.v231-admin-row.active{
  border-color:#aad8c5!important;
  box-shadow:0 0 0 1px rgba(38,113,69,.06)!important;
}

.v231-admin-row .admin-course-actions{
  background:#fffaf0;
  border:1px solid #eee4d1;
  border-radius:14px;
  padding:7px;
}

.v231-metric{
  box-shadow:0 2px 8px rgba(35,36,39,.02)!important;
}

/* Detail kursus */
.v231-tabs{
  box-shadow:0 3px 10px rgba(35,36,39,.025)!important;
}

.v231-tab.active{
  box-shadow:0 3px 10px rgba(35,36,39,.07)!important;
}

.v231-info-card{
  background:#fffefb!important;
  border-color:#e5ddcf!important;
}

/* QR */
.v231-qr-row{
  border-color:#e3dccd!important;
}

.v231-show-qr{
  background:#292b2f!important;
  color:#fff!important;
  border-color:#292b2f!important;
}

/* Hover lembut sahaja */
@media (hover:hover){
  .v231-course-card:hover,
  .v231-my-card:hover,
  .v231-admin-row:hover,
  .v231-qr-row:hover{
    box-shadow:0 7px 20px rgba(35,36,39,.045)!important;
  }
}

/* Mobile */
@media(max-width:640px){
  .v231-course-footer{
    border-top:0;
  }
}

/* FIX PROFIL PESERTA STATUS */
#profileState.status-ready{
  background:#e9f6ec!important;
  color:#267145!important;
  border:1px solid #cfe8d6!important;
}

#profileState:not(.status-ready){
  background:#fdecec!important;
  color:#b33a32!important;
  border:1px solid #f4c7c4!important;
}

/* =========================================================
   HADIR V2.3.3.1 - COURSE LAYOUT CLEAN
   CSS ONLY
   ========================================================= */

/* Paksa seksyen kursus menggunakan lebar penuh */
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses),
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses){
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:none!important;
}

/* Kursus Dibuka = senarai satu baris, bukan kad berselerak */
#courses{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

#courses .v231-course-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 150px!important;
  grid-template-areas:
    "top action"
    "title action"
    "meta action"!important;
  align-items:center!important;
  min-height:118px!important;
  padding:14px 16px!important;
  gap:6px 18px!important;
}

#courses .v231-course-top{
  grid-area:top!important;
  justify-content:flex-start!important;
  gap:10px!important;
}

#courses .v231-course-card > h3{
  grid-area:title!important;
  min-height:0!important;
  margin:0!important;
  font-size:1rem!important;
  line-height:1.28!important;
}

#courses .v231-course-meta{
  grid-area:meta!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px 16px!important;
  margin:0!important;
}

#courses .v231-course-footer{
  grid-area:action!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  padding:0!important;
  border-top:0!important;
}

#courses .v231-course-footer small{
  display:none!important;
}

#courses .v231-course-footer .button{
  width:100%!important;
  min-height:44px!important;
}

/* Kursus Saya = senarai kemas, status kiri dan metrik kanan */
#myCourses{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

#myCourses .v231-my-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 260px!important;
  align-items:center!important;
  gap:18px!important;
  min-height:122px!important;
  padding:14px 16px!important;
}

#myCourses .v231-my-main{
  min-width:0!important;
}

#myCourses .v231-my-main h3{
  margin:8px 0 8px!important;
  font-size:1rem!important;
  line-height:1.28!important;
}

#myCourses .v231-my-stats{
  width:100%!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  margin:0!important;
}

#myCourses .v231-my-stats > div{
  min-height:64px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}

#myCourses .v231-progress{
  width:100%!important;
  max-width:280px!important;
  margin-top:6px!important;
}

/* Tajuk seksyen lebih kemas */
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses) h2,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses) h3,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses) h2,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses) h3{
  text-align:left!important;
}

/* Tablet / telefon */
@media(max-width:900px){
  #courses .v231-course-card{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "top"
      "title"
      "meta"
      "action"!important;
  }

  #courses .v231-course-footer{
    justify-content:flex-start!important;
  }

  #courses .v231-course-footer .button{
    width:auto!important;
    min-width:140px!important;
  }

  #myCourses .v231-my-card{
    grid-template-columns:1fr!important;
  }

  #myCourses .v231-my-stats{
    margin-top:8px!important;
  }

  #myCourses .v231-progress{
    max-width:none!important;
  }
}

/* RAPATKAN NOMBOR SEKSYEN + TAJUK */
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses),
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses){
  position:relative!important;
}

/* Tajuk Kursus Dibuka / Kursus Saya */
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses) > h2,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses) > h3,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses) > h2,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses) > h3{
  margin-left:52px!important;
  margin-right:0!important;
  width:auto!important;
  text-align:left!important;
  transform:none!important;
}

/* Buang jarak/grid lama pada header seksyen */
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#courses) > :first-child,
main :is(section,.card,.panel,[class*="card"],[class*="section"]):has(#myCourses) > :first-child{
  margin-right:0!important;
}

/* FINAL FIX HEADER SEKSYEN: NOMBOR + TAJUK RAPAT */
.section-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

.section-heading > div{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:auto!important;
  margin:0!important;
}

.section-heading .step{
  flex:0 0 auto!important;
  margin:0!important;
}

.section-heading h2{
  margin:0!important;
  padding:0!important;
  width:auto!important;
  text-align:left!important;
  transform:none!important;
}

/* HADIR V2.3.3.2 - COURSE TABS */
.hadir-course-tabs{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin:18px 0 14px;
  padding:7px;
  border:1px solid #e3dac8;
  border-radius:18px;
  background:#fffdf8;
  box-shadow:0 5px 18px rgba(35,36,39,.035);
}
.hadir-course-tab{
  min-height:52px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#687083;
  font:inherit;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
}
.hadir-course-tab.active{
  background:#292b2f;
  color:#fff;
  box-shadow:0 4px 12px rgba(35,36,39,.10);
}
.hadir-course-tab .tab-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  margin-right:8px;
  padding:0 8px;
  border-radius:999px;
  background:#f6e5a8;
  color:#292b2f;
  font-size:.82rem;
}
.hadir-course-tab.active .tab-step{
  background:#e0aa12;
}
.hadir-course-panel{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:none!important;
  margin-top:0!important;
}
.hadir-course-panel > .section-heading{
  display:none!important;
}
.hadir-course-panel[hidden]{
  display:none!important;
}
@media(max-width:700px){
  .hadir-course-tabs{
    grid-template-columns:1fr;
  }
  .hadir-course-tab{
    text-align:left;
    padding:0 14px;
  }
}

/* =========================================================
   HADIR V2.3.3.3 - FULL WIDTH COURSE AREA
   ========================================================= */

.hadir-course-tabs,
.hadir-course-panel{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

.hadir-course-tabs{
  margin-top:18px!important;
  margin-bottom:14px!important;
}

.hadir-course-panel{
  margin-bottom:18px!important;
}

/* Bila panel kursus sudah dipindahkan keluar daripada kolum kiri,
   ia guna seluruh lebar yang sama dengan Pengurusan Kursus. */
.hadir-course-wide-host{
  width:100%!important;
  max-width:none!important;
}

/* Kurangkan jurang sebelum panel admin */
.hadir-course-panel + .panel,
.hadir-course-panel + section.panel{
  margin-top:0!important;
}

/* =========================================================
   HADIR HEADER ALIGNMENT
   Brand kiri | Portal rasmi tengah | UAT kanan
   CSS ONLY
   ========================================================= */

.site-header .brand-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:24px!important;
  min-height:78px!important;
}

.site-header .brand{
  justify-self:start!important;
  margin:0!important;
}

.site-header .brand-row > .badge{
  justify-self:center!important;
  margin:0!important;
  white-space:nowrap!important;
}

.site-header .hadir-uat-version-badge{
  justify-self:end!important;
  margin:0!important;
  white-space:nowrap!important;
}

/* Pastikan identiti jenama sentiasa sejajar */
.site-header .brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.site-header .brand > span:last-child{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1.15!important;
}

.site-header .brand strong,
.site-header .brand small{
  margin:0!important;
}

/* Tablet */
@media(max-width:820px){
  .site-header .brand-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "brand version"
      "portal portal"!important;
    row-gap:8px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  .site-header .brand{
    grid-area:brand!important;
  }

  .site-header .hadir-uat-version-badge{
    grid-area:version!important;
  }

  .site-header .brand-row > .badge{
    grid-area:portal!important;
    justify-self:center!important;
  }
}

/* Telefon */
@media(max-width:560px){
  .site-header .brand-row{
    column-gap:10px!important;
  }

  .site-header .brand-mark{
    width:42px!important;
    height:42px!important;
  }

  .site-header .brand strong{
    font-size:.95rem!important;
  }

  .site-header .brand small{
    font-size:.72rem!important;
  }

  .site-header .hadir-uat-version-badge{
    font-size:.68rem!important;
  }
}

/* HEADER FULL WIDTH — selari dengan kandungan utama */
.site-header .shell.brand-row{
  width:calc(100% - 40px)!important;
  max-width:none!important;
  margin-left:20px!important;
  margin-right:20px!important;
  padding-left:0!important;
  padding-right:0!important;

  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
}

/* Kiri */
.site-header .brand{
  justify-self:start!important;
}

/* Tengah */
.site-header .brand-row > .badge{
  justify-self:center!important;
}

/* Kanan */
.site-header .hadir-uat-version-badge{
  justify-self:end!important;
}

@media(max-width:700px){
  .site-header .shell.brand-row{
    width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }
}

/* HADIR PRODUCTION ONLY — hide UAT badge */
.hadir-uat-version-badge{
  display:none!important;
}