@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}


body {
    background-color: #f9fafb;
    margin: 0;
    font-family: "Nunito", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f3f3f9;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

select.form-select.is-invalid,
.was-validated select.form-select:invalid {
    background-repeat: no-repeat !important;
}

.light.btn-blue {
    background-color: #3b4cb81a;
    background-color: #3b4cb81a;
    border-color: #3b4cb81a;
    border-color: #3b4cb81a;
    transition: all 0.2s;
}

.house-bx {
    background: #282c4b;
}

/* Card */
.card {
    box-shadow: 0 0.75rem 1.5rem #12263f08;
    margin-bottom: 24px;
    border: 0;
    border-radius: .25rem !important;
    box-shadow: rgb(17 17 26 / 4%) 0px 4px 16px, rgb(235 235 255 / 5%) 0px 8px 32px;
    padding: 20px;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(0.25rem);
    border-top-right-radius: calc(0.25rem);
}

.card-body {
    color: var(--bs-card-color);
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 7px;

}

.big-title {
    font-size: 20px;
}

.shadow {
    box-shadow: 0 16px 26px -10px rgb(0 0 0 / 2%),
        0 4px 25px 0px rgba(0, 0, 0, 0.12),
        0 8px 10px -5px rgba(63, 106, 216, 0.2);
}

.btn {
    box-shadow: 0 16px 26px -10px rgb(0 0 0 / 2%),
        0 4px 25px 0px rgba(0, 0, 0, 0.12),
        0 8px 10px -5px rgba(63, 106, 216, 0.2);
}

.dropzone-manual {
    min-height: 150px;
    border: 1px dashed #ced4da;
    background: -webkit-linear-gradient(to right, #ffffff, #abbaab);
    background: linear-gradient(to right, #f7f7fa, #f2f2fa);
    padding: 20px 20px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.dropzone-manual .dz-message {
    font-weight: 400;
}

/* =============================================
   REUSABLE: Hero Header Card
   ============================================= */
.hero-header {
    background: linear-gradient(135deg, #556ee6 0%, #3b4cb8 50%, #2a3a9e 100%);
    background: #152331;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #000000, #152331);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #000000, #152331);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    border-radius: 16px;
    padding: 28px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.hero-header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.hero-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

.hero-header .hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.hero-header .hero-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0;
}

.hero-header .hero-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-badge-success {
    background: rgba(52, 195, 143, 0.25);
    color: #34c38f;
}

.hero-badge-warning {
    background: rgba(255, 195, 0, 0.25);
    color: #ffc300;
}

.hero-badge-info {
    background: rgba(80, 165, 241, 0.25);
    color: #50a5f1;
}

.hero-badge-danger {
    background: rgba(244, 106, 106, 0.25);
    color: #f46a6a;
}

/* =============================================
   REUSABLE: Glass Stat Item
   A semi-transparent stat row with icon
   ============================================= */

.glass-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.glass-stat-item:last-child {
    border-bottom: none;
}

.glass-stat-item:hover {
    background: #f8f9fe;
}

.glass-stat-item .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-icon-primary {
    background: rgba(85, 110, 230, 0.12);
    color: #556ee6;
}

.stat-icon-success {
    background: rgba(52, 195, 143, 0.12);
    color: #34c38f;
}

.stat-icon-warning {
    background: rgba(255, 195, 0, 0.12);
    color: #e5a800;
}

.stat-icon-danger {
    background: rgba(244, 106, 106, 0.12);
    color: #f46a6a;
}

.stat-icon-info {
    background: rgba(80, 165, 241, 0.12);
    color: #50a5f1;
}

.glass-stat-item .stat-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #343a40;
    margin-bottom: 2px;
}

.glass-stat-item .stat-sublabel {
    font-size: 0.78rem;
    color: #74788d;
    margin-bottom: 0;
}

.glass-stat-item .stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #556ee6;
    white-space: nowrap;
}

/* =============================================
   REUSABLE: Glass Card wrapper
   ============================================= */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    /* box-shadow: 0 15px 45px rgba(31, 38, 135, 0.08); */
    box-shadow: 0 15px 45px rgba(102, 51, 255, 0.1);
    overflow: hidden;
}

/* =============================================
   REUSABLE: KPI Card (standalone stat card)
   ============================================= */
.kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.kpi-icon-danger {
    background: rgba(244, 106, 106, 0.12);
    color: #f46a6a;
}

.kpi-icon-warning {
    background: rgba(255, 195, 0, 0.12);
    color: #e5a800;
}

.kpi-icon-success {
    background: rgba(52, 195, 143, 0.12);
    color: #34c38f;
}

.kpi-icon-primary {
    background: rgba(85, 110, 230, 0.12);
    color: #556ee6;
}

.kpi-icon-info {
    background: rgba(80, 165, 241, 0.12);
    color: #50a5f1;
}

.kpi-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #74788d;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1.1;
    margin-bottom: 8px;
}

.kpi-percent {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kpi-percent-danger {
    background: rgba(244, 106, 106, 0.12);
    color: #f46a6a;
}

.kpi-percent-warning {
    background: rgba(255, 195, 0, 0.12);
    color: #e5a800;
}

.kpi-percent-success {
    background: rgba(52, 195, 143, 0.12);
    color: #34c38f;
}

.kpi-percent-primary {
    background: rgba(85, 110, 230, 0.12);
    color: #556ee6;
}

.badge {
    font-weight: 600;
    font-size: .82em;
}



/* =============================================
   REUSABLE: Info Stat Card (project-style card)
   ============================================= */
.info-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.info-stat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.info-stat-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #74788d;
    margin-bottom: 6px;
    line-height: 1.3;
}

.info-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1.1;
}

