/* ==========================================
   RTL/LTR Direction System - Phase 6
   Full Refinement Patch
   ========================================== */

/* --- RTL Base Rules --- */
.is-rtl {
    direction: rtl;
    text-align: right;
}

.is-ltr {
    direction: ltr;
    text-align: left;
}

/* ==========================================
   PART 1-4: FRONTEND HEADER FIXED ZONES
   [OWNERSHIP]: Public header direction behavior.
   [SOURCE OF TRUTH]: This file (direction.css) currently owns public header RTL/LTR rules.
   [TODO]: Candidate for extraction to frontend-direction.css.
   Logo always LEFT, Profile/Actions always RIGHT
   ========================================== */

.header-floating-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
}

.header-floating-nav .logo-box {
    order: 1;
    flex-shrink: 0;
}

.header-floating-nav .center-nav-tabs {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-floating-nav .auth-profile-actions {
    order: 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-floating-nav .off-canvas-menu-toggle {
    order: 4;
}

/* Prevent RTL from flipping header zones */
.is-rtl .header-floating-nav {
    direction: ltr;
}

.is-rtl .header-floating-nav .logo-box {
    order: 1;
}

.is-rtl .header-floating-nav .center-nav-tabs {
    order: 2;
    direction: rtl;
}

.is-rtl .header-floating-nav .auth-profile-actions {
    order: 3;
}

/* ==========================================
   PART 2: LANGUAGE TOGGLE FIXED POSITION
   Always visible, always in right actions area
   ========================================== */

.lang-toggle,
.locale-switcher a,
.header-floating-nav .lang-switcher a,
.topbar .lang-switcher a {
    color: #071A24;
    background: #EFE3CC;
    border: 1px solid rgba(7, 26, 36, 0.14);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lang-toggle.active,
.locale-switcher a.active,
.header-floating-nav .lang-switcher a.active,
.topbar .lang-switcher a.active {
    color: #fff;
    background: #0E5A47;
    border-color: #0E5A47;
}

.lang-toggle:hover:not(.active),
.locale-switcher a:hover:not(.active),
.header-floating-nav .lang-switcher a:hover:not(.active),
.topbar .lang-switcher a:hover:not(.active) {
    background: rgba(14, 90, 71, 0.1);
    border-color: rgba(14, 90, 71, 0.2);
}

/* ==========================================
   PART 3: WISHLIST FIXED POSITION
   Always in right actions area
   ========================================== */

.header-floating-nav .shop-cart {
    order: 3;
}

/* ==========================================
   PART 4: PROFILE DROPDOWN FIXED POSITION
   Always on right, dropdown aligns correctly
   ========================================== */

.is-rtl .user-profile-cart .cart-dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

.is-rtl .notification-dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

/* ==========================================
   PART 6: ADMIN SIDEBAR RTL
   Parent: [icon] [title]
   Static: [icon] [title]
   Submenu: [icon] [title]
   Separated CSS scopes — no shared rules
   ========================================== */

/* --- Base parent/static link (both locales) --- */
.admin-sidebar-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    text-decoration: none;
}

.admin-sidebar-icon {
    flex: 0 0 auto;
    order: 1;
}

.admin-sidebar-title {
    flex: 1 1 auto;
    order: 2;
    min-width: 0;
}

/* --- Override app.css justify-content: left for parent/static links --- */
.sidebar-wrapper .metismenu a.admin-sidebar-link {
    justify-content: flex-start !important;
}

/* --- Base submenu link (both locales) --- */
.admin-submenu-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    text-decoration: none;
}

.admin-submenu-icon {
    flex: 0 0 auto;
    order: 1;
}

.admin-submenu-title {
    flex: 1 1 auto;
    order: 2;
}

/* --- Override app.css justify-content: left for submenu links --- */
.sidebar-wrapper .metismenu ul a.admin-submenu-link {
    justify-content: flex-start !important;
}

/* --- Override app.css parent-icon/menu-title for new structure --- */
.sidebar-wrapper .metismenu a.admin-sidebar-link .parent-icon {
    display: none;
}

.sidebar-wrapper .metismenu a.admin-sidebar-link .menu-title {
    display: none;
}

/* --- Static link icon override (no font-size inheritance from parent-icon) --- */
.sidebar-wrapper .metismenu a.admin-sidebar-link.admin-sidebar-static-link .admin-sidebar-icon i {
    font-size: inherit;
}

/* --- RTL parent/static menu items --- */
.is-rtl .sidebar-wrapper .metismenu .admin-sidebar-link {
    direction: rtl;
    text-align: right;
}

.is-rtl .sidebar-wrapper .metismenu .admin-sidebar-icon {
    order: 1;
}

.is-rtl .sidebar-wrapper .metismenu .admin-sidebar-title {
    order: 2;
    text-align: right;
}

/* MetisMenu native RTL arrow handling */
.is-rtl .sidebar-wrapper .metismenu .has-arrow:after {
    right: auto;
    left: 15px;
    transform: rotate(45deg) translateY(-50%);
}

/* --- RTL submenu items: Neutralize legacy global margin-right on icons --- */
.is-rtl .sidebar-wrapper .metismenu ul a.admin-submenu-link i {
    margin-right: 0 !important;
    margin-left: 14px !important;
}

/* Ensure submenu title remains properly aligned */
.is-rtl .sidebar-wrapper .metismenu ul a.admin-submenu-link .admin-submenu-title {
    text-align: right;
}


/* RTL sidebar positioned on right */
.is-rtl .wrapper .sidebar-wrapper {
    left: auto;
    right: 0;
    border-left: none;
    border-right: 1px solid #e2e8f0;
}

.is-rtl .wrapper .page-wrapper {
    margin-left: 0;
    margin-right: 250px;
}

.is-rtl .wrapper .page-footer {
    left: 0;
    right: 250px;
}

/* LTR sidebar: left side (default) */
.is-ltr .wrapper .page-wrapper {
    margin-left: 250px;
    margin-right: 0;
}

/* RTL Sidebar Header */
.is-rtl .sidebar-header .logo-text {
    margin-left: 0;
    margin-right: 10px;
}

.is-rtl .sidebar-header .toggle-icon {
    margin-left: auto;
    margin-right: 0;
}

/* RTL Sidebar active indicator */
.is-rtl .off-canvas-menu-list li.active,
.is-rtl .off--canvas-menu-list li.active {
    border-left: none;
    border-right: 3px solid var(--color-accent);
}

.is-ltr .off-canvas-menu-list li.active,
.is-ltr .off--canvas-menu-list li.active {
    border-right: none;
    border-left: 3px solid var(--color-accent);
}

/* RTL Topbar offset for mobile toggle */
.is-rtl .wrapper.toggled .topbar {
    left: 0 !important;
    right: 70px;
}

.is-rtl .wrapper.toggled .page-wrapper {
    margin-right: 70px;
    margin-left: 0;
}

.is-rtl .wrapper.toggled .page-footer {
    right: 70px;
    left: 0;
}

/* ==========================================
   PART 7: ADMIN CONTENT RTL ALIGNMENT
   ========================================== */

/* RTL Admin Page Content */
.is-rtl .page-content {
    text-align: right;
}

.is-rtl .page-content .card-header {
    text-align: right;
}

/* RTL Admin Breadcrumb */
.is-rtl .page-breadcrumb {
    text-align: right;
}

.is-rtl .page-breadcrumb .breadcrumb {
    justify-content: flex-start;
}

.is-rtl .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-left: 0;
    padding-right: 0.5rem;
}

