/* ══════════════════════════════════════════════════════════════════════════
   canon-editor.css — the Books document editor's shared markup, on canon v5.

   A PORT OF THE MARKUP WE HAVE. The purchase order, quote and invoice editors
   are each written in place into #editorView by their page controller, and all
   three share one skeleton: .ed-top (back link and status), .ed-grid of .ed-col
   header fields, .items-head over table.ed-items, .ed-totals and .ed-actions.
   books.css drew that skeleton; the canon switches books.css off, so it is drawn
   here once for every editor that is ported. Page-specific parts of an editor
   (a PO's job link and receiving, a quote's options) live in that page's own
   canon-<page>.css.

   The editors are forms, not reports: the rules below are for inputs that are
   typed into, lines that are added and removed, and totals that move as they do.

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

@layer components {

  /* ── The top: back to the list, and what this document is ────────────── */
  :root.canon-v5 #editorView .ed-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px;
  }
  :root.canon-v5 #editorView .ed-top > .link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
  :root.canon-v5 #editorView .ed-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  :root.canon-v5 #editorView .ed-status strong {
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums;
    font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--c-text);
  }

  /* ── The header fields: one card, two columns ─────────────────────────── */
  :root.canon-v5 #editorView .ed-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px;
    padding: 20px 24px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 #editorView .ed-col { display: flex; flex-direction: column; min-width: 0; }

  /* A field label is the cap, as it is in a dialog. */
  :root.canon-v5 #editorView .lbl {
    display: block; margin: 16px 0 6px;
    font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 #editorView .ed-col > .lbl:first-child { margin-top: 0; }
  :root.canon-v5 #editorView .lbl .hint { font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
  :root.canon-v5 #editorView .hint { font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
  :root.canon-v5 #editorView .hint i { margin-right: 3px; vertical-align: -1px; }
  :root.canon-v5 #editorView .hint a { color: var(--c-on-wash-accent); text-decoration: underline; text-underline-offset: 2px; }
  :root.canon-v5 #editorView .hint strong { font-weight: 600; color: var(--c-text); }

  /* ── Fields ───────────────────────────────────────────────────────────── */
  :root.canon-v5 #editorView input:not([type="checkbox"]):not([type="radio"]),
  :root.canon-v5 #editorView select,
  :root.canon-v5 #editorView textarea {
    display: block; width: 100%; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px;
    transition: border-color var(--dur) var(--ease);
  }
  :root.canon-v5 #editorView textarea { height: auto; min-height: 72px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
  :root.canon-v5 #editorView input::placeholder,
  :root.canon-v5 #editorView textarea::placeholder { color: var(--c-cap); }
  :root.canon-v5 #editorView input:not([type="checkbox"]):not([type="radio"]):hover,
  :root.canon-v5 #editorView select:hover,
  :root.canon-v5 #editorView textarea:hover { border-color: var(--c-border-2); }
  :root.canon-v5 #editorView input:not([type="checkbox"]):not([type="radio"]):focus,
  :root.canon-v5 #editorView select:focus,
  :root.canon-v5 #editorView textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
  /* A locked document still shows its values, as values rather than as boxes
     waiting to be filled. */
  /* The input selector carries the field rule's two :not()s, or it loses to it
     on specificity and a locked field keeps its well. */
  :root.canon-v5 #editorView input:not([type="checkbox"]):not([type="radio"]):disabled,
  :root.canon-v5 #editorView select:disabled,
  :root.canon-v5 #editorView textarea:disabled { border-color: var(--c-border); background: transparent; color: var(--c-text); opacity: 1; cursor: default; }
  /* An empty locked field says nothing, rather than inviting an entry. */
  :root.canon-v5 #editorView input:disabled::placeholder,
  :root.canon-v5 #editorView textarea:disabled::placeholder { color: transparent; }
  :root.canon-v5 #editorView input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }

  /* ── The lines ────────────────────────────────────────────────────────── */
  :root.canon-v5 #editorView .items-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 24px 0 10px;
  }
  :root.canon-v5 #editorView .items-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--c-text); }
  :root.canon-v5 #editorView .items-head h3 .hint { font-weight: 400; }
  :root.canon-v5 #editorView .items-head .link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

  /* separate, not collapse: a collapsed table cannot take the card's radius. */
  :root.canon-v5 #editorView table.ed-items {
    width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
    font-size: 13px;
  }
  :root.canon-v5 #editorView table.ed-items th {
    padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--c-border); background: var(--c-card);
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 #editorView table.ed-items td { padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--c-border); color: var(--c-text); }
  :root.canon-v5 #editorView table.ed-items tbody tr:last-child td { border-bottom: 0; }
  :root.canon-v5 #editorView table.ed-items th:first-child,
  :root.canon-v5 #editorView table.ed-items td:first-child { padding-left: 16px; }
  :root.canon-v5 #editorView table.ed-items th:last-child,
  :root.canon-v5 #editorView table.ed-items td:last-child { padding-right: 16px; }
  :root.canon-v5 #editorView table.ed-items .num {
    text-align: right; white-space: nowrap; font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  }
  :root.canon-v5 #editorView table.ed-items td.num { font-weight: 600; }
  :root.canon-v5 #editorView table.ed-items td input:not([type="checkbox"]):not([type="radio"]) { height: 30px; }

  /* ── Totals ───────────────────────────────────────────────────────────── */
  :root.canon-v5 #editorView .ed-totals {
    width: 300px; max-width: 100%; box-sizing: border-box; margin: 16px 0 0 auto; padding: 14px 18px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 #editorView .ed-totals > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0;
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-text);
  }
  :root.canon-v5 #editorView .ed-totals > div > span { font-family: var(--font-sans); color: var(--c-text-2); }
  :root.canon-v5 #editorView .ed-totals .grand {
    margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--c-border-2);
    font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  }
  :root.canon-v5 #editorView .ed-totals .grand > span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--c-text); }

  /* ── Actions ──────────────────────────────────────────────────────────── */
  :root.canon-v5 #editorView .ed-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-border);
  }
  :root.canon-v5 #editorView .ed-actions a { text-decoration: none; }

  /* ── Phone ────────────────────────────────────────────────────────────── */
  @media (max-width: 560px) {
    :root.canon-v5 #editorView .ed-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px; }
    :root.canon-v5 #editorView .ed-col + .ed-col > .lbl:first-child { margin-top: 16px; }
    /* The lines scroll inside their own card rather than widening the page. */
    :root.canon-v5 #editorView table.ed-items { display: block; overflow-x: auto; }
    :root.canon-v5 #editorView input:not([type="checkbox"]):not([type="radio"]),
    :root.canon-v5 #editorView select { height: 42px; font-size: 16px; }
    :root.canon-v5 #editorView .ed-totals { width: 100%; }
    :root.canon-v5 #editorView .ed-actions > * { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  }
}