/** CSS DARK THEME PRIMARY COLORS */
:root {
    --color-primary-100: #382bf0;
    --color-primary-200: #5e43f3;
    --color-primary-300: #7a5af5;
    --color-primary-400: #9171f8;
    --color-primary-500: #a688fa;
    --color-primary-600: #ba9ffb;
    /** CSS DARK THEME SURFACE COLORS */
    --color-surface-100: #111111;
    --color-surface-200: #1e1e1e;
    --color-surface-300: #2d2d2d;
    --color-surface-400: #444444;
    --color-surface-500: #666666;
    --color-surface-600: #909090;
    --color-surface-700: #e0e0e0;
    /** CSS DARK THEME MIXED SURFACE COLORS */
    --color-surface-mixed-100: #1a1625;
    --color-surface-mixed-200: #2f2b3a;
    --color-surface-mixed-300: #46424f;
    --color-surface-mixed-400: #5e5a66;
    --color-surface-mixed-500: #76737e;
    --color-surface-mixed-600: #908d96;
    /** BUTTON COLORS */
    --color-btn-primary: #3a6bc4;
    --color-btn-primary-hover: #2f5aa8;
    --color-btn-info: #0a7fa8;
    --color-btn-info-hover: #086d90;
    --color-btn-success: #672583;
    --color-btn-success-hover: #E6007E;
    --color-btn-danger: #a03030;
    --color-btn-danger-hover: #8a2828;
    /** UTILITY */
    --color-white: #fff;
    --color-overlay-subtle: rgba(255, 255, 255, 0.04);
    --color-overlay-medium: rgba(255, 255, 255, 0.08);
    /** SIDEBAR */
    --color-sidebar-bg: #1a1a2a;
    --color-sidebar-active-bg: #111120;
    --color-sidebar-hover: #8888b0;
    /** ALERT COLORS */
    --color-alert-warning-bg: #3d2e00;
    --color-alert-warning-border: #c8960c;
    --color-alert-warning-text: #ffd740;
    --color-btn-warning: #c8860a;
    --color-btn-warning-hover: #a86e08;
    --color-alert-danger-bg: #3d1010;
    --color-alert-danger-border: #5a1818;
    --color-alert-danger-text: #f08080;
    --color-alert-success-bg: #103d10;
    --color-alert-success-border: #185a18;
    --color-alert-success-text: #80f080;
}

/* =============================================
   BASE
   ============================================= */

body {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

a {
    color: var(--color-surface-600);
}

    a:hover {
        color: var(--color-surface-700);
    }

.text-muted {
    color: var(--color-surface-500) !important;
}

.text-dark {
    color: var(--color-surface-700) !important;
}

hr {
    border-color: var(--color-surface-400);
}

.border-top, .border-bottom, .border-start, .border-end, .border {
    border-color: var(--color-surface-400) !important;
}

/* =============================================
   NAVBAR
   ============================================= */

.navbar {
    background-color: var(--color-surface-200);
}

    .navbar .nav-link,
    .navbar .navbar-text,
    .navbar .text-light,
    .ongoing-case-count,
    .dark-mode-toggle {
        color: var(--color-surface-700) !important;
    }

        .navbar .nav-link:hover,
        .navbar a.nav-link.text-light:hover,
        .navbar .quote-menu-item .nav-link:hover {
            color: var(--color-white) !important;
        }

.quote-menu-item .dropdown-menu {
    background-color: var(--color-surface-200);
}

    .quote-menu-item .dropdown-item:focus,
    .quote-menu-item .dropdown-item:hover {
        background-color: var(--color-surface-300) !important;
        color: var(--color-surface-700) !important;
    }

.quote-ref-search i,
.quote-case-search i {
    color: var(--color-surface-600);
}

.quote-ref-search-input,
.quote-case-search-input {
    background-color: var(--color-surface-300) !important;
    border: solid 1px var(--color-surface-400) !important;
    color: var(--color-surface-700) !important;
}

    .quote-ref-search-input::placeholder,
    .quote-case-search-input::placeholder {
        color: var(--color-surface-500) !important;
    }

/* =============================================
   BUTTONS
   ============================================= */

.btn:hover {
    color: var(--color-surface-700);
}

.btn-outline-secondary {
    color: var(--color-surface-600);
    border-color: var(--color-surface-500);
}

    .btn-outline-secondary:hover {
        background-color: var(--color-surface-400);
        border-color: var(--color-surface-400);
        color: var(--color-surface-700);
    }

/* =============================================
   FORMS
   ============================================= */

.form-control {
    background-color: var(--color-surface-200);
    border: solid 1px var(--color-surface-400);
    color: var(--color-surface-700);
}

    .form-control:focus {
        background-color: var(--color-surface-200);
        color: var(--color-surface-700);
        border-color: var(--color-primary-400);
        box-shadow: 0 0 0 0.2rem rgba(122, 90, 245, 0.25);
    }

    .form-control::placeholder {
        color: var(--color-surface-500);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--color-surface-300);
        color: var(--color-surface-600);
    }