/* RTL Admin Tables */
.is-rtl .table {
    text-align: right;
}

.is-rtl .table th {
    text-align: right;
}

.is-rtl .table td {
    text-align: right;
}

/* RTL Admin Forms */
.is-rtl .form-label,
.is-rtl .form-control-label {
    text-align: right;
}

/* RTL Admin Cards */
.is-rtl .card-header {
    text-align: right;
}

/* RTL Admin Buttons alignment */
.is-rtl .btn-toolbar {
    justify-content: flex-start;
}

/* RTL Admin Tabs */
.is-rtl .nav-tabs .nav-link {
    text-align: right;
}

.is-rtl .nav-tabs {
    direction: rtl;
}

.is-rtl .nav-pills-custom {
    justify-content: flex-start;
}

/* RTL Admin Search/Filter */
.is-rtl .dataTables_filter {
    text-align: left;
}

.is-rtl .dataTables_length {
    text-align: right;
}

.is-rtl .dataTables_info {
    text-align: right;
}

.is-rtl .dataTables_paginate {
    text-align: left;
}

/* ==========================================
   USER DASHBOARD (تعلم بوعي Theme - Flex Shell)
   [NOTE]: Legacy un-prefixed .dashboard-shell rules were removed from here.
   ========================================== */

.is-rtl .dashboard-menu-toggler {
    margin-left: 0;
    margin-right: 1rem;
}

