/* ============================================================
   mobile.css — všechny mobilní overrides na jednom místě.

   PC layout (≥ 769px) NENÍ zde přepisován. Tento soubor přidává
   pouze targeted @media rules pro tablet/telefon.

   Hlavní breakpointy:
     - max-width: 768px  — tablet portrait (sidebar stack)
     - max-width: 500px  — telefon (hlavní fokus)
     - max-width: 375px  — úzký telefon (iPhone SE/Mini)

   Linkováno v index.html JAKO POSLEDNÍ CSS, aby mělo prioritu.
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   TABLET PORTRAIT (≤ 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Generátor nabídky — sidebar stack pod hlavní obsah.
     Existující @media v nabidka.css:215 cíli na 820px,
     tady doplňujeme úpravy pro užší zařízení. */
  .ng-sidebar { padding: 12px 10px 70px; }
  .ng-main    { padding: 14px 12px 100px; }
}


/* ═══════════════════════════════════════════════════════════
   TELEFON (≤ 500px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 500px) {

  /* ── Modaly ─────────────────────────────────────────── */
  .modal-box,
  .rv-modal-box {
    min-width: auto;
    width: 92vw;
    max-width: none;
    padding: 16px;
  }
  .settings-box {
    width: 92vw;
    max-width: none;
    padding: 16px 18px;
  }
  .cal-modal-box {
    width: 92vw;
    max-width: none;
  }

  /* ── Horní navigace ─────────────────────────────────── */
  .top-nav {
    height: auto;
    padding: 6px 8px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .top-nav-brand { font-size: 13px; }
  .top-nav-logo  { height: 22px; }
  .top-nav-tabs {
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
    order: 3;            /* pod brand + settings */
    justify-content: flex-start;
  }
  .nav-tab {
    padding: 5px 10px;
    font-size: 11px;
  }
  .nav-settings-btn { padding: 4px 10px; font-size: 11px; margin-left: 4px; }
  .ui-switcher  { margin: 0 2px; }
  .ui-switch-btn { padding: 3px 7px; font-size: 10px; }

  /* ── Realization view ───────────────────────────────── */
  .realization-view { padding: 12px 10px; }
  .rv-header        { gap: 8px; margin-bottom: 12px; }
  .rv-tabs {
    flex-wrap: wrap;
    border-bottom: none;
    gap: 4px;
  }
  .rv-tab {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    border-bottom-width: 1px;
    margin-bottom: 0;
  }
  .rv-tab.active {
    border-color: var(--c-primary);
    background: var(--c-primary-bg);
    color: var(--c-primary);
  }

  /* ── Dashboard ──────────────────────────────────────── */
  .dashboard { padding: 12px 10px; }
  .visual-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Realizační řádky — stack do jednoho sloupce.
     PC má grid "1fr auto auto" (left | steps | right);
     na mobilu se chipsy nezalamovaly a vyletovaly mimo viewport. */
  .realization-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    transform: none !important;          /* zruš hover translateX */
  }
  .realization-row:hover { transform: none; }

  .row-left  { width: 100%; }
  .row-line1 { flex-wrap: wrap; }
  .row-name  { white-space: normal; overflow: visible; text-overflow: clip; }
  .row-tech  { white-space: normal; }
  .row-addr  { white-space: normal; }

  /* Chipsy workflow — flex-wrap aby spadly na další řádek */
  .row-steps {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 4px;
  }
  .row-chips-line {
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }

  /* Status badges trochu menší aby se vešlo víc do řádku */
  .status-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Pravý sloupec — pod chipsy, na celou šířku */
  .row-right {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .row-updated { font-size: 10px; }

  /* Filtry / search — celá šířka */
  .dashboard-search { width: 100%; margin-left: 0; }
  .dashboard-stats  { flex-wrap: wrap; gap: 6px; }
  .stat-item        { padding: 6px 10px; min-width: 70px; }
  .stat-num         { font-size: 18px; }

  /* ── Customer form ──────────────────────────────────── */
  .cf-fields,
  .cf-fields-2col {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cf-field[data-span="2"] { grid-column: auto; }

  /* ── Offer detail / nabidka generator ───────────────── */
  .offer-tab-bar {
    flex-wrap: wrap;
    gap: 2px;
  }
  .offer-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .offer-form-toolbar {
    bottom: 12px;
    right: 12px;
    left: 12px;
    border-radius: 14px;
    padding: 6px 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Generátor nabídky polish */
  .ng-sidebar { padding: 10px 10px 70px; }
  .ng-main    { padding: 12px; }
  .ng-toolbar { padding: 8px 10px; gap: 6px; }
  .profit-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Tabulky (CSS-only horizontal scroll) ───────────── */
  .offer-table,
  .extract-diff-table,
  .cenik-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .offer-table th,
  .offer-table td   { padding: 3px 6px; font-size: 11px; }
  .cenik-table th,
  .cenik-table td   { padding: 3px 6px; font-size: 11px; }

  /* ── File browser ───────────────────────────────────── */
  .file-modified { display: none; }
  .file-size {
    min-width: 28px;
    font-size: 10px;
  }
  .btn-file-action {
    padding: 6px 8px;
    font-size: 14px;
  }
  .file-name { font-size: 13px; }

  /* ── Step cards ─────────────────────────────────────── */
  .step-card    { margin-bottom: 6px; }

  /* PC má align-items: center — když je titulek na 2 řádky a pod ním
     závislost + checklist, pravé ikony (📁/Vše/🔔/Čeká/›) přistanou
     vertikálně na střed a překrývají řádek se závislostí.
     Na mobilu zarovnáme vše k hornímu okraji. */
  .step-header {
    align-items: flex-start;
    padding: 8px 10px;
    gap: 8px;
  }
  .step-icon { padding-top: 1px; }      /* drobné odsazení aby ikona seděla na titulku */

  /* Pravá strana — zmenšit aby zabrala méně místa */
  .step-header-right {
    gap: 5px;
    padding-top: 1px;
    flex-wrap: wrap;                     /* pokud i tak nezbývá místo, zalom */
    justify-content: flex-end;
  }
  .step-files-count,
  .step-checklist-pct { font-size: 10px; }
  .step-attn-btn      { font-size: 16px; padding: 0 1px; }
  .step-toggle-icon   { font-size: 14px; }

  /* Title — povol zalomení na víc řádků (PC ho ořezává ellipsis) */
  .step-label { font-size: 13px; line-height: 1.25; }

  /* Checklist dots — menší padding, fit více chipsů do řádku */
  .cl-dot { padding: 2px 7px 2px 5px; font-size: 10px; }

  /* ── Empty state / splash ───────────────────────────── */
  .empty-state                    { padding: 16px; }
  .splash, .access-prompt         { padding: 16px; min-height: auto; }
  .splash-logo                    { font-size: 36px; }
  .splash-title                   { font-size: 20px; }

  /* ── Calendar ───────────────────────────────────────── */
  .cal-cell           { min-height: 40px; }
  .cal-quick-popover  { width: min(260px, 92vw); max-width: 92vw; }
  .btn-icon           { min-width: 40px; min-height: 40px; }
  .cal-color-swatch   { width: 32px; height: 32px; }

  /* ── Tooltip ────────────────────────────────────────── */
  .vc-hint-icon:hover::after,
  .vc-hint-icon:focus::after {
    min-width: auto;
    max-width: 92vw;
    left: 0;
    right: auto;
    white-space: normal;
  }
}


/* ═══════════════════════════════════════════════════════════
   ÚZKÝ TELEFON (≤ 375px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* Photo gallery — 1-2 sloupce s menším minmax */
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }

  /* Ultra-kompaktní tab tlačítka */
  .nav-tab          { padding: 4px 7px; font-size: 10px; }
  .rv-tab           { padding: 5px 8px; font-size: 11px; }
  .offer-tab-btn    { padding: 5px 9px; font-size: 11px; }

  /* Splash text */
  .splash-title { font-size: 18px; }
  .splash-logo  { font-size: 32px; }
}