html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body > main.main-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.form-card.custom-height {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-height: 88%;
}

.form-card.custom-width {
    max-width: 85vw; /* max width = 95% of screen width */
    width: 100%;
}

.scrollable-table {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;}

.btn-disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    cursor: not-allowed;
    color: #666 !important;
    pointer-events: none;
}
#newVC, #vcComment {
    background-color: #f0f8ff !important;
}


#vcComment:focus, #newVC:focus {
    background-color: lightcyan !important;
}

.vc-history-table {
    width: 45%;
    margin: 0 auto;
    border-collapse: collapse;
    border: 2px solid #aaa;
    font-size: 0.8rem;
    cursor: default;
}

.vc-history-table th {
    padding: 4px 6px;
    border: 2px solid #aaa;
    text-align:center
}
.vc-history-table td {
    padding: 4px 6px;
    border: 0.25px solid #e0e0e0;
}

.vc-history-table tr:hover {
    background-color: #f4faff;
}

#vcHistoryContainer,
#updateVCLabel {
    cursor: default;
}

.vc-input {
    background-color: #f0f8ff;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    width: 100%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.flatpickr-day.primary {
    border: 2px solid #007bff !important;
    background: #e6f0ff !important;
    border-radius: 50% !important;
    position: relative;
}

.flatpickr-day.primary::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px dashed #007bff;
    border-radius: 50%;
}

.flatpickr-day.today:not(.selected):not(.primary) {
    opacity: 0.4;
}

.service-table-container {
    overflow-y: auto;
    max-height: 40vh; /* Adjust based on how much screen space you want it to take */
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.service-table-container table thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
}
#serviceTable td,
#serviceTable th {
    padding: 0rem 0.5rem !important; /* compact vertical & horizontal padding */
    vertical-align: middle !important;
    height: 32px; /* enforce consistent row height (optional) */
}

#serviceTable td .form-control,
#serviceTable td select,
#serviceTable td input,
#serviceTable td .btn {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 0.8 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 0.75rem !important;
}

#servicesTable tbody tr {
    height: 20px;
}

#spinnerOverlay {
    z-index: 1056; /* Higher than Bootstrap modal backdrop */
}

/* Hide browser-native password toggle (Chrome/Edge) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input[type="password"]::-webkit-textfield-decoration-container {
    display: none !important;
}

.form-card.narrow {
    max-width: 480px;
}

.form-card.medium {
    max-width: 640px;
}

.form-card.wide {
    max-width: 900px;
}