.info-stat-value-sm {
    font-size: 1.1rem;
}

.info-stat-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.info-stat-icon-purple {
    background: #7c3aed;
    color: #fff;
}

.info-stat-icon-cyan {
    background: #06b6d4;
    color: #fff;
}

.info-stat-icon-green {
    background: #22c55e;
    color: #fff;
}

.info-stat-icon-orange {
    background: #f59e0b;
    color: #fff;
}

.info-stat-footer {
    margin-top: 8px;
}

.info-stat-sublabel {
    font-size: 0.78rem;
    color: #74788d;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =============================================
   REUSABLE: Donut Chart Card
   ============================================= */


.donut-chart-wrapper {
    max-width: 220px;
    margin: 0 auto;
    position: relative;
}

.donut-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}



/* =============================================
   Stats Section — Equal Height Columns
   ============================================= */
.statsSection {
    align-items: stretch;
}

.statsSection>[class*="col"] {
    display: flex;
    flex-direction: column;
}

.statsSection>[class*="col"]>.glass-card,
.statsSection>[class*="col"]>.donut-chart-card,
.statsSection>[class*="col"]>.row,
.statsSection>[class*="col"]>.hero-header,
.statsSection>[class*="col"]>.card {
    flex: 1;
}

.statsSection>[class*="col"]>.glass-card:last-child {
    flex: 1;
    /* margin-bottom: 0 !important; */
}

/* =============================================
   Stat Banner + Stat Rows (Screenshot design)
   ============================================= */
.card-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #fff;
    box-shadow: 0 5px 34px rgb(118 124 133 / 27%);
    color: var(--primary);
}


.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: linear-gradient(to right, var(--gradient2), var(--gradient1));
    color: var(--primary);
    font-weight: 500;


    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgb(0 0 0 / 17%), inset 0 1px 0 rgb(255 255 255 / 8%), inset 0 -1px 0 rgb(255 255 255 / 47%), inset 0 0 20px 10px rgb(252 252 252 / 72%);
    position: relative;
    overflow: hidden;
    font-weight: 700;
}

.nav-link {
    color: var(--bs-card-color);
}

.nav-underline .nav-link.active,
.nav-underline .show>.nav-link {
    font-weight: 700;
    color: var(--primary);
    border-bottom: 0.125rem solid transparent;
    border-bottom-color: var(--primary);
}

.border-l-success {
    border-left: 2px solid #67b173 !important;
}

.border-l-danger {
    border-left: 2px solid #fd6161 !important;
}

.border-l-info {
    border-left: 2px solid #7588de !important;
}

.border-dark {
    border-left: 1px solid #c1c1c1 !important
}

