/* ══════════════════════════════════════════════════════
 * MOBILE OVERRIDES — Janszen Media HQ v10
 * Loaded AFTER styles.min.css; only contains mobile-first
 * patches for iOS Safari / Android Chrome on small screens.
 * ══════════════════════════════════════════════════════ */

/* ------------------------------------------------------
 * TABLE HORIZONTAL SCROLL
 * All wide tables (companies, contacts, deals, tickets,
 * logbooks, reports, invoices, websites) get a horizontal
 * scroll container with a fade indicator on the right edge.
 * Works on both the existing `.twrap` wrapper and any raw
 * `<table>` dropped into a panel.
 * ------------------------------------------------------ */
.table-scroll,
.panel .twrap,
.panel > table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Right-edge fade hint — scoped to wrapper so it doesn't
   bleed onto other content. Safe on desktop too. */
.panel .twrap,
.table-scroll {
  position: relative;
}
.panel .twrap::after,
.table-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(8,8,13,0), rgba(8,8,13,0.85));
  opacity: 0;
  transition: opacity .15s ease;
}
/* Only show the fade if the wrapper is actually overflowing.
   Fallback (always-on below 600px) in the media query below. */

/* ------------------------------------------------------
 * CLOUD-DOWN BANNER
 * Keep it compact on small screens so it doesn't eat half
 * the viewport.
 * ------------------------------------------------------ */
@media (max-width: 600px) {
  #jmhq-cloud-banner {
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1.35;
  }
}

