/* ========================================
   Dark/Light Theme Styles
   ======================================== */

/* Light Theme (Default) */
:root {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f5f5f9;
    --theme-bg-tertiary: #fafafa;
    --theme-text-primary: #566a7f;
    --theme-text-secondary: #697a8d;
    --theme-text-heading: #435971;
    --theme-border-color: #d9dee3;
    --theme-card-bg: #ffffff;
    --theme-card-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    --theme-input-bg: #ffffff;
    --theme-input-border: #d9dee3;
    --theme-input-text: #566a7f;
    --theme-navbar-bg: #ffffff;
    --theme-menu-bg: #ffffff;
    --theme-menu-text: #697a8d;
    --theme-menu-hover-bg: #f5f5f9;
    --theme-menu-active-bg: #e7e7ff;
    --theme-menu-active-text: #696cff;
    --theme-dropdown-bg: #ffffff;
    --theme-dropdown-hover-bg: #f5f5f9;
    --theme-modal-bg: #ffffff;
    --theme-modal-backdrop: rgba(67, 89, 113, 0.5);
    --theme-table-stripe-bg: #fafafa;
    --theme-table-hover-bg: #f5f5f9;
    --theme-skeleton-base: #e0e0e0;
    --theme-skeleton-shine: #f0f0f0;
    --theme-offcanvas-bg: #ffffff;
    --theme-badge-bg: #f1f1f1;
    --theme-badge-text: #566a7f;
    --theme-alert-info-bg: #cfe2ff;
    --theme-alert-info-border: #b6d4fe;
    --theme-alert-info-text: #084298;
    --theme-code-bg: #f5f5f9;
    --theme-code-text: #d63384;
}

/* Dark Theme */
[data-theme="dark"] {
    --theme-bg-primary: #1a1d21;
    --theme-bg-secondary: #25282c;
    --theme-bg-tertiary: #2d3035;
    --theme-text-primary: #e8eaed;
    --theme-text-secondary: #bdc1c6;
    --theme-text-heading: #f1f3f4;
    --theme-border-color: #3d4043;
    --theme-card-bg: #25282c;
    --theme-card-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
    --theme-input-bg: #2d3035;
    --theme-input-border: #3d4043;
    --theme-input-text: #e8eaed;
    --theme-navbar-bg: #25282c;
    --theme-menu-bg: #25282c;
    --theme-menu-text: #bdc1c6;
    --theme-menu-hover-bg: #2d3035;
    --theme-menu-active-bg: #383b72;
    --theme-menu-active-text: #c5c7ff;
    --theme-dropdown-bg: #25282c;
    --theme-dropdown-hover-bg: #2d3035;
    --theme-modal-bg: #25282c;
    --theme-modal-backdrop: rgba(0, 0, 0, 0.7);
    --theme-table-stripe-bg: #2d3035;
    --theme-table-hover-bg: #333639;
    --theme-skeleton-base: #2d3035;
    --theme-skeleton-shine: #3d4043;
    --theme-offcanvas-bg: #25282c;
    --theme-badge-bg: #3d4043;
    --theme-badge-text: #e8eaed;
    --theme-alert-info-bg: #1e3a5f;
    --theme-alert-info-border: #2a4a73;
    --theme-alert-info-text: #9db9ff;
    --theme-code-bg: #2d3035;
    --theme-code-text: #ff85c0;
}

/* Apply theme variables to common elements */
body {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
}

.layout-wrapper {
    background-color: var(--theme-bg-primary) !important;
}

/* Cards */
.card {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
    box-shadow: var(--theme-card-shadow) !important;
    color: var(--theme-text-primary) !important;
}

.card-header {
    background-color: var(--theme-bg-secondary) !important;
    border-bottom-color: var(--theme-border-color) !important;
    color: var(--theme-text-heading) !important;
}

.card-body {
    background-color: var(--theme-card-bg) !important;
}

/* Menu / Sidebar */
.layout-menu,
.menu-vertical {
    background-color: var(--theme-menu-bg) !important;
}

.menu-item .menu-link {
    color: var(--theme-menu-text) !important;
}

.menu-item .menu-link:hover {
    background-color: var(--theme-menu-hover-bg) !important;
}

.menu-item.active .menu-link {
    background-color: var(--theme-menu-active-bg) !important;
    color: var(--theme-menu-active-text) !important;
}

