/* ==========================================
   K-STUDY MATCHER MOBILE RESPONSIVE STYLES
   ========================================== */

/* ===== GLOBAL DEFAULTS (DESKTOP >= 1024px) ===== */
/* Hide all mobile elements on desktop by default */
#mHeaderFilterBtn,
.m-global-bottom-nav,
.mobile-profile-view,
.mobile-telegram-sub-header,
.mobile-only-docs-tab {
  display: none !important;
}

/* ===== MOBILE & TABLET COMMON STYLES (< 1024px) ===== */
@media screen and (max-width: 1023px) {
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  .main-container {
    padding-bottom: 0 !important;
  }

  /* Force touch targets minimums */
  button, 
  a, 
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select, 
  textarea {
    min-height: 44px;
  }

  /* Prevent iOS zoom on input focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Remove page horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100%;
  }

  /* Single-row Header Layout */
  .header-container {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0.75rem 1rem !important;
  }

  .header-user-dropdown {
    display: none !important;
  }

  .mobile-logged-in-controls {
    display: flex !important;
  }

  /* Hide Filter Button by Default */
  #mHeaderFilterBtn {
    display: none !important;
  }

  /* Show Filter Button only on filterable pages */
  body:has(app-matcher) #mHeaderFilterBtn,
  body:has(app-catalog) #mHeaderFilterBtn,
  body:has(app-map) #mHeaderFilterBtn,
  body:has(app-consultants) #mHeaderFilterBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
  }

  body:has(app-matcher) #mHeaderFilterBtn:active,
  body:has(app-catalog) #mHeaderFilterBtn:active,
  body:has(app-map) #mHeaderFilterBtn:active,
  body:has(app-consultants) #mHeaderFilterBtn:active {
    background: rgba(109, 93, 252, 0.15);
    border-color: var(--primary);
    color: var(--primary);
  }

  /* Global Bottom Navigation Bar */
  .m-global-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    background: var(--bg-primary);
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--border-color);
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }

  .m-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    flex: 1;
    height: 100%;
    transition: color 0.2s;
  }

  .m-bottom-nav-item i {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }

  .m-bottom-nav-item.m-active {
    color: #6c5ce7 !important;
  }
}

/* ===== MOBILE ONLY STYLES (< 767px) ===== */
@media screen and (max-width: 767px) {
  /* Hide Desktop Nav (replaced by bottom nav). Auth/lang controls stay,
     but compacted so login, language, theme & logout remain reachable. */
  .nav-tabs-container-header {
    display: none !important;
  }

  /* Scale Logo Header & let it truncate instead of pushing the row wider */
  .logo {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
  }

  .logo h1 {
    font-size: 1.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ---- Compact auth / language controls (mobile header right side) ---- */
  .auth-buttons-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Guest: standalone theme-toggle button -> compact square */
  .auth-buttons-header > button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* Guest: narrow the language selector to just the code (UZ/RU/EN…) */
  .auth-buttons-header .select-wrapper {
    width: 58px !important;
    margin-right: 0 !important;
  }

  /* Guest: login button not needed in header — the bottom-nav Profile tab
     is authGuard-protected and routes guests to the /auth page. */
  .auth-buttons-header a.btn-primary {
    display: none !important;
  }

  /* Logged-in: avatar-only trigger (hide the long name) */
  .auth-buttons-header .user-name-label {
    display: none !important;
  }

  .auth-buttons-header .user-dropdown-container > button {
    padding: 0.4rem 0.55rem !important;
    gap: 0.35rem !important;
  }

  /* Keep the user dropdown menu within the viewport */
  .auth-buttons-header .user-dropdown-menu {
    width: min(230px, calc(100vw - 24px)) !important;
    right: 0 !important;
  }
}

/* ===== TABLET ONLY STYLES (768px – 1023px) ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Hide Desktop Nav; keep auth/language controls visible on tablet */
  .nav-tabs-container-header {
    display: none !important;
  }
}

/* ===== PAGE-SPECIFIC RESPONSIVE STYLES ===== */

