:root {
        --primary-blue: #1ca3c7;
        --primary-green: #8dc63f;
    }

    /* CARD */
    .admin-card {
        border-radius: 14px;
        overflow: hidden;
    }

    .admin-card-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
        color: #fff;
        padding: 14px 20px;
    }

    /* INPUT */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 0.15rem rgba(28,163,199,.2);
    }

    /* BUTTON */
    .btn-primary-gradient {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
        border: none;
        color: #fff;
    }

    .btn-primary-gradient:hover {
        opacity: .9;
    }

    /* SELECT2 */
    .select2-container .select2-selection--single {
        height: 38px;
        border-radius: 6px;
        border: 1px solid #ced4da;
        padding: 5px;
    }

    .select2-container--default .select2-selection--single:focus {
        border-color: var(--primary-blue);
    }


    /* =========================
    MOBILE CARD VIEW
    ========================= */
    @media (max-width: 768px) {

        #billTable thead {
            display: none;
        }

        #billTable,
        #billTable tbody,
        #billTable tr,
        #billTable td {
            display: block;
            width: 100%;
        }

        #billTable {
            border: 0;
        }

        #billTable tr {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 12px;
            margin-bottom: 12px;
            padding: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,.08);
        }

        #billTable td {
            border: 0 !important;
            padding: 6px 0;
        }

        #billTable td[data-label] {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #billTable td[data-label]::before {
            content: attr(data-label);
            font-weight: 600;
            color: #666;
        }

        .mobile-checkbox {
            text-align: center;
            margin-bottom: 10px;
        }

        .mobile-bill-card {
            padding: 10px;
        }

        .mobile-bill-card .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .mobile-bill-card .row-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .mobile-bill-card .fw-bold {
            border-top: 1px solid #ddd;
            padding-top: 8px;
        }
    }

    /* DETAIL TAGIHAN */
    .detail-toggle {
        cursor: pointer;
        font-weight: 400;
        /* color: var(--primary-blue); */
        margin-top: 8px;
        margin-bottom: 8px;
        user-select: none;
    }

    .detail-content {
        display: none;
        margin-left: 20px; /* menjorok ke kanan */
        padding-left: 12px;
        border-left: 3px solid #e9ecef;
    }

    .detail-content.show {
        display: block;
    }

    .detail-toggle i {
        transition: transform .2s ease;
    }

    .detail-toggle.open i {
        transform: rotate(90deg);
    }

    .detail-toggle {
        background: #f8f9fa;
        padding: 8px 12px;
        border-radius: 8px;
        margin: 10px 0;
    }


    .row-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 6px;
    }

    .row-item span:first-child {
        flex: 1;
    }

    .row-item span:last-child {
        text-align: right;
        white-space: nowrap;
    }