/* =============================================
   GLASSMORPHISM THEME - Quotes Maker Admin Panel
   Light / Dark mode with CSS custom properties
   
   ALL selectors use html[data-theme] prefix
   to guarantee they override Vite/AdminLTE/Select2
   ============================================= */

/* ---------- Google Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* =================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================= */
:root,
html[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-heavy: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(255, 255, 255, 0.60);
    --glass-blur: 18px;

    --body-bg: linear-gradient(135deg, #c3cfe2 0%, #f5d5ed 30%, #d4e4ff 60%, #c1f0dc 100%);

    --text-primary: #1a1a2e;
    --text-secondary: #5a5a7a;
    --text-muted: #8e8ea0;

    /* LIGHT sidebar */
    --sidebar-bg: rgba(255, 255, 255, 0.50);
    --sidebar-text: #3a3a5c;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --sidebar-hover-bg: rgba(108, 92, 231, 0.08);
    --sidebar-brand-border: rgba(0, 0, 0, 0.06);
    --sidebar-icon-bg: rgba(108, 92, 231, 0.10);
    --sidebar-icon-filter: brightness(0.3);
    --sidebar-active-icon-filter: brightness(10);

    --navbar-bg: rgba(255, 255, 255, 0.50);
    --navbar-text: #1a1a2e;

    --card-bg: rgba(255, 255, 255, 0.45);
    --card-border: rgba(255, 255, 255, 0.65);
    --card-header-bg: rgba(255, 255, 255, 0.35);

    --input-bg: rgba(255, 255, 255, 0.65);
    --input-border: rgba(180, 180, 210, 0.45);
    --input-text: #1a1a2e;
    --input-focus-border: rgba(108, 92, 231, 0.6);
    --input-focus-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);

    --btn-primary-bg: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --btn-primary-hover: linear-gradient(135deg, #5a4bd1, #8b83f0);
    --btn-primary-text: #ffffff;

    --table-header-bg: rgba(108, 92, 231, 0.08);
    --table-row-hover: rgba(108, 92, 231, 0.06);
    --table-border: rgba(200, 200, 220, 0.25);

    --modal-bg: rgba(255, 255, 255, 0.80);

    --accent-color: #6c5ce7;
    --accent-light: rgba(108, 92, 231, 0.10);

    --login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

    --scrollbar-track: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(0, 0, 0, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(31, 38, 135, 0.10);
    --shadow-lg: 0 8px 32px rgba(31, 38, 135, 0.15);

    --select2-bg: rgba(255, 255, 255, 0.95);
    --select2-option-hover: rgba(108, 92, 231, 0.10);
    --select2-option-text: #1a1a2e;
    --select2-tag-bg: rgba(108, 92, 231, 0.12);
    --select2-tag-text: #6c5ce7;
}

html[data-theme="dark"] {
    --glass-bg: rgba(25, 25, 50, 0.55);
    --glass-bg-heavy: rgba(20, 20, 42, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 20px;

    --body-bg: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 35%, #24243e 65%, #302b63 100%);

    --text-primary: #e8e8f0;
    --text-secondary: #b0b0cc;
    --text-muted: #7a7a9a;

    /* DARK sidebar */
    --sidebar-bg: rgba(10, 10, 28, 0.85);
    --sidebar-text: rgba(255, 255, 255, 0.70);
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-brand-border: rgba(255, 255, 255, 0.06);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.08);
    --sidebar-icon-filter: invert(1) brightness(2);
    --sidebar-active-icon-filter: brightness(10);

    --navbar-bg: rgba(16, 16, 36, 0.60);
    --navbar-text: #e8e8f0;

    --card-bg: rgba(25, 25, 50, 0.50);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-header-bg: rgba(255, 255, 255, 0.04);

    --input-bg: rgba(255, 255, 255, 0.07);
    --input-border: rgba(255, 255, 255, 0.10);
    --input-text: #e8e8f0;
    --input-focus-border: rgba(108, 92, 231, 0.5);
    --input-focus-shadow: 0 0 0 3px rgba(108, 92, 231, 0.20);

    --btn-primary-bg: linear-gradient(135deg, #7c6cf0, #a78bfa);
    --btn-primary-hover: linear-gradient(135deg, #6c5ce7, #9b8bf5);
    --btn-primary-text: #ffffff;

    --table-header-bg: rgba(108, 92, 231, 0.12);
    --table-row-hover: rgba(108, 92, 231, 0.06);
    --table-border: rgba(255, 255, 255, 0.06);

    --modal-bg: rgba(25, 25, 50, 0.88);

    --accent-color: #a78bfa;
    --accent-light: rgba(167, 139, 250, 0.12);

    --login-bg: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);

    --scrollbar-track: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.40);

    --select2-bg: rgba(25, 25, 50, 0.95);
    --select2-option-hover: rgba(108, 92, 231, 0.20);
    --select2-option-text: #e8e8f0;
    --select2-tag-bg: rgba(167, 139, 250, 0.20);
    --select2-tag-text: #a78bfa;
}

/* =================================================================
   2. BODY — html[data-theme] prefix for specificity
   ================================================================= */
html[data-theme] body {
    background: var(--body-bg) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', 'Krub', sans-serif !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* =================================================================
   3. CONTENT WRAPPER
   ================================================================= */
html[data-theme] .content-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* =================================================================
   4. NAVBAR / HEADER
   ================================================================= */
html[data-theme] .main-header.navbar {
    background: var(--navbar-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: none !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme] .main-header .nav-link,
html[data-theme] .main-header .navbar-nav .nav-link {
    color: var(--navbar-text) !important;
}

html[data-theme] .main-header h5 {
    color: var(--navbar-text) !important;
    font-weight: 600;
    font-size: 0.95rem;
}

/* =================================================================
   5. SIDEBAR — light mode = glass white, dark mode = glass dark
   ================================================================= */
html[data-theme] .main-sidebar {
    background: var(--sidebar-bg) !important;
    background-color: var(--sidebar-bg) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme] .main-sidebar .brand-link {
    border-bottom: 1px solid var(--sidebar-brand-border) !important;
    background: transparent !important;
}

/* Sidebar text — override AdminLTE + style.css */
html[data-theme] [class*="sidebar-light-"] .sidebar a,
html[data-theme] [class*="sidebar-dark-"] .sidebar a,
html[data-theme] .sidebar .nav-link,
html[data-theme] .sidebar .nav-link p {
    color: var(--sidebar-text) !important;
}

/* Sidebar icons — override .sidebar-icon{background:white;opacity:.8}  */
html[data-theme] .sidebar-icon {
    background: var(--sidebar-icon-bg) !important;
    padding: 7px !important;
    border-radius: 10px !important;
    filter: var(--sidebar-icon-filter) !important;
    opacity: 1 !important;
    width: 36px !important;
    height: auto !important;
}

/* Sidebar hover */
html[data-theme] .sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-text-active) !important;
}

/* Sidebar active — override .nav-link.active{background-color:#57AFBD!important} */
html[data-theme] .nav-sidebar>.nav-item>.nav-link.active,
html[data-theme] .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active,
html[data-theme] .sidebar-light-primary .nav-item .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    background-color: transparent !important;
    color: var(--sidebar-text-active) !important;
    opacity: 1 !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3) !important;
}

