/* Responzivne rozlozenie (redizajn 2026-09-29) - dopĺňa style.css.
   telefon <=720 px: kompaktna hlavicka + spodna lista zaloziek s "pilulkou",
   tablet 721-1023 px: zalozky v druhom riadku hlavicky,
   pocitac >=1024 px: bocny panel s farebnymi ikonami zaloziek. */

/* ---------- pocitac: bocny panel ---------- */
@media (min-width:1024px){
  body{padding-left:var(--side-w);}
  nav.tabs{
    position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:45;
    flex-direction:column;gap:4px;padding:112px 14px 20px;
    background:var(--paper);border-right:1px solid var(--line);overflow-y:auto;
  }
  nav.tabs button{width:100%;padding:8px 10px;font-size:var(--fs-14);}
  nav.tabs button .tab-ic{width:34px;height:34px;}
  .wordmark{
    position:fixed;left:0;top:0;width:var(--side-w);z-index:46;padding:22px 18px 18px;
    flex-wrap:wrap;row-gap:8px;background:var(--paper);border-right:1px solid var(--line);
  }
  /* backdrop-filter by z hlavicky spravil containing block pre fixny bocny
     panel aj logo (rovnaka chyba ako pri spodnej liste na telefone) */
  header.top{justify-content:flex-end;min-height:64px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--canvas);}
  .toast-stack{right:28px;bottom:28px;}
}