.menu-header-text {
    color: var(--theme-text-secondary) !important;
}

.menu-divider {
    border-color: var(--theme-border-color) !important;
}

/* Navbar */
.navbar,
.layout-navbar {
    background-color: var(--theme-navbar-bg) !important;
    border-bottom-color: var(--theme-border-color) !important;
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--theme-input-bg) !important;
    border-color: #696cff !important;
    color: var(--theme-input-text) !important;
}

.form-control::placeholder {
    color: var(--theme-text-secondary) !important;
    opacity: 0.6;
}

.form-label {
    color: var(--theme-text-primary) !important;
}

/* Ensure input text is always visible in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea {
    color: #e8eaed !important;
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    color: #e8eaed !important;
    background-color: var(--theme-input-bg) !important;
}

/* Autocomplete and autofill background fix for dark mode */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #e8eaed !important;
    -webkit-box-shadow: 0 0 0 1000px var(--theme-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--theme-input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: #e8eaed !important;
    border-color: var(--theme-input-border) !important;
}

/* Tables */
.table {
    color: var(--theme-text-primary) !important;
}

.table thead th {
    background-color: var(--theme-bg-secondary) !important;
    color: var(--theme-text-heading) !important;
    border-color: var(--theme-border-color) !important;
}

.table tbody tr {
    border-color: var(--theme-border-color) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--theme-table-stripe-bg) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--theme-table-hover-bg) !important;
}

/* Modals */
.modal-content {
    background-color: var(--theme-modal-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--theme-border-color) !important;
}

.modal-backdrop {
    background-color: var(--theme-modal-backdrop) !important;
}

.modal-title {
    color: var(--theme-text-heading) !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--theme-dropdown-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.dropdown-item {
    color: var(--theme-text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--theme-dropdown-hover-bg) !important;
}

.dropdown-divider {
    border-color: var(--theme-border-color) !important;
}

/* Offcanvas */
.offcanvas {
    background-color: var(--theme-offcanvas-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.offcanvas-header,
.offcanvas-footer {
    border-color: var(--theme-border-color) !important;
}

/* Badges */
.badge.bg-label-secondary {
    background-color: var(--theme-badge-bg) !important;
    color: var(--theme-badge-text) !important;
}

/* Alerts */
.alert-info {
    background-color: var(--theme-alert-info-bg) !important;
    border-color: var(--theme-alert-info-border) !important;
    color: var(--theme-alert-info-text) !important;
}

/* Text colors */
.text-muted {
    color: var(--theme-text-secondary) !important;
}

.text-body,
.text-body-secondary {
    color: var(--theme-text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--theme-text-heading) !important;
}

/* Ensure all text elements are visible in dark mode */
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--theme-text-heading) !important;
}

/* Code blocks */
code {
    background-color: var(--theme-code-bg) !important;
    color: var(--theme-code-text) !important;
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--theme-border-color) !important;
}

/* Background color overrides for dark mode */
[data-theme="dark"] .bg-white {
    background-color: var(--theme-card-bg) !important;
}

/* Sticky bottom elements in dark mode */
[data-theme="dark"] .sticky-bottom {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
}

/* Skeleton Loading */
.skeleton-line {
    background: linear-gradient(90deg, var(--theme-skeleton-base) 25%, var(--theme-skeleton-shine) 50%, var(--theme-skeleton-base) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Select2 (if used) */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-input-text) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--theme-dropdown-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.select2-container--bootstrap-5 .select2-results__option {
    color: var(--theme-text-primary) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--theme-dropdown-hover-bg) !important;
}

/* FilePond */
.filepond--root {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.filepond--panel-root {
    background-color: var(--theme-input-bg) !important;
}

.filepond--drop-label {
    color: var(--theme-text-primary) !important;
}

/* Theme Toggle Button Styles */
#themeToggle {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--theme-text-primary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#themeToggle:hover {
    background-color: var(--theme-menu-hover-bg);
}

#themeToggle i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

#themeToggle:hover i {
    transform: rotate(20deg);
}

/* Smooth transitions for theme changes */
body,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.table,
.navbar,
.layout-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Content wrapper */
.content-wrapper {
    background-color: var(--theme-bg-secondary) !important;
}

/* Pagination */
.pagination .page-link {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-text-primary) !important;
/* Small text */
small, .small {
    color: var(--theme-text-secondary) !important;
}

