/* CellarHub — phone & tablet adjustments.
 * Loaded after each page's own styles (see app_head.php), so these win where they overlap.
 * "pointer: coarse" = a finger rather than a mouse (phones, tablets).
 */

/* 1. iPhones zoom the whole page when a field with text under 16px is tapped. */
@media (pointer: coarse), (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea { font-size: 16px !important; }
}

/* 2. Big enough to hit with a thumb (Apple and Google recommend ~44px). */
@media (pointer: coarse) {
  .pill, .hdr nav a, .hdr nav button { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; padding-left: 14px; padding-right: 14px; }
  summary { padding: 10px 0; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  label.check { min-height: 44px; }
  .gal { padding: 7px 12px !important; }
  #main_form .scan-lookup-btn { min-height: 40px !important; padding: 8px 14px !important; }
  #main_form .rx-del, #main_form .rx-move button { min-width: 40px; min-height: 40px; }
  #main_form .rx-copy { min-height: 40px; padding: 8px 14px; }
  .hdr nav .pill { min-height: 40px; padding: 8px 14px; }
  .glance li { padding: 2px 0 !important; align-items: center; }
  .glance li > a { padding: 10px 0; }
  #main_form .rx-card-head .rx-copy { min-height: 40px; padding: 8px 10px; }
  .glance .tile > a.muted { display: inline-block; padding: 8px 0; }
  main.wrap .row a, main.wrap p a { display: inline-block; padding: 8px 0; }   /* "Forgot password?", "Back" links on sign-in pages */
  .tabs-status a { padding: 9px 14px; }
  .ing { padding: 5px 10px; }
}

/* 3. Headers. When the buttons don't fit beside the title (tablets, phones, narrow windows),
 *    app_head.php's script adds .hdr-collapsed and they move into a "☰ Menu" drop-down. */
.hub-menu-btn { display: none; }
.hdr.hdr-measure { flex-direction: row !important; flex-wrap: nowrap !important; }
.hdr.hdr-measure > :first-child { white-space: nowrap; flex: none !important; }
.hdr.hdr-measure > nav { display: flex !important; flex-wrap: nowrap !important; position: static !important; flex: none !important; }
.hdr.hdr-measure > nav > * { flex: none !important; white-space: nowrap; }
.hdr.hdr-measure .hub-menu-btn { display: none !important; }

.hdr.hdr-collapsed { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between;
  gap: 10px !important; position: sticky; top: 0; z-index: 30; box-sizing: border-box; max-width: 100vw; }
.hdr.hdr-collapsed > :first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr.hdr-collapsed .hub-menu-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--pill-border, var(--edge, rgba(127,127,127,.4))); background: var(--pill-bg, transparent);
  color: var(--pill-fg, var(--ink, inherit)); font: inherit; font-weight: 600; cursor: pointer; width: auto; }
