/* 89-flower-table.css — the Flower table view (flower-room.js, renderTableView).
   Gary 2026-10-06: "killing specific plants can be tough since they are so
   small". The room view draws a table 40 plants long at 8px a plant on a phone,
   which is a map, not a target. This draws one table the way it stands, 4
   across and 40 down, every plant a 64px button that names its strain, in the
   Retail tab's look: large type, 44-50px targets, one obvious next step.
   Every button here carries .rt-btn, which 80-redesign.css's every-button
   rule exempts, so these rules are the whole of each button's look. */

/* The room view: each table opens from a big button; on a phone the grid is
   the map you tap to open a table at that zone (flower-room.js). */
.fr-table-name { margin-right: auto; }
.fr-open-table { min-height: 44px; padding: 8px 16px; font-size: 1rem; letter-spacing: 0; text-transform: none; }

/* The open table takes the room panel's full width: on a phone every pixel
   is a wider plant. */
#flowerRoomSection.table-open { padding: 12px; }

/* Header: back, which table, what is on it */
.frt { padding-bottom: 24px; }
.frt.selecting { padding-bottom: 150px; }
.frt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.frt-back { min-height: 46px; padding: 8px 16px; font-size: 1rem; }
.frt-title { flex: 1 1 220px; min-width: 0; }
.frt-title h2 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.frt-title p { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }

/* Table switcher: the Retail tab bar */
.frt-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.frt-tab { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 52px; padding: 6px 4px; border: 0; background: transparent; color: var(--muted); font-size: 1.05rem; font-weight: 800; }
.frt-tab.active { background: rgba(52, 212, 106, 0.16); color: var(--text); }
.frt-tab-count { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.875rem; }
.frt-tab.active .frt-tab-count { background: var(--accent); color: var(--accent-text); }

/* Pick several, what to do, and which strains are on it */
.frt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.frt-select { min-height: 50px; padding: 10px 18px; font-size: 1.02rem; }
.frt-hint { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: 1rem; }
.frt-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.frt-legend-item { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.95rem; font-weight: 700; }
.frt-legend-item i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.frt-legend-item b { color: var(--muted); }

/* Zone chips stay under the navbar (a 58px box) while the rows scroll past,
   led by the table's name so nobody loses which table they are on, and the chip for
   the zone in view lights up. On a phone the navbar scrolls away, so
   --gf-navbar-cover is 0 there and the chips stick to the very top. */
.frt-zonebar { position: sticky; top: var(--gf-navbar-cover, 58px); z-index: 12; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding: 8px 0; background: var(--bg); scrollbar-width: none; }
.frt-zonebar-table { position: sticky; left: 0; z-index: 1; display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--text); box-shadow: 8px 0 10px var(--bg); color: var(--accent-text); font-size: 1rem; font-weight: 900; }
.frt-zonebar::-webkit-scrollbar { display: none; }
.frt-zone-chip { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 1rem; font-weight: 700; }
.frt-zone-chip.active { border-color: var(--accent); background: rgba(52, 212, 106, 0.16); }

/* A zone: its header, then four rows of four, the feed line between rows 2
   and 3 the way the hose tees in. */
.frt-zone { margin: 0 0 18px; scroll-margin-top: calc(var(--gf-navbar-cover, 58px) + 82px); }
.frt-zone-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 8px; padding: 10px 14px; border-left: 5px solid var(--blue); border-radius: 10px; background: rgba(111, 183, 217, 0.08); }
.frt-zone-head h3 { margin: 0; font-size: 1.25rem; }
.frt-zone-head > div { flex: 1 1 auto; min-width: 0; }
.frt-zone-head span { color: var(--muted); font-size: 0.95rem; }
/* Fold a zone down to its header and a one-line summary. */
.frt-fold { min-height: 44px; min-width: 120px; padding: 6px 14px; font-size: 0.95rem; }
.frt-zone.folded { margin-bottom: 8px; }
.frt-zone.folded .frt-zone-head { margin: 0; border-left-color: var(--line-strong); background: var(--panel); }
.frt-grid { display: flex; flex-direction: column; gap: 6px; }
.frt-row { display: grid; grid-template-columns: 42px repeat(4, minmax(0, 1fr)); gap: 6px; }
.frt-rownum { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; font-weight: 800; line-height: 1.05; }
.frt-rownum small { font-size: 0.875rem; font-weight: 700; }
.frt-feed { height: 3px; margin: 1px 0 1px 48px; border-radius: 2px; background: var(--blue); opacity: 0.6; }

