:root {
    --theme-bg: #f4f7fa;
    --theme-surface: #ffffff;
    --theme-text: #2d3436;
    --theme-text-muted: #a0aec0;
    --theme-primary: #4d7cfe;
    --theme-primary-dark: #6e45e2;
    --theme-gradient: linear-gradient(135deg, #4d7cfe 0%, #835fe9 100%);
    --theme-shadow-soft: 0 8px 30px rgba(77, 124, 254, 0.1);
    --theme-shadow-card: 0 10px 40px rgba(45, 52, 54, 0.06);
    --theme-radius-md: 0.9375rem;
    --theme-radius-lg: 1.25rem;
    --theme-radius-xl: 1.875rem;
    --badge-soft-success-bg: #e8faf3;
    --badge-soft-success-text: #1f9d6a;
    --badge-soft-warning-bg: #fff6e8;
    --badge-soft-warning-text: #e67e22;
    --badge-soft-danger-bg: #fdeef3;
    --badge-soft-danger-text: #e74c3c;
    --badge-soft-info-bg: #eef2ff;
    --badge-soft-info-text: #4d7cfe;
    --badge-soft-secondary-bg: #f3efff;
    --badge-soft-secondary-text: #926df8;
    --badge-soft-muted-bg: #f1f3f5;
    --badge-soft-muted-text: #8492a6;
    --bs-primary: #4d7cfe;
    --bs-primary-rgb: 77, 124, 254;
    --bs-body-bg: #f4f7fa;
    --bs-body-color: #2d3436;
}

body {
    font-family: "IBM Plex Sans Thai Looped", "Kanit", sans-serif;
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

#page-container {
    background-color: var(--theme-bg) !important;
}

#sidebar {
    background-color: var(--theme-surface) !important;
    box-shadow: 4px 0 24px rgba(45, 52, 54, 0.04);
}

#sidebar .content-header {
    background: var(--theme-gradient) !important;
    border-bottom: none;
}

#sidebar .content-header .text-dual,
#sidebar .content-header a {
    color: #fff !important;
}

#sidebar .content-header .text-primary {
    color: rgba(255, 255, 255, 0.95) !important;
}

#sidebar .sidebar-brand-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

#sidebar .nav-main-link {
    border-radius: var(--theme-radius-md);
    margin: 0.15rem 0.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#sidebar .nav-main-link .nav-main-link-icon {
    color: var(--theme-primary) !important;
}

#sidebar .nav-main-link:hover:not(.active) {
    background-color: rgba(77, 124, 254, 0.08);
    box-shadow: none;
    transform: none;
}

#sidebar .nav-main-link.active {
    background: var(--theme-gradient) !important;
    color: #fff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.38);
    transform: translateY(-5px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2px 6px rgba(0, 0, 0, 0.12),
        0 4px 0 #5568d4,
        0 12px 22px rgba(77, 124, 254, 0.34),
        0 20px 34px rgba(110, 69, 226, 0.2) !important;
}

#sidebar .nav-main-link.active:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2px 6px rgba(0, 0, 0, 0.12),
        0 5px 0 #5568d4,
        0 16px 26px rgba(77, 124, 254, 0.38),
        0 26px 40px rgba(110, 69, 226, 0.24) !important;
}

#sidebar .nav-main-link.active .nav-main-link-icon,
#sidebar .nav-main-link.active .nav-main-link-name {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#sidebar .nav-main-link.active .nav-main-link-icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

#sidebar .nav-main-heading {
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#sidebar .nav-main-submenu {
    padding-left: 0.25rem;
}

#sidebar .nav-main-submenu .nav-main-link {
    padding-left: 2.75rem;
    font-size: 0.875rem;
}

#sidebar .nav-main-submenu .nav-main-link.active {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2px 6px rgba(0, 0, 0, 0.12),
        0 3px 0 #5568d4,
        0 8px 16px rgba(77, 124, 254, 0.28),
        0 14px 24px rgba(110, 69, 226, 0.16) !important;
}

#sidebar .nav-main-link-submenu::after {
    color: var(--theme-text-muted);
}

#page-header {
    background-color: var(--theme-surface) !important;
    box-shadow: 0 4px 24px rgba(45, 52, 54, 0.04);
    border-bottom: none;
}

#page-header h1 {
    color: var(--theme-text);
    font-weight: 600;
}

.text-primary {
    color: var(--theme-primary) !important;
}

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

