/* Employee Training Portal — shared design system
   Color theme modeled after bunny.net's dashboard: warm coral/orange accent
   on a dark navy sidebar, white cards, and a soft light-grey/blue page bg. */
:root{
  --brand: #eb5a1e;
  --brand-dark: #c8481a;
  --brand-light: #fff1e8;
  --ink: #0e172c;
  --muted: #6b7280;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --border: #e5e7eb;
  --bg: #f5f7fa;
  --sidebar-bg: #101c38;
  --sidebar-border: #1b2847;
  --sidebar-text: #aebbd0;
  --sidebar-text-hover: #ffffff;
}
*{box-sizing:border-box;}
body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); }
.font-display{ font-family: 'Poppins', 'Inter', sans-serif; }

/* ---------- Brand ---------- */
.brand-gradient{ background: linear-gradient(135deg,#ff8a5c 0%, #f2643a 55%, #d94315 100%); }
.text-brand{ color: var(--brand); }
.bg-brand{ background: var(--brand); }
.btn-primary{ background: var(--brand); color:#fff; transition: all .15s ease; }
.btn-primary:hover{ background: var(--brand-dark); transform: translateY(-1px); }
.btn-primary:disabled{ background:#c7c9d1; color:#8b8d97; cursor:not-allowed; transform:none; }
.btn-primary:disabled:hover{ background:#c7c9d1; transform:none; }
.btn-outline{ border:1.5px solid var(--brand); color: var(--brand); background:#fff; }
.btn-outline:hover{ background: var(--brand-light); }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-hover{ transition: all .2s ease; }
.card-hover:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(79,70,229,.12); border-color:#c7d2fe; }

/* ---------- Section drag-and-drop reorder (module builder) ---------- */
.section-card{ transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.section-card.dragging{ opacity: .4; }
.section-card .drag-handle{ cursor: grab; }
.section-card .drag-handle:active{ cursor: grabbing; }
.section-card.drag-over-top{ box-shadow: inset 0 3px 0 0 var(--brand); }
.section-card.drag-over-bottom{ box-shadow: inset 0 -3px 0 0 var(--brand); }

/* ---------- Reorderable List View (Training/Video/Document/Assessment/File
   Library "List View" toggle) -- shared drag-and-drop styling reused across
   admin/modules.html + js/{video,document,assessment,file}-library.js so the
   look/feel exactly matches the module-builder's proven section reorder UX
   above, without duplicating the CSS per page. ---------- */
.reorder-row{ transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.reorder-row.dragging{ opacity: .4; }
.reorder-row .drag-handle{ cursor: grab; color: var(--muted); }
.reorder-row .drag-handle:active{ cursor: grabbing; }
.reorder-row.drag-over-top{ box-shadow: inset 0 3px 0 0 var(--brand); }
.reorder-row.drag-over-bottom{ box-shadow: inset 0 -3px 0 0 var(--brand); }
.view-toggle-btn{ padding:.4rem .75rem; border-radius:8px; font-size:.85rem; font-weight:600; color:#4b5563; border:1px solid var(--border); background:#fff; transition: all .15s ease; }
.view-toggle-btn:hover{ background:#f3f4f6; }
.view-toggle-btn.active{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* ---------- Progress bar ---------- */
.progress-track{ background:#eef0f4; border-radius:999px; overflow:hidden; height:8px; }
.progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg,#f97316,#eb5a1e); transition: width .4s ease; }
.progress-fill.complete{ background: linear-gradient(90deg,#16a34a,#22c55e); }

/* ---------- Sidebar ---------- */
/* Base (light-background) styling -- also used by the mobile slide-down nav,
   which stays on a white background, so this must remain readable there. */
.sidebar-link{ display:flex; align-items:center; gap:.65rem; padding:.6rem .9rem; border-radius:10px; color:#4b5563; font-weight:500; font-size:.92rem; }
.sidebar-link:hover{ background:#f3f4f6; color:#111827; }
.sidebar-link.active{ background: var(--brand-light); color: var(--brand); }
.sidebar-link.active i{ color: var(--brand); }

/* Dark navy desktop sidebar (bunny.net-style) -- scoped so it only applies
   inside the `.sidebar-dark` rail, never the light mobile nav above. */
.sidebar-dark{ background: var(--sidebar-bg); }
.sidebar-dark .sidebar-link{ color: var(--sidebar-text); }
.sidebar-dark .sidebar-link:hover{ background: rgba(255,255,255,.06); color: var(--sidebar-text-hover); }
.sidebar-dark .sidebar-link.active{ background: rgba(255,255,255,.08); color:#ff8a5c; }
.sidebar-dark .sidebar-link.active i{ color:#ff8a5c; }

/* ---------- Collapsible "hover to expand" sidebar drawer (desktop) ----------
   Collapsed by default (icon-only rail); hovering anywhere over it smoothly
   expands it to show full labels, then it auto-collapses again on mouseleave.
   It's `position:fixed` and overlays the page (z-index above content) while
   expanded, so the main content never has to reflow/shift on hover. */
.sidebar-drawer{
  width: 5rem; /* collapsed: icon rail only */
  overflow-x: hidden;
  transition: width .18s ease, box-shadow .18s ease;
  z-index: 40;
}
.sidebar-drawer:hover{
  width: 16rem; /* expanded: icons + labels */
  box-shadow: 6px 0 28px rgba(16,24,40,.12);
}
/* Any inline label next to an icon (nav links, brand name, logout, profile name block) */
.sidebar-drawer .sidebar-label{
  opacity: 0;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .12s ease, max-width .18s ease;
}
.sidebar-drawer:hover .sidebar-label{
  opacity: 1;
  max-width: 220px;
}
/* Standalone block text under the logo (tenant name) — collapses its own height too */
.sidebar-drawer .sidebar-fade{
  opacity: 1;
  max-height: 2.5rem;
  overflow: hidden;
  transition: opacity .12s ease, max-height .18s ease, margin .18s ease;
}
.sidebar-drawer:not(:hover) .sidebar-fade{
  opacity: 0;
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Icon+label rows (nav links, logout button, profile row) center their icon
   when collapsed instead of sitting flush left with a big empty gap. */
.sidebar-drawer:not(:hover) .sidebar-icon-row{
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; }
.badge-green{ background:#dcfce7; color:#15803d; }
.badge-yellow{ background:#fef3c7; color:#b45309; }
.badge-gray{ background:#f3f4f6; color:#4b5563; }
.badge-indigo{ background:#ffe8db; color:#c8481a; }
.badge-red{ background:#fee2e2; color:#b91c1c; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Utility ---------- */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fade-in{ animation: fadeIn .3s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* Quiz option */
.quiz-option{ border:1.5px solid var(--border); border-radius:12px; padding:.85rem 1rem; cursor:pointer; transition: all .15s ease; }
.quiz-option:hover{ border-color:#a5b4fc; background:#f8f9ff; }
.quiz-option.selected{ border-color: var(--brand); background: var(--brand-light); }
.quiz-option.correct{ border-color: var(--success); background:#f0fdf4; }
.quiz-option.incorrect{ border-color: var(--danger); background:#fef2f2; }

/* Admin question-editor "which option is correct?" row highlight (Assessment
   Library editor + Module Builder's inline Quiz Questions form) -- makes it
   obvious at a glance which option(s) are currently marked as the correct
   answer, since the actual control is just a small radio/checkbox that's
   easy to miss without this. */
.option-row{ border:1.5px solid transparent; border-radius:10px; padding:.25rem .4rem; transition: all .15s ease; }
.option-row-correct{ border-color: var(--success); background:#f0fdf4; }

/* ---------- Slide viewer (flipbook-style presentation) ---------- */
.slide-viewer{ background:#0f172a; border-radius:16px; overflow:hidden; }
.slide-stage{ position:relative; aspect-ratio:16/9; background:#0f172a; overflow:hidden; }
.slide-stage-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.slide-stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(1.02);
  transition: opacity .45s ease, transform .45s ease;
  cursor: zoom-in;
  user-select:none; -webkit-user-drag:none;
}
.slide-stage img.slide-active{ opacity:1; transform:scale(1); }
.slide-stage-nav{
  position:absolute; top:0; bottom:0; width:15%; display:flex; align-items:center;
  justify-content:center; opacity:0; transition: opacity .15s ease; cursor:pointer;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
  color:#fff; font-size:1.25rem; border:0;
}
.slide-stage-nav.next{ right:0; left:auto; background: linear-gradient(270deg, rgba(0,0,0,.35), transparent); }
.slide-stage:hover .slide-stage-nav{ opacity:1; }
.slide-stage-nav:disabled{ opacity:0 !important; cursor:default; }
.slide-topbar{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent); z-index:2; }
.slide-topbar .slide-badge{ color:#fff; font-size:.75rem; font-weight:600; background:rgba(255,255,255,.12); border-radius:999px; padding:.2rem .7rem; }
.slide-topbar-actions{ display:flex; gap:.4rem; }
.slide-icon-btn{ width:2rem; height:2rem; border-radius:8px; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; transition: background .15s ease; font-size:.85rem; }
.slide-icon-btn:hover{ background:rgba(255,255,255,.25); }
.slide-icon-btn.active{ background:var(--brand); }
.slide-progress-dots{ position:absolute; bottom:.6rem; left:0; right:0; display:flex; justify-content:center; gap:.3rem; z-index:2; }
.slide-progress-dots .dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.35); cursor:pointer; transition: all .2s ease; }
.slide-progress-dots .dot.active{ background:#fff; width:16px; }

/* Thumbnail filmstrip */
.slide-thumbrail{ display:flex; gap:.5rem; overflow-x:auto; padding:.75rem; background:#0b1120; }
.slide-thumbrail::-webkit-scrollbar{ height:6px; }
.slide-thumb{
  flex:0 0 auto; width:88px; height:50px; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; opacity:.55; transition: all .15s ease; position:relative; background:#1e293b;
}
.slide-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-thumb:hover{ opacity:.85; }
.slide-thumb.active{ opacity:1; border-color: var(--brand); }
.slide-thumb .thumb-num{ position:absolute; bottom:2px; right:3px; font-size:.6rem; color:#fff; background:rgba(0,0,0,.5); border-radius:4px; padding:0 3px; }

/* Fullscreen mode */
.slide-viewer.slide-fullscreen{ position:fixed; inset:0; z-index:200; border-radius:0; display:flex; flex-direction:column; }
.slide-viewer.slide-fullscreen .slide-stage{ flex:1; aspect-ratio:auto; }
.slide-viewer.slide-fullscreen .slide-thumbrail{ flex:0 0 auto; }

/* Zoom lightbox */
.slide-zoom-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:300; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.slide-zoom-overlay img{ max-width:92vw; max-height:92vh; object-fit:contain; }

/* PDF rendering loading state inside the slide stage */
.slide-pdf-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* Slide source mode toggle (PDF/PPT vs legacy image URLs) in the module builder */
.slide-mode-btn{ padding:.4rem .9rem; border-radius:8px; border:1.5px solid var(--border); color:#6b7280; background:#fff; cursor:pointer; font-weight:600; }
.slide-mode-btn.active{ border-color:var(--brand); background:var(--brand-light); color:var(--brand); }

/* Video player wrapper */
.video-frame{ aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; }
.video-frame video{ width:100%; height:100%; }

/* modal */
.modal-backdrop{ background:rgba(15,23,42,.5); backdrop-filter: blur(2px); }

/* Article/blog section modal — expanded + true full-page states.
   Applied/removed via JS in admin/module-builder.html (toggleTypeFields /
   toggleArticleFullscreen). Using dedicated classes here (rather than only
   Tailwind utility toggles) avoids conflicts with the base .rounded-2xl/
   .w-full/.max-w-lg classes already on the modal card markup. */
#sectionModal.modal-no-pad{ padding:0; }
#sectionModalCard.modal-article-expanded{ width:100%; max-width:64rem; height:92vh; max-height:92vh; }
#sectionModalCard.modal-article-fullpage{ width:100vw !important; height:100vh !important; max-width:100vw !important; max-height:100vh !important; border-radius:0 !important; }

/* WYSIWYG (Quill) */
.ql-editor-display{ padding:0 !important; font-size: inherit; }
.ql-editor-display.ql-editor{ min-height:0; }
.ql-container{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-family: 'Inter', sans-serif; font-size:.95rem; }
.ql-toolbar{ border-top-left-radius:10px; border-top-right-radius:10px; background:#f9fafb; }

/* Rendered rich-text output (from Quill-authored HTML) */
.rich-content h1{ font-size:1.5rem; font-weight:700; margin:.75rem 0; }
.rich-content h2{ font-size:1.25rem; font-weight:700; margin:.6rem 0; }
.rich-content h3{ font-size:1.1rem; font-weight:700; margin:.5rem 0; }
.rich-content p{ margin:.5rem 0; line-height:1.65; }

/* Quill 2 saves EVERY list type (bullet, ordered, checked, unchecked) as an
   <ol><li data-list="..."> -- the actual marker (•, 1., a., i., ☑, ☐) is
   drawn by a ::before on a nested <span class="ql-ui">, not by the browser's
   native list-style. Without replicating that here, every list -- bullets
   included -- falls back to the browser's default numbered <li> rendering
   (visible as "1. 2. 3..." on every line, even ones authored as bullets).
   This mirrors Quill's own quill.snow.css so saved content looks identical
   here as it does in the editor that authored it. */
.rich-content ol{ padding-left:1.5em; margin:.5rem 0; counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.rich-content li{ list-style-type:none; padding-left:1.5em; position:relative; margin:.25rem 0; }
.rich-content li > .ql-ui{ position:absolute; }
.rich-content li > .ql-ui::before{ display:inline-block; margin-left:-1.5em; margin-right:.3em; text-align:right; white-space:nowrap; width:1.2em; }
.rich-content li[data-list=bullet] > .ql-ui::before{ content:'\2022'; }
.rich-content li[data-list=checked] > .ql-ui::before{ content:'\2611'; color:#777; }
.rich-content li[data-list=unchecked] > .ql-ui::before{ content:'\2610'; color:#777; }
.rich-content li[data-list=ordered]{ counter-increment: list-0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.rich-content li[data-list=ordered] > .ql-ui::before{ content: counter(list-0, decimal) '. '; }
.rich-content li[data-list=ordered].ql-indent-1{ counter-increment: list-1; counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.rich-content li[data-list=ordered].ql-indent-1 > .ql-ui::before{ content: counter(list-1, lower-alpha) '. '; }
.rich-content li[data-list=ordered].ql-indent-2{ counter-increment: list-2; counter-reset: list-3 list-4 list-5 list-6 list-7 list-8; }
.rich-content li[data-list=ordered].ql-indent-2 > .ql-ui::before{ content: counter(list-2, lower-roman) '. '; }
.rich-content li[data-list=ordered].ql-indent-3{ counter-increment: list-3; counter-reset: list-4 list-5 list-6 list-7 list-8; }
.rich-content li[data-list=ordered].ql-indent-3 > .ql-ui::before{ content: counter(list-3, decimal) '. '; }
.rich-content .ql-indent-1{ padding-left:3em; }
.rich-content li.ql-indent-1{ padding-left:4.5em; }
.rich-content .ql-indent-2{ padding-left:6em; }
.rich-content li.ql-indent-2{ padding-left:7.5em; }
.rich-content .ql-indent-3{ padding-left:9em; }
.rich-content li.ql-indent-3{ padding-left:10.5em; }
.rich-content .ql-indent-4{ padding-left:12em; }
.rich-content li.ql-indent-4{ padding-left:13.5em; }

/* ---------- Document (PDF) inline viewer ---------- */
/* Browsers render PDFs natively inside an <iframe>, so this needs no extra JS
   library — unlike the Slides flipbook, which renders each page to a canvas
   itself for its custom paging UI. */
.document-pdf-viewer{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#f3f4f6; height:75vh; min-height:420px; }
.document-pdf-viewer iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Article ("must-read") section ---------- */
.article-reader{ max-height: 480px; overflow-y: auto; border:1px solid var(--border); border-radius:12px; padding:1.25rem 1.5rem; background:#fff; }
.article-end-marker{ height:1px; }
.rich-content a{ color: var(--brand); text-decoration:underline; }
.rich-content blockquote{ border-left:3px solid #c7d2fe; padding-left:1rem; color:#6b7280; margin:.75rem 0; }
.rich-content img{ max-width:100%; border-radius:8px; margin:.5rem 0; }
.rich-content strong{ font-weight:700; }
.rich-content code{ background:#f3f4f6; padding:.1rem .35rem; border-radius:4px; font-size:.85em; }
.rich-content pre{ background:#111827; color:#f9fafb; padding:.75rem 1rem; border-radius:8px; overflow-x:auto; margin:.5rem 0; }

/* ---------- Full-page Article/blog editor (admin builder) ---------- */
/* #sArticleEditor is a flex child (flex-1) sized by its parent modal, which is
   expanded to near-fullscreen (see toggleTypeFields() in module-builder.html)
   whenever the Article content type is selected. Quill renders a toolbar +
   .ql-container inside this div — make the container fill all remaining
   height so the writing surface is genuinely full-page, not a small box. */
#sArticleEditor{ display:flex; flex-direction:column; min-height:0; }
#sArticleEditor .ql-toolbar{ flex-shrink:0; border-top-left-radius:10px; border-top-right-radius:10px; }
#sArticleEditor .ql-container{ flex:1; min-height:0; overflow-y:auto; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size:15.5px; }
#sArticleEditor .ql-editor{ min-height:100%; line-height:1.7; }

/* Video embed iframe (Vimeo/YouTube) */
.video-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- Video Library: Add-video modal tabs + upload progress ---------- */
.tab-btn{ padding:.55rem 1rem; border-radius:8px 8px 0 0; font-weight:600; font-size:.875rem; color:#6b7280; border-bottom:2px solid transparent; cursor:pointer; }
.tab-btn.tab-active{ color: var(--brand); border-bottom-color: var(--brand); }
.upload-progress-track{ background:#eef0f4; border-radius:999px; overflow:hidden; height:10px; }
.upload-progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg,#f97316,#eb5a1e); transition: width .2s ease; }

/* ---------- Video Library: in-browser recorder (Loom-style) ---------- */
.record-mode-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem;
  border:1.5px solid var(--border); border-radius:14px; padding:1.1rem .75rem;
  color:#4b5563; cursor:pointer; transition: all .15s ease; background:#fff;
}
.record-mode-card i{ color:#9ca3af; transition: color .15s ease; }
.record-mode-card:hover{ border-color:#ffb38a; background: var(--brand-light); }
.record-mode-card.selected{ border-color: var(--brand); background: var(--brand-light); color: var(--ink); }
.record-mode-card.selected i{ color: var(--brand); }
.rec-audio-bar{ width:5px; border-radius:3px; background:#ff8a5c; transition: height .08s ease; }

/* Webcam bubble size picker (Screen + Camera mode only) -- same card style
   as the mode picker above, but each card shows a small circle preview
   scaled to represent Small/Medium/Large relative to a mock screen frame. */
.bubble-size-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:14px; padding:1rem .5rem;
  color:#4b5563; cursor:pointer; transition: all .15s ease; background:#fff;
}
.bubble-size-card:hover{ border-color:#ffb38a; background: var(--brand-light); }
.bubble-size-card.selected{ border-color: var(--brand); background: var(--brand-light); color: var(--ink); }
.bubble-size-preview{
  display:block; border-radius:50%; background:#d1d5db; border:2px solid #9ca3af;
  box-sizing:border-box;
}
.bubble-size-card.selected .bubble-size-preview{ background: var(--brand); border-color: var(--brand); opacity:.85; }
.bubble-size-preview-tiny{ width:14px; height:14px; }
.bubble-size-preview-small{ width:20px; height:20px; }
.bubble-size-preview-medium{ width:32px; height:32px; }
.bubble-size-preview-large{ width:44px; height:44px; }

/* Compact pill version of the same size picker, used live on Step 2 next to
   the recording preview (in addition to the bigger cards on Step 1) so the
   size can be changed while actually looking at the composited preview. */
.bubble-size-pill{
  border:1.5px solid var(--border); border-radius:999px; padding:.4rem 1rem;
  font-size:.75rem; font-weight:600; color:#4b5563; cursor:pointer;
  background:#fff; transition: all .15s ease;
}
.bubble-size-pill:hover{ border-color:#ffb38a; background: var(--brand-light); }
.bubble-size-pill.selected{ border-color: var(--brand); background: var(--brand); color:#fff; }

/* The composite canvas shows a grab cursor over the draggable webcam bubble
   (toggled between 'grab'/'grabbing'/'default' in js/video-recorder.js based
   on pointer position) -- default to 'default' so it doesn't look draggable
   before JS has measured the bubble's position on the very first frame. */
#recCompositeCanvas{ cursor:default; touch-action:none; }