/* A plant: its strain's colour down the left edge, its name, its column. */
.frt-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 64px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-strong); background: linear-gradient(90deg, var(--strain, #556) 0 6px, rgba(255, 255, 255, 0.035) 6px); color: var(--text); text-align: left; }
.frt-cell-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.95rem; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.frt-cell-meta { color: var(--muted); font-size: 0.875rem; font-weight: 700; }
.frt-cell-meta b { color: var(--warn); }
.frt-cell.flagged { border-color: rgba(240, 162, 59, 0.75); }
.frt-cell.dead { border-color: rgba(242, 125, 106, 0.65); background: linear-gradient(90deg, var(--bad) 0 6px, var(--bad-bg) 6px); }
.frt-cell.dead .frt-cell-meta b { color: var(--bad); }
.frt-cell.empty { border-style: dashed; background: transparent; }
.frt-cell.empty .frt-cell-name { color: var(--muted); font-weight: 700; }
.frt-cell.focus { outline: 3px solid var(--text); outline-offset: 1px; }
/* Picking: a picked plant fills green and its second line says so, the way
   every chosen button in the app reads. Nothing is drawn over the name: a pick
   ring in the corner cut "Mile High Glue" to "Mil e..." on a phone. */
.frt.selecting .frt-cell.sel { border-color: var(--accent); background: linear-gradient(90deg, var(--strain, #556) 0 6px, rgba(52, 212, 106, 0.22) 6px); box-shadow: inset 0 0 0 2px var(--accent); }
.frt-cell-meta em { color: var(--accent); font-style: normal; font-weight: 900; }
.frt-meta-row { display: none; }

/* The picked-plants bar: the Retail order bar, above the crew's tab bar. */
.frt-bar { position: fixed; left: 50%; bottom: 96px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: min(760px, calc(100% - 20px)); padding: 12px 14px; transform: translateX(-50%); border: 1px solid var(--accent); border-radius: 16px; background: rgba(19, 24, 20, 0.97); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.frt-bar > span { display: flex; flex: 999 1 180px; flex-direction: column; color: var(--muted); font-size: 0.95rem; }
.frt-bar strong { color: var(--text); font-size: 1.08rem; }
.frt-bar-death { min-height: 50px; padding: 10px 18px; border: 0; background: #c0392b; color: #fff; font-size: 1.05rem; font-weight: 800; }
.frt-bar > .rt-btn { flex: 1 0 auto; }

@media (max-width: 760px) {
  /* A phone picks Flower plants in the table view, not on the 8px map. Scoped
     to Flower: the Mother room's pick bar wears the same class. */
  #flowerRoomSection .fr-multi-bar:not(.active) { display: none; }
  /* The room view: zone chips scroll in one row, and each table's Open button
     takes a row of its own under the table name. */
  #flowerRoomSection .fr-zone-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #flowerRoomSection .fr-table-label { flex-wrap: wrap; }
  .fr-table-label .fr-open-table { flex: 1 1 100%; order: 9; }
  #view-flower #flowerRoomSection.table-open { padding: 10px 4px; }
  .frt-head .frt-title h2 { font-size: 1.35rem; }
  /* No row-number gutter on a phone: four names share ~300px, so the width
     goes to them and the first plant of each row says "Row N". */
  .frt-grid .frt-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .frt-row > .frt-rownum { display: none; }
  .frt-grid .frt-feed { margin-left: 0; }
  .frt-row .frt-cell { padding: 7px 3px 7px 10px; }
  .frt-cell-meta .frt-meta-row { display: inline; }
  .frt-cell-meta .frt-meta-col { display: none; }
  /* Three short lines read "Mile / High / Glue" where two cut it to "Mile High..." */
  .frt-cell .frt-cell-name { font-size: 0.875rem; -webkit-line-clamp: 3; }
}

@media (max-width: 520px) {
  .frt-tabs .frt-tab-word { display: none; }
}