.block {
    background-color: var(--theme-surface) !important;
    border: none !important;
    border-radius: var(--theme-radius-lg) !important;
    box-shadow: var(--theme-shadow-card) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    
}

.block:not(.block-rounded):hover {
    box-shadow: 0 14px 45px rgba(45, 52, 54, 0.08) !important;
}

.block.block-rounded:not(.block-transparent):not(.budget-stat-card),
.block.block-fx-shadow {
    position: relative;
    overflow: visible !important;
    margin-bottom: 0.75rem;
    padding: 1.5rem;
    transform: translateY(-8px);
    border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 8px rgba(45, 52, 54, 0.05),
        0 4px 0 #e2e8f0,
        0 18px 30px rgba(45, 52, 54, 0.11),
        0 34px 50px rgba(77, 124, 254, 0.09) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.3s ease;
}




.block-header {
    border-bottom: 1px solid rgba(160, 174, 192, 0.15) !important;
    background-color: transparent !important;
}

.block-title {
    color: var(--theme-text);
    font-weight: 600;
}

.btn-primary {
    background: var(--theme-gradient) !important;
    border: none !important;
    border-radius: 50rem;
    box-shadow: var(--theme-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #5a86ff 0%, #7b55eb 100%) !important;
    border: none !important;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(77, 124, 254, 0.28);
}

.btn-primary:has(.fa-plus) {
    border-top: 1px solid rgba(255, 255, 255, 0.38) !important;
    transform: translateY(-3px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -2px 5px rgba(0, 0, 0, 0.12),
        0 3px 0 #5568d4,
        0 8px 18px rgba(77, 124, 254, 0.34),
        0 14px 26px rgba(110, 69, 226, 0.2) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-primary:has(.fa-plus):hover,
.btn-primary:has(.fa-plus):focus {
    transform: translateY(-5px) !important;
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 5px rgba(0, 0, 0, 0.12),
        0 4px 0 #5568d4,
        0 12px 22px rgba(77, 124, 254, 0.38),
        0 20px 32px rgba(110, 69, 226, 0.24) !important;
}

.btn-primary:has(.fa-plus) .fa-plus {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.btn-alt-primary {
    color: var(--theme-primary) !important;
    background-color: rgba(77, 124, 254, 0.1) !important;
    border: none !important;
    border-radius: 50rem;
}

.btn-alt-primary:hover {
    background-color: rgba(77, 124, 254, 0.16) !important;
    color: var(--theme-primary-dark) !important;
}

.btn-alt-success,
.btn-sm.btn-alt-success {
    color: var(--badge-soft-success-text) !important;
    background-color: rgba(31, 157, 106, 0.1) !important;
    border: none !important;
    border-radius: 50rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-alt-success:hover,
.btn-alt-success:focus,
.btn-sm.btn-alt-success:hover,
.btn-sm.btn-alt-success:focus {
    background-color: rgba(31, 157, 106, 0.16) !important;
    color: #178a5c !important;
    transform: translateY(-1px);
}

.btn-alt-secondary,
.btn-sm.btn-alt-secondary {
    border-radius: 50rem;
    background-color: var(--theme-bg) !important;
    border: 1px solid rgba(160, 174, 192, 0.25) !important;
    color: var(--theme-text) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ff7676 0%, #e74c3c 100%) !important;
    border: none !important;
    border-radius: 50rem;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, #ff8585 0%, #ef5a4a 100%) !important;
    border: none !important;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(231, 76, 60, 0.3);
}

.btn-alt-danger,
.btn-sm.btn-alt-danger {
    color: var(--badge-soft-danger-text) !important;
    background-color: rgba(231, 76, 60, 0.1) !important;
    border: none !important;
    border-radius: 50rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-alt-danger:hover,
.btn-alt-danger:focus,
.btn-sm.btn-alt-danger:hover,
.btn-sm.btn-alt-danger:focus {
    background-color: rgba(231, 76, 60, 0.16) !important;
    color: #c0392b !important;
    transform: translateY(-1px);
}

.form-control,
.form-select {
    border-radius: var(--theme-radius-md);
    border-color: rgba(160, 174, 192, 0.35);
    background-color: var(--theme-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.2rem rgba(77, 124, 254, 0.15);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(77, 124, 254, 0.03);
    --bs-table-hover-bg: rgba(77, 124, 254, 0.06);
}

.table > :not(caption) > * > * {
    border-bottom-color: rgba(160, 174, 192, 0.15);
}

.item-rounded-lg {
    border-radius: var(--theme-radius-md) !important;
    background: rgba(77, 124, 254, 0.08) !important;
}

.dropdown-menu {
    border: none;
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-card);
}

.header-user-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem 0.3rem 0.35rem;
    background: linear-gradient(135deg, #3d6cf0 0%, #5b4fcf 100%);
    border: none;
    border-radius: 50rem;
    color: #fff;
    box-shadow: 0 4px 14px rgba(77, 124, 254, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-user-menu__toggle::after {
    margin-left: 0.15rem;
}

.header-user-menu__toggle:hover,
.header-user-menu__toggle:focus,
.header-user-menu__toggle.show {
    background: linear-gradient(135deg, #3563e8 0%, #5245c4 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(77, 124, 254, 0.42);
    transform: translateY(-1px);
}

.header-user-menu__avatar,
.header-user-menu__profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    object-fit: cover;
}

.header-user-menu__avatar {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    font-size: 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.header-user-menu__name {
    font-size: 0.875rem;
    font-weight: 600;
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-menu__badge {
    padding: 0.1rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    color: #7a5b00;
    background: #ffd86b;
    border-radius: 50rem;
}

.header-user-menu__dropdown {
    width: 280px;
    overflow: hidden;
    border-radius: var(--theme-radius-lg);
    border: 1px solid rgba(160, 174, 192, 0.12);
    box-shadow: 0 18px 40px rgba(30, 35, 55, 0.18);
}

.header-user-menu__profile {
    position: relative;
    background-position: center;
    background-size: cover;
    background-color: #2d3436;
}

.header-user-menu__profile::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 24, 40, 0.35) 0%, rgba(20, 24, 40, 0.82) 100%);
    backdrop-filter: blur(2px);
}

.header-user-menu__profile-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.35rem 1rem 1.15rem;
    text-align: center;
}

.header-user-menu__profile-avatar {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.65rem;
    border-radius: 50%;
    font-size: 1.35rem;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    background: var(--theme-gradient);
}

.header-user-menu__profile-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.header-user-menu__profile-email {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    word-break: break-all;
}

.header-user-menu__list,
.header-user-menu__footer {
    background: #fff;
}

.header-user-menu__list {
    padding: 0.35rem 0;
}

.header-user-menu__footer {
    border-top: 1px solid rgba(160, 174, 192, 0.15);
}

.header-user-menu__footer form {
    margin: 0;
}

.header-user-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text);
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-user-menu__item:hover,
.header-user-menu__item:focus {
    color: var(--theme-primary);
    background: rgba(77, 124, 254, 0.06);
}

.header-user-menu__item i {
    font-size: 1rem;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.header-user-menu__item:hover i,
.header-user-menu__item:focus i {
    color: var(--theme-primary);
}

.header-user-menu__item--logout {
    color: var(--theme-text);
}

.header-user-menu__item--logout i {
    color: #f59e0b;
}

.header-user-menu__item--logout:hover,
.header-user-menu__item--logout:focus {
    color: var(--badge-soft-danger-text);
    background: rgba(231, 76, 60, 0.06);
}

.header-user-menu__item--logout:hover i,
.header-user-menu__item--logout:focus i {
    color: var(--badge-soft-danger-text);
}

#page-footer {
    background-color: transparent !important;
    color: var(--theme-text-muted);
}

.budget-stat-cards {
    padding-bottom: 1.25rem;
}

.budget-stat-cards__main > [class*="col"] {
    display: flex;
}

.budget-stat-cards__main > [class*="col"] > .budget-stat-card {
    width: 100%;
    flex: 1 1 auto;
}

.budget-stat-card__amount {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 600;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    line-height: 1.15;
}

.budget-stat-card {
    border: none !important;
    color: #fff;
    overflow: visible !important;
    position: relative;
    transform: translateY(-10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.38) !important;
}

.budget-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%);
    pointer-events: none;
    z-index: 1;
}

.budget-stat-card::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -14px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(45, 52, 54, 0.22) 0%, transparent 72%);
    filter: blur(6px);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.budget-stat-card:hover {
    transform: translateY(-16px) !important;
}

.budget-stat-card:hover::after {
    opacity: 0.75;
    transform: scale(0.92);
}

.budget-stat-card .block-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.budget-stat-card dt {
    color: rgba(255, 255, 255, 0.86) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.budget-stat-card dd {
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.budget-stat-card .item-rounded-lg {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.budget-stat-card .item-rounded-lg .fa {
    color: #fff !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.budget-stat-card--orange {
    background: linear-gradient(165deg, #ffc04d 0%, #f9b233 38%, #f4762d 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #d96524,
        0 18px 28px rgba(244, 118, 45, 0.38),
        0 32px 48px rgba(244, 118, 45, 0.22) !important;
}

.budget-stat-card--orange:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #d96524,
        0 24px 36px rgba(244, 118, 45, 0.42),
        0 40px 56px rgba(244, 118, 45, 0.26) !important;
}

.budget-stat-card--blue {
    background: linear-gradient(165deg, #6ed4ff 0%, #42c3fb 38%, #4481eb 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #356fd4,
        0 18px 28px rgba(68, 129, 235, 0.38),
        0 32px 48px rgba(68, 129, 235, 0.22) !important;
}

.budget-stat-card--blue:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #356fd4,
        0 24px 36px rgba(68, 129, 235, 0.42),
        0 40px 56px rgba(68, 129, 235, 0.26) !important;
}

.budget-stat-card--teal {
    background: linear-gradient(165deg, #8ae8ff 0%, #67e1fb 38%, #3a7bd5 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #2f6cbc,
        0 18px 28px rgba(58, 123, 213, 0.38),
        0 32px 48px rgba(58, 123, 213, 0.22) !important;
}

.budget-stat-card--teal:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #2f6cbc,
        0 24px 36px rgba(58, 123, 213, 0.42),
        0 40px 56px rgba(58, 123, 213, 0.26) !important;
}

.budget-stat-card--green {
    background: linear-gradient(165deg, #6ef0b0 0%, #42e695 38%, #3bb2b8 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #2fa3a8,
        0 18px 28px rgba(59, 178, 184, 0.38),
        0 32px 48px rgba(59, 178, 184, 0.22) !important;
}

.budget-stat-card--green:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #2fa3a8,
        0 24px 36px rgba(59, 178, 184, 0.42),
        0 40px 56px rgba(59, 178, 184, 0.26) !important;
}

.budget-mini-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.65rem;
    height: 100%;
    padding: 0.25rem 0;
}

@media (min-width: 1200px) {
    .budget-mini-stack {
        border-right: 1px solid rgba(132, 146, 166, 0.18);
        padding-right: 1.25rem;
    }
}

.budget-mini-card {
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.04);
    border-left: 3px solid transparent;
}

.budget-mini-card--indigo {
    border-left-color: #4c63d2;
}

.budget-mini-card--indigo .budget-mini-card__value {
    color: #4481eb;
}

.budget-mini-card--violet {
    border-left-color: #7c3aed;
}

.budget-mini-card--violet .budget-mini-card__value {
    color: #6d28d9;
}

.budget-mini-card__label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #8492a6;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.budget-mini-card__value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.budget-stat-card--indigo {
    background: linear-gradient(165deg, #8ba4ff 0%, #667eea 38%, #4c63d2 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #3f51b5,
        0 18px 28px rgba(76, 99, 210, 0.38),
        0 32px 48px rgba(76, 99, 210, 0.22) !important;
}

.budget-stat-card--indigo:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #3f51b5,
        0 24px 36px rgba(76, 99, 210, 0.42),
        0 40px 56px rgba(76, 99, 210, 0.26) !important;
}

.budget-stat-card--violet {
    background: linear-gradient(165deg, #c4b5fd 0%, #a78bfa 38%, #7c3aed 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 5px 0 #6d28d9,
        0 18px 28px rgba(124, 58, 237, 0.38),
        0 32px 48px rgba(124, 58, 237, 0.22) !important;
}

.budget-stat-card--violet:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1),
        0 7px 0 #6d28d9,
        0 24px 36px rgba(124, 58, 237, 0.42),
        0 40px 56px rgba(124, 58, 237, 0.26) !important;
}

.report-glass-page {
    position: relative;
    padding-top: 0.25rem;
}

.report-glass-page__subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--theme-text-muted);
    margin: 0 0 2rem;
    letter-spacing: 0.02em;
}

