/*
 * Student panel — dark/light harmonization (2025 redesign pass).
 * Scope: every page under resources/views/frontend/default/student/* shares the .profile-banner-area-container
 * wrapper (my-courses, my-profile, bookings, wishlist, ebooks, purchase history, bootcamps, become-instructor,
 * team packages, messages — confirmed by grep, nothing outside student/* uses this class). Everything below is
 * scoped to that wrapper (or to body:has(it) for the page background), so toggling dark mode elsewhere on the
 * site — home page, course catalog, checkout — is never touched by this file.
 *
 * The base theme (style.css) already renders most of these panels through CSS variables (--bg-white, --text-color,
 * --color-2, --box-shadow-2), so re-pointing those four variables inside this scope restyles cards, titles and
 * body copy throughout the whole panel with very little extra code; only genuinely hardcoded colours (borders,
 * the light-blue search input fill, table rows) need their own line below.
 */

/* ---------- light mode: a touch more depth, same palette (keeps everything else exactly as it was) ---------- */
.profile-banner-area-container .course-sideBar,
.profile-banner-area-container .my-panel,
.profile-banner-area-container .Ecard,
.profile-banner-area-container .g-card {
    box-shadow: rgba(47, 87, 239, 0.1) 0px 10px 30px 0px;
}

/* ---------- dark mode ---------- */
html[data-theme="dark"] body:has(.profile-banner-area-container) {
    background-color: #0b1020;
}

html[data-theme="dark"] .profile-banner-area-container {
    --bg-white: #141a2e;
    --text-color: #a8b0c3;
    --color-2: #f1f5f9;
    --box-shadow-2: rgba(0, 0, 0, 0.35) 0px 7px 29px 0px;
}

html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .profile-banner-area-container .course-sideBar p {
    color: #6b7694;
}

html[data-theme="dark"] .profile-banner-area-container a,
html[data-theme="dark"] .profile-banner-area-container h1,
html[data-theme="dark"] .profile-banner-area-container h2,
html[data-theme="dark"] .profile-banner-area-container h3,
html[data-theme="dark"] .profile-banner-area-container h4,
html[data-theme="dark"] .profile-banner-area-container h5,
html[data-theme="dark"] .profile-banner-area-container h6 {
    color: var(--color-2);
}

html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li a,
html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li svg path {
    color: var(--text-color);
    fill: #6b7694;
}

html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li.active a,
html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li a:hover {
    color: #7c9bff;
}

html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li.active a svg path,
html[data-theme="dark"] .profile-banner-area-container .couses-tab-list li a:hover svg path {
    fill: #7c9bff;
}

/* form fields: inputs/selects/textareas keep readable text and borders instead of staying light-on-light */
html[data-theme="dark"] .profile-banner-area-container .form-control,
html[data-theme="dark"] .profile-banner-area-container select,
html[data-theme="dark"] .profile-banner-area-container textarea {
    background-color: #1b2340 !important;
    border-color: #2a3357 !important;
    color: #e5e9f5 !important;
}

html[data-theme="dark"] .profile-banner-area-container .form-control::placeholder {
    color: #7d84a0;
}

html[data-theme="dark"] .profile-banner-area-container .Esearch_entry .form-control {
    background-color: #1b2340 !important;
    border-color: #2a3357 !important;
}

/* tables (purchase history, bookings, invoices) */
html[data-theme="dark"] .profile-banner-area-container table {
    color: var(--text-color);
}

html[data-theme="dark"] .profile-banner-area-container table th,
html[data-theme="dark"] .profile-banner-area-container table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* cards that use a plain white background directly instead of the --bg-white variable */
html[data-theme="dark"] .profile-banner-area-container .card {
    background-color: var(--bg-white);
    color: var(--text-color);
}

/* the theme toggle button placed in the sidebar's "WELCOME, NAME" row */
.student-theme-toggle-btn {
    background: none;
    border: 1px solid #e5e9f2;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    flex-shrink: 0;
}

.student-theme-toggle-btn:hover {
    border-color: var(--color-1);
    color: var(--color-1);
}

.student-theme-toggle-btn .theme-toggle-icon-light {
    display: none;
}

html[data-theme="dark"] .student-theme-toggle-btn .theme-toggle-icon-dark {
    display: none;
}

html[data-theme="dark"] .student-theme-toggle-btn .theme-toggle-icon-light {
    display: inline-block;
}

html[data-theme="dark"] .student-theme-toggle-btn {
    border-color: #2a3357;
}

html[data-theme="dark"] .student-theme-toggle-btn:hover {
    border-color: #7c9bff;
    color: #7c9bff;
}

/*
 * Site-wide header logo (components/home_made_by_builder/header.blade.php and the developer variant): the
 * header already renders BOTH the dark-colored logo (header-dark-logo, for light backgrounds) and the
 * light-colored logo (header-light-logo, for dark backgrounds) with header-light-logo permanently hidden via
 * Bootstrap's d-none - that pairing predates this dark theme and nothing ever toggled it. Overriding with
 * !important (c-none itself is !important) swaps to the correct, readable logo whenever dark mode is on, on
 * every page that uses this shared header (home, courses, register, login, student panel, etc.).
 */
html[data-theme="dark"] .header-dark-logo {
    display: none !important;
}
html[data-theme="dark"] .header-light-logo {
    display: inline-block !important;
}