/* estimates page styles (ui/estimates.js). Page-specific rules only: shared tokens and components (buttons, tabs, bubbles, menus, dialogs, the pager, the empty
   state, the Actions cell) live in app.css, which the shell helper owns. Every selector here starts with an est- class (a rule that must reach a shared element
   is tied to one est- class on the page's own markup, for example .est-head), so nothing meets another page's rules. Colours come from the tokens; a token that does
   not exist yet (the draft banner's yellow) is written var(--name, fallback) so it follows the shell once the shell defines it.
   Values follow Wave's own (Claude outputs/2026-10-11 Wave screen survey.md, Estimates and Visual style): 12px cards, 8px fields, pill buttons, a pale blue summary
   strip, a grey bar for the business details, a vertical timeline of four step cards. Motion: hover only under (hover:hover) and (pointer:fine), press feedback
   .97, ease-out under 300ms, nothing animated from the keyboard; app.css removes all movement under prefers-reduced-motion. */

/* ---- List: filters, tabs, table ---- */
.est-list{display:flex;flex-direction:column;gap:16px;min-width:0;max-width:1040px}
.filters.est-filters{grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:600px){.filters.est-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.filters.est-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}}
.est-range-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
@media (max-width:520px){.est-range-f{grid-template-columns:minmax(0,1fr)}}
.est-date{position:relative;display:flex;align-items:stretch;min-width:0;min-height:var(--hit);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-inset);overflow:hidden;transition:border-color 120ms var(--ease)}
.est-date:focus-within{border-color:var(--accent);outline:2px solid var(--accent)}
.est-date-l{align-self:center;padding:0 4px 0 12px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.est-date input{flex:1 1 auto;min-width:0;min-height:38px;border:0;border-radius:0;background:transparent;padding:0 4px;outline:none;font-size:var(--type-s)}
.est-date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;opacity:0;cursor:pointer}
.est-date .icon{flex:none;box-sizing:content-box;align-self:stretch;width:20px;height:auto;padding:0 10px;background:var(--grey-bg);color:var(--text-secondary);pointer-events:none}
.est-search{position:relative;display:block;min-width:0}
.est-search input{padding-right:44px}
.est-search-btn{position:absolute;top:0;right:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.est-custbox .est-search-btn{pointer-events:none}
.est-custbox input::placeholder{color:var(--text-primary);opacity:1}   /* reads like the Status select beside it: All customers is a choice, not a hint */
.est-custbox input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;right:0;width:44px;height:100%;cursor:pointer}
.est-tabs{display:flex;justify-content:center;padding-top:16px;border-top:1px solid var(--divider)}
.est-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
/* The Date header sits on the same baseline as the other headers (no padding of its own); its hit area is the ::after, which reaches 8px past the word. */
.est-sort{position:relative;display:inline-flex;align-items:center;gap:4px;padding:0;font:inherit;font-weight:700;letter-spacing:inherit;text-transform:inherit;color:inherit}
.est-sort::after{content:"";position:absolute;inset:-8px -6px}
.est-sort .icon,.est-sort-sm .icon{transition:transform 150ms var(--ease-out)}
.est-sort.asc .icon,.est-sort-sm.asc .icon{transform:rotate(180deg)}
/* Below 960px the table head is hidden, and the Date button with it: this bar is the same sort. */
.est-sortbar{display:none}
@media (max-width:959px){.est-sortbar{display:flex;justify-content:flex-end}}
.est-sort-sm{display:inline-flex;align-items:center;gap:6px}
.est-show{display:inline-flex;align-items:center;gap:8px}
.est-range{margin-right:4px;font-variant-numeric:tabular-nums}
.table.est th.state,.table.est td.state{text-align:left}
@media (min-width:960px){
  .table.est th.state{width:14%;padding:0 18px 10px 0}
  .table.est td.state{padding:0 18px 0 0}
  .table.est th.num,.table.est td.num{padding-right:18px}
}
@media (max-width:959px){
  .table.est tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .table.est td.name{grid-column:1 / 3;grid-row:1;font-weight:700;color:var(--text-primary);overflow-wrap:anywhere}
  .table.est td.state{grid-column:3;grid-row:1;text-align:right}
  .table.est td:nth-child(2){grid-column:1;grid-row:2}
  .table.est td:nth-child(3){grid-column:2;grid-row:2}
  .table.est td.num{grid-column:3;grid-row:2}
  .table.est td.act{grid-column:1 / -1;grid-row:3;width:auto;text-align:left}
  .table.est td.act .act-cell{justify-content:flex-start}
}