.report-glass-cards {
    padding-bottom: 2rem;
}

.report-glass-cards > [class*="col"] {
    display: flex;
}

.report-glass-cards > [class*="col"]:nth-child(1) .report-glass-card {
    animation: report-card-enter 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.report-glass-cards > [class*="col"]:nth-child(2) .report-glass-card {
    animation: report-card-enter 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 0.1s both;
}

.report-glass-cards > [class*="col"]:nth-child(3) .report-glass-card {
    animation: report-card-enter 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s both;
}

@keyframes report-card-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(-8px);
    }
}

@keyframes report-icon-float {
    0%, 100% { transform: translateY(-4px); }
    50% { transform: translateY(-10px); }
}

.report-glass-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 22rem;
    text-decoration: none;
    color: #fff;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(-8px);
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.4s ease;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
}

.report-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
}

.report-glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 1;
    pointer-events: none;
}

.report-glass-card__shine {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 68%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.report-glass-card__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

.report-glass-card__orb--1 {
    width: 8rem;
    height: 8rem;
    top: -2rem;
    right: -2rem;
    background: rgba(255, 255, 255, 0.35);
}

.report-glass-card__orb--2 {
    width: 6rem;
    height: 6rem;
    bottom: -1.5rem;
    left: -1rem;
    background: rgba(255, 255, 255, 0.2);
}

.report-glass-card--sky::before {
    background: linear-gradient(145deg, #6ed4ff 0%, #42c3fb 35%, #6196f1 65%, #4481eb 100%);
}

.report-glass-card--violet::before {
    background: linear-gradient(145deg, #c084fc 0%, #a78bfa 35%, #818cf8 65%, #6366f1 100%);
}

.report-glass-card--teal::before {
    background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 35%, #06b6d4 65%, #0ea5e9 100%);
}

.report-glass-card--emerald::before {
    background: linear-gradient(145deg, #34d399 0%, #10b981 35%, #14b8a6 65%, #06b6d4 100%);
}

.report-glass-card--sky:hover {
    box-shadow: 0 32px 64px rgba(68, 129, 235, 0.35);
}

.report-glass-card--violet:hover {
    box-shadow: 0 32px 64px rgba(99, 102, 241, 0.35);
}

.report-glass-card--teal:hover,
.report-glass-card--emerald:hover {
    box-shadow: 0 32px 64px rgba(20, 184, 166, 0.35);
}

.report-glass-card:hover {
    transform: translateY(-14px) scale(1.02);
    color: #fff;
}

.report-glass-card:hover .report-glass-card__orb--1 {
    transform: translate(-8px, 8px) scale(1.1);
    opacity: 0.6;
}

.report-glass-card:hover .report-glass-card__orb--2 {
    transform: translate(6px, -6px) scale(1.15);
    opacity: 0.55;
}

.report-glass-card__content {
    position: relative;
    z-index: 3;
    padding: 2.75rem 2rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.report-glass-card__eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    padding: 0.3rem 0.85rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.report-glass-card__icon {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1.75rem;
    border-radius: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
}

.report-glass-card__icon--image {
    width: 7rem;
    height: 7rem;
    margin-bottom: 1.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: report-icon-float 4s ease-in-out infinite;
}

.report-glass-card:hover .report-glass-card__icon--image {
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.08);
}

.report-glass-card__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.32));
    transition: filter 0.35s ease;
}

.report-glass-card:hover .report-glass-card__icon-img {
    filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.38));
}