/* ==========================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================== */

@media screen and (max-width: 1024px) {
    .is-rtl .wrapper .sidebar-wrapper {
        left: auto;
        right: -300px;
    }

    .is-rtl .wrapper.toggled .sidebar-wrapper {
        right: 0;
    }

    .is-rtl .wrapper.toggled .topbar {
        left: 0 !important;
        right: 0 !important;
    }

    .is-rtl .wrapper.toggled .page-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .is-rtl .wrapper.toggled .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: .6;
        z-index: 10;
        display: block;
        cursor: pointer;
        transition: all .2s ease-out;
    }
}



/* ==========================================
   SHARED RTL OVERRIDES
   [OWNERSHIP]: Global RTL utilities.
   [SOURCE OF TRUTH]: This block is the current source of truth for global RTL utilities.
   [TODO]: SHARED GLOBAL RTL UTILITY. Needs review for conflicts with native flexbox.
   ========================================== */

/* --- RTL Text Align --- */
.is-rtl .text-start,
.is-rtl [style*="text-align: left"] {
    text-align: right !important;
}

.is-ltr .text-end,
.is-ltr [style*="text-align: right"] {
    text-align: left !important;
}

/* --- RTL Margin/Padding Logical Properties --- */
.is-rtl .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.is-rtl .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.is-rtl .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.is-rtl .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.is-rtl .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.is-rtl .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.is-rtl .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
.is-rtl .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
.is-rtl .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
.is-rtl .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
.is-rtl .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }

.is-rtl .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
.is-rtl .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
.is-rtl .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
.is-rtl .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
.is-rtl .pl-30px { padding-left: 0 !important; padding-right: 30px !important; }
.is-rtl .pr-30px { padding-right: 0 !important; padding-left: 30px !important; }

/* --- RTL Float --- */
.is-rtl .float-start,
.is-rtl .float-left { float: right !important; }
.is-rtl .float-end,
.is-rtl .float-right { float: left !important; }

/* --- RTL Border --- */
.is-rtl .border-right { border-right: none !important; border-left: 1px solid #e2e8f0 !important; }
.is-rtl .border-left { border-left: none !important; border-right: 1px solid #e2e8f0 !important; }
.is-rtl .border-right-gray { border-right: none !important; border-left: 1px solid #e2e8f0 !important; }

/* --- RTL Text Align for Forms --- */
.is-rtl .label-text,
.is-rtl label {
    text-align: right;
}

.is-ltr .label-text,
.is-ltr label {
    text-align: left;
}

/* ==========================================
   PART 8: ALWAYS-LTR ELEMENTS
   ========================================== */

/* --- LTR Inputs remain LTR in both locales --- */
input[type="email"],
input[type="url"],
input[type="tel"] {
    direction: ltr;
    text-align: left;
}

/* --- Media Controls: Always LTR --- */
.is-rtl .ctrl-seek-wrapper,
.is-rtl .lms-volume-control {
    direction: ltr !important;
}

.is-rtl .ctrl-seek-wrapper .ctrl-seek-progress,
.is-rtl .ctrl-seek-wrapper .ctrl-seek-buffered,
.is-rtl .ctrl-seek-wrapper .ctrl-seek-thumb {
    left: auto;
    right: auto;
}

.player-page .ctrl-seek-wrapper,
.player-page .lms-volume-control {
    direction: ltr !important;
}

/* --- Slug/Technical fields: Always LTR --- */
input[name="slug"],
input[name="course_name_slug"],
.slug-field,
.code-field,
.certificate-number {
    direction: ltr;
    text-align: left;
}

/* ==========================================
   RTL CATEGORY DROPDOWN
   ========================================== */

.is-rtl .cat-dropdown-menu {
    left: auto;
    right: 0;
}

.is-rtl .sub-menu {
    left: auto;
    right: 100%;
}

/* ==========================================
   RTL MEDIA + MISC
   ========================================== */

.is-rtl .media {
    direction: rtl;
}

.is-rtl .media-body {
    text-align: right;
}

.is-rtl .dropdown-menu {
    text-align: right;
}

.is-rtl .cart-dropdown-menu {
    left: auto;
    right: 0;
}

.is-rtl .badge {
    direction: rtl;
}

.is-rtl .progress {
    direction: ltr;
}

.is-rtl .detail-row {
    flex-direction: row-reverse;
}

/* ==========================================
   LANGUAGE SWITCHER (shared)
   ========================================== */

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
    padding: 2px;
}

.lang-switcher a {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #17201D;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #EFE3CC;
    border: 1px solid rgba(7, 26, 36, 0.14);
}

.lang-switcher a:hover {
    background: rgba(14, 90, 71, 0.1);
    border-color: rgba(14, 90, 71, 0.2);
}

.lang-switcher a.active {
    color: #fff;
    background: #0E5A47;
    border-color: #0E5A47;
    font-weight: 700;
}

/* ==========================================
   MOBILE OFF-CANVAS RTL
   ========================================== */

.is-rtl .main-off-canvas-menu {
    right: 0;
    left: auto;
}

.is-rtl .off-canvas-menu-close {
    left: 15px;
    right: auto;
}

/* --- Mobile horizontal-overflow safety ---
   The off-canvas drawer uses fixed positioning + transform which can
   leak into the document scroll width. Clip page-level horizontal
   scroll on mobile while keeping the drawer itself visible. */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden !important;
    }
    .main-off-canvas-menu {
        /* Never contribute to document scroll width */
        max-width: 300px !important;
    }
}

