/**
 * Profile Page — Mobile & Tablet Responsive Styles
 * Based on: new_design/components/profile/profile-content.tsx
 *           new_design/components/profile/profile-header.tsx
 *           new_design/components/profile/profile-tabs-nav.tsx
 *           new_design/components/profile/profile-sidebar.tsx
 *
 * Desktop (>1024px) is UNTOUCHED — all rules are scoped inside media queries.
 */

/* ============================================================
   TABLET + PHONE  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* ── Main container: strip sidebar indent ── */
    .profile-container {
        margin-left: 0 !important;
        padding-top: clamp(16px, 3vw, 28px);
        padding-left: clamp(12px, 3vw, 24px);
        padding-right: clamp(12px, 3vw, 24px);
        padding-bottom: calc(var(--bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
        box-sizing: border-box;
    }

    .profile-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Layout: 3-column grid → single flex column ── */
    .profile-layout-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(10px, 1.5vw, 16px);
        grid-template-columns: none !important;
    }

    /* ===========================================================
       LEFT SECTION — Profile Info Card + Horizontal Tab Nav
       In new design this is one combined card with rounded corners
       =========================================================== */
    .profile-left-section {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #ffffff;
        border-radius: clamp(12px, 1vw, 18px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    /* ── Profile info container: no own border/bg ── */
    .profile-info-container {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: clamp(16px, 2vw, 28px) clamp(14px, 1.5vw, 24px) clamp(8px, 1vw, 14px) !important;
    }

    .profile-info-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* ── Avatar ── */
    .profile-avatar-wrapper {
        width: clamp(80px, 14vw, 120px) !important;
        height: clamp(80px, 14vw, 120px) !important;
        margin: 0 auto clamp(10px, 1.2vw, 16px) !important;
    }

    .profile-avatar,
    .profile-avatar-video {
        border-width: clamp(2px, 0.2vw, 3px) !important;
        box-shadow: 0 clamp(4px, 0.6vw, 8px) clamp(12px, 1.2vw, 20px) rgba(0, 0, 0, 0.12) !important;
    }

    /* Online indicator */
    .profile-online-dot {
        width: clamp(12px, 1.6vw, 18px) !important;
        height: clamp(12px, 1.6vw, 18px) !important;
        bottom: clamp(2px, 0.3vw, 5px) !important;
        right: clamp(2px, 0.3vw, 5px) !important;
        border-width: clamp(2px, 0.15vw, 3px) !important;
    }

    /* ── Info main block ── */
    .profile-info-main {
        gap: clamp(6px, 0.8vw, 10px) !important;
        align-items: center !important;
    }

    .user-name-container {
        gap: clamp(2px, 0.3vw, 4px) !important;
        align-items: center !important;
    }

    .user-name-row {
        gap: clamp(4px, 0.5vw, 8px) !important;
        justify-content: center;
    }

    /* ── Text ── */
    .user-name {
        font-size: clamp(18px, 3vw, 24px) !important;
        font-weight: 700;
    }

    .user-username {
        font-size: clamp(13px, 1.5vw, 15px) !important;
    }

    .user-description {
        font-size: clamp(12px, 1.4vw, 14px) !important;
        line-height: 1.5 !important;
        max-width: clamp(280px, 60vw, 420px);
        text-align: center;
    }

    /* ── Badges ── */
    .user-badges {
        gap: clamp(4px, 0.4vw, 6px) !important;
    }

    .badge {
        width: clamp(18px, 2.5vw, 24px) !important;
        height: clamp(18px, 2.5vw, 24px) !important;
        font-size: clamp(9px, 1.1vw, 12px) !important;
    }

    .badge-vip-icon,
    .badge svg {
        width: clamp(10px, 1.4vw, 14px) !important;
        height: clamp(10px, 1.4vw, 14px) !important;
    }

    /* ── Social links ── */
    .profile-info-separator {
        margin: clamp(8px, 1vw, 14px) 0 !important;
    }

    .profile-info-social-links {
        gap: clamp(6px, 0.8vw, 10px) !important;
    }

    .profile-info-social-link {
        width: clamp(30px, 4.5vw, 38px) !important;
        height: clamp(30px, 4.5vw, 38px) !important;
        font-size: clamp(13px, 1.6vw, 16px) !important;
        border-radius: 50% !important;
    }

    /* ===========================================================
       NAVIGATION TABS — Vertical list → Horizontal scroll strip
       Matches new_design ProfileTabsNav variant="horizontal"
       =========================================================== */
    .profile-navigation-container {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .profile-navigation-container::-webkit-scrollbar {
        display: none;
    }

    .tabs-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: clamp(6px, 0.5vw, 8px) !important;
        padding: clamp(8px, 1vw, 12px) clamp(14px, 2vw, 24px) !important;
        width: max-content !important;
        min-width: 100%;
        align-items: center;
        box-sizing: border-box;
    }

    /* Tab pill */
    .tab {
        flex-direction: row !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        width: auto !important;
        border-radius: 9999px !important;
        padding: clamp(7px, 0.8vw, 10px) clamp(11px, 1.2vw, 16px) !important;
        font-size: clamp(12px, 1.2vw, 14px) !important;
        gap: clamp(5px, 0.5vw, 7px) !important;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: #64748b;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .tab:hover {
        border-color: rgba(99, 102, 241, 0.3);
        color: #6366F1;
        background: rgba(99, 102, 241, 0.04) !important;
    }

    .tab.active {
        background: #6366F1 !important;
        color: #ffffff !important;
        border-color: #6366F1 !important;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
    }

    .tab span {
        font-size: clamp(12px, 1.2vw, 14px) !important;
        font-weight: 500 !important;
    }

    /* Tab icon (SVG / FA) */
    .tab .lucide-icon {
        width: clamp(14px, 1.2vw, 16px) !important;
        height: clamp(14px, 1.2vw, 16px) !important;
        flex-shrink: 0;
    }

    .tab i {
        font-size: clamp(12px, 1.2vw, 14px) !important;
        width: auto !important;
        height: auto !important;
        flex-shrink: 0;
    }

    /* Separator between public & owner tabs → hide in horizontal mode */
    .profile-actions-separator {
        display: none !important;
    }

    /* ===========================================================
       CENTER SECTION — Tab content
       =========================================================== */
    .profile-center-section {
        order: 2;
        min-height: auto !important;
        border-radius: clamp(12px, 1vw, 18px) !important;
    }

    .profile-center-section .tab-content,
    .tab-content {
        padding: clamp(14px, 2vw, 24px) !important;
    }

    /* Empty state */
    .empty-state {
        padding: clamp(40px, 8vw, 80px) clamp(16px, 2vw, 24px) !important;
        min-height: clamp(200px, 40vw, 350px) !important;
    }

    .empty-state i {
        font-size: clamp(32px, 5vw, 48px) !important;
        margin-bottom: clamp(10px, 1.5vw, 16px) !important;
    }

    .empty-state p {
        font-size: clamp(13px, 1.5vw, 16px) !important;
    }

    /* Tab pane animation keeps working */
    .tab-pane {
        transform: translateY(8px);
    }

    .tab-pane.active {
        transform: translateY(0);
    }

    /* ===========================================================
       RIGHT SECTION — HIDE (sidebar: level, coins, stats)
       Stats are accessible via Statistics tab on mobile
       =========================================================== */
    .profile-right-section {
        display: none !important;
    }

    /* ===========================================================
       ADMIN PANEL BUTTON (if present)
       =========================================================== */
    .admin-panel-btn,
    .profile-admin-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-bottom: clamp(8px, 1vw, 14px);
    }

    /* ===========================================================
       PROFILE OVERVIEW — Section cards responsive
       =========================================================== */
    .profile-overview-grid,
    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(10px, 1.5vw, 16px) !important;
    }

    /* Respect / XP / Status cards */
    .overview-card,
    .profile-overview-card {
        border-radius: clamp(8px, 1vw, 14px) !important;
        padding: clamp(14px, 2vw, 20px) !important;
    }

    /* ===========================================================
       OVERVIEW V2 — respect button, XP bar, status levels
       =========================================================== */

    /* XP bar sizes */
    .xp-bar-container,
    .level-progress-bar {
        height: clamp(6px, 0.6vw, 10px) !important;
    }

    /* Status level grid on mobile: 2 columns */
    .status-levels-grid,
    .level-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    /* Respect button */
    .respect-btn,
    .overview-respect-btn {
        padding: clamp(10px, 1.2vw, 14px) clamp(18px, 2vw, 28px) !important;
        font-size: clamp(13px, 1.4vw, 15px) !important;
        border-radius: clamp(8px, 0.8vw, 12px) !important;
    }

    /* Activity stats: 2 columns on mobile */
    .activity-stats-grid,
    .overview-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    .activity-stat-card,
    .overview-stat-card {
        padding: clamp(10px, 1.2vw, 16px) !important;
        border-radius: clamp(8px, 0.8vw, 12px) !important;
    }

    /* ===========================================================
       CAREER PROGRESS — on mobile
       =========================================================== */
    .career-grid,
    .career-progress-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(10px, 1.5vw, 16px) !important;
    }

    /* ===========================================================
       CONTRIBUTIONS — on mobile
       =========================================================== */
    .contributions-filters {
        flex-wrap: wrap;
        gap: clamp(6px, 1vw, 10px) !important;
    }

    .contributions-list {
        gap: clamp(8px, 1vw, 12px) !important;
    }

    /* ===========================================================
       ACHIEVEMENTS — on mobile: 2-column grid
       =========================================================== */
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 14px) !important;
    }

    /* ===========================================================
       EDIT PROFILE — on mobile
       =========================================================== */
    .edit-profile-grid,
    .edit-profile-row {
        grid-template-columns: 1fr !important;
        gap: clamp(10px, 1.5vw, 16px) !important;
    }

    .edit-profile-form input,
    .edit-profile-form textarea,
    .edit-profile-form select {
        font-size: clamp(13px, 1.5vw, 15px) !important;
        padding: clamp(10px, 1.2vw, 14px) !important;
    }

    /* ===========================================================
       STATISTICS — on mobile
       =========================================================== */
    .statistics-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    .statistics-sub-tabs,
    .stats-sub-nav {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    .statistics-sub-tabs::-webkit-scrollbar {
        display: none;
    }

    /* ===========================================================
       PURCHASES — on mobile
       =========================================================== */
    .purchases-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    /* ===========================================================
       SETTINGS — on mobile
       =========================================================== */
    .settings-grid,
    .settings-row {
        grid-template-columns: 1fr !important;
        gap: clamp(10px, 1.5vw, 16px) !important;
    }

    /* ===========================================================
       OPPORTUNITIES — on mobile
       =========================================================== */
    .opportunities-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    /* ===========================================================
       SECTION HEADERS (shared .section-header class)
       =========================================================== */
    .section-header {
        margin-bottom: clamp(12px, 1.5vw, 20px) !important;
    }

    .section-header h2,
    .section-title {
        font-size: clamp(16px, 2.5vw, 22px) !important;
    }

    .section-header p,
    .section-subtitle {
        font-size: clamp(12px, 1.4vw, 14px) !important;
    }

    /* ===========================================================
       BOOKMARKS — on mobile
       =========================================================== */
    .bookmarks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }

    /* ===========================================================
       PREFERENCES — on mobile
       =========================================================== */
    .preferences-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 1vw, 12px) !important;
    }
}


