/* =====================================================
   Responsive Styles - Media Queries Only
   ===================================================== */

/* Tablet and below */
@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Mobile / small tablet */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: block;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .page-content {
        padding: 16px;
    }

    .top-header {
        padding: 0 16px;
    }

    .user-name {
        display: none;
    }

    .welcome-block {
        flex-direction: column;
        align-items: flex-start;
    }

    .welcome-block h1 {
        font-size: 1.3rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 28px 20px;
    }

    .auth-card-wide {
        max-width: 100%;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 18px;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .data-table th,
    .data-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .auth-page {
        padding: 16px;
    }

    .auth-logo {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .auth-header h1 {
        font-size: 1.3rem;
    }

    .btn {
        padding: 12px 16px;
    }

    .stat-value {
        font-size: 1.05rem;
    }

    .section-card .card-body {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .clock-time {
        font-size: 2.4rem;
    }
    .slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .clock-time {
        font-size: 2rem;
    }
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .book-form-row {
        flex-direction: column;
        align-items: stretch;
    }
    .book-btn-label {
        display: none;
    }
    .btn-book {
        width: 100%;
    }
    .booked-time {
        font-size: 1rem;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .booked-item {
        flex-wrap: wrap;
    }
    .booked-time {
        margin-left: auto;
    }
}