/* Sidebar Flex Layout - Keep plan widget at bottom */
    .sidebar-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .sidebar-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        height: 100%;
    }

    .sidebar-content>.nav {
        flex: 1;
        overflow-y: auto;
        padding-right: 7px;
    }

    /* The nav still scrolls, but its scrollbar drew a grey bar down the edge of
       the sidebar once the list got long enough to overflow. */
    .sidebar-content>.nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar-content>.nav::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .sidebar-content>div:first-child {
        flex-shrink: 0;
    }

    .user-plan-section {
        flex-shrink: 0;
        margin-top: auto;
    }

    /* Force high z-index for modals and dropdowns */
    .dropdown-menu {
        z-index: 9997 !important;
    }

    /* Prevent navbar/sidebar from creating stacking context */
    .navbar,
    .navbar-header,
    nav {
        z-index: auto !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Prevent body overflow issues */
    body {
        overflow-y: scroll !important;
    }

    body.modal-open {
        overflow: hidden !important;
    }

    /* Logo Header Light Mode Background — match sidebar (#F4F4F4) */
    body:not([data-background-color="dark"]) .logo-header,
    body:not([data-background-color="dark"]) .main-header .navbar-header {
        background-color: #F4F4F4 !important;
        box-shadow: none !important;
    }

    body:not([data-background-color="dark"]) .main-header .navbar-header {
        border-bottom: 1px solid #ebebeb !important;
    }


    /* Nav Item Styling - Active and Inactive States without transitions */
    .nav-primary .nav-item {
        margin: 0;
    }

    .nav-primary .nav-item>a {
        color: #5a5a5a;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-left: 3px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .nav-primary .nav-item>a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.1) 0%, rgba(21, 128, 61, 0.1) 100%);
        opacity: 0;
        z-index: -1;
    }

    .nav-primary .nav-item>a:hover {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.15) 0%, rgba(21, 128, 61, 0.12) 100%);
        color: #16a34a;
        border-left-color: #16a34a;
    }

    .nav-primary .nav-item>a:hover::before {
        opacity: 1;
    }

    .nav-primary .nav-item.active>a {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.25) 0%, rgba(21, 128, 61, 0.2) 100%);
        color: #16a34a;
        border-left-color: #16a34a;
        font-weight: 600;
        box-shadow: inset 0 1px 3px rgba(22, 163, 74, 0.1);
    }

    .nav-primary .nav-item.active>a i {
        color: #16a34a;
        filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.4));
    }

    /* Vibrant Icon Colors for Different Menu Items */
    .nav-primary .nav-item:nth-child(1)>a i {
        color: #16a34a;
    }

    .nav-primary .nav-item:nth-child(2)>a i {
        color: #ffc107;
    }

    .nav-primary .nav-item:nth-child(3)>a i {
        color: #dc2626;
    }

    .nav-primary .nav-item:nth-child(n+4)>a i {
        color: #1dd1a1;
    }

    .nav-primary .nav-item>a i {
        width: 14px;
        text-align: center;
        font-size: 14px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .nav-primary .nav-item>a:hover i {
        transform: scale(1.1);
        filter: brightness(1.2);
    }

    /* Submenu Styling with Vibrant Gradients */
    .nav-collapse {
        padding: 0;
        margin: 0;
        background: none;
    }

    .nav-collapse .nav-item {
        padding: 0;
        margin: 0;
    }

    .nav-collapse .nav-item>a {
        padding: 8px 15px 8px 40px;
        font-size: 11px;
        color: #5a5a5a;
        border-left: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .nav-collapse .nav-item>a:hover {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.12) 0%, rgba(21, 128, 61, 0.1) 100%);
        color: #16a34a;
        padding-left: 45px;
    }

    .nav-collapse .nav-item.active>a {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.18) 0%, rgba(21, 128, 61, 0.15) 100%);
        color: #16a34a;
        font-weight: 600;
        padding-left: 45px;
        box-shadow: inset 0 1px 2px rgba(22, 163, 74, 0.1);
    }

    .sub-item {
        font-size: 11px;
    }

    /* Caret Styling */
    .caret {
        border-color: #83838a transparent transparent;
        transition: transform 0.3s ease;
        margin-left: auto;
    }

    .nav-item.active>a .caret {
        transform: rotate(-180deg);
        border-color: #16a34a transparent transparent;
    }

    /* Dark theme nav styling with vibrant gradients */
    [data-background-color="dark2"] .nav-primary .nav-item>a {
        color: #b0b0b0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-background-color="dark2"] .nav-primary .nav-item>a:hover {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.2) 0%, rgba(21, 128, 61, 0.15) 100%);
        color: #16a34a;
    }

    [data-background-color="dark2"] .nav-primary .nav-item.active>a {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.3) 0%, rgba(21, 128, 61, 0.25) 100%);
        color: #16a34a;
        box-shadow: inset 0 1px 3px rgba(22, 163, 74, 0.15);
    }

    [data-background-color="dark2"] .nav-collapse .nav-item>a {
        color: #b0b0b0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-background-color="dark2"] .nav-collapse .nav-item>a:hover {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.18) 0%, rgba(21, 128, 61, 0.12) 100%);
        color: #16a34a;
    }

    [data-background-color="dark2"] .nav-collapse .nav-item.active>a {
        background: linear-gradient(90deg, rgba(22, 163, 74, 0.25) 0%, rgba(21, 128, 61, 0.2) 100%);
        color: #16a34a;
        box-shadow: inset 0 1px 2px rgba(22, 163, 74, 0.15);
    }

    /* Navbar Height Reduction */
    .navbar-header {
        padding: 4px 0 !important;
        height: auto;
    }

    .sidebar .nav {
        margin-top: 0px;
    }

    /* Toggle Button Size Reduction - Menu Togglers - Vertical Alignment */
    .navbar-toggler,
    .topbar-toggler,
    .btn-toggle {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none;
        vertical-align: middle;
        margin-top: 9px;
    }

    /* Toggle Icon Color - Black in light mode, White in dark mode */
    .navbar-toggler .icon-menu,
    .topbar-toggler i,
    .btn-toggle i {
        color: #333 !important;
        font-size: 16px !important;
        line-height: 1;
    }

    .avatar-sm {
        width: 2rem;
        height: 2rem;
    }

    .sidebar.sidebar-style-2 .nav .nav-item a {
        padding: 3px 8px;
        border-radius: 5px;
    }

    .sidebar .nav>.nav-item a i {
        font-size: 14px;
    }

    /* Dark mode toggle icon */
    [data-background-color="dark2"] .navbar-toggler .icon-menu,
    [data-background-color="dark2"] .topbar-toggler i,
    [data-background-color="dark2"] .btn-toggle i {
        color: #ffffff !important;
    }

    /* View Website Button Size Reduction */
    .btn-round {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        min-width: auto !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle;
    }

    .btn-round i {
        font-size: 14px !important;
        line-height: 1;
    }

    /* Theme Toggle - Size Reduction, Rounded, and White Icon on Selected */
    .selectgroup-item {
        margin-right: 2px;
    }



    .selectgroup-item input:checked~.selectgroup-button {
        border-color: #16a34a !important;
        background-color: #16a34a !important;
        color: white !important;
    }

    .selectgroup-item input:checked~.selectgroup-button i {
        color: white !important;
    }

    /* Theme Toggle Icon */
    .selectgroup-button-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .selectgroup-button-icon i {
        font-size: 14px !important;
        line-height: 1;
    }

    /* Online Status Toggle/Switch - Size Reduction and Vertical Alignment */
    .switch {
        width: 44px !important;
        height: 22px !important;
        margin-top: 9px !important;
        display: inline-flex !important;
        vertical-align: middle;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 22px;
        margin: 0;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #16a34a;
    }

    input:checked+.slider:before {
        transform: translateX(22px);
    }

    /* ========== Professional Wix-like Panel Styling ========== */

    /* Light Mode Background and General Styling */
    body {
        background: #F0F3F7;
        color: #242424;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        line-height: 1.5;
        min-height: 100vh;
    }

    /* Main Content Area */
    .main-panel {
        background: transparent;
    }

    .page-inner {
        padding: 20px;
    }

    /* ========== Card Styling ========== */
    .card {
        border: 0;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
        background: #ffffff;
        overflow: hidden;
    }

    .card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        /* transform: translateY(-2px); */
    }

    .card-header {
        background: #16a34a;
        color: #ffffff;
        border: 0;
        padding: 16px 20px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    [data-background-color="dark"] .card-header {
        background: #3a3a3a;
        color: #ffffff;
    }

    .card-body {
        padding: 20px;
    }

    .card-footer {
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        padding: 16px 20px;
    }

    /* ========== Button Styling ========== */
    .btn {
        border: 0;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.5px;
        transition: none !important;
        cursor: pointer;
        transform: none !important;
    }

    /* Primary Button - Purple (Light mode only) */
    body:not([data-background-color="dark"]) .btn-primary {
        background: #16a34a;
        color: #ffffff !important;
        border: 0;
        fill: #ffffff;
    }

    body:not([data-background-color="dark"]) .btn-primary * {
        color: #ffffff !important;
    }

    body:not([data-background-color="dark"]) .btn-primary:hover {
        background: #15803d;
        box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
        transform: none !important;
        color: #ffffff;
        transition: none !important;
    }

    /* Success Button - Green (Light mode only) */
    body:not([data-background-color="dark"]) .btn-success {
        background: #1dd1a1;
        color: #ffffff !important;
        border: 0;
    }

    body:not([data-background-color="dark"]) .btn-success:hover {
        background: #16a085;
        box-shadow: 0 4px 12px rgba(29, 209, 161, 0.3);
        transform: none !important;
        color: #ffffff;
        transition: none !important;
    }

    /* Warning Button - Gold (Light mode only) */
    body:not([data-background-color="dark"]) .btn-warning {
        background: #ffc107;
        color: #ffffff !important;
        border: 0;
    }

    body:not([data-background-color="dark"]) .btn-warning:hover {
        background: #ffb300;
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        transform: none !important;
        color: #ffffff;
        transition: none !important;
    }

    /* Danger Button - Pink (Light mode only) */
    body:not([data-background-color="dark"]) .btn-danger {
        background: #dc2626;
        color: #ffffff !important;
        border: 0;
    }

    body:not([data-background-color="dark"]) .btn-danger:hover {
        background: #b91c1c;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        transform: none !important;
        color: #ffffff;
        transition: none !important;
    }

    /* Info Button - Light Blue (Light mode only) */
    body:not([data-background-color="dark"]) .btn-info {
        background: #00d4ff;
        color: #ffffff !important;
        border: 0;
    }

    body:not([data-background-color="dark"]) .btn-info:hover {
        background: #00c4ff;
        box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
        transform: none !important;
        color: #ffffff;
        transition: none !important;
    }

    /* Secondary Button - Outlined (Light mode only) */
    body:not([data-background-color="dark"]) .btn-secondary {
        background: #f0f2f5 !important;
        color: #5a5a5a !important;
        border: 2px solid #e3e3e3;
    }

    body:not([data-background-color="dark"]) .btn-secondary:hover {
        background: #e8eaed;
        border-color: #16a34a;
        color: #16a34a !important;
        box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
        transform: none !important;
        transition: none !important;
    }

    /* Dark Mode Button Defaults */
    [data-background-color="dark"] .btn-primary {
        background: #3a3a3a;
        color: #ffffff !important;
    }

    [data-background-color="dark"] .btn-primary:hover {
        background: #454545;
        color: #ffffff;
        transform: none !important;
        transition: none !important;
    }

    [data-background-color="dark"] .btn-success {
        background: #3a3a3a;
        color: #ffffff !important;
    }

    [data-background-color="dark"] .btn-success:hover {
        background: #454545;
        color: #ffffff;
        transform: none !important;
        transition: none !important;
    }

    [data-background-color="dark"] .btn-warning {
        background: #3a3a3a;
        color: #ffffff !important;
    }

    [data-background-color="dark"] .btn-warning:hover {
        background: #454545;
        color: #ffffff;
        transform: none !important;
        transition: none !important;
    }

    /* ========== Form Styling ========== */
    .form-control {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 5px 15px;
        font-size: 13px;
        transition: none !important;
        background: #ffffff;
        color: #2e2e2e;
    }

    .form-control:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
        background-color: #ffffff;
    }

    .form-control::placeholder {
        color: #a7a7a7;
    }

    /* Input Groups */
    .input-group .form-control {
        border-right: 0;
    }

    /* Form Labels */
    label {
        font-weight: 600;
        font-size: 13px;
        color: #2e2e2e;
        margin-bottom: 8px;
    }

    /* Textarea */
    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    /* ========== Table Styling ========== */
    .table {
        border-collapse: collapse;
        margin-bottom: 0;
    }

    .table thead th {
        background: #16a34a;
        color: #ffffff;
        font-weight: 600;
        font-size: 12px;
        border: 0;
        padding: 14px 16px;
        vertical-align: middle;
    }

    [data-background-color="dark"] .table thead th {
        background: #3a3a3a;
        color: #ffffff;
    }

    [data-background-color="dark"] .table tbody tr {
        background-color: transparent !important;
    }

    [data-background-color="dark"] .table-striped tbody tr:nth-of-type(odd) {
        background-color: #2b2b2b !important;
    }

    .table tbody td {
        border-color: #e9ecef;
        padding: 12px 16px;
        vertical-align: middle;
        color: #2e2e2e;
    }

    .table tbody tr {
        transition: all 0.2s ease;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fafbfc;
    }

    /* ========== Alert/Badge Styling ========== */
    .alert {
        border: 0;
        border-radius: 10px;
        border-left: 4px solid;
        padding: 14px 18px;
        font-size: 13px;
        margin-bottom: 18px;
    }

    .alert-primary {
        background: rgba(22, 163, 74, 0.08);
        border-left-color: #16a34a;
        color: #15803d;
    }

    .alert-success {
        background: rgba(29, 209, 161, 0.08);
        border-left-color: #1dd1a1;
        color: #0b6e4f;
    }

    .alert-warning {
        background: rgba(255, 193, 7, 0.08);
        border-left-color: #ffc107;
        color: #7f6000;
    }

    .alert-danger {
        background: rgba(220, 38, 38, 0.08);
        border-left-color: #dc2626;
        color: #991b1b;
    }

    .alert-info {
        background: rgba(0, 212, 255, 0.08);
        border-left-color: #00d4ff;
        color: #003d66;
    }

    .badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 11px;
    }

    /* Light Mode Badges with Vibrant Colors */
    body:not([data-background-color="dark"]) .badge-primary {
        background: #ebebeb;
        color: #16a34a;
    }

    body:not([data-background-color="dark"]) .badge-success {
        background: #e9e9e9;
        color: #1dd1a1;
    }

    body:not([data-background-color="dark"]) .badge-warning {
        background: #fff3cd;
        color: #ff9800;
    }

    body:not([data-background-color="dark"]) .badge-danger {
        background: #ffe0eb;
        color: #dc2626;
    }

    /* Dark Mode Badges */
    [data-background-color="dark"] .badge-primary {
        background: #3a3a3a;
        color: #c2c2c2;
    }

    [data-background-color="dark"] .badge-success {
        background: #3a3a3a;
        color: #c4c4c4;
    }

    [data-background-color="dark"] .badge-warning {
        background: #3a3a3a;
        color: #e0d588;
    }

    [data-background-color="dark"] .badge-danger {
        background: #3a3a3a;
        color: #e0b8d0;
    }

    /* ========== Heading Styling ========== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #2e2e2e;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }

    h2 {
        font-size: 24px;
        margin-bottom: 8px;
    }

    h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    /* ========== Section Headers ========== */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 2px solid #e9ecef;
    }

    .section-header h2 {
        margin: 0;
        font-size: 20px;
    }

    /* ========== Empty State Styling ========== */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: #ffffff;
        border-radius: 12px;
        border: 2px dashed #e3e3e3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .empty-state i {
        font-size: 48px;
        color: #d3d3d3;
        margin-bottom: 16px;
    }

    .empty-state p {
        color: #83838a;
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* ========== Modal Styling ========== */
    .modal-content {
        border: 0;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
        background: #16a34a;
        color: #ffffff;
        border: 0;
        padding: 18px 20px;
    }

    .modal-header .close {
        color: #ffffff;
        opacity: 0.8;
    }

    .modal-header .close:hover {
        opacity: 1;
    }

    /* ========== Tab Styling ========== */
    .nav-tabs {
        border-bottom: 2px solid #e9ecef;
        gap: 8px;
    }

    .nav-tabs .nav-link {
        color: #83838a;
        border: 0;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 3px solid transparent;
        transition: none !important;
    }

    .nav-tabs .nav-link:hover {
        border-bottom-color: #16a34a;
        color: #16a34a;
        transition: none !important;
    }

    .nav-tabs .nav-link.active {
        color: #16a34a;
        background: transparent;
        border-bottom-color: #16a34a;
    }

    /* ========== Pagination Styling ========== */
    .pagination {
        gap: 4px;
    }

    .page-link {
        border: 2px solid #e9ecef;
        border-radius: 6px;
        color: #5a5a5a;
        padding: 8px 12px;
        font-weight: 600;
        font-size: 12px;
        transition: none !important;
        pointer-events: auto !important;
    }

    .page-link:hover {
        background: #16a34a;
        border-color: #16a34a;
        color: #ffffff;
        transition: none !important;
    }

    .page-link.active {
        background: #16a34a;
        border-color: #16a34a;
        color: #ffffff;
    }

    .page-link:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* ========== Dark Mode Adjustments ========== */
    [data-background-color="dark"] body {
        background: var(--app-dark-bg, #000000);
        color: var(--ty-ink);
    }

    [data-background-color="dark"] .card {
        background: #262626;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    [data-background-color="dark"] .card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    [data-background-color="dark"] .card-header {
        background: #3a3a3a;
    }

    [data-background-color="dark"] .card-footer {
        background: var(--app-dark-surface-2, #212121);
        border-color: #3c3c3c;
    }

    [data-background-color="dark"] .form-control {
        background: #2b2b2b;
        border-color: #3c3c3c;
        color: var(--ty-ink);
    }

    [data-background-color="dark"] .form-control:focus {
        background: #2b2b2b;
        border-color: #666666;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
    }

    [data-background-color="dark"] .table thead th {
        background: #3a3a3a;
    }

    [data-background-color="dark"] .table tbody td {
        color: var(--ty-ink);
        border-color: #3c3c3c;
    }

    [data-background-color="dark"] .table tbody tr:hover {
        background-color: #2b2b2b;
    }

    [data-background-color="dark"] .empty-state {
        background: #262626;
        border-color: #3c3c3c;
    }

    [data-background-color="dark"] .nav-tabs {
        border-bottom-color: #3c3c3c;
    }

    [data-background-color="dark"] .nav-tabs .nav-link {
        color: #a7a7a7;
    }

    [data-background-color="dark"] .page-link {
        border-color: #3c3c3c;
        color: #a7a7a7;
    }

    [data-background-color="dark"] h1,
    [data-background-color="dark"] h2,
    [data-background-color="dark"] h3,
    [data-background-color="dark"] h4,
    [data-background-color="dark"] h5,
    [data-background-color="dark"] h6 {
        color: var(--ty-ink-strong);
    }

    /* ── Global dark safety-net ─────────────────────────────────────────────
       Catches the common things individual pages ship that would otherwise stay
       light/unreadable in dark mode: white backgrounds (incl. inline), modals,
       dropdowns, raw selects/textareas, and dark text utilities. Scoped to dark
       mode only, so it never touches the light theme. ──────────────────────── */
    [data-background-color="dark"] .bg-white,
    [data-background-color="dark"] .bg-light,
    [data-background-color="dark"] .modal-content,
    [data-background-color="dark"] .dropdown-menu,
    [data-background-color="dark"] .popover,
    [data-background-color="dark"] .offcanvas,
    [data-background-color="dark"] .list-group-item {
        background-color: #262626 !important;
        color: var(--ty-ink);
        border-color: #3c3c3c;
    }
    [data-background-color="dark"] .modal-header,
    [data-background-color="dark"] .modal-footer,
    [data-background-color="dark"] .dropdown-item {
        color: var(--ty-ink);
        border-color: #3c3c3c;
    }
    [data-background-color="dark"] .dropdown-item:hover,
    [data-background-color="dark"] .list-group-item:hover {
        background-color: #2b2b2b !important;
    }
    /* :not(.vai *):not(.vai-ags *) — the chat and the agent workspace both
       ship their own always-dark designs (transparent composer textarea etc.);
       painting their fields #2b2b2b turned the chat input into a blue box on
       dark mode, and left the agent composer a grey slab on black. Keep the
       safety-net off both trees. */
    [data-background-color="dark"] select:not(.vai *):not(.vai-ags *),
    [data-background-color="dark"] textarea:not(.vai *):not(.vai-ags *),
    [data-background-color="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.vai *):not(.vai-ags *):not(.kb-modal__find),
    [data-background-color="dark"] .form-select:not(.vai *):not(.vai-ags *),
    [data-background-color="dark"] .custom-select:not(.vai *):not(.vai-ags *) {
        /* The colour admin picked for inputs (Basic Settings -> Dark Mode),
           the same source .main-panel's fields read in dashboard-dark.css.
           A fixed grey here was why a field could come out near-black beside
           a page painted some other colour, and why changing the setting
           moved some fields and not others. */
        background-color: var(--app-dark-input, #2b2b2b);
        border-color: #3c3c3c;
        color: var(--ty-ink);
    }
    [data-background-color="dark"] .text-dark,
    [data-background-color="dark"] .text-body,
    [data-background-color="dark"] .text-black,
    [data-background-color="dark"] .text-secondary,
    [data-background-color="dark"] .card-title,
    [data-background-color="dark"] .page-title,
    [data-background-color="dark"] label,
    [data-background-color="dark"] dt,
    [data-background-color="dark"] th {
        color: #ececec !important;
    }
    [data-background-color="dark"] .text-muted,
    [data-background-color="dark"] .form-text,
    [data-background-color="dark"] small.text-muted {
        color: #a2a2a2 !important;
    }
    [data-background-color="dark"] hr,
    [data-background-color="dark"] .border,
    [data-background-color="dark"] .border-top,
    [data-background-color="dark"] .border-bottom,
    [data-background-color="dark"] .border-left,
    [data-background-color="dark"] .border-right {
        border-color: #3c3c3c !important;
    }
    [data-background-color="dark"] .badge-light,
    [data-background-color="dark"] .btn-light {
        background-color: #2b2b2b;
        color: var(--ty-ink);
        border-color: #3c3c3c;
    }
    [data-background-color="dark"] .table,
    [data-background-color="dark"] .table td,
    [data-background-color="dark"] .table th {
        color: var(--ty-ink);
    }
    [data-background-color="dark"] .close,
    [data-background-color="dark"] .btn-close {
        color: var(--ty-ink);
        filter: invert(1) grayscale(1) brightness(1.6);
    }

    [data-background-color="dark"] .alert-primary {
        background: rgba(22, 163, 74, 0.1);
        border-left-color: #666666;
        color: #c2c2c2;
    }

    [data-background-color="dark"] .alert-success {
        background: rgba(29, 209, 161, 0.08);
        border-left-color: #6d6d6d;
        color: #c4c4c4;
    }

    [data-background-color="dark"] .alert-warning {
        background: rgba(255, 193, 7, 0.08);
        border-left-color: #8a8a5a;
        color: #e0d588;
    }

    [data-background-color="dark"] .alert-danger {
        background: rgba(220, 38, 38, 0.08);
        border-left-color: #8a5a77;
        color: #e0b8d0;
    }

    [data-background-color="dark"] .section-header {
        border-bottom-color: #3c3c3c;
    }

    /* Plan Widget Dark Mode */
    [data-background-color="dark"] .user-plan-section {
        background: #2b2b2b !important;
        color: #e3e3e3 !important;
        border-top-color: #3c3c3c !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    [data-background-color="dark"] .user-plan-section p {
        color: #a7a7a7 !important;
    }

    [data-background-color="dark"] .user-plan-section h5 {
        color: #c2c2c2 !important;
    }

    /* Dark Mode No Active Plan Card */
    [data-background-color="dark"] .card {
        background: #2b2b2b !important;
    }

    [data-background-color="dark"] .card h4 {
        color: #e3e3e3 !important;
    }

    [data-background-color="dark"] .card p {
        color: #a7a7a7 !important;
    }

    [data-background-color="dark"] .empty-state {
        background: #2b2b2b !important;
    }

    /* Modal Position Lock - Prevent repositioning on hover */
    /* Lock modal during mouse movement */
    body.modal-open * {
        will-change: auto !important;
    }

    /* Mobile sidebar: overlay content instead of pushing it right */
    @media screen and (max-width: 991px) {

        .nav_open .main-panel,
        .nav_open .main-header,
        .nav_open .wrapper,
        .topbar_open .main-panel,
        .topbar_open .main-header,
        .nav_open.topbar_open .main-panel,
        .nav_open.topbar_open .main-header {
            -webkit-transform: none !important;
            -moz-transform: none !important;
            -o-transform: none !important;
            -ms-transform: none !important;
            transform: none !important;
        }

        .sidebar {
            z-index: 1040 !important;
            box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
        }

        .main-header {
            min-height: 0 !important;
            height: auto !important;
            overflow: visible !important;
        }

        .main-header .logo-header {
            height: 62px !important;
            min-height: 62px !important;
        }

        .main-header .dashboard-platform-strip {
            display: block !important;
            position: relative !important;
            z-index: 1002 !important;
            visibility: visible !important;
            width: 100% !important;
        }

        .topbar_open .navbar-header {
            /* Sit flush directly below the 62px logo-header. The old 104px
               left a ~42px band where scrolling content peeked through
               between the fixed header and this pinned credits/profile strip. */
            transform: translate3d(0, 62px, 0) !important;
            z-index: 1003 !important;
            background: #F4F4F4;
        }

        [data-background-color="dark"] .topbar_open .navbar-header {
            background: var(--app-dark-surface-2, #1c1c1c);
        }

        .topbar_open .main-panel {
            transform: none !important;
        }

        .nav_open::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1035;
            pointer-events: none;
        }
    }