/**
 * AdminLTE Override CSS
 * Comprehensive styling overrides for AdminLTE framework
 * Applies green theme (#22c55e primary, #16a34a hover) throughout the app
 */

/* ==========================================================================
   FONT FAMILY OVERRIDES - TAJAWAL FOR ARABIC
   ========================================================================== */

/* Arabic Font - Tajawal for Arabic content */
[dir="rtl"], 
[dir="rtl"] *,
html[lang="ar"], 
html[lang="ar"] *,
.arabic-text,
.arabic-text * {
    font-family: 'Tajawal', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* English Font - Source Sans Pro for English content */
[dir="ltr"], 
[dir="ltr"] *,
html[lang="en"], 
html[lang="en"] *,
.english-text,
.english-text * {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Font Awesome Icons - Preserve original font family for all contexts */
.fas, .far, .fal, .fab, .fa,
i.fas, i.far, i.fal, i.fab, i.fa,
.fa-solid, .fa-regular, .fa-light, .fa-brands,
[class^="fa-"], [class*=" fa-"],
[dir="ltr"] .fas, [dir="ltr"] .far, [dir="ltr"] .fal, [dir="ltr"] .fab, [dir="ltr"] .fa,
[dir="ltr"] i.fas, [dir="ltr"] i.far, [dir="ltr"] i.fal, [dir="ltr"] i.fab, [dir="ltr"] i.fa,
[dir="rtl"] .fas, [dir="rtl"] .far, [dir="rtl"] .fal, [dir="rtl"] .fab, [dir="rtl"] .fa,
[dir="rtl"] i.fas, [dir="rtl"] i.far, [dir="rtl"] i.fal, [dir="rtl"] i.fab, [dir="rtl"] i.fa,
html[lang="en"] .fas, html[lang="en"] .far, html[lang="en"] .fal, html[lang="en"] .fab, html[lang="en"] .fa,
html[lang="ar"] .fas, html[lang="ar"] .far, html[lang="ar"] .fal, html[lang="ar"] .fab, html[lang="ar"] .fa {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

.far, .fa-regular,
[dir="ltr"] .far, [dir="ltr"] .fa-regular,
[dir="rtl"] .far, [dir="rtl"] .fa-regular {
    font-weight: 400 !important;
}

.fab, .fa-brands,
[dir="ltr"] .fab, [dir="ltr"] .fa-brands,
[dir="rtl"] .fab, [dir="rtl"] .fa-brands {
    font-weight: normal !important;
}

/* Global body font fallback */
body, 
html,
.content-wrapper,
.main-sidebar,
.navbar,
.card,
.modal,
.btn,
input,
textarea,
select,
.form-control,
.table,
.sidebar,
.nav-link {
    font-family: 'Source Sans Pro', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure Arabic content always uses Tajawal */
[dir="rtl"] body, 
[dir="rtl"] html,
[dir="rtl"] .content-wrapper,
[dir="rtl"] .main-sidebar,
[dir="rtl"] .navbar,
[dir="rtl"] .card,
[dir="rtl"] .modal,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .form-control,
[dir="rtl"] .table,
[dir="rtl"] .sidebar,
[dir="rtl"] .nav-link {
    font-family: 'Tajawal', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ==========================================================================
   GLOBAL BUTTON OVERRIDES
   ========================================================================== */

/* Primary Buttons */
.content-wrapper .btn-primary,
.card .btn-primary,
.modal .btn-primary,
.navbar .btn-primary,
.sidebar .btn-primary,
.btn-primary {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .btn-primary:hover,
.card .btn-primary:hover,
.modal .btn-primary:hover,
.navbar .btn-primary:hover,
.sidebar .btn-primary:hover,
.btn-primary:hover,
.content-wrapper .btn-primary:focus,
.card .btn-primary:focus,
.modal .btn-primary:focus,
.navbar .btn-primary:focus,
.sidebar .btn-primary:focus,
.btn-primary:focus,
.content-wrapper .btn-primary:active,
.card .btn-primary:active,
.modal .btn-primary:active,
.navbar .btn-primary:active,
.sidebar .btn-primary:active,
.btn-primary:active,
.content-wrapper .btn-primary.active,
.card .btn-primary.active,
.modal .btn-primary.active,
.navbar .btn-primary.active,
.sidebar .btn-primary.active,
.btn-primary.active {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

/* Secondary Buttons */
.content-wrapper .btn-secondary,
.card .btn-secondary,
.modal .btn-secondary,
.navbar .btn-secondary,
.sidebar .btn-secondary,
.btn-secondary {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .btn-secondary:hover,
.card .btn-secondary:hover,
.modal .btn-secondary:hover,
.navbar .btn-secondary:hover,
.sidebar .btn-secondary:hover,
.btn-secondary:hover,
.content-wrapper .btn-secondary:focus,
.card .btn-secondary:focus,
.modal .btn-secondary:focus,
.navbar .btn-secondary:focus,
.sidebar .btn-secondary:focus,
.btn-secondary:focus,
.content-wrapper .btn-secondary:active,
.card .btn-secondary:active,
.modal .btn-secondary:active,
.navbar .btn-secondary:active,
.sidebar .btn-secondary:active,
.btn-secondary:active {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Outline Buttons */
.content-wrapper .btn-outline-primary,
.card .btn-outline-primary,
.modal .btn-outline-primary,
.navbar .btn-outline-primary,
.sidebar .btn-outline-primary,
.btn-outline-primary,
.content-wrapper .btn-outline-secondary,
.card .btn-outline-secondary,
.modal .btn-outline-secondary,
.navbar .btn-outline-secondary,
.sidebar .btn-outline-secondary,
.btn-outline-secondary,
.content-wrapper .btn-outline,
.card .btn-outline,
.modal .btn-outline,
.navbar .btn-outline,
.sidebar .btn-outline,
.btn-outline {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #22c55e !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

.content-wrapper .btn-outline-primary:hover,
.card .btn-outline-primary:hover,
.modal .btn-outline-primary:hover,
.navbar .btn-outline-primary:hover,
.sidebar .btn-outline-primary:hover,
.btn-outline-primary:hover,
.content-wrapper .btn-outline-secondary:hover,
.card .btn-outline-secondary:hover,
.modal .btn-outline-secondary:hover,
.navbar .btn-outline-secondary:hover,
.sidebar .btn-outline-secondary:hover,
.btn-outline-secondary:hover,
.content-wrapper .btn-outline:hover,
.card .btn-outline:hover,
.modal .btn-outline:hover,
.navbar .btn-outline:hover,
.sidebar .btn-outline:hover,
.btn-outline:hover,
.content-wrapper .btn-outline-primary:focus,
.card .btn-outline-primary:focus,
.modal .btn-outline-primary:focus,
.navbar .btn-outline-primary:focus,
.sidebar .btn-outline-primary:focus,
.btn-outline-primary:focus,
.content-wrapper .btn-outline-secondary:focus,
.card .btn-outline-secondary:focus,
.modal .btn-outline-secondary:focus,
.navbar .btn-outline-secondary:focus,
.sidebar .btn-outline-secondary:focus,
.btn-outline-secondary:focus,
.content-wrapper .btn-outline:focus,
.card .btn-outline:focus,
.modal .btn-outline:focus,
.navbar .btn-outline:focus,
.sidebar .btn-outline:focus,
.btn-outline:focus {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

/* Success Buttons - Keep green but ensure consistency */
.content-wrapper .btn-success,
.card .btn-success,
.modal .btn-success,
.navbar .btn-success,
.sidebar .btn-success,
.btn-success {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .btn-success:hover,
.card .btn-success:hover,
.modal .btn-success:hover,
.navbar .btn-success:hover,
.sidebar .btn-success:hover,
.btn-success:hover,
.content-wrapper .btn-success:focus,
.card .btn-success:focus,
.modal .btn-success:focus,
.navbar .btn-success:focus,
.sidebar .btn-success:focus,
.btn-success:focus,
.content-wrapper .btn-success:active,
.card .btn-success:active,
.modal .btn-success:active,
.navbar .btn-success:active,
.sidebar .btn-success:active,
.btn-success:active {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* ==========================================================================
   CUSTOM ACTION BUTTON OVERRIDES (Admin Dashboard)
   ========================================================================== */

/* Base Action Button Styles - Maximum Specificity Nuclear Override */
html body div.wrapper div.content-wrapper .action-btn,
html body .wrapper .content-wrapper .action-btn,
html body .content-wrapper .action-btn,
html body .card .action-btn,
html body .modal .action-btn,
html body .main-content .action-btn,
html body .action-btn,
body .content-wrapper .action-btn,
body .card .action-btn,
body .modal .action-btn,
body .main-content .action-btn,
body .action-btn,
.content-wrapper .action-btn,
.card .action-btn,
.modal .action-btn,
.main-content .action-btn,
a.action-btn,
button.action-btn,
.action-btn {
    padding: 12px 24px !important;
    margin: 8px 6px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    gap: 8px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    min-width: 140px !important;
    min-height: 42px !important;
    white-space: nowrap !important;
}

html body div.wrapper div.content-wrapper .action-btn:hover,
html body .wrapper .content-wrapper .action-btn:hover,
html body .content-wrapper .action-btn:hover,
html body .card .action-btn:hover,
html body .modal .action-btn:hover,
html body .main-content .action-btn:hover,
html body .action-btn:hover,
body .content-wrapper .action-btn:hover,
body .card .action-btn:hover,
body .modal .action-btn:hover,
body .main-content .action-btn:hover,
body .action-btn:hover,
.content-wrapper .action-btn:hover,
.card .action-btn:hover,
.modal .action-btn:hover,
.main-content .action-btn:hover,
a.action-btn:hover,
button.action-btn:hover,
.action-btn:hover {
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Action Button Container Spacing */
.header-actions,
.card-header .action-btn,
.content-header .action-btn,
.page-header .action-btn {
    margin: 8px 4px !important;
}

.button-group {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 12px 0 !important;
}

.button-group .action-btn {
    margin: 0 !important;
}

/* Header Actions Container */
.header-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 16px 0 !important;
    padding: 8px 0 !important;
}

/* Card Header Button Spacing */
.card-header .action-btn {
    padding: 10px 20px !important;
    margin: 4px 6px !important;
    font-size: 13px !important;
}

/* Content Header Button Spacing */
.content-header .action-btn {
    padding: 10px 20px !important;
    margin: 4px 6px !important;
}

/* Table Action Button Spacing */
.table .action-btn {
    padding: 6px 12px !important;
    margin: 2px 4px !important;
    font-size: 12px !important;
    min-width: 80px !important;
    min-height: 32px !important;
}

/* Modal Footer Buttons */
.modal-footer .action-btn {
    margin: 0 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    min-width: 100px !important;
}

/* Floating Action Buttons */
.fab,
.floating-action-btn {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
}

/* Large Button Variant */
.action-btn.large,
.action-btn.lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    min-width: 150px !important;
    margin: 0.75rem 0.5rem !important;
}

/* Small Button Variant */
.action-btn.small,
.action-btn.sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-width: 80px !important;
    margin: 0.25rem !important;
}

/* Extra Small Button Variant */
.action-btn.xs {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: 60px !important;
    margin: 0.125rem !important;
    border-radius: 6px !important;
}

/* Full Width Buttons */
.action-btn.full-width,
.action-btn.block {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    justify-content: center !important;
}

/* Responsive Button Spacing */
@media (max-width: 768px) {
    .action-btn {
        padding: 10px 16px !important;
        margin: 6px 4px !important;
        font-size: 13px !important;
        min-width: 120px !important;
    }
    
    .button-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .header-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .action-btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
        justify-content: center !important;
    }
    
    .btn-group,
    .button-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .action-btn,
    .button-group .action-btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
}

/* Button Icon Spacing */
.action-btn i {
    margin-right: 0.5rem !important;
    font-size: 0.9em !important;
}

.action-btn i:only-child {
    margin: 0 !important;
}

/* RTL Support for Buttons */
[dir="rtl"] .action-btn i {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .fab,
[dir="rtl"] .floating-action-btn {
    right: auto !important;
    left: 2rem !important;
}

/* Button States with Better Spacing */
.action-btn:focus {
    outline: 2px solid rgba(34, 197, 94, 0.5) !important;
    outline-offset: 2px !important;
}

.action-btn:disabled,
.action-btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading State */
.action-btn.loading {
    position: relative !important;
    pointer-events: none !important;
}

.action-btn.loading::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid currentColor !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-left: 0.5rem !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Action Button Variants - Maximum Specificity Nuclear Override */
html body div.wrapper div.content-wrapper .action-btn.primary,
html body .wrapper .content-wrapper .action-btn.primary,
html body .content-wrapper .action-btn.primary,
html body .card .action-btn.primary,
html body .modal .action-btn.primary,
html body .main-content .action-btn.primary,
html body .action-btn.primary,
body .content-wrapper .action-btn.primary,
body .card .action-btn.primary,
body .modal .action-btn.primary,
body .main-content .action-btn.primary,
body .action-btn.primary,
.content-wrapper .action-btn.primary,
.card .action-btn.primary,
.modal .action-btn.primary,
.main-content .action-btn.primary,
a.action-btn.primary,
button.action-btn.primary,
.action-btn.primary {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.primary:hover,
html body .wrapper .content-wrapper .action-btn.primary:hover,
html body .content-wrapper .action-btn.primary:hover,
html body .card .action-btn.primary:hover,
html body .modal .action-btn.primary:hover,
html body .main-content .action-btn.primary:hover,
html body .action-btn.primary:hover,
body .content-wrapper .action-btn.primary:hover,
body .card .action-btn.primary:hover,
body .modal .action-btn.primary:hover,
body .main-content .action-btn.primary:hover,
body .action-btn.primary:hover,
.content-wrapper .action-btn.primary:hover,
.card .action-btn.primary:hover,
.modal .action-btn.primary:hover,
.main-content .action-btn.primary:hover,
a.action-btn.primary:hover,
button.action-btn.primary:hover,
.action-btn.primary:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

html body div.wrapper div.content-wrapper .action-btn.success,
html body .wrapper .content-wrapper .action-btn.success,
html body .content-wrapper .action-btn.success,
html body .card .action-btn.success,
html body .modal .action-btn.success,
html body .main-content .action-btn.success,
html body .action-btn.success,
body .content-wrapper .action-btn.success,
body .card .action-btn.success,
body .modal .action-btn.success,
body .main-content .action-btn.success,
body .action-btn.success,
.content-wrapper .action-btn.success,
.card .action-btn.success,
.modal .action-btn.success,
.main-content .action-btn.success,
a.action-btn.success,
button.action-btn.success,
.action-btn.success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.success:hover,
html body .wrapper .content-wrapper .action-btn.success:hover,
html body .content-wrapper .action-btn.success:hover,
html body .card .action-btn.success:hover,
html body .modal .action-btn.success:hover,
html body .main-content .action-btn.success:hover,
html body .action-btn.success:hover,
body .content-wrapper .action-btn.success:hover,
body .card .action-btn.success:hover,
body .modal .action-btn.success:hover,
body .main-content .action-btn.success:hover,
body .action-btn.success:hover,
.content-wrapper .action-btn.success:hover,
.card .action-btn.success:hover,
.modal .action-btn.success:hover,
.main-content .action-btn.success:hover,
a.action-btn.success:hover,
button.action-btn.success:hover,
.action-btn.success:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

html body div.wrapper div.content-wrapper .action-btn.warning,
html body .wrapper .content-wrapper .action-btn.warning,
html body .content-wrapper .action-btn.warning,
html body .card .action-btn.warning,
html body .modal .action-btn.warning,
html body .main-content .action-btn.warning,
html body .action-btn.warning,
body .content-wrapper .action-btn.warning,
body .card .action-btn.warning,
body .modal .action-btn.warning,
body .main-content .action-btn.warning,
body .action-btn.warning,
.content-wrapper .action-btn.warning,
.card .action-btn.warning,
.modal .action-btn.warning,
.main-content .action-btn.warning,
a.action-btn.warning,
button.action-btn.warning,
.action-btn.warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1f2937 !important;
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.warning:hover,
html body .wrapper .content-wrapper .action-btn.warning:hover,
html body .content-wrapper .action-btn.warning:hover,
html body .card .action-btn.warning:hover,
html body .modal .action-btn.warning:hover,
html body .main-content .action-btn.warning:hover,
html body .action-btn.warning:hover,
body .content-wrapper .action-btn.warning:hover,
body .card .action-btn.warning:hover,
body .modal .action-btn.warning:hover,
body .main-content .action-btn.warning:hover,
body .action-btn.warning:hover,
.content-wrapper .action-btn.warning:hover,
.card .action-btn.warning:hover,
.modal .action-btn.warning:hover,
.main-content .action-btn.warning:hover,
a.action-btn.warning:hover,
button.action-btn.warning:hover,
.action-btn.warning:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 12px 35px rgba(251, 191, 36, 0.4) !important;
    color: #1f2937 !important;
    text-decoration: none !important;
}

html body div.wrapper div.content-wrapper .action-btn.danger,
html body .wrapper .content-wrapper .action-btn.danger,
html body .content-wrapper .action-btn.danger,
html body .card .action-btn.danger,
html body .modal .action-btn.danger,
html body .main-content .action-btn.danger,
html body .action-btn.danger,
body .content-wrapper .action-btn.danger,
body .card .action-btn.danger,
body .modal .action-btn.danger,
body .main-content .action-btn.danger,
body .action-btn.danger,
.content-wrapper .action-btn.danger,
.card .action-btn.danger,
.modal .action-btn.danger,
.main-content .action-btn.danger,
a.action-btn.danger,
button.action-btn.danger,
.action-btn.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.danger:hover,
html body .wrapper .content-wrapper .action-btn.danger:hover,
html body .content-wrapper .action-btn.danger:hover,
html body .card .action-btn.danger:hover,
html body .modal .action-btn.danger:hover,
html body .main-content .action-btn.danger:hover,
html body .action-btn.danger:hover,
body .content-wrapper .action-btn.danger:hover,
body .card .action-btn.danger:hover,
body .modal .action-btn.danger:hover,
body .main-content .action-btn.danger:hover,
body .action-btn.danger:hover,
.content-wrapper .action-btn.danger:hover,
.card .action-btn.danger:hover,
.modal .action-btn.danger:hover,
.main-content .action-btn.danger:hover,
a.action-btn.danger:hover,
button.action-btn.danger:hover,
.action-btn.danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

html body div.wrapper div.content-wrapper .action-btn.info,
html body .wrapper .content-wrapper .action-btn.info,
html body .content-wrapper .action-btn.info,
html body .card .action-btn.info,
html body .modal .action-btn.info,
html body .main-content .action-btn.info,
html body .action-btn.info,
body .content-wrapper .action-btn.info,
body .card .action-btn.info,
body .modal .action-btn.info,
body .main-content .action-btn.info,
body .action-btn.info,
.content-wrapper .action-btn.info,
.card .action-btn.info,
.modal .action-btn.info,
.main-content .action-btn.info,
a.action-btn.info,
button.action-btn.info,
.action-btn.info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.info:hover,
html body .wrapper .content-wrapper .action-btn.info:hover,
html body .content-wrapper .action-btn.info:hover,
html body .card .action-btn.info:hover,
html body .modal .action-btn.info:hover,
html body .main-content .action-btn.info:hover,
html body .action-btn.info:hover,
body .content-wrapper .action-btn.info:hover,
body .card .action-btn.info:hover,
body .modal .action-btn.info:hover,
body .main-content .action-btn.info:hover,
body .action-btn.info:hover,
.content-wrapper .action-btn.info:hover,
.card .action-btn.info:hover,
.modal .action-btn.info:hover,
.main-content .action-btn.info:hover,
a.action-btn.info:hover,
button.action-btn.info:hover,
.action-btn.info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 12px 35px rgba(6, 182, 212, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

/* SECONDARY BUTTON - NUCLEAR OVERRIDE */
html body div.wrapper div.content-wrapper .action-btn.secondary,
html body .wrapper .content-wrapper .action-btn.secondary,
html body .content-wrapper .action-btn.secondary,
html body .card .action-btn.secondary,
html body .modal .action-btn.secondary,
html body .main-content .action-btn.secondary,
html body .action-btn.secondary,
body .content-wrapper .action-btn.secondary,
body .card .action-btn.secondary,
body .modal .action-btn.secondary,
body .main-content .action-btn.secondary,
body .action-btn.secondary,
.content-wrapper .action-btn.secondary,
.card .action-btn.secondary,
.modal .action-btn.secondary,
.main-content .action-btn.secondary,
a.action-btn.secondary,
button.action-btn.secondary,
.action-btn.secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.3) !important;
}

html body div.wrapper div.content-wrapper .action-btn.secondary:hover,
html body .wrapper .content-wrapper .action-btn.secondary:hover,
html body .content-wrapper .action-btn.secondary:hover,
html body .card .action-btn.secondary:hover,
html body .modal .action-btn.secondary:hover,
html body .main-content .action-btn.secondary:hover,
html body .action-btn.secondary:hover,
body .content-wrapper .action-btn.secondary:hover,
body .card .action-btn.secondary:hover,
body .modal .action-btn.secondary:hover,
body .main-content .action-btn.secondary:hover,
body .action-btn.secondary:hover,
.content-wrapper .action-btn.secondary:hover,
.card .action-btn.secondary:hover,
.modal .action-btn.secondary:hover,
.main-content .action-btn.secondary:hover,
a.action-btn.secondary:hover,
button.action-btn.secondary:hover,
.action-btn.secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    box-shadow: 0 12px 35px rgba(107, 114, 128, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ==========================================================================
   FORM ELEMENTS OVERRIDES
   ========================================================================== */

/* Input Focus States */
.content-wrapper .form-control:focus,
.card .form-control:focus,
.modal .form-control:focus,
.form-control:focus,
.content-wrapper .form-select:focus,
.card .form-select:focus,
.modal .form-select:focus,
.form-select:focus,
.content-wrapper input:focus,
.card input:focus,
.modal input:focus,
input:focus,
.content-wrapper select:focus,
.card select:focus,
.modal select:focus,
select:focus,
.content-wrapper textarea:focus,
.card textarea:focus,
.modal textarea:focus,
textarea:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25) !important;
}

/* Custom Select Dropdown */
.content-wrapper .custom-select:focus,
.card .custom-select:focus,
.modal .custom-select:focus,
.custom-select:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25) !important;
}

/* Checkboxes and Radios */
.content-wrapper .custom-control-input:checked ~ .custom-control-label::before,
.card .custom-control-input:checked ~ .custom-control-label::before,
.modal .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

.content-wrapper .custom-control-input:focus ~ .custom-control-label::before,
.card .custom-control-input:focus ~ .custom-control-label::before,
.modal .custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25) !important;
}

/* Switch Controls */
.content-wrapper .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.card .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.modal .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

/* ==========================================================================
   NAVIGATION OVERRIDES
   ========================================================================== */

/* Sidebar Navigation */
.main-sidebar .nav-sidebar .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-item > .nav-link:hover {
    background-color: #22c55e !important;
    color: white !important;
}

.main-sidebar .nav-sidebar .nav-item > .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar .nav-item > .nav-link:hover .nav-icon {
    color: white !important;
}

/* Navbar */
.navbar-primary {
    background-color: #22c55e !important;
}

.navbar-primary .navbar-nav .nav-link:hover,
.navbar-primary .navbar-nav .nav-link:focus {
    background-color: #16a34a !important;
    color: white !important;
}

/* Breadcrumb */
.content-wrapper .breadcrumb-item.active,
.breadcrumb-item.active {
    color: #22c55e !important;
}

.content-wrapper .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
    color: #22c55e !important;
}

/* ==========================================================================
   CARD AND CONTAINER OVERRIDES
   ========================================================================== */

/* Card Headers with Primary Color */
.content-wrapper .card-header.bg-primary,
.card-header.bg-primary {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

.content-wrapper .card-primary.card-outline,
.card-primary.card-outline {
    border-top: 3px solid #22c55e !important;
}

.content-wrapper .card-primary:not(.card-outline) .card-header,
.card-primary:not(.card-outline) .card-header {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

/* ==========================================================================
   TABLE OVERRIDES
   ========================================================================== */

/* Table Headers */
.content-wrapper .table-primary,
.table-primary {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.content-wrapper .table-primary th,
.table-primary th,
.content-wrapper .table-primary td,
.table-primary td {
    border-color: #22c55e !important;
}

/* DataTables */
.content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* ==========================================================================
   MODAL OVERRIDES - COMPREHENSIVE WHITE BACKGROUND FOR ALL MODALS
   ========================================================================== */

/* Universal Modal Background Override - Maximum Specificity */
.modal,
html .modal,
body .modal,
div.modal,
#app .modal,
.wrapper .modal,
.content-wrapper .modal,
.modal-dialog,
.modal-content,
[class*="modal"],
[id*="modal"],
[id*="Modal"] {
    background-color: transparent !important;
}

/* Modal Dialog - Transparent Container */
.modal-dialog,
.modal .modal-dialog,
html .modal-dialog,
body .modal-dialog {
    background-color: transparent !important;
    background: transparent !important;
}

/* Modal Backdrop - White Background */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade,
html .modal-backdrop,
body .modal-backdrop {
    background-color: rgba(255, 255, 255, 0.9) !important; /* White overlay */
}

/* Modal Content - Comprehensive White Background */
.modal .modal-dialog .modal-content,
.modal-dialog .modal-content,
.modal-content,
html .modal-content,
body .modal-content,
div.modal-content,
#app .modal-content,
.wrapper .modal-content,
.content-wrapper .modal-content,
.modal-content[style] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    color: #1f2937 !important;
    opacity: 1 !important;
}

/* Modal Header - Universal White Background */
.modal-header,
.modal .modal-header,
.modal-dialog .modal-header,
.modal-content .modal-header,
html .modal-header,
body .modal-header,
div.modal-header,
#app .modal-header,
.wrapper .modal-header,
.content-wrapper .modal-header,
.modal-header[style] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 12px 12px 0 0 !important;
    color: #1f2937 !important;
    opacity: 1 !important;
}

/* Modal Body - Universal White Background */
.modal-body,
.modal .modal-body,
.modal-dialog .modal-body,
.modal-content .modal-body,
html .modal-body,
body .modal-body,
div.modal-body,
#app .modal-body,
.wrapper .modal-body,
.content-wrapper .modal-body,
.modal-body[style] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    opacity: 1 !important;
}

/* Modal Footer - Universal White Background */
.modal-footer,
.modal .modal-footer,
.modal-dialog .modal-footer,
.modal-content .modal-footer,
html .modal-footer,
body .modal-footer,
div.modal-footer,
#app .modal-footer,
.wrapper .modal-footer,
.content-wrapper .modal-footer,
.modal-footer[style] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 0 0 12px 12px !important;
    color: #1f2937 !important;
    opacity: 1 !important;
}

/* Force All Modal Text Content to Dark */
.modal *:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-secondary):not(.text-white):not([class*="bg-"]),
.modal-content *:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-secondary):not(.text-white):not([class*="bg-"]),
.modal-header *:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-secondary):not(.text-white):not([class*="bg-"]),
.modal-body *:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-secondary):not(.text-white):not([class*="bg-"]),
.modal-footer *:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-secondary):not(.text-white):not([class*="bg-"]) {
    background-color: transparent !important;
    color: #1f2937 !important;
}