/* Dark mode specific text overrides */
[data-theme="dark"] .offcanvas-title,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .menu-text {
    color: var(--theme-text-heading) !important;
}

[data-theme="dark"] .offcanvas-body label,
[data-theme="dark"] .offcanvas-body .form-label,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .modal-body .form-label,
[data-theme="dark"] .card-body label,
[data-theme="dark"] .card-body .form-label {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .btn-link {
    color: #9db9ff !important;
}

[data-theme="dark"] .btn-link:hover {
    color: #c5c7ff !important;
}

/* Input labels and form text */
[data-theme="dark"] .form-text {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .input-group-text {
    color: var(--theme-text-primary) !important;
}

/* Placeholder text - lighter in dark mode */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--theme-text-secondary) !important;
    opacity: 0.7;
}

/* Dropdown items */
[data-theme="dark"] .dropdown-item {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .dropdown-header {
    color: var(--theme-text-heading) !important;
}

/* List items */
[data-theme="dark"] .list-group-item {
    color: var(--theme-text-primary) !important;
}

/* Navigation items */
[data-theme="dark"] .nav-link {
    color: var(--theme-text-primary) !important;
}

/* Breadcrumb items */
[data-theme="dark"] .breadcrumb-item {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--theme-text-secondary) !important;
}

/* Alert text */
[data-theme="dark"] .alert {
    color: var(--theme-text-primary) !important;
}

/* Badge text */
[data-theme="dark"] .badge {
    color: var(--theme-text-primary) !important;
}

/* Toast text */
[data-theme="dark"] .toast-body {
    color: var(--theme-text-primary) !important;
}

/* Card text elements */
[data-theme="dark"] .card-text,
[data-theme="dark"] .card-subtitle {
    color: var(--theme-text-primary) !important;
}

/* Footer text */
[data-theme="dark"] .footer {
    color: var(--theme-text-primary) !important;
}

/* Pagination text */
[data-theme="dark"] .page-link {
    color: var(--theme-text-primary) !important;
}

/* Table text */
[data-theme="dark"] .table {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .table thead th {
    color: var(--theme-text-heading) !important;
}

/* Menu items */
[data-theme="dark"] .menu-item .menu-link {
    color: var(--theme-menu-text) !important;
}

[data-theme="dark"] .menu-item.active .menu-link {
    color: var(--theme-menu-active-text) !important;
}

[data-theme="dark"] .menu-header-text {
    color: var(--theme-text-secondary) !important;
}

/* Tab text */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--theme-text-heading) !important;
}

/* Accordion text */
[data-theme="dark"] .accordion-button {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .accordion-body {
    color: var(--theme-text-primary) !important;
}

/* Strong and emphasis */
[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: var(--theme-text-heading) !important;
}

[data-theme="dark"] em,
[data-theme="dark"] i:not([class*="bx"]):not([class*="icon"]) {
    color: var(--theme-text-primary) !important;
}

/* Definition lists */
[data-theme="dark"] dt {
    color: var(--theme-text-heading) !important;
}

[data-theme="dark"] dd {
    color: var(--theme-text-primary) !important;
}

/* Blockquote */
[data-theme="dark"] blockquote {
    color: var(--theme-text-primary) !important;
    border-left-color: var(--theme-border-color) !important;
}

/* Figure captions */
[data-theme="dark"] figcaption {
    color: var(--theme-text-secondary) !important;
}

/* Legend in fieldsets */
[data-theme="dark"] legend {
    color: var(--theme-text-heading) !important;
}

/* Optgroup labels */
[data-theme="dark"] optgroup {
    color: var(--theme-text-heading) !important;
}

[data-theme="dark"] option {
    color: var(--theme-text-primary) !important;
    background-color: var(--theme-input-bg) !important;
}

/* Mark/highlight */
[data-theme="dark"] mark {
    background-color: #4d4d00 !important;
    color: #ffff99 !important;
}

/* Pre and code blocks */
[data-theme="dark"] pre {
    color: var(--theme-text-primary) !important;
}

/* Spinner text */
[data-theme="dark"] .spinner-border + span,
[data-theme="dark"] .visually-hidden {
    color: var(--theme-text-primary) !important;
}

/* App brand text */
[data-theme="dark"] .app-brand-text {
    color: var(--theme-text-heading) !important;
}   background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

.pagination .page-link:hover {
    background-color: var(--theme-menu-hover-bg) !important;
}

/* Input groups */
.input-group-text {
    background-color: var(--theme-bg-secondary) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Input group text in dark mode */
[data-theme="dark"] .input-group-text {
    color: #e8eaed !important;
}

[data-theme="dark"] .input-group-text i,
[data-theme="dark"] .input-group-text .bx {
    color: #e8eaed !important;
}

/* List groups */
.list-group-item {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-text-primary) !important;
}

/* Toasts */
.toast {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-text-primary) !important;
}

