body {
    background-color: #ecf0f5 !important
}

.app-wrapper {
    background-color: #f9fafc !important;
}

.cq-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

    .cq-collapsible.open {
        max-height: 450px; /* Adjust based on content */
    }

.sidebar-wrapper a {
    color: var(--lte-sidebar-color) !important;
}

h1 {
    font-size: 30px !important;
    font-weight: 400 !important;
}

h2 {
    font-size: 30px !important;
    font-weight: 400 !important;
}

h3 {
    font-size: 24px !important;
    font-weight: 400 !important;
}

h4 {
    font-size: 18px !important;
    font-weight: 400 !important;
}

p {
    font-size: 14px !important;
}

a {
    color: var(--bs-primary);
}

span {
    font-size: 13px;
}

:root {
    --bs-primary: #3c8dbc !important;
    --bs-primary-rgb: 60, 141, 188 !important;
    --bs-secondary: #A5B0C3 !important;
    --bs-secondary-rgb: 165, 176, 195 !important;
    --bs-success: #29B117 !important;
    --bs-success-rgb: 41, 177, 23 !important;
    --bs-warning: #ff9500 !important;
    --bs-warning-rgb: 255, 149, 0 !important;
    --bs-danger: #F55B67 !important;
    --bs-danger-rgb: 245, 91, 103 !important;
    --bs-action: #3665F7 !important;
    --bs-action-rgb: 54, 101, 247 !important;
    --bs-dark: #212529 !important;
    --bs-dark-rgb: 33, 37, 41 !important;
    --bs-body-bg: #fff !important;
    --bs-body-color: #444444 !important;
    --bs-info: #0dcaf0 !important;
    --cq-ai: #dcd1fc;
    --mud-palette-primary: #3c8dbc !important;
    --rz-primary: #3c8dbc !important;
    --bs-secondary-border-subtle: #dee2e6 !important;
    --cq-success-hover-bg: #239e14;
    --bs-secondary-subtle: #F1F5F9;
    --bs-primary-subtle: #c8e0f4;
    --bs-primary-hover: #3782ad;
    --bs-success-subtle: #dcfce7;
    --bs-secondary-hover: #8f9bb1;
}

.table {
    --bs-table-striped-bg: rgb(249 249 249);
}

.pagination {
    --bs-pagination-color: var(--bs-secondary);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-color: white;
    --bs-pagination-active-border-color: var(--bs-primary);
}

.card-primary {
    --lte-card-variant-bg: var(--bs-primary) !important;
}

.card-success {
    --lte-card-variant-bg: var(--bs-success) !important;
}

.card-secondary {
    --lte-card-variant-bg: var(--bs-secondary) !important;
}

.card-warning {
    --lte-card-variant-bg: var(--bs-warning) !important;
}

.card-danger {
    --lte-card-variant-bg: var(--bs-danger) !important;
}

.card-body, .card-footer {
    background-color: white !important;
}

    .card-body input,
    .card-body select,
    .card-body textarea {
        background-color: white !important;
    }

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

.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2)
}

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

.btn-outline-primary {
    border: solid .3px #DEE2E6;
}

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

.btn-secondary:hover {
    background-color: var(--bs-secondary-hover) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2)
}

.btn.btn-outline-secondary {
    border: solid 0.5px !important;
    border-color: var(--bs-secondary-bg) !important;
}

.btn.btn-outline-secondary:hover {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg) !important;
}

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

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

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

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

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

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

.btn-light {
    background-color: var(--bs-body-bg) !important;
    border: solid .3px #DEE2E6 !important;
}

.btn.btn-sm.btn-light:hover {
    background-color: var(--bs-light-hover) !important;
    border-color: var(--bs-light-hover) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
}

.bg-light {
    background-color: var(--bs-body-bg) !important;
}

.bg-gray {
    background-color: gray;
}



.text-bg-primary {
    background-color: var(--bs-primary);
    color: white !important;
}

.text-bg-secondary {
    background-color: var(--bs-secondary);
    color: black !important;
}

.btn {
    border: none !important;
}

.badge.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    color: rgba(var(--bs-primary-rgb), 1) !important;
    font-weight: bold !important;
}

.badge.bg-success {
    background-color: rgba(var(--bs-success-rgb), 0.2) !important;
    color: rgba(var(--bs-success-rgb), 1) !important;
    font-weight: bold !important;
}

.badge.bg-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.2) !important;
    color: rgba(var(--bs-warning-rgb), 1) !important;
    font-weight: bold !important;
}

.badge.bg-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.2) !important;
    color: rgba(var(--bs-danger-rgb), 1) !important;
    font-weight: bold !important;
}

.badge.bg-gray {
    background-color: rgba(128, 128, 128, 0.2) !important;
    color: rgba(128, 128, 128, 1) !important;
    font-weight: bold !important;
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: inset 0 0 0 9999px rgb(249 249 249) !important;
}

td {
    font-size: 14px;
}

.card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-title {
    float: none;
    margin: 0;
    margin-bottom: var(--bs-card-title-spacer-y);
}

.card-header-fade {
    background: linear-gradient(to right, rgba(228, 240, 252, 0.2), white);
}

.card-header-fade-reverse {
    background: linear-gradient(to left, rgba(228, 240, 252, 0.2), white);
}

.form-control::placeholder {
    opacity: 0.5;
}

/* MudButton Filled Variant Custom Styling */
.mud-button-filled {
    background-color: var(--bs-primary) !important;
    color: var(--bs-secondary-subtle) !important;
    border-color: var(--bs-primary) !important;
    transition: all 0.2s ease-in-out !important;
}

.mud-button-filled:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    color: var(--bs-secondary-subtle) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.mud-button-filled:active {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.mud-button-filled:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-secondary-subtle) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.mud-button-filled:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #adb5bd !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* Ensure proper contrast for text */
.mud-button-filled .mud-button-label {
    color: inherit !important;
}

.mud-button-filled .mud-icon-root {
    color: inherit !important;
}

.mud-alert-filled-success {
    background-color: var(--bs-success) !important;
    color: white !important;
}

.mud-alert-filled-info {
    background-color: var(--bs-info) !important;
    color: white !important;
}

.mud-alert-filled-warning {
    background-color: var(--bs-warning) !important;
    color: white !important;
}

.mud-alert-filled-error {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

.cq-bg-fade {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #06b6d4 100%) !important;
}