/* =============================================================================
   Popin SPA v2 — Mobile App Stylesheet
   Loaded last (after all theme files) so it wins specificity cleanly.
   Targets: phones ≤ 576 px, small tablets ≤ 768 px, anything ≤ 991 px.
   ============================================================================= */

/* ── 0. Global mobile typography ─────────────────────────────────────────── */

@media (max-width: 991.98px) {
  body,
  p, span, a, li, td, th, label, div,
  .box-title, .icon-name, .section-title,
  .kpi-label, .stat-label, .quick-label,
  .branch-name-mobile, .shell-drawer-link,
  .shell-mobile-bottom-link,
  .white-box, .filter-form,
  table, .list-group,
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
  }

  body {
    font-size: 15px !important;
  }

  p, span, a, li, div, td, th, label {
    font-size: 14px;
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 17px !important; }
  h5 { font-size: 16px !important; }
  h6 { font-size: 15px !important; }
}

/* ── 1. Foundation ────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Prevent iOS from inflating text on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  /* Prevent rubber-band over-scroll on iOS for the shell chrome */
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body scroll-lock when the side drawer is open.
   top is set dynamically via JS (body.style.top = -scrollY) so iOS does not
   jump the page to the top when position:fixed is applied. */
body.shell-drawer-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* The app shell scrolls inside .shell-main (not the body), so also lock that
   scroller while the drawer is open to keep the background from moving. */
body.shell-drawer-open .shell-main {
  overflow: hidden;
}

/* ── 2. Touch targets — every interactive element ≥ 44 × 44 px ──────────── */

@media (max-width: 991.98px) {
  button,
  [role="button"],
  .btn,
  .nav-btn,
  .shell-toggler,
  .shell-location,
  .shell-logout,
  .shell-drawer-link,
  .shell-drawer-logout,
  .shell-mobile-bottom-link {
    min-height: 44px;
  }
}

/* ── 3. Form inputs — 16 px minimum prevents iOS auto-zoom on focus ─────── */

@media (max-width: 991.98px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="url"],
  select,
  textarea,
  .form-control,
  .floating-input,
  .floating-select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Keep login capsule inputs looking right */
  .cmn-form .form-control {
    height: 48px !important;
  }
}

/* ── 4. Shell main — clear header + bottom-nav on mobile ────────────────── */

@media (max-width: 991.98px) {
  /* Extra bottom padding so last card is never hidden behind the bottom nav */
  .shell-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Collapse the huge legacy inside padding injected by main.css */
  .shell-main .main-section.inside,
  .shell-main .main-section {
    padding-top: 16px !important;
    margin-bottom: 0 !important;
  }

  /* Suppress the legacy navigation-bar.inside (the old per-page pill nav) */
  .shell-main .navigation-bar,
  .shell-main .navigation-bar.inside,
  .shell-main .navbar-item {
    display: none !important;
  }
}

/* ── 5. AppShell bottom navigation ──────────────────────────────────────── */

@media (max-width: 991.98px) {
  /* Safe-area-aware padding so the tab bar clears iPhone home indicator */
  .shell-mobile-bottom {
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
  }

  /* Slightly larger icons so they're easier to tap */
  .shell-mobile-bottom-link img {
    width: 26px;
    height: 26px;
  }

  .shell-mobile-bottom-link {
    font-size: 0.82rem;
    font-weight: 700 !important;
    padding: 0.4rem 0.2rem;
  }
}

/* ── 6. AppShell header safe-area (notch on left/right landscape) ────────── */