[data-validation-errors],
[data-validation-summary],
.field-validation-error {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f1aeb5;
    border: solid 1px rgba(220, 53, 69, 0.4);
}

.validation-failed {
    border-color: rgba(220, 53, 69, 0.8) !important;
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.form-select {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

    .form-select:focus {
        background-color: var(--color-surface-200);
        color: var(--color-surface-700);
        border-color: var(--color-primary-400);
        box-shadow: 0 0 0 0.2rem rgba(122, 90, 245, 0.25);
    }

.form-floating label {
    color: var(--color-surface-500);
}

.form-check-input {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-500);
}

.input-group-text {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

.sign-in-container {
    padding-bottom: 40px;
}

.form-signin {
    background-color: var(--color-surface-200);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    max-width: 400px;
}

/* =============================================
   CARDS
   ============================================= */

.card {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

.card-header {
    background-color: var(--color-surface-100);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

.card-footer {
    background-color: var(--color-surface-100);
    border-color: var(--color-surface-100);
}

/* =============================================
   TABLES
   ============================================= */

.table {
    color: var(--color-surface-700);
    border-color: var(--color-surface-400);
}

    .table thead th {
        background-color: var(--color-surface-200);
        color: var(--color-surface-700);
        border-color: var(--color-surface-400);
    }

    .table td, .table th {
        border-color: var(--color-surface-400);
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--color-overlay-subtle);
        color: var(--color-surface-700);
    }

    .table-hover > tbody > tr:hover > * {
        background-color: var(--color-overlay-medium);
        color: var(--color-surface-700);
    }

    .table-light {
        background-color: var(--color-surface-200);
        color: var(--color-surface-700);
    }

/* =============================================
   MODALS
   ============================================= */

.modal-content {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

.modal-header {
    border-color: var(--color-surface-300);
}

.modal-footer {
    border-color: var(--color-surface-300);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =============================================
   NAVIGATION TABS
   ============================================= */

.nav-tabs {
    border-color: var(--color-surface-400);
}

    .nav-tabs .nav-link {
        color: var(--color-surface-600);
    }

        .nav-tabs .nav-link:hover {
            color: var(--color-surface-700);
            border-color: var(--color-surface-400);
            background-color: var(--color-surface-300);
        }

        .nav-tabs .nav-link.active {
            background-color: var(--color-surface-200);
            border-color: var(--color-surface-400) var(--color-surface-400) var(--color-surface-200);
            color: var(--color-surface-700);
        }

.tab-content {
    color: var(--color-surface-700);
}

/* =============================================
   ACCORDION
   ============================================= */

.accordion-item {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

.accordion-button {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

    .accordion-button:not(.collapsed) {
        background-color: var(--color-surface-200);
        color: var(--color-surface-700);
        box-shadow: inset 0 -1px 0 var(--color-surface-100);
    }

    .accordion-button::after {
        filter: invert(1);
    }

/* =============================================
   DROPDOWNS
   ============================================= */

.dropdown-menu {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
}

.dropdown-divider {
    border-color: 
    /*border-color: var(--color-surface-400);*/
}

.dropdown-item {
    color: var(--color-surface-500);
}

    .dropdown-item:focus, .dropdown-item:hover {
        background-color: var(--color-surface-300);
        color: var(--color-surface-700);
    }

.addressee-section .dropdown-menu {
    background-color: var(--color-surface-100);
}

/* =============================================
   LIST GROUPS
   ============================================= */

.list-group-item {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    color: var(--color-surface-700);
}

    .list-group-item.active {
        background-color: var(--color-primary-300);
        border-color: var(--color-primary-300);
    }

    .list-group-item:hover {
        background-color: var(--color-surface-300);
        color: var(--color-surface-700);
    }

/* =============================================
   BADGES & ALERTS
   ============================================= */

.badge.bg-light {
    background-color: var(--color-surface-400) !important;
    color: var(--color-surface-700) !important;
}

.badge.bg-secondary {
    background-color: var(--color-surface-400) !important;
}

.alert-info {
    background-color: var(--color-surface-mixed-200);
    border-color: var(--color-surface-mixed-300);
    color: var(--color-surface-700);
}

.alert-warning {
    background-color: var(--color-alert-warning-bg) !important;
    border-color: var(--color-alert-warning-border) !important;
    color: var(--color-alert-warning-text) !important;
}

.soft-warning {
    background-color: rgba(255, 180, 0, 0.15) !important;
    border-left: 3px solid #ffc107;
}

.soft-warning-title {
    color: var(--color-alert-warning-text);
}

.soft-warning-message {
    color: var(--color-surface-600);
}

.alert-danger {
    background-color: var(--color-alert-danger-bg);
    border-color: var(--color-alert-danger-border);
    color: var(--color-alert-danger-text);
}

.alert-success {
    background-color: var(--color-alert-success-bg);
    border-color: var(--color-alert-success-border);
    color: var(--color-alert-success-text);
}

/* =============================================
   FOOTER
   ============================================= */

footer {
    background-image: none;
    background-color: var(--color-surface-200);
    color: var(--color-surface-600);
}

/* =============================================
   COMMUNICATION PAGE
   ============================================= */

.communication-page .send-message-section {
    background-color: var(--color-surface-300);
}

    .communication-page .send-message-section .write-message-section {
        background-color: var(--color-surface-200);
        border: solid 2px var(--color-surface-100);
    }

        .communication-page .send-message-section .write-message-section textarea {
            background-color: transparent;
            border: var(--color-surface-300);
            color: var(--color-surface-700);
        }

            .communication-page .send-message-section .write-message-section textarea:hover {
                border: var(--color-surface-400);
            }

            .communication-page .send-message-section .write-message-section textarea:focus-visible {
                border: var(--color-surface-500);
            }

.communication-page .send-message-section .send-button span {
    color: var(--color-surface-700);
}

.attachment-list-container .attachments-list {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-400);
    color: var(--color-surface-700);
}

.chat-section .outgoing-message .content-container {
    background-color: var(--color-surface-200);
    color: var(--color-surface-700);
}

.chat-section .outgoing-message .content-container a {
    color: #7eb8f7 !important;
    background-color: transparent !important;
    font-family: inherit !important;
}

    .chat-section .outgoing-message .content-container a:hover {
        color: #acd4ff !important;
    }

.chat-section .outgoing-message.internal .internal-notice span {
    color: var(--color-surface-700);
}

.communication-page .send-message-section .send-button:hover,
.communication-page .send-message-section .attachment-button:hover {
    color: var(--color-surface-600);
}

.send-message-section .addressee-section .input-group-text {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-400);
    color: var(--color-surface-700);
}

.send-message-section .addressee-section .dropdown .btn {
    color: var(--color-surface-700);
}

    .send-message-section .addressee-section .dropdown .btn:hover {
        color: var(--color-surface-700);
    }

.addressee-section .selected-item {
    background-color: transparent !important;
}


.send-message-section .addressee-section .combobox-container .combo-box {
    background-color: transparent;
    color: var(--color-surface-700);
    border-bottom-color: var(--color-surface-400);
}

/* =============================================
   COMBOBOX
   ============================================= */

.combobox-container .dropdown-toggle {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
    border-left-color: var(--color-surface-400);
    color: var(--color-surface-700);
    box-shadow: none;
}

    .combobox-container .dropdown-toggle:hover,
    .combobox-container .dropdown-toggle:focus,
    .combobox-container .dropdown-toggle:active {
        background-color: var(--color-surface-300);
        border-color: var(--color-surface-100);
        border-left-color: var(--color-surface-400);
        color: var(--color-surface-700);
        box-shadow: none;
    }

.combobox-container .dropdown-toggle::after {
    border-top-color: var(--color-surface-700);
}

.combobox-container.open .dropdown-toggle,
.combobox-container .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-100);
}

.typeahead-long {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-100);
}

    .typeahead-long .dropdown-item {
        color: var(--color-surface-700);
    }

        .typeahead-long .dropdown-item:hover,
        .typeahead-long .dropdown-item.active {
            background-color: var(--color-surface-300);
            color: var(--color-white) !important;
        }

/* =============================================
   POPOVER (data-popup-title)
   ============================================= */

[data-popup-title] {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-500);
    color: var(--color-surface-700);
}

/* =============================================
   POPUP MENU (3-dots context menu)
   ============================================= */

.popup-menu {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-400);
    box-shadow: 0px 0px 19px 3px rgba(0,0,0,0.4);
    color: var(--color-surface-700);
}

    .popup-menu hr {
        border-color: var(--color-surface-400);
    }

