/* ══════════════════════════════════════════════════════════════════════════
   canon-sched-office.css — the office's half of a job (js/scheduler/officeflow.js),
   the one inbox (canon-rail.js) and the phone board (js/scheduler/phoneview.js).
   Every rule is keyed on an element or class those modules create only while
   their flag is on (feature_sched_confirm_default, _hours_from_stamps,
   _unbilled_row, _one_inbox, _phone_view), so with the flags off it matches
   nothing. Canon tokens only.
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {
  /* ── Quick create: Tell customer ─────────────────────────────────────── */
  .sched-app .sched-qc-f.sched-qc-tellrow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2_5); }
  .sched-app .sched-qc-tellrow > label.sset-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0;
    font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-text); cursor: pointer; }
  .sched-app .sched-qc-tellrow .sched-qc-hint { font-size: 11.5px; color: var(--c-muted); }

  /* ── Quick create: contractor work (site / their WO / end client, D-2) ── */
  .sched-app .sched-qc-sub { display: flex; flex-direction: column; gap: var(--sp-2_5); }
  .sched-app .sched-qc-sub[hidden] { display: none; }
  .sched-app .sched-qc-subrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .sched-app #schedQcWoDup { font-size: 12px; color: var(--c-warn, var(--c-muted)); }
  .sched-app #schedQcWoDup:empty { display: none; }
  .sched-app .sched-qc-paste { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1_5);
    padding: var(--sp-1_5) var(--sp-2_5); border: 1px solid var(--c-border); border-radius: 8px;
    background: transparent; color: var(--c-text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
  .sched-app .sched-qc-paste:hover { border-color: var(--c-accent-edge); background: var(--c-accent-soft); }
  .sched-app .sched-qc-paste[hidden] { display: none; }
  .sched-app .sched-wo-trybtn { display: inline-flex; align-items: center; gap: var(--sp-1); }

  /* ── Completion form: hours suggested from the field stamps ──────────── */
  .sched-app #jcLaborHours.is-suggested { border-color: var(--c-accent-edge); background: var(--c-accent-soft); }
  .sched-app .sched-stamp-note { display: flex; align-items: flex-start; gap: var(--sp-1_5); margin-top: var(--sp-1_5); font-size: 12px; line-height: 1.45; color: var(--c-muted); }
  .sched-app .sched-stamp-note i { flex: none; margin-top: var(--sp-px); color: var(--c-accent); }

  /* ── Attention strip: Complete, not invoiced ─────────────────────────── */
  .sched-app .sched-attention.has-unbilled .sched-df-clear { display: none; }
  .sched-app .sched-ub-rows { margin-bottom: var(--sp-1_5); }
  .sched-app .sched-df-row.sched-ub .sched-df-main i:first-child { color: var(--c-on-wash-warn, var(--c-warn)); }
  .sched-app .sched-ub-chev { font-size: 12px; color: var(--c-muted); transition: transform .15s; }
  .sched-app .sched-ub-main[aria-expanded="true"] .sched-ub-chev { transform: rotate(180deg); }
  .sched-ub-pop { position: fixed; z-index: 70; display: flex; flex-direction: column; max-height: min(420px, 70vh);
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: 10px; box-shadow: var(--float); color: var(--c-text); overflow: hidden; }
  .sched-ub-pop .sched-ub-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2_5) var(--sp-3); border-bottom: 1px solid var(--c-border);
    font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  .sched-ub-pop .sched-ub-head span { margin-left: auto; font-variant-numeric: tabular-nums; }
  .sched-ub-pop .sched-ub-list { overflow-y: auto; padding: var(--sp-1); }
  .sched-ub-pop .sched-ub-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1_5) var(--sp-1_5) var(--sp-1_5) var(--sp-2); border-radius: 8px; }
  .sched-ub-pop .sched-ub-item:hover { background: var(--c-card-2); }
  .sched-ub-pop .sched-ub-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-px); padding: 0; border: 0;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .sched-ub-pop .sched-ub-name b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sched-ub-pop .sched-ub-name span { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sched-ub-pop .sched-ub-go { flex: none; height: 30px; margin: 0; display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }

  /* ── The rail: one inbox (canon-rail.js fold) ────────────────────────── */
  .sched-app .cr-inbox .cr-subtabs { display: flex; margin: 0 0 var(--sp-3); }
  .sched-app .cr-inbox .cr-subtabs button { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-0_5);
    padding: var(--sp-1); white-space: nowrap; font-size: 11px; }
  .sched-app .cr-inbox .cr-subtabs button[hidden] { display: none; }
  .sched-app .cr-inbox .cr-subtabs .cr-n { font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--c-cap); }
  .sched-app .cr-inbox .cr-subtabs .cr-n:empty { display: none; }
  .sched-app .cr-inbox .cr-sub[hidden] { display: none; }

  /* ── The phone board (≤760px; phoneview.js sets body.sched-pv) ──────── */
  @media (max-width: 760px) {
    /* One row: the date stepper and View. Everything else is in the sheet,
       behind the signal chip, or — the second solid "+" — gone. */
    .sched-app.sched-pv #sec-scheduler .stoolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
    .sched-app.sched-pv #sec-scheduler .stoolbar > .stoolbar-head,
    .sched-app.sched-pv #sec-scheduler .stoolbar > .stoolbar-sp,
    .sched-app.sched-pv #sec-scheduler .stoolbar > .sched-add-job { display: none; }
    .sched-app.sched-pv #sec-scheduler .sdatenav-wrap { flex: 1 1 auto; min-width: 0; order: 0; width: auto; }
    .sched-app.sched-pv #sec-scheduler .sdatenav { width: 100%; }
    .sched-app.sched-pv #sec-scheduler .sdatenav .today { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sched-app.sched-pv .sched-pv-viewbtn { flex: none; order: 1; height: 40px; margin: 0; display: inline-flex; align-items: center; gap: var(--sp-1_5); padding: 0 var(--sp-3); }
    .sched-app.sched-pv .sched-pv-viewbtn .ti { font-size: 16px; }
    .sched-app.sched-pv #schedSendUpd { order: 2; }

    /* The signals, behind one chip. */
    .sched-app.sched-pv .sched-pv-sig { display: flex; align-items: center; gap: var(--sp-1_5); margin: 0 var(--sp-3) var(--sp-2); padding: var(--sp-1) var(--sp-2_5); border-radius: 999px;
      border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; align-self: flex-start; }
    .sched-app.sched-pv .sched-pv-sig .ti:first-child { font-size: 15px; color: var(--c-on-wash-warn, var(--c-warn)); }
    .sched-app.sched-pv .sched-pv-sig.is-quiet .ti:first-child { color: var(--c-muted); }
    .sched-app.sched-pv .sched-pv-sig .sched-pv-chev { font-size: 12px; color: var(--c-muted); transition: transform .15s; }
    .sched-app.sched-pv.sched-pv-sig-open .sched-pv-sig .sched-pv-chev { transform: rotate(180deg); }
    .sched-app.sched-pv:not(.sched-pv-sig-open) #schedAttention,
    .sched-app.sched-pv:not(.sched-pv-sig-open) .sched-pv-sigpanel { display: none; }
    .sched-app.sched-pv .sched-pv-sigpanel { padding: 0 var(--sp-3) var(--sp-2); }
    .sched-app.sched-pv .sched-pv-sigpanel .skpis { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); margin: 0; }

    /* The sheet. */
    .sched-pv-sheet { position: fixed; inset: 0; z-index: 65; }
    .sched-pv-sheet[hidden] { display: none; }
    .sched-pv-sheet .sched-pv-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink-deep) 45%, transparent); }
    .sched-pv-sheet .sched-pv-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; display: flex; flex-direction: column;
      background: var(--c-card); border-top: 1px solid var(--c-border); border-radius: 14px 14px 0 0; box-shadow: var(--float);
      padding-bottom: env(safe-area-inset-bottom); color: var(--c-text); }
    .sched-pv-sheet .sched-pv-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3_5) var(--sp-3) var(--sp-2) var(--sp-4); }
    .sched-pv-sheet .sched-pv-head .sinsp-grab { position: absolute; top: var(--sp-1_5); left: 50%; transform: translateX(-50%); }
    .sched-pv-sheet .sched-pv-head b { font-size: 15px; font-weight: 600; }
    .sched-pv-sheet .sched-pv-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--c-muted); }
    .sched-pv-sheet .sched-pv-body { overflow-y: auto; padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
    .sched-pv-sheet .sched-pv-sec[hidden] { display: none; }
    .sched-pv-sheet .sched-pv-h { margin-bottom: var(--sp-2); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
    /* Inside the sheet every control has room for its label again. */
    .sched-app .sched-pv-sheet .sviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1_5); width: 100%; margin: 0; padding: 0; background: none; border: 0; overflow: visible; }
    .sched-app .sched-pv-sheet .sviews button { width: auto; height: 56px; flex-direction: column; justify-content: center; gap: var(--sp-0_5); border: 1px solid var(--c-border); border-radius: 8px; }
    .sched-app .sched-pv-sheet .sviews button .sview-lbl { display: inline; font-size: 11px; }
    .sched-app .sched-pv-sheet .sched-td-tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin: 0; }
    .sched-app .sched-pv-sheet .sutil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1_5); width: 100%; margin: 0; overflow: visible; }
    .sched-app .sched-pv-sheet .sutil > * { width: 100%; }
    .sched-app .sched-pv-sheet .sutil .btn { width: 100%; height: 44px; justify-content: flex-start; gap: var(--sp-2); padding: 0 var(--sp-3); margin: 0; }
    .sched-app .sched-pv-sheet .sutil .sbtn-lbl { display: inline; }
    .sched-app .sched-pv-sheet .sutil .btn-icon[aria-label]::after { content: attr(aria-label); font-size: 12.5px; }
    .sched-app .sched-pv-sheet .sched-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1_5) var(--sp-3); margin: 0; padding: 0; border: 0; background: none; }
    body.sched-pv-open { overflow: hidden; }
  }
}