/* ===== MOBILE CARDS v6 (≤ 640px) – kompaktnejšie karty, menšie medzery ===== */
@media (max-width: 640px){

  /* bez horizontálneho scrollu */
  html, body { overflow-x: hidden; }

  /* hlavička tabuľky na mobile netreba */
  #items thead{ display:none; }

  /* zoznam kariet */
  #items tbody{
    display:flex;
    flex-direction:column;
    gap:8px; /* bolo 12px → menší odstup medzi kartami */
  }

  /* poradie stĺpcov v tabuľke:
     1 drag | 2 name | 3 qty | 4 unit | 5 indiv | 6 price | 7 actions */
  #items tbody tr{
    display:grid;
    grid-template-columns: 1fr 100px; /* obsah | pravý stĺpec (akcie / unit) */
    grid-template-areas:
      "name   actions"   /* 1: názov + akcie vpravo */
      "qty    unit"      /* 2: množstvo + jednotka */
      "price  price";    /* 3: cena cez celú šírku */
    gap:6px 8px;         /* bolo 10px → kompaktnejšie */
    padding:8px;         /* bolo 12px → kompaktnejšie */
    border:1px solid #eee;
    border-radius:10px;  /* bolo 14px */
    background:#fff;
  }
  #items tbody tr:nth-child(even){ background:#fafafa; }

/* na mobile necháme viditeľný uchop (1. stĺpec), skryjeme len 5. stĺpec (Nedeliteľná) */
#items tbody tr td:nth-child(5){ display:none; }

/* uchop zobrazíme ako „bublinku“ nalavo od karty a nevytláčame layout */
#items tbody tr{ position:relative; padding-left:28px; }          /* miesto pre uchop */
#items tbody tr td:nth-child(1){
  display:block;
  position:absolute; left:6px; top:10px;
  width:18px; height:18px;
}

/* pre istotu štýl pre samotnú ikonku/btn uchopu (ak používaš .drag-handle) */
.drag-handle{
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  touch-action:none;            /* lepší pocit na dotyku */
  -webkit-user-select:none; user-select:none;
}


  /* priradenie buniek do „areas“ (bez úprav HTML) */
  #items tbody tr td:nth-child(2){ grid-area:name; }   /* surovina */
  #items tbody tr td:nth-child(3){ grid-area:qty; }    /* množstvo */
  #items tbody tr td:nth-child(4){ grid-area:unit; }   /* jednotka */
  #items tbody tr td:nth-child(6){ grid-area:price; }  /* cena */
  #items tbody tr td:nth-child(7){
    grid-area:actions;
    display:flex; gap:6px; justify-content:flex-end; align-items:center;
  }

  /* vstupy – jednotný rozmer a font (iOS nezoomuje) */
  #items input[type="text"],
  #items input[type="number"],
  #items select{
    height:36px;                 /* bolo 40–42px */
    font-size:16px;              /* kľúčové pre iOS (bez auto-zoomu) */
    padding:6px 10px;            /* menší vnútorný okraj */
    width:100%; min-width:0; box-sizing:border-box;
    border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#111827;
  }
  ::placeholder{ color:#9aa1ab; opacity:1; }

  /* jednotka – stabilná šírka, viditeľná šípka */
  #items tbody tr td:nth-child(4) select{ width:100%; }

  /* akčné ikonové tlačidlá – kompaktnejšie */
  #items .btnIcon{
    width:36px; height:36px;     /* bolo 44 → 40 → teraz 36 */
    border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* cena – jasná, ale nie krikľavá */
  #items .costVal{
    font-weight:700; color:#334155; text-align:left; white-space:nowrap;
    padding-top:0;
  }

  /* Oddelovač (sekcia) – len názov + akcia vpravo */
  #items tbody tr[data-type="section"]{
    grid-template-columns: 1fr auto;
    grid-template-areas: "name actions";
  }
  #items tbody tr[data-type="section"] td:nth-child(2){ grid-area:name; }
  #items tbody tr[data-type="section"] td:nth-child(7){ grid-area:actions; display:flex; justify-content:flex-end; }
  #items tbody tr[data-type="section"] td:nth-child(3),
  #items tbody tr[data-type="section"] td:nth-child(4),
  #items tbody tr[data-type="section"] td:nth-child(6){ display:none; }

  /* výsledok pod sebou */
  .res-row{ display:flex; justify-content:space-between; padding:6px 0; }
  .res-row.res-section{ padding-top:10px; font-weight:600; }
  .res-row.res-total{ border-top:1px dashed #e5e5e5; margin-top:6px; padding-top:8px; font-weight:700; }

  /* odskok pod výberom receptu (ak sú tlačidlá až pod ním) */
  #myRecipes + .flex { margin-top:10px !important; }

  /* všeobecne: ak po inpute nasleduje skupina tlačidiel */
  :is(input, select, textarea) + :is(.btn, .btnIcon, .row, .flex){ margin-top:8px; }
}

/* čísla bez spinnerov – moderný look */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* iOS: žiadny auto-zoom pri fokuse (font min. 16px) */
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 640px){
  input, select, textarea, button {
    font-size:16px !important;
    font-family:inherit; line-height:1.25;
  }
}

