/* ============================================================
   RESPONSIVE — layout & size adaptation only.
   Visual styling (colour, shadow, type) lives in the base
   stylesheets; this file adjusts size and flow per breakpoint
   and guards against horizontal overflow.
   ============================================================ */

/* ---- Overflow guards (all widths) ---------------------------------
   The result card's header row (code pill + unit + template select)
   and long descriptions could force the container wider than the
   viewport; body has overflow-x:hidden, so that clipped content.
   Let flex rows wrap and shrink instead. */
.container        { min-width: 0; }
.card, #resultCard { max-width: 100%; }
.card-header-top  { flex-wrap: wrap; }
.item-meta        { min-width: 0; flex-wrap: wrap; }
#itemDesc, .result-desc { overflow-wrap: anywhere; }

/* ---- Tablet / small laptop (≤ 768px) ---- */
@media (max-width: 768px) {
    body            { padding: 4.5rem 0.9rem 2.5rem; } /* top clears fixed nav buttons (end at ~3.8rem) */
    header h1       { font-size: 2.6rem; }
    header p        { font-size: 1rem; }
    .container      { gap: 1.75rem; }
    .card-header    { padding: 1.6rem 1.4rem; }
    #itemDesc       { font-size: 1.2rem; }
    th, td          { padding: 1rem 1.2rem; }
    #searchInput    { font-size: 1.05rem; padding: 1.05rem 1.3rem; padding-right: 6.4rem; }
}

/* ---- Phone (≤ 480px) ---- */
@media (max-width: 480px) {
    body            { padding: 3.75rem 0.6rem 2rem; } /* top clears fixed nav buttons (end at ~3rem) */
    header h1       { font-size: 1.95rem; letter-spacing: -0.02em; line-height: 1.12; }
    header h1 span::after { height: 5px; bottom: 3px; }
    header p        { font-size: 0.9rem; }
    .container      { gap: 1.4rem; }

    .card-header    { padding: 1.2rem 1rem; }
    .item-code      { font-size: 1rem; padding: 0.35rem 0.85rem; }
    .item-unit      { font-size: 0.92rem; }
    #itemDesc       { font-size: 1.05rem; }

    th, td          { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
    th              { font-size: 0.7rem; }

    #searchInput    { font-size: 1rem; padding: 0.95rem 1rem; padding-right: 5.6rem; }
    #searchBtn      { width: 40px; height: 40px; right: 0.5rem; }
    .clear-search-btn { right: 3.3rem; width: 26px; height: 26px; }

    .top-controls   { top: 0.75rem; right: 0.75rem; gap: 0.35rem; }
    .top-ctrl-btn, .burger-menu-btn, .top-ctrl-burger { width: 36px; height: 36px; }
}