.bi-three-dots-vertical:hover {
    background-color: var(--color-surface-400);
}

/* =============================================
   QUOTE FEES
   ============================================= */

.quote-fees-list .fee-group-header,
.full-cost-details .fee-category-separator {
    background-color: var(--color-surface-400);
    color: var(--color-surface-700);
}

.quote-fees-list .product-fee-header,
.full-cost-details .full-fee-product-separator {
    background-color: var(--color-surface-100);
}

/* =============================================
   SIDEBAR (CASE / QUOTE VIEW)
   ============================================= */

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

    .sidebar a:hover {
        color: var(--color-sidebar-hover);
    }

    .sidebar ul li.active {
        background-color: var(--color-sidebar-active-bg);
        color: var(--color-white);
    }

        .sidebar ul li.active a {
            color: var(--color-white);
        }

/* =============================================
   FILTER BAR / SEARCH BAR
   ============================================= */

.filter-bar {
    background-color: var(--color-surface-200) !important;
    background-image: none !important;
}

.filter-bar .add-new-filter {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-400);
    color: var(--color-surface-700);
}

    .filter-bar .add-new-filter:hover {
        background-color: var(--color-surface-400);
        color: var(--color-surface-700);
    }

.filter-bar .filter-selector {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-400);
}

    .filter-bar .filter-selector ul li {
        color: var(--color-surface-700);
    }

        .filter-bar .filter-selector ul li:hover {
            background-color: var(--color-surface-300);
        }