/* ---- Form: the business bar, the white card, the customer box, the dates ---- */
.est-form{display:flex;flex-direction:column;gap:20px;max-width:960px;min-width:0}
.est-barwrap{border:1px solid var(--divider);border-radius:var(--radius);overflow:hidden;background:var(--bg-panel)}
.est-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:6px 16px;background:var(--bg-panel-2);color:var(--text-primary);font-weight:700;text-align:left}
.est-bar .icon{flex:none;transition:transform 150ms var(--ease-out)}
.est-bar[aria-expanded=true] .icon{transform:rotate(180deg)}
.est-biz{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
@media (min-width:720px){.est-biz{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.est-biz-info{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;overflow-wrap:anywhere}
.est-biz-doc{display:flex;flex-direction:column;gap:8px;min-width:0}
.est-title{min-height:56px;font-size:var(--type-xxl);font-weight:300;text-align:right}
.est-card{background:var(--bg-panel);border-radius:var(--radius);box-shadow:0 0 0 1px var(--divider),0 2px 8px rgba(24,33,39,.08);padding:24px}
.est-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){.est-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.est-cust{display:flex;flex-direction:column;gap:12px;min-width:0}
.est-add-cust{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-panel);color:var(--accent);font-weight:700;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.est-add-cust:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.est-add-cust:hover{background:var(--accent-soft)}}
.est-cust-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px;border:1px solid var(--divider);border-radius:var(--radius);line-height:1.45;overflow-wrap:anywhere}
.est-cust-name{font-weight:700}
.est-cust-card .rowlink{margin-top:6px}
.est-pick{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-panel)}
.est-pick-list{list-style:none;display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
.est-pick-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:44px;padding:6px 10px;border-radius:var(--radius-xs);text-align:left;transition:background 120ms var(--ease)}
.est-pick-row:active{transform:matrix(.99,0,0,.99,0,0)}
.est-pick-name{font-weight:700}
.est-pick-sub{font-size:var(--type-xs);color:var(--text-secondary)}
@media (hover:hover) and (pointer:fine){.est-pick-row:hover{background:var(--accent-soft)}}
.est-pick-create{display:flex;align-items:center;min-height:44px;padding:0 10px;border-top:1px solid var(--divider);color:var(--accent);font-weight:700;text-align:left}
.est-meta{display:flex;flex-direction:column;gap:12px;min-width:0}
.est-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:center}
.est-lbl{font-size:var(--type-s);font-weight:700;color:var(--text-secondary)}
@media (min-width:520px){.est-row{grid-template-columns:130px minmax(0,1fr);gap:16px}.est-lbl{text-align:right}}
.est-ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.est-help{display:block;font-size:var(--type-xs);color:var(--text-secondary)}
.est-job:empty{display:none}
.est-lines{display:flex;flex-direction:column;gap:16px;min-width:0}
.est-lines-bar{display:flex}
.est-tab-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);font-size:var(--type-s);font-weight:700;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.est-tab-btn:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.est-tab-btn:hover{background:var(--bar-chip)}}
.est-totals{align-items:flex-end;gap:12px}
.est-sub{display:grid;grid-template-columns:auto auto;gap:6px 28px;text-align:right}
.est-sub dt{font-weight:700;color:var(--text-secondary)}
.est-sub dd{font-variant-numeric:tabular-nums}
.est-total{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;width:100%;padding-top:12px;border-top:1px solid var(--divider)}
.est-total select{width:auto;min-width:0;max-width:100%}
.est-total-l{font-weight:700}
.est-total-v{min-width:120px;text-align:right;font-size:var(--type-l);font-weight:700;font-variant-numeric:tabular-nums}
.est-bottom{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
/* Request deposit (Wave): a row under the Total with a number box, the $ or % choice, the amount it comes to, and a close button. It is information on the estimate: nothing here adds to a total. */
.est-dep{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;width:100%}
.est-dep-l{font-weight:700;margin-right:auto}
.est-dep input{width:110px;min-width:0;text-align:right}
.est-dep select{width:auto;min-width:0}
.est-dep-amt{min-width:96px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.est-footer{max-width:960px}
.est-footer .collapse-body textarea{width:100%}

/* ---- The estimate page: summary strip, draft banner, the four step timeline, the printed estimate ---- */
.est-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding:20px 24px;border-radius:var(--radius);background:var(--bar-bg,#e8f1fa);max-width:960px}
@media (min-width:960px){.est-summary{grid-template-columns:repeat(4,minmax(0,1fr))}}
.est-fact{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.est-fact-k{font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.est-fact-v{font-size:var(--type-l);font-weight:700;font-variant-numeric:tabular-nums}
.est-cust-line{display:flex;align-items:center;gap:6px;min-width:0}
.est-cust-line .rowlink{overflow-wrap:anywhere}
.est-info{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--accent)}
.est-info::after{content:"";position:absolute;inset:-10px}
.est-info:active{transform:matrix(.97,0,0,.97,0,0)}
.est-pop{position:absolute;top:100%;left:0;z-index:4;min-width:220px;max-width:calc(100vw - 2 * var(--gutter));margin-top:6px;padding:12px;border:1px solid var(--divider);border-radius:var(--radius-sm);background:var(--bg-panel);box-shadow:0 8px 24px rgba(24,33,39,.16);line-height:1.45;overflow-wrap:anywhere}
.est-banner{display:flex;align-items:center;gap:12px;max-width:960px;padding:12px 16px;border:1px solid var(--note-line,#efd98a);border-radius:var(--radius);background:var(--note-bg,#fff4cf);color:var(--text-primary)}
.est-banner .icon{flex:none}
.est-steps{list-style:none;display:flex;flex-direction:column;max-width:960px}
.est-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding-bottom:16px}
.est-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--divider)}
.est-dot{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.est-step-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:18px 20px;border:1px solid var(--divider);border-radius:var(--radius);background:var(--bg-panel);overflow-wrap:anywhere}
.est-step-t{font-size:var(--type-l);font-weight:700}
.est-step-card .fact .k::after{content:":"}
.est-step.off .est-dot{background:var(--grey-bg);color:var(--text-tertiary)}
.est-step.off .est-step-card{background:var(--bg-panel-2)}
.est-step.off .est-step-t{color:var(--text-tertiary)}
.est-deposits{max-width:960px}
.est-doc{min-width:0;max-width:960px}
.est-doc .paper{margin:0 auto}
.est-head .menu-wrap>.btn{display:inline-flex;align-items:center;gap:6px}
@media (max-width:520px){.est-step{grid-template-columns:32px minmax(0,1fr);gap:12px}.est-dot{width:32px;height:32px}.est-step:not(:last-child)::before{left:15px;top:36px}.est-step-card{padding:14px}}

/* ---- Inside the dialogs: the send dialog, the preview ---- */
.est-p{line-height:1.45}
.est-strong{font-weight:700}
.est-pane{display:flex;flex-direction:column;gap:12px}
.est-mini{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--divider);border-radius:var(--radius)}
.est-preview{overflow:auto;max-height:70dvh}
.est-preview .paper{box-shadow:0 0 0 1px var(--divider)}
.dlg-foot a.est-launch{min-width:0}

/* ---- Print: only the estimate (Print builds it into .est-print and sets body.est-printing for the time the print dialog is open) ---- */
.est-print{display:none}
@media print{
  body.est-printing > *:not(.est-print){display:none!important}
  body.est-printing .est-print{display:block}
}