/* ============================================================
   PHONE ONLY  (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

    /* Tighter edge padding on small phones */
    .profile-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── Avatar ── */
    .profile-avatar-wrapper {
        width: 80px !important;
        height: 80px !important;
    }

    /* ── Name / username ── */
    .user-name {
        font-size: 19px !important;
    }

    .user-username {
        font-size: 13px !important;
    }

    .user-description {
        font-size: 12px !important;
        max-width: 100%;
    }

    /* ── Social links ── */
    .profile-info-social-link {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* ── Tab pills ── */
    .tabs-container {
        padding: 8px 16px !important;
        gap: 6px !important;
    }

    .tab {
        padding: 7px 12px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }

    .tab span {
        font-size: 12px !important;
    }

    .tab .lucide-icon {
        width: 13px !important;
        height: 13px !important;
    }

    /* ── Tab content ── */
    .profile-center-section .tab-content,
    .tab-content {
        padding: 14px !important;
    }

    /* ── Grids: force single column on very small phones ── */
    .achievements-grid,
    .bookmarks-grid,
    .preferences-grid {
        grid-template-columns: 1fr !important;
    }

    .status-levels-grid,
    .level-list,
    .activity-stats-grid,
    .overview-stats-grid,
    .statistics-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Empty state ── */
    .empty-state {
        padding: 40px 16px !important;
        min-height: 200px !important;
    }

    .empty-state i {
        font-size: 32px !important;
        margin-bottom: 12px !important;
    }

    .empty-state p {
        font-size: 13px !important;
    }
}