/* Small text */
small, .small {
    color: var(--theme-text-secondary) !important;
}

/* HR */
hr {
    border-color: var(--theme-border-color) !important;
    opacity: 1 !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: var(--theme-bg-secondary) !important;
}

.breadcrumb-item {
    color: var(--theme-text-primary) !important;
}

.breadcrumb-item.active {
    color: var(--theme-text-secondary) !important;
}

/* Progress bars */
.progress {
    background-color: var(--theme-bg-secondary) !important;
}

/* Spinners and loaders */
#globalLoadingOverlay {
    background-color: var(--theme-modal-backdrop) !important;
}

/* Ensure primary buttons remain visible */
.btn-primary {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #5f61e6 !important;
    border-color: #5f61e6 !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-danger {
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-color) !important;
}

.btn-outline-primary:hover {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-danger:hover {
    background-color: var(--theme-menu-hover-bg) !important;
    border-color: var(--theme-border-color) !important;
}

/* App brand logo */
.app-brand-logo svg {
    color: var(--theme-text-primary) !important;
}

/* Menu icon */
.menu-icon {
    color: var(--theme-menu-text) !important;
}

.menu-item.active .menu-icon {
    color: var(--theme-menu-active-text) !important;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    #themeToggle {
        width: 40px;
        height: 40px;
    }
}

/* Authentication Pages Specific Styles */
.authentication-wrapper {
    background-color: var(--theme-bg-primary) !important;
}

.authentication-inner .card {
    background-color: var(--theme-card-bg) !important;
    box-shadow: var(--theme-card-shadow) !important;
}

.text-heading {
    color: var(--theme-text-heading) !important;
}

/* Auth pages - ensure all input fields have white text in dark mode */
[data-theme="dark"] .authentication-wrapper input,
[data-theme="dark"] .authentication-wrapper .form-control,
[data-theme="dark"] .authentication-wrapper .form-select {
    color: #e8eaed !important;
    background-color: var(--theme-input-bg) !important;
}

[data-theme="dark"] .authentication-wrapper label,
[data-theme="dark"] .authentication-wrapper .form-label {
    color: #e8eaed !important;
}

[data-theme="dark"] .authentication-wrapper p,
[data-theme="dark"] .authentication-wrapper h1,
[data-theme="dark"] .authentication-wrapper h2,
[data-theme="dark"] .authentication-wrapper h3,
[data-theme="dark"] .authentication-wrapper h4,
[data-theme="dark"] .authentication-wrapper h5,
[data-theme="dark"] .authentication-wrapper h6 {
    color: #f1f3f4 !important;
}

[data-theme="dark"] .authentication-wrapper .text-muted {
    color: #bdc1c6 !important;
}

[data-theme="dark"] .authentication-wrapper a {
    color: #9db9ff !important;
}

[data-theme="dark"] .authentication-wrapper a:hover {
    color: #c5c7ff !important;
}

/* Password Toggle */
.form-password-toggle .input-group-text {
    cursor: pointer;
/* Better contrast for secondary buttons in dark mode */
[data-theme="dark"] .btn-secondary {
    background-color: #3d4043 !important;
    border-color: #3d4043 !important;
    color: #e8eaed !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #4d5053 !important;
    border-color: #4d5053 !important;
    color: #f1f3f4 !important;
}

/* Button text visibility in dark mode */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-warning {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .btn {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-info {
    color: #ffffff !important;
}
/* Auth Layout Theme Toggle */
#authThemeToggle {
    transition: all 0.3s ease;
}

#authThemeToggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#authThemeToggle i {
    transition: transform 0.3s ease;
}

#authThemeToggle:hover i {
    transform: rotate(20deg);
}

