input[type="date"] {
        position: relative;
        width: 100%;
    }
    .input-group-text {
        cursor: pointer;
        background-color: #f8f9fa;
        border-left: 0;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
    input[type="date"]:focus {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }
    .party-a-container, .focal-person-container {
        border: 1px solid #ced4da;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .party-a-container .row, .focal-person-container .row {
        margin-bottom: 10px;
    }
    .party-a-select, .focal-person-select {
        margin-bottom: 10px;
    }
    #party_b_new_name_container, #deduct_tax_code_container {
        display: none;
    }

    /* ✅ Center & style form card */
    .form-card {
        width: 1200px;
        margin: auto; /* centers horizontally */
        background: #fff;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-bottom: 2%;
    }

    .form-header h1 {
        font-size: 1.8rem;
        font-weight: 600;
    }

    .form-header {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 25px 0 15px;
        border-bottom: 2px solid #dee2e6;
        padding-bottom: 5px;
        width: 1200px;
        margin: auto; /* centers horizontally */
    }

    /* Responsive styles for mobile and tablets */
    @media (max-width: 768px) {
        .container {
            padding: 0 15px;
        }

        .form-card {
            width: 100%;
            padding: 15px;
            margin-bottom: 5%;
        }

        .form-header {
            width: 100%;
            margin: 15px auto;
        }

        .form-header h1 {
            font-size: 1.5rem;
        }

        .section-header {
            font-size: 1rem;
        }

        .form-label {
            font-size: 0.9rem;
        }

        .form-control, .form-select, .btn {
            font-size: 0.9rem;
        }

        .party-a-container, .focal-person-container, .installment-container {
            padding: 10px;
        }

        .row.g-3 {
            margin-bottom: 0;
        }

        .row.g-3 > .col-12, .row.g-3 > .col-md-6, .row.g-3 > .col-md-4 {
            padding-bottom: 10px;
        }

        .btn-add-party-a, .btn-add-focal-person, .btn-add-installment, .btn-add-article {
            width: 100%;
            margin-top: 10px;
        }

        .btn-remove-party-a, .btn-remove-focal-person, .btn-remove-installment, .btn-remove-article {
            width: 100%;
            margin-top: 10px;
        }

        .input-group {
            flex-direction: column;
        }

        .input-group .form-control, .input-group .form-select, .input-group .input-group-text {
            width: 100%;
        }

        .input-group-text {
            margin-top: 5px;
            text-align: center;
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            right: 5px;
        }

        textarea {
            min-height: 100px;
        }
    }

    @media (max-width: 576px) {
        .form-header h1 {
            font-size: 1.3rem;
        }

        .form-label, .form-control, .form-select, .btn {
            font-size: 0.85rem;
        }

        .form-card {
            padding: 10px;
        }

        .party-a-container, .focal-person-container, .installment-container {
            padding: 8px;
        }

        .row.g-3 > .col-12, .row.g-3 > .col-md-6, .row.g-3 > .col-md-4 {
            padding-bottom: 8px;
        }

        .section-header {
            font-size: 0.95rem;
        }
    }

    @media (min-width: 769px) and (max-width: 992px) {
        .form-card {
            width: 90%;
            padding: 20px;
        }

        .form-header {
            width: 90%;
        }

        .form-header h1 {
            font-size: 1.6rem;
        }

        .form-control, .form-select, .btn {
            font-size: 0.95rem;
        }
    }
    #employee-suggestions .dropdown-item {
    border-bottom: 1px solid #eee;
    white-space: normal;
}
#employee-suggestions .dropdown-item:hover {
    background-color: #f8f9fa;
}
#employee-suggestions .dropdown-item small {
    font-size: 0.85em;
}