/* ============================================================================
   BLANK Sales · agent front — layout glue only. Every colour, radius, shadow and font is a CORE token from styles.css;
   nothing here adds a new one. Keep this file small: a new look belongs in styles.css for both apps.
   ============================================================================ */

/* booking rows: the whole row opens the booking; the status word gets a quiet line in front of it */
.rowi[data-href] { cursor: pointer; transition: transform 160ms var(--ease); }
.rows.boxed .rowi[data-href]:hover { transform: translateY(-1px); }
.rowi a.t { display: block; }
.rowi a.t:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.rowi .hint { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.bk-tools { align-items: center; }
.bk-tools .search.inline { margin-left: auto; }

/* the three steps: CORE's tabs with CORE's count badge; a short name on a phone */
.wiz-tabs { gap: 4px; }
.wiz-tabs .ws { display: none; }
.wiz-tabs .badge svg.ic { width: 13px; height: 13px; vertical-align: -2px; }
.wiz-tabs .badge:not(.hot) { background: var(--good-bg); color: var(--good); }
/* the booking form on a computer (Calvin 2026-11-02: use the whole width): form left, summary + gaps on the right */
.wiz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.wiz-main { min-width: 0; }
.wiz-rail { display: none; }
.wiz-rail .rail-step + .rail-step { margin-top: 4px; }
.wiz-rail .rail-step .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
@media (min-width: 1180px) {
  .wiz-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .wiz-rail { display: grid; gap: 16px; position: sticky; top: 16px; }
}
@media (min-width: 1500px) { .wiz-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
/* CORE's .more is a link; as a button it loses the browser's border */
button.more { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wiz-foot { padding-top: 16px; padding-bottom: 16px; }
.wiz .field .lbl, .wiz .field label { flex-wrap: wrap; }

/* a status line in lemon (the PTAA waits for the owner's signature): CORE's accent pair */
.rs-status.lemon-box { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.rs-status > span { min-width: 0; }
.nw { white-space: nowrap; }

/* expected rent: CORE's room row with three parts (name, rent, remove) */
.room-row.rent-row { grid-template-columns: minmax(0, 1fr) 120px 32px; }

/* keys: four counters */
.kc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kc { padding: 12px; border-radius: var(--r-tile); background: var(--sunken); }
.kc-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kc-ctl b { font-size: 20px; font-weight: 800; }
.kc-ctl .btn.ghost { background: var(--card); }
.app-row { display: grid; gap: 12px; padding: 12px; border-radius: var(--r-tile); background: var(--sunken); }
.app-row .field input, .app-row .field select { background-color: var(--card); }
.up-done .chip { max-width: 60%; }

/* the booking page: two columns like CORE's case page. CORE's .grid.side also picks up the sidebar's .side rule
   (sticky, 100dvh, 12px padding), so Sales uses its own name for the same columns */
.grid.sides { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1180px) { .grid.sides { grid-template-columns: minmax(0, 1fr); } }
.fact.wide { grid-column: 1 / -1; }
.stages .tl.later .s { color: var(--text-3); }
.stages .tl.later .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--text-3); }
.stages .tl .s .chip { margin-left: 6px; vertical-align: 1px; }
.ta-list.docs { padding: 0; }
.next-card .rs-acts .btn { min-width: 0; }

@media (max-width: 1024px) {
  .kc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: every tap target is at least 44 px (agents book on their phones); the rest stays CORE */
@media (max-width: 560px) {
  .wiz-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wiz-tabs button { height: 44px; padding: 0 4px; justify-content: center; gap: 4px; font-size: 12px; }
  .wiz-tabs .badge { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; }
  .wiz-tabs .wl { display: none; } .wiz-tabs .ws { display: inline; }
  .main .btn.small { height: 44px; }
  .main .btn.icon.small { width: 44px; }
  .main .tick { min-height: 44px; }
  .main .pill-select, .main .search.inline input { height: 44px; }
  .main .ph-actions .seg button { height: 38px; }
  .main .pill { height: 44px; }
  .bk-tools .search.inline { margin-left: 0; width: 100%; flex: 1 1 100%; }
  .rowi .more { min-height: 44px; }
  .room-row.rent-row { grid-template-columns: minmax(0, 1fr) 96px 44px; }
  .room-row.rent-row .btn.icon.small { height: 44px; }
  .next-card .rs-acts .btn { flex: 1 1 auto; }
}

/* gaps are warnings (Calvin 2026-11-02: an alert reads in red): CORE's bad pair, the same red as "Ending this week" */
.pill[data-gap] { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.pill[data-gap]:hover, .pill[data-gap]:focus-visible { border-color: var(--bad); color: var(--bad); }
.warn-t { color: var(--bad); }