/* ==================== PAGE 1 — /matcher ==================== */
@media screen and (max-width: 767px) {
  /* Flatten layout */
  .workspace-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
  }

  .matcher-filters-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: none !important;
    display: contents !important; /* Clever layout hoisting */
  }

  .search-card {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    background: var(--bg-primary) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .search-card.m-expanded {
    transform: translateY(0) !important;
  }

  .search-card h2 {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 1.5rem !important;
    font-size: 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  .search-card h2::after {
    content: "\f00d" !important; /* fa-xmark (cross mark) */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    color: var(--text-muted) !important;
    transition: color 0.2s !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
  }

  .search-card h2:hover::after {
    color: #ef4444 !important;
  }

  .search-card form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    flex: 1 !important;
  }

  /* Stacked inputs */
  .search-card .form-row {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .search-card .form-group.col-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* results details */
  .uni-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .uni-card-body {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
    padding-top: 1rem !important;
  }

  .uni-failed-criteria,
  .uni-card-scholarship {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* 2x2 actions button grid + Apply full width */
  .uni-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .uni-actions button,
  .uni-actions a {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .uni-actions button.btn-primary,
  .uni-actions a.btn-primary {
    grid-column: span 2 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .workspace-grid {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
  }
  
  .uni-card-body {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==================== PAGE 2 — /catalog ==================== */
@media screen and (max-width: 767px) {
  .catalog-page {
    padding: 1rem !important;
  }

  .catalog-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .catalog-controls .search-box {
    width: 100% !important;
  }

  .catalog-controls div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }

  .sort-box {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }

  .catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Full-screen slide-up filter modal — identical pattern to /matcher's
     .search-card. Hidden below the viewport by default, slides up over
     everything (incl. the bottom nav) when .active is toggled. */
  .catalog-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    background: var(--bg-primary) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .catalog-sidebar.active {
    transform: translateY(0) !important;
  }

  /* Catalog filter modal header — match /matcher's .search-card h2 look:
     bigger title on the left, muted close (×) on the right, divider below. */
  .catalog-sidebar > div:first-child {
    position: relative !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  .catalog-sidebar > div:first-child h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }

  .catalog-sidebar .btn-close-drawer {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 1.25rem !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
  }

  .catalog-sidebar .btn-close-drawer:hover {
    color: #ef4444 !important;
  }

  /* Catalog card buttons 2x2 grid */
  .catalog-card-footer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .catalog-card-footer a,
  .catalog-card-footer button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .catalog-workspace {
    display: flex !important;
    flex-direction: column !important;
  }

  .catalog-sidebar {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==================== PAGE 3 — /map ==================== */
@media screen and (max-width: 767px) {
  .map-page {
    height: calc(100vh - 60px - 60px - env(safe-area-inset-bottom)) !important;
    min-height: auto !important;
  }

  /* The full-screen slide-up modal itself (position / transform / .active)
     is owned by styles.css (.map-page .map-filters-sidebar), which matches
     /catalog & /matcher. Opening is driven from the header filter button ->
     component toggleMobileFilters() (see mobile.js). Here we only refine the
     in-modal header and drop the old bottom-sheet drag handle. */

  /* Drag handle is unused in modal mode */
  .m-map-drag-handle {
    display: none !important;
  }

  /* Hide the floating filter FAB — the filter opens from the header button.
     The element stays in the DOM as the header button's programmatic
     .click() target (display:none elements still fire click()). */
  .map-page .mobile-map-filter-btn {
    display: none !important;
  }

  /* Modal header: centered title + close (×) on the right, like /catalog */
  .map-filters-sidebar .mobile-filters-header {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  .map-filters-sidebar .mobile-filters-header h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }

  .map-filters-sidebar .close-mobile-filters {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    color: var(--text-muted) !important;
    font-size: 1.25rem !important;
    transition: color 0.2s !important;
  }

  .map-filters-sidebar .close-mobile-filters:hover {
    color: #ef4444 !important;
  }

  .map-filters-sidebar form {
    overflow-y: auto !important;
    flex: 1 !important;
    padding-bottom: 1rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Hide desktop sidebar header on mobile */
  .desktop-filters-header {
    display: none !important;
  }

  .map-filters-sidebar .apply-mobile-filters {
    display: block !important;
  }

  /* Sponor block in bottom sheet can be hidden to save space */
  .map-filters-sidebar app-sponsor-display {
    display: none !important;
  }

  /* Reposition floating header info badge */
  .map-info-header {
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: auto !important;
    max-width: 90vw !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
  }

  .map-info-header h3 {
    font-size: 0.8rem !important;
  }

  .map-info-header span {
    font-size: 0.7rem !important;
  }

  /* Mobile floating filter FAB button styled above collapsed sheet */
  .mobile-map-filter-btn {
    display: none !important; /* Using the collapsed sheet's header instead */
  }

  /* Leaflet zoom controls styled above collapsed bottom sheet */
  .leaflet-bottom.leaflet-right,
  .leaflet-control-zoom {
    bottom: 55px !important;
    margin-bottom: 0 !important;
  }

  /* Popups max-width */
  .leaflet-popup-content-wrapper {
    max-width: 280px !important;
  }
}

/* ==================== PAGE 4 — /ai ==================== */
@media screen and (max-width: 767px) {
  body:has(app-ai-chat) {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body:has(app-ai-chat) .main-container {
    padding-bottom: 0 !important;
  }

  .ai-page {
    height: calc(100vh - 68px - 60px - env(safe-area-inset-bottom)) !important;
    height: calc(100dvh - 68px - 60px - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Hide sidebar (preset prompts & consultant ad) on mobile as they are not needed */
  .ai-sidebar {
    display: none !important;
  }

  /* Chat window container sizing */
  .ai-chat-container-card {
    flex: 1 1 0% !important;
    height: auto !important;
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Input area sticky above bottom nav */
  .chat-input-area {
    padding-top: 0.5rem !important;
  }

  .chat-input-area input {
    height: 44px !important;
    font-size: 16px !important;
  }
}

/* ==================== PAGE 5 — /stats ==================== */
@media screen and (max-width: 767px) {
  .stats-page {
    padding: 1rem !important;
    gap: 1.5rem !important;
  }

  .stats-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .stats-mid-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .stats-analysis-panel,
  .stats-comparison-panel {
    width: 100% !important;
    flex: none !important;
    padding: 1.25rem !important;
  }

  .analysis-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .analysis-header #statsMajorSelect {
    width: 100% !important;
  }

  /* Detailed Table wrapper overflow-x */
  .stats-table-section {
    padding: 1.25rem !important;
  }

  .stats-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
  }

  .stats-table {
    min-width: 600px !important; /* Force horizontal scroll within container */
  }

  .stats-table th,
  .stats-table td {
    padding: 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .stats-dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .stats-mid-section {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ==================== PAGE 6 — /consultants ==================== */
@media screen and (max-width: 767px) {
  .consultants-page {
    padding: 1rem !important;
  }

  .consultants-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Filters Sidebar Accordion */
  .filters-sidebar {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 1.25rem !important;
  }

  .filters-sidebar h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
  }

  .filters-sidebar h3::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--primary);
    transition: transform 0.3s ease;
  }

  .filters-sidebar.m-expanded h3 {
    margin-bottom: 1.25rem;
  }

  .filters-sidebar.m-expanded h3::after {
    transform: rotate(180deg);
  }

  .filters-sidebar .form-group,
  .filters-sidebar button {
    display: none;
  }

  .filters-sidebar.m-expanded .form-group,
  .filters-sidebar.m-expanded button {
    display: block !important;
  }

  /* Grid details */
  .consultants-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem;
  }

  .advisor-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
}

/* ==================== PAGE 7 — /auth ==================== */
@media screen and (max-width: 767px) {
  .auth-container {
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    margin: 1.5rem auto !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .auth-tabs {
    gap: 0.5rem !important;
  }

  .auth-tab-btn {
    flex: 1 !important;
    padding: 0.65rem 0.5rem !important;
    font-size: 0.95rem !important;
    text-align: center;
  }

  /* Inputs and buttons min 48px height and 16px font size */
  .auth-container input {
    height: 48px !important;
    font-size: 16px !important;
  }

  .auth-container button[type="submit"] {
    height: 48px !important;
    font-size: 16px !important;
  }

  /* Privacy Policy checkbox row height target */
  .auth-container .form-group:has(#privacyAccepted) {
    min-height: 44px;
    align-items: center;
  }

  /* Google and Telegram stack adjustment */
  .social-auth-buttons {
    gap: 1rem !important;
  }

  .social-auth-buttons iframe,
  .social-auth-buttons div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==================== PAGE 8 — /profile ==================== */
@media screen and (max-width: 767px) {
  .profile-layout-container {
    flex-direction: column !important;
    padding: 0.5rem !important;
  }

  /* Hide original profile sidebar */
  .profile-sidebar {
    display: none !important;
  }

  /* Switch mobile bottom tabs inside profile page to horizontal scrollbar under header */
  .mobile-bottom-nav {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    background: rgba(13, 13, 20, 0.9) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.5rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-shadow: none !important;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-bottom-nav .mobile-nav-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 1rem !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    width: auto !important;
    height: auto !important;
    margin-right: 0.5rem !important;
    flex: none !important;
  }

  .mobile-bottom-nav .mobile-nav-item i {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .mobile-bottom-nav .mobile-nav-item.active {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #6c5ce7 !important;
  }

  .mobile-bottom-nav .mobile-nav-item span {
    font-size: 0.8rem !important;
  }

  /* Profile content form and columns stacked */
  .profile-content-panel {
    padding: 0 !important;
    width: 100% !important;
  }

  /* Hide page-level section titles inside tabs when we show the mobile telegram sub-header */
  .profile-content-panel .tab-content .section-title {
    display: none !important;
  }
  
  /* Also hide block-title inside documents tab on mobile since header has it */
  .mobile-only-docs-tab .block-title {
    display: none !important;
  }

  .profile-card {
    padding: 1.25rem !important;
  }

  .profile-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Photo upload centered */
  .photo-upload-block {
    align-items: center !important;
    text-align: center !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 1.5rem !important;
    padding-right: 0 !important;
  }

  .avatar-preview-box {
    margin: 0.75rem auto !important;
  }

  /* Details stack */
  .form-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Documents packet stacked */
  .docs-section-card {
    padding: 1.25rem !important;
  }

  .documents-grid-profile {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .document-card-profile {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }

  .document-card-profile .doc-icon-wrapper {
    align-self: center !important;
  }

  .document-card-profile .doc-details {
    width: 100% !important;
  }

  .doc-state-container {
    width: 100% !important;
    margin-top: 0.75rem !important;
  }

  .uploaded-doc-badge {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .uploaded-doc-badge .file-name {
    max-width: 100% !important;
  }

  .uploaded-doc-badge .doc-actions {
    justify-content: flex-end !important;
  }

  /* ==================== TELEGRAM-STYLE PROFILE LAYOUT ==================== */

  .desktop-profile-view {
    display: none !important;
  }

  .mobile-profile-view {
    display: block !important;
  }

  /* Hide the horizontal scrollbar tabs on mobile */
  .mobile-bottom-nav {
    display: none !important;
  }

  /* Telegram Sub-Header for sub-tabs */
  .mobile-telegram-sub-header,
  .telegram-sub-header {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    background: var(--bg-primary);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
  }

  .telegram-back-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .telegram-back-btn:active {
    color: var(--text-main);
  }

  .telegram-sub-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
  }

  /* Telegram Hero Card */
  .telegram-hero-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, rgba(109, 93, 252, 0.15), var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  }

  .telegram-hero-avatar-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--secondary);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  .telegram-hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .telegram-hero-avatar-placeholder {
    font-size: 2rem;
    color: var(--text-muted);
  }

  .telegram-hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .telegram-hero-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
  }

  .telegram-hero-status {
    font-size: 0.8rem;
    color: #ef4444; /* Unverified */
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .telegram-hero-status.verified {
    color: var(--accent-green) !important;
  }

  .telegram-edit-btn {
    background: var(--secondary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: auto !important;
    flex-shrink: 0;
  }

  .telegram-edit-btn:active {
    background: var(--primary);
    border-color: var(--primary);
  }

  /* Telegram Section Card */
  .telegram-section-card {
    background: var(--secondary);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
  }

  .telegram-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
  }

  .telegram-section-title-sub {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 1rem 0 0.5rem 0;
    font-family: 'Outfit', sans-serif;
  }

  /* Row Items (Info Section) */
  .telegram-row-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
  }

  .telegram-row-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .telegram-row-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    margin-top: 0.2rem;
  }

  /* Muted Telegram-like colors */
  .color-blue { color: #3b82f6 !important; }
  .color-cyan { color: #06b6d4 !important; }
  .color-orange { color: #f97316 !important; }
  .color-purple { color: #a855f7 !important; }
  .color-green { color: #10b981 !important; }
  .color-pink { color: #ec4899 !important; }
  .color-yellow { color: #eab308 !important; }
  .color-gray { color: var(--text-muted) !important; }
  .color-red { color: #ef4444 !important; }

  .telegram-row-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .telegram-row-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
  }

  .telegram-row-label {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  /* Clickable Rows (Menu Section) */
  .telegram-menu-row {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-family: inherit;
  }

  .telegram-menu-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .telegram-menu-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
  }

  .telegram-menu-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
  }

  .telegram-menu-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    margin-right: 0.25rem;
  }

  .telegram-menu-chevron {
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .telegram-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 0;
  }

  .logout-row:active .telegram-menu-text {
    color: #fca5a5 !important;
  }

  .mobile-editing-card {
    padding: 1rem !important;
    border-radius: 16px !important;
  }

  .mobile-only-docs-tab {
    display: block !important;
  }
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (mobile)
   The mobile layer above hardcodes dark colors (#0d0d14, #fff,
   rgba(255,255,255,…)) that clash under body.light-mode. Here we remap them to
   the theme variables so nav, text, buttons, headers & icons stay legible.
   ========================================================================== */
@media screen and (max-width: 1023px) {
  /* Header: filter button + logged-in avatar / menu trigger */
  body.light-mode #mHeaderFilterBtn,
  body.light-mode .auth-buttons-header button {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  /* Bottom navigation bar */
  body.light-mode .m-global-bottom-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid var(--border-color) !important;
  }

  body.light-mode .m-bottom-nav-item {
    color: var(--text-muted) !important;
  }

  body.light-mode .m-bottom-nav-item.m-active {
    color: var(--primary) !important;
  }
}

@media screen and (max-width: 767px) {
  /* ---- Filter modals (matcher / catalog) ---- */
  body.light-mode .search-card,
  body.light-mode .catalog-sidebar {
    background: var(--bg-primary) !important;
  }

  body.light-mode .search-card h2,
  body.light-mode .catalog-sidebar > div:first-child,
  body.light-mode .map-filters-sidebar .mobile-filters-header {
    border-bottom-color: var(--border-color) !important;
  }

  /* ---- Telegram-style profile view ---- */
  body.light-mode .mobile-telegram-sub-header,
  body.light-mode .telegram-sub-header {
    background: #ffffff !important;
    border-bottom-color: var(--border-color) !important;
  }

  body.light-mode .telegram-sub-title,
  body.light-mode .telegram-hero-name,
  body.light-mode .telegram-row-value,
  body.light-mode .telegram-menu-text {
    color: var(--text-main) !important;
  }

  body.light-mode .telegram-back-btn:active {
    color: var(--primary) !important;
  }

  body.light-mode .telegram-hero-card {
    background: linear-gradient(135deg, rgba(77, 61, 242, 0.10), #ffffff) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  body.light-mode .telegram-hero-avatar-wrapper {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  body.light-mode .telegram-edit-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
  }

  body.light-mode .telegram-section-card {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
  }

  body.light-mode .telegram-row-item,
  body.light-mode .telegram-menu-row {
    border-bottom-color: var(--border-color) !important;
  }

  body.light-mode .telegram-menu-divider {
    background: var(--border-color) !important;
  }

  body.light-mode .color-gray {
    color: var(--text-muted) !important;
  }
}