/* Default Dark Theme */
:root {
    --card-bg-color: #272a30;
    /* --card-border-color: #f8f9fa; */
    --text-color: #f8f9fa;

    --table-bg-color: #272a30;
    --table-border-color: #f8f9fa;
    --table-text-color: #f8f9fa;

    /* --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); */

    --html-body-bg-color: #272a30;

    --link-color: #f8f9fa;
    --link-hover-color: #f8f9fa;

    --company-profile-color: #272a30;
    --company-profile-hover-color: #272a30;

    --button-color: #f8f9fa;
    --button-font: #f8f9fa;

    --form-bg-color: #272a30;
    --form-border-color: #444;
    --form-color: #f8f9fa;

    --modal-bg-color: #272a30;
    --modal-color: #f8f9fa;

    --autocomplete-bg-color: #272a30;
    --autocomplete-color: #f8f9fa;
    --autocomplete-active-bg-color: #007bff;
    --autocomplete-active-color: white;
}

/* Light Theme */
.light-theme {
    --card-bg-color: #ffffff;
    --card-border-color: #f8f9fa;
    --text-color: #272a30;
    --chart-text-color: #ffffff;

    --table-bg-color: #ffffff;
    --table-border-color: #ddd;
    --table-text-color: #272a30;
    --table-shadow: 0 4px 50px rgba(0, 0, 0, 0.1);

    --card-shadow: 0 4px 50px rgba(0, 0, 0, 0.1);

    --link-color: #272a30;
    --link-hover-color: #272a30;

    --company-profile-color: #272a30;
    --company-profile-hover-color: #272a30;

    --button-color: #f8f9fa;
    --button-font: #272a30;

    --form-bg-color: #ffffff;
    --form-border-color: #f8f9fa;
    --form-color: #272a30;

    --modal-bg-color: #ffffff;
    --modal-color: #272a30;

    --autocomplete-bg-color: #ffffff;
    --autocomplete-color: #272a30;
    --autocomplete-active-bg-color: #007bff;
    --autocomplete-active-color: white;
}

.ui-autocomplete {
    background-color: var(--autocomplete-bg-color);
    color: var(--autocomplete-color);
    border: 1px solid var(--form-border-color);
    max-height: 12.5rem;
    overflow-y: auto;
    z-index: 1051;
}

.ui-menu-item-wrapper.ui-state-active {
    background-color: var(--autocomplete-active-bg-color);
    color: var(--autocomplete-active-color);
}

.card {
    background-color: var(--card-bg-color);
    border-color: var(--card-border-color);
    color: var(--text-color);
    box-shadow: var(--card-shadow);
    border: 2px solid var(--card-border-color);
}

body>div.form {
    background-color: var(--form-bg-color);
    color: var(--form-color);
}

.table,
.table-bordered {
    background-color: var(--table-bg-color);
    border-color: var(--table-border-color);
    color: var(--table-text-color);
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--table-shadow);
}

.table th,
.table td {
    padding: 0.625rem;
    border: 2px solid var(--table-border-color);
    background-color: var(--table-bg-color);
    color: var(--table-text-color);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table-responsive,
.responsive-table {
    background-color: var(--table-bg-color);
    color: var(--table-text-color);
}

html,
body {
    background-color: var(--html-body-bg-color);
    color: var(--text-color);
}

.modal-content {
    background-color: var(--modal-bg-color);
    color: var(--modal-color);
}

.modal-body {
    background-color: var(--modal-bg-color);
    color: var(--modal-color);
}

.modal-header {
    background-color: var(--modal-bg-color);
    color: var(--modal-color);
}

.table-table-bordered {
    background-color: var(--table-bg-color);
    color: var(--text-color);
}

/* Styling for links */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.nav-link.active {
    color: var(--button-color);
}

.nav-link {
    color: var(--button-font);
}

.nav-link:hover {
    color: var(--button-font);
}

/* Custom Slider CSS - Converted to REM/EM where applicable for better scaling */
.form-check-input {
    width: 3.125rem;
    height: 1.5625rem;
    background-color: #ccc;
    border-radius: 50rem;
    transition: 0.4s;
    position: relative;
}

.form-check-input:checked {
    background-color: #2196F3;
    width: 2.5rem;
}

.form-switch .form-check-input {
    width: 2.5rem;
}

.form-check-input::before {
    content: "";
    position: absolute;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    top: 0.15625rem;
    left: 0.1875rem;
    transition: 0.4s;
}

.form-check-input:checked::before {
    transform: translateX(1.5rem);
    display: none;
}