.report-glass-card__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
    letter-spacing: -0.01em;
}

.report-glass-card__desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 auto;
    line-height: 1.6;
    max-width: 15rem;
}

.report-glass-card__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 1.75rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.report-glass-card:hover .report-glass-card__cta {
    background: rgba(255, 255, 255, 0.26);
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
}

.report-glass-card__cta .fa {
    transition: transform 0.3s ease;
}

.report-glass-card:hover .report-glass-card__cta .fa {
    transform: translateX(4px);
}

#page-header h1,
.block-title,
.nav-main-link-name {
    font-family: "IBM Plex Sans Thai Looped", "Kanit", sans-serif;
}

.badge:not(.badge-soft) {
    color: #fff;
}

#main-container .content {
    padding-top: 1.5rem;
}

.table td,
.table th {
    vertical-align: middle;
}

.report-receipt-link {
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease;
}

.report-receipt-link:hover {
    transform: scale(1.08);
}

.report-receipt-thumb {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid #e4e7ed;
    background: #fff;
}

.report-receipt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.35rem;
    border: 1px solid #e4e7ed;
    background: #f8f9fa;
    color: #8492a6;
    font-size: 1rem;
}

.report-receipt-icon--pdf {
    color: #4d7cfe;
    background: #e8f0ff;
    border-color: #c9d6ff;
    height: 1.8rem;
    width: 1.8rem;
   
  
}

