/* ═══════════════════════════════════════════════════════════════
   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;
  -webkit-user-select: none; 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; }

/* ── Safe-area (iPhone notch / Dynamic Island) ───────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  .dash-topbar, .navbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .bottom-nav { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .dash-sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── 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) {
  /* Genel taşma önlemi */
  html, body { overflow-x: hidden; max-width: 100vw; }

  .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; overflow-x: hidden; }
  .dash-layout { overflow-x: hidden; }
  .topbar-hamburger { display: block !important; }
  body.sidebar-collapsed .dash-body { margin-left: 0 !important; }

  /* Topbar genel — taşmayı önle */
  .dash-topbar { padding: 0 12px; gap: 8px; max-width: 100vw; }
  .topbar-breadcrumb { flex: 1; min-width: 0; overflow: hidden; }
  .topbar-breadcrumb strong,
  .topbar-breadcrumb span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { flex-shrink: 0; gap: 6px; }
  .topbar-actions .lang-switcher { display: none; }

  /* İçerik kartları taşmasın */
  .content-grid { grid-template-columns: 1fr !important; }
  .card, .stat-card, .lib-card { min-width: 0; }

  /* Tablo ve geniş içerik kaydırma */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Flex/grid çocuklar minimum 0 genişlik */
  .dash-main > * { min-width: 0; }
  .stats-strip { grid-template-columns: repeat(2,1fr) !important; }
  .right-col { grid-template-columns: 1fr !important; }
  .cal-layout { grid-template-columns: 1fr !important; }
  .settings-layout { grid-template-columns: 1fr !important; }

  /* Görsel ve medya taşmasın */
  img, video, iframe, embed, object { max-width: 100%; height: auto; }

  /* Modal/dialog */
  .modal-inner, .dialog-inner { max-width: calc(100vw - 24px) !important; margin: 0 12px !important; }

  /* Buton grubu sarma — topbar-actions asla wrap etmemeli */
  .btn-group { flex-wrap: wrap; }
  .topbar-actions { flex-wrap: nowrap; }

  /* Uzun kelimeler/URL kırılsın */
  p, span, h1, h2, h3, h4, h5, h6, a, li, td, th { overflow-wrap: break-word; word-break: break-word; }
}

/* Sidebar logout butonu — ikon + yazı yan yana */
.sidebar-logout {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: 0.88rem; font-weight: 600;
  padding: 6px 8px; border-radius: 6px;
  transition: color 0.2s, background 0.2s; flex-shrink: 0;
}
.sidebar-logout:hover { color: var(--accent); background: rgba(255,45,120,0.08); }
.sidebar-logout svg { flex-shrink: 0; }
body.sidebar-collapsed .sidebar-logout-text { display: none; }

/* Sidebar — mobilde alt nav altında kalmasın */
@media (max-width: 768px) {
  .dash-sidebar {
    padding-bottom: 72px !important; /* bottom-nav yüksekliği kadar boşluk */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .sidebar-nav {
    overflow-y: visible !important;
  }
}

/* Topbar — mobilde sıkışmayı önle */
@media (max-width: 768px) {
  /* Eski HTML kontrolleri (JS değiştirmeden önce gizle) */
  .dash-topbar .lang-switcher,
  .dash-topbar .theme-switch { display: none !important; }
  /* Dil seçiciyi topbar'dan kaldır */
  .topbar-lang-wrap { display: none !important; }
  /* Credits pill — miktar görünsün */
  .topbar-credits { padding: 5px 10px !important; max-width: 120px; min-width: 0; }
  .topbar-credits #topbarCreditCount { display: inline !important; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Tek satır kal */
  .topbar-actions { flex-wrap: nowrap !important; }
}

/* Çok küçük ekranlar (≤380px) */
@media (max-width: 380px) {
  .dash-topbar { padding: 0 8px; gap: 6px; }
  .dash-main { padding: 12px 10px !important; }
  .step-panel { padding: 12px 12px 160px !important; }
  .set-card { padding: 12px !important; }
  .stats-strip { grid-template-columns: 1fr !important; }
}

/* ── Dashboard: notification panel taşmasın ── */
@media (max-width: 768px) {
  .notifPanel {
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }
}

/* ── Library: kart context menüsü viewport dışına çıkmasın ── */
@media (max-width: 768px) {
  .card-ctx-menu {
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
  }
}

/* ── Library / Analytics: filtre tab satırı wrap yapsın ── */
@media (max-width: 480px) {
  .filter-tabs, .tab-bar { flex-wrap: wrap !important; gap: 4px !important; }
  .filter-tab, .tab-item { font-size: .75rem !important; padding: 5px 8px !important; }
}

/* ── Settings: sticky nav mobilde normal akışa dönsün ── */
@media (max-width: 768px) {
  .settings-nav { position: static !important; top: auto !important; }
}

/* ── Settings: sosyal kart grid tek kolon ── */
@media (max-width: 480px) {
  .social-cards-grid { grid-template-columns: 1fr !important; }
}

/* ── Short-editor: telefon mockup'ı küçük ekrana sığsın ── */
@media (max-width: 600px) {
  .phone-mockup {
    width: min(180px, 46vw) !important;
    height: auto !important;
    aspect-ratio: 210 / 455;
  }
  .content-panel { max-height: 45vh !important; }
}

/* ── 360px ve altı genel güvenlik ── */
@media (max-width: 360px) {
  .page-header { padding: 0 8px !important; }
  .btn, button { font-size: .78rem; }
}