/* Ensure visibility of important elements in both themes */
.text-danger {
    color: #ff4d4f !important;
}

.text-success {
    color: #52c41a !important;
}

.text-warning {
    color: #faad14 !important;
}

/* Better contrast for disabled elements */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--theme-bg-secondary) !important;
    opacity: 0.6;
}

/* Loading states */
.spinner-border {
    border-color: var(--theme-text-primary);
    border-right-color: transparent !important;
}

/* Avatar borders in dark mode */
.avatar {
    border-color: var(--theme-border-color) !important;
}

/* Better visibility for focus states */
.form-control:focus,
.form-select:focus,
button:focus,
a:focus {
    outline: 2px solid #696cff;
    outline-offset: 2px;
}

/* Ensure proper styling for navbar search */
.navbar-nav .nav-item input.form-control {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-input-text) !important;
}

/* Menu toggle for mobile */
.layout-menu-toggle i {
    color: var(--theme-text-primary) !important;
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--theme-border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Tooltips */
.tooltip {
    opacity: 1 !important;
}

.tooltip-inner {
    background-color: var(--theme-card-bg) !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border-color) !important;
    box-shadow: var(--theme-card-shadow) !important;
}

/* Popovers */
.popover {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.popover-header {
    background-color: var(--theme-bg-secondary) !important;
    border-bottom-color: var(--theme-border-color) !important;
    color: var(--theme-text-heading) !important;
}

.popover-body {
    color: var(--theme-text-primary) !important;
}

/* Accordion */
.accordion-item {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.accordion-button {
    background-color: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--theme-menu-active-bg) !important;
    color: var(--theme-menu-active-text) !important;
}

.accordion-body {
    background-color: var(--theme-card-bg) !important;
    color: var(--theme-text-primary) !important;
}

/* Nav tabs */
.nav-tabs {
    border-bottom-color: var(--theme-border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--theme-text-primary) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--theme-border-color) var(--theme-border-color) transparent !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--theme-card-bg) !important;
    border-color: var(--theme-border-color) var(--theme-border-color) transparent !important;
    color: var(--theme-text-heading) !important;
}

/* Footer */
.footer {
    background-color: var(--theme-card-bg) !important;
    border-top-color: var(--theme-border-color) !important;
}

/* Collapsible elements */
.collapse,
.collapsing {
    background-color: var(--theme-card-bg) !important;
}

/* Close buttons */
.btn-close {
    filter: var(--theme-text-primary);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* SVG icons in dark mode */
[data-theme="dark"] svg {
    filter: brightness(0.9);
}

/* Ensure primary brand color remains consistent */
.text-primary,
.link-primary {
    color: #696cff !important;
}

.bg-primary {
    background-color: #696cff !important;
}

/* Button groups */
.btn-group .btn {
    border-color: var(--theme-border-color) !important;
}

/* Better contrast for secondary buttons in dark mode */
[data-theme="dark"] .btn-secondary {
    background-color: #3d4043 !important;
    border-color: #3d4043 !important;
    color: #cbcdd1 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #4d5053 !important;
    border-color: #4d5053 !important;
}

/* Fix for layout overlay */
.layout-overlay {
    background-color: var(--theme-modal-backdrop) !important;
}

/* Menu inner shadow */
.menu-inner-shadow {
    background: linear-gradient(var(--theme-menu-bg) 41%, rgba(0, 0, 0, 0.11) 95%, rgba(0, 0, 0, 0.05)) !important;
}

[data-theme="dark"] .menu-inner-shadow {
    background: linear-gradient(var(--theme-menu-bg) 41%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.2)) !important;
}

/* Better visibility for validation messages */
.field-validation-error,
.validation-summary-errors {
    color: #ff4d4f !important;
}

/* Image placeholders in dark mode */
[data-theme="dark"] img[src*="placeholder"] {
    filter: brightness(0.8);
}

/* Ensure proper z-index layering */
#themeToggle,
#authThemeToggle {
    z-index: 10;
}