.attachment-card {
    border: 1px solid #e4e7ed;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.attachment-card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e7ed;
    background: #f8f9fa;
}

.attachment-card-preview {
    background: #f1f3f5;
    min-height: 220px;
}

.attachment-preview-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: #fff;
}

.attachment-preview-pdf,
object.attachment-preview-pdf {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    background: #fff;
}

.attachment-preview-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 1.5rem;
}

.warranty-modal-preview .attachment-card-preview {
    min-height: 120px;
}

.warranty-modal-preview .attachment-preview-image {
    max-height: 180px;
}

.warranty-modal-preview .attachment-preview-pdf,
.warranty-modal-preview object.attachment-preview-pdf {
    height: 180px;
}

.warranty-modal-preview .attachment-preview-fallback {
    min-height: 120px;
    padding: 1rem;
}

.attachment-card-footer {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-top: 1px solid #e4e7ed;
}

/* .modal-content {
    padding: 1.5rem;
} */

#monthly-payable-table tbody tr.dashboard-row-paid > td {
    color: #6c757d;
}

#monthly-payable-table tbody tr.dashboard-row-paid > td a {
    color: #6c757d;
}

.dashboard-paid-toggle {
    line-height: 1;
}

.category-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

#expense-table_wrapper .dataTables_length,
#expense-table_wrapper .dataTables_filter,
#expense-table_wrapper .dataTables_info,
#expense-table_wrapper .dataTables_paginate {
    font-size: 0.75rem;
}