html[data-theme] .nav-sidebar>.nav-item>.nav-link.active .sidebar-icon {
    filter: var(--sidebar-active-icon-filter) !important;
    background: rgba(255, 255, 255, 0.20) !important;
}

html[data-theme] .nav-sidebar>.nav-item>.nav-link.active p {
    color: #ffffff !important;
}

/* Brand logo filter */
html[data-theme="light"] .main-sidebar .brand-link img {
    filter: brightness(0.4) !important;
}

html[data-theme="dark"] .main-sidebar .brand-link img {
    filter: brightness(1.2) !important;
}

/* =================================================================
   6. CARDS — GLASSMORPHISM
   ================================================================= */
html[data-theme] .card,
html[data-theme] .c-card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

html[data-theme] .card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

html[data-theme] .card-header {
    background: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
}

html[data-theme] .card-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

html[data-theme] .card-body {
    color: var(--text-primary);
}

html[data-theme] .card-footer {
    background: var(--card-header-bg) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* Stat cards */
html[data-theme] .small-box {
    border-radius: 16px !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
    position: relative;
}

html[data-theme] .small-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 0;
}

html[data-theme] .small-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme] .small-box .inner {
    position: relative;
    z-index: 1;
}

html[data-theme] .small-box .small-box-footer {
    background: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 0 0 16px 16px;
    position: relative;
    z-index: 1;
}