/* ---------- tablet ---------- */
@media (max-width:1023px) and (min-width:721px){
  header.top{flex-wrap:wrap;row-gap:10px;padding:12px 20px;}
  .wordmark{order:1;}
  .header-controls{order:2;margin-left:auto;}
  nav.tabs{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  nav.tabs::-webkit-scrollbar{display:none;}
  nav.tabs button{flex:none;white-space:nowrap;}
  .settings-panel{top:auto;position:static;max-height:none;}
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ing-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gallery-scroll{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---------- telefon ---------- */
@media (max-width:720px){
  header.top{
    padding:10px 14px;gap:8px;flex-wrap:wrap;row-gap:8px;
    /* backdrop-filter vytvara novy containing block pre position:fixed potomkov -
       bez tohto by sa spodna lista zaloziek ukotvila k hlavicke namiesto
       okna (skutocna chyba najdena 2026-09-04) */
    backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--canvas);
  }
  .wordmark{font-size:var(--fs-16);flex:1 1 auto;gap:8px;}
  .logo-mark{width:34px;height:34px;border-radius:11px;}
  .streak-chip{padding:4px 9px;font-size:var(--fs-12);}
  .offline-chip{padding:4px 8px;font-size:var(--fs-11);}

  /* spodna lista zaloziek - hlavna navigacia v dosahu palca */
  nav.tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:0;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(14,42,31,.08);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  nav.tabs button{
    flex:1 1 0;min-width:0;flex-direction:column;justify-content:flex-start;gap:3px;
    padding:2px 1px;font-size:min(var(--fs-10), 11.5px);line-height:1.15;border-radius:10px;text-align:center;
    color:var(--ink-soft);background:none;
  }
  nav.tabs button:hover{background:none;}
  nav.tabs button .tab-ic{width:48px;height:28px;border-radius:999px;background:none;color:inherit;}
  nav.tabs button .tab-ic .ic{width:20px;height:20px;}
  nav.tabs button.active{background:none;color:var(--acc);font-weight:800;}
  nav.tabs button.active .tab-ic{background:var(--acc-bg);color:var(--acc);}
  .tab-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;hyphens:auto;-webkit-hyphens:auto;}

  .header-controls{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;justify-content:flex-end;gap:6px;}
  .profile-avatars{margin-right:auto;min-width:0;overflow-x:auto;scrollbar-width:none;}
  #lang-select{max-width:104px;font-size:var(--fs-12);padding:7px 8px;}
  .icon-btn{width:36px;height:36px;border-radius:11px;}
  .profile-avatar{width:30px;height:30px;font-size:var(--fs-12);}

  main{padding:4px 14px;padding-bottom:calc(92px + env(safe-area-inset-bottom));}
  .toast-stack{left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));align-items:stretch;}
  .card{padding:16px;border-radius:18px;}
  .panel{padding:14px;border-radius:20px;}
  .page-title, main h1{font-size:var(--fs-26);}
  .view-head{margin:10px 0 14px;}

  .day-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .day-header .controls{width:100%;flex-wrap:nowrap;}
  .day-header .controls button:not(.fav-btn){flex:1 1 auto;min-width:0;}
  .day-header .controls .fav-btn{flex:0 0 auto;}

  .hero{grid-template-columns:minmax(0,1fr) 104px;padding:18px;gap:12px;border-radius:22px;}
  .hero h2{font-size:var(--fs-18);}
  .hero p{font-size:var(--fs-13);}
  .hero-photo{width:104px;height:104px;}
  .hero-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-10px;padding-right:10px;}
  .hero-tags::-webkit-scrollbar{display:none;}

  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .kpi{padding:12px;}
  .kpi-val{font-size:var(--fs-22);}

  .ing-card.open{flex-direction:column;}
  .ing-card.open .ing-media{flex:none;width:100%;}

  .bowl-svg{width:136px;height:136px;}

  .prep-layout{flex-direction:column;align-items:center;gap:14px;}
  .prep-bowl{flex:0 0 auto;width:136px;height:136px;}
  .prep-steps{width:100%;}
  .prep-step-thumb{width:42px;height:42px;}

  .philosophy-card{padding:16px;flex-direction:column;align-items:stretch;gap:14px;}
  .philosophy-hero{width:100%;height:190px;}
  .gallery-scroll{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .gallery-thumb{border-radius:14px;}
  .week-strip{gap:5px;}
  .week-day{padding:8px 2px;border-radius:12px;}

  /* nakupny zoznam na telefone (jej nalez 2026-09-16: gramy boli mimo
     obrazovky vpravo): ziadne bocne posuvanie - 3 stlpce ☐ | nazov + bodka
     kategorie, pod nim mnozstvo a pocet baleni | cena. */
  /* table-layout:auto, NIE fixed: prvy riadok je nadpis skupiny s colspan */
  table.shopping-ingredients{display:table;width:100%;table-layout:auto;overflow:visible;font-size:var(--fs-13);}
  table.shopping-ingredients thead{display:none;}
  table.shopping-ingredients .col-cat, table.shopping-ingredients .col-qty{display:none;}
  table.shopping-ingredients td{white-space:normal;vertical-align:top;padding:11px 6px;}
  table.shopping-ingredients td:first-child{width:28px;padding-left:2px;padding-right:0;}
  table.shopping-ingredients td:last-child{width:70px;text-align:right;font-weight:700;white-space:nowrap;}
  table.shopping-ingredients .cat-dot{display:inline-block;}
  table.shopping-ingredients .shopping-qty-inline{display:block;margin-top:3px;font-size:var(--fs-12);color:var(--ink-soft);}
  table.shopping-ingredients .shopping-qty-inline strong{color:var(--ink);font-weight:650;}

  /* databaza surovin (bez zalozky na mobile) - skroluje cela karta */
  .foods-cat{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.foods-table{min-width:480px;font-size:var(--fs-12);}
  table.foods-table th, table.foods-table td{padding:5px 4px;}

  .settings-panel{padding:14px;flex-direction:column;gap:14px;position:static;max-height:none;box-shadow:none;}
  .settings-col{min-width:0;width:100%;}
  #settings-apply{width:100%;}

  .ratio-legend{gap:10px;}
  .progress-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .progress-kpi-tile .value{font-size:var(--fs-20);}
  .progress-bar-label{font-size:7px;}
  .progress-bar-value{font-size:6.5px;}
  .favorites-list{grid-template-columns:1fr;}
}

@media (max-width:380px){
  #regen-btn .ic, #share-btn .ic{display:none;}
  .wordmark-text{font-size:var(--fs-15);}
  .hero{grid-template-columns:minmax(0,1fr) 88px;}
  .hero-photo{width:88px;height:88px;}
  .kpi-val{font-size:var(--fs-20);}
}

/* vacsie klikatelne plochy na dotykovych obrazovkach */
@media (pointer: coarse){
  button, input[type="date"], select{min-height:40px;}
  /* avatary a ikony zaloziek su zamerne mensie okruhle prvky - globalny
     min-height by ich natiahol do vajickoveho tvaru (bug 2026-09-04) */
  .profile-avatar, .prep-check, .ing-media{min-height:0;}
  .allergen-item{padding:7px 12px;}
}

/* Navrh 17: na uzkych displejoch formular "Nahlasit inu cenu" v jednom stlpci. */
@media (max-width:480px){
  .report-price-grid{grid-template-columns:1fr;}
  .onboarding-overlay{padding:12px;}
  .onboarding-card{padding:20px;gap:12px;}
  .onboarding-emoji{width:70px;height:70px;font-size:calc(36px * var(--text-scale, 1));}
  .onboarding-step h2{font-size:var(--fs-20);}
}