#expense-table_wrapper .dataTables_length select,
#expense-table_wrapper .dataTables_filter input {
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
}

#expense-table .badge.badge-sm {
    font-size: 0.6875rem;
    padding: 0.25rem 0.55rem;
}

#expense-table .btn-sm {
    font-size: 0.6875rem;
    padding: 0.15rem 0.35rem;
}

#expense-table tbody tr.expense-row-paid > td {
    background-color: rgba(77, 124, 254, 0.04);
}

#expense-table.table-hover tbody tr.expense-row-paid:hover > td {
    background-color: rgba(77, 124, 254, 0.08);
}

.page-link {
    border-radius: 50rem;
    border: none;
    margin: 0 0.15rem;
    color: var(--theme-text);
}

.page-item.active .page-link {
    background: var(--theme-gradient);
    border: none;
    box-shadow: var(--theme-shadow-soft);
}

.alert {
    border: none;
    border-radius: var(--theme-radius-md);
}

.hero-static {
    background-color: var(--theme-bg);
}

body.auth-page #page-container.auth-layout {
    background: transparent !important;
}

body.auth-page #main-container {
    padding: 0;
}

.auth-scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.auth-scene__bg {
    position: absolute;
    inset: 0;
    background-position: top;
    background-size: cover;
    transform: scale(1.04);
    animation: auth-bg-zoom 18s ease-in-out infinite alternate;
}

.auth-scene__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(77, 124, 254, 0.35) 0%, transparent 60%),
        linear-gradient(135deg, rgba(30, 35, 55, 0.72) 0%, rgba(77, 124, 254, 0.45) 50%, rgba(110, 69, 226, 0.55) 100%);
}

.auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 980px;
    min-height: 560px;
    border-radius: var(--theme-radius-xl);
    overflow: hidden;
    box-shadow:
        0 25px 80px rgba(30, 35, 55, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    animation: auth-fade-up 0.6s ease-out both;
}

.auth-card {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 992px) {
    .auth-card {
        flex: 0 0 44%;
        padding: 3rem 2.75rem;
    }
}

.auth-card__brand {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-card__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(77, 124, 254, 0.12) 0%, rgba(131, 95, 233, 0.18) 100%);
    box-shadow: 0 8px 24px rgba(77, 124, 254, 0.2);
}

.auth-card__logo {
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(77, 124, 254, 0.3));
}

.auth-card__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}

.auth-card__subtitle {
    font-size: 0.9rem;
    color: var(--theme-text-muted);
    margin: 0;
}

.auth-form {
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
}

.auth-alert {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.auth-field {
    margin-bottom: 1.25rem;
}

.auth-field__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 0.4rem;
}

.auth-field__control {
    position: relative;
}

