/* ==========================================================
   VextaLearn — Mobile UI layer (Phase 2)
   Global, additive layer loaded after main.css on every page.
   Nothing here overrides main.css selectors directly — it adds
   new components (bottom nav, FAB, skeletons, toasts) and a
   small set of global touch/overflow fixes scoped to mobile
   widths so desktop is never affected.
   ========================================================== */

/* ---------- Global mobile safety net (mobile widths only) ---------- */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; }

  /* iOS zooms the page on any input with font-size < 16px when focused —
     this is the #1 cause of "keyboard overlap / page jumps" complaints. */
  input, select, textarea, button {
    font-size: max(16px, 1rem);
  }

  /* Minimum comfortable tap target (WCAG 2.5.5 / Material guidance: 44px).
     Scoped away from .btn-sm (and similar compact variants) so small
     buttons in job rows, course cards, and admin tables keep their
     intended compact size instead of being inflated to 44px tall. */
  a.btn:not(.btn-sm), button.btn:not(.btn-sm), .nav-link, .dropdown-item, .form-check-input {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .form-check-input { min-height: 20px; display: inline-block; }

  /* Room for the fixed bottom nav so content never sits underneath it */
  body.has-bottom-nav {
    padding-bottom: calc(64px + var(--vxt-safe-bottom));
  }
}

/* ---------- Admin pages: prevent duplicate navigation ----------
   admin/_layout.html extends base.html, so it inherits the public
   top navbar, bottom nav and footer in addition to its own sidebar
   nav and topbar. Hide the public chrome on admin pages so only one
   navigation system shows at a time. */
body.admin-body .vxt-navbar,
body.admin-body .vxt-bottom-nav,
body.admin-body .vxt-footer {
  display: none !important;
}
/* The bottom-nav clearance padding is no longer needed once it's hidden */
body.admin-body.has-bottom-nav {
  padding-bottom: 0 !important;
}

/* ---------- Defensive nav/dropdown reset ----------
   Guards the two things a CDN hiccup (Bootstrap/Font Awesome fail to
   load) would break most visibly: list bullets on nav markup, and the
   navbar collapsing correctly on mobile widths. Matches Bootstrap's
   own navbar-expand-lg behavior exactly, so this is a no-op safety
   net when Bootstrap's CSS loads normally. */
.navbar-nav,
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.dropdown-menu {
  z-index: 1045; /* above bottom nav (1030) and FABs (1035/1040) */
}
@media (max-width: 991.98px) {
  .navbar-collapse { display: none; }
  .navbar-collapse.show { display: block; }
  .navbar-toggler { display: inline-block; }
}
@media (min-width: 992px) {
  .navbar-toggler { display: none !important; }
  .navbar-collapse { display: flex !important; }
}

/* ---------- Sticky header polish ---------- */
.vxt-navbar.sticky-top {
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.92);
  transition: box-shadow 0.2s ease, transform 0.25s ease;
}
.vxt-navbar.vxt-navbar--scrolled {
  box-shadow: 0 4px 20px rgba(26, 16, 53, 0.08);
}
.vxt-navbar.vxt-navbar--hidden {
  transform: translateY(-100%);
}

/* ---------- Bottom navigation (mobile only) ---------- */
.vxt-bottom-nav {
  display: none;
}
@media (max-width: 991.98px) {
  .vxt-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(26, 16, 53, 0.08);
    padding-bottom: var(--vxt-safe-bottom);
    box-shadow: 0 -4px 20px rgba(26, 16, 53, 0.06);
  }
}
.vxt-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  min-height: 56px;
  position: relative;
  transition: color 0.15s ease;
}
.vxt-bottom-nav__item i {
  font-size: 1.15rem;
  transition: transform 0.15s ease;
}
.vxt-bottom-nav__item.active {
  color: #6D38E8;
}
.vxt-bottom-nav__item.active i {
  transform: translateY(-2px);
}
.vxt-bottom-nav__item:active i {
  transform: scale(0.88);
}
.vxt-bottom-nav__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: #FF6B6B;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------- Skeleton loading ---------- */
.vxt-skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ecf3;
  border-radius: 10px;
}
.vxt-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: vxt-shimmer 1.4s infinite;
}
@keyframes vxt-shimmer {
  100% { transform: translateX(100%); }
}
.vxt-skeleton--text { height: 0.9em; margin-bottom: 8px; width: 100%; }
.vxt-skeleton--title { height: 1.4em; width: 60%; margin-bottom: 12px; }
.vxt-skeleton--thumb { width: 100%; aspect-ratio: 16/9; border-radius: 14px; }
.vxt-skeleton--card {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(26,16,53,0.05);
}

/* ---------- Native-style modals (bottom sheet on mobile) ---------- */
@media (max-width: 767.98px) {
  .modal.vxt-modal-sheet .modal-dialog {
    margin: 0;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
  }
  .modal.vxt-modal-sheet .modal-content {
    border-radius: 20px 20px 0 0;
    padding-bottom: var(--vxt-safe-bottom);
  }
}

/* ---------- Pull-to-refresh indicator ---------- */
.vxt-ptr-indicator {
  position: fixed;
  top: calc(8px + var(--vxt-safe-top));
  left: 50%;
  transform: translate(-50%, -60px);
  z-index: 1045;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26,16,53,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.vxt-ptr-indicator i {
  color: #6D38E8;
  transition: transform 0.1s linear;
}
.vxt-ptr-indicator--visible { transform: translate(-50%, 12px); }
.vxt-ptr-indicator--loading i { animation: vxt-spin 0.7s linear infinite; }
@keyframes vxt-spin { to { transform: rotate(360deg); } }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
.vxt-page-fade-enter {
  animation: vxt-fade-in 0.22s ease both;
}
@keyframes vxt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Toast notifications (upgrades window.showToast output) ---------- */
#toast-container {
  pointer-events: none;
}
#toast-container .vxt-alert {
  pointer-events: auto;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  #toast-container {
    top: auto !important;
    bottom: calc(76px + var(--vxt-safe-bottom)) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
  }
  /* .flash-container (server-rendered get_flashed_messages(), base.html)
     is the other half of this app's two notification systems alongside
     #toast-container (JS-triggered window.showToast() output) - both
     share the same fixed top:80px;right:20px;max-width:380px position on
     desktop (see .flash-container in main.css), but only #toast-container
     had a mobile override. Without it, every non-AJAX flash message (19+
     forms across the app) stayed pinned at the top on phones - never
     relocating below the bottom nav bar like AJAX toasts do, and using a
     max-width that doesn't respect small viewports. Mirroring the same
     bottom-anchored, full-width-with-margins treatment here makes both
     systems behave identically on mobile. */
  .flash-container {
    top: auto !important;
    bottom: calc(76px + var(--vxt-safe-bottom)) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
  }
}

/* ---------- Responsive typography ---------- */
@media (max-width: 575.98px) {
  h1, .display-4 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 5vw, 1.8rem); }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
  p, .lead { line-height: 1.6; }
}