/* responsive-mobile.css — globalna, ADDYTYWNA warstwa mobilna.
   Wyłącznie reguły pod @media (max-width) — desktop pozostaje nietknięty.
   Ładowany w parent.html po app-saas.min.css.
   (Wyjątek: kilka globalnych helperów poniżej — bottom-nav/sheet, szkielet lazy-img.) */

/* lazy-load obrazków notatek: szkielet placeholdera dopóki obrazek nie wjedzie w widok */
.note-content img.s3-lazy-pending {
  min-height: 140px;
  width: min(100%, 340px);
  background: var(--ct-tertiary-bg, var(--hodl-surface));
  border: 1px solid var(--ct-border-color, var(--hodl-border-subtle));
  border-radius: var(--hodl-radius-md);
}

/* kursor „powiększ" na klikalnych obrazkach notatek */
.note-content img:not(.s3-lazy-pending) { cursor: zoom-in; }

/* lightbox obrazków notatek — wyśrodkowany, pełny ekran (delegacja w hodl-note-s3-images.js) */
.hodl-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: var(--hodl-bg); cursor: zoom-out;
}
.hodl-lightbox.is-open { display: flex; }
.hodl-lightbox__img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  border-radius: var(--hodl-radius-md); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); cursor: default;
}
.hodl-lightbox__close {
  position: fixed; top: 16px; right: 18px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--hodl-surface); color: var(--hodl-text); font-size: 24px; line-height: 1;
  cursor: pointer; transition: background .15s;
}
.hodl-lightbox__close:hover { background: var(--hodl-surface); }
body.hodl-lightbox-open { overflow: hidden; }

/* ---------- iOS: nie powiększaj przy focusie inputa (font >=16px) ---------- */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px;
  }
}

/* ---------- modale: niemal pełna szerokość na telefonie ---------- */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem);
  }
}

/* ---------- workspaces nowego designu: mniejsze paddingi/marginesy na mobile ---------- */
@media (max-width: 768px) {
  .portfolio-workspace,
  .predictions-workspace,
  .analyse-workspace,
  .af-workspace,
  .wallets-workspace,
  .users-directory {
    width: calc(100% - 16px) !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* duży dolny padding portfolio na telefonie skracamy */
  .portfolio-workspace { padding-bottom: 32px !important; }

  /* nagłówki stron: mniejsze h1, head-actions zawijają się */
  .pf-page-head h1, .pred-page-head h1, .an-page-head h1, .af-page-head h1 { font-size: 24px !important; }
  .af-head-actions, .an-head-actions, .pred-head-actions { flex-wrap: wrap; }
  .af-search input, .pred-search--head input { width: 100% !important; }
}

/* ---------- szerokie tabele: poziomy scroll zamiast ucięcia ---------- */
@media (max-width: 900px) {
  .table-responsive,
  .af-table-scroll, .an-raw-scroll, .an-stats-scroll,
  .pf-table-wrap, .pf-explorer-scroll, .mt-table-wrap,
  .position-places-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* generyczny wrapper dodawany w szablonach (klasa hodl-scroll-x) */
  .hodl-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .hodl-scroll-x > table { min-width: 640px; }
}

/* ---------- verdict/insight cards: 1–2 kolumny na telefonie ---------- */
@media (max-width: 620px) {
  .af-insights, .an-insights { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 400px) {
  .af-insights, .an-insights { grid-template-columns: 1fr !important; }
}

/* ---------- builder/edytory dwukolumnowe → jednokolumnowe ---------- */
@media (max-width: 820px) {
  .af-builder-grid, .an-editor-grid, .af-mix-body { grid-template-columns: 1fr !important; }
}

/* ---------- stare strony Bootstrap: kontenery na sztywno → płynne ---------- */
@media (max-width: 768px) {
  [style*="max-width: 2000px"],
  [style*="max-width:2000px"] { max-width: 100% !important; }
  .container { padding-left: 12px; padding-right: 12px; }
}

/* ---------- prediction_view / inne hardcoded tabele: scroll na mobile ---------- */
@media (max-width: 900px) {
  .table_prediction { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- topbar search: węższy na telefonie, nie wypycha ---------- */
@media (max-width: 600px) {
  .navbar-custom .app-search { max-width: 150px; }
  .navbar-custom .app-search .form-control { width: 100% !important; }
}

/* ---------- TELEFON (≤576px): minimalne marginesy boczne ----------
   Wyłącznie telefony — laptop/tablet (≥577px) NIE dostaje tych reguł.
   Łańcuch warstw: .content-page → .content → .container-fluid → .row → [col].
   Każda dokłada padding/margin. Zerujemy CAŁY łańcuch poza ~6px na .content-page,
   żeby karty nie kleiły się idealnie do krawędzi. --bs-gutter-x:0 → brak ujemnych
   marginesów .row → brak poziomego scrolla. */
@media (max-width: 576px) {
  .content-page { padding-left: 6px !important; padding-right: 6px !important; }
  .content-page > .content { padding-left: 0 !important; padding-right: 0 !important; }
  .content-page .container-fluid {
    --bs-gutter-x: 0rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .content-page .container-fluid > .row { margin-left: 0 !important; margin-right: 0 !important; }
  .content-page .container-fluid > .row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- FEED na telefonie: notatki na górze, panele (taski/portfolio) na dole ----------
   Wizja: góra = nawigacja notatek + filtry (feed-header), środek = notatki,
   dół = panele taski/portfolio. Chowamy mylące pille Profil/Notes/Portfolio. */
@media (max-width: 991.98px) {
  /* Network na telefonie = SAME NOTATKI. Panele boczne ukryte (jak w oryginale d-lg-block). */
  #feed-layout-row .feed-mobile-toggles { display: none !important; }
  /* prawy panel (portfolio) na mobile zbędny — to samo jest pod /portfolio/ */
  #feed-layout-row #right-panel { display: none !important; }

  /* ----- Task drawer: lewy panel jako wysuwana z dołu szuflada (tylko taski) ----- */
  .af-tasks-backdrop { display: none; }
  body.af-tasks-open .af-tasks-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1051; background: var(--hodl-bg);
  }
  body.af-tasks-open #left-panel {
    display: block !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1052;
    max-height: 82vh; overflow-y: auto;
    background: var(--ct-secondary-bg, var(--hodl-surface));
    border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle));
    border-radius: var(--hodl-radius-lg) var(--hodl-radius-lg) 0 0;
    padding: 14px 12px calc(70px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -16px 40px -16px rgba(0, 0, 0, .6);
  }
  /* drag-handle u góry szuflady (affordance) */
  body.af-tasks-open #left-panel::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: var(--hodl-radius-pill);
    background: var(--ct-secondary-color, #5c6a7e); margin: 0 auto 12px; opacity: .6;
  }
  /* profil i tak ukryty — w szufladzie pokazujemy tylko taski */
  body.af-tasks-open #left-panel .side-panel__section--profile { display: none !important; }
}

/* ---------- mobilny dolny pasek nawigacji (tylko telefon) ---------- */
.hodl-bottom-nav { display: none; }

@media (max-width: 991.98px) {
  .hodl-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;
    background: var(--ct-secondary-bg, var(--hodl-surface));
    border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle));
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .hodl-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--ct-secondary-color, var(--hodl-text-3));
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--hodl-radius-lg);
    transition: color .15s, background .15s;
  }
  .hodl-bottom-nav__item i { font-size: 18px; line-height: 1; }
  .hodl-bottom-nav__item.is-active { color: var(--ct-primary, var(--hodl-accent)); }
  .hodl-bottom-nav__item.is-active i { transform: translateY(-1px); }
  .hodl-bottom-nav__item:active { background: var(--ct-tertiary-bg, var(--hodl-surface)); }
  .hodl-bottom-nav__more { border: 0; background: transparent; font-family: inherit; cursor: pointer; }

  /* miejsce, żeby pasek nie zasłaniał treści/stopki */
  .content-page, .wrapper { padding-bottom: 64px; }
  body { padding-bottom: 0; }
}

