label {
    color:black;
}
.card-block {
    min-width: 300px;
}
.card-dash {
    /*min-width: 275px;*/
    min-height: 211px;
}
.table-dash {
    min-width: 1008px;
    height: auto;
}
.text-25 {
    max-width: 25px;
    min-width: 25px;
    width: 25px !important;
}
.text-50 {
    max-width: 50px;
    min-width: 50px;
    width: 50px;
}
.text-75 {
    width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-100 {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-125 {
    width: 125px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-150 {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.text-175 {
    width: 175px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*.text-150:hover,*/
/*.text-75:hover, .text-100:hover,*/
/*.text-125:hover, .text-175:hover, */
.ellipsis:hover
{
    width: auto;
    cursor: pointer;
    text-overflow: unset;
}
.text-red {
    color: #882132 !important;
    font-size: 13px;
    font-weight: bolder;
    /*font-family: Calibri, 'Noto Sans', "Open Sans" ,"Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    text-transform: uppercase;
}
.text-green {
    color: #057a18 !important;
    font-size: 13px;
    font-weight: bolder;
    /*font-family: Calibri, 'Noto Sans', "Open Sans" ,"Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    text-transform: uppercase;
}
.text-blue {
    color: #2D3083 !important;
    font-size: 13px;
    font-weight: bolder;
    /*font-family: Calibri, 'Noto Sans', "Open Sans" ,"Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    text-transform: uppercase;
}
.sidebar .sidebar-body .nav .nav-item .nav-link .link-title {
    font-size: 10pt !important;
}
th{
    font-weight: 400;
    font-size: 10pt;
    color: black !important;
}
select.custom-select {
    border: none;
    border-bottom: 1px solid #080000 !important;
    border-radius: 0px;
    margin-top: 8px; /* material design style */
}
.link-icon {
    color: #96BCE8 !important;
}
.active .link-icon {
    color: #327ED7 !important;  
}
.green-tab-header {
    background-color: #BFEEB7FF;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* ============================================================
   Mobile-responsive dashboard & transaction summary.
   Kept in this stylesheet (not inside the Blade views) because those
   views are rendered as Vue templates, which strip inline <style> tags.
   All selectors are scoped to .dashboard-general / .ts-wrap so nothing
   else on the site is affected.
   ============================================================ */

/* Chart wrappers: responsive on mobile, but pinned to their ORIGINAL fixed
   px on desktop so the desktop layout/size stays exactly the same. */
.dashboard-general .chart-wrap { width: 100%; }
@media (min-width: 576px) {
    .dashboard-general .cw-450 { width: 450px; }
    .dashboard-general .cw-320 { width: 320px; }
    .dashboard-general .cw-300 { width: 300px; }
}

.dashboard-general .card-body img,
.dashboard-general .card-body table { max-width: 100%; height: auto; }

@media (max-width: 575.98px) {
    .dashboard-general { padding-left: 10px !important; padding-right: 10px !important; }
    .dashboard-general .row { margin-left: -6px; margin-right: -6px; margin-bottom: 1rem !important; }
    .dashboard-general .col-6 { padding-left: 6px; padding-right: 6px; }

    /* Stat cards -> slim compact vertical KPI tiles (icon on top) */
    .dashboard-general .col-6 .card { border-radius: 10px; border-left-width: 4px !important; }
    .dashboard-general .col-6 .card-body {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 10px 9px;
        overflow: visible;
    }
    .dashboard-general .col-6 .card-body > div:not(.rounded-circle) { width: 100%; min-width: 0; }
    .dashboard-general .col-6 .card-body .rounded-circle {
        width: 28px !important; height: 28px !important;
        font-size: .85rem !important; margin-right: 0 !important; margin-bottom: 5px;
    }
    .dashboard-general .col-6 .card-body .font-weight-bold[style*="rem"] {
        font-size: 1.15rem !important; margin-top: 1px; margin-bottom: 2px; word-break: break-word;
    }
    .dashboard-general .col-6 .card-body .text-uppercase {
        font-size: .52rem !important; letter-spacing: .25px !important;
        white-space: normal; line-height: 1.15;
    }
    .dashboard-general .col-6 .card-body .text-muted[style*=".72rem"] {
        font-size: .54rem !important; line-height: 1.2;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Pie charts: 2 per row on mobile instead of one big one */
    .dashboard-general .pie-row > [class*="col-"] {
        flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px;
    }
    .dashboard-general .pie-row .card-header .font-weight-bold { font-size: .72rem !important; }
    .dashboard-general .pie-row .card-header .text-muted { font-size: .6rem !important; }
    .dashboard-general .pie-row .card-body { padding: 6px !important; }

    /* Tighter chart cards on mobile */
    .dashboard-general .card-header .font-weight-bold { font-size: .8rem !important; }
    .dashboard-general .card-header { padding-left: 14px; padding-right: 14px; }
    .dashboard-general .card-body { padding-left: 10px; padding-right: 10px; }
}

/* Transaction summary page */
@media (max-width: 575.98px) {
    .ts-wrap { padding-left: 6px !important; padding-right: 6px !important; }
    /* Header: stack */
    .ts-wrap .d-flex.justify-content-between { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; margin-bottom: 8px !important; }
    .ts-wrap .text-muted[style*=".78rem"] { font-size: .62rem !important; }
    /* Filter: 2-col grid */
    .ts-wrap form .d-flex.flex-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .ts-wrap form .d-flex.flex-wrap > div { width: 100% !important; }
    /* Tombol Filter: satu baris penuh sendiri agar seimbang */
    .ts-wrap form .d-flex.flex-wrap > div:last-child { grid-column: 1 / -1 !important; }
    .ts-wrap form label { font-size: .5rem !important; margin-bottom: 2px !important; letter-spacing: .3px !important; }
    .ts-wrap form select,
    .ts-wrap form .btn { width: 100% !important; min-width: 0 !important; font-size: .62rem !important; height: 32px !important; padding: 2px 6px !important; border-radius: 6px !important; }
    .ts-wrap form .btn { height: 32px !important; padding: 4px 10px !important; font-size: .62rem !important; }
    /* Stat cards: 2-per-row compact */
    .ts-wrap .row.mb-4 > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 3px !important; padding-right: 3px !important; margin-bottom: 6px !important; }
    .ts-wrap .row.mb-4 .card { border-radius: 10px !important; }
    .ts-wrap .row.mb-4 .card-body { gap: 8px !important; padding: 10px 8px !important; }
    .ts-wrap .row.mb-4 .card-body > [style*="width:46px"] { width: 32px !important; height: 32px !important; border-radius: 8px !important; flex: 0 0 32px !important; }
    .ts-wrap .row.mb-4 .card-body i { font-size: .9rem !important; }
    .ts-wrap .row.mb-4 .card-body .text-uppercase {
        font-size: .5rem !important; letter-spacing: 0 !important;
        white-space: normal !important; word-break: normal !important;
        overflow-wrap: normal !important; hyphens: none !important;
    }
    .ts-wrap .row.mb-4 .card-body .font-weight-bold { font-size: 1rem !important; line-height: 1.1 !important; }
    .ts-wrap .row.mb-4 .card-body .font-weight-bold sup { font-size: .55rem !important; }
    .ts-wrap .row.mb-4 .card-body .text-muted[style*=".66rem"] { font-size: .48rem !important; line-height: 1.15 !important; }
    /* Table: compact scrollable */
    .ts-wrap .card-header { padding: 8px 10px 4px !important; }
    .ts-wrap .card-header .font-weight-bold { font-size: .68rem !important; }
    .ts-wrap .card-header .text-muted { font-size: .55rem !important; }
    .ts-wrap .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .ts-wrap table { font-size: .6rem !important; min-width: 560px !important; }
    .ts-wrap table th { font-size: .52rem !important; padding: 4px 3px !important; letter-spacing: .2px !important; }
    .ts-wrap table td { padding: 4px 3px !important; font-size: .58rem !important; }
    .ts-wrap thead tr + tr th { font-size: .48rem !important; padding: 2px 2px !important; }
    /* Keep the date/label (kolom pertama) visible while scrolling the table */
    .ts-wrap table tbody td:first-child,
    .ts-wrap table tfoot td:first-child,
    .ts-wrap table thead tr:first-child th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 1px 0 0 #eceef5;
    }
    .ts-wrap table thead tr:first-child th:first-child,
    .ts-wrap table tfoot td:first-child { background: #f8f9fd; z-index: 3; }
}

/* Annual business report (braincode) page */
@media (max-width: 575.98px) {
    .br-wrap { padding-left: 6px !important; padding-right: 6px !important; }

    /* Filter form: full-width stacking */
    .br-wrap form.d-flex.flex-wrap { flex-direction: column !important; gap: 6px !important; }
    .br-wrap form.d-flex.flex-wrap > div { width: 100% !important; }
    .br-wrap form label { font-size: .5rem !important; margin-bottom: 2px !important; letter-spacing: .3px !important; }
    .br-wrap form select { width: 100% !important; min-width: 0 !important; font-size: .62rem !important; height: 32px !important; border-radius: 6px !important; }
    .br-wrap form .btn { width: 100% !important; font-size: .62rem !important; height: 32px !important; padding: 4px 10px !important; border-radius: 6px !important; }

    /* Stat cards: stack vertically on mobile */
    .br-wrap .row.mb-4 > [class*="col-md-4"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 3px !important; padding-right: 3px !important; margin-bottom: 8px !important; }
    .br-wrap .row.mb-4 .card { border-radius: 10px !important; }
    .br-wrap .row.mb-4 .card-body { gap: 10px !important; padding: 12px 10px !important; }
    .br-wrap .row.mb-4 .card-body .rounded-circle { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
    .br-wrap .row.mb-4 .card-body .text-uppercase { font-size: .56rem !important; letter-spacing: .3px !important; }
    .br-wrap .row.mb-4 .card-body .font-weight-bold[style*="1.9rem"] { font-size: 1.2rem !important; }
    .br-wrap .row.mb-4 .card-body .font-weight-bold[style*="1.6rem"] { font-size: 1.05rem !important; }
    .br-wrap .row.mb-4 .card-body .font-weight-bold[style*="1.8rem"] { font-size: 1.15rem !important; }
    .br-wrap .row.mb-4 .card-body .text-muted[style*=".72rem"] { font-size: .56rem !important; line-height: 1.2 !important; }

    /* 2-column layouts: stack on mobile */
    .br-wrap .row.mb-4 > [class*="col-lg-6"],
    .br-wrap .row.mb-4 > [class*="col-md-6"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 12px !important; }

    /* Card headers: compact */
    .br-wrap .card-header { padding: 10px 12px 6px !important; }
    .br-wrap .card-header .font-weight-bold { font-size: .72rem !important; }
    .br-wrap .card-header .text-muted { font-size: .58rem !important; }

    /* Card body: compact */
    .br-wrap .card-body { padding: 10px !important; }

    /* Table: compact scrollable — semua table */
    .br-wrap .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .br-wrap table.table-sm { font-size: .6rem !important; }
    .br-wrap table.table-sm th { font-size: .52rem !important; padding: 3px 3px !important; white-space: nowrap; }
    .br-wrap table.table-sm td { padding: 3px 4px !important; font-size: .56rem !important; }

    /* Annual Summary table: override fixed layout agar kolom mengecil otomatis */
    .br-wrap table[style*="table-layout: fixed"] { table-layout: auto !important; }
    .br-wrap table[style*="table-layout: fixed"] th[style*="width"] { width: auto !important; }
    .br-wrap table[style*="table-layout: fixed"] th[style*="230px"] { width: auto !important; min-width: 80px; }
    .br-wrap table[style*="table-layout: fixed"] td,
    .br-wrap table[style*="table-layout: fixed"] th { font-size: .50rem !important; padding: 2px 3px !important; }
    .br-wrap table[style*="table-layout: fixed"] thead th { font-size: .46rem !important; letter-spacing: 0 !important; }

    /* Sticky first column on the wide annual summary table */
    .br-wrap .table-responsive table thead tr:first-child th:first-child,
    .br-wrap .table-responsive table tbody td:first-child,
    .br-wrap .table-responsive table tfoot td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 1px 0 0 #dee2e6;
    }
    .br-wrap .table-responsive table thead tr:first-child th:first-child,
    .br-wrap .table-responsive table tfoot td:first-child { background: #343a40; z-index: 3; }

    /* Export buttons: full-width on mobile */
    .br-wrap .card-header a.btn.btn-sm { font-size: .62rem !important; padding: 4px 10px !important; }

    /* Apexchart donut: center on mobile */
    .br-wrap .d-flex.justify-content-center apexchart { max-width: 220px; margin: 0 auto; }

    /* Active account stats row: keep 3 cols compact */
    .br-wrap .row.text-center.mt-2 .col-4 .font-weight-bold { font-size: .85rem !important; }
    .br-wrap .row.text-center.mt-2 .col-4 .text-muted { font-size: .55rem !important; }

    /* Server-rendered chart images/tables: responsive */
    .br-wrap .card-body img { max-width: 100% !important; height: auto !important; }
    .br-wrap .card-body table { max-width: 100% !important; }

    /* Chart wrapper: full width on mobile */
    .br-wrap .chart-wrap { max-width: 100% !important; }
    .br-wrap .chart-wrap img,
    .br-wrap .chart-wrap svg { max-width: 100% !important; height: auto !important; }
}