/* =============================================
   DOCUMENTS
   ============================================= */

.document-list-empty {
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-400);
    color: var(--color-surface-600);
}

.document-item {
    background-color: var(--color-surface-200);
    color: var(--color-surface-700);
}

.data-tree .category-header {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

/* Online Forms */
.form-list .online-form-item {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

/* Client Information Hub */
.client-information-hub-widget .tree-root-toggle {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

    .client-information-hub-widget .tree-root-toggle:hover {
        background-color: var(--color-surface-400);
    }

.client-information-hub-widget .tree-children {
    border-left-color: var(--color-surface-400);
}

.client-information-hub-widget .tree-item-row::before {
    border-top-color: var(--color-surface-400);
}

.client-information-hub-widget .tree-item-row:hover {
    background-color: var(--color-surface-300);
}

.client-information-hub-widget .tree-item-row[data-bs-toggle]:not(.collapsed) {
    background-color: var(--color-surface-300);
}

/* =============================================
   CASE ACCESS WIDGET
   ============================================= */

.case-lock-user-access-tag {
    background-color: var(--color-surface-300);
    border-color: var(--color-surface-500);
    color: var(--color-surface-700);
}

/* =============================================
   ADMIN
   ============================================= */

.admin .table-hover tbody tr:hover td,
.admin .table-hover tbody tr:hover th {
    background-color: var(--color-surface-400);
    color: var(--color-surface-700);
}

.nav-tab-page {
    background-image: none;
    background-color: var(--color-surface-200);
    border-color: var(--color-surface-400);
}

.right-border-dashed {
    border-color: var(--color-surface-400);
}

.admin-list li a {
    color: var(--color-surface-700);
}

    .admin-list li a:hover {
        color: var(--color-white);
    }

.admin .validation-summary-errors {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

.admin .company-document-maps .document-list-container,
.admin .company-audit-list {
    background-color: var(--color-surface-200);
    color: var(--color-surface-700);
}

.admin .fee-structure-checkboxes {
    background-color: var(--color-surface-200);
}

.permission-item {
    background-color: var(--color-surface-300);
    color: var(--color-surface-700);
}

.company-office-add-edit .office-list li span:hover {
    background-color: var(--color-surface-400);
}

/* =============================================
   QUICK LINK CARDS
   ============================================= */

.link-card-container .card {
    background-color: var(--color-white);
}

.dashboard-link-card {
    mix-blend-mode: multiply;
}

/* =============================================
   DETAILS WIDGET
   ============================================= */

.details-widget {
    background-color: var(--color-surface-200);
    color: var(--color-surface-700);
}

    .details-widget .edit-icon,
    .details-widget .save-icon {
        color: var(--color-surface-700);
    }

.case-handler-assignment a:not(.edit-icon):not(.save-icon):not(.cancel-icon) {
    color: var(--color-surface-700);
}

    .case-handler-assignment a:not(.edit-icon):not(.save-icon):not(.cancel-icon):hover {
        color: var(--color-white);
    }

.case-risks .explanation-container {
    background-color: var(--color-surface-300);
}

.system-config .details-widget {
    border-color: var(--color-surface-400);
}

.milestone-widget .milestone:hover {
    background-color: var(--color-surface-300);
}

.user-details {
    background-color: var(--color-surface-200);
    color: var(--color-surface-700);
}

    .user-details input.text-box {
        background-color: var(--color-surface-300);
        border: solid 1px var(--color-surface-400);
        color: var(--color-surface-700);
    }

.activity-log-popup {
    background-color: var(--color-surface-200);
}

.activity-log-popup [data-list] {
    background-color: transparent;
}

.activity-log-popup .activity-log a {
    color: var(--color-surface-700);
}

.activity-log-popup .activity-log a:hover {
    background-color: var(--color-surface-300);
}

/* =============================================
   BUTTONS
   ============================================= */

.btn-primary {
    background-color: var(--color-btn-primary) !important;
    border-color: var(--color-btn-primary) !important;
}

    .btn-primary:hover {
        background-color: var(--color-btn-primary-hover) !important;
        border-color: var(--color-btn-primary-hover) !important;
    }

.btn-info {
    background-color: var(--color-btn-info) !important;
    border-color: var(--color-btn-info) !important;
    color: var(--color-white) !important;
}

    .btn-info:hover {
        background-color: var(--color-btn-info-hover) !important;
        border-color: var(--color-btn-info-hover) !important;
    }

.btn-success {
    background-color: var(--color-btn-success) !important;
    border-color: var(--color-btn-success) !important;
}

    .btn-success:hover {
        background-color: var(--color-btn-success-hover) !important;
        border-color: var(--color-btn-success-hover) !important;
    }

.btn-danger {
    background-color: var(--color-btn-danger) !important;
    border-color: var(--color-btn-danger) !important;
}

    .btn-danger:hover {
        background-color: var(--color-btn-danger-hover) !important;
        border-color: var(--color-btn-danger-hover) !important;
    }

.btn-warning {
    background-color: var(--color-btn-warning) !important;
    border-color: var(--color-btn-warning) !important;
    color: var(--color-white) !important;
}

    .btn-warning:hover {
        background-color: var(--color-btn-warning-hover) !important;
        border-color: var(--color-btn-warning-hover) !important;
        color: var(--color-white) !important;
    }

/* =============================================
   DASHBOARD WIDGETS
   ============================================= */

.card-widget {
    background-color: var(--color-surface-200);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

    .card-widget h6 {
        color: var(--color-surface-700);
    }

    .card-widget .text span {
        color: var(--color-surface-500);
    }

/* =============================================
   STATISTICS / CHARTS
   ============================================= */

.customer-sign-in-chart,
.card-payments-by-day-chart {
    background-color: var(--color-surface-200);
}

.leaderboard-container {
    background-color: var(--color-surface-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.leaderboard-title {
    color: var(--color-surface-700);
}

.leaderboard-subtitle {
    color: var(--color-surface-500);
}

.company-name {
    color: var(--color-surface-600);
}

.case-count {
    color: var(--color-surface-500);
}