.hdr.hdr-collapsed .hub-menu-btn .bars { font-size: 18px; line-height: 1; }
.hdr.hdr-collapsed.menu-open .hub-menu-btn { border-color: var(--accent, #3b82f6); }
.hdr.hdr-collapsed > nav { display: none !important; }
.hdr.hdr-collapsed.menu-open > nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important;
  gap: 6px !important; position: absolute; top: calc(100% + 6px); right: 8px; width: min(300px, calc(100vw - 16px)); box-sizing: border-box;
  margin: 0 !important; padding: 10px !important; max-height: calc(100vh - 90px); overflow: auto;
  background: var(--card, #111827); color: var(--ink, inherit); border: 1px solid var(--edge, rgba(127,127,127,.35)); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); z-index: 40; }
.hdr.hdr-collapsed.menu-open > nav > *, .hdr.hdr-collapsed.menu-open > nav form { width: 100% !important; flex: none !important; margin: 0 !important; }
.hdr.hdr-collapsed.menu-open > nav a, .hdr.hdr-collapsed.menu-open > nav button { display: flex !important; align-items: center; justify-content: flex-start;
  width: 100% !important; min-height: 44px; padding: 10px 14px !important; box-sizing: border-box; text-align: left; border-radius: 10px; white-space: normal; }

/* Never let a long title or the button row widen the whole page (the phone would zoom out to fit). */
@media (max-width: 700px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .hdr { max-width: 100vw; min-width: 0; box-sizing: border-box; padding: 10px 12px !important; }
  .hdr > * { min-width: 0; }
}

/* 4. Dashboard: search box on its own line, buttons share the next. */
@media (max-width: 640px) {
  .main { padding: 14px 12px !important; }
  .searchbar { flex-wrap: wrap; }
  .searchbar input { flex: 1 1 100% !important; min-width: 0; }
  .searchbar .btn { flex: 1 1 0; min-width: 0 !important; }
  .glance { grid-template-columns: 1fr !important; }
  .glance > .tile { grid-column: auto !important; }
  .glance form input { min-width: 0; }
  .tiles { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tile .row { flex-wrap: wrap; }
  .tile .row .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr !important; } }
/* Tablets: the four category tiles as 2 × 2 instead of 3 + 1. */
@media (min-width: 641px) and (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 5. Item page: a small photo beside its buttons instead of a screen-filling box. */
@media (max-width: 900px) {
  .left-pic { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .left-pic .pic-box { grid-row: 1 / span 6; width: 112px !important; aspect-ratio: 2 / 3; }
  .left-pic > *:not(.pic-box) { grid-column: 2; margin-top: 0 !important; }
  .left-pic .btn { width: 100%; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .left-pic { grid-template-columns: 150px minmax(0, 1fr); }
  .left-pic .pic-box { width: 150px !important; }
}

/* Small screens: a little less padding everywhere. */
@media (max-width: 480px) {
  #main_form.card { padding: 14px !important; }
  #cs-bar { padding: 10px 12px; }
  #cs-bar button { flex: 1 1 auto; }
}

/* Installed as an app: respect the iPhone notch / home bar. */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .hdr { padding-top: max(10px, env(safe-area-inset-top)) !important; }
}

/* "Martin ▾" account menu (app_user_menu() in app_head.php) */
.umenu { position: relative; }
.umenu-btn { display: inline-flex !important; align-items: center; gap: 7px; }
.umenu-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  background: var(--accent, #3b82f6); color: #fff; flex: none; }
.umenu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card, #111827); color: var(--ink, inherit); border: 1px solid var(--edge, rgba(127,127,127,.35)); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.umenu-pop[hidden] { display: none; }
.umenu-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--edge, rgba(127,127,127,.25)); margin-bottom: 4px; }
.umenu-who strong { display: block; }
.umenu-who small { display: block; color: var(--muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.umenu-pop a, .umenu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; box-sizing: border-box;
  border: 0; border-radius: 9px; background: transparent; color: inherit !important; font: inherit; text-align: left; text-decoration: none; cursor: pointer; text-shadow: none !important; }
.umenu-pop a:hover, .umenu-pop button:hover, .umenu-pop a:focus-visible, .umenu-pop button:focus-visible { background: rgba(127,127,127,.15); outline: none; }
/* Inside the folded ☰ Menu: no second pop-up, just list the items. */
.hdr.hdr-collapsed .umenu-btn, .hdr.hdr-collapsed.menu-open > nav .umenu-btn { display: none !important; }
.hdr.hdr-collapsed .umenu-pop { display: flex !important; position: static; min-width: 0; padding: 6px 0 0; margin-top: 4px; border: 0;
  border-top: 1px solid var(--edge, rgba(127,127,127,.25)); border-radius: 0; box-shadow: none; background: transparent; }
.hdr.hdr-collapsed .umenu-who { border-bottom: 0; padding: 4px 4px 6px; margin: 0; }
.hdr.hdr-collapsed.menu-open > nav .umenu-pop a, .hdr.hdr-collapsed.menu-open > nav .umenu-pop button { border: 0 !important; background: transparent !important; }