/* ---------- dolna szuflada „Rozwiń" (reszta linków + beta) ---------- */
.hodl-bottom-sheet, .hodl-bottom-sheet__backdrop { display: none; }
@media (max-width: 991.98px) {
  .hodl-bottom-sheet__backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 1041; background: var(--hodl-bg);
  }
  .hodl-bottom-sheet:not([hidden]) { display: block; }
  .hodl-bottom-sheet {
    position: fixed; left: 0; right: 0; bottom: 64px; z-index: 1042;
    background: var(--ct-secondary-bg, var(--hodl-surface));
    border-top: 1px solid var(--ct-border-color, var(--hodl-border-subtle));
    border-radius: var(--hodl-radius-lg) var(--hodl-radius-lg) 0 0;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -16px 40px -16px rgba(0, 0, 0, .6);
  }
  .hodl-bottom-sheet__beta {
    display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4;
    color: var(--ct-body-color, var(--hodl-text)); background: var(--hodl-warn-soft);
    border: 1px solid var(--ct-warning, var(--hodl-warn)); border-radius: var(--hodl-radius-lg); padding: 8px 12px; margin-bottom: 12px;
  }
  .hodl-bottom-sheet__beta i { color: var(--hodl-warn-text); font-size: 16px; margin-top: 1px; flex: 0 0 auto; }
  .hodl-bottom-sheet__beta b { color: var(--hodl-warn-text); }
  .hodl-bottom-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hodl-sheet-link {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
    border-radius: var(--hodl-radius-lg); background: var(--ct-tertiary-bg, var(--hodl-surface));
    border: 1px solid var(--ct-border-color, var(--hodl-border-subtle)); color: var(--ct-body-color, var(--hodl-text));
    text-decoration: none; font-size: 11px; font-weight: 600;
  }
  .hodl-sheet-link i { font-size: 18px; color: var(--ct-primary, var(--hodl-accent)); }
  .hodl-sheet-link:active { background: var(--ct-border-color, var(--hodl-surface-2)); }
}

/* ---------- topbar na telefonie: tylko logo H + szukajka + profil ---------- */
@media (max-width: 991.98px) {
  #hodl-topbar .hodl-sidebar-toggle,
  #hodl-topbar .navbar-toggle,
  #hodl-topbar .hodl-topbar-brand,
  #hodl-topbar form[action="/update-coins"] { display: none !important; }
}