/* ========== DARK MODE ========== */
[data-theme="dark"] {
    --color-primary: #5BB947;
    --color-primary-dark: #5bb800;
    --color-primary-darker: #4fa700;
    --color-primary-light: #1a3a15;
    --color-primary-shadow: rgba(91, 185, 71, 0.2);
    --color-black: #e5e5e5;
    --color-dark: #e5e7eb;
    --color-text-primary: #e5e5e5;
    --color-text-secondary: #d4d4d4;
    --color-text-tertiary: #a6a6a6;
    --color-text-quaternary: #757575;
    --color-text-light: #8a8a8a;
    --color-text-disabled: #4a4a4a;
    --color-white: #0f0f0f;
    --color-off-white: #1f1f1f;
    --color-form-label: #b8b8b8;
    --color-bg-main: #0f0f0f;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #242424;
    --color-bg-quaternary: #1f1f1f;
    --color-bg-hover: #2a2a2a;
    --color-bg-card: #1f1f1f;
    --color-border-primary: #2a2a2a;
    --color-border-secondary: #242424;
    --color-border-tertiary: #333333;
    --color-border-quaternary: #2a2a2a;
    --color-border-light: #252525;
    --color-border-medium: #2d2d2d;
    --color-status-active-bg: #6CC190;
    --color-status-active-text: #FFFFFF;
    --color-status-inactive-bg: #F2F2F2;
    --color-status-inactive-text: #8A8A8A;
    --color-error: #ff5449;
    --color-success: #58ba47;
    --gradient-brand: linear-gradient(to right, #e5e5e5, #01e1a2);
    --gradient-user-card: linear-gradient(135deg, #1a5a3c 0%, #154a31 100%);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-scrollbar: rgba(255, 255, 255, 0.2);
    --color-scrollbar-hover: rgba(255, 255, 255, 0.3);
    --color-rose-pink: #B76A6F;
    --color-periwinkle-purple: #4E4A9E;
    --color-secondary-badge-bg: #F2F2F2;
    --color-secondary-badge-text: #313131;
}

    /* ========== DARK MODE SVG FIXES ========== */
    [data-theme="dark"] svg path,
    [data-theme="dark"] svg line,
    [data-theme="dark"] svg circle,
    [data-theme="dark"] svg polyline,
    [data-theme="dark"] svg rect {
        stroke: currentColor;
        fill: currentColor;
    }

    [data-theme="dark"] .btn-add svg path,
    [data-theme="dark"] .btn-add svg line,
    [data-theme="dark"] .verified-icon svg,
    [data-theme="dark"] .menu-item.active svg path {
        stroke: white;
        fill: white;
    }

    [data-theme="dark"] .btn-add span,
    [data-theme="dark"] .menu-item.active span {
        color: var(--color-black);
    }

    [data-theme="dark"] .sidebar-toggle svg path,
    [data-theme="dark"] .icon-btn svg path {
        fill: var(--color-text-secondary);
        stroke: var(--color-text-secondary);
    }

    [data-theme="dark"] .btn-filter svg path {
        fill: var(--color-text-secondary);
    }

    [data-theme="dark"] .menu-card-icon {
        color: var(--color-black);
    }

        [data-theme="dark"] .menu-card-icon svg path {
            fill: var(--color-text-secondary);
        }

    [data-theme="dark"] .menu-card.active .menu-card-icon svg path {
        fill: var(--color-black);
    }

    [data-theme="dark"] .menu-item svg path {
        fill: var(--color-text-secondary);
        stroke: var(--color-text-secondary);
    }

    [data-theme="dark"] .menu-item.active svg path {
        fill: white;
        stroke: white;
    }

    [data-theme="dark"] .page-btn {
        color: var(--color-text-secondary);
        background: var(--color-bg-secondary);
        border-color: var(--color-border-secondary);
    }

        [data-theme="dark"] .page-btn.active {
            color: white;
            background-color: var(--color-primary)
        }

    [data-theme="dark"] .table-footer {
        color: var(--color-text-quaternary);
    }


    [data-theme="dark"] .jump-to-page {
        width: 80px;
        padding: var(--spacing-xs) var(--spacing-md);
        border: 1px solid var(--color-border-secondary);
        border-radius: var(--radius-sm);
        background: var(--color-white);
        font-family: var(--font-primary);
        font-size: var(--font-size-md);
        text-align: center;
    }

.jump-to-page:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Hide spinner arrows (optional) */
.jump-to-page::-webkit-outer-spin-button,
.jump-to-page::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.jump-to-page[type=number] {
    -moz-appearance: textfield;
}

[data-theme="dark"] .page-header,
[data-theme="dark"] .main-tabs,
[data-theme="dark"] .content-header,
[data-theme="dark"] .table-footer {
    background: var(--color-bg-main);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .dataTables_scroll,
[data-theme="dark"] .form-control,
[data-theme="dark"] .filter-input {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-color: var(--color-border-secondary);
}

    [data-theme="dark"] .form-control::placeholder,
    [data-theme="dark"] .form-control::placeholder,
    [data-theme="dark"] .filter-input::placeholder {
        color: var(--color-text-disabled);
    }

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .filter-input:focus {
        border-color: var(--color-primary);
    }

    [data-theme="dark"] .form-control.disabled {
        background: var(--color-bg-quaternary);
        color: var(--color-text-disabled);
    }

[data-theme="dark"] .rows-select,
[data-theme="dark"] .jump-to-page,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.filter-input {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .modal-close svg,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .filter-modal-close {
    color: var(--color-text-secondary);
}

    [data-theme="dark"] .modal-close svg path,
    [data-theme="dark"] .modal-close svg line {
        stroke: var(--color-text-secondary);
    }

[data-theme="dark"] .icon-btn {
    background: var(--color-bg-tertiary);
}

    [data-theme="dark"] .icon-btn:hover {
        background: var(--color-bg-hover);
    }

    [data-theme="dark"] .icon-btn svg {
        stroke: var(--color-text-secondary);
    }

[data-theme="dark"] .user-avatar svg {
    stroke: var(--color-primary);
}

[data-theme="dark"] .filter-type-checkbox {
    border-color: var(--color-border-tertiary);
}

[data-theme="dark"] .filter-type-btn.active .filter-type-checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

    [data-theme="dark"] .filter-type-btn.active .filter-type-checkbox svg {
        fill: white;
    }

[data-theme="dark"] .status-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border-tertiary);
}

    [data-theme="dark"] .status-btn:hover {
        background: var(--color-bg-hover);
    }

    [data-theme="dark"] .status-btn.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }

[data-theme="dark"] .toggle-switch {
    background: var(--color-primary);
}

    [data-theme="dark"] .toggle-switch.off {
        background: var(--color-border-tertiary);
    }

[data-theme="dark"] th {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .user-card,
[data-theme="dark"] .profile-menu-popup {
    background: var(--color-white);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .settings-modal {
    background: var(--color-white);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .settings-container {
    background: var(--color-white);
}

[data-theme="dark"] .settings-content {
    background: var(--color-white);
}

[data-theme="dark"] .settings-sidebar {
    border-color: var(--color-border-primary);
    background: var(--color-white);
}

[data-theme="dark"] .theme-toggle-bar {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .theme-toggle-switch {
    background: var(--color-bg-tertiary);
}

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

    [data-theme="dark"] .theme-btn.active {
        background: white;
        color: var(--color-white);
    }

[data-theme="dark"] .settings-input {
    background: var(--color-white);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

    [data-theme="dark"] .settings-input:focus {
        border-color: var(--color-primary);
    }

    [data-theme="dark"] .settings-input:read-only {
        background: var(--color-bg-tertiary);
    }

[data-theme="dark"] .settings-header {
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .settings-footer {
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .settings-menu-item {
    color: var(--color-text-primary);
}

    [data-theme="dark"] .settings-menu-item.active {
        background: var(--color-bg-secondary);
    }

    [data-theme="dark"] .settings-menu-item:hover {
        background: var(--color-bg-secondary);
    }

[data-theme="dark"] .settings-close-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

    [data-theme="dark"] .settings-close-btn:hover {
        background: var(--color-bg-tertiary);
    }

[data-theme="dark"] .settings-title,
[data-theme="dark"] .settings-form-group label {
    color: var(--color-text-primary);
}

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

    [data-theme="dark"] .user-menu-btn:hover {
        color: var(--color-text-secondary);
    }

[data-theme="dark"] .profile-menu-item {
    color: var(--color-text-primary);
}

    [data-theme="dark"] .profile-menu-item:hover {
        background: var(--color-bg-secondary);
    }

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

    [data-theme="dark"] .password-toggle-btn:hover {
        color: var(--color-text-secondary);
    }

[data-theme="dark"] .tab-submenu-panel {
    background: var(--color-white);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .submenu-link {
    color: var(--color-text-secondary);
}

    [data-theme="dark"] .submenu-link:hover {
        background: var(--color-bg-secondary);
        color: var(--color-primary);
    }

[data-theme="dark"] .more-dropdown {
    background: var(--color-white);
    border-color: var(--color-border-secondary);
}

[data-theme="dark"] .more-dropdown-item {
    color: var(--color-text-secondary);
}

    [data-theme="dark"] .more-dropdown-item:hover {
        background: var(--color-bg-secondary);
    }

/* ========== THEME TRANSITION ANIMATION ========== */
.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    display: none;
}

    .theme-transition-overlay.active {
        display: block;
    }

.theme-shutter-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.theme-shutter-bar {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    transform: translateX(-100%);
}

.theme-shutter-container.light-to-dark .theme-shutter-bar {
    transform: translateX(-100%);
}

.theme-shutter-container.dark-to-light .theme-shutter-bar {
    transform: translateX(100%);
}

.theme-shutter-bar.slide-in-left {
    animation: shutterSlideInLeft var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.theme-shutter-bar.slide-in-right {
    animation: shutterSlideInRight var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.theme-shutter-bar.slide-out-right {
    animation: shutterSlideOutRight var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.theme-shutter-bar.slide-out-left {
    animation: shutterSlideOutLeft var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shutterSlideInLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes shutterSlideInRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes shutterSlideOutRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes shutterSlideOutLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.theme-transition-icon {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100000;
}

.theme-shutter-container.light-to-dark .theme-shutter-bar {
    background: #000000;
}

.theme-shutter-container.dark-to-light .theme-shutter-bar {
    background: #ffffff;
}

.icon-morph {
    position: relative;
    width: 100%;
    height: 100%;
}

.icon-circle {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.3);
}

.icon-morph.dark .icon-circle {
    background: #ffffff;
}

.icon-morph.light svg {
    filter: drop-shadow(0 0 35px rgba(0, 0, 0, 0.6));
}

.icon-morph.light .icon-circle {
    background: #000000;
}

.theme-transition-icon svg {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform: scale(0.9);
}

.theme-transition-icon .moon-icon {
    width: 100px;
    height: 100px;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.4));
}

.theme-transition-icon .sun-icon {
    width: 100px;
    height: 100px;
    color: #000000;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.2));
}

.theme-transition-icon.show .moon-icon,
.theme-transition-icon.show .sun-icon {
    animation: iconPulse calc(var(--theme-transition-duration)) ease-in-out;
}

@keyframes iconPulse {

    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    25% {
        transform: scale(1.1);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    75% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}


/* Dark mode support */
[data-theme="dark"] .jump-to-page {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .jump-arrows {
    border-color: var(--color-border-secondary);
}

[data-theme="dark"] .jump-arrow {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .jump-arrow-up {
    border-bottom-color: var(--color-border-secondary);
}

[data-theme="dark"] .jump-arrow-down {
    border-top-color: var(--color-border-secondary);
}

[data-theme="dark"] .jump-arrow:hover:not(:disabled) {
    background: var(--color-bg-hover);
}