/*
   Deliberately small. The users are drivers and plant staff on phones in a yard and clerks on
   desktops; Bootstrap's defaults already handle that, and every rule added here is one more thing
   to keep consistent across two languages. Spanish labels run roughly 20% longer than English, so
   nothing below fixes a width in a way that would clip them.
*/

html, body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Touch targets. A driver taps this with gloves on. */
.btn, .form-control, .form-select {
    min-height: 44px;
}

.btn-sm {
    min-height: 36px;
}

/* ── Slot grid ──────────────────────────────────────────────────────────────────────────────── */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

.slot {
    border: 2px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .75rem;
    text-align: center;
    background: var(--bs-body-bg);
}

.slot-time {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.slot-status {
    font-size: .8rem;
}

.slot-free {
    border-color: #198754;
}

/* Availability is never signalled by colour alone: each slot also carries a word ("2 of 2 free",
   "Full"), so it reads correctly for a colour-blind user and in bright sunlight on a phone. */
.slot-taken {
    border-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.slot button {
    width: 100%;
}

/* ── Tables that become cards on small screens ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .table-cards thead {
        display: none;
    }

    .table-cards tbody tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem;
    }

    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: .35rem .25rem;
    }

    /* Each cell carries its own header text on mobile, set from data-label in the markup. */
    .table-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        flex: 0 0 45%;
    }
}

.status-badge {
    font-size: .8rem;
}

/* Make the required-field marker readable rather than a bare asterisk. */
.field-required::after {
    content: " *";
    color: var(--bs-danger);
}