body {
    font-family: system-ui, sans-serif;
}

#print-section {
    display: none;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 600px;
}

@media (max-width: 640px) {

    table th,
    table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    .table-participant-number,
    .table-description {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .button-group {
        flex-direction: column;
        gap: 8px;
    }

    .button-group button {
        width: 100%;
    }
}

@media (min-width: 401px) and (max-width: 768px) {
    .button-group {
        flex-direction: row;
        gap: 8px;
    }

    .button-group button {
        flex: 1 1 50%;
    }
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: #f3f4f6 !important;
        font-size: 11pt;
        color: black !important;
    }

    #results,
    .form,
    .table-title,
    .table-participant-number,
    .table-description {
        display: none !important;
    }

    #print-section {
        display: block !important;
        padding: 15px;
        background: #ffffff !important;
        border-radius: 8px;
        margin: 15px auto;
    }

    #print-section h2 {
        font-size: 14px;
        font-weight: bold;
        color: black !important;
        margin: 10px 0;
    }

    #print-section p {
        margin: 2px 0;
        font-size: 10px;
    }

    #print-section p strong {
        font-weight: bold;
    }

    #print-section table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        font-size: 10pt;
    }

    #print-section thead th {
        background-color: #ef4444 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: 1px solid #e5e7eb !important;
        padding: 4px 8px !important;
        text-align: left !important;
        font-size: 11px;
    }

    #print-section td {
        border: 1px solid #e5e7eb !important;
        padding: 3px 6px !important;
        text-align: left !important;
        background: #ffffff !important;
        font-size: 10px;
    }

    #print-section tbody tr:nth-child(even) td {
        background-color: #f3f4f6 !important;
    }

    #print-section .print-heading {
        margin-top: 0;
    }

    .form-instruction {
        font-size: 12px;
    }

    h1 {
        font-size: 14px;
    }

    .table-wrapper {
        overflow: visible !important;
    }

    .table-wrapper table {
        min-width: auto !important;
    }
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.flatpickr-prev-month:focus,
.flatpickr-next-month:focus,
.flatpickr-monthDropdown-months:focus,
.numInput:focus {
    outline: none !important;
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 1px #9ca3af !important;
}

input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f9fafb;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-ampm-field {
    background: transparent !important;
    color: #111827;
}