/* ══════════════════════════════════════════════════════
 * PHONE-SIZED SCREENS (< 600px)
 * ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Prevent horizontal page scroll — individual table
     scrollers handle overflow locally. */
  html, body {
    overflow-x: hidden;
  }

  /* Panel padding is tighter so tables have more room. */
  .panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Fade indicator always visible on mobile (best effort —
     can't cheaply detect overflow in pure CSS). */
  .panel .twrap::after,
  .table-scroll::after {
    opacity: 1;
  }

  /* Force wide raw tables inside panels to scroll. Some
     panels (logbooks, settings) drop <table> straight into
     the DOM without a wrapper — catch those too. */
  .panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Keep header + body aligned when `display:block` hoists
     them out of their table context. */
  .panel table thead,
  .panel table tbody,
  .panel table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }

  /* ----------------------------------------------------
   * GENERIC MODAL → FULL-SCREEN on phone
   * Covers .modal (generic) and .tkmo (tickets). Sticky
   * header so the close button is always reachable.
   * ---------------------------------------------------- */
  .mo-ov .modal,
  .tkmo-ov .tkmo {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }

  /* Sticky header region across both modal flavors. */
  .mo-ov .modal .mo-head,
  .tkmo-ov .tkmo .tkmo-hd {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surf2, #191b24);
    border-bottom: 1px solid var(--b1, #23242e);
  }

  /* Body area scrolls, footer pins to bottom. */
  .mo-ov .modal .mo-body,
  .tkmo-ov .tkmo .tkmo-bd {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mo-ov .modal .mo-foot,
  .tkmo-ov .tkmo .tkmo-ft {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--surf2, #191b24);
    border-top: 1px solid var(--b1, #23242e);
  }

  /* Enlarge close "×" hit target — accessibility min 44×44. */
  .mo-ov .modal .dp-close,
  .tkmo-ov .tkmo .dp-close,
  .gate-eye {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ----------------------------------------------------
   * SIDEBAR — off-canvas on phone; toggled by `mob-on`
   * class on <body> (set by app.js brandBtn / mobMenuBtn
   * handlers at ~app.js:520 / :530).
   * ---------------------------------------------------- */
  .side {
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: min(86vw, 320px);
    z-index: 9000;
  }
  body.mob-on .side {
    transform: translateX(0);
    box-shadow: 2px 0 18px rgba(0, 0, 0, .45);
  }
  /* Main content takes full width on phone — no left offset
     for the (now off-canvas) sidebar. */
  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* The existing .mob-ov backdrop (#mobOv in index.html) is
     shown/hidden by styles.min.css via body.mob-on — we leave
     display rules alone and just guarantee it sits above main
     content and below the sidebar. */
  .mob-ov {
    z-index: 8990;
  }

  /* ----------------------------------------------------
   * TOP NAV — search bar collapses gracefully.
   * ---------------------------------------------------- */
  .tnav {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .srch-wrap {
    max-width: 180px;
  }
  .srch-kb {
    display: none; /* no keyboard shortcut on touch */
  }

  /* ----------------------------------------------------
   * FORMS — prevent iOS zoom on focus (font-size >= 16px).
   * ---------------------------------------------------- */
  input.fi,
  input.gate-pw,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="month"],
  textarea.fta,
  select.fs {
    font-size: 16px !important;
  }

  /* ----------------------------------------------------
   * LOGIN GATE — fix the eye button overlapping the input.
   * The minified .gate-box input rule resets padding to
   * 12px 14px which lets the absolutely-positioned eye
   * button cover the typing area. Restore right padding
   * and pin the eye to a clean fixed-size circle.
   * ---------------------------------------------------- */
  .gate-box input.gate-pw,
  .gate-box .gate-pw {
    padding: 12px 56px 12px 14px !important;
  }
  .gate-eye {
    width: 40px;
    height: 40px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    z-index: 2;
    color: var(--mu);
  }
  .gate-eye svg { width: 22px; height: 22px; display: block; }
  .gate-eye:active { background: rgba(255, 255, 255, .08); color: var(--hi); }

  /* ----------------------------------------------------
   * DASHBOARD / PANEL HEADERS — stack neatly.
   * ---------------------------------------------------- */
  .ph-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* ----------------------------------------------------
   * TAB STRIPS — let tabs scroll horizontally instead of
   * clipping or wrapping oddly. Prevents the "missing
   * fields on some tabs" confusion when later tabs are
   * off-screen. Used by modals (.mo-tabs) and detail
   * panels (.dp-tabs). Keeps active-tab underline intact.
   * ---------------------------------------------------- */
  .mo-tabs,
  .dp-tabs,
  [class*="-tabs"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
    white-space: nowrap;
  }
  .mo-tabs::-webkit-scrollbar,
  .dp-tabs::-webkit-scrollbar,
  [class*="-tabs"]::-webkit-scrollbar { height: 2px; }
  .mo-tab,
  .dp-tab,
  .mo-tab.on,
  .dp-tab.on {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* ----------------------------------------------------
   * BUTTON / ACTION ROWS IN HEADERS — the ".ph-row"
   * rightmost action cluster sometimes has its own
   * inline flex setup; make sure the action buttons
   * wrap instead of overflowing the viewport.
   * ---------------------------------------------------- */
  .ph-row > div[style*="display:flex"],
  .ph-row > div[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ----------------------------------------------------
   * CALENDAR GRID — keep cells tappable on phones.
   * Existing inline style uses grid-template-columns:
   * repeat(7,1fr); cells become too narrow to read but
   * remain tappable.
   * ---------------------------------------------------- */
  #cal-grid {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════════
 * TABLET (600–900px): softer adjustments
 * ══════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 900px) {
  .panel .twrap,
  .table-scroll,
  .mk-lead-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════
 * MARKETING — Leads table mobile polish
 * The leads grid keeps its desktop layout inside a horizontal
 * scroll container so columns don't compress unreadably; users
 * swipe to see Status / Received / Value / Actions on phones.
 * Sub-tab pills and filter bar wrap automatically (already
 * flex-wrap in the inline styles).
 * ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .mk-lead-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Faint right-edge fade so it's obvious there's more to swipe. */
    background:
      linear-gradient(to right, var(--bg, #08080d), transparent 8px),
      linear-gradient(to left,  var(--bg, #08080d), transparent 8px);
    background-attachment: local, local;
    background-repeat: no-repeat;
    background-size: 12px 100%, 12px 100%;
    background-position: left, right;
  }
  /* Sub-tab pills shrink slightly so 4 fit on one row before wrapping. */
  .mk-leadcat {
    font-size: .65rem !important;
    padding: 5px 10px !important;
  }
}