/* ═══════════════════════════════════════════════════════════════
   mobile.css — Shared responsive & view-mode styles
   Loaded by all app pages after their own styles.
═══════════════════════════════════════════════════════════════ */

/* ── View-mode toggle button ─────────────────────────────────── */
.view-mode-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; padding: 5px 8px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; font-size: 0.78rem; font-weight: 600;
  color: var(--text2); transition: all 0.2s; white-space: nowrap;
  user-select: none;
}
.view-mode-btn:hover { border-color: var(--accent); color: var(--text); }
.view-mode-btn .vm-icon { font-size: 1rem; line-height: 1; }
.view-mode-btn .vm-label { font-size: 0.68rem; display: none; }
@media (min-width: 640px) { .view-mode-btn .vm-label { display: inline; } }

/* Active indicator when forced to mobile mode */
body.view-mobile .view-mode-btn { border-color: var(--accent); color: var(--accent); background: rgba(255,45,120,0.08); }

/* ── Bottom navigation bar (mobile / view-mobile) ────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(16px);
}
body.light .bottom-nav { background: rgba(255,255,255,0.97); }

.bottom-nav-items {
  display: flex; align-items: stretch; justify-content: space-around;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 6px; border-radius: 10px; text-decoration: none;
  color: var(--text2); font-size: 0.58rem; font-weight: 600;
  transition: color 0.2s; flex: 1; cursor: pointer;
  background: none; border: none;
}
.bottom-nav-item:hover, .bottom-nav-item.active { color: var(--accent); }
.bottom-nav-icon { font-size: 1.15rem; line-height: 1; }

/* ── Global responsive fixes ─────────────────────────────────── */

/* Topbar: hide lang switcher on very small screens */
@media (max-width: 480px) {
  .lang-switcher { display: none !important; }
  .topbar-breadcrumb > span:first-child { display: none; }
  .topbar-breadcrumb > span:nth-child(2) { display: none; }
  .dash-topbar { padding: 0 12px; gap: 8px; }
  .dash-main { padding: 16px 12px !important; }
}

/* Filter bar wrapping */
@media (max-width: 600px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-search { max-width: 100% !important; }
  .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header-actions { width: 100%; justify-content: flex-end; }
}

/* Video grid */
@media (max-width: 400px) {
  .video-grid { grid-template-columns: 1fr !important; }
}

/* Create page */
@media (max-width: 600px) {
  .step-panel { padding: 16px !important; }
  .prompt-area { font-size: 0.92rem !important; }
}

/* Schedule page */
@media (max-width: 600px) {
  .cal-grid { grid-template-columns: repeat(7, 1fr) !important; font-size: 0.65rem; }
  .cal-day { min-height: 44px !important; padding: 4px !important; }
  .sched-list { gap: 10px; }
}

/* Settings page */
@media (max-width: 480px) {
  .settings-nav { gap: 4px !important; }
  .settings-nav-btn { padding: 8px 10px !important; font-size: 0.78rem !important; }
  .set-card { padding: 16px !important; }
}

/* Analytics */
@media (max-width: 600px) {
  .analytics-grid { grid-template-columns: 1fr !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Library modal */
@media (max-width: 600px) {
  .vm-inner { flex-direction: column !important; max-width: 100% !important; max-height: 95vh !important; }
  .vm-player { max-height: 50vh; }
  .vm-details { padding: 12px !important; }
}

/* ── Force-mobile mode (body.view-mobile) ─────────────────────── */
/* When user manually switches to mobile mode on desktop,
   apply the same layout as ≤768px breakpoint */

body.view-mobile .dash-sidebar { transform: translateX(-240px) !important; width: 240px !important; }
body.view-mobile .dash-sidebar.open { transform: translateX(0) !important; }
/* On mobile, collapse btn is hidden; sidebar is off-canvas */
body.view-mobile .sidebar-collapse-btn { display: none !important; }
body.sidebar-collapsed.view-mobile .dash-sidebar { transform: translateX(-240px) !important; }
body.view-mobile .sidebar-close { display: block !important; }
body.view-mobile .dash-body { margin-left: 0 !important; }
body.view-mobile .topbar-hamburger { display: block !important; }
body.view-mobile .dash-main { padding: 20px 16px !important; }
body.view-mobile .lang-switcher { display: none !important; }
body.view-mobile .stats-strip { grid-template-columns: repeat(2,1fr) !important; }
body.view-mobile .stats-row { grid-template-columns: repeat(2,1fr) !important; }
body.view-mobile .video-grid { grid-template-columns: repeat(2,1fr) !important; }
body.view-mobile .filter-bar { flex-direction: column; align-items: stretch; }
body.view-mobile .filter-search { max-width: 100% !important; }
body.view-mobile .settings-layout { grid-template-columns: 1fr !important; }
body.view-mobile .settings-nav { position: static !important; flex-direction: row; flex-wrap: wrap; }
body.view-mobile .cal-layout { grid-template-columns: 1fr !important; }
body.view-mobile .bottom-nav { display: block !important; }
body.view-mobile .dash-body { padding-bottom: 72px; }
body.view-mobile .page-header { flex-direction: column; align-items: flex-start; }
body.view-mobile .page-header-actions { width: 100%; justify-content: flex-end; }
body.view-mobile .content-grid { grid-template-columns: 1fr !important; }
body.view-mobile .right-col { grid-template-columns: 1fr !important; }

/* On real mobile: always show bottom-nav, hide sidebar */
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  .dash-body { padding-bottom: 72px; }
  .dash-sidebar { transform: translateX(-240px); width: 240px !important; }
  .dash-sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block !important; }
  .sidebar-collapse-btn { display: none !important; }
  .dash-body { margin-left: 0 !important; }
  .topbar-hamburger { display: block !important; }
  body.sidebar-collapsed .dash-body { margin-left: 0 !important; }
}