*{box-sizing:border-box}
:root{--bg:#f7f8fa;--panel:#fff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--dark:#111827;--primary:#1f4fd8}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.shell{display:flex;min-height:100vh}
.sidebar{width:260px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:22px;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}
.mark{width:42px;height:42px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:800}
.brand strong{display:block;font-size:16px}
.brand span,.profile span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
nav{display:grid;gap:6px}
nav a{color:#374151;padding:11px 12px;border-radius:8px;font-weight:600}
nav a:hover{background:#f3f4f6;text-decoration:none}
.profile{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;font-weight:700}
main{margin-left:260px;width:calc(100% - 260px)}
header{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;color:#374151}
.content{max-width:1280px;margin:0 auto;padding:32px}
.hero{background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px;margin-bottom:24px}
.hero h1{font-size:40px;letter-spacing:-.04em;margin:0 0 10px;max-width:850px}
.hero p{color:var(--muted);font-size:16px;max-width:850px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:#4b5563;font-size:12px;font-weight:800;margin:0 0 8px}
h1{font-size:34px;letter-spacing:-.035em;margin:0 0 12px}
h2{font-size:20px;margin:0 0 8px}
p{line-height:1.6}
.lead{font-size:17px;color:#4b5563;max-width:900px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card,.panel,.form-card,.module-card,.activity-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.link-card{display:block;color:inherit}
.link-card:hover{text-decoration:none;border-color:#c7d2fe}
.tag{display:inline-block;background:#f3f4f6;color:#374151;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700;margin-bottom:10px}
.meta{border-top:1px solid var(--line);padding-top:12px;margin-top:12px;display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-size:13px}
.notice{background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0;color:#374151}
.title-row,.course-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.course-actions{display:flex;gap:8px;flex-wrap:wrap}
button,.btn{background:var(--primary);color:white;border:0;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer;display:inline-block}
.btn.secondary{background:#fff;color:#111827;border:1px solid var(--line)}
.btn.small{font-size:13px;padding:7px 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.stats span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:700}
.stats strong{font-size:28px}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line);padding:13px 0}
.row:first-of-type{border-top:0}
.row span,.muted{display:block;color:var(--muted);font-size:13px}
.module-list,.activity-list{display:grid;gap:12px}
.module-card{display:flex;justify-content:space-between;gap:18px}
.activity-row{display:flex;justify-content:space-between;gap:18px;color:inherit}
.activity-row:hover{text-decoration:none;border-color:#c7d2fe}
input,textarea,select{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:10px;margin:6px 0 14px;font:inherit;background:#fff}
textarea{min-height:150px}
label{font-weight:700;display:block}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f9fafb;color:#374151;font-size:12px;text-transform:uppercase}
.inline{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:center}
.inline input,.inline select{margin:0}
.reply{background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0}
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:12px}
.progress span{display:block;height:100%;background:#111827}
.hint{font-size:13px;color:var(--muted);background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:16px;line-height:1.6}
.error{color:#b91c1c}
@media(max-width:900px){.sidebar{position:relative;width:100%}.shell{display:block}main{margin-left:0;width:100%}.columns,.title-row,.course-head{grid-template-columns:1fr;display:block}.content{padding:20px}.inline{grid-template-columns:1fr}}

.choice{display:block;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}
.interactive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.sortable{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.sortable li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;cursor:grab}
.codebox{font-family:Consolas,Monaco,monospace;min-height:220px;background:#0b1020;color:#e5e7eb}
.video-box{width:100%;min-height:360px;border:1px solid var(--line);border-radius:12px;background:#000}
.feedback{white-space:pre-wrap;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:12px}
.tag.light{background:#eef2ff;color:#1e40af}

.logo-img{width:42px;height:42px;border-radius:10px;object-fit:contain;border:1px solid var(--line)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.settings-actions{grid-column:1/-1}
input[type=color]{height:44px;padding:4px}
code{background:#f3f4f6;border:1px solid var(--line);border-radius:6px;padding:2px 5px}

.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
code{background:#f3f4f6;border:1px solid var(--line);border-radius:6px;padding:2px 6px}
td .inline{margin-bottom:8px}
td .inline input,td .inline select{min-width:120px}

.breadcrumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:18px}
.breadcrumbs a{color:#374151;font-weight:700}
.top-links{display:flex;gap:14px;font-size:13px}
.side-section{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:4px}
.side-section>span{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:4px}
.subnav{font-size:13px;padding:8px 10px!important}
.course-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0 24px}
.tool-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:block;color:inherit}
.tool-card span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.tool-card:hover{text-decoration:none;border-color:#c7d2fe}
.module-actions{display:grid;gap:8px;justify-items:end;align-content:start}
.bottom-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:18px}
.error-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;max-width:820px}
.error-panel details{background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0}
.error-panel pre{white-space:pre-wrap;max-height:260px;overflow:auto}

.video-placeholder{background:#f9fafb;border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted)}
.status-banner{display:inline-block;border-radius:999px;padding:7px 12px;font-weight:800;margin:8px 0 14px;background:#f3f4f6}
.status-graded,.status-completed{background:#ecfdf5;color:#047857}
.status-submitted,.status-in-progress{background:#eff6ff;color:#1d4ed8}
.status-not-started{background:#f3f4f6;color:#4b5563}
.status-mini{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:#374151;background:#fff}



/* ---------------------------------------------------------
   Spacious Enterprise UI Refinement
   --------------------------------------------------------- */

.content{
  max-width:1340px;
  padding:44px 42px;
}

.hero{
  padding:48px;
  margin-bottom:36px;
}

.hero h1{
  margin-bottom:18px;
}

.panel,
.form-card,
.card,
.module-card,
.activity-row{
  padding:28px;
  margin-bottom:24px;
}

.grid{
  gap:24px;
}

.columns{
  gap:28px;
}

.stats{
  gap:20px;
  margin-bottom:32px;
}

.stats div{
  padding:24px;
}

.title-row,
.course-head{
  margin-bottom:32px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.course-actions{
  gap:12px;
  margin:18px 0 26px;
}

.course-tool-grid{
  gap:20px;
  margin:30px 0 36px;
}

.tool-card{
  padding:24px;
}

.module-list,
.activity-list{
  gap:18px;
}

.module-card{
  align-items:flex-start;
  padding:28px;
}

.module-card h2,
.activity-row strong{
  display:block;
  margin-top:8px;
  margin-bottom:8px;
}

.activity-row{
  align-items:flex-start;
  padding:24px 28px;
}

.breadcrumbs{
  margin-bottom:28px;
  padding:12px 0;
}

.notice{
  margin:22px 0;
  padding:18px;
}

form{
  margin-top:12px;
}

label{
  margin-top:16px;
  margin-bottom:6px;
}

input,
textarea,
select{
  margin:8px 0 18px;
  padding:12px 14px;
}

button,
.btn{
  margin-top:8px;
}

table{
  margin-top:24px;
  margin-bottom:36px;
  border-spacing:0;
}

th,
td{
  padding:18px 16px;
}

td form.inline{
  margin-top:0;
  margin-bottom:12px;
}

.inline{
  gap:12px;
}

.status-banner{
  margin:16px 0 24px;
}

.status-mini{
  margin-top:6px;
}

.video-placeholder,
.video-box{
  margin-top:16px;
  margin-bottom:18px;
}

.side-section{
  margin-top:24px;
  padding-top:20px;
}

.profile{
  padding-top:22px;
}

.reply{
  margin:14px 0;
  padding:16px;
}

.settings-grid{
  gap:24px;
}

.error-panel{
  padding:40px;
}

@media(max-width:900px){
  .content{
    padding:28px 20px;
  }

  .hero,
  .panel,
  .form-card,
  .card,
  .module-card,
  .activity-row{
    padding:22px;
  }

  th,
  td{
    padding:14px 12px;
  }
}

/* ---------------------------------------------------------
   Intuitive scrollable sidebar navigation
   --------------------------------------------------------- */
.sidebar{
  padding:0;
  overflow:hidden;
}

.brand{
  flex:0 0 auto;
  padding:22px 22px 18px;
  margin-bottom:0;
  border-bottom:1px solid var(--line);
}

.sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 14px 18px;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}

.sidebar-scroll::-webkit-scrollbar{width:8px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}

.side-nav,
nav.side-nav{
  display:grid;
  gap:14px;
}

.nav-group{
  display:grid;
  gap:4px;
}

.nav-heading{
  padding:0 10px 4px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.side-nav a,
.nav-details a{
  display:block;
  color:#374151;
  padding:10px 11px;
  border-radius:10px;
  font-weight:650;
  line-height:1.25;
}

.side-nav a:hover,
.nav-details a:hover{
  background:#f3f4f6;
  text-decoration:none;
}

.nav-details{
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  background:#fbfcfd;
}

.nav-details summary{
  list-style:none;
  cursor:pointer;
  padding:9px 10px;
  border-radius:10px;
  color:#111827;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.nav-details summary::-webkit-details-marker{display:none}
.nav-details summary::after{
  content:"▾";
  float:right;
  color:var(--muted);
  font-size:12px;
}
.nav-details:not([open]) summary::after{content:"▸"}
.nav-details summary:hover{background:#f3f4f6}

.profile{
  flex:0 0 auto;
  margin-top:0;
  padding:16px 22px 20px;
  background:#fff;
  border-top:1px solid var(--line);
}

.side-section{display:none}

@media(max-width:900px){
  .sidebar{
    max-height:72vh;
    position:relative;
  }
  .sidebar-scroll{
    max-height:calc(72vh - 84px);
  }
}

/* ---------------------------------------------------------
   Navigation icons and enrolment matrix
   --------------------------------------------------------- */
.side-nav a,
.nav-details a,
.nav-details summary{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}

.side-nav a:hover .nav-icon,
.nav-details a:hover .nav-icon,
.nav-details summary:hover .nav-icon{
  opacity:1;
}

.nav-details summary::after{
  margin-left:auto;
}

.title-row.compact{
  align-items:center;
}

.matrix-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.matrix-scroll{
  max-height:560px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  margin-top:18px;
  scrollbar-width:thin;
}

.matrix-scroll table{
  margin:0;
  border:0;
  border-radius:0;
  min-width:860px;
}

.enrolment-matrix th,
.enrolment-matrix td{
  text-align:center;
  vertical-align:middle;
  padding:12px;
}

.enrolment-matrix thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f9fafb;
}

.enrolment-matrix .sticky-col{
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
  text-align:left;
  min-width:260px;
  box-shadow:1px 0 0 var(--line);
}

.enrolment-matrix thead .sticky-col{
  z-index:4;
  background:#f9fafb;
}

.matrix-course-toggle,
.matrix-student-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  cursor:pointer;
  font-weight:800;
}

.matrix-course-toggle{
  justify-content:center;
  min-width:90px;
}

.matrix-student-toggle small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  margin-top:3px;
}

.matrix-course-toggle input,
.matrix-student-toggle input,
.enrolment-cell{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--primary);
}

.enrolment-cell{
  cursor:pointer;
}

.enrolment-matrix-panel .hint{
  margin-top:16px;
}

@media(max-width:900px){
  .title-row.compact{
    display:block;
  }
  .matrix-actions{
    justify-content:flex-start;
    margin-top:12px;
  }
  .matrix-scroll{
    max-height:65vh;
  }
}

.top-links a{display:inline-flex;align-items:center;gap:7px;color:#374151;font-weight:700}
.top-links .nav-icon{width:16px;height:16px;flex-basis:16px}

/* ---------------------------------------------------------
   Professional profile page
   --------------------------------------------------------- */
.profile-hero{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:28px;
  align-items:center;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid var(--line);
  border-radius:22px;
  padding:34px;
  margin-bottom:28px;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.profile-photo-wrap{display:flex;align-items:center;justify-content:center}
.profile-photo,
.profile-photo-placeholder{
  width:116px;
  height:116px;
  border-radius:28px;
  border:1px solid var(--line);
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.profile-photo{object-fit:cover;background:#fff}
.profile-photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  font-size:44px;
  font-weight:900;
  text-transform:uppercase;
}
.profile-hero-main h1{margin-bottom:8px}
.profile-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.profile-badges span{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:#fff;
  color:#374151;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:800;
}
.profile-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
  gap:28px;
  align-items:start;
}
.profile-form-panel h2,
.profile-side h2{margin-bottom:8px}
.field-help{margin:-8px 0 18px;color:var(--muted);font-size:13px;line-height:1.5}
.info-list{display:grid;gap:0;margin-top:14px}
.info-list div{
  display:grid;
  gap:5px;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.info-list div:first-child{border-top:0}
.info-list span{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.info-list strong{font-size:15px;word-break:break-word}
.profile-tips{margin:16px 0 0;padding-left:18px;color:#374151;line-height:1.65}
.notice.success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
@media(max-width:900px){
  .profile-hero{grid-template-columns:1fr;text-align:left;padding:24px}
  .profile-photo-wrap{justify-content:flex-start}
  .profile-layout{grid-template-columns:1fr}
}

/* Certifier template query page */
.template-search-form input{min-width:280px;}
.table-scroll{overflow-x:auto; width:100%;}
.compact-form{display:inline-flex; gap:.4rem; align-items:center; margin:0;}
.small-btn{padding:.45rem .75rem; font-size:.85rem; border-radius:10px;}
.warning-card{border-left:4px solid #f59e0b;}
.settings-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr));}
.mini-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.4rem;}
@media (max-width: 760px){.settings-grid.two-col{grid-template-columns:1fr}.template-search-form input{min-width:100%;}}

/* Programme/course material upload */
.upload-dropzone{border:2px dashed #cbd5e1;border-radius:18px;padding:18px;background:#f8fafc;margin:12px 0;display:grid;gap:10px}
.upload-dropzone input[type=file]{position:absolute;left:-9999px}
.upload-dropzone label{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;cursor:pointer;color:#334155;text-align:center}
.upload-dropzone label strong{font-size:1.05rem;color:#0f172a}
.upload-dropzone label span{font-size:.9rem;color:#64748b;margin-top:4px}
.material-list{display:grid;gap:10px;margin-top:12px}
.material-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:white}
.material-item span{display:block;color:#64748b;font-size:.85rem;margin-top:4px}
.material-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mini-settings{margin-top:14px;border-top:1px solid #e5e7eb;padding-top:12px;display:grid;gap:8px}
button.danger,.danger{background:#b91c1c;color:#fff;border-color:#b91c1c}
.upload-dropzone.drag-active{background:#eff6ff;border-color:#2563eb}
.selected-files{font-style:normal;color:#475569;font-size:.82rem;margin-top:8px;max-width:100%;word-break:break-word}


/* Activity section grouping */
.sectioned-activities{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.activity-section-title{display:flex;align-items:center;gap:10px;margin:22px 0 4px;padding:10px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px}
.activity-section-title h2{font-size:1.05rem;margin:0;color:#111827}
.section-dot{width:11px;height:11px;border-radius:999px;background:#1f4fd8;box-shadow:0 0 0 4px rgba(31,79,216,.10)}
.empty-state{padding:18px;border:1px dashed #d1d5db;border-radius:14px;color:#6b7280;background:#fafafa}

/* Discussion management */
.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:600}
.error-box{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:600}
.stacked-form{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.stacked-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#111827}
.stacked-form input,.stacked-form textarea{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:11px 12px;font:inherit;background:#fff;color:#111827}
.stacked-form textarea{resize:vertical;min-height:90px}
.check-row{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:600!important;color:#374151!important}
.check-row input{width:auto!important}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}
.discussion-panel{margin-bottom:18px}
.reply-list{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.reply{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px}
.reply strong{display:inline-block;margin-right:8px}
.reply p{margin:8px 0 0}
.admin-details{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;margin:14px 0}
.admin-details summary{cursor:pointer;font-weight:800;color:#111827}
.compact-form{margin-top:12px}
.inline-form{display:inline-flex;gap:10px;margin-top:10px}
.danger-zone{border-top:1px solid #e5e7eb;padding-top:12px;margin-top:12px}
.reply-form{border-top:1px solid #e5e7eb;padding-top:14px}
.tag.warning{background:#fff7ed;color:#9a3412;border-color:#fed7aa}


/* ISO/accreditation table containment: tables stay inside cards/section boxes. */
.panel,.card,.form-card,.hero,.module-card,.materials-panel{max-width:100%;overflow:hidden}
table{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:normal;-webkit-overflow-scrolling:touch}
thead,tbody,tr{width:100%}
th,td{word-break:break-word;overflow-wrap:anywhere;max-width:360px}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff;margin:18px 0 28px}
.table-wrap table{margin:0;border:0;display:table;min-width:760px}
.section-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin:0 0 24px;max-width:100%;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
.form-inline input,.form-inline select,.form-inline textarea{margin:4px 0 10px}
.status-pass{background:#ecfdf5;color:#047857}.status-fail{background:#fef2f2;color:#b91c1c}.status-warn{background:#fffbeb;color:#92400e}
.small-muted{font-size:12px;color:var(--muted)}
.danger{background:#b91c1c!important;color:#fff!important}
.material-list{display:grid;gap:12px}.material-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}.material-item span{display:block;color:var(--muted);font-size:12px}.material-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.upload-dropzone{border:2px dashed #cbd5e1;border-radius:14px;padding:18px;background:#f8fafc;margin-bottom:18px}.upload-dropzone input[type=file]{position:absolute;left:-9999px}.upload-dropzone label{display:block;text-align:center;cursor:pointer;color:#374151}.upload-dropzone label span,.upload-dropzone label em{display:block;color:var(--muted);font-weight:500;margin-top:6px}.upload-dropzone.drag-active{background:#eef2ff;border-color:#818cf8}


/* Schedule, Google Meet and top profile/progress widget */
header{justify-content:space-between;gap:20px}
.top-links{align-items:center;margin-left:auto}
.top-profile-widget{display:grid!important;grid-template-columns:34px minmax(120px,190px);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#111827!important}
.top-profile-widget:hover{text-decoration:none;background:#f8fafc}
.top-avatar{grid-row:1/3;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e5e7eb;display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.top-avatar.placeholder{background:var(--primary)}
.top-profile-text{display:block;min-width:0}
.top-profile-text strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-profile-text em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:1px}
.top-progress{grid-column:2;height:5px;background:#e5e7eb;border-radius:999px;overflow:hidden;width:100%}
.top-progress span{display:block;height:100%;background:var(--primary)}
.code-sample{white-space:pre-wrap;background:#0b1020;color:#e5e7eb;border-radius:14px;padding:16px;overflow:auto}
.doc-card h2{font-size:17px;line-height:1.35}
@media(max-width:900px){.top-profile-widget{grid-template-columns:30px 1fr}.top-links{flex-wrap:wrap}}


/* CSV/ICS schedule upload tool */
.upload-drop-zone{border:1.5px dashed var(--line);border-radius:18px;padding:22px;background:#f8fafc;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.upload-drop-zone input[type=file]{position:absolute;left:-9999px}
.drop-label{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;width:100%;min-height:130px;border-radius:14px;background:#fff;border:1px solid var(--line);cursor:pointer;text-align:center;padding:18px}
.drop-label strong{font-size:17px;color:#111827}.drop-label span{color:var(--muted)}


/* Course schedule buttons and client-ready disabled states */
.course-card{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.course-card-main{color:inherit;text-decoration:none;display:block}
.course-card-main:hover{text-decoration:none}
.course-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.btn.disabled,.disabled{background:#e5e7eb!important;color:#6b7280!important;border-color:#d1d5db!important;cursor:not-allowed;box-shadow:none;pointer-events:none}
.disabled-card{opacity:.65;background:#f3f4f6!important;cursor:not-allowed}
.schedule-button{white-space:nowrap}
code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:1px 5px;font-size:.92em}

/* Admin create/edit programme and course forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start;margin-top:12px}
.form-grid .span-2{grid-column:1/-1}
.compact-form{margin-top:14px;background:#f9fafb;border:1px solid var(--line);border-radius:14px;padding:16px}
.table-box{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:16px;scrollbar-width:thin}
.table-box table{margin:0;border:0;border-radius:0;min-width:920px}
details summary{cursor:pointer;font-weight:700;color:#111827;margin-bottom:10px}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.table-box table{min-width:760px}}

/* ---------------------------------------------------------
   Grouped Admin Tools navigation
   --------------------------------------------------------- */
.admin-tools{
  display:grid;
  gap:8px;
}

.admin-tools > summary{
  margin-bottom:2px;
}

.admin-nav-section{
  display:grid;
  gap:3px;
  padding:8px 0 4px;
  border-top:1px solid #edf2f7;
}

.admin-nav-section:first-of-type{
  border-top:0;
  padding-top:4px;
}

.admin-nav-heading{
  padding:4px 10px 2px;
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.admin-tools .admin-nav-section a{
  padding:8px 10px;
  font-size:13px;
}

/* Dashboard module schedule cards/tables */
.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dashboard-schedule-box {
  overflow: hidden;
}
.module-schedule-table th,
.module-schedule-table td {
  vertical-align: top;
}
.compact-progress {
  min-width: 120px;
  max-width: 180px;
  height: 8px;
  margin-bottom: 0.3rem;
}
@media (max-width: 760px) {
  .section-heading-row { flex-direction: column; }
  .module-schedule-table { min-width: 760px; }
}

/* Multi-session schedule display */
.session-list{display:grid;gap:8px;min-width:360px}
.session-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;max-width:100%}
.session-row.active-session{border-color:#22c55e;background:#f0fdf4}
.session-row>div:first-child{min-width:0;overflow-wrap:anywhere}
.tag.success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
@media(max-width:760px){.session-row{flex-direction:column}.session-list{min-width:520px}}

/* Multi-session display inside course/module cards */
.module-card-with-sessions{
  align-items:stretch;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 0.95fr);
  gap:18px;
}
.module-main-content{min-width:0;}
.module-actions-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.module-session-panel{
  min-width:0;
  max-width:100%;
  border-left:1px solid var(--line);
  padding-left:18px;
  overflow:hidden;
}
.session-panel-title{font-weight:800;margin-bottom:8px;color:#111827;}
.module-session-list,.compact-session-list{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
}
.inactive-session{opacity:.82;background:#f9fafb;}
.muted-tag{background:#f3f4f6;color:#6b7280;}
.course-sessions-preview{display:block;margin-top:14px;}
.course-sessions-preview .session-row{margin-bottom:8px;}
.course-sessions-preview .session-list{min-width:0;}
@media(max-width:900px){
  .module-card-with-sessions{grid-template-columns:1fr;}
  .module-session-panel{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;}
}

/* Global user messages and processing overlay */
.flash-stack{display:grid;gap:10px;margin:0 0 18px;max-width:100%;}
.flash{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid #dbeafe;background:#eff6ff;color:#1e3a8a;box-shadow:0 4px 12px rgba(15,23,42,.04);overflow-wrap:anywhere;}
.flash-success{background:#ecfdf5;border-color:#bbf7d0;color:#166534;}
.flash-warning{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.flash-error{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.flash-close{border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;opacity:.72;}
.flash-close:hover{opacity:1;}
.selected-file-message{margin-top:10px;padding:8px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155;font-size:13px;font-weight:700;overflow-wrap:anywhere;}
.loading-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 35%, rgba(99,102,241,.18), rgba(15,23,42,.48));backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;}
.loading-overlay.show{display:flex;}
.loading-card{width:min(420px,100%);background:rgba(255,255,255,.96);border-radius:28px;padding:30px 28px;text-align:center;box-shadow:0 28px 90px rgba(15,23,42,.32);border:1px solid rgba(226,232,240,.9);display:grid;gap:12px;justify-items:center;}
.loading-card span{color:#64748b;font-size:14px;}
.loading-spinner{width:42px;height:42px;border:4px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}


/* Admin schedule creation forms */
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}
.grid-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.grid-form input,
.grid-form select,
.grid-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.grid-form .wide-field {
  grid-column: 1 / -1;
}
.form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
}

/* PCiDS capstone submission file upload blocks */
.compact-upload-zone{
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  background:#f8fafc;
}
.clean-list{padding-left:18px; margin:8px 0;}
.clean-list li{margin:6px 0;}

/* SpeedGrader embedded previews and instructor matrix usability */
.embedded-viewer { width: 100%; height: 620px; border: 1px solid var(--border, #d1d5db); border-radius: 16px; overflow: hidden; background: #f9fafb; }
.embedded-viewer.small { height: 420px; }
.embedded-viewer iframe { width: 100%; height: 100%; border: 0; display: block; }
.embedded-video { width: 100%; border: 1px solid var(--border, #d1d5db); border-radius: 16px; overflow: hidden; background: #111827; }
.embedded-video video { width: 100%; max-height: 520px; display: block; }
.columns.wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); align-items: start; }
.rubric-table input { min-width: 90px; }
.subsection-card { border: 1px solid var(--border, #e5e7eb); border-radius: 18px; padding: 1rem; margin: 1rem 0; background: #fff; }
.section-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.checkbox-cell { display: flex; gap: .5rem; align-items: center; justify-content: center; min-width: 150px; }
.checkbox-cell span { font-size: .8rem; color: #4b5563; }
.sticky-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-top: 1px solid #e5e7eb; padding-top: 1rem; }
@media (max-width: 980px) { .columns.wide-left { grid-template-columns: 1fr; } .embedded-viewer { height: 460px; } }

/* SpeedGrader capstone bundle */
.summary-strip{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.75rem 0 1rem 0}
.summary-strip span{background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;padding:.45rem .75rem;font-size:.9rem}
.data-table tr.highlight-row td{background:#eef6ff}

/* Official PCiDS rubric controls in SpeedGrader */
.rubric-table select,
.rubric-table textarea,
.rubric-table input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.rubric-table textarea {
  min-width: 180px;
  min-height: 70px;
  resize: vertical;
}
.rubric-table td,
.rubric-table th {
  vertical-align: top;
}

/* SpeedGrader layout update: keep document/video viewer full width, then place rubric below it. */
.speedgrader-stack {
  display: block;
}
.speedgrader-stack > .section-box,
.speedgrader-stack > .form-card {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}
.ai-check-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 1rem;
  margin-top: 1rem;
  background: #fafafa;
}
.ai-check-card form { margin: .5rem 0; }



/* ---------------------------------------------------------
   Final minimalist client-ready visual refresh
   --------------------------------------------------------- */
:root{
  --bg-soft:#f7f9fc;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --shadow-soft:0 16px 40px rgba(15,23,42,.06);
  --shadow-card:0 10px 28px rgba(15,23,42,.045);
}
*{box-sizing:border-box;}
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.08), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(14,165,233,.07), transparent 24%),
    var(--bg-soft);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.sidebar{
  width:282px;
  padding:20px 18px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-right:1px solid rgba(226,232,240,.9);
  box-shadow:8px 0 30px rgba(15,23,42,.035);
}
.brand{
  padding:12px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff,#f8fafc);
  border:1px solid #eef2f7;
  margin-bottom:16px;
}
.mark,.logo-img{
  border-radius:16px;
  box-shadow:0 8px 22px rgba(15,23,42,.12);
}
.sidebar-scroll{
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.nav-heading,.admin-nav-heading{
  color:#94a3b8;
  letter-spacing:.11em;
}
.side-nav a,.nav-details summary{
  color:#334155;
  border-radius:14px;
  padding:10px 12px;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.side-nav a:hover,.nav-details summary:hover{
  background:#eef2ff;
  color:#1e3a8a;
  transform:translateX(2px);
  text-decoration:none;
}
.nav-icon{stroke-width:1.9;}
.profile{
  margin-top:14px;
  padding:14px;
  border:1px solid #eef2f7;
  border-radius:18px;
  background:#f8fafc;
}
main{margin-left:282px;width:calc(100% - 282px);}
header{
  height:76px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(226,232,240,.9);
  padding:0 40px;
  position:sticky;
  top:0;
  z-index:20;
}
.top-links{margin-left:auto;align-items:center;gap:10px;}
.top-links>a:not(.top-profile-widget){
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  color:#475569;
}
.top-links>a:not(.top-profile-widget):hover{background:#f1f5f9;text-decoration:none;}
.top-profile-widget{
  display:grid!important;
  grid-template-columns:36px minmax(120px,1fr);
  grid-template-rows:auto auto;
  gap:3px 10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
  text-decoration:none!important;
  min-width:250px;
}
.top-avatar{grid-row:1/3;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;}
.top-profile-text{display:flex;flex-direction:column;min-width:0;}
.top-profile-text strong{font-size:13px;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-profile-text em{font-size:11px;color:#64748b;font-style:normal;}
.top-progress{height:5px;background:#e2e8f0;border-radius:999px;overflow:hidden;}
.top-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;}
.content{max-width:1360px;padding:42px;}
.hero,.panel,.form-card,.card,.module-card,.activity-row,.section-box,.subsection-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.9);
  border-radius:24px;
  box-shadow:var(--shadow-card);
}
.hero{
  background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);
  box-shadow:var(--shadow-soft);
}
.hero h1,h1{color:#0f172a;letter-spacing:-.045em;}
.lead,.muted,.small-muted{color:#64748b;}
.card:hover,.link-card:hover,.module-card:hover,.activity-row:hover,.tool-card:hover{
  border-color:#c7d2fe;
  box-shadow:0 18px 44px rgba(30,64,175,.08);
  transform:translateY(-1px);
  text-decoration:none;
}
button,.btn{
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),#1d4ed8);
  box-shadow:0 9px 20px rgba(37,99,235,.16);
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(37,99,235,.2);text-decoration:none;}
.btn.secondary{background:#fff;color:#0f172a;border:1px solid #dbe3ee;box-shadow:0 6px 16px rgba(15,23,42,.04);}
.btn.disabled,.btn:disabled,button:disabled{background:#e2e8f0!important;color:#64748b!important;box-shadow:none;cursor:not-allowed;transform:none;}
input,textarea,select{
  border-radius:14px;
  border-color:#cbd5e1;
  background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.tag{border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:999px;}
.notice,.hint,.selected-file-message{border-radius:16px;background:#f8fafc;}
.progress,.compact-progress{background:#e2e8f0;border-radius:999px;}
.progress span,.compact-progress span{background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;}
.table-wrap,.table-box,.panel,.form-card,.section-box,.subsection-card,.dashboard-schedule-box{
  max-width:100%;
  overflow-x:auto;
}
table{border-radius:18px;overflow:hidden;border-color:#e2e8f0;box-shadow:0 8px 24px rgba(15,23,42,.035);}
th{background:#f8fafc;color:#475569;letter-spacing:.05em;}
tr:hover td{background:#fbfdff;}
.session-row{border-radius:16px;background:#fff;border-color:#e2e8f0;}
.session-row.active-session{background:linear-gradient(135deg,#ecfdf5,#f7fee7);border-color:#86efac;box-shadow:0 10px 26px rgba(22,163,74,.08);}
.flash{border-radius:18px;}
.loading-card{border-radius:24px;}
.empty-state{
  padding:28px;
  border:1px dashed #cbd5e1;
  border-radius:20px;
  background:#f8fafc;
  color:#64748b;
  text-align:center;
}
@media(max-width:900px){
  .sidebar{position:relative;width:100%;}
  main{margin-left:0;width:100%;}
  header{padding:0 18px;position:relative;height:auto;min-height:72px;flex-wrap:wrap;gap:10px;padding-top:14px;padding-bottom:14px;}
  .top-profile-widget{min-width:0;width:100%;}
  .content{padding:22px;}
}

/* Activity Builder: consistent one-design authoring UI across programmes */
.activity-builder-layout{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:22px;align-items:start;margin-top:18px}
.builder-panel{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.06);position:sticky;top:96px}
.builder-panel h2{margin:0 0 8px;font-size:1.05rem}.template-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}.template-chip{border:1px solid #d8dee9;background:#f8fafc;border-radius:14px;padding:11px 12px;text-align:left;font-weight:700;cursor:pointer}.template-chip:hover,.template-chip.active{background:#eef4ff;border-color:var(--accent,#1f4fd8);color:var(--accent,#1f4fd8)}
.builder-form-card{padding:24px}.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.toggle-grid label{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px}.right{justify-content:flex-end}.small{font-size:.9rem}.small-muted{font-size:.85rem;color:#64748b}
@media (max-width: 900px){.activity-builder-layout{grid-template-columns:1fr}.builder-panel{position:relative;top:auto}.form-grid.two,.toggle-grid{grid-template-columns:1fr}}

/* Secure logout form: logout is POST + CSRF protected while visually matching nav links. */
.logout-form{margin:0;padding:0;}
.logout-link{
  display:flex;
  align-items:center;
  gap:.65rem;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  padding:10px 12px;
  border-radius:14px;
}
.logout-link:hover{background:rgba(15,23,42,.06);}
.logout-link svg{width:18px;height:18px;flex:0 0 auto;}
.success{background:#ecfdf5;border:1px solid #86efac;color:#166534;border-radius:14px;padding:10px 12px;}

/* Certification exam and assignment upload polish */
.exam-start-card,
.exam-question-card,
.exam-box {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
  background: #fff;
}
.exam-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.exam-question-card .choice {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.exam-result-only {
  white-space: pre-wrap;
  font-size: 1.05rem;
}

/* Certification exam and enhanced activity builder patch */
.exam-box.no-copy-zone,.exam-box.no-copy-zone *{user-select:none;-webkit-user-select:none;-ms-user-select:none}
.exam-sticky-bar{position:sticky;top:10px;z-index:20;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#ffffff;border:1px solid #d8dee9;border-radius:16px;padding:12px 14px;margin-bottom:14px;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.exam-question-card.one-at-a-time{border:1px solid #d8dee9;border-radius:18px;padding:22px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.question-nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.divider-dot{color:#94a3b8}.inline-start-form{display:grid;gap:10px;max-width:520px}.inline-start-form input{max-width:280px}.template-section-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin:16px 0 8px}.plotly-box{min-height:440px;border:1px solid #d8dee9;border-radius:18px;background:#fff}.interactive-visual-card{border:1px solid #d8dee9;border-radius:20px;padding:18px;background:#f8fafc;margin-bottom:16px}.activity-builder-layout{grid-template-columns:minmax(280px,360px) 1fr}.builder-panel{max-height:none}.template-chip{display:block;width:100%}

/* Role-specific guidance blocks */
.role-help{border-radius:16px;padding:14px 16px;margin:14px 0;border:1px solid rgba(15,23,42,.12);background:#f8fafc;line-height:1.55}
.learner-help{background:#f8fafc}
.instructor-help{background:#f8fafc}
.admin-help{background:#f8fafc}
.guide-list{background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:18px;padding:22px 28px;line-height:1.65}
.stacked-actions{margin:12px 0}

/* 3D Graph Theory MCQ activity */
.graph-data-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
}
.mini-table-wrap { overflow-x: auto; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mini-table th, .mini-table td { padding: 0.45rem 0.55rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); text-align: left; }
.mcq-card { margin-top: 1rem; padding: 1rem; border-radius: 16px; background: #ffffff; border: 1px solid rgba(37, 99, 235, 0.18); }
.graph-mcq-options .choice { display: block; margin: 0.5rem 0; padding: 0.65rem 0.75rem; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 12px; background: rgba(255,255,255,0.9); }
.graph-mcq-options .choice:hover { border-color: rgba(37, 99, 235, 0.45); }

/* ---------------------------------------------------------
   Production fix: large enrolment matrices
   ---------------------------------------------------------
   The learner-course/programme matrix can have many columns. Keep the matrix
   inside its own scroll container so the admin page does not truncate columns.
*/
.enrolment-matrix-panel{
  max-width:100%;
  overflow:hidden;
}
.enrolment-matrix-panel .matrix-scroll{
  width:100%;
  max-width:calc(100vw - 340px);
  max-height:68vh;
  overflow-x:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}
.enrolment-matrix-panel .matrix-scroll::-webkit-scrollbar{
  height:12px;
  width:12px;
}
.enrolment-matrix-panel .matrix-scroll::-webkit-scrollbar-thumb{
  background:#94a3b8;
  border-radius:999px;
  border:3px solid #f8fafc;
}
.enrolment-matrix-panel .matrix-scroll::-webkit-scrollbar-track{
  background:#f1f5f9;
  border-radius:999px;
}
.enrolment-matrix-panel .enrolment-matrix{
  width:max-content;
  min-width:100%;
  table-layout:auto;
  white-space:nowrap;
}
.enrolment-matrix-panel .enrolment-matrix th:not(.student-col),
.enrolment-matrix-panel .enrolment-matrix td:not(.student-col){
  min-width:128px;
}
.enrolment-matrix-panel .enrolment-matrix .student-col{
  min-width:320px;
  max-width:420px;
  white-space:normal;
}
.enrolment-matrix-panel .matrix-scroll-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 -4px;
  color:#64748b;
  font-size:.88rem;
  font-weight:700;
}
@media(max-width:900px){
  .enrolment-matrix-panel .matrix-scroll{
    max-width:calc(100vw - 44px);
    max-height:70vh;
  }
}


/* Local 3D renderer and material section organisation */
.local-3d-wrap { border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(180deg,#ffffff,#f8fafc); padding: 10px; }
.local-3d-canvas { width: 100%; height: 460px; display: block; cursor: grab; border-radius: 14px; background: radial-gradient(circle at 40% 30%, #ffffff 0%, #f8fafc 55%, #eef2ff 100%); }
.local-3d-canvas:active { cursor: grabbing; }
.local-3d-hint { padding: 6px 8px 2px; }
.material-section-row { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 12px; align-items: end; margin: 8px 0 12px; }
.material-section-row input { width: 100%; }
.grouped-material-list { display: flex; flex-direction: column; gap: 10px; }
.material-section-heading { margin-top: 14px; padding: 10px 14px; border-left: 5px solid #2563eb; background: #eff6ff; border-radius: 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.material-section-heading h3 { margin: 0; font-size: 1rem; color: #1e3a8a; }
.material-section-form { display: inline-flex; gap: 6px; align-items: center; }
.material-section-form input { min-width: 180px; max-width: 260px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 10px; }
@media (max-width: 800px) { .material-section-row { grid-template-columns: 1fr; } .material-actions { align-items: stretch; } .material-section-form { width: 100%; } .material-section-form input { flex: 1; min-width: 0; } }


/* -------------------------------------------------------------------------
   Interactive template readability fix
   Production note:
   Some template cards/buttons inherited white text on grey/gradient panels.
   Keep template selection simple and readable: white cards, black text.
------------------------------------------------------------------------- */
.activity-template-grid,
.interactive-template-grid,
.template-grid,
.preset-grid {
  color: #111827;
}

.activity-template-grid .card,
.activity-template-grid .template-card,
.activity-template-grid label,
.interactive-template-grid .card,
.interactive-template-grid .template-card,
.interactive-template-grid label,
.template-grid .card,
.template-grid .template-card,
.template-grid label,
.preset-grid .card,
.preset-grid .template-card,
.preset-grid label,
.template-option,
.activity-template-option,
.interactive-template-option,
.preset-option {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

.activity-template-grid .card *,
.activity-template-grid .template-card *,
.activity-template-grid label *,
.interactive-template-grid .card *,
.interactive-template-grid .template-card *,
.interactive-template-grid label *,
.template-grid .card *,
.template-grid .template-card *,
.template-grid label *,
.preset-grid .card *,
.preset-grid .template-card *,
.preset-grid label *,
.template-option *,
.activity-template-option *,
.interactive-template-option *,
.preset-option * {
  color: #111827 !important;
}

.activity-template-grid .muted,
.interactive-template-grid .muted,
.template-grid .muted,
.preset-grid .muted,
.template-option .muted,
.activity-template-option .muted,
.interactive-template-option .muted,
.preset-option .muted {
  color: #4b5563 !important;
}

.activity-template-grid .card:hover,
.activity-template-grid .template-card:hover,
.activity-template-grid label:hover,
.interactive-template-grid .card:hover,
.interactive-template-grid .template-card:hover,
.interactive-template-grid label:hover,
.template-grid .card:hover,
.template-grid .template-card:hover,
.template-grid label:hover,
.preset-grid .card:hover,
.preset-grid .template-card:hover,
.preset-grid label:hover,
.template-option:hover,
.activity-template-option:hover,
.interactive-template-option:hover,
.preset-option:hover {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #2563eb !important;
}

.activity-template-grid input:checked + .card,
.activity-template-grid input:checked + .template-card,
.interactive-template-grid input:checked + .card,
.interactive-template-grid input:checked + .template-card,
.template-grid input:checked + .card,
.template-grid input:checked + .template-card,
.preset-grid input:checked + .card,
.preset-grid input:checked + .template-card {
  background: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #2563eb !important;
}

/* Select/dropdown controls for interactive templates */
select,
option,
.form-select,
.activity-type-select,
.template-select,
.interactive-template-select {
  background-color: #ffffff !important;
  color: #111827 !important;
}

select option {
  background-color: #ffffff !important;
  color: #111827 !important;
}


/* -------------------------------------------------------------------------
   Wide Configuration JSON + Graphical Config Editor
------------------------------------------------------------------------- */
.activity-builder-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}
.builder-form-card {
  width: 100%;
  max-width: none !important;
}
.config-json-row {
  display: block;
  width: 100%;
}
.config-json-row textarea.codebox,
textarea#configJson.codebox {
  width: 100% !important;
  min-height: 460px;
  resize: vertical;
  font-size: 0.95rem;
  line-height: 1.45;
  tab-size: 2;
}
.config-editor-panel {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
}
.config-editor-panel * {
  color: #111827;
}
.config-editor-panel h2,
.config-editor-panel h3 {
  margin-top: 0;
}
.graph-editor-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(360px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.graph-editor-canvas-wrap {
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}
#graphEditorCanvas,
.graph-editor-canvas {
  display: block;
  width: 100%;
  min-height: 420px;
  background: #ffffff;
  cursor: grab;
}
#graphEditorCanvas:active,
.graph-editor-canvas:active {
  cursor: grabbing;
}
.graph-editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.graph-editor-controls .btn,
.graph-editor-controls button {
  white-space: nowrap;
}
.graph-editor-table-wrap {
  overflow: auto;
  max-height: 360px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-bottom: 12px;
}
.graph-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: #ffffff;
}
.graph-editor-table th,
.graph-editor-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 7px;
  vertical-align: middle;
}
.graph-editor-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  text-align: left;
}
.graph-editor-table input,
.graph-editor-table select {
  width: 100%;
  min-width: 84px;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px;
}
.graph-editor-table input.node-id-input {
  min-width: 140px;
}
.graph-editor-table .small-input {
  min-width: 64px;
}
.graph-editor-help {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
  color: #374151;
}
.graph-editor-help strong {
  color: #111827;
}
.graph-editor-hidden {
  display: none !important;
}
@media (max-width: 1100px) {
  .activity-builder-layout {
    grid-template-columns: 1fr !important;
  }
  .graph-editor-layout {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------------------
   FINAL Interactive Template Visibility Fix
   Issue observed in production: inactive template options appeared as white
   text on pale grey background. This rule-set overrides the sidebar/chip
   styles directly so every option remains readable.
------------------------------------------------------------------------- */
.activity-template-sidebar,
.card.template-card.activity-template-sidebar,
.template-card,
.activity-template-sidebar .section-label,
.activity-template-sidebar h2,
.activity-template-sidebar h3,
.activity-template-sidebar p,
.activity-template-sidebar span,
.activity-template-sidebar strong {
  color: #111827 !important;
}

.activity-template-sidebar .muted,
.activity-template-sidebar .small-muted,
.activity-template-sidebar p {
  color: #475569 !important;
}

.activity-template-sidebar .template-chip,
.activity-template-sidebar .readable-template-chip,
.template-chip,
.readable-template-chip,
button.template-chip,
button.readable-template-chip,
a.template-chip,
a.readable-template-chip {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.activity-template-sidebar .template-chip *,
.activity-template-sidebar .readable-template-chip *,
.template-chip *,
.readable-template-chip * {
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.activity-template-sidebar .template-chip:hover,
.activity-template-sidebar .readable-template-chip:hover,
.template-chip:hover,
.readable-template-chip:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18) !important;
}

.activity-template-sidebar .template-chip.active,
.activity-template-sidebar .template-chip.selected,
.activity-template-sidebar .readable-template-chip.active,
.activity-template-sidebar .readable-template-chip.selected,
.template-chip.active,
.template-chip.selected,
.readable-template-chip.active,
.readable-template-chip.selected {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1d4ed8 !important;
  border: 2px solid #2563eb !important;
  opacity: 1 !important;
}

/* Override disabled-looking styles that were inherited by inactive options. */
.activity-template-sidebar .template-chip:not(.active),
.activity-template-sidebar .readable-template-chip:not(.active),
.template-chip:not(.active),
.readable-template-chip:not(.active) {
  color: #111827 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* If the chips are implemented as inputs + labels, force labels readable too. */
.activity-template-sidebar input + label,
.template-card input + label,
.activity-template-sidebar label.template-chip,
.template-card label.template-chip {
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  border: 1px solid #cbd5e1 !important;
}

.activity-template-sidebar input + label *,
.template-card input + label * {
  color: #111827 !important;
  opacity: 1 !important;
}

/* Defensive override for any light/disabled class applied to template options. */
.activity-template-sidebar .disabled,
.activity-template-sidebar [disabled],
.activity-template-sidebar .is-disabled,
.activity-template-sidebar .inactive {
  opacity: 1 !important;
  color: #111827 !important;
  background: #ffffff !important;
  pointer-events: auto !important;
}

/* Payment status profile/admin field */
.profile-badges span {
  white-space: nowrap;
}
.payment-status-pill,
.info-list strong.payment-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
}

/* Instructor/auditor payment balance */
.negative-balance {
  color: #b91c1c !important;
}
.payment-balance-note {
  color: #64748b;
  font-size: 0.88rem;
}

/* Super-admin role and permission matrix */
.role-matrix-card { overflow: hidden; }
.role-matrix-scroll { max-height: 72vh; overflow: auto; border: 1px solid #d1d5db; border-radius: 18px; background: #ffffff; }
.role-permission-matrix { border-collapse: separate; border-spacing: 0; min-width: 2200px; width: max-content; background: #ffffff; }
.role-permission-matrix th, .role-permission-matrix td { border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 10px; vertical-align: top; background: #ffffff; color: #111827; }
.role-permission-matrix thead th { position: sticky; top: 0; z-index: 5; background: #f8fafc; min-width: 150px; max-width: 220px; }
.role-permission-matrix .sticky-role-col { position: sticky; left: 0; z-index: 6; min-width: 260px; background: #ffffff; box-shadow: 2px 0 0 rgba(15, 23, 42, 0.05); }
.role-permission-matrix thead .sticky-role-col { z-index: 8; background: #f8fafc; }
.role-meta input, .role-meta textarea { width: 100%; margin-bottom: 6px; background: #ffffff !important; color: #111827 !important; }
.perm-category { display: block; font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.perm-name { display: block; font-weight: 700; color: #111827; margin: 4px 0; }
.perm-cell { min-width: 150px; }
.matrix-check { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: start; font-size: 0.85rem; color: #111827; }
.matrix-check input { margin-top: 2px; }
.pill.good { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Role Permissions nav icon and matrix visibility fix */
.side-nav a[href="/admin/security/roles"] .nav-icon {
  stroke: currentColor;
}
.role-permission-matrix input,
.role-permission-matrix textarea {
  background: #ffffff !important;
  color: #111827 !important;
}
.role-permission-matrix code {
  color: #1e3a8a;
  background: #eff6ff;
  border-radius: 6px;
  padding: 2px 5px;
}

/* Cybersecurity final assessment option text centering */
.exam-question-card .choice {
  text-align: center !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #111827;
}
.exam-question-card .choice input[type="radio"] {
  flex: 0 0 auto;
}

/* Role matrix export/import toolbar */
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.role-permission-matrix th code { white-space: nowrap; }


/* Professional processing overlay */
.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(5px);
}
.processing-overlay[hidden] {
  display: none !important;
}
.processing-card {
  width: min(560px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
  border-radius: 24px;
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(203, 213, 225, 0.95);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}
.processing-spinner {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 5px solid #dbeafe;
  border-top-color: #2563eb;
  animation: processingSpin 0.85s linear infinite;
}
.processing-copy {
  min-width: 0;
}
.processing-copy strong {
  display: block;
  color: #111827;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.processing-copy p {
  margin: 6px 0 0;
  color: #475569;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
@keyframes processingSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 560px) {
  .processing-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}

.pill.inactive {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

/* Collapsible grouped permission matrix */
.matrix-category-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 16px;
}
.matrix-category-toolbar .small {
  padding: 7px 10px;
  font-size: 0.86rem;
}
.matrix-category-toolbar .count,
.permission-category-header .count {
  color: #64748b;
  font-size: 0.8rem;
}
.grouped-permission-matrix .category-header-row th {
  top: 0;
}
.grouped-permission-matrix .permission-header-row th {
  top: 54px;
}
.permission-category-header {
  text-align: center !important;
  background: #e0f2fe !important;
  border-bottom: 2px solid #bae6fd !important;
}
.category-collapse-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
  padding: 6px;
  white-space: normal;
}
.category-collapse-btn:hover {
  color: #1d4ed8;
}
.permission-collapsed {
  display: none !important;
}
.permission-category-header.is-collapsed-category {
  min-width: 130px !important;
  max-width: 160px !important;
}
.permission-category-header.is-collapsed-category::after {
  content: "collapsed";
  display: block;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}
.permission-category-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.permission-category-summary .mini-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
}
.permission-category-summary .mini-card strong {
  display: block;
  color: #0f172a;
}
.permission-category-summary .mini-card span {
  color: #64748b;
}

/* Assessment release and permission collapse bugfix */
.permission-collapsed { display: none !important; }
.permission-category-header.is-collapsed-category { background: #f1f5f9 !important; }


/* -------------------------------------------------------------------------
   Permission matrix full horizontal scroll fix
   Ensures the role-permission matrix can scroll all the way to the final
   permission column instead of being clipped by the card/container layout.
------------------------------------------------------------------------- */
.role-matrix-card {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.role-matrix-scroll,
.permission-matrix-scroll-outer {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 18px !important;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  background: #ffffff;
}

.permission-matrix-scroll-inner {
  display: inline-block !important;
  min-width: max-content !important;
  width: max-content !important;
  padding-right: 48px !important; /* lets final column clear the container edge */
}

.role-permission-matrix,
.grouped-permission-matrix {
  table-layout: fixed !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-right: 48px !important;
}

.role-permission-matrix th,
.role-permission-matrix td,
.grouped-permission-matrix th,
.grouped-permission-matrix td {
  min-width: 180px !important;
  max-width: 220px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.role-permission-matrix .sticky-role-col,
.grouped-permission-matrix .sticky-role-col {
  min-width: 280px !important;
  max-width: 320px !important;
  left: 0 !important;
}

.role-permission-matrix th:nth-child(2),
.role-permission-matrix td:nth-child(2),
.grouped-permission-matrix th:nth-child(2),
.grouped-permission-matrix td:nth-child(2) {
  min-width: 130px !important;
  max-width: 150px !important;
}

/* Make sure collapsed permission columns truly disappear but the remaining
   columns still calculate a full scrollable width. */
.permission-collapsed {
  display: none !important;
}

/* Scroll hint stays visible and explains why the matrix is wider than screen. */
.permission-scroll-hint {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.92rem;
}

/* On smaller screens, use nearly full viewport width for the matrix area. */
@media (max-width: 1200px) {
  .role-matrix-card {
    margin-left: calc(50% - 50vw + 12px);
    margin-right: calc(50% - 50vw + 12px);
    width: calc(100vw - 24px) !important;
  }
}


/* -------------------------------------------------------------------------
   FINAL robust granular permission matrix scrolling and collapse behaviour
------------------------------------------------------------------------- */
.role-matrix-card {
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
}

.permission-matrix-top-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  height: 18px;
  margin: 8px 0 6px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #f8fafc;
  -webkit-overflow-scrolling: touch;
}

.permission-matrix-top-scroll-inner {
  height: 1px;
  width: 3200px;
}

.role-matrix-scroll.permission-matrix-scroll-outer {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 72vh !important;
  padding-bottom: 28px !important;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

.permission-matrix-scroll-inner {
  display: inline-block !important;
  width: max-content !important;
  min-width: max-content !important;
  padding-right: 96px !important;
}

#permissionMatrixTable.role-permission-matrix,
#permissionMatrixTable.grouped-permission-matrix {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-right: 96px !important;
}

#permissionMatrixTable th,
#permissionMatrixTable td {
  min-width: 185px !important;
  max-width: 220px !important;
  width: 200px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  vertical-align: top;
}

#permissionMatrixTable .sticky-role-col {
  min-width: 300px !important;
  max-width: 340px !important;
  width: 320px !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 8;
  background: #ffffff !important;
}

#permissionMatrixTable thead .sticky-role-col {
  z-index: 12;
  background: #f8fafc !important;
}

#permissionMatrixTable th:nth-child(2),
#permissionMatrixTable td:nth-child(2) {
  min-width: 135px !important;
  max-width: 160px !important;
  width: 145px !important;
}

#permissionMatrixTable thead th {
  position: sticky !important;
  top: 0;
  z-index: 7;
}

#permissionMatrixTable .permission-header-row th {
  top: 58px !important;
  z-index: 6;
}

.permission-category-header {
  background: #e0f2fe !important;
  text-align: center !important;
  border-bottom: 2px solid #bae6fd !important;
}

.category-collapse-btn {
  white-space: normal !important;
  line-height: 1.25;
}

.matrix-category-collapsed {
  display: none !important;
}

.permission-scroll-hint {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.45;
}

/* Allow the matrix to use full viewport width on narrower screens. */
@media (max-width: 1400px) {
  .role-matrix-card {
    margin-left: calc(50% - 50vw + 12px);
    margin-right: calc(50% - 50vw + 12px);
    width: calc(100vw - 24px) !important;
  }
}


/* -------------------------------------------------------------------------
   Reliable permission matrix category accordion
   This replaces fragile table-column collapse with HTML details/summary groups.
------------------------------------------------------------------------- */
.permission-accordion-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.permission-group {
  border: 1px solid #d1d5db;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
}

.permission-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: #eff6ff;
  color: #0f172a;
  font-weight: 800;
  border-bottom: 1px solid #bfdbfe;
}

.permission-group > summary::-webkit-details-marker {
  display: none;
}

.permission-group > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 900;
  flex: 0 0 auto;
}

.permission-group[open] > summary::before {
  content: "−";
}

.permission-group > summary span:first-child {
  display: inline-flex;
  align-items: center;
}

.permission-group > summary .count {
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}

.permission-group-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 58vh;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}

.permission-category-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #ffffff;
  margin-right: 80px;
}

.permission-category-matrix th,
.permission-category-matrix td {
  min-width: 190px;
  max-width: 230px;
  width: 210px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #111827;
  background: #ffffff;
}

.permission-category-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8fafc;
}

.permission-category-matrix .sticky-role-col {
  position: sticky;
  left: 0;
  z-index: 6;
  min-width: 260px;
  max-width: 300px;
  width: 280px;
  background: #ffffff;
  box-shadow: 2px 0 0 rgba(15, 23, 42, 0.06);
}

.permission-category-matrix thead .sticky-role-col {
  z-index: 8;
  background: #f8fafc;
}

.permission-category-matrix .perm-name {
  display: block;
  color: #111827;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 6px;
}

.permission-category-matrix code,
.role-status-table code {
  color: #1e3a8a;
  background: #eff6ff;
  border-radius: 6px;
  padding: 2px 5px;
}

.matrix-check.compact {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.role-status-card {
  margin-top: 12px;
}

.role-status-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

.role-status-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #ffffff;
}

.role-status-table th,
.role-status-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px;
  vertical-align: top;
}

.role-status-table input,
.role-status-table textarea {
  width: 100%;
  background: #ffffff !important;
  color: #111827 !important;
}

.matrix-category-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 16px;
}

.matrix-category-toolbar .small {
  padding: 7px 10px;
  font-size: 0.86rem;
}

.permission-scroll-hint {
  margin: 10px 12px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.45;
}

/* Sidebar navigation selected-state and scroll preservation support */
.side-nav,
.sidebar,
aside nav,
nav.app-nav,
.app-sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side-nav a.active,
.side-nav a.is-active,
.side-nav a.selected,
.sidebar a.active,
.sidebar a.is-active,
.sidebar a.selected,
aside nav a.active,
aside nav a.is-active,
aside nav a.selected,
nav.app-nav a.active,
nav.app-nav a.is-active,
nav.app-nav a.selected,
.app-sidebar a.active,
.app-sidebar a.is-active,
.app-sidebar a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

.side-nav a.active svg,
.side-nav a.is-active svg,
.side-nav a.selected svg,
.sidebar a.active svg,
.sidebar a.is-active svg,
.sidebar a.selected svg,
aside nav a.active svg,
aside nav a.is-active svg,
aside nav a.selected svg,
nav.app-nav a.active svg,
nav.app-nav a.is-active svg,
nav.app-nav a.selected svg,
.app-sidebar a.active svg,
.app-sidebar a.is-active svg,
.app-sidebar a.selected svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}


/* Sidebar mouse scrolling and selected-item stability */
.side-nav,
.sidebar,
aside nav,
nav.app-nav,
.app-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scroll-behavior: auto !important;
}

/* Keep active item visible by styling only; do not rely on scrollIntoView. */
.side-nav a.active,
.side-nav a.is-active,
.side-nav a.selected,
.sidebar a.active,
.sidebar a.is-active,
.sidebar a.selected,
aside nav a.active,
aside nav a.is-active,
aside nav a.selected,
nav.app-nav a.active,
nav.app-nav a.is-active,
nav.app-nav a.selected,
.app-sidebar a.active,
.app-sidebar a.is-active,
.app-sidebar a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}


/* Google sign-in browser policy warning */
.login-browser-warning {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: #eff6ff;
  color: #0f172a;
  line-height: 1.5;
}
.login-browser-warning strong {
  display: block;
  margin-bottom: 6px;
  color: #1e3a8a;
}
.login-browser-warning p {
  margin: 0 0 12px;
  color: #334155;
  overflow-wrap: anywhere;
}
.login-browser-warning code {
  background: #ffffff;
  color: #991b1b;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  padding: 1px 5px;
}


/* -------------------------------------------------------------------------
   Left menu scroll unblocked fix
   The sidebar must be its own scroll container. Parent page scroll should not
   consume wheel events while the cursor is over the menu.
------------------------------------------------------------------------- */
html,
body {
  min-height: 100%;
}

.lms-sidebar-scroll,
.side-nav,
.sidebar,
aside nav,
nav.app-nav,
.app-sidebar {
  pointer-events: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scroll-behavior: auto !important;
}

/* Common Screen™ LMS sidebar structures */
aside,
.app-shell aside,
.layout aside,
.dashboard-shell aside,
.sidebar-shell,
.left-nav,
.app-sidebar {
  pointer-events: auto !important;
  overflow: visible !important;
}

/* If the nav itself is inside a sticky/fixed sidebar, give the nav a real height. */
.lms-sidebar-scroll,
.side-nav,
.sidebar nav.side-nav,
aside .side-nav,
.app-sidebar .side-nav {
  max-height: calc(100vh - 32px) !important;
  height: calc(100vh - 32px) !important;
  padding-bottom: 96px !important;
}

/* If there is a logo/header above the menu, this variant still keeps the list scrollable. */
.sidebar .side-nav,
.app-sidebar .side-nav,
aside .side-nav {
  max-height: calc(100vh - 120px) !important;
  height: auto !important;
}

/* Prevent hidden parent containers from clipping the scrollable sidebar. */
.app-shell,
.layout,
.dashboard-shell,
.page-shell,
.main-shell {
  min-height: 100vh;
}

/* Make active item styling visible without forcing scrollIntoView. */
.lms-sidebar-scroll a.active,
.lms-sidebar-scroll a.is-active,
.lms-sidebar-scroll a.selected,
.side-nav a.active,
.side-nav a.is-active,
.side-nav a.selected,
.sidebar a.active,
.sidebar a.is-active,
.sidebar a.selected,
aside nav a.active,
aside nav a.is-active,
aside nav a.selected,
nav.app-nav a.active,
nav.app-nav a.is-active,
nav.app-nav a.selected,
.app-sidebar a.active,
.app-sidebar a.is-active,
.app-sidebar a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

.lms-sidebar-scroll a.active svg,
.lms-sidebar-scroll a.is-active svg,
.lms-sidebar-scroll a.selected svg,
.side-nav a.active svg,
.side-nav a.is-active svg,
.side-nav a.selected svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}

/* Mobile: let the sidebar/menu fill the available drawer area. */
@media (max-width: 900px) {
  .lms-sidebar-scroll,
  .side-nav,
  .sidebar,
  aside nav,
  nav.app-nav,
  .app-sidebar {
    max-height: calc(100vh - 80px) !important;
    height: auto !important;
  }
}


/* -------------------------------------------------------------------------
   Left menu single-scroll fix
   Avoid double scrollbars by making only the actual menu list scrollable.
   Sidebar wrappers stay fixed/visible but do not scroll independently.
------------------------------------------------------------------------- */
.sidebar,
.app-sidebar,
aside,
.sidebar-shell,
.left-nav {
  overflow: hidden !important;
  max-height: 100vh !important;
}

.sidebar .side-nav,
.app-sidebar .side-nav,
aside .side-nav,
.side-nav.lms-sidebar-scroll,
.lms-sidebar-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 120px) !important;
  height: calc(100vh - 120px) !important;
  padding-bottom: 96px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto !important;
  pointer-events: auto !important;
}

/* Do not make every possible nav wrapper scrollable; this caused double scroll. */
aside nav:not(.side-nav):not(.lms-sidebar-scroll),
nav.app-nav:not(.side-nav):not(.lms-sidebar-scroll) {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

.side-nav.lms-sidebar-scroll a.active,
.side-nav.lms-sidebar-scroll a.is-active,
.side-nav.lms-sidebar-scroll a.selected,
.lms-sidebar-scroll a.active,
.lms-sidebar-scroll a.is-active,
.lms-sidebar-scroll a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .sidebar .side-nav,
  .app-sidebar .side-nav,
  aside .side-nav,
  .side-nav.lms-sidebar-scroll,
  .lms-sidebar-scroll {
    max-height: calc(100vh - 88px) !important;
    height: calc(100vh - 88px) !important;
  }
}


/* -------------------------------------------------------------------------
   FINAL left menu double-scrollbar removal
   Only `.side-nav.lms-sidebar-scroll` is allowed to show a scrollbar.
   All sidebar wrapper containers are clipped and must not scroll.
------------------------------------------------------------------------- */

/* Sidebar wrappers: no visible scrollbar, no independent scroll. */
aside,
.sidebar,
.app-sidebar,
.sidebar-shell,
.left-nav,
.layout-sidebar,
.app-layout-sidebar,
.dashboard-sidebar,
.sidenav-shell,
.nav-shell,
.nav-panel,
.sidebar-panel {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  max-height: 100vh !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

aside::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.app-sidebar::-webkit-scrollbar,
.sidebar-shell::-webkit-scrollbar,
.left-nav::-webkit-scrollbar,
.layout-sidebar::-webkit-scrollbar,
.app-layout-sidebar::-webkit-scrollbar,
.dashboard-sidebar::-webkit-scrollbar,
.sidenav-shell::-webkit-scrollbar,
.nav-shell::-webkit-scrollbar,
.nav-panel::-webkit-scrollbar,
.sidebar-panel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Only the real menu list scrolls. */
.side-nav.lms-sidebar-scroll,
aside nav.side-nav.lms-sidebar-scroll,
aside nav.lms-sidebar-scroll {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  padding-bottom: 96px !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto !important;
  pointer-events: auto !important;
  scrollbar-width: thin !important;
}

/* Ensure any nested nav inside the scrollable menu does not create a second scrollbar. */
.side-nav.lms-sidebar-scroll nav,
.side-nav.lms-sidebar-scroll .nav-group,
.side-nav.lms-sidebar-scroll .nav-section,
.side-nav.lms-sidebar-scroll .menu-group,
.side-nav.lms-sidebar-scroll .menu-section {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Prevent prior broad rules from making other navs scroll. */
aside nav:not(.side-nav):not(.lms-sidebar-scroll),
.sidebar nav:not(.side-nav):not(.lms-sidebar-scroll),
.app-sidebar nav:not(.side-nav):not(.lms-sidebar-scroll) {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  scrollbar-width: none !important;
}

.side-nav.lms-sidebar-scroll a.active,
.side-nav.lms-sidebar-scroll a.is-active,
.side-nav.lms-sidebar-scroll a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .side-nav.lms-sidebar-scroll,
  aside nav.side-nav.lms-sidebar-scroll,
  aside nav.lms-sidebar-scroll {
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
  }
}





/* =========================================================================
   FINAL sidebar scrollbar removal - target the actual .sidebar-scroll wrapper
   The visible bar in production came from .sidebar-scroll, not only .side-nav.
============================================================================ */
.sidebar {
  overflow: hidden !important;
  max-height: 100vh !important;
}

/* This is the only sidebar scroll container. Its scrollbar is invisible. */
.sidebar-scroll,
.sidebar-scroll.lms-sidebar-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(100vh - 150px) !important;
  max-height: calc(100vh - 150px) !important;
  padding-bottom: 120px !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sidebar-scroll::-webkit-scrollbar,
.sidebar-scroll.lms-sidebar-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Inner menu must not create its own scrollbar. */
.side-nav,
.sidebar-scroll .side-nav {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.side-nav::-webkit-scrollbar,
.sidebar-scroll .side-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hide scrollbar for all nested sidebar/menu elements as a final guard. */
.sidebar *,
.sidebar-scroll *,
.side-nav * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sidebar *::-webkit-scrollbar,
.sidebar-scroll *::-webkit-scrollbar,
.side-nav *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.side-nav a.active,
.side-nav a.is-active,
.side-nav a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

/* =========================================================================
   Certification exam: one MCQ at a time
============================================================================ */
.exam-question-card.one-at-a-time {
  display: none !important;
}

.exam-question-card.one-at-a-time.active-question {
  display: block !important;
}

.exam-question-card.one-at-a-time[hidden] {
  display: none !important;
}

.exam-question-card.one-at-a-time.active-question[hidden] {
  display: block !important;
}

.exam-question-card.one-at-a-time .choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
}

.question-nav-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .sidebar-scroll,
  .sidebar-scroll.lms-sidebar-scroll {
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
  }
}


/* -------------------------------------------------------------------------
   Materials management action-layout fix
   Long filenames must not push Preview / Download / Move / Delete out of row.
------------------------------------------------------------------------- */

/* Common material/resource row containers */
.material-management-row,
.material-row,
.material-card,
.resource-card,
.uploaded-material-row,
.material-list-item,
.document-row,
.file-row {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  width: 100% !important;
}

/* Text/title side should wrap inside its own column, not across buttons. */
.material-management-row > :first-child,
.material-row > :first-child,
.material-card > :first-child,
.resource-card > :first-child,
.uploaded-material-row > :first-child,
.material-list-item > :first-child,
.document-row > :first-child,
.file-row > :first-child {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* If there is no explicit row class, catch page cards/rows containing material controls. */
.page-card .table-wrap + .material-list,
.materials-list,
.resources-list,
.documents-list {
  display: grid;
  gap: 14px;
}

/* Button/action side */
.material-action-zone,
.material-action-buttons,
.material-actions,
.file-actions,
.document-actions,
.resource-actions,
.material-management-row form,
.material-row form,
.material-card form,
.resource-card form,
.uploaded-material-row form,
.material-list-item form,
.document-row form,
.file-row form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: max-content !important;
}

/* Inputs used for Move section selector */
.material-action-zone select,
.material-action-zone input,
.material-actions select,
.material-actions input,
.file-actions select,
.file-actions input,
.document-actions select,
.document-actions input,
.resource-actions select,
.resource-actions input,
.material-management-row select,
.material-row select,
.material-card select,
.resource-card select,
.uploaded-material-row select,
.material-list-item select,
.document-row select,
.file-row select {
  min-width: 220px !important;
  max-width: 360px !important;
}

/* Action buttons should not wrap word-by-word or fall to the next line alone. */
.material-action-btn,
.material-actions .btn,
.file-actions .btn,
.document-actions .btn,
.resource-actions .btn,
.material-management-row .btn,
.material-row .btn,
.material-card .btn,
.resource-card .btn,
.uploaded-material-row .btn,
.material-list-item .btn,
.document-row .btn,
.file-row .btn,
.material-management-row button,
.material-row button,
.material-card button,
.resource-card button,
.uploaded-material-row button,
.material-list-item button,
.document-row button,
.file-row button {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Red delete button should align with other action controls. */
.material-management-row button[type="submit"],
.material-row button[type="submit"],
.material-card button[type="submit"],
.resource-card button[type="submit"],
.uploaded-material-row button[type="submit"],
.material-list-item button[type="submit"],
.document-row button[type="submit"],
.file-row button[type="submit"] {
  align-self: center !important;
}

/* Specific fix for rows where the text and controls are direct children of a card/panel. */
.panel:has(a.material-action-btn),
.card:has(a.material-action-btn),
.page-card:has(a.material-action-btn) {
  overflow-x: auto;
}

/* On smaller screens, stack cleanly instead of letting Delete drop awkwardly. */
@media (max-width: 900px) {
  .material-management-row,
  .material-row,
  .material-card,
  .resource-card,
  .uploaded-material-row,
  .material-list-item,
  .document-row,
  .file-row {
    grid-template-columns: 1fr !important;
  }

  .material-action-zone,
  .material-action-buttons,
  .material-actions,
  .file-actions,
  .document-actions,
  .resource-actions,
  .material-management-row form,
  .material-row form,
  .material-card form,
  .resource-card form,
  .uploaded-material-row form,
  .material-list-item form,
  .document-row form,
  .file-row form {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  .material-action-zone select,
  .material-action-zone input,
  .material-actions select,
  .material-actions input,
  .file-actions select,
  .file-actions input,
  .document-actions select,
  .document-actions input,
  .resource-actions select,
  .resource-actions input,
  .material-management-row select,
  .material-row select,
  .material-card select,
  .resource-card select,
  .uploaded-material-row select,
  .material-list-item select,
  .document-row select,
  .file-row select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Programme progress component table */
.programme-progress-components {
  display: grid;
  gap: 10px;
}


/* -------------------------------------------------------------------------
   Sidebar public/login spacing fix
   Prevents huge vertical gaps between Programs, Courses and Login on the
   unauthenticated sidebar while keeping authenticated sidebar scroll behaviour.
------------------------------------------------------------------------- */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.sidebar-scroll.lms-sidebar-scroll,
.sidebar-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar-scroll.lms-sidebar-scroll::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.sidebar.sidebar-authenticated .sidebar-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 150px) !important;
  padding-bottom: 96px !important;
}

.sidebar.sidebar-public .sidebar-scroll {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.sidebar-public .side-nav,
.sidebar-public .nav-group,
.sidebar-public .nav-details {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.sidebar-public .side-nav {
  gap: 10px !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  padding-bottom: 0 !important;
}

.sidebar-public .nav-group {
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
}

.sidebar-public .nav-heading {
  margin: 14px 0 8px !important;
}

.sidebar-public .side-nav a,
.sidebar-public .logout-link {
  min-height: 52px !important;
  margin: 4px 0 !important;
  padding: 14px 18px !important;
}

.sidebar-public .nav-group:last-child {
  margin-top: 10px !important;
}

.sidebar,
.sidebar *,
.sidebar-scroll,
.side-nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar::-webkit-scrollbar,
.sidebar *::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar,
.side-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.side-nav a.active,
.side-nav a.is-active,
.side-nav a.selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  box-shadow: inset 4px 0 0 #2563eb !important;
  font-weight: 800 !important;
}

/* Activities + assessments progress breakdown */
.programme-progress-explainer {
  margin: 18px 0;
}
.profile-progress-table {
  min-width: 760px;
}
.profile-progress-table th,
.profile-progress-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.top-progress span {
  max-width: 100%;
}


/* -------------------------------------------------------------------------
   Certification exam MCQ layout fix
   Prevents option text being squeezed to the far right.
------------------------------------------------------------------------- */
.exam-question-card.one-at-a-time {
  display: none !important;
}

.exam-question-card.one-at-a-time.active-question {
  display: block !important;
}

.exam-question-card.one-at-a-time[hidden] {
  display: none !important;
}

.exam-question-card.one-at-a-time.active-question[hidden] {
  display: block !important;
}

.exam-question-card .choice,
.exam-question-card.one-at-a-time .choice,
#examBox .choice {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 18px 22px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  direction: ltr !important;
}

.exam-question-card .choice input[type="radio"],
#examBox .choice input[type="radio"] {
  grid-column: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
}

.exam-question-card .choice span,
#examBox .choice span {
  grid-column: 2 !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* If the option text is not wrapped in a span, this still prevents right-edge squeeze. */
.exam-question-card .choice {
  color: #0f172a !important;
  font-weight: 600;
}

/* Navigation should remain compact and aligned. */
.question-nav-row {
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 18px !important;
}

/* -------------------------------------------------------------------------
   Frontend progress recalculation support
------------------------------------------------------------------------- */
.programme-progress-row {
  scroll-margin-top: 96px;
}
.profile-progress-table {
  min-width: 760px;
}
.profile-progress-table th,
.profile-progress-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.top-progress span {
  max-width: 100%;
}


/* -------------------------------------------------------------------------
   Live API progress bar support
------------------------------------------------------------------------- */
.top-progress span#topProgressFill {
  max-width: 100%;
  transition: width 180ms ease;
}

/* -------------------------------------------------------------------------
   Assessment Release table layout fix
------------------------------------------------------------------------- */
.assessment-release-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}
.assessment-release-table {
  min-width: 1220px !important;
  table-layout: fixed !important;
}
.assessment-release-table th,
.assessment-release-table td {
  vertical-align: middle !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.assessment-release-table th:nth-child(1),
.assessment-release-table td:nth-child(1) { width: 130px !important; min-width: 130px !important; }
.assessment-release-table th:nth-child(2),
.assessment-release-table td:nth-child(2) { width: 300px !important; min-width: 300px !important; }
.assessment-release-table th:nth-child(3),
.assessment-release-table td:nth-child(3) { width: 340px !important; min-width: 340px !important; }
.assessment-release-table th:nth-child(4),
.assessment-release-table td:nth-child(4) { width: 220px !important; min-width: 220px !important; text-align: center !important; }
.assessment-release-table th:nth-child(5),
.assessment-release-table td:nth-child(5) { width: 190px !important; min-width: 190px !important; }
.assessment-release-table th:nth-child(6),
.assessment-release-table td:nth-child(6) { width: 130px !important; min-width: 130px !important; text-align: center !important; }
.assessment-release-table th:nth-child(7),
.assessment-release-table td:nth-child(7) { width: 320px !important; min-width: 320px !important; }
.assessment-release-table .badge,
.assessment-release-table .tag,
.assessment-release-table .pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 200px !important;
  min-width: 150px;
  padding: 10px 14px;
  white-space: normal !important;
  line-height: 1.25;
  text-align: center;
}
.assessment-release-table form.stack-sm {
  min-width: 300px;
}
.assessment-release-table input[name="notes"] {
  width: 100%;
}

/* Progress breakdown table */
.profile-progress-table {
  min-width: 760px;
}
.profile-progress-table th,
.profile-progress-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Exact progress formula display */
.top-progress span#topProgressFill {
  max-width: 100%;
  transition: width 180ms ease;
}
.profile-progress-table {
  min-width: 960px;
}
.profile-progress-table th,
.profile-progress-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

@keyframes lmsSpin{to{transform:rotate(360deg)}}
body.is-processing{cursor:progress;}


/* Activity deletion and leaner dashboard performance patch */
.inline-form{display:inline-flex;align-items:center;margin:0;gap:.5rem;}
.btn.danger{background:#b42318;color:#fff;border-color:#b42318;}
.btn.danger:hover{filter:brightness(.95);}

/* Quantum-safe readiness patch */
.warning-soft{background:linear-gradient(135deg, rgba(255,245,210,.72), rgba(255,255,255,.96)); border:1px solid rgba(224,168,0,.28)}
.nice-list{margin:0; padding-left:1.25rem; line-height:1.7}
.nice-list li{margin:.35rem 0}

/* Permission request experience */
.permission-panel{max-width:920px;margin:0 auto;padding:28px}
.permission-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px;margin:18px 0;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.meta-label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:6px}
.permission-request-form{background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:22px;margin-top:18px}
.permission-request-form textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:14px;padding:12px;margin:10px 0 16px;background:#fff;resize:vertical}
.notice.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:14px;padding:12px 14px;margin:16px 0}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input[type="text"]{min-width:160px;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px}
.btn.small{padding:7px 10px;font-size:.85rem}
.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:#eef2ff;color:#3730a3;font-size:.8rem;font-weight:700;text-transform:capitalize}


/* Full permission visibility patch: show permissions as rows so every item in a category is visible. */
.permission-total {
  margin: 4px 0 0;
  color: #475569;
}
.vertical-permission-scroll {
  max-height: 68vh;
  overflow: auto;
}
.permission-row-matrix {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
.permission-row-matrix th,
.permission-row-matrix td {
  min-width: 150px;
  max-width: 220px;
  width: auto;
}
.permission-row-matrix .sticky-permission-col {
  position: sticky;
  left: 0;
  z-index: 6;
  min-width: 320px;
  max-width: 380px;
  width: 340px;
  background: #ffffff;
  box-shadow: 2px 0 0 rgba(15, 23, 42, 0.06);
}
.permission-row-matrix thead .sticky-permission-col {
  z-index: 8;
  background: #f8fafc;
}
.permission-label-cell strong {
  display: block;
  line-height: 1.3;
  color: #111827;
}
.permission-toggle-label {
  justify-content: start;
}

/* -------------------------------------------------------------------------
   Mobile responsive navigation patch
   On phones, the left menu must not cover the whole screen. It starts
   collapsed behind a clear Menu button. When opened, only the menu panel
   scrolls within the visible viewport and the page content remains reachable.
------------------------------------------------------------------------- */
.mobile-menu-toggle {
  display: none;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.mobile-menu-icon { font-size: 18px; line-height: 1; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  .shell {
    display: block !important;
    min-height: 100vh;
  }

  .sidebar,
  aside.sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(12px);
  }

  .sidebar .brand {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    box-shadow: none !important;
  }
  .sidebar .brand strong,
  .sidebar .brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-menu-toggle { display: flex !important; }

  .sidebar:not(.mobile-open) .sidebar-scroll,
  .sidebar:not(.mobile-open) .lms-sidebar-scroll,
  .sidebar:not(.mobile-open) .profile {
    display: none !important;
  }

  .sidebar.mobile-open .sidebar-scroll,
  .sidebar.mobile-open .lms-sidebar-scroll {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: min(72vh, calc(100vh - 118px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 12px 14px 18px !important;
    scrollbar-width: thin !important;
    background: #ffffff !important;
  }

  .sidebar.mobile-open nav.side-nav,
  .sidebar.mobile-open .side-nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 20px !important;
  }

  .sidebar.mobile-open .profile {
    display: block !important;
    padding: 12px 16px !important;
    border-top: 1px solid #e5e7eb !important;
  }

  main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  header {
    height: auto !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .top-links {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px 28px !important;
  }

  .hero,
  .panel,
  .form-card,
  .card,
  .module-card,
  .activity-row {
    border-radius: 14px !important;
    padding: 18px !important;
  }

  .title-row,
  .course-head,
  .module-card,
  .activity-row,
  .row {
    display: block !important;
  }

  .course-actions,
  .module-actions,
  .bottom-nav,
  .inline-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .btn,
  button,
  .course-actions a,
  .module-actions a {
    width: 100%;
    text-align: center;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 480px) {
  h1, .hero h1 { font-size: 26px !important; line-height: 1.12 !important; }
  h2 { font-size: 18px !important; }
  .stats { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: 1fr !important; }
}

/* FULL MOBILE RESPONSIVENESS PATCH */
.video-embed{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;background:#f3f4f6}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:16px}
img,video,iframe,canvas,svg{max-width:100%}
.table-scroll,.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea{max-width:100%;box-sizing:border-box}

@media (max-width: 900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .shell{display:block;width:100%;min-width:0}
  .sidebar{position:sticky!important;top:0!important;z-index:1000!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;border-right:0!important;border-bottom:1px solid #e5e7eb!important;background:#fff!important;box-shadow:0 8px 24px rgba(15,23,42,.08)!important}
  .brand{padding:12px 14px!important;display:flex!important;align-items:center!important;gap:10px!important}
  .brand strong,.brand span{max-width:70vw!important;white-space:normal!important;word-break:break-word!important}
  .mobile-menu-toggle{display:flex!important;width:calc(100% - 28px)!important;margin:0 14px 12px!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:1px solid #d1d5db!important;border-radius:12px!important;background:#f9fafb!important;color:#111827!important;min-height:44px!important}
  .sidebar:not(.mobile-open) .sidebar-scroll,.sidebar:not(.mobile-open) .lms-sidebar-scroll,.sidebar:not(.mobile-open) .profile{display:none!important}
  .sidebar.mobile-open .sidebar-scroll,.sidebar.mobile-open .lms-sidebar-scroll{display:block!important;max-height:68vh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px 12px 16px!important;background:#fff!important;-webkit-overflow-scrolling:touch!important}
  .side-nav a,.nav-details summary,.logout-link{min-height:44px!important;padding:10px 12px!important;gap:10px!important}
  .nav-details[open]{padding-bottom:8px!important}
  main{width:100%!important;margin:0!important;min-width:0!important}
  header{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;min-height:0!important;padding:12px 14px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .top-links{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:flex-start!important}
  .top-links a,.top-profile-widget{min-height:42px!important;max-width:100%!important;flex:1 1 auto!important;justify-content:center!important}
  .top-profile-widget{display:flex!important;overflow:hidden!important}
  .top-profile-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .top-progress{max-width:100%!important}
  .content{padding:16px 12px 28px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .hero,.panel,.card,.form-card,.module-card,.activity-row,.notice{padding:16px!important;border-radius:14px!important;max-width:100%!important;box-sizing:border-box!important}
  .grid,.settings-grid,.stats,.dashboard-grid,.cards-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .title-row,.course-head,.module-header,.activity-row,.row,.split,.two-col,.three-col{display:block!important;max-width:100%!important}
  .course-actions,.module-actions,.settings-actions,.bottom-nav,.inline-form,.toolbar,.action-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:100%!important}
  .btn,button,input[type=submit],.course-actions a,.module-actions a{width:100%!important;box-sizing:border-box!important;text-align:center!important;min-height:44px!important}
  input,select,textarea{width:100%!important;min-height:42px!important;font-size:16px!important}
  textarea{min-height:110px!important}
  table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-spacing:0!important}
  thead,tbody,tr{max-width:100%}
  th,td{white-space:normal!important;overflow-wrap:anywhere!important;min-width:120px!important;vertical-align:top!important}
  .permission-matrix table th:first-child,.permission-matrix table td:first-child{position:static!important}
  pre,code,.codebox{white-space:pre-wrap!important;overflow-wrap:anywhere!important;max-width:100%!important;overflow-x:auto!important}
  .breadcrumbs{display:flex!important;flex-wrap:wrap!important;gap:6px!important;overflow-wrap:anywhere!important}
  .video-box,.embedded-video video{width:100%!important;height:auto!important;max-height:70vh!important}
}

@media (max-width: 520px){
  h1,.hero h1{font-size:24px!important;line-height:1.14!important}
  h2{font-size:18px!important;line-height:1.2!important}
  .lead{font-size:15px!important}
  .brand .logo-img,.mark{width:36px!important;height:36px!important}
  .top-links a span:not(.top-avatar):not(.top-profile-text),.top-links a svg+span{font-size:13px!important}
  .profile{font-size:13px!important}
  th,td{font-size:13px!important;min-width:100px!important;padding:8px!important}
  .card.link-card{min-height:auto!important}
}


/* -------------------------------------------------------------------------
   Mobile close-menu hard fix
   The menu drawer is forcibly hidden when the sidebar is not in mobile-open
   state, so the Close menu button cannot leave the left menu covering content.
------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mobile-menu-toggle {
    position: relative !important;
    z-index: 1003 !important;
    touch-action: manipulation !important;
  }

  .sidebar:not(.mobile-open) #mainSidebarMenu,
  .sidebar:not(.mobile-open) .sidebar-scroll,
  .sidebar:not(.mobile-open) .lms-sidebar-scroll {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .sidebar.mobile-open #mainSidebarMenu,
  .sidebar.mobile-open .sidebar-scroll,
  .sidebar.mobile-open .lms-sidebar-scroll {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: min(68vh, calc(100vh - 118px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar:not(.mobile-open) .profile {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}


/* Ungraded module marker queue */
.compact-title-row { align-items: flex-start; gap: 1rem; }
.ungraded-module-panel { margin: 1.25rem 0; }
.muted-panel { opacity: 0.92; }
.learner-submission-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.learner-submission-card { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem; border: 1px solid var(--border, #e5e7eb); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
.learner-submission-card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10); }
.submission-card-topline { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.avatar-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #eef2ff; font-weight: 800; }
.submission-card-meta { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: #475569; }
.plagiarism-check-card { border-left: 4px solid #6366f1; }
@media (max-width: 720px) { .learner-submission-card-grid { grid-template-columns: 1fr; } .compact-title-row { display: block; } }

/* Attendance matrix patch */
.compact-stats { margin: 1rem 0 1.25rem; }
.attendance-matrix-panel, .attendance-overview-panel { overflow: hidden; }
.matrix-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; }
.attendance-matrix-table, .attendance-overview-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 920px; }
.attendance-matrix-table th, .attendance-matrix-table td, .attendance-overview-table th, .attendance-overview-table td { vertical-align: top; }
.attendance-matrix-table th { white-space: normal; }
.sticky-col { position: sticky; left: 0; z-index: 2; background: var(--surface, #fff); box-shadow: 8px 0 18px rgba(15,23,42,.06); }
.learner-col { min-width: 240px; max-width: 300px; }
.session-col { min-width: 220px; max-width: 260px; }
.session-heading { font-weight: 800; line-height: 1.25; margin-bottom: .25rem; }
.attendance-cell { min-width: 220px; }
.attendance-cell-form { display: grid; gap: .45rem; margin-top: .55rem; }
.attendance-cell-form select, .attendance-cell-form input { width: 100%; min-width: 0; }
.status-present { background: rgba(16,185,129,.08); }
.status-late, .status-excused { background: rgba(245,158,11,.08); }
.status-absent { background: rgba(239,68,68,.08); }
.status-unmarked { background: rgba(100,116,139,.06); }
@media (max-width: 760px) {
  .attendance-matrix-table, .attendance-overview-table { min-width: 760px; font-size: .92rem; }
  .learner-col { min-width: 190px; }
  .session-col, .attendance-cell { min-width: 190px; }
}

/* Mobile top-right logout: visible on phones/tablets so users do not need to open the menu. */
.mobile-top-logout-form{display:none;margin:0;padding:0;}
.mobile-top-logout-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:#111827;border-radius:12px;padding:9px 12px;font-weight:800;min-height:40px;cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.05);}
.mobile-top-logout-button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;}
@media (max-width: 900px){
  .mobile-top-logout-form{display:inline-flex!important;align-self:flex-end;}
  header .top-links{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;}
  .mobile-top-logout-button span{display:inline!important;}
}
@media (max-width: 520px){
  .mobile-top-logout-button{padding:9px 10px;}
  .mobile-top-logout-button span{display:none!important;}
}

/* Hard mobile header logout fix: independent of menu/top-links wrapping. */
.mobile-header-logout-form{display:none;margin:0;padding:0;}
.mobile-header-logout-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:#111827;border-radius:12px;padding:9px 12px;font-weight:800;min-height:40px;cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.08);white-space:nowrap;}
.mobile-header-logout-button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;}
@media (max-width:900px){
  header{position:relative!important;padding-right:118px!important;}
  .header-brand-line{padding-right:104px!important;min-height:40px!important;display:flex!important;align-items:center!important;}
  .mobile-header-logout-form{display:block!important;position:absolute!important;right:14px!important;top:12px!important;z-index:80!important;width:auto!important;}
  .mobile-header-logout-button{width:auto!important;min-width:88px!important;min-height:40px!important;padding:9px 12px!important;}
}
@media (max-width:420px){
  header{padding-right:74px!important;}
  .header-brand-line{padding-right:60px!important;}
  .mobile-header-logout-button{min-width:44px!important;padding:9px 10px!important;}
  .mobile-header-logout-button span{display:none!important;}
}


/* Attendance matrix scroll and assessment-session exclusion patch */
.attendance-overview-panel, .attendance-matrix-panel{
  max-width:100%;
  overflow:hidden!important;
}
.matrix-scroll{
  display:block;
  width:100%;
  max-width:calc(100vw - 72px);
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;
  padding-bottom:14px;
}
.attendance-matrix-panel .matrix-scroll{
  max-height:calc(100vh - 300px);
  min-height:260px;
}
.attendance-overview-panel .matrix-scroll{
  max-height:calc(100vh - 240px);
  min-height:260px;
}
.attendance-matrix-table{
  width:max-content!important;
  min-width:max-content!important;
}
.attendance-overview-table{
  width:100%;
  min-width:1120px!important;
}
.attendance-matrix-table thead th, .attendance-overview-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--surface,#fff);
}
.attendance-matrix-table .sticky-col{
  z-index:4;
}
.attendance-overview-table th:last-child, .attendance-overview-table td:last-child{
  position:sticky;
  right:0;
  z-index:2;
  background:var(--surface,#fff);
  box-shadow:-8px 0 18px rgba(15,23,42,.06);
}
.attendance-overview-table thead th:last-child{
  z-index:4;
}
@media (max-width:900px){
  .matrix-scroll{max-width:calc(100vw - 32px);}
  .attendance-matrix-panel .matrix-scroll, .attendance-overview-panel .matrix-scroll{max-height:calc(100vh - 230px);}
}
@media (max-width:520px){
  .matrix-scroll{max-width:calc(100vw - 20px);}
}


/* Clutter control: reusable collapse/expand sections */
.clutter-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.clutter-toolbar .btn{min-height:36px;}
.lms-collapsible{
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lms-collapsible > .title-row,
.lms-collapsible > .section-heading-row,
.lms-collapsible > h2,
.lms-collapsible > h3,
.lms-collapsible > .collapse-header-auto,
.lms-collapsible > .lms-collapsible-header{
  padding-right:120px;
}
.collapse-toggle-btn{
  position:absolute;
  top:18px;
  right:18px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line,#e5e7eb);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:7px 12px;
  min-height:34px;
  font-weight:800;
  font-size:.86rem;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.collapse-toggle-btn:hover{box-shadow:0 10px 22px rgba(15,23,42,.10);}
.collapse-toggle-btn::before{content:'▾';font-size:.82rem;line-height:1;transition:transform .18s ease;}
.lms-collapsible.is-collapsed .collapse-toggle-btn::before{transform:rotate(-90deg);}
.lms-collapsible.is-collapsed > .lms-collapsible-content{
  display:none!important;
}
.lms-collapsible.is-collapsed{
  margin-bottom:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.collapse-header-auto h2{margin:0;}
.collapse-header-auto p{margin:.25rem 0 0;color:var(--muted,#64748b);}
@media(max-width:700px){
  .lms-collapsible > .title-row,
  .lms-collapsible > .section-heading-row,
  .lms-collapsible > h2,
  .lms-collapsible > h3,
  .lms-collapsible > .collapse-header-auto,
  .lms-collapsible > .lms-collapsible-header{padding-right:92px;}
  .collapse-toggle-btn{top:14px;right:12px;padding:7px 10px;font-size:.78rem;}
  .clutter-toolbar{justify-content:stretch;}
  .clutter-toolbar .btn{flex:1 1 120px;}
}


/* Hard fix: collapse/expand uses a generated content wrapper instead of fragile direct-child CSS selectors. */
.lms-collapsible > .lms-collapsible-content{display:block;}
.lms-collapsible.is-collapsed > .lms-collapsible-content{display:none!important;}
.lms-collapsible > .lms-collapsible-header{display:block;}
.lms-collapsible > .collapse-toggle-btn{touch-action:manipulation;}


/* Zalo learner login and beta footer patch */
.critical-id-warning{background:#dc2626;color:#fff;font-weight:800;border-radius:14px;padding:12px 14px;margin:12px 0;text-align:center;letter-spacing:.02em;box-shadow:0 6px 18px rgba(220,38,38,.25)}
.zalo-login-button{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;background:#0068ff;color:#fff!important;border-color:#0068ff}
.login-id-warning{font-size:.92rem}
.zalo-link-card input{font-weight:600}
.lms-version-footer{padding:14px 22px;text-align:center;color:#64748b;font-size:.82rem;border-top:1px solid #e5e7eb;background:#fff;margin-top:auto}
@media(max-width:760px){.lms-version-footer{font-size:.78rem;padding:12px}.critical-id-warning{font-size:.9rem}}


/* Zalo icon-only login and learner profile identity warning hard fix */
.profile-id-warning{margin:8px 0 10px;text-align:left;font-size:.9rem;border-radius:12px}

/* Patch: collapsible admin sections, student edit forms, searchable logs */
.collapsible-admin-section {
  display: block;
  margin-bottom: 18px;
}
.collapsible-admin-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.035);
}
.collapsible-admin-section > summary::-webkit-details-marker { display: none; }
.collapsible-admin-section > summary h2,
.collapsible-admin-section > summary h3 {
  margin: 0;
}
.collapsible-admin-section > summary span {
  color: var(--muted, #64748b);
  font-size: 0.85rem;
  white-space: nowrap;
}
.collapsible-admin-section[open] > summary {
  margin-bottom: 14px;
}
.student-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  margin-bottom: 10px;
  background: rgba(248, 250, 252, 0.85);
}
.student-edit-form label {
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}
.student-edit-form input {
  width: 100%;
  margin-top: 3px;
}
.student-edit-form .check-row,
.student-edit-form button {
  grid-column: 1 / -1;
}
.log-search-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.log-line-hidden { display: none; }
.log-highlight { background: rgba(250, 204, 21, 0.35); border-radius: 4px; padding: 0 2px; }
@media (max-width: 760px) {
  .student-edit-form,
  .log-search-toolbar { grid-template-columns: 1fr; }
  .collapsible-admin-section > summary { align-items: flex-start; flex-direction: column; }
}


/* Super-admin UAT patch: make interactive template picker scrollable */
.activity-builder-layout .builder-panel{
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.activity-builder-layout .builder-panel::-webkit-scrollbar{width:8px}
.activity-builder-layout .builder-panel::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.expected-answer-row{transition:opacity .15s ease}

/* -------------------------------------------------------------------------
   Course directory card gap fix
   Large session lists made the CSS grid row as tall as the biggest card.
   Other cards in the same row were stretched, causing large blank spaces.
   This patch uses a masonry-style column layout for the course directory
   and caps each course's session preview with internal scrolling.
------------------------------------------------------------------------- */
.course-directory-grid{
  display:block;
  column-count:3;
  column-gap:24px;
}
.course-directory-grid .course-card{
  display:inline-flex;
  width:100%;
  break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 24px;
  justify-content:flex-start;
  vertical-align:top;
}
.course-directory-grid .course-card-main{
  flex:0 0 auto;
}
.course-directory-grid .course-sessions-preview{
  margin-top:14px;
  max-height:460px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
}
.course-directory-grid .compact-session-list{
  overflow-x:hidden;
}
.course-directory-grid .session-row{
  align-items:flex-start;
}
.course-directory-grid .session-row > div:last-child{
  flex:0 0 auto;
}
@media(max-width:1180px){
  .course-directory-grid{column-count:2;}
}
@media(max-width:760px){
  .course-directory-grid{column-count:1;}
  .course-directory-grid .course-card{display:flex;margin-bottom:14px;}
  .course-directory-grid .course-sessions-preview{max-height:520px;}
}