/* ═══════════════════════════════════════════════════════════════
   MEASUREMENTS TAB
   Trade tabs (Roofing, Siding, +) → Category cards → Item rows
   ═══════════════════════════════════════════════════════════════ */

.meas-section { padding: var(--s2) 0; display: flex; flex-direction: column; gap: var(--s3); }

/* ─── Header ─────────────────────────────────────────────── */
.meas-header { display: flex; align-items: center; justify-content: space-between; }
.meas-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.meas-header-actions { display: flex; gap: var(--s2); }

/* ─── Controls Row (tabs + pitch) ────────────────────────── */
.meas-controls { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.meas-control-group { display: flex; flex-direction: column; gap: var(--s1); }
.meas-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; }
.meas-pitch-select { width: 100px; font-weight: 600; }
.meas-item-count { font-size: var(--text-xs); color: var(--text-label); font-weight: 600; margin-left: auto; }

/* ─── Trade Tabs ─────────────────────────────────────────── */
.meas-trade-tabs { display: flex; background: var(--bg-input); border-radius: var(--radius-md); padding: 3px; }
.meas-trade-tab { display: flex; align-items: center; gap: 6px; padding: var(--s2) var(--s4); border: none; background: transparent; border-radius: calc(var(--radius-md) - 3px); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 200ms ease; white-space: nowrap; }
.meas-trade-tab:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.4); }
.meas-trade-tab.active { background: var(--navy-base, #1a3155); color: white; box-shadow: var(--shadow-sm); }
.meas-trade-tab-add { padding: var(--s2) var(--s3); font-size: var(--text-md); color: var(--text-label); }
.meas-trade-tab-add:hover { color: var(--accent); }

/* ─── Category Groups ────────────────────────────────────── */
.meas-groups { display: flex; flex-direction: column; gap: var(--s2); }

/* ─── Category Card ──────────────────────────────────────── */
.meas-cat { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 200ms ease, opacity 200ms ease; }
.meas-cat.dragging { opacity: 0.4; box-shadow: var(--shadow-lg); }
.meas-cat.drag-over { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }

/* ─── Category Header ────────────────────────────────────── */
.meas-cat-hdr { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer; user-select: none; transition: background 150ms ease; }
.meas-cat-hdr:hover { background: rgba(0,0,0,0.015); }

.meas-cat-grip { cursor: grab; color: var(--text-label); flex-shrink: 0; display: flex; align-items: center; padding: 2px; }
.meas-cat-grip:active { cursor: grabbing; }
.meas-cat-grip svg { opacity: 0.25; transition: opacity 150ms ease; }
.meas-cat-hdr:hover .meas-cat-grip svg { opacity: 0.8; }

.meas-cat-name { font-size: var(--text-sm); font-weight: 700; color: var(--navy-base, #1a3155); text-transform: uppercase; letter-spacing: 0.03em; flex: 1; }
.meas-cat-count { font-size: 10px; font-weight: 600; color: var(--text-label); background: var(--bg-input); padding: 1px var(--s2); border-radius: var(--radius-full); }
.meas-chevron { color: var(--text-label); flex-shrink: 0; transition: transform 200ms ease; }

/* ─── Category Body ──────────────────────────────────────── */
.meas-cat-body { border-top: 1px solid var(--border); }
.meas-cat-body.collapsed { display: none; }
.meas-cat-add { padding: var(--s1) var(--s3); border-top: 1px solid rgba(0,0,0,0.04); }

/* ─── Table ──────────────────────────────────────────────── */
.meas-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.meas-col-drag   { width: 32px; }
.meas-col-desc   { width: auto; }
.meas-col-qty    { width: 90px; }
.meas-col-unit   { width: 70px; }
.meas-col-action { width: 36px; }
.meas-table th { padding: var(--s1) var(--s3); font-size: 10px; font-weight: 600; color: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-input); border-bottom: 1px solid var(--border); text-align: left; }
.meas-table th.meas-col-qty { text-align: right; padding-right: var(--s3); }
.meas-table th.meas-col-unit { text-align: center; }
.meas-table td { padding: 0 var(--s2); border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; height: 36px; }
.meas-table tbody tr:last-child td { border-bottom: none; }

/* ─── Row States ─────────────────────────────────────────── */
.meas-row { transition: background 150ms ease; }
.meas-row:hover { background: rgba(0,0,0,0.015); }
.meas-row-filled { background: rgba(6,139,195,0.03); }
.meas-row-filled:hover { background: rgba(6,139,195,0.06); }
.meas-row.dragging { opacity: 0.4; }
.meas-row.drag-over { box-shadow: inset 0 2px 0 var(--accent); }

/* ─── Cells ──────────────────────────────────────────────── */
.meas-cell-desc { overflow: hidden; }
.meas-cell-qty { text-align: right; }
.meas-cell-unit { text-align: center; }
.meas-cell-action { text-align: center; }

/* ─── Inputs ─────────────────────────────────────────────── */
.meas-input { width: 100%; border: none; background: transparent; font-size: var(--text-sm); color: var(--text-primary); padding: 6px var(--s2); border-radius: var(--radius-sm); transition: background 150ms ease; }
.meas-input:focus { outline: none; background: var(--bg-input); box-shadow: 0 0 0 2px rgba(6,139,195,0.15); }
.meas-input-num { text-align: right; font-weight: 700; font-size: var(--text-sm); color: var(--accent, #068bc3); }
.meas-input-num::placeholder { color: var(--text-label); font-weight: 400; opacity: 0.5; }
.meas-row-filled .meas-input-num { color: var(--text-primary); }
.meas-input-unit { text-align: center; text-transform: uppercase; color: var(--text-label); font-size: var(--text-xs); font-weight: 600; }

/* ─── Drag Handle ────────────────────────────────────────── */
.meas-drag-handle { cursor: grab; color: var(--text-label); text-align: center; padding: 4px 2px !important; }
.meas-drag-handle:active { cursor: grabbing; }
.meas-drag-handle svg { opacity: 0.2; transition: opacity 150ms ease; }
.meas-row:hover .meas-drag-handle svg { opacity: 0.7; }

/* ─── Remove Button ──────────────────────────────────────── */
.meas-rm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-label); font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: all 150ms ease; }
.meas-row:hover .meas-rm { opacity: 1; }
.meas-rm:hover { background: rgba(220,38,38,0.08); color: var(--red); }

/* ─── Footer ─────────────────────────────────────────────── */
.meas-actions { display: flex; gap: var(--s2); }
.meas-empty { padding: var(--s6); text-align: center; color: var(--text-label); font-size: var(--text-sm); }

/* ─── Match Modal ────────────────────────────────────────── */
.match-modal { padding: var(--s2) 0; }
.match-summary { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.match-badge { display: inline-flex; align-items: center; padding: var(--s1) var(--s3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.match-badge-green { background: rgba(22,163,74,0.1); color: var(--green); }
.match-badge-amber { background: rgba(245,158,11,0.1); color: var(--amber); }
.match-list { display: flex; flex-direction: column; gap: var(--s2); max-height: 400px; overflow-y: auto; }
.match-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--radius-md); background: var(--bg-input); }
.match-row-ok { border-left: 3px solid var(--green); }
.match-row-warn { border-left: 3px solid var(--amber); }
.match-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .meas-col-drag { display: none; }
  .meas-drag-handle { display: none; }
  .meas-cat-grip { display: none; }
  .meas-rm { opacity: 1; }
  .meas-cat-hdr { padding: var(--s2) var(--s3); }
  .meas-cat-add { padding: var(--s1) var(--s3); }
  .meas-trade-tabs { flex-wrap: wrap; }
}