/* NexIntel Academy LMS - base styles.
   Brand colours come from CSS variables (--nx-primary, --nx-accent,
   --nx-secondary) printed in templates/header.php from config/brand.php. */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f6f6;
    color: #212529;
}
main { flex: 1 0 auto; }

a { color: var(--nx-primary); }
a:hover { color: var(--nx-accent); }

.btn-primary {
    --bs-btn-bg: var(--nx-primary);
    --bs-btn-border-color: var(--nx-primary);
    --bs-btn-hover-bg: var(--nx-accent);
    --bs-btn-hover-border-color: var(--nx-accent);
    --bs-btn-active-bg: var(--nx-accent);
    --bs-btn-active-border-color: var(--nx-accent);
}

.nx-hero {
    background: var(--nx-primary);
    color: #fff;
    border-bottom: 4px solid var(--nx-accent);
}
.nx-logo { max-height: 72px; max-width: 100%; height: auto; }
.nx-footer { background: #fff; color: var(--nx-secondary); border-top: 1px solid #dee2e6; flex-shrink: 0; }

/* ---- Module 2: authentication pages ---- */
.nx-card { border: 0; border-top: 4px solid var(--nx-accent); }
.nx-brand-text { color: var(--nx-primary); }
.nx-error-code { color: var(--nx-accent); }
.nx-navbar { background: var(--nx-primary); border-bottom: 4px solid var(--nx-accent); }
.nx-navbar .navbar-brand { color: #fff; }
.nx-badge { background: var(--nx-accent); color: #fff; font-weight: 500; }
.form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 .2rem rgba(0, 70, 72, .2);
}
main.d-flex { min-height: 60vh; }

/* ---- Module 3: admin management ---- */
.nx-subnav { background: #fff; border-bottom: 1px solid #dee2e6; overflow-x: auto; white-space: nowrap; }
.nx-subnav .nav-link { color: var(--nx-secondary); padding: .6rem 1rem; border-bottom: 3px solid transparent; }
.nx-subnav .nav-link:hover { color: var(--nx-primary); }
.nx-subnav .nav-link.active { color: var(--nx-primary); font-weight: 600; border-bottom-color: var(--nx-accent); }
.nx-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.nx-actions form { margin: 0; }
.breadcrumb a { color: var(--nx-primary); }
.page-link { color: var(--nx-primary); }
.page-item.active .page-link { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }
.nx-link-box { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }

/* ---- Module 4: students - CONTROLLED profile-picture display ----
   The display size is set here, independent of the uploaded image's own pixel size. */

/* Students list: small fixed square thumbnail (also used for the initials placeholder). */
.student-list-avatar {
    display: inline-block;
    width: 40px; height: 40px;
    min-width: 40px; max-width: 40px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e9ecef;
    vertical-align: middle;
}
.student-list-avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-primary); color: #fff;
    font-size: .85rem; font-weight: 600; line-height: 1;
}

/* Edit student: keeps the aspect ratio, never wider than 150px or taller than 260px. */
.student-edit-avatar {
    display: block;
    max-width: 150px; max-height: 260px;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: .5rem;
    margin-left: auto; margin-right: auto;
    background: #f1f3f5;
}
.student-edit-avatar-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--nx-primary); color: #fff;
    font-size: 1.6rem; font-weight: 600;
}

/* ---- Module 5: courses, structure, rich text editor ---- */
.course-list-thumb {
    display: inline-block; width: 64px; height: 40px; min-width: 64px; max-width: 64px;
    object-fit: cover; border-radius: .35rem; background: #e9ecef; flex-shrink: 0; vertical-align: middle;
}
.course-list-thumb-empty {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-primary); color: #fff; font-size: .8rem; font-weight: 600;
}
.course-edit-thumb {
    display: block; max-width: 240px; max-height: 160px; width: auto; height: auto;
    object-fit: contain; border-radius: .5rem; background: #f1f3f5;
}
.nx-module { border-left: 4px solid var(--nx-primary); }
.nx-lesson-row { border-left: 3px solid transparent; }
.nx-lesson-row:hover { border-left-color: var(--nx-accent); }
.nx-chip { font-size: .7rem; font-weight: 500; }

.rt-wrap { border: 1px solid #ced4da; border-radius: .375rem; background: #fff; }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; background: #f8f9fa; border-bottom: 1px solid #dee2e6; border-radius: .375rem .375rem 0 0; }
.rt-toolbar .rt-block { width: auto; }
.rt-area { min-height: 200px; max-height: 480px; overflow-y: auto; padding: .75rem; outline: none; }
.rt-area:focus { box-shadow: inset 0 0 0 .15rem rgba(0, 70, 72, .2); }
.rt-area h2 { font-size: 1.4rem; } .rt-area h3 { font-size: 1.2rem; } .rt-area h4 { font-size: 1.05rem; }
.rt-area blockquote { border-left: 4px solid var(--nx-accent); margin-left: 0; padding-left: .75rem; color: var(--nx-secondary); }
.rt-area pre { background: #f1f3f5; padding: .5rem; border-radius: .25rem; white-space: pre-wrap; }
.rt-align-left { text-align: left; } .rt-align-center { text-align: center; }
.rt-align-right { text-align: right; } .rt-align-justify { text-align: justify; }

/* ---- Module 6: student portal (dashboard, course, lesson) ---- */
.student-course-card { border-top: 4px solid var(--nx-accent); }
.student-course-thumb {
    display: block; width: 100%; height: 140px; object-fit: cover; background: #e9ecef;
}
.student-course-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--nx-primary); color: #fff; font-size: 2rem; font-weight: 600;
}
.student-prewrap { white-space: pre-line; }
.nx-richtext { overflow-wrap: anywhere; }
.nx-richtext h2 { font-size: 1.4rem; } .nx-richtext h3 { font-size: 1.2rem; } .nx-richtext h4 { font-size: 1.05rem; }
.nx-richtext blockquote { border-left: 4px solid var(--nx-accent); margin-left: 0; padding-left: .75rem; color: var(--nx-secondary); }
.nx-richtext pre { background: #f1f3f5; padding: .5rem; border-radius: .25rem; white-space: pre-wrap; }
.nx-richtext > :last-child { margin-bottom: 0; }

/* ---- Module 7: progress bars, video player ---- */
.nx-progress { height: .6rem; background: #e9ecef; }
.nx-progress .progress-bar { background: var(--nx-primary); }
#lesson-video { max-height: 70vh; }