/* ═══════════════════════════════════════════════════════════════
   Sportify – Mobile Responsive Styles
   Target: portrait phones (≤ 640px), tablets (641–900px)
   ═══════════════════════════════════════════════════════════════ */

/* ── Global resets ───────────────────────────────────────────── */
@media (max-width: 640px) {
    body { font-size: 15px; }

    /* ── Navbar ───────────────────────────────────────────────── */
    .navbar {
        padding: 0 0.75rem;
        height: 56px;
    }
    .navbar-brand { font-size: 1.4rem; }
    .navbar-links { gap: 0.4rem; }
    .navbar-links a { font-size: 0.75rem; padding: 0.35rem 0.5rem; }
    .navbar-links a .nav-label { display: none; } /* icon only on small */
    .nav-avatar { width: 30px; height: 30px; font-size: 1rem; }
    .notif-badge { top: -3px; right: -3px; min-width: 14px; height: 14px; font-size: 0.6rem; }

    /* ── Dashboard layout ────────────────────────────────────── */
    .dashboard-layout {
        flex-direction: column;
        gap: 0;
        padding: 0;
        height: auto;
    }
    .sidebar {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.75rem;
        overflow-y: visible;
    }
    .sidebar-header h3 { font-size: 1rem; }
    .filter-section { margin-bottom: 0.75rem; }
    .filter-label { font-size: 0.8rem; }
    .filter-select, .filter-input { font-size: 0.9rem; padding: 0.5rem 0.65rem; }
    .filter-sports { gap: 0.35rem; }
    .filter-sport-item { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
    .filter-niveaux { flex-wrap: wrap; gap: 0.3rem; }
    .filter-niveau-btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
    .btn-filter, .btn-reset { width: 100%; text-align: center; margin-bottom: 0.35rem; }

    .main-content {
        padding: 0.75rem;
    }
    .results-title { font-size: 1.1rem; }
    .members-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .member-card { padding: 0.9rem; }
    .member-top { gap: 0.75rem; }
    .member-avatar { width: 52px; height: 52px; font-size: 1.5rem; flex-shrink: 0; }
    .member-identity h3 { font-size: 0.95rem; }
    .member-bio { font-size: 0.82rem; -webkit-line-clamp: 2; }
    .member-sports { gap: 0.3rem; }
    .sport-tag { font-size: 0.72rem; padding: 0.2rem 0.45rem; }
    .member-actions { flex-wrap: wrap; gap: 0.4rem; }
    .btn-contact { font-size: 0.8rem; padding: 0.35rem 0.6rem; }
    .match-ribbon { font-size: 0.72rem; padding: 0.2rem 0.7rem; }

    /* ── Profile page ────────────────────────────────────────── */
    .profile-container { padding: 0.75rem; max-width: 100%; }
    .profile-header { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
    .photo-upload-zone { width: 90px; height: 90px; }
    .profile-header h1 { font-size: 1.3rem; }
    .profile-section { padding: 1rem; border-radius: 14px; margin-bottom: 0.75rem; }
    .profile-section h3 { font-size: 1rem; }
    .form-row { flex-direction: column; gap: 0.6rem; }
    .form-group label { font-size: 0.82rem; }
    .form-group input, .form-group textarea, .form-group select { font-size: 0.9rem; padding: 0.55rem 0.75rem; }
    .sports-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
    .sport-card { padding: 0.6rem 0.4rem; }
    .sport-emoji { font-size: 1.4rem; }
    .sport-name { font-size: 0.72rem; }
    .days-grid { gap: 0.35rem; }
    .day-card { min-width: 36px; height: 36px; font-size: 0.75rem; }
    .btn-primary { font-size: 0.9rem; padding: 0.65rem 1.25rem; }
    .btn-secondary { font-size: 0.9rem; padding: 0.65rem 1.25rem; }

    /* ── Member page ─────────────────────────────────────────── */
    .member-layout { padding: 0.75rem; max-width: 100%; }
    .member-hero { flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 16px; }
    .member-hero-left { flex-direction: column; align-items: center; text-align: center; }
    .member-big-avatar { width: 80px; height: 80px; font-size: 2.5rem; }
    .member-big-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .member-hero-info h1 { font-size: 1.3rem; }
    .rating-summary { align-items: center; }
    .rating-num { font-size: 2.5rem; }
    .hero-btns { flex-direction: column; gap: 0.5rem; width: 100%; }
    .hero-btns a, .hero-btns button { width: 100%; text-align: center; }
    .member-body { padding: 0; }
    .member-section { padding: 0.9rem; border-radius: 14px; }
    .member-section h3 { font-size: 1rem; }
    .member-sports-list { gap: 0.4rem; }
    .sport-pill { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
    .dispo-table { gap: 0.35rem; }
    .dispo-row { font-size: 0.85rem; }
    .eval-form-card { padding: 0.9rem; border-radius: 14px; }
    .eval-item { padding: 0.75rem; }
    .star-pick { font-size: 1.6rem; }

    /* ── Messages page ───────────────────────────────────────── */
    .messages-layout {
        flex-direction: column;
        height: calc(100vh - 56px);
    }
    .conv-list {
        width: 100%;
        height: 40vh;
        min-height: 160px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-y: auto;
    }
    .conv-item { padding: 0.6rem 0.75rem; }
    .chat-panel {
        flex: 1;
        min-height: 0;
    }
    .chat-header { padding: 0.6rem 0.75rem; }
    .chat-header-name { font-size: 0.9rem; }
    .chat-messages { padding: 0.65rem 0.75rem; gap: 0.5rem; }
    .chat-bubble { max-width: 90%; font-size: 0.88rem; padding: 0.55rem 0.8rem; }
    .chat-input-bar { padding: 0.5rem 0.65rem; gap: 0.4rem; }
    .chat-input-bar textarea { font-size: 0.88rem; }
    .chat-input-bar button { padding: 0.45rem 0.75rem; font-size: 0.85rem; }

    /* ── Notifications ───────────────────────────────────────── */
    .notif-container { padding: 0.75rem; }
    .notif-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
    .notif-header h2 { font-size: 1.2rem; }
    .notif-actions { flex-direction: column; gap: 0.4rem; width: 100%; align-items: flex-start; }
    .filter-tabs { width: 100%; display: flex; }
    .filter-tab { flex: 1; text-align: center; }
    .btn-mark-all { width: 100%; text-align: center; }
    .notif-item { padding: 0.75rem; gap: 0.6rem; }
    .notif-content { font-size: 0.85rem; }
    .notif-title { font-size: 0.88rem; }
    .notif-text { font-size: 0.8rem; }
    .notif-btns { flex-direction: column; gap: 0.3rem; }
    .btn-notif-link, .btn-notif-read, .btn-notif-del { font-size: 0.8rem; padding: 0.3rem 0.5rem; }

    /* ── Map page ────────────────────────────────────────────── */
    .map-layout { flex-direction: column; height: auto; }
    .map-controls {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.65rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .map-info, .map-my-pos, .map-filter, .map-legend {
        min-width: calc(50% - 0.25rem);
        flex: 1;
    }
    .map-info h3 { font-size: 0.9rem; }
    .map-my-pos h4, .map-filter h4 { font-size: 0.82rem; }
    .btn-locate { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
    #map { height: 55vh; min-height: 300px; }

    /* ── Auth / index page ───────────────────────────────────── */
    .auth-container { padding: 1rem; max-width: 100%; }
    .auth-card { padding: 1.5rem 1rem; border-radius: 16px; }
    .auth-title { font-size: 1.8rem; }
    .auth-form input { font-size: 0.9rem; padding: 0.65rem 0.9rem; }

    /* ── Block/unfriend buttons ──────────────────────────────── */
    .btn-danger-outline, .btn-block, .btn-unblock { width: 100%; text-align: center; }
}

/* ── Tablet (641-900px) ──────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
    .dashboard-layout { flex-direction: column; }
    .sidebar { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--border); height: auto; }
    .members-grid { grid-template-columns: repeat(2, 1fr); }
    .member-hero { flex-direction: column; }
    .hero-btns { flex-wrap: wrap; }
    .messages-layout { flex-direction: column; }
    .conv-list { width: 100%; height: 35vh; border-right: none; border-bottom: 1px solid var(--border); }
    .map-layout { flex-direction: column; }
    .map-controls { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 0.65rem; }
    #map { height: 50vh; }
    .sports-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── New buttons styles for block/unfriend ───────────────────── */
.btn-danger-outline {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    border-radius: 12px;
    padding: 0.7rem 1.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
}

.btn-block {
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    border-radius: 12px;
    padding: 0.7rem 1.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-block:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.65);
}

.btn-unblock {
    background: rgba(34, 197, 94, 0.1);
    border: 1.5px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
    border-radius: 12px;
    padding: 0.7rem 1.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-unblock:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.6);
}

.blocked-msg-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    border-radius: 12px;
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ── Toast notification ──────────────────────────────────────── */
.member-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    pointer-events: none;
}
.member-toast.toast-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}
.member-toast.toast-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* ── SQL migration reminder comment ─────────────────────────── */
/*
  TABLE REQUIRED:
  CREATE TABLE IF NOT EXISTS blocks (
    id           INT AUTO_INCREMENT PRIMARY KEY,
    blocker_id   INT NOT NULL,
    blocked_id   INT NOT NULL,
    created_at   TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY uq_block (blocker_id, blocked_id),
    FOREIGN KEY (blocker_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (blocked_id) REFERENCES users(id) ON DELETE CASCADE
  );
*/