:root {
    --dark-theme-bgc: #252729;
    --dark-theme-elements-bgc: #1a1c1e;
    --dark-theme-text-color: #bebfbf;
    --secondary-text-color: #6B7280;

    --widget-bgcolor-green-dark: oklch(0.3324 0.037 155.826);
    --widget-text-green-dark: oklch(52.7% .154 150.069);
    --widget-border-green-dark: oklch(52.7% .154 150.069);

    --widget-bgcolor-red-dark: oklch(0.3618 0.0937 27.518);
    --widget-text-red-dark: oklch(50.5% .213 27.518);
    --widget-border-red-dark: oklch(50.5% .213 27.518);

    --widget-bgcolor-gray-dark: oklch(0.3853 0.0123 247.839);
    --widget-text-gray-dark: oklch(37.3% .034 259.733);
    --widget-border-gray-dark: oklch(37.3% .034 259.733);

    --widget-bgcolor-blue-dark: oklch(0.2882 0.0839 264.376);
    --widget-text-blue-dark: oklch(48.8% .243 264.376);
    --widget-border-blue-dark: oklch(48.8% .243 264.376);

    --widget-bgcolor-purple-dark: oklch(0.3206 0.0666 308.299);
    --widget-text-purple-dark: oklch(49.6% .265 301.924);
    --widget-border-purple-dark: oklch(49.6% .265 301.924);

    --widget-bgcolor-orange-dark: oklch(0.5765 0.0419 102.212);
    --widget-text-orange-dark: oklch(47.6% .114 61.907);
    --widget-border-orange-dark: oklch(94.5% .129 101.54);
}