/* Modal Headers with Specific Colors */
.modal-header.bg-primary,
.content-wrapper .modal-header.bg-primary {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.modal-header.bg-danger,
.content-wrapper .modal-header.bg-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.modal-header.bg-warning,
.content-wrapper .modal-header.bg-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1f2937 !important;
}

.modal-header.bg-info,
.content-wrapper .modal-header.bg-info {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

.modal-header.bg-success,
.content-wrapper .modal-header.bg-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

/* Modal Title Styling */
.modal-title,
.modal .modal-title,
.modal-header .modal-title {
    color: inherit !important;
    font-weight: 600 !important;
}

/* Modal Close Button */
.modal-header .btn-close,
.modal-header .close,
.modal .btn-close,
.modal .close {
    color: inherit !important;
    opacity: 0.8 !important;
}

.modal-header .btn-close:hover,
.modal-header .close:hover,
.modal .btn-close:hover,
.modal .close:hover {
    opacity: 1 !important;
}

/* Specific Modal IDs and Classes */
#startQuizModal,
#submitModal,
#exitWarningModal,
#confirmModal,
#deleteModal,
#editModal,
#viewModal,
.quiz-modal,
.confirmation-modal,
.alert-modal,
.form-modal,
.delete-modal,
.edit-modal,
.view-modal,
.custom-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#startQuizModal .modal-content,
#submitModal .modal-content,
#exitWarningModal .modal-content,
#confirmModal .modal-content,
#deleteModal .modal-content,
#editModal .modal-content,
#viewModal .modal-content,
.quiz-modal .modal-content,
.confirmation-modal .modal-content,
.alert-modal .modal-content,
.form-modal .modal-content,
.delete-modal .modal-content,
.edit-modal .modal-content,
.view-modal .modal-content,
.custom-modal .modal-content {
    background-color: white !important;
    color: #1f2937 !important;
}

/* AdminLTE Modal Classes */
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    background-color: transparent !important;
}