/* --- RTL Header Menu Hover --- */
.is-rtl .cat-dropdown-menu li a:hover {
    padding-left: 20px;
    padding-right: 25px;
}

/* --- RTL Course Card --- */
.is-rtl .media-img {
    margin-left: 0.75rem;
    margin-right: 0;
}

.is-rtl .media-card .media-body {
    text-align: right;
}

/* ==========================================
   USER DASHBOARD HEADER ELEMENTS
   ========================================== */

.is-rtl .header-menu-content {
    direction: rtl;
}

.is-rtl .user-btn-action {
    margin-left: 0;
    margin-right: auto;
}

.is-rtl .menu-wrapper {
    direction: rtl;
}

.is-rtl .nav-right-button {
    direction: rtl;
}

/* --- RTL Shop Cart Border --- */
.is-rtl .shop-cart.pr-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

.is-rtl .shop-cart.mr-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

.is-rtl .shop-cart.mr-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

/* --- RTL Search Form --- */
.is-rtl .form--control.pl-3 {
    padding-left: 40px !important;
    padding-right: 1rem !important;
}

.is-rtl .search-icon {
    left: auto !important;
    right: 15px !important;
}

/* --- RTL Back to Top Button --- */
.is-rtl .back-to-top {
    right: auto;
    left: 12px;
}

/* ==========================================
   PART 5: DRAWER SAFETY - hide by default on desktop
   ========================================== */

@media screen and (min-width: 992px) {
    .main-off-canvas-menu,
    .category-off-canvas-menu,
    .off--canvas-menu,
    .dashboard-off-canvas-menu,
    .body-overlay {
        display: none !important;
    }
}

/* ==========================================
   FLEX-BASED DASHBOARD SHELL
   [NOTE]: Legacy un-prefixed .dashboard-shell structural block was removed 
   after DOM verification confirmed it is fully dead code.
   ========================================== */

/* ==========================================
   BODY OVERLAY for mobile sidebars
   ========================================== */

.body-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.body-overlay.active {
    display: block;
    opacity: 1;
}

/* ==========================================
   PART 9: COURSE BUILDER RTL
   ========================================== */

/* --- Course Builder Page Wrapper --- */
.course-builder-page .breadcrumb-area {
    direction: rtl;
}

.course-builder-page .breadcrumb-area .breadcrumb {
    padding-right: 0;
    padding-left: 15px;
}

.course-builder-page .breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-left: 0.5rem;
    padding-right: 0;
}

/* --- Wizard Steps --- */
.course-builder-page .wizard-steps {
    direction: rtl;
}