@media (max-width: 991.98px) {
  .shell-header-bar {
    padding-left: max(0.6rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.6rem, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 374px) {
  /* Very small phones (SE first gen) */
  .shell-brand img {
    width: 76px !important;
  }

  .shell-header-title h1 {
    font-size: 0.95rem;
  }
}

/* ── 7. Mobile drawer — safe-area, slide from right ─────────────────────── */

@media (max-width: 991.98px) {
  .shell-drawer {
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

/* ── 8. Branch-name mobile strip ────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .branch-name-mobile {
    display: flex !important;
    padding: 10px 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .branch-name-mobile .page-title h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
  }

  .branch-name-mobile .name-text {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    opacity: 0.9;
  }

  .branch-name-mobile .name-text span {
    display: block;
    font-weight: 600;
    font-size: 13px;
    opacity: 0.8;
  }
}

/* ── 9. Dashboard icon-box grid ──────────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* Tighter card padding on small phones */
  .box.icon-box {
    padding: 12px 8px;
    border-radius: 12px;
    height: auto !important;
  }

  .icon-wrap {
    gap: 6px;
  }

  .icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .icon-name {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* ── 10. Stat / white-box cards ─────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .white-box {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .box-count {
    font-size: 32px !important;
    font-weight: 700 !important;
  }

  .box-title {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .winner-img {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── 11. Section headings ────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 14px 0 8px !important;
  }
}

/* ── 12. Tables — horizontal scroll so they never break the layout ───────── */

@media (max-width: 991.98px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Legacy wide list-group tables scroll inside their container */
  .list-group-wrap,
  .table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.list-group {
    min-width: 640px !important;
  }
}

/* ── 13. Modals (vue-js-modal .vm--modal) ───────────────────────────────── */

@media (max-width: 768px) {
  .vm--modal {
    width: 96vw !important;
    max-width: 96vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 58px !important;
    max-height: calc(100vh - 70px) !important;
    height: auto !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    -webkit-overflow-scrolling: touch;
  }

  .vm--modal .table-responsive {
    height: auto !important;
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 14. Filter / report forms ───────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .filter-box {
    padding: 14px !important;
    border-radius: 12px;
  }

  .filter-form .floating-input,
  .filter-form .floating-select {
    height: 44px !important;
    font-size: 16px !important;
  }
}

/* ── 15. KPI / Admin landing dashboard ───────────────────────────────────── */

@media (max-width: 575.98px) {
  .hero {
    padding: 14px 16px !important;
  }

  .hero-title {
    font-size: 20px !important;
  }

  .kpi-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  .kpi-value {
    font-size: 26px !important;
    font-weight: 700 !important;
  }

  .kpi-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 20px !important;
  }

  .module-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .stat-value {
    font-size: 18px !important;
  }

  .quick-link {
    padding: 14px 8px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .quick-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  .quick-label {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .chart-wrap {
    height: 180px !important;
  }
}

/* ── 16. Login page ──────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .form-area {
    padding: 24px 12px !important;
    align-items: flex-start !important;
    padding-top: max(40px, env(safe-area-inset-top, 40px)) !important;
  }

  .form-wrapper {
    padding: 28px 20px !important;
    border-radius: 18px !important;
    max-width: 100% !important;
  }

  .logo-text {
    font-size: 20px !important;
  }

  .submit-btn {
    height: 52px !important;
    font-size: 16px !important;
  }
}

/* ── 17. Containers — tighter gutters on very small phones ──────────────── */

@media (max-width: 374px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 18. Active / tap state for cards (no-hover touch devices) ──────────── */

/* Remove iOS grey tap flash and prevent double-tap zoom delay on menu cards */
.box.icon-box,
a.box.icon-box {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse) {
  .box.icon-box:active,
  .quick-link:active,
  .kpi-card:active,
  .module-card:active {
    opacity: 0.75;
    transform: scale(0.97);
    transition: transform 0.08s ease, opacity 0.08s ease;
  }

  /* Kill the translateY hover effect that doesn't work on touch */
  .box.icon-box:hover,
  .quick-link:hover,
  .kpi-card:hover {
    transform: none;
  }
}

/* ── 19. Utility: hide/show helpers ─────────────────────────────────────── */

@media (max-width: 575.98px) {
  .hide-xs { display: none !important; }
}

@media (min-width: 576px) {
  .show-xs-only { display: none !important; }
}

/* ── 20. Report table info rows ─────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .table-info span {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .table-info p {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

/* ── 21. Bottom offset when AppShell bottom-nav is present ──────────────── */

@media (max-width: 991.98px) {
  /* Ensure long forms / tables don't hide last row under the bottom nav */
  .main-section.inside,
  .main-section {
    padding-bottom: max(100px, calc(88px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* ── 22. Smooth page transitions ─────────────────────────────────────────── */

.shell-main > * {
  animation: pageIn 0.22s ease-out both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    /* Keep translateY(0): the retained transform makes each page root a
       containing block for its position:fixed children (e.g. each page's own
       .background-image), so the page background stays contained to the content
       area instead of spilling down the whole viewport. The full-size photo
       viewer doesn't rely on this — it's appended to <body> (see
       src/utils/imageViewer.js), so it escapes the containing block anyway. */
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-main > * {
    animation: none;
  }
}

/* ── 23. Native date inputs ("date boxes" in report filters) ─────────────── */
/* Every report section's filter card renders its date pickers as
   <input type="date" class="field-input">. In the iOS / WebKit WebView the
   selected value is centred and vertically misaligned and the calendar picker
   indicator is clipped, so the boxes looked broken across all sections.
   Normalise them everywhere: left-aligned value, consistent height/centring,
   and a visible, tappable calendar icon pinned to the right. */

.field-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  min-height: 44px;
  /* Native date inputs have a large intrinsic min-width; allow them to shrink
     so the From/To pair stays side by side in their two-column grid. */
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}

/* WebKit centres the displayed date text by default — force left alignment. */
.field-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

.field-input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  line-height: 1.2;
}

/* Keep the calendar picker indicator visible, tappable and pinned to the right
   (resetting -webkit-appearance above otherwise hides it). */
.field-input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  padding-left: 8px;
  cursor: pointer;
  opacity: 0.7;
}
.field-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── 24. Modal popups (vue-js-modal) — keep inside the viewport ──────────── */
/* On phones these popups could mis-centre and overflow off-screen (e.g. the
   Vendor Product cart). Pin every modal to the middle 94vw of the viewport and
   let wide content (tables) scroll inside it instead of pushing the box past
   the screen edge. `body` prefix + !important so it wins over any per-page
   modal rule. Applies app-wide, so every popup is constrained the same way. */
@media (max-width: 991.98px) {
  /* Centre via left:50% + translateX(-50%) — the SAME method section 13 uses —
     so the two rules don't fight (mixing left:3vw with a leftover translateX
     pushed the modal off-screen to the left). */
  body .vm--modal {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 94vw !important;
    max-width: 94vw !important;
    box-sizing: border-box !important;
  }
  body .vm--modal .box,
  body .vm--modal .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body .vm--modal table {
    width: 100%;
  }
}

/* ── Camera (vue-web-cam) live preview inside modals ─────────────────────────
   The <video width="100%"> has no height cap, so it renders at the camera's
   native resolution — blowing the popup up and pushing it to the top of the
   screen. Constrain it to a sane, contained size on every page that opens a
   camera (MTO / Sale / Rental webcam modals). */
.vm--modal video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 46vh !important;
  object-fit: contain !important;
  display: block;
  background: #000;
}

/* ── SweetAlert2 (vue-simple-alert) buttons ──────────────────────────────────
   The default confirm/cancel buttons stretch wide (look full-width) on mobile.
   Keep them compact, auto-width and with rounded corners. */
.swal2-popup .swal2-actions {
  gap: 10px;
}
.swal2-popup .swal2-styled {
  width: auto !important;
  min-width: 96px;
  padding: 9px 26px !important;
  margin: 4px 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ── 25. Tap feedback — visual press effect on interactive elements ───────── */
button,
a,
.btn,
.box.btn-icon-box,
.btn-icon-box,
.action-btn,
.seg-btn,
.status-pill,
.shell-mobile-bottom-link,
.shell-drawer-link {
  transition: transform 0.06s ease, opacity 0.06s ease;
}
button:active,
a:active,
.btn:active,
.box.btn-icon-box:active,
.btn-icon-box:active,
.action-btn:active,
.seg-btn:active,
.status-pill:active,
.shell-mobile-bottom-link:active,
.shell-drawer-link:active {
  transform: scale(0.95);
  opacity: 0.8;
}