.auth-field__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.auth-input {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--theme-text);
    background: #f8faff;
    border: 1.5px solid #e8ecf4;
    border-radius: var(--theme-radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-input::placeholder {
    color: #b8c2d0;
}

.auth-input:hover {
    border-color: #d0d9ea;
    background: #fff;
}

.auth-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(77, 124, 254, 0.12);
}

.auth-field__control:focus-within .auth-field__icon {
    color: var(--theme-primary);
}

.auth-field__control--password .auth-input {
    padding-right: 2.75rem;
}

.auth-field__toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--theme-text-muted);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.auth-field__toggle:hover,
.auth-field__toggle:focus {
    color: var(--theme-primary);
    background: rgba(77, 124, 254, 0.08);
    outline: none;
}

.auth-field__control:focus-within .auth-field__toggle {
    color: var(--theme-primary);
}

.auth-field__error {
    font-size: 0.8rem;
    color: var(--badge-soft-danger-text);
    margin-top: 0.35rem;
}

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--theme-gradient);
    border: none;
    border-radius: var(--theme-radius-md);
    box-shadow: 0 8px 24px rgba(77, 124, 254, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-submit:hover,
.auth-submit:focus {
    color: #fff;
    background: linear-gradient(135deg, #3d6cf0 0%, #7249d8 100%);
    box-shadow: 0 12px 32px rgba(77, 124, 254, 0.45);
    transform: translateY(-1px);
}

.auth-submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(77, 124, 254, 0.3);
}

.auth-submit i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.auth-submit:hover i {
    transform: translateX(3px);
}

.auth-card__footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin: 2rem 0 0;
}

.auth-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(
        160deg,
        rgba(86, 8, 230, 0.692) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-hero__content {
    max-width: 380px;
}

.auth-hero__badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50rem;
    backdrop-filter: blur(8px);
}

.auth-hero__headline {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 1rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.auth-hero__headline-accent {
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-hero__text {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1.75rem;
}

.auth-hero__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-hero__features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.auth-hero__features i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
}

@keyframes auth-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes auth-bg-zoom {
    from {
        transform: scale(2.54);
    }
    to {
        transform: scale(1.1);
    }
}

@media (max-width: 991.98px) {
    .auth-scene {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2.5rem;
    }

    .auth-shell {
        min-height: auto;
        border-radius: var(--theme-radius-lg);
    }

    .auth-card {
        padding: 2rem 1.5rem;
    }
}

.badge.badge-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.badge.badge-soft {
    display: inline-flex;
   
    align-items: center;
    gap: 0.35rem;
    width: auto;
    border-radius: 50rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.badge.badge-soft .fa {
    font-size: 0.85em;
}

.badge.badge-soft.badge-sm {
    padding: 0.25rem 0.7rem;
}

.badge.badge-soft-success {
    background-color: var(--badge-soft-success-bg);
    color: var(--badge-soft-success-text);
    border-color: color-mix(in srgb, var(--badge-soft-success-text) 18%, transparent);
}

.badge.badge-soft-warning {
    background-color: var(--badge-soft-warning-bg);
    color: var(--badge-soft-warning-text);
    border-color: color-mix(in srgb, var(--badge-soft-warning-text) 18%, transparent);
}

.badge.badge-soft-danger {
    background-color: var(--badge-soft-danger-bg);
    color: var(--badge-soft-danger-text);
    border-color: color-mix(in srgb, var(--badge-soft-danger-text) 18%, transparent);
}

.badge.badge-soft-info {
    background-color: var(--badge-soft-info-bg);
    color: var(--badge-soft-info-text);
    border-color: color-mix(in srgb, var(--badge-soft-info-text) 18%, transparent);
}

.badge.badge-soft-secondary {
    background-color: var(--badge-soft-secondary-bg);
    color: var(--badge-soft-secondary-text);
    border-color: color-mix(in srgb, var(--badge-soft-secondary-text) 18%, transparent);
}

.badge.badge-soft-muted {
    background-color: var(--badge-soft-muted-bg);
    color: var(--badge-soft-muted-text);
    border-color: color-mix(in srgb, var(--badge-soft-muted-text) 18%, transparent);
}

.badge.badge-soft-custom {
    background-color: color-mix(in srgb, var(--badge-color) 14%, white);
    color: var(--badge-color);
    border-color: color-mix(in srgb, var(--badge-color) 22%, transparent);
}