/* 10-flower.css — Flower room grid, tables, zones, detail panel
   Part of the ordered set linked from index.html. The parts concatenate to the
   original stylesheet byte for byte; link order IS the cascade order, so never
   reorder the <link> tags and never move a rule between files. */

button:disabled:hover {
  background: transparent;
}

/* ============================================================
   FLOWER ROOM GRID
   ============================================================ */

.fr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fr-title {
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Week of flower, across from the room name (2026-10-10). .fr-title is a
   flex row whose gap spaces it; the table view title is not, hence the margin
   there. */
.fr-week {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(52,212,106,0.14);
  border: 1px solid rgba(52,212,106,0.55);
  color: var(--text, inherit);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.fr-week small {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.75;
}

.fr-week em {
  margin-left: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--blue-text, #CFE4F5);
}

.fr-week-flush {
  border-color: var(--blue, #6FB7D9);
}

/* In the table view the pill sits inside a smaller heading: keep it below
   the title text, never above it. */
.frt-title .fr-week {
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 0.75em;
}

.frt-title .fr-week small {
  font-size: 14px;
}

.fr-week-idle {
  background: transparent;
  border-color: var(--border, rgba(255,255,255,0.2));
  color: var(--muted);
  font-size: 16px;
}

.fr-subtitle {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.fr-tabs {
  display: flex;
  gap: 0;
}

.fr-tab {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 8px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.fr-tab + .fr-tab {
  border-left: none;
}

.fr-tab.active,
.fr-tab:hover {
  background: rgba(143, 195, 106, 0.12);
  color: var(--accent);
  border-color: rgba(143, 195, 106, 0.5);
}

/* Stats bar */
.fr-stats-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fr-stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line);
}

.fr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fr-dot.healthy,
.fr-stat-badge.healthy { color: var(--accent); }
.fr-dot.healthy        { background: var(--accent); }

.fr-dot.flagged,
.fr-stat-badge.flagged { color: var(--warn); }
.fr-dot.flagged        { background: var(--warn); }

.fr-dot.dead,
.fr-stat-badge.dead    { color: var(--bad); }
.fr-dot.dead           { background: var(--bad); }

.fr-dot.empty          { background: #3a3a3a; }


/* Zone highlight bar */
.fr-zone-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.fr-zone-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.fr-zone-btn,
.fr-zone-clear {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 4px 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: unset;
}

.fr-zone-btn.active,
.fr-zone-btn:hover {
  background: rgba(100, 169, 196, 0.15);
  color: #7ec8df;
  border-color: rgba(100, 169, 196, 0.5);
}

.fr-zone-clear {
  color: var(--bad);
  border-color: rgba(232, 111, 95, 0.4);
}

.fr-zone-clear:hover {
  background: rgba(232, 111, 95, 0.1);
}

/* Tables row — 5 tables side by side */
.fr-tables {
  flex-direction: row;
  margin-bottom: 16px;
  overflow-x: auto;
}

.fr-table {
  border: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
}

.fr-table-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.fr-table-body {
  flex-direction: row;
  align-items: flex-start;
}

/* Plant grid. 80-redesign.css flows this landscape — plant rows run
   left-to-right as grid columns — so size comes from the track and nothing is
   templated here. The four fixed 18px columns this used to declare only ever
   templated rows 1-4; the rest fell to grid-auto-columns, which left zone 1 at
   two-thirds the width of zones 2-10 and every zone label off its block. The
   18x10 cell did the same at cell scale, pinning it inside a wider track and
   pulling it off the grid line. */
.fr-cell {
  cursor: pointer;
}

/* Status colors — fallback when no strain color assigned */
.fr-cell.healthy { background: rgba(143, 195, 106, 0.6); }
.fr-cell.flagged { background: rgba(228, 180, 93,  0.85); }
.fr-cell.empty   {
  border: 1px solid #232e28;
  cursor: default;
}

/* Strain-colored cells override status background via inline style */
.fr-cell.strain-colored {
  position: relative;
  overflow: hidden;
}

/* Status dot — small corner indicator for flagged/dead */
.fr-sdot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
}

.fr-sdot.flagged { background: #e4b45d; }
.fr-sdot.dead    { background: #e86f5f; }

/* Zone feed line — the hose tees in halfway through the zone, after its 2nd
   row, not at the block edge. The grid flows landscape (80-redesign.css), so a
   plant row is a grid column and the line is a vertical rule down the middle of
   the zone's 4-column block. Drawn as ::after rather than a border so it can
   bridge the 2px cell gap; overflow lifts .fr-cell.strain-colored's clip, which
   would otherwise cut it off at the cell edge. */
.fr-cell.zone-feed {
  overflow: visible;
}

.fr-cell.zone-feed::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  bottom: -2px;
  width: 2px;
  border-radius: 1px;
  background: var(--blue, rgba(100, 169, 196, 0.55));
  opacity: 0.65;
  pointer-events: none;
}

/* Detail-panel hint naming the feed line for a plant's zone. */
.fr-feed-hint {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* Zone highlight — non-highlighted cells fade */
.fr-grid:has(.hl) .fr-cell:not(.hl):not(.empty) {
  opacity: 0.15;
}

/* Zone highlight boosts strain-colored cells */
.fr-cell.strain-colored.hl {
  filter: brightness(1.2);
}

.fr-cell.hl.empty { background: #243028; }

.fr-cell:not(.empty):hover {
  transform: scale(1.5);
  z-index: 2;
  outline: 2px solid #fff;
}

.fr-cell.sel {
  outline: 2px solid #fff;
  z-index: 3;
  transform: scale(1.5);
}

/* Zone tick labels — vertical column beside each grid */
.fr-zone-ticks {
  flex-direction: column;
}

.fr-ztick {
  display: flex;
  align-items: center;
  padding-left: 2px;
  line-height: 1;
}

.fr-ztick.hl {
  font-weight: 700;
}

/* Per-table strain legend */
.fr-legend {
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.fr-legend-item {
  white-space: nowrap;
}

.fr-legend-swatch {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 2px;
}

.fr-legend-name {
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-legend-count {
  color: var(--muted);
  font-weight: 700;
}

/* Detail panel */
.fr-detail {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px;
  min-height: 80px;
}

.fr-detail-hint {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.fr-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.fr-detail-strain {
  font-size: 20px;
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fr-detail-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.fr-detail-dl {
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.fr-detail-dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 14px;
}

.fr-detail-dl dt { color: var(--muted); }
.fr-detail-dl dd { margin: 0; font-weight: 700; }

.fr-status-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fr-status-chip.healthy {
  background: rgba(143, 195, 106, 0.15);
  color: var(--accent);
}

.fr-status-chip.flagged {
  background: rgba(228, 180, 93, 0.15);
  color: var(--warn);
}

.fr-status-chip.dead,
.fr-status-chip.error {
  background: rgba(232, 111, 95, 0.15);
  color: var(--bad);
}

.fr-status-chip.retired {
  color: var(--muted);
}

.fr-unassigned { color: var(--muted); font-weight: 400; }

.fr-notes {
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0 16px;
  min-height: 36px;
}

.fr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.fr-action-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fr-action-btn:hover {
  background: rgba(143, 195, 106, 0.1);
  border-color: rgba(143, 195, 106, 0.4);
}

.fr-action-btn.warn {
  color: var(--bad);
  border-color: rgba(232, 111, 95, 0.4);
}

.fr-action-btn.warn:hover {
  background: rgba(232, 111, 95, 0.1);
}

.fr-action-btn.accent {
  color: var(--accent);
  border-color: rgba(143, 195, 106, 0.5);
  background: rgba(143, 195, 106, 0.08);
}

.fr-action-btn.accent:hover {
  background: rgba(143, 195, 106, 0.18);
}

.fr-pending-note {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

.gf-live-note {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  opacity: 0.6;
}

.fr-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fr-fill-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fr-fill-btn:hover {
  color: var(--accent);
  border-color: rgba(143, 195, 106, 0.5);
  background: rgba(143, 195, 106, 0.08);
}

/* Full strength always: they used to sit at 60% until hovered, and a phone
   never hovers, so on the floor they always looked switched off. */
.fr-table-fill-btn,
.fr-table-move-btn {
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: unset;
}

.fr-table-fill-btn:hover {
  color: var(--accent);
}

/* Flower room section wrapper */

/* Drag and drop (migration 213): drag a plant to move/swap it, drag a strain
   chip to reorder a table. Touch needs a press-and-hold, so scrolling still works. */
.fr-tables .fr-cell.strain-colored:not(.empty) { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fr-tables .fr-cell.dragging,
.fr-tables .fr-legend-drag.dragging { opacity: 0.35; }
.fr-tables .fr-cell.fr-drag-armed,
.fr-tables .fr-legend-drag.fr-drag-armed { outline: 2px solid var(--accent, #4CAF50); outline-offset: 1px; }
.fr-tables .fr-cell.drag-over { outline: 2px solid var(--accent, #4CAF50); outline-offset: 1px; transform: scale(1.35); z-index: 2; position: relative; }
.fr-tables .fr-legend-drag { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fr-tables .fr-legend-drag.drag-over { outline: 2px dashed var(--accent, #4CAF50); outline-offset: 2px; }
.fr-legend-grip { opacity: 0.45; margin-right: 2px; font-size: 0.85em; }