/* ===========================================================
   Courses — App-shell layout
   Uses tokens from /static/css/base/variables.css
   =========================================================== */

.courses-page {
    --c2-appbar-height: 90px;
    background: var(--bg-app, #FBFAF8);
    color: #1a1a1a;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ----- App bar ----- */
.c2-appbar {
    min-height: var(--c2-appbar-height, 90px);
    height: auto;
    background: #fff;
    border-bottom: 1px solid var(--color-border-light, #E1E5E9);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: clamp(12px, 2vw, 20px);
    position: sticky;
    top: 0;
    z-index: 52;
    flex-shrink: 0;
}
.c2-appbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    margin-right: 0;
    flex-shrink: 0;
}
/* Two markup shapes are in use and both are supported: one <a> wrapping the
   mark and the wordmark (courses), or two sibling <a>s — mark to /, wordmark
   to /courses (account, admin, chat, graph). */
.c2-appbar-logo > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.c2-logo-mark {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-ivey-green, #034638);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.c2-logo-mark-text {
    font-size: 14px; font-weight: 500;
    display: inline-block;
    transform: rotateZ(-270deg) rotateX(180deg);
    letter-spacing: -0.15em;
}
.c2-appbar-title {
    font-size: 15px; font-weight: 700;
    color: var(--color-ivey-green, #034638);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
a.c2-appbar-title:hover { color: var(--color-ivey-green-dark, #023329); }
a.c2-appbar-title:focus-visible {
    outline: 2px solid var(--color-ivey-green, #034638);
    outline-offset: 4px;
    border-radius: 6px;
}
.c2-appbar-nav { display: flex; gap: 4px; }
.c2-appbar-tab {
    padding: 8px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--color-grey, #63666A);
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.c2-appbar-tab:hover { background: rgba(3,70,56,0.04); color: var(--color-ivey-green, #034638); }
/* The Admin tab ships `hidden` and modules/app-nav.js removes the attribute for
   the accounts that may use it. .c2-appbar-tab sets no `display` today, so the
   UA rule already hides it — this states the dependency, so that giving tabs a
   display value later cannot quietly show a privileged link to every learner. */
.c2-appbar-tab[hidden] { display: none; }
.c2-appbar-tab.is-active {
    color: var(--color-ivey-green, #034638);
    background: rgba(3,70,56,0.06);
}
.c2-appbar-spacer { flex: 1; }
.c2-appbar-icon-btn {
    width: 36px; height: 36px; border: none; background: transparent;
    color: var(--color-grey, #63666A); font-size: 14px;
    border-radius: 8px; cursor: pointer;
}
.c2-appbar-icon-btn:hover { background: rgba(0,0,0,0.04); }
.c2-appbar-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border-radius: 99px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit;
}
.c2-appbar-user:hover { background: rgba(0,0,0,0.04); }
.c2-appbar-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-western-purple, #582C83);
    color: #fff; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.c2-appbar-username { font-size: 13px; font-weight: 500; }

/* ----- Shell layout ----- */
.c2-shell {
    display: flex;
    min-height: calc(100vh - var(--c2-appbar-height, 90px));
}
.c2-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--color-border-light, #E1E5E9);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--c2-appbar-height, 90px));
    position: sticky;
    top: var(--c2-appbar-height, 90px);
}
.c2-detail {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* ----- Sidebar ----- */
.c2-sidebar-header { padding: 20px 18px 12px; }
.c2-sidebar-eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-grey, #63666A);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.c2-search { position: relative; }
.c2-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-light-grey, #97999B);
    font-size: 11px; pointer-events: none;
}
.c2-search-input {
    width: 100%; height: 34px;
    padding: 0 12px 0 30px;
    border: 1px solid var(--color-border-light, #E1E5E9);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-app, #FBFAF8);
    outline: none;
}
.c2-search-input:focus { border-color: var(--color-ivey-green, #034638); }

.c2-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 16px;
}

/* Sidebar course button */
.c2-sidebar-item {
    width: 100%;
    text-align: left;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 2px;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: background .15s ease;
}
.c2-sidebar-item:hover { background: rgba(0,0,0,0.03); }
.c2-sidebar-item.is-active { background: rgba(3,70,56,0.06); }
.c2-sidebar-item-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 99px;
    background: transparent;
    flex-shrink: 0;
}
.c2-sidebar-item.is-active .c2-sidebar-item-bar {
    background: var(--c2-accent, var(--color-ivey-green, #034638));
}
.c2-sidebar-item-body { flex: 1; min-width: 0; }
.c2-sidebar-item-eyebrow {
    font-size: 10px; font-weight: 600;
    color: var(--color-grey, #63666A);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.c2-sidebar-item-title {
    font-size: 13px; font-weight: 500;
    color: #222;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px;
}
.c2-sidebar-item.is-active .c2-sidebar-item-title {
    font-weight: 600;
    color: var(--color-ivey-green, #034638);
}
.c2-sidebar-item-progress {
    display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.c2-progress-track {
    flex: 1; height: 3px;
    background: #EEF2EF; border-radius: 99px; overflow: hidden;
}
.c2-progress-fill {
    height: 100%;
    background: var(--c2-accent, var(--color-ivey-green, #034638));
    transition: width .4s cubic-bezier(0,0,0.2,1);
}
.c2-progress-fill.is-complete { background: var(--color-bright-green, #A6BB48); }
.c2-sidebar-item-counts {
    font-size: 10px;
    color: var(--color-grey, #63666A);
    font-variant-numeric: tabular-nums;
}

/* ----- Detail pane ----- */
.c2-detail-inner { max-width: 920px; margin: 0 auto; padding: 32px 32px 120px; }
.c2-breadcrumb { font-size: 12px; color: var(--color-grey, #63666A); margin-bottom: 6px; }
/* Mobile-only escape hatch back to the course list (see ≤768px block) */
.c2-detail-back { display: none; }
.c2-detail-header {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-border-light, #E1E5E9);
}
.c2-detail-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.c2-detail-title {
    margin: 0;
    font-size: 28px; font-weight: 700;
    color: var(--color-ivey-green, #034638);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.c2-detail-meta {
    font-size: 14px;
    color: var(--color-grey, #63666A);
    margin-top: 6px;
}
.c2-detail-description {
    font-size: 14px; line-height: 1.6;
    color: #444; max-width: 600px;
    margin: 14px 0 0;
}
.c2-resume-btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 99px;
    border: none;
    background: var(--color-ivey-green, #034638);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(3,70,56,0.20);
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.c2-resume-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(3,70,56,0.25); }
.c2-resume-btn .fa-play { font-size: 11px; }

.c2-stat-row {
    display: flex; gap: 24px;
    margin-top: 24px;
    align-items: center;
    flex-wrap: wrap;
}
.c2-stat-bar { flex: 1; max-width: 320px; min-width: 200px; }
.c2-stat-bar-row {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--color-grey, #63666A);
    margin-bottom: 6px;
}
.c2-stat-bar-row strong {
    font-weight: 600;
    color: var(--color-ivey-green, #034638);
}
.c2-stat-bar-track {
    height: 6px; background: #EEF2EF;
    border-radius: 99px; overflow: hidden;
}
.c2-stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c2-accent, #034638), var(--c2-accent-2, #0A5B49));
    transition: width .5s cubic-bezier(0,0,0.2,1);
}
.c2-dot-stat { display: flex; align-items: center; gap: 6px; }
.c2-dot { width: 8px; height: 8px; border-radius: 50%; }
.c2-dot.is-done { background: var(--color-bright-green, #A6BB48); }
.c2-dot.is-remaining { background: var(--color-grey, #63666A); }
.c2-dot-stat-label {
    font-size: 12px;
    color: var(--color-grey, #63666A);
}
.c2-dot-stat-label strong { color: #222; }

/* Sessions */
.c2-sessions-heading {
    margin: 0 0 14px;
    font-size: 16px; font-weight: 700;
    color: var(--color-ivey-green, #034638);
    letter-spacing: -0.01em;
}
.c2-sessions-list {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border-light, #E1E5E9);
    overflow: hidden;
}
.c2-session-row {
    width: 100%; text-align: left;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-light, #E1E5E9);
    cursor: pointer;
    font-family: inherit;
    display: flex; align-items: center; gap: 14px;
    transition: background .15s ease;
}
.c2-session-row:last-child { border-bottom: none; }
.c2-session-row:hover { background: #FBFAF8; }
.c2-session-row.is-next { background: rgba(166,187,72,0.06); }
.c2-session-row.is-next:hover { background: rgba(166,187,72,0.10); }

/* Failed session load (S2-15). Deliberately not styled as an empty state: the
   whole point is that the learner can tell an outage from a course with no
   sessions in it. */
.c2-session-row.is-error {
    cursor: default;
    background: rgba(191, 74, 58, 0.04);
    justify-content: space-between;
}
.c2-session-row.is-error:hover { background: rgba(191, 74, 58, 0.04); }
.c2-session-row.is-error .c2-session-title { color: #8C2F22; }
.c2-retry-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--color-border-light, #E1E5E9);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.c2-retry-btn:hover { background: #FBFAF8; }
.c2-session-bullet {
    width: 32px; height: 32px; border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid var(--color-border-light, #E1E5E9);
    color: var(--color-grey, #63666A);
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; justify-content: center;
}
.c2-session-row.is-done .c2-session-bullet {
    background: var(--color-bright-green, #A6BB48);
    border-color: transparent;
    color: #fff;
}
.c2-session-row.is-next .c2-session-bullet {
    border-color: var(--color-bright-green, #A6BB48);
    color: #5a6a1f;
}
.c2-session-body { flex: 1; min-width: 0; }
.c2-session-title {
    font-size: 14px; font-weight: 500; color: #222;
}
.c2-session-row.is-next .c2-session-title { font-weight: 600; }
.c2-session-meta {
    font-size: 12px; color: var(--color-grey, #63666A);
    margin-top: 2px;
}
.c2-session-badge {
    font-size: 11px; font-weight: 700;
    color: #5a6a1f;
    background: rgba(166,187,72,0.18);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.c2-session-chevron {
    color: var(--color-light-grey, #97999B);
    font-size: 11px;
}

/* Empty state */
.c2-empty {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 48px;
    text-align: center;
}
.c2-empty-inner { max-width: 360px; }
.c2-empty-icon {
    font-size: 36px;
    color: var(--color-light-grey, #97999B);
    margin-bottom: 16px;
}
.c2-empty h2 {
    margin: 0 0 8px;
    font-size: 18px; font-weight: 700;
    color: var(--color-ivey-green, #034638);
}
.c2-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--color-grey, #63666A);
    line-height: 1.5;
}

/* ----- Self-enrolment offer -----
   Shown in the detail pane to a learner with nothing enrolled whose verified
   address is at an Ivey domain. Reuses the detail pane's own measure
   (.c2-detail-inner) so it sits where a course would. */
.c2-selfenroll-eyebrow {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-grey, #63666A);
    margin-bottom: 10px;
}
.c2-selfenroll-title {
    margin: 0 0 10px;
    font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ivey-green, #034638);
}
.c2-selfenroll-lede {
    margin: 0 0 26px;
    max-width: 52ch;
    font-size: 15px; line-height: 1.55;
    color: var(--color-grey, #63666A);
}
.c2-selfenroll-list {
    display: flex; flex-direction: column; gap: 12px;
}
.c2-selfenroll-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--color-border-light, #E1E5E9);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.c2-selfenroll-card:hover {
    border-color: var(--color-ivey-green, #034638);
    box-shadow: 0 4px 14px rgba(3,70,56,0.08);
}
.c2-selfenroll-card.is-enrolled {
    background: rgba(3,70,56,0.03);
    border-color: rgba(3,70,56,0.22);
}
.c2-selfenroll-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    border-radius: 10px;
    background: var(--bg-app, #FBFAF8);
    border: 1px solid var(--color-border-light, #E1E5E9);
}
.c2-selfenroll-body {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; flex: 1;
}
.c2-selfenroll-card-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-grey, #63666A);
}
.c2-selfenroll-card-title {
    font-size: 16px; font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.c2-selfenroll-desc {
    font-size: 13px; line-height: 1.5;
    color: var(--color-grey, #63666A);
    /* Two lines, then ellipsis. The catalogue blurbs run long enough to
       unbalance a two-card stack. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c2-selfenroll-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 99px;
    background: rgba(3,70,56,0.10);
    color: var(--color-ivey-green, #034638);
    font-size: 11px; font-weight: 700;
    text-transform: none; letter-spacing: 0;
}
.c2-selfenroll-badge .fa-check { font-size: 9px; }
.c2-selfenroll-btn {
    flex-shrink: 0;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 99px;
    border: none;
    background: var(--color-ivey-green, #034638);
    color: #fff;
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.c2-selfenroll-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(3,70,56,0.22);
}
.c2-selfenroll-btn:disabled { opacity: 0.6; cursor: default; }
.c2-selfenroll-btn.is-enrolled {
    background: #fff;
    color: var(--color-ivey-green, #034638);
    border: 1px solid var(--color-ivey-green, #034638);
}
.c2-selfenroll-error {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #FDF2F2;
    border: 1px solid #F5C6C6;
    color: #96322F;
    font-size: 13px;
}
.c2-selfenroll-note {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--color-grey, #63666A);
}

/* Bottom tabs — mobile only */
.c2-bottom-tabs { display: none; }

/* =====================================================
   Mobile — ≤768px
   ===================================================== */
@media (max-width: 768px) {
    .c2-appbar-nav { display: none; }
    .c2-appbar-username { display: none; }
    .c2-appbar {
        min-height: var(--c2-appbar-height, 90px);
        height: auto;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }

    .c2-shell {
        display: block;
        min-height: calc(100vh - var(--c2-appbar-height, 90px));
    }

    /* Sidebar becomes full-width landing view. The panes swap rather than
       stack, so it fills the shell and needs no divider below the list. */
    .c2-sidebar {
        width: 100%;
        height: auto;
        min-height: calc(100vh - var(--c2-appbar-height, 90px));
        position: static;
        border-right: none;
        border-bottom: none;
        padding-bottom: 88px; /* room for bottom tabs */
        background: var(--bg-app, #FBFAF8);
    }
    .c2-sidebar-header {
        padding: 18px 16px 12px;
        background: var(--bg-app, #FBFAF8);
    }
    .c2-sidebar-eyebrow { font-size: 12px; }
    .c2-sidebar-list { padding: 0 12px; }

    /* Sidebar items become card-rows on mobile */
    .c2-sidebar-item {
        padding: 12px;
        background: #fff;
        border: 1px solid var(--color-border-light, #E1E5E9);
        border-radius: 12px;
        margin-bottom: 8px;
        gap: 12px;
    }
    .c2-sidebar-item.is-active { background: #fff; }
    .c2-sidebar-item-bar { display: none; }
    .c2-sidebar-item::before {
        content: '';
        width: 42px; height: 42px; border-radius: 10px;
        background: linear-gradient(135deg, var(--c2-accent, #034638), var(--c2-accent-2, #0A5B49));
        flex-shrink: 0;
        color: #fff;
    }
    .c2-sidebar-item-title { font-size: 14px; font-weight: 600; }

    /* Detail pane — hidden unless a course is selected */
    .c2-detail {
        display: none;
    }
    .c2-shell.has-selection .c2-sidebar { display: none; }
    .c2-shell.has-selection .c2-detail {
        display: block;
        padding-bottom: 180px;
    }
    .c2-detail-inner { padding: 16px 16px 24px; }

    /* Self-enrolment cards stack: at phone width the button and a two-line
       title fight for the same row. */
    .c2-selfenroll-title { font-size: 22px; }
    .c2-selfenroll-lede { font-size: 14px; margin-bottom: 20px; }
    .c2-selfenroll-card {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }
    .c2-selfenroll-btn { width: 100%; min-height: 44px; }

    /* The back button replaces the breadcrumb: on mobile the list is a
       separate view, not a visible parent pane. */
    .c2-breadcrumb { display: none; }
    .c2-detail-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px -8px;
        padding: 8px;
        min-height: 44px;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-ivey-green, #034638);
        cursor: pointer;
    }
    .c2-detail-back i { font-size: 12px; }

    .c2-detail-head-row { flex-direction: column; gap: 16px; }
    .c2-detail-title { font-size: 22px; }
    .c2-resume-btn {
        /* On mobile the inline button becomes a sticky FAB */
        position: fixed;
        left: 16px; right: 16px;
        bottom: 92px;
        width: auto;
        height: 50px;
        justify-content: center;
        z-index: 40;
        box-shadow: 0 8px 20px rgba(3,70,56,0.30);
    }

    /* Bottom tabs */
    .c2-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--color-border-light, #E1E5E9);
        z-index: 30;
    }
    .c2-bottom-tab {
        flex: 1;
        padding: 8px 0 6px;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        color: var(--color-light-grey, #97999B);
        text-decoration: none;
    }
    .c2-bottom-tab.is-active { color: var(--color-ivey-green, #034638); }
    .c2-bottom-tab i { font-size: 18px; }
    .c2-bottom-tab span { font-size: 10px; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
    .c2-progress-fill, .c2-stat-bar-fill, .c2-resume-btn, .c2-session-row {
        transition: none !important;
    }
}

/* ----- Account Menu ----- */
.c2-account-wrapper {
    position: relative;
}
.c2-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    background: #fff;
    border: 1px solid var(--color-border-light, #E1E5E9);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.c2-account-menu.hidden {
    display: none;
}
.c2-account-menu-item {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--color-grey, #63666A);
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.c2-account-menu-item:hover {
    background: #f5f5f5;
    color: #222;
}
.c2-account-menu-item.text-danger {
    color: #d93025;
}
.c2-account-menu-item.text-danger:hover {
    background: #fce8e6;
    color: #b31412;
}