:root{ --accent:#e85a9a; }

/* Reset & base */
*{ box-sizing:border-box }
body{ margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial }
.hidden{ display:none }
.msg{ margin-top:8px; color:#c00 }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid #eee;
}
.topbar .inner{
  max-width:980px; margin:0 auto; padding:10px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.brand{ font-weight:700; color:var(--accent) }

/* Layout */
.container{ max-width:980px; margin:24px auto; padding:0 16px }
.panel{
  background:#fff; border:1px solid #eee; border-radius:12px; padding:12px;
  margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,.03)
}
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:720px){ .grid{ grid-template-columns:1fr } }
.row{ display:flex; gap:8px }

/* Controls */
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:10px 14px; cursor:pointer
}
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btnIcon{ padding:8px 10px }
input,select{
  width:100%; padding:10px; border:1px solid #ddd; border-radius:8px
}

/* Badges */
.badge{
  display:inline-block; padding:4px 8px; background:#f6f6f6;
  border-radius:999px; margin-right:6px
}

/* Tabuľka ingrediencií */
.table{ width:100%; border-collapse:collapse; margin:12px 0; table-layout:fixed }
.table th,.table td{ border-bottom:1px solid #f0f0f0; padding:8px; vertical-align:middle }
#items input,#items select{ width:100% }

/* Stabilné šírky 6 stĺpcov (DESKTOP) */
.col-drag   { width:28px }
.col-name   { width:auto }
.col-qty    { width:140px }
.col-unit   { width:90px }
.col-indiv  { width:110px }
.col-actions{ width:110px; white-space:nowrap }

/* Mobile stĺpce */
@media (max-width:720px){
  .col-qty,.col-unit,.col-indiv,.col-actions{ width:auto }
}

/* Drag & drop */
td.drag, th.col-drag{ text-align:center }
.drag-handle{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border:none; background:transparent;
  cursor:grab; color:#999
}
.drag-handle:active{ cursor:grabbing }
tr.dragging{ opacity:.65 }
tr.drop-target{ outline:2px dashed #ddd }

/* Autocomplete dropdown */
.ac-dd{
  position:absolute; background:#fff; border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.08); border-radius:8px; overflow:hidden; z-index:1000
}
.ac-dd .ac-row{ padding:8px 10px; cursor:pointer }
.ac-dd .ac-row:hover{ background:#f9f9fb }

/* Výsledok – grid 3 stĺpce */
#result .res-row{
  display:grid;
  grid-template-columns: 1fr 140px 160px;
  grid-template-areas: "name qty price";
  align-items:center;
  background:#fff; border:1px solid #eee; border-radius:8px; padding:8px 10px;
}
#result .res-name  { grid-area:name;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#result .res-price { grid-area:price; text-align:right; white-space:nowrap; }
#result .res-qty   { grid-area:qty;   text-align:right; white-space:nowrap; }
#result .res-section{ background:#fff0f6; font-weight:700; }
#result .res-total  { border-top:1px solid #eee; font-weight:700; }
@media (max-width: 720px){ #result .res-row{ grid-template-columns: 1fr 110px 120px; } }

/* Oddelovače */
tr[data-type="section"] td { background:#fff0f6; }
tr[data-type="section"] input.sepTitle{ background:transparent; }

/* Modal */
.modal.hidden{ display:none }
.modal{ position:fixed; inset:0; z-index:1000 }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35) }
.modal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px)); background:#fff; border-radius:12px;
  padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.modal h3{ margin:0 0 12px; color:var(--accent) }
.modal__actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px;
  padding-top:12px; border-top:1px solid #eee; padding-bottom:4px;
}
.drag-handle{ user-select:none; -webkit-user-select:none; touch-action:none; }

/* Mini spinner + loader */
.spinner{ display:inline-block; width:1rem; height:1rem; border:2px solid rgba(0,0,0,.2); border-top-color: currentColor; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-0.125rem; margin-right:.5rem }
@keyframes spin { to{ transform:rotate(360deg) } }
#authProgress{ margin-top:.5rem; color:#333; font-size:.9rem }
button[aria-busy="true"]{ pointer-events:none; opacity:.7 }

