/* ══════════════════════════════════════════════════════════════════════════
   canon-quotes.css — the Quotes page's own markup, on canon v5.

   The list is a canon renderer (quotes-page.js renderCanonQuoteFigure and
   renderCanonQuoteList) drawn almost wholly in canon utilities; this file
   carries only what those cannot say: the toolbar the page already has, moved
   into the canon header on mount, and the table's row affordances.

   The editor's shared skeleton is canon-editor.css, and the document components
   it shares with invoices are canon-doc.css.

   Every rule is scoped to :root.canon-v5 and layered.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── The toolbar: the legacy .list-actions, moved in whole ────────────── */
  /* Moved rather than copied, so listtoolbar.js's Filter and More, every id and
     every inline handler keep working. */
  :root.canon-v5 #quoCanonRoot .list-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  :root.canon-v5 #quoCanonRoot .list-actions > .btn-primary { order: 9; }
  :root.canon-v5 #quoCanonRoot .inv-search {
    box-sizing: border-box; height: 34px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 #quoCanonRoot .list-actions > input[type="search"].inv-search { width: 240px; }
  :root.canon-v5 #quoCanonRoot .inv-search::placeholder { color: var(--c-cap); }
  :root.canon-v5 #quoCanonRoot .inv-search:hover { border-color: var(--c-border-2); }
  :root.canon-v5 #quoCanonRoot .inv-search:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }

  /* ── The table ────────────────────────────────────────────────────────── */
  :root.canon-v5 .quo-row { cursor: pointer; transition: background var(--dur) var(--ease); }
  :root.canon-v5 .quo-row:hover { background: var(--c-card-2); }
  :root.canon-v5 .quo-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  :root.canon-v5 .quo-ck input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
  :root.canon-v5 .quo-ck input:disabled { cursor: not-allowed; opacity: .4; }
  :root.canon-v5 .quo-act { white-space: nowrap; }
  :root.canon-v5 .quo-optset .ti-layout-grid { margin-right: 2px; font-size: 14px; }
  :root.canon-v5 .quo-exp:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

  /* The list insight sits between the figure and the table. */
  :root.canon-v5 #quoCanonRoot #quoteInsight:not(:empty) { margin-top: 12px; }

  /* ── Phone ────────────────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    /* Seven stages do not fit a phone's width and a segmented control cannot
       wrap: it takes its own row and scrolls sideways inside itself. */
    :root.canon-v5 #quoSeg { flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    :root.canon-v5 #quoSeg::-webkit-scrollbar { display: none; }
    :root.canon-v5 #quoSeg button { flex: none; white-space: nowrap; }
    /* The toolbar's phone layout is the shared list header's (canon-doc.css .bk-head). */
  }
}