/* PhysioBooking — Custom styles */

/* Polish font support */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base ── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

/* ── Navbar ── */
.navbar-brand {
    font-size: 1.1rem;
}

/* Mobile hamburger — ensure proper stacking */
@media (max-width: 991px) {
    .navbar-nav .nav-link {
        padding: 0.6rem 0.75rem;
    }
}

/* ── Calendar container ── */
#calendar {
    min-height: 500px;
}

/* ── HTMX loading indicator ── */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}

/* ── Patient UID badge ── */
code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #374151;
}

/* ── Alpine.js cloak ── */
[x-cloak] { display: none !important; }

/* ── Booking wizard — touch targets ── */
.booking-slot-btn {
    min-height: 48px;
    font-size: 1rem;
    font-weight: 500;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.booking-slot-btn:active {
    transform: scale(0.97);
}

/* Large form controls also 48px */
.form-control-lg {
    min-height: 48px;
}

/* Focus ring */
.btn-outline-primary:focus,
.btn-primary:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* ── Step transitions ── */
[x-show] {
    transition: opacity 0.2s ease;
}

/* ── Toast notifications ── */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    min-width: 280px;
}
.toast {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast.show {
    animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Card consistency — border-0 globally ── */
.card {
    border-radius: 10px;
}

/* ── Sortable table headers ── */
.sortable-header {
    user-select: none;
    white-space: nowrap;
}
.sortable-header:hover {
    background-color: #e9ecef;
}

/* ── Clickable table rows ── */
.table-hover tbody tr[style*="cursor:pointer"]:hover {
    background-color: #f0f4ff;
}

/* ── Mobile responsive ── */
@media (max-width: 576px) {
    .container-fluid,
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Compact table on mobile */
    .table td, .table th {
        padding: 0.5rem 0.25rem;
        font-size: 0.9rem;
    }

    /* Pagination compact */
    .pagination {
        flex-wrap: wrap;
    }

    /* Full-width patient action buttons */
    .card-body .d-flex.gap-2.flex-wrap .btn {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Stepper text smaller */
    .display-1 { font-size: 3rem; }

    /* Hero icon smaller on mobile */
    .display-1.text-primary { font-size: 3.5rem; }

    /* Calendar legend wraps */
    .legend-item-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: flex-end;
    }
}

/* ── Calendar responsive ── */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }
    .fc .fc-button {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    /* Calendar header view buttons — hide month/week on mobile, show day */
    .fc .fc-header-toolbar .fc-toolbar-chunk:last-child .fc-button-group {
        display: flex;
    }
}

/* ── Status badge transition ── */
.status-badge {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Smooth button transitions ── */
.btn {
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.1s ease;
}
.btn:active {
    transform: scale(0.97);
}

/* ── Alert transitions ── */
.alert {
    animation: fadeInDown 0.25s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page-level loading overlay ── */
#page-loading {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}
#page-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Schedule modal — stack on narrow screens ── */
@media (max-width: 576px) {
    /* Day row wraps on mobile */
    #scheduleModal .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
    }
    #scheduleModal input[type="time"] {
        width: 100% !important;
    }
    #scheduleModal select.form-select-sm {
        width: 100% !important;
    }
}

/* ── Patient confirm delete — center on mobile ── */
.confirm-delete-card {
    max-width: 500px;
    margin: 0 auto;
}