/* Chat styles */
.comment-bubble {
    background: -webkit-linear-gradient(to right, #ffffff, #abbaab);
    background: linear-gradient(to right, #f7f7fa, #f2f2fa);
    border-radius: 12px;
    padding: 10px 15px;
    display: block;
    width: 100%;
}

.chat-input-container {
    padding: 10px 0;
    margin-top: 15px;
}



.chat-input-wrapper .form-control {
    box-shadow: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}


.chat-send-btn:hover {
    color: #4f46e5;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
}



.circle-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background: var(--bs-light);
    border-radius: 4.8px;
    font-weight: 600;
    flex-shrink: 0;
    height: 64px;
    width: 64px;
    border-radius: 50% !important;
}

.circle-icon.icon-xs {
    height: 38px;
    width: 38px;
    font-size: 16px;
}

.circle-icon.border {
    outline: 1px solid;
    outline-offset: 3px;
}

.gradient-primary,
.badge-warning {
    outline-color: var(--bs-primary);
    /* background: linear-gradient(-45deg, rgba(244, 208, 120, 0), rgba(var(--primary-rgb), 0.4)) !important;
    color: rgba(var(--primary-rgb), 1) !important; */

    background: #F2994A;
    background: linear-gradient(to right, #ffe3cb00, #ffe38d91);
}

.gradient-success,
.badge-success {
    outline-color: #67b173;
    /* background: linear-gradient(-45deg, rgba(103, 177, 115, 0), rgba(103, 177, 115, 0.4)) !important;
    background: linear-gradient(-45deg, rgba(103, 177, 115, 0), rgba(103, 177, 115, 0.4)) !important;
    color: rgba(103, 177, 115, 1) !important; */

    background: linear-gradient(90deg, #cfecd0, #a0cea7, #d0f8d6);
    color: #0a731b;
}

.gradient-info {
    outline-color: #7588de;
    background: linear-gradient(-45deg, rgba(244, 208, 120, 0), rgba(117, 136, 222, 0.4)) !important;
    color: rgba(117, 136, 222, 1) !important;

}

.gradient-danger,
.badge-danger {
    outline-color: #FFA09B;
    /* background: linear-gradient(-45deg, rgba(253, 97, 97, 0), rgba(253, 97, 97, 0.4)) !important; */
    color: rgba(253, 97, 97, 1) !important;

    background-color: #FFEBCD;
    background-image: linear-gradient(315deg, #ffbdbd 0%, #ffe9e9 74%)
}

.gradient-purple {
    outline-color: #a47bc8;
    background: linear-gradient(-45deg, rgba(253, 97, 97, 0), rgba(164, 123, 200)) !important;
    color: rgba(164, 123, 200, 1) !important;
}

.gradient-secondary,
.badge-info {
    outline-color: #5288af;
    /* background: linear-gradient(-45deg, rgba(253, 97, 97, 0), rgba(82, 136, 175)) !important; */
    /* color: rgb(28 74 107) !important; */

    background: #0c3483;
    background: linear-gradient(to right,
            #86A7FC, #a2b6df, #6b8cce);
    color: #fff;
}

.gradient-dark {
    outline-color: #1a2333;
    background: linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(21, 35, 49, 0.4)) !important;
    color: rgba(26, 35, 51, 1) !important;
}

/* FullCalendar Gradient Support */
.fc-event {
    border: none !important;
    /* background: none !important; */
}

.event-success {
    background: linear-gradient(135deg, #10B981, #34D399) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}



.event-danger {
    background: linear-gradient(90deg, #d11930, #f9513f) !important;
}

.event-warning {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* FullCalendar modern layout */
.fc .fc-col-header-cell {
    padding: 12px 0 !important;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7b8a9b;
    background: #fff;
    border-bottom: 2px solid #e9ecef !important;
}

.fc .fc-daygrid-day {
    min-height: 110px;
}

.fc .fc-daygrid-day-number {
    font-size: 0.85rem;
    padding: 8px 10px;
    color: #495057;
    font-weight: 500;
}

.fc .fc-day-today {
    background: rgba(99, 132, 255, 0.05) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin: 4px;
}

.fc-event {
    border-radius: 6px !important;
    padding: 3px 6px !important;
    font-size: 0.78rem !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
}

.fc-daygrid-event-harness {
    margin-bottom: 3px !important;
}

.fc-daygrid-block-event .fc-event-main {
    padding: 4px 8px !important;
}

.fc .fc-scrollgrid {
    border-radius: 10px;
    overflow: hidden;
    border-color: #e9ecef !important;
}

.fc td,
.fc th {
    border-color: #e9ecef !important;
}

.fc .fc-button-primary {
    /* background: var(--bs-primary) !important; */
    border-color: var(--gradient2) !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    padding: 5px 14px !important;

    background: linear-gradient(to right, #0052D4, #4364F7, #6FB1FC);
    background: linear-gradient(to right, var(--gradient2), #576e86);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    /* background: color-mix(in srgb, #0052D4 80%, black); */
    background: linear-gradient(to right, var(--gradient2), #576e86);

}

.fc .fc-button-group {
    border-radius: 8px !important;
    gap: 6px;

}

.fc .fc-toolbar-title {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: #2d3748;
}

/* Treasury Accordion Styles */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clickable-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

.clickable-row[aria-expanded="true"] {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.clickable-row .toggle-icon {
    transition: transform 0.3s ease;
}

.clickable-row[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.details-row.collapse.show {
    border-top: none;
}

.details-row .card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
    margin-bottom: 0;
}

.trend-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    /* Pill style like capture */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.trend-up {
    background: rgba(16, 196, 105, 0.15);
    color: #10c469;
}

.trend-down {
    background: rgba(255, 91, 91, 0.15);
    color: #ff5b5b;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(to right, #eeeef3, #efeff4);
    color: var(--bs-card-color);
}