/* ==========================================================
   Student Portal & LMS — Professional Frontend UI
   All colors below are driven by CSS variables that Settings >
   Colors & Theme writes into :root via an inline <style> tag.
   Fallback values match the original default design.
   ========================================================== */

.bsp-wrap {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #333;
}

/* Modifier: aligns with the header's own content box (logo's left
   edge to Logout's right edge). Self-contained — centers its own
   1140px box with 20px side padding, exactly mirroring
   .bsp-header-inner, regardless of what the theme's own container
   does. This doesn't depend on the theme's content wrapper matching
   the header's proportions (unlike the earlier version, which broke
   when the page rendered without that wrapper). */
.bsp-wrap--full {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ---------------- Plugin Header (logo + menu) ----------------
   Simple full width. The header lives directly in the theme's
   header.php (outside any padded content wrapper), so it naturally
   spans edge-to-edge without needing a 100vw/negative-margin
   "breakout" hack — that trick is fragile (breaks inside flex
   layouts, with scrollbars present, etc.) and was causing a stray
   gap on the right edge on some devices. */
.bsp-header {
    background: #fff;
    border-bottom: 1px solid var(--bsp-border-color, #e6e6e6);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}
.bsp-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.bsp-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.bsp-logo img {
    max-height: 48px;
    display: block;
}
.bsp-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--bsp-heading-color, #14328c);
    letter-spacing: .3px;
}
.bsp-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
}
.bsp-nav a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.bsp-nav a:hover,
.bsp-nav a.active {
    color: var(--bsp-heading-color, #14328c);
    border-color: var(--bsp-link-color, #e0521a);
}
.bsp-nav a.bsp-nav-logout {
    color: var(--bsp-link-color, #e0521a);
}
.bsp-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    line-height: 0;
}
.bsp-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--bsp-heading-color, #14328c);
    margin: 5px 0;
    border-radius: 2px;
}

/* ---------------- Learners Corner dropdown ---------------- */
.bsp-dropdown {
    position: relative;
}
.bsp-dropdown-toggle::after {
    content: "\25BE";
    font-size: 11px;
    margin-left: 5px;
    display: inline-block;
}
.bsp-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    background: #fff;
    border: 1px solid var(--bsp-border-color, #e6e6e6);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    min-width: 190px;
    padding: 8px 0;
    z-index: 50;
}
.bsp-dropdown-menu a {
    display: block;
    padding: 9px 18px;
    text-transform: none;
    font-weight: 600;
    border-bottom: none;
    color: var(--bsp-heading-color, #14328c);
}
.bsp-dropdown-menu a:hover {
    background: var(--bsp-box-bg, #f5f8ff);
    border-color: transparent;
}
.bsp-dropdown:hover .bsp-dropdown-menu,
.bsp-dropdown.bsp-dropdown-open .bsp-dropdown-menu {
    display: block;
}

/* ---------------- Mobile: hamburger-driven overlay nav ---------------- */
@media (max-width: 782px) {
    .bsp-header-inner {
        justify-content: space-between;
        text-align: left;
        flex-wrap: nowrap;
        position: relative;
    }
    .bsp-nav-toggle { display: block; }
    .bsp-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--bsp-border-color, #e6e6e6);
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        z-index: 9998;
        max-height: 80vh;
        overflow-y: auto;
    }
    .bsp-nav.bsp-nav-open { display: flex; }
    .bsp-nav > a,
    .bsp-nav > .bsp-dropdown > .bsp-dropdown-toggle {
        padding: 14px 18px;
        border-bottom: 1px solid var(--bsp-border-color, #f0f0f0);
        width: 100%;
    }
    .bsp-dropdown { width: 100%; }
    .bsp-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        margin-top: 0;
        padding: 0 0 0 16px;
        min-width: 0;
        width: 100%;
        background: var(--bsp-box-bg, #f8faff);
    }
    .bsp-dropdown-menu a {
        padding: 12px 4px;
        border-bottom: 1px solid var(--bsp-border-color, #f0f0f0);
    }
}

.bsp-title {
    text-align: center;
    color: var(--bsp-heading-color, #14328c);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .3px;
    margin: 0 0 28px;
}

/* Card containers */
.bsp-card,
.bsp-list-card {
    background: var(--bsp-box-bg, #eef8f0);
    border: 1px solid var(--bsp-border-color, #dcebe0);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(20, 50, 140, 0.06);
}
.bsp-details-card {
    background: var(--bsp-details-bg, #ffffff);
    border: 1px solid var(--bsp-border-color, #dcebe0);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(20, 50, 140, 0.06);
}

.bsp-already-logged-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bsp-logout-btn { width: auto; padding: 10px 24px; }

/* ---------------- Login form ---------------- */
.bsp-form .bsp-field {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 12px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bsp-form .bsp-field:focus-within {
    border-color: var(--bsp-heading-color, #14328c);
    box-shadow: 0 0 0 3px rgba(20, 50, 140, 0.10);
}
.bsp-form .bsp-field .bsp-icon { margin-right: 12px; opacity: .75; font-size: 16px; }
.bsp-form select,
.bsp-form input[type=text],
.bsp-form input[type=password] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 15px;
    background: transparent;
    color: #333;
}
.bsp-hint { color: #6e8f5c; font-size: 13px; margin: -10px 0 18px; }

.bsp-btn {
    display: block;
    width: 100%;
    background: var(--bsp-btn-bg, #14328c);
    color: var(--bsp-btn-text, #ffffff);
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
}
.bsp-btn:hover { filter: brightness(0.9); color: var(--bsp-btn-text, #ffffff); }
.bsp-btn:active { transform: translateY(1px); }
.bsp-btn:disabled { opacity: .6; cursor: not-allowed; }
.bsp-btn-secondary {
    background: var(--bsp-link-color, #4b7bec);
    margin: 18px 0;
    width: auto;
    padding: 11px 20px;
    text-transform: none;
    letter-spacing: 0;
}
.bsp-message { min-height: 20px; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.bsp-message.success { color: #1a7a3a; }
.bsp-message.error { color: #c0392b; }

/* ---------------- Student Details ---------------- */
.bsp-student-photo {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
    max-height: 140px !important;
    object-fit: cover;
    float: right;
    border: 3px solid #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.bsp-section-title {
    background: var(--bsp-section-bg, #eef8f0);
    color: var(--bsp-section-text, #14328c);
    font-size: 16px;
    font-weight: 700;
    padding: 10px 14px;
    margin: 28px 0 0;
    border-radius: 6px;
}
.bsp-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.bsp-table td { border: 1px solid #eee; padding: 10px 14px; font-size: 14px; }
.bsp-table td:nth-child(odd) { color: #777; width: 22%; background: #fafbfc; }
.bsp-table td:nth-child(even) { color: var(--bsp-heading-color, #14328c); font-weight: 500; }
.bsp-highlight { background: var(--bsp-heading-color, #14328c); color: #fff; padding: 3px 8px; border-radius: 4px; font-weight: 600; }
.bsp-notes { font-size: 12px; color: #1a7a3a; margin-top: 22px; line-height: 1.6; background: #f3faf4; padding: 12px 14px; border-radius: 6px; }
.bsp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.bsp-grid-2 input, .bsp-grid-2 select { padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 6px; font-size: 14px; }
.bsp-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 22px; }
.bsp-checkbox {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease;
}
.bsp-checkbox:hover { border-color: var(--bsp-heading-color, #14328c); }

/* ---------------- Lists: Books / Videos / Other (Level 1) ---------------- */
.bsp-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid var(--bsp-border-color, #e6e6e6);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.bsp-list-item:hover {
    box-shadow: 0 6px 16px rgba(20, 50, 140, 0.10);
    border-color: var(--bsp-heading-color, #c9d9f5);
    transform: translateY(-1px);
}
.bsp-list-item-left { display: flex; align-items: center; gap: 14px; }
.bsp-list-item-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bsp-box-bg, #eef2ff); border-radius: 8px; font-size: 20px; flex-shrink: 0;
}
.bsp-list-item-title { color: var(--bsp-heading-color, #14328c); font-weight: 700; letter-spacing: .4px; font-size: 15px; }
.bsp-list-item-count { color: #888; font-size: 12px; }
.bsp-view-link { color: var(--bsp-link-color, #e0521a); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bsp-list-item:hover .bsp-view-link { text-decoration: underline; }

/* Empty state */
.bsp-empty-state { text-align: center; padding: 40px 20px; color: #888; }
.bsp-empty-icon { font-size: 38px; display: block; margin-bottom: 10px; opacity: .6; }

/* ---------------- Rows: Level 2 chapters / resources ---------------- */
.bsp-row-item {
    background: #fff;
    border: 1px solid var(--bsp-border-color, #e6e6e6);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: box-shadow .15s ease;
}
.bsp-row-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.bsp-row-title { color: var(--bsp-heading-color, #14328c); font-weight: 600; }
.bsp-row-actions { display: flex; gap: 8px; }
.bsp-row-actions .bsp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    text-decoration: none; transition: transform .1s ease, opacity .15s ease;
}
.bsp-row-actions .bsp-icon-btn:hover { transform: scale(1.08); opacity: .9; }
.bsp-icon-eye { background: #f0f2f5; color: #333; }
.bsp-icon-download { background: #27ae60; color: #fff; }
.bsp-badge { background: var(--bsp-box-bg, #eef2ff); color: var(--bsp-heading-color, #14328c); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; margin-left: 10px; letter-spacing: .3px; }
.bsp-row-desc { color: #888; font-size: 13px; margin: -6px 0 14px 2px; }

.bsp-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 18px; color: var(--bsp-heading-color, #14328c); text-decoration: none; font-weight: 600; font-size: 14px;
}
.bsp-back-link:hover { text-decoration: underline; }

/* Video embed */
.bsp-video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.bsp-video-embed iframe { position: absolute; top:0; left:0; width: 100%; height: 100%; border: 0; }

/* Info / error banners */
.bsp-info, .bsp-error {
    background: #fff; padding: 16px 20px; border-radius: 8px; text-align: center;
    border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.bsp-info a { color: var(--bsp-heading-color, #14328c); font-weight: 600; }
.bsp-error { color: #c0392b; }

/* Responsive */
@media (max-width: 600px) {
    .bsp-title { font-size: 22px; }
    .bsp-card, .bsp-list-card, .bsp-details-card { padding: 20px; }
    .bsp-grid-2 { grid-template-columns: 1fr; }
    .bsp-list-item, .bsp-row-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .bsp-student-photo { float: none; display: block; margin: 0 auto 16px; }
    .bsp-table td:nth-child(odd), .bsp-table td:nth-child(even) { width: auto; }
}

/* Books subject list — each subject shown as its own block with chapters
   (View/Download icons) listed directly, no separate click-through page. */
.bsp-subject-block { margin-bottom: 20px; }
.bsp-subject-block-title { color: var(--bsp-heading-color, #14328c); font-weight: 700; letter-spacing: .4px; font-size: 17px; margin: 0 0 16px 0; }

.bsp-student-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bsp-box-bg, #eef8f0);
    font-size: 44px;
    color: #b7c3d0;
}