/* No horizontal scroll */
html, body { overflow-x:hidden; }

/* ===== Desktop spacing medzi poľami a tlačidlami ===== */
@media (min-width: 721px){
  #auth .auth-form .flex{ gap: 14px !important; }
  #auth #email + #btnLogin{ margin-top: 14px !important; }
  #myRecipes + .flex,
  #myRecipes + .row,
  #myRecipes + div{ margin-top: 14px !important; }
  .panel .grid > div > :is(input,select,textarea)
    + :is(.row,.flex,.btn-group,div){ margin-top: 12px !important; }
}

/* ===== Dlaždice režimu – KOMPAKTNÉ (jediný zdroj pravdy) ===== */
.mode-tiles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
}

/* Fixná výška (bez aspect-ratio), menšie ikony & texty */
.mode-tile{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid transparent;
  user-select:none;
  cursor:pointer;
  background: linear-gradient(135deg, var(--accent), #d94a8b);
  box-shadow:0 10px 24px rgba(232,90,154,.25);

  display:flex; align-items:center; justify-content:center;
  flex-direction:column;

  height: 120px !important;         /* <<— kľúčové */
  max-height: 150px !important;     /* poistka na veľkých displejoch */
  padding: 8px 6px;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
@media (min-width:640px){ .mode-tile{ height: 130px !important; } }
@media (min-width:1024px){ .mode-tile{ height: 140px !important; } }

.mode-tile:hover  { filter: brightness(1.05); }
.mode-tile:active { transform: translateY(1px) scale(0.995); }
.mode-tile .ico{ color:#fff; font-size:28px !important; line-height:1; }
.mode-tile .lbl{ color:#fff; font-weight:600; margin-top:4px; font-size:13px !important; opacity:.95; }
.mode-tile[aria-pressed="false"]{ filter:saturate(.85) brightness(.95); opacity:.92; }

/* pomocné triedy */
.hidden-vis { display:none !important; }
.disabled-vis { opacity:.5; pointer-events:none; }

/* Vysvetľujúci modal – jemné zvýraznenia */
.explain code{background:#f6f7f9;border:1px solid #e5e7eb;border-radius:6px;padding:0 4px}
.explain .eq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f9fafb;padding:6px 8px;border-radius:6px;border:1px solid #eee;display:inline-block}
.explain .note{color:#64748b}
.explain .list{margin:6px 0 0 18px}

/* --- Login intro + form --- */
#auth .intro-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0 0;
}
#auth .intro-list li {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0;
  color: #334155;
}
#auth .intro-list i.fa-check { color: var(--accent); margin-top: 3px; }

#auth .sep {
  border: 0; border-top: 1px solid #eee;
  margin: 16px 0;
}

/* zúžený formulár pod textom, zarovnaný na ľavú stranu karty */
#auth .auth-form { max-width: 520px; }
@media (max-width: 720px){ #auth .auth-form { max-width: 100%; } }

/* konzistentné medzery pri tlačidlách pri desktope */
@media (min-width: 721px){
  #auth .auth-form .flex { gap: 12px !important; }
}

/* Zafixuj šírku stránky na 980px aj keď je načítaný Tailwind */
main.container{
  max-width: 980px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin: 24px auto !important;
}

/* === KONTRAST DLAŽDÍC REŽIMU – silne sivá neaktívna, ružová aktívna === */
.mode-tiles .mode-tile:not(.is-active){
  background:#f6f7fa !important;
  border-color:#e5e7eb !important;
  color:#475569 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.04) !important;
  filter:none !important;
  opacity:1 !important;
}
.mode-tiles .mode-tile:not(.is-active) .ico{
  color:#64748b !important;
}
.mode-tiles .mode-tile:not(.is-active) .lbl{
  color:#475569 !important;
  opacity:.9 !important;
}

/* Aktívna zostáva „plná ružová“ a výrazná */
.mode-tiles .mode-tile.is-active{
  background:linear-gradient(135deg, var(--accent), #d94a8b) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 24px rgba(232,90,154,.28) !important;
}
.mode-tiles .mode-tile.is-active .ico,
.mode-tiles .mode-tile.is-active .lbl{
  color:#fff !important;
  opacity:1 !important;
}

/* Hover a focus pre prehľadnosť */
.mode-tiles .mode-tile:not(.is-active):hover{ background:#eef1f6 !important; }
.mode-tiles .mode-tile{ outline:none; }
.mode-tiles .mode-tile:focus-visible{
  box-shadow:0 0 0 3px rgba(232,90,154,.35), 0 2px 10px rgba(0,0,0,.06) !important;
}


/* --- Oddelovač: ružový iba input, bunky ostanú biele --- */
tr[data-type="section"] td{
  background:#fff !important;                 /* už žiadna ružová na celom riadku */
}

tr[data-type="section"] td.drag,
tr[data-type="section"] td.actions,
tr[data-type="section"] td.costVal{
  background:#fff !important;                 /* úchytka a akcie biele */
}

/* samotný input oddelovača */
tr[data-type="section"] input.sepTitle{
  display:block;
  width:100%;
  background:#fff0f6 !important;              /* ružové len pole */
  border:1px solid #ffd6ea;                    /* jemný okraj */
  border-radius:8px;
  padding:10px;
  box-shadow:none;
  outline:none;
  color:#8a2b57;
}
tr[data-type="section"] input.sepTitle::placeholder{
  color:#c15a86;                               /* čitateľný placeholder na ružovej */
}

/* Percentuálne šírky stĺpcov (funguje s table-layout: fixed) */
/* Poradie stĺpcov: 1) drag 2) názov 3) množstvo 4) jednotka 5) nedeliteľná 6) cena 7) akcie */

.table th:nth-child(1), .table td:nth-child(1){ width:4%;  text-align:center; } /* drag */
.table th:nth-child(2), .table td:nth-child(2){ width:42%; text-align:left;   } /* názov */
.table th:nth-child(3), .table td:nth-child(3){ width:14%; text-align:right;  } /* množstvo */
.table th:nth-child(4), .table td:nth-child(4){ width:10%; text-align:right;  } /* jednotka */
.table th:nth-child(5), .table td:nth-child(5){ width:8%;  text-align:center; } /* nedeliteľná */
.table th:nth-child(6), .table td:nth-child(6){ width:14%; text-align:right;  } /* cena */
.table th:nth-child(7), .table td:nth-child(7){ width:8%;  text-align:right; white-space:nowrap; } /* akcie */

/* Mobil – viac miesta pre názov, ale chráň cenu/akcie min-šírkou */
@media (max-width:720px){
  .table th:nth-child(1), .table td:nth-child(1){ width:5%;  } /* drag */
  .table th:nth-child(2), .table td:nth-child(2){ width:50%; } /* názov */
  .table th:nth-child(3), .table td:nth-child(3){ width:15%; } /* množstvo */
  .table th:nth-child(4), .table td:nth-child(4){ width:10%; } /* jednotka */
  .table th:nth-child(5), .table td:nth-child(5){ width:6%;  } /* nedeliteľná */
  .table th:nth-child(6), .table td:nth-child(6){ width:9%;  min-width:72px; } /* cena */
  .table th:nth-child(7), .table td:nth-child(7){ width:5%;  min-width:48px; } /* akcie */
}

/* Zarovnanie polí podľa želania (bez zmeny veľkosti textu) */
.table td.c-qty, .table td.c-qty input.qty{ text-align:right; }   /* množstvo doprava */
.table td.c-unit, .table td.c-unit select.unit{ text-align:right; text-align-last:right; }
.table td.c-price, .table td.costVal{ text-align:right; }         /* cena doprava */
.table td.c-name, .table td.c-name input.name{ text-align:left; } /* názov vľavo */