/* VETInnovate Learning Centre v1.0 */


/* CONTAINER - break out of theme like dashboard */
.vi-lc{width:100vw !important;max-width:100vw !important;margin-left:calc(-50vw + 50%) !important;padding:32px 24px 64px !important;box-sizing:border-box !important;display:flex !important;flex-direction:column !important;align-items:center !important}
.vi-lc>*{width:100% !important;max-width:960px !important}

/* PAGE HEADER */
.vi-lc-header{text-align:center !important;margin-bottom:32px !important;padding-bottom:24px !important;border-bottom:1px solid var(--vi-bdr) !important}
.vi-lc-header h2{font-size:1.6rem !important;color:var(--vi) !important;margin:0 0 10px !important}
.vi-lc-header p{font-size:.92rem !important;color:var(--vi-txt2) !important;line-height:1.6 !important;margin:0 auto !important;max-width:700px !important}

/* PROGRESS BAR */
.vi-lc-progress{background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:var(--vi-sh) !important;padding:20px 24px !important;margin-bottom:24px !important}
.vi-lc-progress__header{display:flex !important;align-items:center !important;justify-content:space-between !important;margin-bottom:14px !important;flex-wrap:wrap !important;gap:12px !important}
.vi-lc-progress__header h3{font-size:1rem !important;color:var(--vi) !important;margin:0 !important}
.vi-lc-progress__stats{display:flex !important;gap:24px !important}
.vi-lc-stat{text-align:center !important}
.vi-lc-stat__num{display:block !important;font-size:1.4rem !important;font-weight:700 !important;color:var(--vi) !important;line-height:1.2 !important}
.vi-lc-stat__label{font-size:.75rem !important;color:var(--vi-txt2) !important}
.vi-lc-progress__bar{height:8px !important;background:#e8e8e8 !important;border-radius:4px !important;overflow:hidden !important}
.vi-lc-progress__fill{height:100% !important;background:linear-gradient(90deg,var(--vi),var(--vi-lt)) !important;border-radius:4px !important;transition:width .5s ease !important}

/* RECOMMENDATION BANNER */
.vi-lc-recommend{background:#fff8e1 !important;border:1px solid #ffd54f !important;border-radius:var(--vi-r) !important;padding:18px 20px !important;margin-bottom:24px !important;display:flex !important;align-items:flex-start !important;gap:14px !important}
.vi-lc-recommend svg{flex-shrink:0 !important;color:#f59e0b !important;margin-top:2px !important}
.vi-lc-recommend strong{display:block !important;font-size:.93rem !important;color:var(--vi-txt) !important;margin-bottom:4px !important}
.vi-lc-recommend p{font-size:.85rem !important;color:var(--vi-txt2) !important;margin:0 0 10px !important;line-height:1.5 !important}
.vi-lc-recommend__pills{display:flex !important;flex-wrap:wrap !important;gap:6px !important}
.vi-lc-pill{background:#fef3c7 !important;border:1px solid #f59e0b !important;border-radius:20px !important;padding:3px 12px !important;font-size:.78rem !important;font-weight:600 !important;color:#92400e !important}

/* MODULE GRID */
.vi-lc-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px !important}
.vi-lc-card{position:relative !important;background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:var(--vi-sh) !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;transition:box-shadow .2s,transform .2s !important;text-decoration:none !important;color:inherit !important;cursor:pointer !important}
.vi-lc-card:hover{box-shadow:var(--vi-sh2) !important;transform:translateY(-3px) !important}
.vi-lc-card:focus-visible{outline:2px solid var(--vi-acc) !important;outline-offset:2px !important}

/* Weak/recommended card */
.vi-lc-card--weak{border:2px solid #f59e0b !important}
.vi-lc-card__badge{position:absolute !important;top:10px !important;right:10px !important;background:#f59e0b !important;color:#fff !important;font-size:.68rem !important;font-weight:700 !important;padding:2px 8px !important;border-radius:20px !important;text-transform:uppercase !important;letter-spacing:.04em !important;z-index:2 !important}
.vi-lc-card__tooltip{display:none !important;position:absolute !important;top:32px !important;right:10px !important;background:var(--vi) !important;color:#fff !important;font-size:.78rem !important;padding:8px 12px !important;border-radius:6px !important;z-index:3 !important;max-width:220px !important;line-height:1.4 !important;box-shadow:var(--vi-sh2) !important;pointer-events:none !important}
.vi-lc-card__tooltip::before{content:'' !important;position:absolute !important;top:-5px !important;right:16px !important;width:10px !important;height:10px !important;background:var(--vi) !important;transform:rotate(45deg) !important}
.vi-lc-card--weak:hover .vi-lc-card__tooltip{display:block !important}

/* Card layout */
.vi-lc-card__icon{height:110px !important;background:var(--vi-bg) !important;display:flex !important;align-items:center !important;justify-content:center !important;position:relative !important}
.vi-lc-card__icon svg{color:var(--vi) !important}
.vi-lc-card__num{position:absolute !important;top:10px !important;left:10px !important;width:28px !important;height:28px !important;background:var(--vi) !important;color:#fff !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:.78rem !important;font-weight:700 !important}
.vi-lc-card__body{padding:16px 16px 8px !important;flex:1 !important}
.vi-lc-card__body h3{font-size:.93rem !important;color:var(--vi) !important;margin:0 0 6px !important;line-height:1.3 !important}
.vi-lc-card__body p{font-size:.8rem !important;color:var(--vi-txt2) !important;margin:0 !important;line-height:1.5 !important}
.vi-lc-card__footer{padding:12px 16px !important;border-top:1px solid var(--vi-bdr) !important;display:flex !important;align-items:center !important;justify-content:space-between !important}
.vi-lc-card__meta{font-size:.75rem !important;color:var(--vi-txt2) !important}
.vi-lc-card__status{display:flex !important;align-items:center !important;gap:5px !important;font-size:.78rem !important;font-weight:600 !important}
.vi-lc-card__status--not-started{color:var(--vi-txt2) !important}
.vi-lc-card__status--in-progress{color:#f59e0b !important}
.vi-lc-card__status--completed{color:#16a34a !important}
.vi-lc-dot{width:7px !important;height:7px !important;border-radius:50% !important;display:inline-block !important}
.vi-lc-dot--not-started{background:var(--vi-bdr) !important}
.vi-lc-dot--in-progress{background:#f59e0b !important}
.vi-lc-dot--completed{background:#16a34a !important}

/* Score bar on card */
.vi-lc-card__score{display:flex !important;align-items:center !important;gap:8px !important;padding:8px 16px 12px !important;font-size:.75rem !important;font-weight:600 !important;color:var(--vi-txt2) !important}
.vi-lc-card__score-bar{flex:1 !important;height:5px !important;background:#e8e8e8 !important;border-radius:3px !important;overflow:hidden !important}
.vi-lc-card__score-fill{height:100% !important;border-radius:3px !important}
.vi-lc-card__score-fill--high{background:#66bb6a !important}
.vi-lc-card__score-fill--mid{background:#ffa726 !important}
.vi-lc-card__score-fill--low{background:#ef5350 !important}

/* BACK LINK */
.vi-lc-back{margin-bottom:20px !important}
.vi-lc-back .vi-btn{gap:6px !important}

/* MODULE HEADER */
.vi-lc-module-header{display:flex !important;align-items:center !important;gap:16px !important;margin-bottom:24px !important;padding-bottom:20px !important;border-bottom:1px solid var(--vi-bdr) !important;flex-wrap:wrap !important}
.vi-lc-module-num{width:44px !important;height:44px !important;background:var(--vi) !important;color:#fff !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:1.1rem !important;font-weight:700 !important;flex-shrink:0 !important}
.vi-lc-module-header h2{font-size:1.4rem !important;color:var(--vi) !important;margin:0 0 4px !important}
.vi-lc-module-header p{font-size:.88rem !important;color:var(--vi-txt2) !important;margin:0 !important}
.vi-lc-badge{display:inline-flex !important;align-items:center !important;gap:6px !important;padding:5px 14px !important;border-radius:20px !important;font-size:.8rem !important;font-weight:600 !important}
.vi-lc-badge--success{background:#e8f5e9 !important;color:#2e7d32 !important;margin-left:auto !important}

/* TABS */
.vi-lc-tabs{display:flex !important;border-bottom:2px solid var(--vi-bdr) !important;margin-bottom:24px !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important}
.vi-lc-tab{padding:12px 20px !important;font-size:.88rem !important;font-weight:600 !important;color:var(--vi-txt2) !important;text-decoration:none !important;border-bottom:2px solid transparent !important;margin-bottom:-2px !important;white-space:nowrap !important;transition:all .15s !important}
.vi-lc-tab:hover{color:var(--vi) !important}
.vi-lc-tab--active{color:var(--vi) !important;border-bottom-color:var(--vi) !important}

/* CONTENT AREA */
.vi-lc-content{background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:var(--vi-sh) !important;padding:36px 32px !important;min-height:300px !important}
.vi-lc-content h3{font-size:1.15rem !important;color:var(--vi) !important;margin:0 0 16px !important}
.vi-lc-content>p{font-size:.9rem !important;color:var(--vi-txt2) !important;line-height:1.55 !important;margin:0 0 20px !important}

/* PLACEHOLDER */
.vi-lc-placeholder{background:var(--vi-bg) !important;border:2px dashed var(--vi-bdr) !important;border-radius:var(--vi-r) !important;padding:48px 24px !important;text-align:center !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;min-height:180px !important}
.vi-lc-placeholder svg{color:var(--vi-txt2) !important;opacity:.4 !important;margin-bottom:14px !important}
.vi-lc-placeholder p{font-size:.88rem !important;color:var(--vi-txt2) !important;margin:0 !important;max-width:400px !important}

/* RESOURCES GRID */
.vi-lc-resources{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:16px !important;margin-top:20px !important}
.vi-lc-resource{background:var(--vi-bg) !important;border:1px solid var(--vi-bdr) !important;border-radius:var(--vi-r) !important;padding:24px !important;text-align:center !important;transition:border-color .15s !important}
.vi-lc-resource:hover{border-color:var(--vi) !important}
.vi-lc-resource svg{color:var(--vi) !important;margin:0 auto 10px !important;display:block !important}
.vi-lc-resource h4{font-size:.9rem !important;color:var(--vi) !important;margin:0 0 6px !important}
.vi-lc-resource p{font-size:.8rem !important;color:var(--vi-txt2) !important;margin:0 0 14px !important;line-height:1.45 !important}
.vi-lc-resource .vi-btn{width:100% !important;justify-content:center !important;gap:6px !important;text-transform:none !important;text-shadow:none !important;letter-spacing:normal !important;font-family:inherit !important;box-shadow:none !important}
.vi-lc-resource .vi-btn:hover,.vi-lc-resource .vi-btn:focus,.vi-lc-resource .vi-btn:active{box-shadow:none !important;text-shadow:none !important}
.vi-lc-modal-btn--empty{opacity:.65 !important}
.vi-lc .material-symbols-outlined,.vi-lc-modal .material-symbols-outlined{text-shadow:none !important;box-shadow:none !important}

/* SLIDES EMBED */
.vi-lc-slides-embed{position:relative !important;padding-bottom:56.25% !important;height:0 !important;overflow:hidden !important;border-radius:var(--vi-r) !important;border:1px solid var(--vi-bdr) !important;margin-top:16px !important}
.vi-lc-slides-embed iframe{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;border:none !important}

/* QUIZ CTA */
.vi-lc-quiz-cta{background:var(--vi) !important;border-radius:var(--vi-r) !important;padding:36px 32px !important;text-align:center !important;margin-top:24px !important}
.vi-lc-quiz-cta h4{color:#fff !important;font-size:1.1rem !important;margin:0 0 8px !important}
.vi-lc-quiz-cta p{color:rgba(255,255,255,.85) !important;font-size:.88rem !important;margin:0 0 20px !important;line-height:1.55 !important}
.vi-lc-quiz-meta{display:flex !important;justify-content:center !important;gap:24px !important;margin-bottom:20px !important;font-size:.82rem !important;color:rgba(255,255,255,.7) !important}
.vi-lc-quiz-meta span{display:inline-flex !important;align-items:center !important;gap:5px !important}
.vi-lc-quiz-meta svg{color:rgba(255,255,255,.6) !important}
.vi-lc-quiz-cta .vi-btn{background:#fff !important;color:var(--vi) !important;border-color:#fff !important}
.vi-lc-quiz-cta .vi-btn:hover{background:var(--vi-bg) !important}

/* Already passed banner */
.vi-lc-quiz-passed{background:#e8f5e9 !important;border:1px solid #a5d6a7 !important;border-radius:var(--vi-r) !important;padding:18px 20px !important;display:flex !important;align-items:center !important;gap:14px !important;margin-bottom:16px !important}
.vi-lc-quiz-passed svg{color:#2e7d32 !important;flex-shrink:0 !important}
.vi-lc-quiz-passed strong{display:block !important;font-size:.9rem !important;color:#2e7d32 !important}
.vi-lc-quiz-passed p{font-size:.82rem !important;color:var(--vi-txt2) !important;margin:0 !important}

/* QUIZ INTERFACE (rendered by JS) */
.vi-lc-quiz-heading{font-size:1.3rem !important;color:var(--vi) !important;margin:0 0 24px !important}
.vi-lc-quiz-progress{background:var(--vi-bg) !important;border-radius:var(--vi-r) !important;padding:16px 20px !important;display:flex !important;align-items:center !important;gap:16px !important;margin-bottom:24px !important}
.vi-lc-quiz-progress__bar{flex:1 !important;height:7px !important;background:#e8e8e8 !important;border-radius:4px !important;overflow:hidden !important}
.vi-lc-quiz-progress__fill{height:100% !important;background:var(--vi) !important;border-radius:4px !important;transition:width .3s !important}
.vi-lc-quiz-progress__text{font-size:.85rem !important;font-weight:600 !important;white-space:nowrap !important;color:var(--vi-txt) !important}
.vi-lc-qcard{background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:var(--vi-sh) !important;padding:32px !important;margin-bottom:20px !important}
.vi-lc-qcard__label{font-size:.85rem !important;color:var(--vi-txt2) !important;margin:0 0 6px !important;font-weight:600 !important}
.vi-lc-qcard__q{font-size:1.05rem !important;color:var(--vi-txt) !important;margin:0 0 24px !important;line-height:1.5 !important;font-weight:600 !important}
.vi-lc-qoptions{display:flex !important;flex-direction:column !important;gap:10px !important}
.vi-lc-qopt{display:flex !important;align-items:center !important;gap:14px !important;padding:14px 18px !important;border:2px solid var(--vi-bdr) !important;border-radius:var(--vi-r) !important;cursor:pointer !important;transition:all .15s !important;font-size:.9rem !important;color:var(--vi-txt) !important}
.vi-lc-qopt:hover{border-color:var(--vi) !important;background:rgba(30,58,95,.02) !important}
.vi-lc-qopt--selected{border-color:var(--vi) !important;background:rgba(30,58,95,.04) !important}
.vi-lc-qradio{width:20px !important;height:20px !important;border:2px solid var(--vi-bdr) !important;border-radius:50% !important;flex-shrink:0 !important;position:relative !important;transition:all .15s !important}
.vi-lc-qopt--selected .vi-lc-qradio{border-color:var(--vi) !important}
.vi-lc-qopt--selected .vi-lc-qradio::after{content:'' !important;position:absolute !important;top:3px !important;left:3px !important;width:10px !important;height:10px !important;background:var(--vi) !important;border-radius:50% !important}
.vi-lc-qactions{display:flex !important;justify-content:space-between !important;gap:12px !important;margin-top:24px !important}
.vi-lc-qactions .vi-btn{gap:6px !important}

/* RESULTS */
.vi-lc-results{background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:var(--vi-sh) !important;padding:48px 40px !important;text-align:center !important;max-width:600px !important;margin:0 auto !important}
.vi-lc-results__icon{width:72px !important;height:72px !important;border-radius:50% !important;margin:0 auto 20px !important;display:flex !important;align-items:center !important;justify-content:center !important}
.vi-lc-results__icon--pass{background:#e8f5e9 !important}
.vi-lc-results__icon--pass svg{color:#16a34a !important}
.vi-lc-results__icon--fail{background:#ffebee !important}
.vi-lc-results__icon--fail svg{color:#dc2626 !important}
.vi-lc-results h2{font-size:1.35rem !important;color:var(--vi) !important;margin:0 0 10px !important}
.vi-lc-results>p{color:var(--vi-txt2) !important;font-size:.9rem !important;margin:0 0 8px !important;line-height:1.55 !important}
.vi-lc-results__score{font-size:3rem !important;font-weight:700 !important;margin:20px 0 !important}
.vi-lc-results__score--pass{color:#16a34a !important}
.vi-lc-results__score--fail{color:#dc2626 !important}
.vi-lc-results__breakdown{background:var(--vi-bg) !important;border-radius:var(--vi-r) !important;padding:18px !important;margin:20px 0 !important;text-align:left !important}
.vi-lc-results__breakdown h4{font-size:.85rem !important;font-weight:700 !important;margin:0 0 10px !important;color:var(--vi-txt) !important}
.vi-lc-results__row{display:flex !important;justify-content:space-between !important;padding:7px 0 !important;font-size:.85rem !important;border-bottom:1px solid var(--vi-bdr) !important}
.vi-lc-results__row:last-child{border-bottom:none !important}
.vi-lc-results__actions{display:flex !important;gap:12px !important;justify-content:center !important;margin-top:24px !important;flex-wrap:wrap !important}

/* CERTIFICATE FORM */
.vi-lc-certificate-form{background:#e8f5e9 !important;border:1px solid #a5d6a7 !important;border-radius:var(--vi-r) !important;padding:20px !important;margin:20px 0 !important;text-align:left !important}
.vi-lc-certificate-form h4{font-size:.93rem !important;color:var(--vi-txt) !important;margin:0 0 6px !important}
.vi-lc-cert-module{font-size:.82rem !important;color:var(--vi-txt2) !important;margin:0 0 12px !important}
.vi-lc-cert-row{display:flex !important;gap:10px !important}
.vi-lc-cert-row input{flex:1 !important;padding:9px 13px !important;border:1.5px solid var(--vi-bdr) !important;border-radius:7px !important;font-size:.88rem !important;font-family:inherit !important;outline:none !important}
.vi-lc-cert-row input:focus{border-color:var(--vi) !important;box-shadow:0 0 0 3px rgba(33,150,243,.12) !important}

/* RESOURCE VIEWER MODAL */
.vi-lc-modal{position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;z-index:99999 !important;align-items:center !important;justify-content:center !important;display:flex !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;transition:opacity .15s !important}
.vi-lc-modal--open{visibility:visible !important;opacity:1 !important;pointer-events:auto !important}
.vi-lc-modal__overlay{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;background:rgba(0,0,0,.6) !important;cursor:pointer !important}
.vi-lc-modal__content{position:relative !important;width:90% !important;max-width:900px !important;height:80vh !important;background:var(--vi-w) !important;border-radius:var(--vi-r) !important;box-shadow:0 20px 60px rgba(0,0,0,.25) !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;z-index:1 !important}
.vi-lc-modal__header{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:16px 20px !important;border-bottom:1px solid var(--vi-bdr) !important;flex-shrink:0 !important}
.vi-lc-modal__header h4{font-size:1rem !important;color:var(--vi) !important;margin:0 !important}
.vi-lc-modal__close{background:none !important;border:none !important;cursor:pointer !important;color:var(--vi-txt2) !important;padding:4px !important;display:flex !important;align-items:center !important;border-radius:6px !important;box-shadow:none !important;text-shadow:none !important}
.vi-lc-modal__close:hover,.vi-lc-modal__close:focus,.vi-lc-modal__close:active{color:var(--vi) !important;background:var(--vi-bg) !important;box-shadow:none !important;text-shadow:none !important;outline:none !important}
.vi-lc-modal__body{flex:1 !important;overflow:hidden !important}
.vi-lc-modal__body iframe{width:100% !important;height:100% !important;border:none !important}
.vi-lc-modal__body .vi-lc-modal__unavailable{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;height:100% !important;color:var(--vi-txt2) !important;font-size:.9rem !important;gap:12px !important}
@media(max-width:560px){
    .vi-lc-modal__content{width:96% !important;height:90vh !important;border-radius:8px !important}
    .vi-lc-modal__header{padding:12px 16px !important}
}

/* LOADING */
.vi-lc-loading{text-align:center !important;padding:48px 24px !important;color:var(--vi-txt2) !important;font-size:.9rem !important}

/* RESPONSIVE */
@media(max-width:860px){
    .vi-lc-grid{grid-template-columns:repeat(2,1fr) !important}
    .vi-lc-resources{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:560px){
    .vi-lc{padding:20px 16px 48px !important}
    .vi-lc-grid{grid-template-columns:1fr !important}
    .vi-lc-resources{grid-template-columns:1fr !important}
    .vi-lc-content{padding:24px 20px !important}
    .vi-lc-qcard{padding:24px 18px !important}
    .vi-lc-results{padding:32px 22px !important}
    .vi-lc-quiz-meta{flex-direction:column !important;gap:8px !important}
    .vi-lc-qactions{flex-direction:column !important}
    .vi-lc-qactions .vi-btn{width:100% !important;justify-content:center !important}
    .vi-lc-results__actions{flex-direction:column !important}
    .vi-lc-results__actions .vi-btn{width:100% !important;justify-content:center !important}
    .vi-lc-cert-row{flex-direction:column !important}
    .vi-lc-module-header{flex-direction:column !important;align-items:flex-start !important}
    .vi-lc-progress__header{flex-direction:column !important;align-items:flex-start !important}
    .vi-lc-recommend{flex-direction:column !important}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
    .vi-lc-card{transition:none !important}
    .vi-lc-card:hover{transform:none !important}
    .vi-lc-progress__fill,.vi-lc-quiz-progress__fill{transition:none !important}
}
