/* What the real product adds to prototype.css (the deploy copies prototype.css and vendor/fonts next to this file). */
/* Names may be Arabic: the font stacks end with an Arabic fallback (architecture.md section 2, addition 7). */
:root{
  --f-ui:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
  --f-num:"Barlow Semi Condensed","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
}
[dir=auto]{unicode-bidi:plaintext}
bdi[dir=auto]{unicode-bidi:isolate}
.topbar-company{min-width:0;font-size:13px;line-height:1.2;color:var(--muted)}
.topbar-company strong{font-weight:600;color:var(--ink)}
.top-actions>a.other-company{white-space:nowrap}
.top-actions>a.help-button{color:var(--muted);font-weight:500}
.help-button svg{flex:none}
.help-picture{display:block;max-width:100%;height:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius)}
.help-notes{margin:0;padding-left:20px;line-height:1.55}
.warning-list{margin:0 0 12px;padding-left:20px}
fieldset{border:1.5px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:0;min-width:0}
legend{font-size:12px;font-weight:600;padding:0 6px}
.is-sending button[type=submit],.is-sending button:not([type]){opacity:.55;cursor:progress}
.banner[data-flash]{transition:opacity .3s}
@media(max-width:700px){
  .topbar-company{display:none}
  .top-actions>a.other-company{max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .top-actions>a.help-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:0;border-radius:var(--radius);background:transparent;color:#fff}
  .top-actions>a.help-button span{display:none}
  .topbar .workspace-menu>summary{width:auto;max-width:110px;padding:0 8px;border-radius:var(--radius)}
  .topbar .workspace-menu>summary bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .portal-sign-in{margin:4vh auto;padding:16px}
}

.portal-sign-in form{display:grid;gap:12px}
.account-facts{margin:0 0 4px}
.account-facts dt{font-size:12px;color:var(--muted);margin-top:10px}
.account-facts dt:first-child{margin-top:0}
.account-facts dd{margin:2px 0 0;font-size:14px}
.table-wrap td .badge{white-space:nowrap}
.check-result{min-width:0}
.check-message{display:block;margin-top:4px;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
@media(max-width:700px){.table-wrap.as-cards td .check-result{flex:1;text-align:right}}

/* The manual journal form (accounting/views.ts): one line is a row on a desktop and a small card on a phone. */
.je-lines{display:grid;gap:8px;margin-top:12px}
.je-line{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end;padding-bottom:8px;border-bottom:1px solid var(--line)}
.je-line>*{min-width:0}
.je-amount input{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap td.total,.table-wrap tr.total td{font-weight:650}
@media(max-width:700px){
  .je-line{grid-template-columns:1fr 1fr}
  .je-account,.je-desc,.je-line>label:last-child{grid-column:1/-1}
}

/* Reception (prototype.js `receivePage`; prototype.css styles the blocks, the pills and the bar). The prototype draws the complaint tabs
   and chips as buttons with its script; here they are a radio per category and a checkbox per complaint, shown with :has(). */
.rv-results{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.rv-results a{display:flex;align-items:center;gap:8px}
.rv-tab,.rv-chip{position:relative;display:inline-flex}
.rv-tab>input,.rv-chip>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.rv-tab>span{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;color:var(--muted);font-weight:600;font-size:13.5px;box-shadow:inset 0 -2px 0 transparent}
.rv-tab>input:checked+span{color:var(--navy);box-shadow:inset 0 -3px 0 var(--navy)}
.rv-chip>span{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font-size:13.5px;line-height:1.25}
.rv-chip>input:checked+span{background:#e8eef7;border-color:var(--navy);color:var(--navy);font-weight:600}
.rv-chip>input:checked+span::before{content:"✓ "}
.rv-tab>input:focus-visible+span,.rv-chip>input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.rv-quick-box .rv-items{display:none}
.rv-quick-box:has([name=rv_cat][value="0"]:checked) .rv-items[data-cat="0"],.rv-quick-box:has([name=rv_cat][value="1"]:checked) .rv-items[data-cat="1"],.rv-quick-box:has([name=rv_cat][value="2"]:checked) .rv-items[data-cat="2"],.rv-quick-box:has([name=rv_cat][value="3"]:checked) .rv-items[data-cat="3"],.rv-quick-box:has([name=rv_cat][value="4"]:checked) .rv-items[data-cat="4"],.rv-quick-box:has([name=rv_cat][value="5"]:checked) .rv-items[data-cat="5"],.rv-quick-box:has([name=rv_cat][value="6"]:checked) .rv-items[data-cat="6"],.rv-quick-box:has([name=rv_cat][value="7"]:checked) .rv-items[data-cat="7"],.rv-quick-box:has([name=rv_cat][value="8"]:checked) .rv-items[data-cat="8"],.rv-quick-box:has([name=rv_cat][value="9"]:checked) .rv-items[data-cat="9"],.rv-quick-box:has([name=rv_cat][value="10"]:checked) .rv-items[data-cat="10"],.rv-quick-box:has([name=rv_cat][value="11"]:checked) .rv-items[data-cat="11"]{display:flex}
.rv-complaint{display:grid;gap:8px}
.sticker-fields:not(:has([name=sticker_mode][value=last]:checked,[name=sticker_mode][value=next]:checked)) .sticker-when{display:none}
@media(max-width:700px){.rv-chip>span,.rv-tab>span{min-height:44px}}

/* The job card's Documents panel: photos as thumbnails, other files as one row each. */
.job-documents .doc-thumbs{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.job-documents .doc-thumbs li{position:relative}
.job-documents .doc-thumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.job-documents .doc-thumbs form{position:absolute;top:2px;right:2px}
.job-documents .doc-thumbs form button{min-height:24px;padding:0 6px;background:rgba(255,255,255,.85);border-radius:6px}
:is(.job-documents .doc-list,.doc-list.attachments){list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
:is(.job-documents .doc-list,.doc-list.attachments) li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
:is(.job-documents .doc-list,.doc-list.attachments) li>a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* GaragePlug's files on the job card: the file's kind, and Use as… that opens below its row */
.job-documents .gp-kind{flex:none;min-width:36px;font-size:11px;font-weight:600;color:var(--muted)}
.job-documents .gp-use-form{min-width:0}
.job-documents .gp-use-form[open]{flex-basis:100%}
.job-documents .gp-use-form form{display:flex;gap:8px;align-items:center;margin-top:4px}
.job-documents .gp-use-form select{flex:1;min-width:0}
.job-documents form{display:inline;margin:0}

/* The bill's items: one row each on a desktop (kind, the job card's part or the account, description, qty, price); stacked on a phone. */
.bill-row{display:grid;grid-template-columns:150px minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,1.4fr) 70px 130px;gap:8px;align-items:end;padding:8px 0;border-bottom:1px solid var(--line)}
.bill-row label{font-size:12px}
@media(max-width:860px){.bill-row{grid-template-columns:1fr 1fr}}

/* The printed invoice and receipt (sales/views.ts `printPage`): the document alone on A4; Back and Print show on screen only. */
.print-page{max-width:210mm;margin:0 auto;padding:16px}
.print-document{background:#fff;padding:12mm;border:1px solid var(--line);border-radius:var(--radius)}
.document-company span,.document-footer p{white-space:pre-line}
@page{size:A4;margin:12mm}
@media print{:root{background:#fff}.print-page{max-width:none;padding:0}.print-document{padding:0;border:0}}

/* The Job cards band's Who pays labels are links here (buttons in the prototype, which styles `.band-labels .filters>button`). */
.band-labels .filters>a{min-height:44px;background:rgba(255,255,255,.1);border:2px solid transparent;color:#fff;font-weight:600}
.band-labels .filters>a .n{background:rgba(255,255,255,.2);color:inherit}
.band-labels .filters>a.is-insurance{background:var(--ins);color:var(--ins-ink)}
.band-labels .filters>a.active{border-color:var(--amber)}
.band-labels .filters>a.active:not(.is-insurance){background:rgba(255,255,255,.24)}
.band-labels .filters>a:hover{background:rgba(255,255,255,.18);border-color:transparent}
.band-labels .filters>a.is-insurance:hover{background:var(--ins);filter:brightness(1.08)}
.band-labels .filters>a.active:hover{border-color:var(--amber)}

/* The advisor's phone tab bar (web/layout.ts; prototype.css draws the bar): the centre + Receive opens the two Receive pages above it. */
@media(max-width:700px){
  .tab-bar>.tab-receive{position:relative}
  .tab-bar>.tab-receive>summary{display:grid;justify-items:center;align-content:start;gap:3px;min-height:44px;padding:6px 0;list-style:none;cursor:pointer;color:var(--muted);font:600 11.5px var(--f-ui)}
  .tab-bar>.tab-receive>summary::-webkit-details-marker{display:none}
  .tab-bar>.tab-receive>summary::before,.tab-bar>.tab-receive>summary::after{content:none;display:none}
  .tab-receive-list{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);display:grid;gap:6px;width:max-content;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(11,31,59,.18)}
  .tab-receive-list>a{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--amber);color:var(--amber-on);font-weight:700;text-decoration:none}
}
/* A form page's bar sits inside the page column here (prototype.css pulls it out over the prototype's own padding). */
.fp-bar{margin:0;border-radius:16px}

/* The signature pad (people/hr-views.ts): a white field to sign with a finger or the mouse; the page does not scroll while signing. */
.signature-pad { display: grid; gap: 6px; justify-items: start; }
.signature-pad canvas { width: 100%; max-width: 480px; aspect-ratio: 480 / 150; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); touch-action: none; }
.signature-thumb { display: block; height: 32px; margin-top: 4px; background: #fff; }
/* Phone and tablet (notes/design-system.md, Phone and tablet; node tools/layout-sweep-app.mjs finds what these fix). The job card's main
   column shrinks to the screen as the prototype's .job-blocks does; on a tablet the person's role is in their menu, as on a phone, so the bar
   keeps one row. On touch a short link in a cell (an account code, INV-1, Edit) gets a 44 px wide hit area, and Change and the ✕ buttons 44 px. */
.job-layout>.job-main{min-width:0}
.job-layout .job-blocks{grid-template-columns:minmax(0,1fr)}
@media(max-width:700px){.job-block>summary .fold-money{white-space:normal}}
/* A customer row's plate and open job keep their 44 px in the line, so neither covers the other or Spent and Owes. */
@container (max-width:859px){.lrows.customer-list .lr-meta .car-chip,.lrows.customer-list .lr-status a{margin-block:0}}
@media(max-width:1100px){.topbar .workspace-role{display:none}}
@media(max-width:700px),(pointer:coarse){
  body :is(main,#dialog) :is(p,small,span,li,td,th,dd,strong,em,b,h2,h3,.kv,.empty,.invoice-card,.fold-body,.panel-header)>a:not(.button):not(.badge):not(.tile):not(.stat):not(.list-row):not(.search-result):not(.lr-link):not(.lr-act a){padding-inline:11px;margin-inline:-11px}
  .rv-picked-head>a{display:inline-flex;align-items:center;min-height:44px}
  button.text{min-width:44px}
  .job-documents .doc-thumbs form{top:0;right:0;z-index:1}
  .job-documents .doc-thumbs form button{width:44px;height:44px;min-height:44px;padding:5px 9px 0 0;display:flex;align-items:flex-start;justify-content:flex-end;background:none}
  .job-documents .doc-thumbs form button::before{content:"";position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.85);z-index:-1}
}
/* A table wider than its page lets its first column (the account, the name) take a second line instead of scrolling sideways. */
.table-wrap td:first-child{white-space:normal;overflow-wrap:anywhere;min-width:160px}
/* Documents on file: the Add or Replace form takes the row's full width under the document's name. */
.doc-checklist li>form{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.doc-checklist li>form>label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-weight:600}
@media(max-width:700px),(pointer:coarse){
  /* A short link in a table cell (an account code) is at least 44 px wide to tap. */
  main td :is(a,strong>a):not(.button):not(.badge){display:inline-block;min-width:44px}
}