/* ================================================================
   ck_mobile.css — Mobile responsiveness & touch enhancements
   Breakpoints:  sm ≤ 640px  |  md ≤ 768px  |  lg ≤ 1024px
   All rules AUGMENT base CSS — no overrides to layout/main/ui.css
================================================================ */

/* ── Scrollable table wrapper ────────────────────────────────── */
.cl-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* ── Swipe hint on watchlist rows ──────────────────────────────
   Add class .ck-swipeable to rows; JS sets transform on touch.    */
.ck-swipeable {
  transition: transform 0.18s ease;
  position: relative;
  touch-action: pan-y;
}

.ck-swipe-delete-bg {
  position: absolute;
  inset: 0;
  right: 0;
  background: rgba(255, 68, 68, 0.15);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  color: #FF4444;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
  border-radius: inherit;
}

.ck-swipeable.ck-swiping .ck-swipe-delete-bg { opacity: 1; }

/* ── Charts: allow pinch-zoom and swipe pan ────────────────────
   lightweight-charts handles touch internally; we only set
   touch-action on the chart's parent wrapper.                    */
.cl-chart-wrap,
.ck-chart-container {
  touch-action: none;
}

/* ──────────────────────────────────────────────────────────────
   @media sm  ≤ 640px
────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Navbar */
  .cl-search-wrap   { display: none !important; }
  .cl-market-status { display: none; }
  .cl-ws-status     { display: none; }

  /* Pricing cards → single column */
  .ckp-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .ckp-card.premium { order: -1; }

  .ckp-hero h1  { font-size: 22px; }
  .ckp-hero p   { font-size: 13px; }

  /* Profile: stack form rows */
  .ckpr-form-row {
    grid-template-columns: 1fr !important;
  }

  .ckpr-plan-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  /* Modals → full-screen */
  .cl-modal,
  .ckp-modal,
  .ck-modal,
  [class*="-modal"]:not(.cl-modal-overlay):not(.ckp-modal-overlay) {
    position: fixed !important;
    inset: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }

  /* Community screener cards → single column */
  .ckl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Indicator list table */
  .cki-list { font-size: 12px; }
  .cki-cell-formula { display: none; }

  /* Screener library toolbar */
  .ckl-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .ckl-sort-wrap { width: 100%; }
  .ckl-sort-select { width: 100%; }

  /* Credit bars */
  .ckpr-credits { gap: 12px; }

  /* Screener list in profile */
  .ckpr-screener-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* FAQ answers */
  .ckp-faq-a { font-size: 13px; }

  /* Tour tooltip */
  .ck-tour-tooltip {
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
  }

  /* Shortcuts modal */
  .ck-shortcuts-modal {
    inset: 0 !important;
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow-y: auto;
  }
}

/* ──────────────────────────────────────────────────────────────
   @media md  ≤ 768px
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Main content padding */
  .cl-main-content,
  .cl-main-nosidebar { padding: 12px !important; }

  /* Pricing: stack */
  .ckp-cards {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard panels: single column */
  .ck-dashboard-grid,
  .atlas-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter builder: stack conditions vertically */
  .cl-filter-row,
  .ck-filter-row,
  .cl-condition-row {
    flex-direction: column !important;
    gap: 8px;
  }

  .cl-filter-row > * { width: 100% !important; }

  /* Results table: hide secondary columns */
  .cl-col-hide-mobile { display: none !important; }

  /* Screener results container: horizontal scroll */
  .cl-results-wrap,
  .ck-results-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Alert list: compact */
  .ck-alert-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Community screener grid: 1 col */
  .ckl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Page banners */
  .ckl-banner-inner {
    flex-direction: column !important;
    gap: 12px;
    text-align: center;
  }

  /* Pricing hero */
  .ckp-hero { padding: 24px 16px; }

  /* Profile page */
  .ckpr-user {
    flex-direction: column;
    text-align: center;
  }

  .ckpr-avatar { margin: 0 auto; }
}

/* ──────────────────────────────────────────────────────────────
   @media lg  ≤ 1024px  (tablet)
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Sidebar: collapse to icon-only if layout has sidebar */
  .cl-layout-with-sidebar {
    grid-template-columns: auto 1fr !important;
  }

  /* Screener grid: 2 columns instead of 3 */
  .ckl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pricing cards: allow 2 cols on tablet */
  /* (already 2 col by default, leave as-is) */
}

/* ── Swipe-to-delete touch handlers (applied via JS) ────────── */
.ck-swipe-active { background: rgba(255, 68, 68, 0.05) !important; }

/* ── Bottom sheet drawer (mobile filter panel) ──────────────── */
.ck-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: #141414;
  border-top: 1px solid #2a2a2a;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 80dvh;
  overflow-y: auto;
}

.ck-bottom-sheet.open {
  transform: translateY(0);
}

.ck-bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #3a3a3a;
  margin: 0 auto 16px;
}