/* Bootstrap Modal States */
.modal.fade,
.modal.show {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Livewire Modal Support */
.livewire-modal,
.livewire-modal .modal-content,
.livewire-modal .modal-header,
.livewire-modal .modal-body,
.livewire-modal .modal-footer {
    background-color: white !important;
    color: #1f2937 !important;
}

/* SweetAlert Modal Support */
.swal2-popup,
.swal2-modal {
    background-color: white !important;
    color: #1f2937 !important;
}

/* Dark Mode Override - Force Light Mode for All Modals */
@media (prefers-color-scheme: dark) {
    .modal,
    .modal *,
    .modal-content,
    .modal-content *,
    .modal-header,
    .modal-header *,
    .modal-body,
    .modal-body *,
    .modal-footer,
    .modal-footer * {
        background-color: #ffffff !important;
        color: #1f2937 !important;
        color-scheme: light !important;
    }
    
    /* Exception for specifically colored elements */
    .modal-header.bg-primary,
    .modal-header.bg-danger,
    .modal-header.bg-warning,
    .modal-header.bg-info,
    .modal-header.bg-success,
    .btn,
    .badge,
    .alert,
    [class*="bg-"] {
        background-color: inherit !important;
        color: inherit !important;
    }
    
    /* Force modal backdrop to stay dark */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
}

/* ==========================================================================
   FINAL MODAL OVERRIDE - ENSURE FULL WHITE BACKGROUND
   ========================================================================== */

/* Ultimate Modal Content Override - Force Full White */
.modal-content,
.modal-content *:not(.btn):not(.badge):not(.alert):not([class*="bg-"]):not([class*="text-"]) {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
}

/* Force Modal Content to be Fully Opaque */
.modal-content {
    background-color: #fff !important;
    background: #ffffff !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Override Any Inline Styles */
.modal-content[style*="background"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Remove any transparency from modal elements */
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* ==========================================================================
   PROGRESS AND LOADING OVERRIDES
   ========================================================================== */

/* Progress Bars */
.content-wrapper .progress-bar,
.progress-bar {
    background-color: #22c55e !important;
}

.content-wrapper .progress-bar.bg-primary,
.progress-bar.bg-primary {
    background-color: #22c55e !important;
}

/* Loading Spinners */
.content-wrapper .spinner-border.text-primary,
.spinner-border.text-primary {
    color: #22c55e !important;
}

/* ==========================================================================
   ALERT AND NOTIFICATION OVERRIDES
   ========================================================================== */

/* Success Alerts */
.content-wrapper .alert-success,
.alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
    color: #16a34a !important;
}

/* Toast Notifications */
.content-wrapper .toast-header.bg-primary,
.toast-header.bg-primary {
    background-color: #22c55e !important;
    color: white !important;
}

/* ==========================================================================
   BADGE OVERRIDES
   ========================================================================== */

/* Primary Badges */
.content-wrapper .badge-primary,
.badge-primary {
    background-color: #22c55e !important;
}

.content-wrapper .badge-success,
.badge-success {
    background-color: #22c55e !important;
}

/* Make badge text black for better contrast */
.badge-permission,
.badge-permission.settings,
.badge-permission.quiz,
.badge-status {
    color: #000 !important;
}

/* Example: set a custom background for quiz permission badge */
.badge-permission.quiz {
    background: #f0f0f0 !important; /* or your preferred color */
    margin-right: 0.25rem;
}

/* Example: set a custom background for status badge */
.badge-status {
    background: #e0e0e0 !important; /* or your preferred color */
}

/* ==========================================================================
   PAGINATION OVERRIDES
   ========================================================================== */

/* Pagination */
.content-wrapper .page-link,
.page-link {
    color: #22c55e !important;
}

.content-wrapper .page-item.active .page-link,
.page-item.active .page-link {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .page-link:hover,
.page-link:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Fix Pagination Arrow Sizing - Maximum Specificity Override */
html body div.wrapper div.content-wrapper .pagination svg,
html body .wrapper .content-wrapper .pagination svg,
html body .content-wrapper .pagination svg,
html body .card .pagination svg,
html body .modal .pagination svg,
html body .main-content .pagination svg,
html body .pagination svg,
body .content-wrapper .pagination svg,
body .card .pagination svg,
body .modal .pagination svg,
body .main-content .pagination svg,
body .pagination svg,
.content-wrapper .pagination svg,
.card .pagination svg,
.modal .pagination svg,
.main-content .pagination svg,
.pagination svg,
.page-link svg,
.page-item svg,
.pagination .w-5,
.pagination .h-5,
.page-link .w-5,
.page-link .h-5,
.page-item .w-5,
.page-item .h-5 {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 20px !important;
    line-height: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Force pagination arrows to be small and properly sized */
.pagination .page-link svg,
.page-item .page-link svg,
.pagination svg.w-5,
.pagination svg.h-5,
.page-link svg.w-5,
.page-link svg.h-5,
.page-item svg.w-5,
.page-item svg.h-5 {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 20px !important;
    line-height: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Ensure pagination container doesn't affect arrow sizing */
.pagination,
.page-item,
.page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix for Livewire pagination specifically */
.livewire-pagination svg,
.livewire-pagination .w-5,
.livewire-pagination .h-5,
.livewire-pagination svg.w-5,
.livewire-pagination svg.h-5 {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 20px !important;
    line-height: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   DROPDOWN OVERRIDES
   ========================================================================== */

/* Dropdown Items */
.content-wrapper .dropdown-item:hover,
.dropdown-item:hover,
.content-wrapper .dropdown-item:focus,
.dropdown-item:focus {
    background-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .dropdown-item.active,
.dropdown-item.active {
    background-color: #22c55e !important;
    color: white !important;
}

/* ==========================================================================
   TABS OVERRIDES
   ========================================================================== */

/* Nav Tabs */
.content-wrapper .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    border-color: #22c55e #22c55e #fff !important;
    color: #22c55e !important;
}

.content-wrapper .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
    border-color: #22c55e #22c55e #22c55e !important;
    color: #22c55e !important;
}

/* Nav Pills */
.content-wrapper .nav-pills .nav-link.active,
.nav-pills .nav-link.active {
    background-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .nav-pills .nav-link:hover,
.nav-pills .nav-link:hover {
    background-color: #16a34a !important;
    color: white !important;
}

/* ==========================================================================
   LINK OVERRIDES
   ========================================================================== */

/* Primary Links */
.content-wrapper a.text-primary,
a.text-primary {
    color: #22c55e !important;
}

.content-wrapper a.text-primary:hover,
a.text-primary:hover {
    color: #16a34a !important;
}

/* ==========================================================================
   CUSTOM COMPONENT OVERRIDES
   ========================================================================== */

/* Action Buttons */
.content-wrapper .action-button,
.card .action-button,
.modal .action-button,
.action-button {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .action-button:hover,
.card .action-button:hover,
.modal .action-button:hover,
.action-button:hover {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Status Badges */
.content-wrapper .quiz-status.published,
.card .quiz-status.published,
.modal .quiz-status.published,
.quiz-status.published {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.content-wrapper .quiz-status.active,
.card .quiz-status.active,
.modal .quiz-status.active,
.quiz-status.active {
    background: #dcfce7 !important;
    color: #166534 !important;
}

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

/* Mobile Adjustments */
@media (max-width: 768px) {
    .content-wrapper .btn,
    .card .btn,
    .modal .btn,
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .content-wrapper .btn-sm,
    .card .btn-sm,
    .modal .btn-sm,
    .btn-sm {
        padding: 0.25rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   TEXT COLOR OVERRIDES
   ========================================================================== */

/* White Text for Better Contrast */
.content-wrapper .text-white,
.card .text-white,
.modal .text-white,
.text-white {
    color: white !important;
}

/* Header Icons and Text */
.content-wrapper .header-icon,
.card .header-icon,
.modal .header-icon,
.header-icon {
    color: white !important;
}

.content-wrapper .page-subtitle,
.card .page-subtitle,
.modal .page-subtitle,
.page-subtitle {
    color: white !important;
}

/* ==========================================================================
   ADDITIONAL ADMINLTE SPECIFIC OVERRIDES
   ========================================================================== */

/* AdminLTE Specific Classes */
.btn-app:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}

.btn-app.bg-primary {
    background-color: #22c55e !important;
}

/* Control Sidebar */
.control-sidebar-dark .nav-link.active {
    background-color: #22c55e !important;
}

/* Info Box */
.info-box-icon.bg-primary {
    background-color: #22c55e !important;
}

/* Small Box */
.small-box.bg-primary {
    background-color: #22c55e !important;
}

.small-box.bg-primary .icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Direct Chat */
.direct-chat-primary .right > .direct-chat-text {
    background-color: #22c55e !important;
    color: white !important;
}

/* Timeline */
.timeline > li > .timeline-item > .timeline-header {
    border-bottom: 1px solid #22c55e !important;
}

.timeline > li > .timeline-item > .timeline-header.bg-primary {
    background-color: #22c55e !important;
}

/* ==========================================================================
   ANALYTICS DASHBOARD OVERRIDES - ORGANIZATION MODULE
   ========================================================================== */

/* Analytics Dashboard Container Override */
.content-wrapper .analytics-dashboard,
.analytics-dashboard {
    background: transparent !important;
    padding: 0 !important;
}

/* Analytics Header Override - Ensure Gradient Display */
.content-wrapper .analytics-header,
.analytics-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 20px !important;
    color: white !important;
}

.content-wrapper .analytics-header .header-title,
.analytics-header .header-title,
.content-wrapper .analytics-header .header-subtitle,
.analytics-header .header-subtitle {
    color: white !important;
}

.content-wrapper .analytics-header .floating-icon,
.analytics-header .floating-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.content-wrapper .analytics-header .date-input,
.analytics-header .date-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.content-wrapper .analytics-header .date-input::placeholder,
.analytics-header .date-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.content-wrapper .analytics-header .btn,
.analytics-header .btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.content-wrapper .analytics-header .btn:hover,
.analytics-header .btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

/* Analytics Cards Override */
.content-wrapper .analytics-dashboard .stat-card,
.analytics-dashboard .stat-card,
.content-wrapper .analytics-dashboard .chart-card,
.analytics-dashboard .chart-card,
.content-wrapper .analytics-dashboard .analytics-card,
.analytics-dashboard .analytics-card {
    background: white !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Analytics Card Headers Override */
.content-wrapper .analytics-dashboard .card-header,
.analytics-dashboard .card-header {
    background: transparent !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Analytics Statistics Icons Override */
.content-wrapper .analytics-dashboard .stat-icon,
.analytics-dashboard .stat-icon {
    background: linear-gradient(135deg, var(--card-color), var(--card-color-dark)) !important;
    color: white !important;
}

/* Analytics Progress Bars Override */
.content-wrapper .analytics-dashboard .stat-progress .progress-bar,
.analytics-dashboard .stat-progress .progress-bar,
.content-wrapper .analytics-dashboard .score-bar .score-fill,
.analytics-dashboard .score-bar .score-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

/* Analytics Buttons Override */
.content-wrapper .analytics-dashboard .btn-primary,
.analytics-dashboard .btn-primary {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

.content-wrapper .analytics-dashboard .btn-primary:hover,
.analytics-dashboard .btn-primary:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Analytics Export Section Override */
.content-wrapper .analytics-dashboard .export-card,
.analytics-dashboard .export-card {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
    border-radius: 16px !important;
}

/* Analytics Performance Badges Override */
.content-wrapper .analytics-dashboard .score-badge,
.analytics-dashboard .score-badge,
.content-wrapper .analytics-dashboard .difficulty-badge,
.analytics-dashboard .difficulty-badge,
.content-wrapper .analytics-dashboard .performance-badge,
.analytics-dashboard .performance-badge {
    border-radius: 6px !important;
    font-weight: 500 !important;
}

/* Analytics Real-time Indicator Override */
.content-wrapper .analytics-dashboard .realtime-indicator,
.analytics-dashboard .realtime-indicator,
.content-wrapper .analytics-dashboard .loading-indicator,
.analytics-dashboard .loading-indicator {
    background: rgba(34, 197, 94, 0.95) !important;
    color: white !important;
    border-radius: 50px !important;
    z-index: 9999 !important;
}

/* Analytics Table Override */
.content-wrapper .analytics-dashboard .performance-table,
.analytics-dashboard .performance-table {
    background: transparent !important;
}

.content-wrapper .analytics-dashboard .table-header,
.analytics-dashboard .table-header {
    background: #f9fafb !important;
    color: #374151 !important;
    border-radius: 8px !important;
}

.content-wrapper .analytics-dashboard .table-row:hover,
.analytics-dashboard .table-row:hover {
    background: #f9fafb !important;
}

/* Analytics Modal Overrides - Ensure Modals Display Correctly */
.content-wrapper .analytics-dashboard .modal-content,
.analytics-dashboard .modal-content {
    background: white !important;
    color: #1f2937 !important;
}

/* Override AdminLTE Card Styles for Analytics */
.content-wrapper .analytics-dashboard .card,
.analytics-dashboard .card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.content-wrapper .analytics-dashboard .card-body,
.analytics-dashboard .card-body {
    padding: 1.5rem !important;
}

/* Override AdminLTE Button Group Styles */
.content-wrapper .analytics-dashboard .btn-group .btn,
.analytics-dashboard .btn-group .btn {
    border-radius: 8px !important;
    margin: 0 0.25rem !important;
}

/* Override AdminLTE Form Controls in Analytics */
.content-wrapper .analytics-dashboard .form-control,
.analytics-dashboard .form-control {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}

.content-wrapper .analytics-dashboard .form-control:focus,
.analytics-dashboard .form-control:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25) !important;
}

/* Override AdminLTE Small Box Styles for Analytics Stats */
.content-wrapper .analytics-dashboard .small-box,
.analytics-dashboard .small-box {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Responsive Analytics Overrides */
@media (max-width: 768px) {
    .content-wrapper .analytics-header,
    .analytics-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
    
    .content-wrapper .analytics-dashboard .chart-card,
    .analytics-dashboard .chart-card,
    .content-wrapper .analytics-dashboard .analytics-card,
    .analytics-dashboard .analytics-card {
        margin-bottom: 1rem !important;
    }
} 

/* ==========================================================================
   DROPDOWN SELECT STYLING OVERRIDES
   ========================================================================== */

/* Base Select Dropdown Styles - Maximum Specificity */
html body div.wrapper div.content-wrapper select,
html body .wrapper .content-wrapper select,
html body .content-wrapper select,
html body .card select,
html body .modal select,
html body .form-container select,
html body .combination-form select,
html body .field-select,
html body .category-select,
html body .level-select,
html body .language-select,
body .content-wrapper select,
body .card select,
body .modal select,
body .form-container select,
body .combination-form select,
.content-wrapper select,
.card select,
.modal select,
.form-container select,
.combination-form select,
.field-select,
.category-select,
.level-select,
.language-select,
select {
    padding: 12px 16px !important;
    margin: 4px 0 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    cursor: pointer !important;
    min-height: 44px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 48px !important;
    position: relative !important;
}

/* Dropdown Focus State */
html body div.wrapper div.content-wrapper select:focus,
html body .wrapper .content-wrapper select:focus,
html body .content-wrapper select:focus,
html body .card select:focus,
html body .modal select:focus,
html body .form-container select:focus,
html body .combination-form select:focus,
body .content-wrapper select:focus,
body .card select:focus,
body .modal select:focus,
body .form-container select:focus,
body .combination-form select:focus,
.content-wrapper select:focus,
.card select:focus,
.modal select:focus,
.form-container select:focus,
.combination-form select:focus,
.field-select:focus,
.category-select:focus,
.level-select:focus,
.language-select:focus,
select:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
    background-color: #ffffff !important;
}

/* Dropdown Hover State */
html body div.wrapper div.content-wrapper select:hover,
html body .wrapper .content-wrapper select:hover,
html body .content-wrapper select:hover,
html body .card select:hover,
html body .modal select:hover,
html body .form-container select:hover,
html body .combination-form select:hover,
body .content-wrapper select:hover,
body .card select:hover,
body .modal select:hover,
body .form-container select:hover,
body .combination-form select:hover,
.content-wrapper select:hover,
.card select:hover,
.modal select:hover,
.form-container select:hover,
.combination-form select:hover,
.field-select:hover,
.category-select:hover,
.level-select:hover,
.language-select:hover,
select:hover {
    border-color: #22c55e !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15) !important;
}

/* Disabled Dropdown State */
html body div.wrapper div.content-wrapper select:disabled,
html body .wrapper .content-wrapper select:disabled,
html body .content-wrapper select:disabled,
html body .card select:disabled,
html body .modal select:disabled,
html body .form-container select:disabled,
html body .combination-form select:disabled,
body .content-wrapper select:disabled,
body .card select:disabled,
body .modal select:disabled,
body .form-container select:disabled,
body .combination-form select:disabled,
.content-wrapper select:disabled,
.card select:disabled,
.modal select:disabled,
.form-container select:disabled,
.combination-form select:disabled,
.field-select:disabled,
.category-select:disabled,
.level-select:disabled,
.language-select:disabled,
select:disabled {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Dropdown Container Spacing */
.form-group select,
.form-field select,
.field-group select {
    margin-bottom: 8px !important;
}

/* Dropdown Labels */
.form-group label,
.form-field label,
.field-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    font-size: 14px !important;
}

/* Multi-select Dropdown */
select[multiple] {
    min-height: 120px !important;
    padding: 8px 12px !important;
    background-image: none !important;
    padding-right: 16px !important;
}

/* Form Grid Dropdown Spacing */
.form-grid .form-group,
.combination-form .form-group {
    margin-bottom: 16px !important;
}

.form-grid .form-group:last-child,
.combination-form .form-group:last-child {
    margin-bottom: 0 !important;
}

/* Quiz Generation Specific Dropdown Styling */
.field-combinations-container select,
.quiz-form-container select,
.modern-create-quiz-page select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Dropdown Options Styling */
select option {
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    background-color: #ffffff !important;
}

select option:hover,
select option:focus {
    background-color: #f0f9ff !important;
    color: #22c55e !important;
}

select option:disabled {
    color: #9ca3af !important;
    background-color: #f9fafb !important;
}

/* Select2 Dropdown Override (if using Select2) */
.select2-container .select2-selection--single {
    height: 44px !important;
    padding: 8px 12px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    padding-left: 0 !important;
    color: #374151 !important;
    font-size: 14px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Responsive Dropdown Styling */
@media (max-width: 768px) {
    select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 48px !important;
    }
    
    .form-grid .form-group,
    .combination-form .form-group {
        margin-bottom: 12px !important;
    }
} 

/* Dropdown Container and Clear Button Styling */
.form-group,
.form-field,
.field-group {
    position: relative !important;
}

/* Clear Button (X) Styling */
.form-group .clear-btn,
.form-field .clear-btn,
.field-group .clear-btn,
select + .clear-btn,
.dropdown-clear,
.select-clear,
.form-control-clear {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    background: #6b7280 !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 5 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-group .clear-btn:hover,
.form-field .clear-btn:hover,
.field-group .clear-btn:hover,
select + .clear-btn:hover,
.dropdown-clear:hover,
.select-clear:hover,
.form-control-clear:hover {
    background: #ef4444 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Dropdown Arrow Positioning for Select with Clear Button */
select.has-clear-btn,
.form-group.has-clear select,
.form-field.has-clear select,
.field-group.has-clear select {
    padding-right: 72px !important;
    background-position: right 16px center !important;
}

/* Info Icon (i) Styling */
.form-group .info-icon,
.form-field .info-icon,
.field-group .info-icon,
label .info-icon,
.tooltip-icon,
.help-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    background: #3b82f6 !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: bold !important;
    margin-left: 6px !important;
    cursor: help !important;
    transition: all 0.3s ease !important;
    vertical-align: middle !important;
}

.form-group .info-icon:hover,
.form-field .info-icon:hover,
.field-group .info-icon:hover,
label .info-icon:hover,
.tooltip-icon:hover,
.help-icon:hover {
    background: #1d4ed8 !important;
    transform: scale(1.1) !important;
}

/* Dropdown with Icons Container */
.dropdown-with-icons {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dropdown-with-icons select {
    flex: 1 !important;
}

/* Multiple Select Dropdown Adjustments */
select[multiple] {
    min-height: 120px !important;
    padding: 8px 12px !important;
    background-image: none !important;
    padding-right: 16px !important;
}

/* Bootstrap Select / Select2 Overrides */
.bootstrap-select .dropdown-toggle,
.select2-container .select2-selection--single {
    height: 44px !important;
    padding: 8px 12px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.bootstrap-select .dropdown-toggle::after,
.select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner,
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
    color: #374151 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Fix for overlapping elements */
.form-group select,
.form-field select,
.field-group select {
    z-index: 1 !important;
}

.form-group label,
.form-field label,
.field-group label {
    z-index: 2 !important;
    position: relative !important;
} 

/* ==========================================================================
   ARABIC (RTL) DROPDOWN STYLING OVERRIDES
   ========================================================================== */

/* Arabic/RTL Dropdown Styling */
html[dir="rtl"] select,
html[lang="ar"] select,
body[dir="rtl"] select,
body[lang="ar"] select,
.rtl select,
.arabic select,
html body div.wrapper div.content-wrapper[dir="rtl"] select,
html body div.wrapper div.content-wrapper[lang="ar"] select,
html body .wrapper .content-wrapper[dir="rtl"] select,
html body .wrapper .content-wrapper[lang="ar"] select,
html body .content-wrapper[dir="rtl"] select,
html body .content-wrapper[lang="ar"] select,
html body .card[dir="rtl"] select,
html body .card[lang="ar"] select,
html body .modal[dir="rtl"] select,
html body .modal[lang="ar"] select,
html body .form-container[dir="rtl"] select,
html body .form-container[lang="ar"] select,
html body .combination-form[dir="rtl"] select,
html body .combination-form[lang="ar"] select {
    padding: 12px 56px 12px 16px !important;
    background-position: left 16px center !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Arabic Select with Clear Button */
html[dir="rtl"] select.has-clear-btn,
html[lang="ar"] select.has-clear-btn,
body[dir="rtl"] select.has-clear-btn,
body[lang="ar"] select.has-clear-btn,
.rtl select.has-clear-btn,
.arabic select.has-clear-btn,
html[dir="rtl"] .form-group.has-clear select,
html[lang="ar"] .form-group.has-clear select,
body[dir="rtl"] .form-group.has-clear select,
body[lang="ar"] .form-group.has-clear select,
.rtl .form-group.has-clear select,
.arabic .form-group.has-clear select {
    padding: 12px 80px 12px 16px !important;
    background-position: left 16px center !important;
}

/* Arabic Clear Button Positioning */
html[dir="rtl"] .form-group .clear-btn,
html[lang="ar"] .form-group .clear-btn,
body[dir="rtl"] .form-group .clear-btn,
body[lang="ar"] .form-group .clear-btn,
.rtl .form-group .clear-btn,
.arabic .form-group .clear-btn,
html[dir="rtl"] .form-field .clear-btn,
html[lang="ar"] .form-field .clear-btn,
body[dir="rtl"] .form-field .clear-btn,
body[lang="ar"] .form-field .clear-btn,
.rtl .form-field .clear-btn,
.arabic .form-field .clear-btn {
    left: 40px !important;
    right: auto !important;
}

/* Arabic Info Icon Positioning */
html[dir="rtl"] .form-group .info-icon,
html[lang="ar"] .form-group .info-icon,
body[dir="rtl"] .form-group .info-icon,
body[lang="ar"] .form-group .info-icon,
.rtl .form-group .info-icon,
.arabic .form-group .info-icon,
html[dir="rtl"] label .info-icon,
html[lang="ar"] label .info-icon,
body[dir="rtl"] label .info-icon,
body[lang="ar"] label .info-icon,
.rtl label .info-icon,
.arabic label .info-icon {
    margin-left: 0 !important;
    margin-right: 6px !important;
}

/* Arabic Dropdown Options */
html[dir="rtl"] select option,
html[lang="ar"] select option,
body[dir="rtl"] select option,
body[lang="ar"] select option,
.rtl select option,
.arabic select option {
    text-align: right !important;
    direction: rtl !important;
    padding: 8px 16px 8px 12px !important;
}

/* Arabic Select2 Overrides */
html[dir="rtl"] .select2-container .select2-selection--single,
html[lang="ar"] .select2-container .select2-selection--single,
body[dir="rtl"] .select2-container .select2-selection--single,
body[lang="ar"] .select2-container .select2-selection--single,
.rtl .select2-container .select2-selection--single,
.arabic .select2-container .select2-selection--single {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered,
html[lang="ar"] .select2-container .select2-selection--single .select2-selection__rendered,
body[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered,
body[lang="ar"] .select2-container .select2-selection--single .select2-selection__rendered,
.rtl .select2-container .select2-selection--single .select2-selection__rendered,
.arabic .select2-container .select2-selection--single .select2-selection__rendered {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 0 !important;
    padding-left: 40px !important;
}

html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow,
html[lang="ar"] .select2-container .select2-selection--single .select2-selection__arrow,
body[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow,
body[lang="ar"] .select2-container .select2-selection--single .select2-selection__arrow,
.rtl .select2-container .select2-selection--single .select2-selection__arrow,
.arabic .select2-container .select2-selection--single .select2-selection__arrow {
    left: 16px !important;
    right: auto !important;
}

/* Arabic Bootstrap Select Overrides */
html[dir="rtl"] .bootstrap-select .dropdown-toggle,
html[lang="ar"] .bootstrap-select .dropdown-toggle,
body[dir="rtl"] .bootstrap-select .dropdown-toggle,
body[lang="ar"] .bootstrap-select .dropdown-toggle,
.rtl .bootstrap-select .dropdown-toggle,
.arabic .bootstrap-select .dropdown-toggle {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .bootstrap-select .dropdown-toggle::after,
html[lang="ar"] .bootstrap-select .dropdown-toggle::after,
body[dir="rtl"] .bootstrap-select .dropdown-toggle::after,
body[lang="ar"] .bootstrap-select .dropdown-toggle::after,
.rtl .bootstrap-select .dropdown-toggle::after,
.arabic .bootstrap-select .dropdown-toggle::after {
    left: 16px !important;
    right: auto !important;
}

html[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
html[lang="ar"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
body[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
body[lang="ar"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
.rtl .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
.arabic .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 0 !important;
    padding-left: 40px !important;
}

/* Arabic Responsive Adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] select,
    html[lang="ar"] select,
    body[dir="rtl"] select,
    body[lang="ar"] select,
    .rtl select,
    .arabic select {
        padding: 14px 60px 14px 16px !important;
        background-position: left 16px center !important;
    }
    
    html[dir="rtl"] select.has-clear-btn,
    html[lang="ar"] select.has-clear-btn,
    body[dir="rtl"] select.has-clear-btn,
    body[lang="ar"] select.has-clear-btn,
    .rtl select.has-clear-btn,
    .arabic select.has-clear-btn {
        padding: 14px 84px 14px 16px !important;
    }
} 

/* ==========================================================================
   QUIZ FIELD COMBINATION LAYOUT REDESIGN
   ========================================================================== */

/* Redesigned Field Combination Layout */
.combination-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

/* Field Selection - Full Width at Top */
.combination-form .form-group:first-child {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* Other Dropdowns - Grid Layout Below */
.combination-form .form-group:not(:first-child) {
    width: 100% !important;
}

/* Create a grid container for the remaining dropdowns */
.combination-form .form-group:nth-child(2) ~ .form-group {
    margin-bottom: 1rem !important;
}

/* Alternative approach: Use CSS Grid with specific areas */
.combination-form-redesigned {
    display: grid !important;
    grid-template-areas: 
        "field field field"
        "category level language"
        "questions questions questions" !important;
    gap: 1.5rem !important;
    grid-template-columns: 1fr 1fr 1fr !important;
}

/* ==========================================================================
   FONT AWESOME ICONS FIX FOR ARABIC/RTL
   ========================================================================== */

/* Comprehensive Font Awesome Fix for Arabic */
[dir="rtl"] .fas,
[dir="rtl"] .fa,
[dir="rtl"] .far,
[dir="rtl"] .fab,
[dir="rtl"] .fal,
html[lang="ar"] .fas,
html[lang="ar"] .fa,
html[lang="ar"] .far,
html[lang="ar"] .fab,
html[lang="ar"] .fal,
body[dir="rtl"] .fas,
body[dir="rtl"] .fa,
body[dir="rtl"] .far,
body[dir="rtl"] .fab,
body[dir="rtl"] .fal,
body[lang="ar"] .fas,
body[lang="ar"] .fa,
body[lang="ar"] .far,
body[lang="ar"] .fab,
body[lang="ar"] .fal {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 5 Brands' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
    direction: ltr !important;
}

/* Specific Font Awesome Brand Icons */
[dir="rtl"] .fab,
html[lang="ar"] .fab,
body[dir="rtl"] .fab,
body[lang="ar"] .fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* Specific Font Awesome Regular Icons */
[dir="rtl"] .far,
html[lang="ar"] .far,
body[dir="rtl"] .far,
body[lang="ar"] .far {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}

/* Force Font Awesome to load properly in Arabic */
html[lang="ar"] * {
    font-family: inherit !important;
}

html[lang="ar"] .fas,
html[lang="ar"] .fa,
html[lang="ar"] .far,
html[lang="ar"] .fab,
html[lang="ar"] .fal {
    font-family: 'Font Awesome 5 Free' !important;
}

/* Building icon specific fix */
[dir="rtl"] .fa-building,
html[lang="ar"] .fa-building,
body[dir="rtl"] .fa-building,
body[lang="ar"] .fa-building {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}

/* Plus icon specific fix */
[dir="rtl"] .fa-plus,
html[lang="ar"] .fa-plus,
body[dir="rtl"] .fa-plus,
body[lang="ar"] .fa-plus {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}

.combination-form-redesigned .field-group {
    grid-area: field !important;
}

.combination-form-redesigned .category-group {
    grid-area: category !important;
}

.combination-form-redesigned .level-group {
    grid-area: level !important;
}

.combination-form-redesigned .language-group {
    grid-area: language !important;
}

.combination-form-redesigned .questions-group {
    grid-area: questions !important;
}

/* Enhanced Field Combination Layout */
.field-combination-enhanced .combination-content {
    padding: 2rem !important;
}

.field-combination-enhanced .combination-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

/* Field Selection Section */
.field-combination-enhanced .field-selection {
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 2px solid #e9ecef !important;
}

.field-combination-enhanced .field-selection .form-group {
    margin-bottom: 0 !important;
}

.field-combination-enhanced .field-selection label {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 0.75rem !important;
}

.field-combination-enhanced .field-selection select {
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 1rem 1.25rem !important;
    min-height: 50px !important;
}

/* Secondary Options Grid */
.field-combination-enhanced .secondary-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.field-combination-enhanced .secondary-options .form-group {
    margin-bottom: 0 !important;
}

/* Questions Count Section */
.field-combination-enhanced .questions-section {
    width: 100% !important;
    margin-top: 1rem !important;
}

.field-combination-enhanced .questions-section .form-group {
    margin-bottom: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .combination-form-redesigned {
        grid-template-areas: 
            "field"
            "category"
            "level"
            "language"
            "questions" !important;
        grid-template-columns: 1fr !important;
    }
    
    .field-combination-enhanced .secondary-options {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .field-combination-enhanced .field-selection {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .field-combination-enhanced .secondary-options {
        gap: 1rem !important;
    }
}

/* ==========================================================================
   QUIZ RTL FORCE STYLES
   ========================================================================== */

/* Force RTL everywhere under .force-rtl */
.force-rtl {
  direction: rtl !important;
  text-align: right !important;
}

/* Make list-group items flex in RTL order */
.force-rtl .list-group-item {
  display: flex !important;
  flex-direction: row !important; /* keep normal order but RTL direction handles positioning */
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

/* Position radio/checkbox on the right side for RTL */
.force-rtl .list-group-item input[type="radio"],
.force-rtl .list-group-item input[type="checkbox"] {
  order: 2 !important; /* Move input to the right */
  margin-left: 10px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* Position label on the left side for RTL */
.force-rtl .list-group-item label {
  order: 1 !important; /* Keep label on the left */
  flex: 1 !important;
  text-align: right !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* RTL for textarea */
.force-rtl textarea {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for card content */
.force-rtl .card-body {
  direction: rtl !important;
  text-align: right !important;
}

/* LTR (English) layout - ensure consistent positioning */
.container:not(.force-rtl) .list-group-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Position radio/checkbox on the left side for LTR */
.container:not(.force-rtl) .list-group-item input[type="radio"],
.container:not(.force-rtl) .list-group-item input[type="checkbox"] {
  order: 1 !important; /* Move input to the left */
  margin-right: 10px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}

/* Position label on the right side for LTR */
.container:not(.force-rtl) .list-group-item label {
  order: 2 !important; /* Keep label after input */
  flex: 1 !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force question title to start from the very left in LTR */
.container:not(.force-rtl) .card-header,
.container:not(.force-rtl) .card-header .card-title,
.container:not(.force-rtl) .card-header .card-title span {
  text-align: left !important;
  direction: ltr !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Force card-header to be block and left-aligned in LTR (English) */
.container:not(.force-rtl) .card-header {
  display: block !important;
  text-align: left !important;
  direction: ltr !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* FINAL NUCLEAR: Absolutely force question title to the very left in LTR (English) */
.container:not(.force-rtl) .card-header,
.container:not(.force-rtl) .card-header .card-title {
  display: block !important;
  text-align: left !important;
  direction: ltr !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}
.container:not(.force-rtl) .card-header .card-title span {
  display: block !important;
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Fix modal backdrop opacity for all modals */
.modal-backdrop {
  background-color: #000 !important;
  opacity: 0.5 !important;
}
/* Fix SweetAlert2 modal background */
.swal2-container {
  background: rgba(0,0,0,0.5) !important;
}

/* MAX OVERRIDE: AdminLTE modal backdrop, always dark and above all overlays */
.modal-backdrop,
body .modal-backdrop,
body .modal-backdrop.show {
  background-color: #000 !important;
  opacity: 0.85 !important;
  z-index: 2050 !important;
}

/* SweetAlert2 modal background, even darker */
.swal2-container {
  background: rgba(0,0,0,0.85) !important;
  z-index: 3000 !important;
}

/* ABSOLUTE NUCLEAR: Force all modal overlays to be dark and opaque */
.modal-backdrop,
body .modal-backdrop,
body .modal-backdrop.show,
.swal2-container,
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-shown,
div[role="dialog"] ~ .modal-backdrop,
div[role="dialog"] ~ .swal2-container {
  background: #000 !important;
  background-color: #000 !important;
  opacity: 0.95 !important;
  z-index: 99999 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* ABSOLUTE NUCLEAR CSS for modal backdrops */
.modal-backdrop, 
body .modal-backdrop, 
body .modal-backdrop.show, 
.swal2-container, 
.swal2-container.swal2-backdrop-show, 
.swal2-container.swal2-shown, 
div[role="dialog"] ~ .modal-backdrop, 
div[role="dialog"] ~ .swal2-container {
    background: #000 !important;
    opacity: 0.8 !important;
    z-index: 99999 !important;
}

/* Specific styling for quiz termination modals */
.quiz-termination-modal .modal-backdrop,
#terminationModal .modal-backdrop,
.cheating-termination-backdrop {
    background: rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}

/* SweetAlert2 specific fixes for termination dialogs */
.swal2-container.swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
}

/* Force dark background for all termination-related modals */
.modal-backdrop.fade.show {
    opacity: 0.8 !important;
    background-color: #000 !important;
}

/* ==========================================================================
   PRIVATE QUIZ MODAL BACKDROP FIX - PREVENT STUCK BACKDROPS
   ========================================================================== */

/* Private Quiz Modal Backdrop Fix - Prevent interference */
body.quiz-mode .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.quiz-started .modal-backdrop,
body.quiz-active .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure body doesn't get stuck in modal-open state for quiz pages */
body.quiz-mode.modal-open,
body.quiz-started.modal-open,
body.quiz-active.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Special handling for quiz start modal - allow backdrop during modal show, remove after */
#startQuizModal.show + .modal-backdrop {
    z-index: 1040 !important;
}

/* Private quiz specific modal backdrop removal */
.private-quiz-container .modal-backdrop {
    display: none !important;
}