/* Print styles - always use light theme */
@media print {
    body,
    .card,
    .modal-content,
    .table {
        background-color: white !important;
        color: black !important;
    }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
    :root,
    [data-theme="dark"] {
        --theme-border-color: currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Loading overlay improvements */
#globalLoadingOverlay p {
    color: #ffffff !important;
}

/* Ensure checkbox and radio inputs are visible */
.form-check-input {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
}

.form-check-input:checked {
    background-color: #696cff !important;
    border-color: #696cff !important;
}

/* Switch inputs */
.form-switch .form-check-input {
    background-color: var(--theme-bg-secondary) !important;
}
/* Better styling for the app brand in dark mode */
[data-theme="dark"] .app-brand-text {
    color: var(--theme-text-heading) !important;
}

/* Select2 dark mode text */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    color: var(--theme-text-primary) !important;
}

/* FilePond dark mode text */
[data-theme="dark"] .filepond--drop-label label {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .filepond--label-action {
    color: #9db9ff !important;
}

[data-theme="dark"] .filepond--file-info-main,
[data-theme="dark"] .filepond--file-info-sub {
    color: var(--theme-text-primary) !important;
}

/* Validation text */
[data-theme="dark"] .valid-feedback {
    color: #52c41a !important;
}

[data-theme="dark"] .invalid-feedback {
    color: #ff4d4f !important;
}

/* Avatar text */
[data-theme="dark"] .avatar-initial {
    color: var(--theme-text-heading) !important;
}

/* Timeline text */
[data-theme="dark"] .timeline-item-time,
[data-theme="dark"] .timeline-item-desc {
    color: var(--theme-text-primary) !important;
}

/* Chip/Tag text */
[data-theme="dark"] .chip,
[data-theme="dark"] .tag {
    color: var(--theme-text-primary) !important;
}

/* Statistics/metrics text */
[data-theme="dark"] .stats-value,
[data-theme="dark"] .metric-value {
    color: var(--theme-text-heading) !important;
}

[data-theme="dark"] .stats-label,
[data-theme="dark"] .metric-label {
    color: var(--theme-text-secondary) !important;
}

/* Caption text */
[data-theme="dark"] caption {
    color: var(--theme-text-secondary) !important;
}

/* Kbd (keyboard) text */
[data-theme="dark"] kbd {
    background-color: var(--theme-input-bg) !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-color) !important;
}

/* Abbreviation */
[data-theme="dark"] abbr[title] {
    color: var(--theme-text-primary) !important;
}

/* Range inputs */
.form-range::-webkit-slider-track {
    background-color: var(--theme-bg-secondary) !important;
}

.form-range::-webkit-slider-thumb {
    background-color: #696cff !important;
}

/* Ensure proper styling for readonly inputs */
.form-control[readonly] {
    background-color: var(--theme-bg-secondary) !important;
    opacity: 0.7;
}

/* Better styling for the app brand in dark mode */
[data-theme="dark"] .app-brand-text {
    color: var(--theme-text-heading) !important;
}

/* Content backdrop */
.content-backdrop {
    background-color: var(--theme-modal-backdrop) !important;
}

/* Placeholder text for textareas */
textarea.form-control::placeholder {
    color: var(--theme-text-secondary) !important;
    opacity: 0.6;
}

/* Sticky elements */
.sticky-top,
.sticky-bottom {
    background-color: var(--theme-card-bg) !important;
}

/* Better visibility for icons */
[data-theme="dark"] .bx {
    opacity: 0.95;
}

/* Dashboard avatar icons in dark mode */
[data-theme="dark"] .avatar-initial {
    color: inherit !important;
}

[data-theme="dark"] .avatar-initial.bg-label-primary {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #9fa2ff !important;
}

[data-theme="dark"] .avatar-initial.bg-label-primary i,
[data-theme="dark"] .avatar-initial.bg-label-primary .bx {
    color: #9fa2ff !important;
}

