/* ═══════════════════════════════════════════════════════
   mobile.css — PWA Mobile Theme Styles
   4 Themes: dark (default), midnight, neon, minimal
   ═══════════════════════════════════════════════════════ */

/* ── Base Mobile Styles ── */
@media (max-width: 768px) {
  :root {
    --mob-radius: 14px;
    --mob-padding: 16px;
    --mob-card-bg: rgba(255,255,255,.04);
  }

  /* Sidebar becomes bottom nav on mobile */
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 64px !important;
    flex-direction: row !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--border) !important;
    border-right: none !important;
    padding: 0 !important;
    z-index: 200;
    background: var(--mob-nav-bg, rgba(15,15,26,.97)) !important;
    backdrop-filter: blur(16px);
  }

  .sidebar-logo { display: none !important; }

  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }

  .nav-links li {
    flex: 1;
    min-width: 56px;
    max-width: 80px;
  }
  .nav-divider { display: none !important; }

  .nav-links a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
    font-size: .55rem !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }
  .nav-links a.active {
    border-bottom: 3px solid var(--gold, #FFD700) !important;
    background: rgba(255,215,0,.06) !important;
  }
  .nav-icon { font-size: 1.3rem !important; }
  .nav-label { font-size: .52rem !important; }

  .sidebar-footer { display: none !important; }

  /* Main content padding above bottom nav */
  .main-content {
    margin-left: 0 !important;
    padding: var(--mob-padding) !important;
    padding-bottom: 80px !important;
  }

  /* Page header */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-header h1 { font-size: 1.2rem !important; }

  /* Cards stack */
  .su-grid,
  .cms-pwa-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   THEME: Dark Gold (default)
   ══════════════════════════════════════════════ */
[data-mobile-theme="dark"],
body.theme-dark {
  --mob-bg: #0f0f1a;
  --mob-surface: #12122a;
  --mob-nav-bg: rgba(15,15,26,.97);
  --mob-accent: #FFD700;
  --mob-text: #e0e0e0;
  --mob-muted: #666;
  --mob-card-border: rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════
   THEME: Midnight Blue
   ══════════════════════════════════════════════ */
[data-mobile-theme="midnight"],
body.theme-midnight {
  --mob-bg: #08091a;
  --mob-surface: #0d0f2e;
  --mob-nav-bg: rgba(8,9,26,.97);
  --mob-accent: #4f6ef7;
  --mob-text: #d0d8ff;
  --mob-muted: #5060aa;
  --mob-card-border: rgba(79,110,247,.15);

  --gold: #4f6ef7;
  --border: rgba(79,110,247,.15);
}
body.theme-midnight .sidebar { background: var(--mob-nav-bg) !important; }
body.theme-midnight .nav-links a.active { border-bottom-color: #4f6ef7 !important; background: rgba(79,110,247,.1) !important; }
body.theme-midnight .btn-gold {
  background: linear-gradient(135deg, #2a3a9e, #4f6ef7) !important;
  color: #fff !important;
  border-color: rgba(79,110,247,.4) !important;
}
body.theme-midnight .su-card::after,
body.theme-midnight .cms-card::after { background: linear-gradient(90deg,transparent,rgba(79,110,247,.25),transparent); }

/* ══════════════════════════════════════════════
   THEME: Neon Pulse
   ══════════════════════════════════════════════ */
[data-mobile-theme="neon"],
body.theme-neon {
  --mob-bg: #030310;
  --mob-surface: #060618;
  --mob-nav-bg: rgba(3,3,16,.97);
  --mob-accent: #00ffcc;
  --mob-text: #ccffee;
  --mob-muted: #226655;
  --mob-card-border: rgba(0,255,204,.12);

  --gold: #00ffcc;
  --border: rgba(0,255,204,.12);
}
body.theme-neon .sidebar { background: var(--mob-nav-bg) !important; }
body.theme-neon .nav-links a.active { border-bottom-color: #00ffcc !important; background: rgba(0,255,204,.07) !important; }
body.theme-neon .btn-gold {
  background: linear-gradient(135deg, #004433, #00ffcc) !important;
  color: #000 !important;
  border-color: rgba(0,255,204,.4) !important;
}
body.theme-neon .su-card::after,
body.theme-neon .cms-card::after { background: linear-gradient(90deg,transparent,rgba(0,255,204,.2),transparent); }
body.theme-neon .cms-tab.active { color: #00ffcc; background: rgba(0,255,204,.08); border-color: rgba(0,255,204,.25); }

/* ══════════════════════════════════════════════
   THEME: Clean Light (Minimal)
   ══════════════════════════════════════════════ */
[data-mobile-theme="minimal"],
body.theme-minimal {
  --mob-bg: #f5f6fa;
  --mob-surface: #ffffff;
  --mob-nav-bg: rgba(255,255,255,.97);
  --mob-accent: #1a1a2e;
  --mob-text: #1a1a2e;
  --mob-muted: #999;
  --mob-card-border: rgba(0,0,0,.08);

  --gold: #1a1a2e;
  --border: rgba(0,0,0,.08);
  background-color: #f5f6fa;
  color: #1a1a2e;
}
body.theme-minimal .sidebar { background: var(--mob-nav-bg) !important; border-top-color: rgba(0,0,0,.1) !important; }
body.theme-minimal .nav-links a { color: #666 !important; }
body.theme-minimal .nav-links a.active { border-bottom-color: #1a1a2e !important; color: #1a1a2e !important; background: rgba(0,0,0,.04) !important; }
body.theme-minimal .main-content { background: #f5f6fa; }
body.theme-minimal .su-card,
body.theme-minimal .cms-card { background: #fff; border-color: rgba(0,0,0,.08); }
body.theme-minimal .su-card::after,
body.theme-minimal .cms-card::after { background: none; border-top: 2px solid rgba(0,0,0,.06); }
body.theme-minimal .cms-table th { color: #999; }
body.theme-minimal .cms-table td { color: #333; }
body.theme-minimal .cms-input { background: #f0f1f8; border-color: rgba(0,0,0,.12); color: #333; }
body.theme-minimal .cms-tab { color: #999; }
body.theme-minimal .cms-tab.active { color: #1a1a2e; background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); }
body.theme-minimal .btn-gold { background: #1a1a2e !important; color: #fff !important; border-color: #1a1a2e !important; }
body.theme-minimal .page-header h1,
body.theme-minimal .page-header p { color: #333; }
body.theme-minimal .cms-card-title { color: #1a1a2e; }

/* ── PWA Install Banner (mobile) ── */
.pwa-install-bar {
  display: none;
  position: fixed;
  bottom: 70px;
  left: 12px;
  right: 12px;
  background: rgba(15,15,26,.96);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 14px;
  padding: 12px 16px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.pwa-install-bar.show { display: flex; }
.pwa-install-bar .pwa-install-icon { font-size: 1.6rem; flex-shrink: 0; }
.pwa-install-bar .pwa-install-text { flex: 1; }
.pwa-install-bar .pwa-install-text strong { display: block; color: #eee; font-size: .88rem; }
.pwa-install-bar .pwa-install-text span { color: #666; font-size: .75rem; }
.pwa-install-btn {
  padding: 8px 16px;
  background: rgba(255,215,0,.15);
  color: var(--gold, #FFD700);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 8px;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.pwa-install-btn:hover { background: rgba(255,215,0,.25); }
.pwa-install-dismiss { background: none; border: none; color: #555; cursor: pointer; padding: 4px; font-size: 1rem; }