.course-builder-page .wizard-steps .step-item {
    text-align: center;
}

/* --- Section/Lesson Cards --- */
.course-builder-page .section-card {
    direction: rtl;
}

.course-builder-page .section-card .section-header {
    text-align: right;
}

.course-builder-page .lesson-card {
    direction: rtl;
}

.course-builder-page .lesson-card .lesson-header {
    text-align: right;
}

/* --- RTL Button Alignment --- */
.is-rtl .course-builder-page .btn + .btn {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* --- RTL Form Fields in Builder --- */
.course-builder-page .form--control {
    text-align: right;
}

.course-builder-page input[type="text"],
.course-builder-page input[type="number"],
.course-builder-page textarea {
    text-align: right;
}

/* --- LTR Technical Fields in Builder --- */
.course-builder-page .input-ltr,
.course-builder-page input[name="slug"],
.course-builder-page input[name="youtube_url"] {
    direction: ltr;
    text-align: left;
}

/* --- RTL Drag Handle for Sections --- */
.course-builder-page .drag-handle {
    cursor: grab;
    margin-left: 0.5rem;
    margin-right: 0;
}

/* --- RTL Action Buttons in Section/Lesson Cards --- */
.course-builder-page .section-card .btn-group,
.course-builder-page .lesson-card .btn-group {
    direction: ltr;
}

/* --- RTL Step Labels --- */
.is-rtl .course-builder-page .step-label {
    text-align: center;
}

/* --- RTL Empty State --- */
.course-builder-page .empty-state {
    text-align: center;
    direction: rtl;
}

/* --- RTL Publish Button Area --- */
.course-builder-page .publish-area {
    text-align: left;
    direction: ltr;
}

/* ==========================================
   PART 10: STUDENT DASHBOARD SHELL
   [OWNERSHIP]: Student shell layout and student sidebar.
   [SOURCE OF TRUTH]: This block is currently the structural source of truth for Student Dashboard.
   [TODO]: TRANSITIONAL / CANDIDATE FOR EXTRACTION to student-shell.css.
   ========================================== */

.student-dashboard-shell {
    min-height: 100vh;
    width: 100%;
    background: var(--color-bg, #FAF7EF);
    display: flex;
    flex-direction: column;
}

.student-topbar {
    width: 100%;
    min-height: 72px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    z-index: 20;
}

.student-dashboard-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    direction: ltr;
}

/* ==========================================
   STUDENT SIDEBAR — premium dark-green panel
   ========================================== */

.student-sidebar {
    flex: 0 0 280px;
    width: 280px;
    min-height: calc(100vh - 72px);
    background: var(--color-primary, #0F3D32);
    color: var(--color-on-primary, #FAF7EF);
    padding: 24px 0;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.10);
}

.student-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

/* -----------------------------------------------
   RTL (Arabic): sidebar physically on the RIGHT
   We use flex-direction: row-reverse to place the
   sidebar on the right and content on the left.
----------------------------------------------- */
body.is-rtl .student-dashboard-body { flex-direction: row-reverse; }

/* LTR (English): sidebar physically on the LEFT */
body.is-ltr .student-dashboard-body { flex-direction: row; }

/* Keep text direction correct inside the children */
body.is-rtl .student-sidebar {
    direction: rtl;
    text-align: right;
}

body.is-rtl .student-content {
    direction: rtl;
    text-align: right;
}

body.is-ltr .student-sidebar {
    direction: ltr;
    text-align: left;
}

body.is-ltr .student-content {
    direction: ltr;
    text-align: left;
}

/* -----------------------------------------------
   Sidebar brand lockup
----------------------------------------------- */
.student-sidebar .brand-lockup {
    color: var(--color-on-primary, #FAF7EF);
}

/* ==========================================
   PART 11: STUDENT DASHBOARD TABS & BUTTONS
   ========================================== */

/* Tabs */
.student-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.student-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--color-primary-dark, #0a2d25);
    background: var(--color-card, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.student-tab:hover {
    color: var(--color-primary, #0F3D32);
    background: rgba(15, 61, 50, .08);
    border-color: rgba(15, 61, 50, .18);
    transform: translateY(-1px);
    text-decoration: none;
}

.student-tab.active,
.student-tab[aria-current="page"] {
    color: var(--color-on-primary, #ffffff) !important;
    background: var(--color-primary, #0F3D32) !important;
    border-color: var(--color-primary, #0F3D32) !important;
    box-shadow: 0 10px 24px rgba(15, 61, 50, .16);
}

.student-tab:focus-visible,
.btn-brand-primary:focus-visible,
.btn-brand-certificate:focus-visible {
    outline: 3px solid rgba(201, 164, 92, .35);
    outline-offset: 2px;
}

/* Primary Brand Button */
.btn-brand-primary {
    background: var(--color-primary, #0F3D32);
    color: var(--color-on-primary, #ffffff);
    border: 1px solid var(--color-primary, #0F3D32);
    border-radius: 10px;
    font-weight: 800;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
}

.btn-brand-primary:hover {
    background: var(--color-primary-dark, #0a2d25);
    border-color: var(--color-primary-dark, #0a2d25);
    color: var(--color-on-primary, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 61, 50, .20);
    text-decoration: none;
}

/* Danger Brand Button (match primary sizing so action buttons stay aligned) */
.btn-brand-danger {
    background: var(--color-danger, #962020);
    color: #ffffff;
    border: 1px solid var(--color-danger, #962020);
    border-radius: 10px;
    font-weight: 800;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
}

.btn-brand-danger:hover {
    background: #7a2828;
    border-color: #7a2828;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(150, 32, 32, .22);
    text-decoration: none;
}

/* Certificate Brand Button */
.btn-brand-certificate {
    background: var(--color-accent, #c9a45c);
    color: var(--color-primary-dark, #0a2d25);
    border: 1px solid var(--color-accent, #c9a45c);
    border-radius: 10px;
    font-weight: 800;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
}

.btn-brand-certificate:hover {
    background: var(--color-accent-dark, #b8924b);
    border-color: var(--color-accent-dark, #b8924b);
    color: var(--color-primary-dark, #0a2d25);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 164, 92, .22);
    text-decoration: none;
}

.student-sidebar .brand-lockup__text {
    color: var(--color-on-primary, #FAF7EF);
}

/* -----------------------------------------------
   Sidebar nav container
----------------------------------------------- */
.student-sidebar .student-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

/* -----------------------------------------------
   Sidebar links — full-row clickable blocks
   Background is ALWAYS on the <a>, never on spans
----------------------------------------------- */
.student-sidebar .student-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: rgba(250, 247, 239, 0.82);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* Icon span: transparent, inherits color */
.student-sidebar .student-sidebar-link__icon,
.student-sidebar .student-sidebar-link__title {
    background: transparent !important;
    color: inherit;
}

.student-sidebar .student-sidebar-link__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.student-sidebar .student-sidebar-link__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SVG / icon color */
.student-sidebar .student-sidebar-link svg,
.student-sidebar .student-sidebar-link i {
    color: rgba(250, 247, 239, 0.75);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* Hover state — full row */
.student-sidebar .student-sidebar-link:hover {
    background: rgba(250, 247, 239, 0.10);
    color: #ffffff;
    text-decoration: none;
}

.student-sidebar .student-sidebar-link:hover svg,
.student-sidebar .student-sidebar-link:hover i {
    color: var(--color-accent, #C9A45C);
}

/* Active state — full row, accent highlight */
.student-sidebar .student-sidebar-link.active,
.student-sidebar .student-sidebar-link[aria-current="page"] {
    background: rgba(250, 247, 239, 0.16);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.student-sidebar .student-sidebar-link.active svg,
.student-sidebar .student-sidebar-link.active i,
.student-sidebar .student-sidebar-link[aria-current="page"] svg,
.student-sidebar .student-sidebar-link[aria-current="page"] i {
    color: var(--color-accent, #C9A45C);
}

/* Active left-edge indicator for LTR */
body.is-ltr .student-sidebar .student-sidebar-link.active,
body.is-ltr .student-sidebar .student-sidebar-link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--color-accent, #C9A45C);
}

/* Active right-edge indicator for RTL */
body.is-rtl .student-sidebar .student-sidebar-link.active,
body.is-rtl .student-sidebar .student-sidebar-link[aria-current="page"] {
    box-shadow: inset -3px 0 0 var(--color-accent, #C9A45C);
}

/* Logout variant */
.student-sidebar .student-sidebar-link--logout {
    margin-top: 12px;
}

.student-sidebar .student-sidebar-link--logout:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.student-sidebar .student-sidebar-link--logout:hover svg,
.student-sidebar .student-sidebar-link--logout:hover i {
    color: #fca5a5;
}

/* RTL text direction inside links */
body.is-rtl .student-sidebar .student-sidebar-link {
    direction: rtl;
    text-align: right;
}

body.is-ltr .student-sidebar .student-sidebar-link {
    direction: ltr;
    text-align: left;
}

/* -----------------------------------------------
   Dashboard Cards Grid
----------------------------------------------- */
.student-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* -----------------------------------------------
   Responsive
----------------------------------------------- */
@media (max-width: 991px) {
    .student-dashboard-body {
        display: block;
    }
    .student-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .student-sidebar {
        display: none; /* Mobile: handled by off-canvas */
    }
    .student-content {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .student-stats-grid {
        grid-template-columns: 1fr;
    }
    .student-content {
        padding: 16px;
    }
}

/* -----------------------------------------------
   Avatar Profile Dropdown — Mobile (Global)
   Scoped strictly to <= 991px. Desktop unchanged.
   Promotes the avatar dropdown above any sticky header,
   prevents clipping, and respects RTL positioning. Hover
   still opens it on desktop; the JS tap-toggle in main.js
   handles touch devices.
   ----------------------------------------------- */
@media (max-width: 991px) {
    /* The header creates its own stacking context (.header-menu-area has
       z-index: 1023 in style.css). If we leave it that way, the dropdown's
       own z-index is clamped and any sibling section can paint over it.
       Promote the whole header to the top layer on mobile so the dropdown
       can float above the page content as a true overlay. */
    .header-menu-area,
    #frontend-header {
        z-index: 1200 !important;
        isolation: isolate; /* Keep header self-contained, but at the very top */
    }

    /* Allow the dropdown to escape the header's overflow. */
    .header-floating-nav,
    .site-header__right,
    .auth-profile-actions,
    .student-topbar,
    .student-topbar__right,
    .user-profile-cart,
    .user-profile-cart > ul,
    .user-profile-cart > ul > li {
        overflow: visible !important;
    }

    /* The parent li must be a positioned ancestor for the absolute dropdown.
       style.css already sets this; force it here for any cascade overrides. */
    .user-profile-cart > ul > li { position: relative !important; }

    .user-profile-cart .cart-dropdown-menu.notification-dropdown-menu {
        position: absolute !important;
        z-index: 1100 !important; /* Above the sticky header (1030) and any drawer overlay */
        top: calc(100% + 6px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(290px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-6px) !important;
        transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
        pointer-events: none !important;
        box-shadow: 0 12px 32px rgba(15, 43, 38, 0.18) !important;
    }

    html[dir="rtl"] .user-profile-cart .cart-dropdown-menu.notification-dropdown-menu,
    body.is-rtl .user-profile-cart .cart-dropdown-menu.notification-dropdown-menu {
        right: auto !important;
        left: 0 !important;
    }

    .user-profile-cart.is-open .cart-dropdown-menu.notification-dropdown-menu,
    .user-profile-cart > ul > li:hover .cart-dropdown-menu.notification-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .user-profile-cart .cart-dropdown-menu:after { display: none !important; }
}

/* -----------------------------------------------
   Student Dashboard — Mobile Drawer (Hamburger)
   Scoped strictly to <= 991px. Desktop unchanged.
   The off-canvas sidebar lives outside the flex layout
   in master.blade.php and is toggled by .dashboard-menu-toggler.
   Base .off-canvas-menu rules live in style.css; here we only
   (a) ensure RTL slides from the right,
   (b) fix the drawer above all page content & sticky topbar,
   (c) style the close button and overlay for this shell,
   (d) hide the inline "dashboard nav" trigger on content pages.
----------------------------------------------- */
@media (max-width: 991px) {
    .student-mobile-toggle.dashboard-menu-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        line-height: 1;
        font-size: 22px;
        color: var(--color-primary, #0F3D32);
        background: transparent;
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 10px;
        cursor: pointer;
        margin-inline-end: 8px;
        flex-shrink: 0;
    }
    .student-mobile-toggle.dashboard-menu-toggler:hover {
        background: rgba(15, 61, 50, .06);
    }

    /* Drawer base (LTR slides from LEFT) */
    .student-dashboard-shell .off-canvas-menu.dashboard-off-canvas-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 300px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: linear-gradient(180deg, #0F3D32 0%, #0B2B26 100%) !important;
        color: var(--color-on-primary, #FAF7EF);
        z-index: 1100 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
        transform: translateX(-100%) !important;
        transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        visibility: hidden;
    }
    /* RTL: drawer slides from RIGHT */
    body.is-rtl .student-dashboard-shell .off-canvas-menu.dashboard-off-canvas-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18) !important;
    }
    /* Open state */
    .student-dashboard-shell .off-canvas-menu.dashboard-off-canvas-menu.active,
    .student-dashboard-shell .off-canvas-menu.dashboard-off-canvas-menu.off--canvas-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Inner padding + brand block (matches the dark theme) */
    .student-dashboard-shell .dashboard-off-canvas-menu > .logo-box {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
        margin: 0 !important;
        padding: 18px 18px !important;
    }

    /* The sidebar nav lives inside the drawer on mobile — apply the dark theme */
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-nav {
        padding: 12px !important;
        gap: 4px !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link {
        color: rgba(250, 247, 239, 0.85) !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        text-decoration: none !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link svg,
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link i {
        color: inherit !important;
        fill: currentColor !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link:hover {
        background: rgba(250, 247, 239, .10) !important;
        color: #fff !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link.active,
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link[aria-current="page"] {
        background: rgba(250, 247, 239, .18) !important;
        color: #fff !important;
        font-weight: 800 !important;
        box-shadow: inset 3px 0 0 var(--color-accent, #c9a45c);
    }
    body.is-rtl .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link.active,
    body.is-rtl .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link[aria-current="page"] {
        box-shadow: inset -3px 0 0 var(--color-accent, #c9a45c);
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link--logout {
        color: #FFB4B4 !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .student-sidebar-link--logout:hover {
        background: rgba(255, 180, 180, .12) !important;
        color: #fff !important;
    }

    /* Close button inside drawer — premium dark brand style */
    .student-dashboard-shell .dashboard-off-canvas-menu .off-canvas-menu-close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        background: var(--color-accent, #c9a45c) !important;
        color: var(--color-primary-dark, #0a2d25) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 2 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
        font-size: 16px !important;
    }
    .student-dashboard-shell .dashboard-off-canvas-menu .off-canvas-menu-close i {
        margin: 0 !important;
        line-height: 1 !important;
    }
    body.is-rtl .student-dashboard-shell .dashboard-off-canvas-menu .off-canvas-menu-close {
        right: auto !important;
        left: 14px !important;
    }

    /* Overlay above page content but below the drawer */
    .student-dashboard-shell ~ .body-overlay.dashboard-body-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(11, 43, 38, 0.55) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1090 !important;
        transition: opacity .25s ease, visibility .25s ease !important;
    }
    .student-dashboard-shell ~ .body-overlay.dashboard-body-overlay.active,
    .body-overlay.dashboard-body-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide the awkward inline "dashboard_nav" trigger inside content pages.
       The topbar hamburger is the single entry point. */
    .dashboard-menu-toggler.theme-btn {
        display: none !important;
    }

    /* Lock body scroll while drawer is open */
    body.student-drawer-open {
        overflow: hidden !important;
    }
}

/* --- PJAX Loading State --- */
.pjax-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .pjax-loading {
        transition: none;
    }
}

/* ==========================================
   Auth password field: hide/show toggle
   - LTR: toggle sits on the RIGHT (input end)
   - RTL: toggle sits on the LEFT (input end)
   Also adds right-padding to the password input in RTL
   so the typed password never collides with the toggle.
   ========================================== */
.input-group > .input-group-append > .toggle-password {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: transparent;
    border: 0;
    z-index: 5;
}
.is-ltr .input-group > .input-group-append > .toggle-password {
    right: 0;
    left: auto;
}
.is-rtl .input-group > .input-group-append > .toggle-password {
    left: 0;
    right: auto;
}
.is-ltr .input-group .password-field {
    padding-right: 48px;
}
.is-rtl .input-group .password-field {
    padding-left: 48px;
}