[data-theme-mode="dark"] {

    * {
        transition: background-color 1s ease, color 1s ease !important;
    }

    p, button, h1, h2, h3, label, button, th, td, tr, li, a, button {
        color: var(--dark-theme-text-color) !important;
    }

    .manager-name {
        color: var(--dark-theme-text-color) !important;
    }

    .select-box span {
        color: var(--dark-theme-text-color) !important;
    }


    .connections__integrations-tab-element-btns-container button {
        background-color: var(--dark-theme-bgc) !important;
    }

    .mainPage__system-management-btn,
    .refPage__social-link,
    .accountPage__profile-edit-btn,
    .accountPage__tab-security-pwd-btn,
    .campaignsAnalyticsEl {
        background-color: var(--dark-theme-bgc) !important;
        border: 1px solid var(--dark-theme-bgc) !important;
    }

    .mainPage__system-management-btn:hover {
        background-color: var(--secondary-text-color) !important;
    }

    .mainPage__initial-info-item-container,
    .mainPage__dashboards-item-container,
    .mainPage__system-management-item-container,
    .metricCard,
    .sales__chart-main-container,
    .productAnalytics__chart-main-container,
    .productAnalytics__table-main-container,
    .gridjs-wrapper,
    .managers__chart-main-container,
    .managers-card,
    tr,
    td,
    th,
    .clients__chart-main-container,
    .marketingAnalytics__chart-main-container,
    .crm__chart-style,
    .analytics__crm-global-utm-container,
    .marketingAnalytics__table-container,
    .marketingAnalytics__facebook-campaigns-table-container,
    .select-box,
    .marketingAnalytics__accounts-selector,
    .marketingAnalytics__control-btns-container,
    .marketingAnalytics__googleAds-table-container,
    .connections__info-element,
    .connections__integrations-tab-element,
    .connections__control-btns-container,
    .billing__control-btns-container,
    .connections__modal-api,
    .connections__modal,
    .card,
    .refPage__tabs-list,
    .refPage__req,
    .refPage__tab-user,
    .refPage__tabs-btn,
    .refPage__tab-transaction,
    .refPage__tab-transactions-select,
    .refPage__tab-transactions-input,
    .accountPage__tab-personal-input,
    .accountPage__tab-security-timeout,
    .accountPage__tab-session,
    .accountPage__tab-personal-abtself,
    .accountPage__tabs-list,
    .accountPage__tabs-btn,
    .billing__current-plan-info-container,
    .billing__usage-container,
    .billing__tariff-container,
    .billing__tariff-container,
    .billing__payment-variant,
    .billing__payment-variant,
    .billing__payment-tab,
    .billing__history-tab,
    .billing__add-payment-modal-inner-container,
    .billing__payment-history-element,
    .aiAnalytics__sidebar,
    .aiAnalytics__output-container,
    .inputs-container,
    .chart-style-1c {
        background-color: var(--dark-theme-elements-bgc) !important;
        transition: background-color 1s ease !important;
    }

    input::placeholder {
        color: #999; /* сірий колір */
        opacity: 1; /* щоб не був прозорий */
    }

    .card {
        border-color: var(--dark-theme-elements-bgc) !important;
        transition: background-color 1s ease !important;
    }

    .main-content,
    .refPage__tabs-btn--active,
    .accountPage__tabs-btn--active,
    .control-btn-active,
    .page,
    body {
        background-color: var(--dark-theme-bgc) !important;
        transition: background-color 1s ease !important;
    }

    .skeleton {
        background: linear-gradient(
                90deg,
                #3a3a3a 25%,
                #4a4a4a 50%,
                #3a3a3a 75%
        );
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 8px;
        width: 100%;
    }

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

    .skeleton-table-container.skeleton-table::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 8px;
        background: linear-gradient(
                90deg,
                #3a3a3a 25%,
                #4a4a4a 50%,
                #3a3a3a 75%
        );
        background-size: 200% 100%;
        animation: skeleton-loading-table 1.5s infinite;
        z-index: 100;
        pointer-events: none;
    }


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

    .aiAnalytics__output {
        p, li {
            font-size: 16px;
            color: var(--secondary-text-color);
        }

        p {
            border-radius: 16px;
            border: 2px solid lightgray;
            background-color: var(--dark-theme-bgc) !important;
            padding: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }

        code {
            font-size: 18px;
            color: oklch(0.6265 0.1184 149.579);
        }

        ol {
            transition: all 0.25s ease;

            li {
                border-radius: 16px;
                border: 2px solid lightgray;
                background-color: var(--dark-theme-bgc) !important;
                padding: 10px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                margin-bottom: 10px;

                ul li::marker {
                    color: var(--icon-blue-color); /* синій колір точки */
                    font-size: 20px; /* можна навіть змінити розмір */
                }
            }
        }

        ul {
            transition: all 0.25s ease;

            li {
                border-radius: 16px;
                border: 2px solid lightgray;
                background-color: var(--dark-theme-bgc) !important;
                padding: 10px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                margin-bottom: 10px;

                ul li::marker {
                    color: var(--icon-blue-color); /* синій колір точки */
                    font-size: 20px; /* можна навіть змінити розмір */
                }

            }
        }

        ul li::marker {
            color: var(--icon-blue-color); /* синій колір точки */
            font-size: 20px; /* можна навіть змінити розмір */
        }
    }

    .aiAnalytics__card-item {

        input {
            display: none;
        }

        label {
            color: var(--secondary-text-color);
            font-size: 16px;
            cursor: pointer;
            border: 2px solid oklch(.88 0 0);
            border-radius: 8px;
            padding: 16px;
            transition: all 0.25s ease;
            width: 100%;
        }

        i {
            font-size: 18px;
            padding: 8px;
            border-radius: 8px;
            color: #fff;
            background-color: var(--icon-blue-color);
        }

        label:hover {
            background-color: #aaaaaa !important;
            color: #fff !important;
            transform: scale(1.05);
        }

        input[type="radio"]:checked + label {
            background-color: #007bff;
            color: white;
            transform: scale(1.07);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
        }
    }

    .aiAnalytics__before-icon-container {
        color: var(--widget-text-blue-dark) !important;
        background-color: var(--widget-bgcolor-blue-dark) !important;
        border: 1px solid var(--widget-border-blue-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }


    .green-widget-style {
        color: var(--widget-text-green-dark) !important;
        background-color: var(--widget-bgcolor-green-dark) !important;
        border: 1px solid var(--widget-border-green-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .red-widget-style {
        color: var(--widget-text-red-dark) !important;
        background-color: var(--widget-bgcolor-red-dark) !important;
        border: 1px solid var(--widget-border-red-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .gray-widget-style {
        color: var(--dark-theme-text-color) !important;
        background-color: var(--widget-bgcolor-gray-dark) !important;
        border: 1px solid var(--widget-border-gray-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .blue-widget-style {
        color: var(--widget-text-blue-dark) !important;
        background-color: var(--widget-bgcolor-blue-dark) !important;
        border: 1px solid var(--widget-border-blue-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .purple-widget-style {
        color: var(--widget-text-purple-dark) !important;
        background-color: var(--widget-bgcolor-purple-dark) !important;
        border: 1px solid var(--widget-border-purple-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .orange-widget-style {
        color: var(--widget-text-orange-dark) !important;
        background-color: var(--widget-bgcolor-orange-dark) !important;
        border: 1px solid var(--widget-border-orange-dark) !important;
        transition: background-color 1s ease, color 1s ease !important;
    }

    .submitPeriod-btn {
        color: #333333 !important;
        background-color: #ffffff !important;
    }


}