/* IDS Learn – Frontend Styles (CSS variable driven) */
*,*::before,*::after{box-sizing:border-box}

.ids-course-wrap,.ids-learn-wrap,.ids-dashboard,.ids-course-list,.ids-auth-wrap{
  font-family:var(--ids-font_family);color:var(--ids-text_color);font-size:var(--ids-font_size_base);background:var(--ids-bg_color)}

/* Buttons */
.ids-btn{display:inline-flex;align-items:center;gap:6px;padding:var(--ids-btn_padding);border-radius:var(--ids-btn_radius);font-weight:var(--ids-btn_font_weight);font-family:var(--ids-font_family);border:none;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .1s;line-height:1}
.ids-btn:active{transform:scale(.97)}
.ids-btn-primary{background:var(--ids-btn_primary_bg);color:var(--ids-btn_primary_text)}
.ids-btn-primary:hover{background:var(--ids-btn_primary_hover)}
.ids-btn-secondary{background:var(--ids-btn_secondary_bg);color:var(--ids-btn_secondary_text)}
.ids-btn-accent{background:var(--ids-accent_color);color:#fff}
.ids-btn-done{background:var(--ids-completed_color);color:#fff;cursor:default}
.ids-btn-sm{padding:7px 14px;font-size:13px}
.ids-btn-next{background:transparent;color:var(--ids-primary_color);border:2px solid var(--ids-primary_color)}

/* Progress top bar */
.ids-progress-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;background:var(--ids-secondary_color);padding:10px 20px}
.ids-progress-track{flex:1;background:var(--ids-progress_bg);border-radius:var(--ids-progress_radius);height:var(--ids-progress_height);overflow:hidden}
.ids-progress-fill{height:100%;background:var(--ids-primary_color);border-radius:var(--ids-progress_radius);transition:width .5s ease}
.ids-progress-pct{color:var(--ids-primary_color);font-weight:700;font-size:13px;white-space:nowrap}

/* Cards / Grid */
.ids-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:20px}
.ids-course-card{background:var(--ids-card_bg);border:1px solid var(--ids-card_border);border-radius:var(--ids-card_radius);box-shadow:var(--ids-card_shadow);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:box-shadow .2s}
.ids-course-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.12)}
.ids-card-thumb img{width:100%;height:180px;object-fit:cover;display:block}
.ids-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.ids-card-title{font-family:var(--ids-heading_font);font-size:18px;margin:0 0 8px;color:var(--ids-text_color)}
.ids-card-excerpt{color:var(--ids-text_muted);font-size:14px;margin:0 0 12px}

/* Badge */
.ids-badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700}
.ids-badge-complete{background:var(--ids-completed_color);color:#fff}

/* Progress bar */
.ids-progress-bar{background:var(--ids-progress_bg);border-radius:var(--ids-progress_radius);height:var(--ids-progress_height);overflow:hidden;margin:8px 0 4px}
.ids-progress-label{color:var(--ids-text_muted);font-size:12px;margin:0 0 12px}

/* Course hero */
.ids-course-hero{padding:var(--ids-section_padding)}
.ids-hero-thumb img{width:100%;max-height:360px;object-fit:cover;border-radius:var(--ids-card_radius);margin-bottom:24px}
.ids-course-title{font-family:var(--ids-heading_font);font-size:36px;margin:8px 0 16px}
.ids-course-desc{font-size:16px;color:var(--ids-text_muted);margin-bottom:24px}

/* Notices */
.ids-notice{padding:12px 16px;border-radius:6px;margin-bottom:16px}
.ids-notice-warn{background:#fff3cd;border:1px solid #ffb300;color:#7a4f00}
.ids-notice-success{background:#e8f5e9;border:1px solid #4CAF50;color:#1b5e20}
.ids-notice-error{background:#fce4ec;border:1px solid #e91e63;color:#880e4f}

/* Course content */
.ids-course-content{padding:0 var(--ids-section_padding) var(--ids-section_padding)}
.ids-section-title{font-family:var(--ids-heading_font);font-size:22px;margin:0 0 16px}
.ids-lesson-block{margin-bottom:16px;border:1px solid var(--ids-card_border);border-radius:var(--ids-card_radius);overflow:hidden}
.ids-lesson-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ids-surface_color);font-size:15px}
.ids-lesson-header.ids-done{background:#e8f5e9}
.ids-check{color:var(--ids-completed_color);font-weight:700}
.ids-topic-list{padding:8px 0}
.ids-topic-row{display:flex;align-items:center;gap:10px;padding:8px 24px;font-size:14px;border-top:1px solid var(--ids-card_border)}
.ids-topic-row.ids-done a{color:var(--ids-text_muted)}
.ids-topic-row.ids-locked{color:var(--ids-locked_color)}
.ids-topic-row a{color:var(--ids-text_color);text-decoration:none}
.ids-topic-row a:hover{color:var(--ids-primary_color)}

/* Learn layout */
.ids-learn-layout{display:grid;grid-template-columns:var(--ids-sidebar_width) 1fr;min-height:calc(100vh - 80px)}
@media(max-width:768px){.ids-learn-layout{grid-template-columns:1fr}.ids-sidebar{display:none}}

/* Sidebar */
.ids-sidebar{background:var(--ids-sidebar_bg);color:var(--ids-sidebar_text);overflow-y:auto;position:sticky;top:48px;height:calc(100vh - 48px)}
.ids-sidebar-header{display:flex;align-items:center;gap:10px;padding:16px;background:rgba(0,0,0,.2);font-weight:700;font-size:15px}
.ids-sidebar-back{color:var(--ids-sidebar_text);text-decoration:none;font-size:20px;line-height:1}
.ids-sidebar-lesson{border-top:1px solid rgba(255,255,255,.1)}
.ids-sidebar-lesson-title{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.6)}
.ids-sidebar-lesson-title.ids-done{color:var(--ids-completed_color)}
.ids-sidebar-topic{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 32px;font-size:13px;cursor:pointer;border-top:1px solid rgba(255,255,255,.06);transition:background .15s}
.ids-sidebar-topic a{color:var(--ids-sidebar_text);text-decoration:none}
.ids-sidebar-topic:hover{background:rgba(255,255,255,.08)}
.ids-sidebar-topic.ids-current{background:var(--ids-primary_color)}
.ids-sidebar-topic.ids-current a{color:var(--ids-secondary_color);font-weight:700}
.ids-sidebar-topic.ids-done a{color:rgba(255,255,255,.5)}
.ids-sidebar-topic.ids-locked{opacity:.6;cursor:not-allowed}
.ids-scheck{color:var(--ids-primary_color);font-weight:700}
.ids-scheck.ids-empty{opacity:.4}

/* Learn main */
.ids-learn-main{padding:32px;max-width:860px}
.ids-topic-title{font-family:var(--ids-heading_font);font-size:32px;margin:0 0 16px}
.ids-topic-content{line-height:1.7;font-size:16px;margin-bottom:24px}
.ids-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--ids-card_radius);margin-bottom:24px;background:#000}
.ids-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.ids-nav-row{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--ids-card_border)}
.ids-download-box{margin:16px 0;padding:16px;background:var(--ids-surface_color);border-radius:var(--ids-card_radius)}