html[data-theme] .color-card {
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
}

/* Elevation override */
html[data-theme] .elevation-4 {
    box-shadow: var(--shadow-lg) !important;
}

/* =================================================================
   7. FORMS
   ================================================================= */
html[data-theme] .form-control {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px);
}

html[data-theme] .form-control:focus {
    background: var(--input-bg) !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-shadow) !important;
    color: var(--input-text) !important;
}

html[data-theme] .form-control::placeholder {
    color: var(--text-muted) !important;
}

html[data-theme] .input-group-text {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
}

html[data-theme] textarea.form-control {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
}

html[data-theme] select.form-control,
html[data-theme] select.form-control option {
    background: var(--select2-bg) !important;
    color: var(--select2-option-text) !important;
}

html[data-theme] .label-form,
html[data-theme] label {
    color: var(--text-primary) !important;
}

/* =================================================================
   8. SELECT2 — Full dark mode support (high specificity)
   ================================================================= */
html[data-theme] .select2-container--bootstrap4 .select2-selection,
html[data-theme] .select2-container--bootstrap4 .select2-selection--single,
html[data-theme] .select2-container--bootstrap4 .select2-selection--multiple {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px !important;
    color: var(--input-text) !important;
}

html[data-theme] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--input-text) !important;
}

html[data-theme] .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

html[data-theme] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

/* Select2 dropdown — appended to body, use html[data-theme] */
html[data-theme] .select2-dropdown {
    background: var(--select2-bg) !important;
    background-color: var(--select2-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

html[data-theme] .select2-search--dropdown .select2-search__field {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    border-radius: 8px !important;
}

/* Select2 options — override default white bg */
html[data-theme] .select2-results__option {
    color: var(--select2-option-text) !important;
    background: var(--select2-bg) !important;
    padding: 8px 12px;
}

html[data-theme] .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme] .select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background: var(--accent-light) !important;
    color: var(--accent-color) !important;
}

html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-container--bootstrap4 .select2-results__option--highlighted,
html[data-theme] .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-results__option--highlighted {
    background: var(--select2-option-hover) !important;
    color: var(--accent-color) !important;
}

/* Select2 multiple tags */
html[data-theme] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: var(--select2-tag-bg) !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 6px !important;
    color: var(--select2-tag-text) !important;
}

html[data-theme] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--select2-tag-text) !important;
}

/* Select2 results container */
html[data-theme] .select2-container--default .select2-results>.select2-results__options,
html[data-theme] .select2-container--bootstrap4 .select2-results>.select2-results__options {
    background: var(--select2-bg) !important;
}

/* =================================================================
   9. BUTTONS
   ================================================================= */
html[data-theme] .btn-primary {
    background: var(--btn-primary-bg) !important;
    border: none !important;
    color: var(--btn-primary-text) !important;
    border-radius: 10px !important;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.30) !important;
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus {
    background: var(--btn-primary-hover) !important;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.40) !important;
    transform: translateY(-1px);
    color: var(--btn-primary-text) !important;
}

html[data-theme] .btn-danger {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
}

html[data-theme] .btn-default,
html[data-theme] .btn-white {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px);
}

html[data-theme] .btn-orange {
    background: linear-gradient(135deg, #fdbb64, #f5a623) !important;
    border: none !important;
    border-radius: 10px !important;
}

/* =================================================================
   10. TABLES
   ================================================================= */
html[data-theme] .table {
    color: var(--text-primary) !important;
}

html[data-theme] .table thead th {
    background: var(--table-header-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--table-border) !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html[data-theme] .table td,
html[data-theme] .table th {
    border-top: 1px solid var(--table-border) !important;
    vertical-align: middle;
    color: var(--text-primary) !important;
}

html[data-theme] .table-striped tbody tr:nth-of-type(odd) {
    background: var(--accent-light) !important;
}

html[data-theme] .table-hover tbody tr:hover {
    background: var(--table-row-hover) !important;
}

/* DataTables */
html[data-theme] .dataTables_wrapper .dataTables_length label,
html[data-theme] .dataTables_wrapper .dataTables_filter label,
html[data-theme] .dataTables_wrapper .dataTables_info,
html[data-theme] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
    border: none !important;
}

html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-light) !important;
    color: var(--accent-color) !important;
    border: none !important;
}

