/* Colors theme */

/* Light */
:root[data-applied-mode="light"] {
    color-scheme: light;

    /* Body */
    --body-bg: #fafafa;
    --body-color: #7f8792;
    --body-accent-color: #232939;

    /* Sidebar */
    --sb-pry-bg: #fff;
    --sb-sec-bg: #fff;
    --sb-text-color: #7f8792;
    --sb-text-sec-color: #aab2c3;
    --sb-icon-color: #7f8792;
    --sb-active-bg-color: var(--main-light-color);
    --sb-active-text-color: var(--main-color);
    --sb-user-bdr-color: var(--bdr-color);
    --sb-minimizer-bg: var(--sb-pry-bg);
    --sb-minimizer-active-color: var(--main-color);
    --sb-logout-bg: #ffe7e3;
    --sb-logout-color: #ff5b3f;
    --sb-shadow: 0 0 20px rgba(0 0 0 / 5%);

    /* Header */
    --header-bg: #fff;
    --header-bdr-color: #ececec;

    /* Footer */
    --footer-bg: #fff;

    /* Quick search */
    --qs-bg: #fff;
    --qs-bdr: #eaeaea;
    --qs-hvr-bg: #f9f9f9;

    /* Loader */
    --loader-bg: var(--body-color);

    /* Modal */
    --modal-bg: #fff;

    /* Card */
    --card-bg: #fff;
    --card-shadow: 0 3px 10px rgba(0 0 0 / 5%);

    /* Dropdown */
    --dropdown-bg: #fff;

    /* Form */
    --field-bg: #f9f9f9;
    --field-container-bg: #fff;
    --field-bdr: #f2f2f2;
    --field-focus-bg: #fff;
    --field-focus-bdr: #1b7fff;
    --field-focus-color: #1b7fff;
    --field-focus-shadow: rgb(0 123 255 / 25%);

    /* Select2 */
    --select2-bg: #fff;
    --select2-color: var(--body-accent-color);
    --select2-bg-accent: #f9f9f9;

    /* Datepicker */
    --datepicker-color: var(--body-color);
    --datepicker-hvr-bg: #f9f9f9;
    --datepicker-hvr-color: var(--body-accent-color);

    /* Switch */
    --switch-bg: #ced2d8;
    --switch-active-bg: var(--success-btn-bg);
    --setting-switch-bg: var(--body-bg);

    /* Tabs */
    --tab-bg: #f7f7f7;
    --tab-bg-active: var(--main-color);
    --tab-color: var(--body-accent-color);
    --tab-active-color: #fff;

    /* Table */
    --table-accent-bg: #f2f2f2;
    --table-hover-color: var(--body-accent-color);
    --table-bdr-color: #eee;
    --table-row-parent: #eef5ff;
    --table-row-section: #eff3f5;

    /* Pagination */
    --pagination-bg: #fff;
    --pagination-bdr-color: #dee2e6;
    --pagination-color: var(--main-color);
    --pagination-active-bg: var(--main-color);
    --pagination-active-color: #fff;

    /* Borders */
    --bdr-color: #f0f3f6;
    --bdr-sec-color: #dbdbdb;

    /* Calendar */
    --calendar-event-bdr: #fff;
}

/* Dark */
:root[data-applied-mode="dark"] {
    color-scheme: dark;

    /* Body */
    --body-bg: #18191a;
    --body-color: #a7acb3;
    --body-accent-color: #fff;

    /* Sidebar */
    --sb-pry-bg: #262626;
    --sb-sec-bg: #333;
    --sb-text-color: #7f8792;
    --sb-text-sec-color: #aab2c3;
    --sb-icon-color: #7f8792;
    --sb-active-bg-color: var(--main-color);
    --sb-active-text-color: #fff;
    --sb-user-bdr-color: #4a4a4a;
    --sb-minimizer-bg: var(--main-color);
    --sb-minimizer-active-color: #fff;
    --sb-logout-bg: #ffe7e3;
    --sb-logout-color: #ff5b3f;
    --sb-shadow: 0 0 20px rgba(0 0 0 / 40%);

    /* Header */
    --header-bg: #262626;
    --header-bdr-color: #333;

    /* Footer */
    --footer-bg: #262626;

    /* Quick search */
    --qs-bg: #262626;
    --qs-bdr: var(--bdr-color);
    --qs-hvr-bg: #1a1a1a;

    /* Loader */
    --loader-bg: var(--body-color);

    /* Link */
    --pry-link-color: var(--main-color);

    /* Text */
    --pry-text-color: var(--main-color);

    /* Buttons */
    --shadow-btn-bg: #333;
    --shadow-btn-hvr-bg: var(--main-color);
    --shadow-btn-shadow: 0 3px 10px rgba(0 0 0 / 40%);
    --sec-btn-bg: #333;
    --sec-btn-bdr: #333;
    --sec-btn-hvr-bg: #1e1e1e;
    --sec-btn-hvr-bdr: #1e1e1e;
    --sec-btn-fcs-shadow: #393939;
    --sec-btn-color: #fff;
    --dark-btn-bg: #1c1c1c;
    --dark-btn-hvr-bg: #000;
    --dark-btn-hvr-bdr: #000;
    --dark-btn-fcs-shadow: #2f2f2f;
    --export-btn-bg: #4d4d4d;
    --export-btn-hvr-bg: #333;
    --export-btn-hvr-bdr: #333;
    --export-btn-fcs-shadow: #777;

    /* Modal */
    --modal-bg: #262626;

    /* Card */
    --card-bg: #262626;
    --card-shadow: 0 3px 10px rgba(0 0 0 / 40%);

    /* Dropdown */
    --dropdown-bg: #262626;

    /* Form */
    --field-bg: #333;
    --field-container-bg: #202020;
    --field-bdr: #333;
    --field-focus-bg: #242424;
    --field-focus-bdr: #1b7fff;
    --field-focus-color: #1b7fff;
    --field-focus-shadow: rgb(0 123 255 / 25%);

    /* Select2 */
    --select2-bg: var(--field-bg);
    --select2-color: var(--body-color);
    --select2-bg-accent: #242424;

    /* Datepicker */
    --datepicker-color: var(--body-color);
    --datepicker-hvr-bg: #1c1c1c;
    --datepicker-hvr-color: #fff;

    /* Switch */
    --switch-bg: #333;
    --switch-active-bg: var(--success-btn-bg);
    --setting-switch-bg: #1c1c1c;

    /* Tabs */
    --tab-bg: #333;
    --tab-bg-active: var(--main-color);
    --tab-color: var(--body-color);
    --tab-active-color: #fff;

    /* Table */
    --table-accent-bg: #1c1c1c;
    --table-hover-color: var(--body-accent-color);
    --table-bdr-color: #333;
    --table-row-section: #0f0f0f;
    --table-row-parent: #1c1c1c;

    /* Pagination */
    --pagination-bg: #222;
    --pagination-bdr-color: #393939;
    --pagination-color: var(--body-color);
    --pagination-active-bg: var(--main-color);
    --pagination-active-color: #fff;

    /* Borders */
    --bdr-color: #313131;
    --bdr-sec-color: #4f4f4f;

    /* Shadows */
    --box-shadow: 0 3px 10px rgb(0 0 0 / 40%);

    /* Calendar */
    --calendar-event-bdr: #404040;
}