/* Quiz */
.ids-quiz-wrap{margin:32px 0;padding:24px;background:var(--ids-surface_color);border-radius:var(--ids-card_radius);border:1px solid var(--ids-card_border)}
.ids-quiz-title{font-size:20px;margin:0 0 20px}
.ids-question-block{margin-bottom:20px}
.ids-q-text{margin-bottom:8px}
.ids-answer-label{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.ids-quiz-passed{color:var(--ids-completed_color);font-weight:700;font-size:16px}
#ids-quiz-result{padding:16px;border-radius:6px}
#ids-quiz-result.ids-pass{background:#e8f5e9;color:#2e7d32;border:1px solid #4CAF50}
#ids-quiz-result.ids-fail{background:#fce4ec;color:#880e4f;border:1px solid #e91e63}

/* Assignment */
.ids-assignment-wrap{margin:32px 0;padding:24px;background:var(--ids-surface_color);border-radius:var(--ids-card_radius);border:1px solid var(--ids-card_border)}
.ids-assignment-wrap textarea{padding:10px;border:1px solid var(--ids-card_border);border-radius:4px;font-family:var(--ids-font_family);font-size:14px}

/* Auth forms */
.ids-auth-wrap{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:40px 20px}
.ids-auth-box{background:var(--ids-card_bg);border:1px solid var(--ids-card_border);border-radius:var(--ids-card_radius);box-shadow:var(--ids-card_shadow);padding:36px;width:100%;max-width:440px}
.ids-auth-box h2{font-family:var(--ids-heading_font);margin:0 0 24px;font-size:24px}
.ids-form-group{margin-bottom:16px}
.ids-form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ids-text_muted)}
.ids-form-group input{width:100%;padding:10px 12px;border:1px solid var(--ids-card_border);border-radius:4px;font-size:15px;font-family:var(--ids-font_family);background:var(--ids-bg_color);color:var(--ids-text_color);transition:border-color .2s}
.ids-form-group input:focus{outline:none;border-color:var(--ids-primary_color)}
.ids-msg{padding:10px 14px;border-radius:4px;margin-bottom:16px;font-size:14px}
.ids-msg.error{background:#fce4ec;color:#880e4f;border:1px solid #e91e63}
.ids-msg.success{background:#e8f5e9;color:#2e7d32;border:1px solid #4CAF50}

/* Filter bar */
.ids-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ids-filter-btn{padding:7px 16px;border-radius:30px;border:1px solid var(--ids-card_border);text-decoration:none;color:var(--ids-text_color);font-size:13px;transition:all .2s;background:var(--ids-card_bg)}
.ids-filter-btn:hover,.ids-filter-btn.active{background:var(--ids-primary_color);color:var(--ids-secondary_color);border-color:var(--ids-primary_color);font-weight:700}

/* Modal */
.ids-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center}
.ids-modal-box{background:var(--ids-card_bg);border-radius:var(--ids-card_radius);padding:28px;max-width:380px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.ids-modal-box h3{margin:0 0 16px}

/* Dashboard */
.ids-dashboard{padding:var(--ids-section_padding)}
.ids-dashboard-title{font-family:var(--ids-heading_font);font-size:28px;margin:0 0 24px}

/* Enroll invite */
.ids-enroll-invite{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.ids-enroll-invite input{padding:10px 14px;border:1px solid var(--ids-card_border);border-radius:var(--ids-btn_radius);font-size:15px}