.ck-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1199;
  background: rgba(0, 0, 0, 0.55);
  display: none;
}

.ck-bottom-sheet-overlay.open { display: block; }

/* ── Focus-visible outline for keyboard nav ─────────────────── */
:focus-visible {
  outline: 2px solid #00C896;
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ================================================================
   GLOBAL — prevent horizontal scroll on all pages
================================================================ */
html,
body { overflow-x: hidden; }

/* All data tables get scroll wrappers via JS; make bare tables safe */
table { min-width: 0; }

/* ================================================================
   SIDEBAR — hide on ≤900px (hamburger nav already handles nav)
================================================================ */
@media (max-width: 900px) {
  .cl-sidebar { display: none !important; }
  /* Remove the side-by-side flex layout when sidebar is gone */
  .cl-layout-with-sidebar {
    display: block !important;
  }
}

/* ================================================================
   NAVBAR — trim auth buttons at very narrow viewports
================================================================ */
@media (max-width: 400px) {
  /* Drop the plan label inside avatar pill to save space */
  .cl-avatar-plan { display: none !important; }
  /* Drop "Log in" ghost btn; Sign up stays */
  .cl-nav-right > .cl-btn-ghost { display: none !important; }
}

/* ================================================================
   SCREENER PAGE  (.cks-*)
================================================================ */
@media (max-width: 768px) {
  .cks-page { padding: 12px 14px 60px; }
  .cks-header { gap: 8px; margin-bottom: 14px; }
  .cks-scan-name { font-size: 17px; }

  /* Toolbar wraps but needs tighter spacing */
  .cks-toolbar { padding: 10px 12px; gap: 8px; }
  .cks-toolbar-sep { display: none; }
  .cks-segment-wrap { width: 100%; }

  /* Results table — already has overflow-x:auto, add touch scroll */
  .cks-table-scroll { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .cks-page { padding: 10px 10px 60px; }
  .cks-scan-name  { font-size: 15px; }
  .cks-scan-desc  { display: none; }

  /* Condition children fill full width when they wrap */
  .cks-condition {
    gap: 5px;
  }
  .cks-cond-tf,
  .cks-cond-ind,
  .cks-cond-op,
  .cks-cond-right {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 5px) !important;
  }

  /* Compact group/builder padding */
  .cks-group   { padding: 10px 8px; }
  .cks-builder { padding: 12px 10px; }

  /* Run button full-width */
  .cks-run-btn { width: 100%; justify-content: center; }

  /* Table touch scroll */
  .cks-table-scroll { -webkit-overflow-scrolling: touch; }
}

/* ================================================================
   DASHBOARD PAGE  (.ckd-*)
================================================================ */
@media (max-width: 768px) {
  .ckd-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    gap: 8px;
  }
  .ckd-toolbar-left  { flex-wrap: wrap; gap: 8px; width: 100%; }
  .ckd-toolbar-right { width: 100%; }
  .ckd-toolbar-right > .ckd-tb-btn { width: 100%; justify-content: center; }
  .ckd-dash-name { max-width: 160px; font-size: 14px; }
  .ckd-dash-select { max-width: 140px; font-size: 12px; }
}

/* ================================================================
   ALERTS PAGE  (.cka-*)
================================================================ */
@media (max-width: 640px) {
  .cka-page { padding: 12px 14px 60px; }
  .cka-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cka-header .cl-btn { width: 100%; justify-content: center; }
  /* Alert item row details — hide secondary info */
  .cka-row-meta { flex-wrap: wrap; }
}

/* ================================================================
   WATCHLIST PAGE  (.ckwl-*)
================================================================ */
@media (max-width: 640px) {
  .ckwl-page { padding: 12px 14px 60px; }
  .ckwl-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ckwl-header .cl-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   CHARTS PAGE  (.ckc-*)
================================================================ */
@media (max-width: 640px) {
  .ckc-page    { padding: 8px 10px 60px; }
  .ckc-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .ckc-controls { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ================================================================
   INDICATORS PAGE  (.cki-*)
================================================================ */
@media (max-width: 640px) {
  .cki-page { padding: 12px 14px 60px; }
  .cki-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ================================================================
   PREMIUM UPGRADE MODAL — features list single column on mobile
================================================================ */
@media (max-width: 480px) {
  .cl-premium-features {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   GENERAL PAGE PADDING — pages that use cl-main-nosidebar
================================================================ */
@media (max-width: 640px) {
  /* Extra nudge: if page has no custom padding, ensure 14px min */
  .cl-main-nosidebar { padding: 0; }
  .cl-main-nosidebar > *:first-child { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ================================================================
   MOBILE NAV DRAWER — increase tap target size
================================================================ */
.cl-mobile-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ================================================================
   EXPIRY BANNER — compact on mobile
================================================================ */
@media (max-width: 640px) {
  .ck-expiry-banner {
    font-size: 12px;
    padding: 8px 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
}