/* =================================================================
   11. MODALS
   ================================================================= */
html[data-theme] .modal-content {
    background: var(--modal-bg) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme] .modal-header {
    border-bottom: 1px solid var(--glass-border) !important;
}

html[data-theme] .modal-header .modal-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

html[data-theme] .modal-header .close {
    color: var(--text-secondary) !important;
}

html[data-theme] .modal-body {
    color: var(--text-primary) !important;
}

html[data-theme] .modal-footer {
    border-top: 1px solid var(--glass-border) !important;
}

/* =================================================================
   12. LOGIN PAGE
   ================================================================= */
html[data-theme] body.login-page {
    background: var(--login-bg) !important;
    background-attachment: fixed !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

html[data-theme] body.login-page .login-box {
    width: 420px;
    max-width: 95vw;
}

html[data-theme] body.login-page .login-logo a {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.8rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

html[data-theme] body.login-page .card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html[data-theme] body.login-page .card:hover {
    transform: none;
}

html[data-theme] body.login-page .login-card-body {
    background: transparent !important;
    padding: 35px !important;
}

html[data-theme] body.login-page .login-box-msg {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme] body.login-page .form-control {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

html[data-theme] body.login-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme] body.login-page .form-control:focus {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme] body.login-page .input-group-text {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
}

html[data-theme] body.login-page .btn-primary {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme] body.login-page .btn-primary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme] body.login-page .icheck-primary label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* =================================================================
   13. NAV TABS
   ================================================================= */
html[data-theme] .nav-tabs {
    border-bottom: 2px solid var(--glass-border) !important;
}

html[data-theme] .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 20px;
    font-weight: 500;
}

html[data-theme] .nav-tabs .nav-link.active {
    color: var(--accent-color) !important;
    background: var(--accent-light) !important;
    border-bottom: 2px solid var(--accent-color) !important;
}

/* =================================================================
   14. PAGINATION
   ================================================================= */
html[data-theme] .pagination .page-link {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    margin: 0 3px;
}

html[data-theme] .pagination .page-item.active .page-link {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
    border: none !important;
}

/* =================================================================
   15. FILEPOND
   ================================================================= */
html[data-theme] .filepond--panel-root {
    background: var(--input-bg) !important;
    border: 2px dashed var(--input-border) !important;
    border-radius: 12px !important;
}

html[data-theme] .filepond--drop-label label {
    color: var(--text-secondary) !important;
}

/* =================================================================
   16. THEME TOGGLE BUTTON
   ================================================================= */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.1rem;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background: var(--accent-light);
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
    position: absolute;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html[data-theme="light"] .theme-toggle-btn .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #f59e0b;
}

html[data-theme="light"] .theme-toggle-btn .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #c4b5fd;
}

/* =================================================================
   17. MISC OVERRIDES
   ================================================================= */
html[data-theme] .content-header h1 {
    color: var(--text-primary) !important;
}

html[data-theme] .breadcrumb-item a {
    color: var(--accent-color) !important;
}

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

html[data-theme] .main-footer {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
}

html[data-theme] .dropdown-menu {
    background: var(--glass-bg-heavy) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
}

html[data-theme] .dropdown-item {
    color: var(--text-primary) !important;
    border-radius: 8px;
    margin: 2px 6px;
    padding: 8px 12px;
}

html[data-theme] .dropdown-item:hover {
    background: var(--accent-light) !important;
    color: var(--accent-color) !important;
}

html[data-theme] .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme] .user-name-dropdown {
    color: var(--text-primary) !important;
}

html[data-theme] .img-preview {
    border-radius: 12px !important;
    border: 1px solid var(--glass-border);
}

html[data-theme] .sticker-img-preview {
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    background: var(--glass-bg);
}

html[data-theme] .error-help-block {
    color: #ff6b6b !important;
}

html[data-theme] .items-per-page-label {
    color: var(--text-primary) !important;
}

html[data-theme] .custom-pagination .page-link {
    color: var(--text-primary) !important;
}

html[data-theme] .alert {
    border-radius: 12px !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
}

html[data-theme] .badge-primary {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-radius: 8px;
}