[data-theme="dark"] .avatar-initial.bg-label-info {
    background-color: rgba(3, 195, 236, 0.16) !important;
    color: #4dd4f7 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-info i,
[data-theme="dark"] .avatar-initial.bg-label-info .bx {
    color: #4dd4f7 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-warning {
    background-color: rgba(255, 171, 0, 0.16) !important;
    color: #ffb547 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-warning i,
[data-theme="dark"] .avatar-initial.bg-label-warning .bx {
    color: #ffb547 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-success {
    background-color: rgba(113, 221, 55, 0.16) !important;
    color: #83e542 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-success i,
[data-theme="dark"] .avatar-initial.bg-label-success .bx {
    color: #83e542 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-danger {
    background-color: rgba(255, 62, 29, 0.16) !important;
    color: #ff6f61 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-danger i,
[data-theme="dark"] .avatar-initial.bg-label-danger .bx {
    color: #ff6f61 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-secondary {
    background-color: rgba(141, 154, 166, 0.16) !important;
    color: #bdc1c6 !important;
}

[data-theme="dark"] .avatar-initial.bg-label-secondary i,
[data-theme="dark"] .avatar-initial.bg-label-secondary .bx {
    color: #bdc1c6 !important;
}

/* Ensure all boxicons are visible in dark mode */
[data-theme="dark"] .bx,
[data-theme="dark"] i[class*="bx"] {
    opacity: 1;
}

/* Override any inherited color issues */
[data-theme="dark"] .avatar i,
[data-theme="dark"] .avatar .bx {
    opacity: 1 !important;
}

/* Dropdown toggle icons */
[data-theme="dark"] .dropdown button i,
[data-theme="dark"] .dropdown .btn i {
    color: var(--theme-text-primary) !important;
}

/* Card icons */
[data-theme="dark"] .card-header i,
[data-theme="dark"] .card-title i {
    color: var(--theme-text-heading) !important;
}

/* Button icons */
[data-theme="dark"] .btn i,
[data-theme="dark"] .btn .bx {
    color: inherit !important;
}

/* Primary text icons */
[data-theme="dark"] .text-primary i {
    color: #9fa2ff !important;
}

[data-theme="dark"] .text-info i {
    color: #4dd4f7 !important;
}

[data-theme="dark"] .text-warning i {
    color: #ffb547 !important;
}

[data-theme="dark"] .text-success i {
    color: #83e542 !important;
}

[data-theme="dark"] .text-danger i {
    color: #ff6f61 !important;
}

/* ========================================
   Global Search Styles - Phoenix Theme Style
   ======================================== */

/* Search Box Container */
.search-box {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.search-box.show .search-dropdown-menu {
    display: block;
}

/* Navbar Search Container */
.navbar-nav.flex-grow-1 {
    max-width: 900px;
}

/* Search Input */
.search-input {
    height: 42px;
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border-color);
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
    transition: all 0.2s ease;
    width: 100%;
}

.search-input:focus {
    outline: none;
    border-color: #2c7be5;
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.25);
    background-color: var(--theme-input-bg);
}

.search-input::placeholder {
    color: var(--theme-text-secondary);
    opacity: 0.6;
}

/* Search Icon */
.search-box-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-secondary);
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

/* Search Dropdown Menu */
.search-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    display: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 70vh;
    overflow: hidden;
}

.search-dropdown-menu.show {
    display: block;
}

/* Dropdown Content */
.dropdown-content {
    width: 100%;
}

/* Dropdown Item Group */
.dropdown-item-group {
    border-bottom: 1px solid var(--theme-border-color);
}

.dropdown-item-group:last-child {
    border-bottom: none;
}

/* Dropdown Header */
.dropdown-header {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    background-color: var(--theme-bg-secondary);
    border: none;
    letter-spacing: 0.05em;
}

/* Dropdown Items */
.search-dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--theme-text-primary);
    text-align: inherit;
    text-decoration: none;
    white-space: normal;
    background-color: transparent;
    border: 0;
    transition: all 0.2s ease;
}

.search-dropdown-menu .dropdown-item:hover,
.search-dropdown-menu .dropdown-item:focus {
    color: var(--theme-text-heading);
    background-color: var(--theme-dropdown-hover-bg);
    text-decoration: none;
}

.search-dropdown-menu .dropdown-item:active {
    color: #fff;
    background-color: #2c7be5;
}

/* Avatar Styles */
.avatar {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

.avatar.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #2c7be5;
    color: #fff;
    font-weight: 500;
}

/* Scrollbar Overlay */
.scrollbar-overlay {
    overflow-y: auto;
    padding-right: 0.5rem;
}

.scrollbar-overlay::-webkit-scrollbar {
    width: 0.375rem;
}

.scrollbar-overlay::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary);
}

.scrollbar-overlay::-webkit-scrollbar-thumb {
    background: var(--theme-border-color);
    border-radius: 0.375rem;
}

.scrollbar-overlay::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-secondary);
}

/* Utility Classes */
.fs-9 {
    font-size: 0.8125rem;
}