/* bezpečne vypni horizontálne rolovanie všade */
html, body { overflow-x:hidden; }

@media (max-width: 640px){
  #items tbody tr { cursor: grab; }
  #items tbody tr.dragging { opacity: .65; } /* pekný vizuál pri ťahu */
}

/* bežný desktop: handle môže byť jemne skrytá a zobraziť sa pri hoveri */
.drag-handle { opacity: .4; transition: opacity .15s ease; }
tr:hover .drag-handle, .drag-handle:focus-visible { opacity: 1; }

/* dotykové zariadenia (iPhone/iPad): vždy zobraz */
@media (hover: none) and (pointer: coarse) {
  .drag-handle { opacity: 1; }
}

.drag-handle {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;      /* zabráni scroll gestu preberať prioritu */
  cursor: grab;
}
.drag-handle:active { cursor: grabbing; }


/* vypnúť označovanie na dotykových zariadeniach */
@media (hover: none) and (pointer: coarse) {
  html, body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* iOS: zákaz long-press menu */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* iOS: bez modrého highlightu */
  }

  /* výnimky – nechaj označovanie tam, kde to dáva zmysel */
  input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
  }
}

/* ak chceš úplne vypnúť aj dvojklik selection na desktopoch:
html, body { user-select:none; }  (neodporúčam kvôli UX) */


/* ——— Mobilné rozloženie #items: stabilné, bez rozbitia ——— */
@media (max-width: 640px) {
  /* skry hlavičku + 1. stĺpec (úchyt) */
  #items thead { display: none !important; }
  #items thead th.col-drag,
  #items tbody tr td:nth-child(1) { display: none !important; }

  /* karta-riadok */
  #items tbody tr {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
    border: 1px solid #eceff1;
    border-radius: 14px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
  }

  /* všeobecné */
  #items tbody td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
  }

  /* 2) NÁZOV – celé */
  #items tbody tr td:nth-child(2) { grid-column: 1 / -1; }

  /* 3) MNOŽSTVO + JEDNOTKA – 2+2 stĺpce */
  #items tbody tr td:nth-child(3) { grid-column: 1 / span 2; }
  #items tbody tr td:nth-child(4) { grid-column: 3 / span 2; }

  /* 4) CENA (vľavo), n.p. (stred), AKCIE (vpravo 2 stĺpce) */
  #items tbody tr td:nth-child(6) {
    grid-column: 1 / span 1;
    display: flex !important; align-items: center; gap: 8px;
    font-weight: 600; color: #1f2937;
    padding-left: 12px !important; min-height: 42px;
    white-space: nowrap;
  }
  #items tbody tr td:nth-child(5) {
    grid-column: 2 / span 1;
    display: flex !important; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  #items tbody tr td:nth-child(5) label,
  #items tbody tr td:nth-child(5) .np {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 3px; color: #475569;
  }
  #items tbody tr td:nth-child(5) input[type="checkbox"] {
    width: 8px; height: 8px;
  }
  #items tbody tr td:nth-child(7) {
    grid-column: 3 / span 2;
    display: flex !important; justify-content: flex-end; align-items: center; gap: 12px;
  }

  /* INPUTY/SELECTY – dotykovo komfortné */
  #items input, #items select, #items textarea {
    width: 100% !important;
    min-height: 42px; font-size: 16px; box-sizing: border-box;
    touch-action: manipulation;
  }

  /* ——— ODDEĽOVAČ (má len 4 bunky) ——— */
  #items tbody tr.row--sep,
  #items tbody tr[data-type="sep"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  #items tbody tr.row--sep td:nth-child(2),
  #items tbody tr[data-type="sep"] td:nth-child(2) {
    grid-column: 1 / -1; /* názov oddelovača cez celú šírku */
  }
  #items tbody tr.row--sep td:nth-child(3) { display: none !important; } /* na istotu */
  #items tbody tr.row--sep td:nth-child(4),
  #items tbody tr[data-type="sep"] td:nth-child(4) {
    grid-column: 3 / span 2; display: flex !important; justify-content: flex-end;
  }
}

/* --- NEDDELITEĽNÁ POLOŽKA (n.p.) – väčší checkbox + ružová Suzys --- */
@media (max-width: 640px) {
  /* kontajner s textom "n.p." */
  #items tbody tr td:nth-child(5) {
    grid-column: 2 / span 1;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  /* text "n.p." (ak je v label/span) */
  #items tbody tr td:nth-child(5) label,
  #items tbody tr td:nth-child(5) .np,
  #items tbody tr td:nth-child(5) label span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1 !important;
  }

  /* samotný checkbox – väčší a v suzys ružovej */
  #items tbody tr td:nth-child(5) input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #ff2e81 !important; /* Suzys ružová */
    margin: 0 0 0 2px !important;
    vertical-align: middle !important;
  }

  /* Fallback pre prehliadače bez accent-color (staršie iOS/Safari) */
  @supports not (accent-color: auto) {
    #items tbody tr td:nth-child(5) input[type="checkbox"] {
      transform: scale(1.22) translateY(1px) !important;
      transform-origin: left center !important;
    }
  }
}