/* Abimbola Coding Program – Frontend Styles v6.0.0 */

.abimbola-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    color: #1a1a2e;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.abimbola-curriculum-header {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 2rem;
}
.abimbola-curriculum-title  { font-size: 2.2rem; margin: 0 0 .4rem; color: #e2b96a; }
.abimbola-curriculum-subtitle { font-size: 1rem; opacity: .8; margin: 0 0 1.5rem; }

/* ── Progress bars ─────────────────────────────────────────────────────── */
.abimbola-overall-progress   { margin: 1rem auto; max-width: 600px; }
.abimbola-progress-label     { display: block; margin-bottom: .3rem; font-size: .9rem; }
.abimbola-progress-bar-wrap  { background: rgba(255,255,255,.2); border-radius: 20px; height: 10px; overflow: hidden; }
.abimbola-progress-bar-wrap--wide { background: #e9edf2; margin-bottom: .4rem; }
.abimbola-progress-bar       { background: linear-gradient(90deg, #e2b96a, #d4a059); height: 100%; border-radius: 20px; transition: width .4s ease; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.abimbola-btn {
    display: inline-block;
    padding: .55rem 1.4rem;
    background: #e2b96a;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
}
.abimbola-btn:hover            { background: #d4a059; color: #1a1a2e; }
.abimbola-btn--sm              { padding: .3rem .8rem; font-size: .8rem; }
.abimbola-btn--enrolled        { background: #2ecc71; color: #fff; }
.abimbola-btn--complete        { background: #2ecc71; color: #fff; }
.abimbola-btn--danger          { background: #e74c3c; color: #fff; }
.abimbola-btn--enroll          { margin-top: .8rem; }

/* ── Badge ──────────────────────────────────────────────────────────────── */
.abimbola-badge { display: inline-block; padding: .35rem .9rem; border-radius: 20px; font-size: .85rem; font-weight: 700; }
.abimbola-badge--enrolled { background: #2ecc71; color: #fff; }

/* ── Module cards grid ────────────────────────────────────────────────── */
.abimbola-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.abimbola-module-card {
    border: 1px solid #dde2ea;
    border-radius: 10px;
    padding: 1.2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}
.abimbola-module-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }

.abimbola-module-card__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
}
.abimbola-module-card__number { font-size: .75rem; font-weight: 700; color: #e2b96a; white-space: nowrap; }
.abimbola-module-card__bar-wrap { flex: 1; background: #e9edf2; border-radius: 20px; height: 7px; overflow: hidden; }
.abimbola-module-card__bar  { background: linear-gradient(90deg, #e2b96a, #d4a059); height: 100%; border-radius: 20px; transition: width .4s; }
.abimbola-module-card__pct  { font-size: .75rem; color: #888; white-space: nowrap; min-width: 28px; text-align: right; }
.abimbola-module-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: #1a1a2e; }
.abimbola-module-card__desc  { font-size: .85rem; color: #666; margin: 0 0 .8rem; }
.abimbola-module-card__meta  { font-size: .8rem; color: #999; margin: .6rem 0 0; text-align: right; }

/* ── Lesson rows inside card ─────────────────────────────────────────── */
.abimbola-module-card__lessons { list-style: none; margin: 0; padding: 0; border-top: 1px solid #eee; }
.abimbola-lesson-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: .82rem;
    flex-wrap: wrap;
}
.abimbola-lesson-row--complete .abimbola-lesson-row__title { text-decoration: line-through; color: #aaa; }
.abimbola-lesson-row__check  { color: #2ecc71; font-weight: 700; width: 14px; flex-shrink: 0; }
.abimbola-lesson-row__title  { flex: 1; }
.abimbola-lesson-row__watch  { font-size: .75rem; color: #e74c3c; text-decoration: none; white-space: nowrap; }
.abimbola-lesson-row__watch:hover { text-decoration: underline; }
.abimbola-lesson-row__toggle { font-size: .72rem; padding: .15rem .5rem; border-radius: 4px; background: #f0f0f0; border: 1px solid #ccc; cursor: pointer; }
.abimbola-lesson-row__source { font-size: .68rem; color: #bbb; white-space: nowrap; }

/* ── Lesson detail view ──────────────────────────────────────────────── */
.abimbola-breadcrumb        { margin-bottom: 1rem; font-size: .85rem; }
.abimbola-breadcrumb a      { color: #e2b96a; text-decoration: none; }
.abimbola-lesson-view__title { font-size: 1.6rem; margin-bottom: .4rem; }
.abimbola-lesson-view__desc  { color: #555; margin-bottom: .8rem; }
.abimbola-lesson-view__meta  { display: flex; gap: 1rem; font-size: .82rem; color: #888; margin-bottom: 1.2rem; flex-wrap: wrap; }
.abimbola-lesson-view__actions { margin-top: 1.5rem; }

.abimbola-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    margin-bottom: .5rem;
}
.abimbola-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.abimbola-video-link { font-size: .85rem; text-align: right; }
.abimbola-video-link a { color: #e2b96a; }

/* ── Module list view ────────────────────────────────────────────────── */
.abimbola-lesson-list { list-style: none; margin: 0; padding: 0; }
.abimbola-lesson-list__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid #eee;
}
.abimbola-lesson-list__item--complete { opacity: .6; }
.abimbola-lesson-list__info { display: flex; gap: .8rem; flex: 1; }
.abimbola-lesson-list__check { width: 28px; height: 28px; border-radius: 50%; background: #e9edf2; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.abimbola-lesson-list__item--complete .abimbola-lesson-list__check { background: #2ecc71; color: #fff; }
.abimbola-lesson-list__actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.abimbola-tag { display: inline-block; padding: .15rem .5rem; background: #f0f0f0; border-radius: 12px; font-size: .75rem; color: #666; margin-right: .3rem; }

/* ── Dashboard table ────────────────────────────────────────────────── */
.abimbola-dashboard__overall { margin-bottom: 1.5rem; }
.abimbola-dashboard__table td { vertical-align: middle; }
.abimbola-dashboard__table .abimbola-progress-bar-wrap { width: 120px; display: inline-block; margin-right: .4rem; }

/* ── Notices / errors ────────────────────────────────────────────────── */
.abimbola-error  { color: #e74c3c; }
.abimbola-notice { color: #666; font-style: italic; }

@media (max-width: 600px) {
    .abimbola-modules-grid { grid-template-columns: 1fr; }
    .abimbola-lesson-list__item { flex-direction: column; }
}