.fw-semi-bold {
    font-weight: 600;
}

.flex-1 {
    flex: 1;
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
    .search-box {
        max-width: 100%;
    }
    
    .navbar-nav.flex-grow-1 {
        max-width: 100%;
        margin: 0 0.5rem !important;
    }
    
    .search-input {
        height: 40px;
        padding: 0.5rem 2rem 0.5rem 2.25rem;
        font-size: 0.8125rem;
    }
    
    .search-box-icon {
        left: 0.75rem;
        font-size: 0.875rem;
    }
    
    .search-dropdown-menu {
        max-height: 60vh;
    }
    
    .dropdown-item {
        padding: 0.65rem 0.75rem !important;
    }
    
    .avatar.avatar-sm {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }
}

/* Tablet and Desktop Responsive Widths */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .search-box {
        max-width: 600px;
    }
    
    .navbar-nav.flex-grow-1 {
        max-width: 650px;
    }
}

@media (min-width: 1200px) {
    .search-box {
        max-width: 800px;
    }
    
    .navbar-nav.flex-grow-1 {
        max-width: 900px;
    }
}

/* Dark Theme Specific */
[data-theme="dark"] .search-input {
    border-color: rgba(61, 64, 67, 0.8);
    background-color: rgba(42, 45, 50, 0.8);
}

[data-theme="dark"] .search-input:focus {
    border-color: #5e72e4;
    box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.25);
}

[data-theme="dark"] .search-dropdown-menu {
    background-color: var(--theme-modal-bg);
    border-color: rgba(61, 64, 67, 0.8);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-header {
    background-color: rgba(45, 48, 53, 0.8);
    color: #9ca3af;
}

[data-theme="dark"] .search-dropdown-menu .dropdown-item:hover {
    background-color: rgba(55, 58, 63, 0.8);
}

[data-theme="dark"] .avatar-name {
    background-color: #5e72e4;
}

/* ========================================
   Dashboard Animations - Fancy & Dynamic
   ======================================== */

/* Fade-in & Slide-up Animation for Cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delays for cards */
.dashboard-animate-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

.dashboard-animate-card:nth-child(1) {
    animation-delay: 0.1s;
}

.dashboard-animate-card:nth-child(2) {
    animation-delay: 0.2s;
}

.dashboard-animate-card:nth-child(3) {
    animation-delay: 0.3s;
}

.dashboard-animate-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Card Hover Effects */
.dashboard-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .dashboard-card-hover:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Avatar Icon Animation on Hover */
.dashboard-avatar-animate {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card-hover:hover .dashboard-avatar-animate {
    transform: scale(1.15) rotate(5deg);
}

/* Number Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dashboard-number-animate {
    animation: countUp 0.5s ease-out 0.4s backwards;
}

/* Badge Pulse Animation */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.dashboard-badge-animate {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Quick Links Button Hover */
.dashboard-btn-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.dashboard-btn-hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.dashboard-btn-hover:hover::before {
    width: 300px;
    height: 300px;
}

.dashboard-btn-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-btn-hover:active {
    transform: translateY(-1px);
}

/* Icon Animation in Buttons */
.dashboard-btn-hover i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-btn-hover:hover i {
    transform: scale(1.2) rotate(-10deg);
}

/* Dropdown Menu Animation */
.dashboard-dropdown-animate {
    transition: all 0.2s ease;
}

.dashboard-dropdown-animate:hover {
    transform: rotate(90deg);
}

/* Page Header Animation */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dashboard-header-animate {
    animation: slideInLeft 0.5s ease-out;
}

/* Quick Links Card Animation */
.dashboard-quick-links-animate {
    animation: fadeInUp 0.6s ease-out 0.5s backwards;
}

/* Responsive: Reduce animations on mobile for performance */
@media (max-width: 767.98px) {
    .dashboard-card-hover:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .dashboard-btn-hover:hover {
        transform: translateY(-2px);
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .dashboard-animate-card,
    .dashboard-header-animate,
    .dashboard-quick-links-animate,
    .dashboard-number-animate {
        animation: none;
    }
    
    .dashboard-card-hover:hover,
    .dashboard-btn-hover:hover {
        transform: none;
    }
    
    .dashboard-avatar-animate,
    .dashboard-dropdown-animate,
    .dashboard-btn-hover i {
        transition: none;
    }
}