*{box-sizing:border-box}body{margin:0;background:#f3f6fb;color:#172b46;font:15px/1.5 "Segoe UI",sans-serif}aside{position:fixed;inset:0 auto 0 0;width:250px;background:#132940;color:#fff;padding:32px 22px;display:flex;flex-direction:column;gap:12px}a{color:inherit;text-decoration:none}.brand{font-size:27px;font-weight:750}aside>p{font-size:10px;letter-spacing:1.6px;color:#aabdd2;margin-top:36px}aside>a:not(.brand){padding:12px;border-radius:8px;font-size:14px}.selected{background:#245182}.account{margin-top:auto;font-size:12px;color:#bfcfe0;border-top:1px solid #38506b;padding-top:20px}.account strong{color:white}main{max-width:1600px;margin-left:250px;padding:38px}header,.project-head,.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-size:32px;letter-spacing:-1px;margin:3px 0}h2{font-size:20px;margin:0 0 10px}h3{font-size:15px}header p{margin:0;color:#6a7d93}.eyebrow{font-size:10px!important;letter-spacing:1.4px;font-weight:750;color:#4372a8!important}.badge{display:inline-block;background:#e8f1ff;color:#225daa;border-radius:20px;padding:6px 12px;font-size:12px;white-space:nowrap}.notice{background:#eaf2fe;border:1px solid #d4e4f9;padding:12px 16px;border-radius:9px;font-size:13px;margin:25px 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.stats>div,.panel{background:white;border:1px solid #e0e7f0;border-radius:12px;padding:24px}.stats span{color:#6a7d93;font-size:13px}.stats strong{display:block;font-size:28px;margin-top:4px}.workspace{display:grid;grid-template-columns:minmax(230px,0.8fr) minmax(0,1.5fr);gap:20px}.muted{color:#738298;font-size:13px}.request{width:100%;text-align:left;border:1px solid #e1e8f1;background:white;border-radius:9px;padding:16px;margin:6px 0;cursor:pointer;color:inherit}.request[aria-pressed=true]{border-color:#2873d4;background:#f0f6ff;box-shadow:inset 3px 0 #2873d4}.request strong,.request span{display:block}.request span{font-size:12px;color:#738298;margin-top:5px}.part{border:1px solid #e0e7f0;border-radius:8px;padding:16px;margin:12px 0}.part p{margin:5px 0;color:#657b92;font-size:13px}.part-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}button{font:inherit;border:1px solid #cad8e8;background:white;color:#245d9f;padding:9px 14px;border-radius:7px;cursor:pointer}.primary{background:#226ed2;border-color:#226ed2;color:white}button:hover{filter:brightness(.95)}button:focus-visible,a:focus-visible{outline:3px solid #e9ae29;outline-offset:3px}.offer{margin-top:20px}.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}label{display:block;font-size:13px;font-weight:600;margin:14px 0}input,textarea{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #cbd7e6;border-radius:7px;font:inherit;color:inherit}textarea{resize:vertical}.form-bottom span{font-size:12px;color:#738298}#offer-preview{padding:16px;background:#e8f6ef;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}dialog{border:1px solid #cbd7e6;border-radius:12px;padding:25px;width:min(460px,90vw);color:inherit}dialog::backdrop{background:#13294066}blockquote{background:#f0f5fa;margin:20px 0;padding:16px;border-radius:8px}@media(max-width:1050px){aside{width:210px}main{margin-left:210px;padding:24px}.workspace{grid-template-columns:1fr}}@media(max-width:650px){aside{position:static;width:auto;padding:16px;flex-direction:row;flex-wrap:wrap;align-items:center}.brand{font-size:23px}aside>p,.account{display:none}main{margin:0;padding:18px}header{align-items:flex-start}h1{font-size:26px}.stats{gap:8px}.stats>div{padding:12px}.panel{padding:18px}.fields{grid-template-columns:1fr;gap:0}.form-bottom{align-items:stretch;flex-direction:column}.badge{white-space:normal}.project-head{align-items:flex-start}} /* Shared customer and supplier components. */ button, a { transition: background-color .15s, border-color .15s; } dialog { max-height: 85vh; overflow: auto; } dialog h2 { margin-top: 0; } summary { cursor: pointer; color: #245d9f; padding: 8px 0; } [role="alert"] { color: #a02020; } #feedback:empty, [role="alert"]:empty { display: none; } .customer main > h2 { margin-top: 28px; } .customer main > p { color: #62748c; } .customer .supplier-grid { display: grid; gap: 20px; margin-top: 24px; } .supplier-card { display: flex; flex-direction: column; align-items: flex-start; } .supplier-card h3 { font-size: 21px; margin: 0 0 8px; } .supplier-card p { flex: 1; color: #62748c; } .supplier-mark { background: #eaf2fe; color: #226ed2; border-radius: 12px; padding: 16px; font-weight: 750; margin-bottom: 18px; } #projects, #items { padding: 0; list-style: none; display: grid; gap: 16px; margin-top: 24px; } #projects > li, #items > li { background: white; border: 1px solid #e0e7f0; border-radius: 12px; padding: 24px; overflow-wrap: anywhere; } #projects > li { justify-content: space-between; } #projects a { color: #245d9f; font-size: 18px; font-weight: 600; } #projects a:hover { text-decoration: underline; } #items { counter-reset: items; } #items > li { counter-increment: items; } #items h3 { margin-top: 0; font-size: 19px; } #items h3::before { content: counter(items) ". "; color: #738298; } #items p { margin: 6px 0; color: #62748c; } #items button { margin-top: 12px; } #items details { margin-top: 10px; border-top: 1px solid #e0e7f0; } #new-project, #add-item, .customer button[type="submit"] { background: #226ed2; border-color: #226ed2; color: white; } #chat-messages { max-height: 240px; overflow-wrap: anywhere; padding-left: 24px; } #chat-messages li { margin-bottom: 12px; white-space: pre-wrap; } .customer main > .notice { color: #245d9f; } @media(max-width:650px) { .customer .supplier-grid { grid-template-columns: 1fr; } #projects > li { flex-wrap: wrap; } #items > li { padding: 18px; } } aside .brand { display:block; background:white; border-radius:8px; padding:10px; } aside .brand-logo { display:block; width:100%; height:auto; } @media(max-width:650px) { aside .brand { width:190px; max-width:100%; } } /* Supplier cards form a vertical list with horizontal rows. */ .customer .supplier-grid { grid-template-columns: 1fr; } .customer .supplier-card { display: grid; align-items: center; } .customer .supplier-card .supplier-mark { margin: 0; } .customer .supplier-card h3 { grid-column: 2; grid-row: 1; margin: 0; } .customer .supplier-card p { grid-column: 2; grid-row: 1 / 3; margin: 0; } .customer .supplier-card button { } @media(max-width:750px) { .customer .supplier-card { grid-template-columns: minmax(0,1fr); gap: 12px; } .customer .supplier-card .supplier-mark, .customer .supplier-card h3, .customer .supplier-card p, .customer .supplier-card button { grid-column: 1; grid-row: auto; } .customer .supplier-card .supplier-mark { justify-self: start; } .customer .supplier-card button { justify-self: start; } } .response-heading { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:24px; align-items:start; } #offer-title { font-size:26px; line-height:1.3; } #response-spec { font-size:18px; line-height:1.6; font-weight:600; color:#29445f; } .item-photo { border:1px solid #d7e2ef; border-radius:10px; background:#f3f6fb; min-height:150px; overflow:hidden; } #photo-empty { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#738298; font-size:13px; } #photo-open { width:100%; padding:8px; border:0; background:transparent; font-size:12px; } #photo-thumb { display:block; width:100%; height:130px; object-fit:contain; margin-bottom:6px; } #photo-gallery { width:min(900px,94vw); } #gallery-image { display:block; width:100%; max-height:65vh; object-fit:contain; } .gallery-controls { display:flex; flex-wrap:wrap; gap:10px; } button:disabled { opacity:.5; cursor:default; } [hidden] { display:none!important; } @media(max-width:500px) { .response-heading { grid-template-columns:minmax(0,1fr) 115px; gap:12px; } #offer-title { font-size:23px; } #response-spec { font-size:17px; } } .item-conversation { margin:24px 0; padding-top:16px; border-top:1px solid #d7e2ef; } #supplier-messages { max-height:220px; } #supplier-messages li { margin-bottom:10px; white-space:pre-wrap; } #supplier-documents { } .item-media { min-width:0; } #supplier-documents-open { width:100%; margin-top:10px; background:#eaf2fe; border-color:#d4e4f9; } #supplier-documents { margin:auto; } #supplier-documents-list { list-style:none; padding:0; } #supplier-documents-list li { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #d7e2ef; } #supplier-documents-list span { overflow-wrap:anywhere; min-width:0; } #supplier-documents-list a { color:#226ed2; text-decoration:underline; } .item-dialog-navigation { position:sticky; top:-25px; z-index:2; background:white; padding:12px 0; margin:-12px 0 18px; border-bottom:1px solid #e0e7f0; } #response-spec { white-space:pre-line; } #projects > li { display:grid; align-items:center; } #projects .project-open { justify-self:start; padding:9px 14px; border:1px solid #cad8e8; border-radius:7px; font-size:15px; font-weight:400; } #projects .project-name { font-size:18px; overflow-wrap:anywhere; } #projects > li > button { justify-self:end; margin-left:0!important; } @media(max-width:500px) { #projects > li { grid-template-columns:80px minmax(0,1fr) 80px; gap:8px; padding:14px 10px; } #projects .project-open, #projects > li > button { padding:8px; font-size:13px; } #projects .project-name { font-size:16px; } } aside { overflow-y:auto; } .account-company { padding:8px 0 12px; border-bottom:1px solid #38506b; } .account-company strong, .account-company span { display:block; } .account-company span { color:#bfcfe0; font-size:12px; margin-top:4px; } aside > p { margin-top:12px; } .account-menu { display:flex; flex-direction:column; gap:3px; border-top:1px solid #38506b; padding-top:12px; } .account-menu button { background:transparent; border:0; color:#e2ebf7; text-align:left; font-size:13px; padding:9px 12px; } .account-menu button:hover { background:#245182; } aside .account small { display:block; margin-top:6px; } aside .account p { margin:0 0 12px; } .account-rating > span { font-size:32px; color:#738298; letter-spacing:3px; } .account-dialog { width:min(520px,90vw); } @media(max-width:650px) { .account-company, .account-menu { width:100%; } .account-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } aside .account { display:block; width:100%; margin-top:8px; } } .supplier-search-panel { margin:24px 0; } .supplier-search-row { display:flex; gap:12px; align-items:center; } .supplier-search-row > span { font-size:32px; color:#62748c; } .supplier-search-row input { margin:0; min-width:0; } .supplier-result { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 0; border-top:1px solid #e0e7f0; } @media(max-width:650px) { .supplier-result { flex-direction:column; align-items:flex-start; } .supplier-search-row { flex-wrap:wrap; } .supplier-search-row input { flex:1; } } .customer .supplier-card { } .customer .supplier-card .supplier-mark { justify-self:start; text-align:left; } .customer .supplier-card button { grid-row:1; justify-self:end; } @media(max-width:450px) { .customer .supplier-card { column-gap:12px; } .customer .supplier-card .supplier-mark { padding:10px; overflow-wrap:anywhere; } .customer .supplier-card button { padding:8px; font-size:13px; } } .customer .supplier-card { } .customer .supplier-card button { grid-column:3; } .supplier-project-stats { grid-column:2; grid-row:1; display:grid; } .supplier-project-stats strong { display:block; color:#245d9f; } .supplier-project-stats span { display:block; color:#62748c; font-size:12px; } @media(max-width:1000px) { .customer .supplier-card { grid-template-columns:minmax(0,1fr) auto; } .customer .supplier-card button { grid-column:2; } .supplier-project-stats { grid-column:1 / -1; grid-row:2; padding-top:14px; border-top:1px solid #e0e7f0; } } .supplier-project-stats { grid-template-columns:1fr; gap:7px; justify-self:center; text-align:left; } .supplier-project-stats > div { display:flex; align-items:center; justify-content:space-between; gap:18px; } .supplier-project-stats span { order:0; } .supplier-project-stats strong { order:1; font-size:17px; line-height:1.3; } /* Keep supplier identity, statuses and action in three equal columns. */ .customer .supplier-card { column-gap:18px; } .customer .supplier-card .supplier-mark { white-space:normal; overflow-wrap:anywhere; } .customer .supplier-card .supplier-project-stats { min-width:0; max-width:100%; padding-top:0; border-top:0; } .customer .supplier-card .supplier-project-stats > div { min-width:0; } .customer .supplier-card .supplier-project-stats span { min-width:0; } .customer .supplier-card > button { grid-column:3; grid-row:1; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; } @media(max-width:500px) { .customer .supplier-card { column-gap:8px; padding:14px 10px; } .customer .supplier-card .supplier-mark { padding:8px; font-size:13px; } .customer .supplier-card .supplier-project-stats span { font-size:11px; } .customer .supplier-card > button { padding:8px 5px; font-size:12px; } } #projects > li { gap:14px; } #projects .project-name { grid-column:1; text-align:left; } #projects .project-open { } #projects .project-send { background:#226ed2; color:white; border-color:#226ed2; } #projects .project-delete { } @media(max-width:650px) { #projects > li { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #projects .project-name { grid-column:1 / -1; } #projects .project-open { grid-column:1; } #projects .project-send { grid-column:2; } #projects .project-delete { grid-column:3; } #projects .project-open, #projects > li > button { width:100%; text-align:center; white-space:normal; padding:8px 5px; } } #items > li { position:relative; padding-right:290px; } .item-pricing { position:absolute; top:24px; right:24px; width:230px; padding:16px; border:1px solid #d7e2ef; background:#f5f8fd; border-radius:10px; } .item-pricing > span { display:block; font-size:13px; color:#62748c; } .item-pricing strong { display:block; font-size:23px; color:#245d9f; } .item-pricing small { display:block; color:#738298; font-size:11px; } .item-pricing .optional-price-toggle { display:flex; align-items:center; gap:8px; font-size:12px; } .item-pricing input[type="checkbox"] { width:auto; margin:0; } .item-pricing input[type="text"] { width:100%; font-size:13px; padding:8px; } .item-pricing label { font-size:12px; } @media(max-width:700px) { #items > li { padding-right:18px; } .item-pricing { position:static; width:100%; margin:16px 0; } } #items > li:has(.optional-price-toggle input:checked) { min-height:390px; } @media(max-width:700px) { #items > li:has(.optional-price-toggle input:checked) { min-height:0; } } /* Item details and prices above a separate horizontal action row. */ #items > li { display:grid; min-height:0; } #items > li > h3, #items > li > p { grid-column:1; } #items > li > .item-pricing { position:static; width:100%; display:grid; padding:0; border:0; background:transparent; } .price-box { min-width:0; min-height:155px; padding:14px; border:1px solid #d7e2ef; background:#f5f8fd; border-radius:10px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; } .price-box > span { font-size:13px; color:#62748c; } .price-box label { margin:0; } .price-box input[type="text"] { margin:0; } #items .item-actions { grid-column:1 / -1; flex-wrap:nowrap; overflow-x:auto; border-top:1px solid #e0e7f0; } #items .item-actions button { margin:0!important; flex:0 0 auto; } @media(max-width:800px) { #items > li { grid-template-columns:minmax(0,1fr); padding:18px; } #items > li > .item-pricing { grid-column:1; grid-row:auto; margin:12px 0; } #items .item-actions { grid-column:1; } } /* Stable two-block layout: details left, prices right, actions below. */ #items > li { grid-template-rows:auto auto; align-items:start; } #items > li > .item-details { grid-column:1; grid-row:1; min-width:0; } #items .item-details h3 { } #items .item-details p { } #items > li > .item-pricing { align-self:start; } #items > li > .item-actions { grid-column:1 / -1; grid-row:2; } @media(max-width:600px) { #items > li { } #items > li > .item-pricing { margin:0; gap:6px; } #items .price-box { } #items .price-box input[type="text"] { padding:6px 3px; font-size:11px; } #items .price-box > span { font-size:11px; } #items .price-box small { font-size:10px; } } /* Compact item card and price boxes. */ #items > li { padding:18px; column-gap:16px; } #items > li > .item-pricing { gap:8px; } #items .price-box { min-height:100px; padding:9px; gap:5px; } #items .price-box > span { font-size:12px; } #items .price-box strong { font-size:20px; line-height:1.2; } #items .price-box input[type="text"] { padding:5px; margin:0; font-size:12px; } #items .price-box small { font-size:10px; } #items .item-details { overflow-x:auto; } #items .item-details h3 { font-size:17px; } #items .item-details p { margin:3px 0; font-size:13px; } #items .item-actions { margin-top:12px; padding-top:10px; } @media(max-width:600px) { #items > li { grid-template-columns:minmax(0,1fr) minmax(0,180px); column-gap:10px; padding:12px; } #items .price-box { min-height:95px; padding:6px; } } #items > li { } #items > li > .item-pricing { } #items .price-box input[type="number"] { width:100%; margin:0; padding:5px; font-size:14px; } @media(max-width:750px) { #items > li { grid-template-columns:minmax(0,1fr); } #items > li > .item-pricing { grid-column:1; grid-row:2; margin-top:12px; } #items > li > .item-actions { grid-row:3; } } .project-totals-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,390px); gap:16px; align-items:center; padding:0 19px; } .project-totals-row > button { justify-self:start; } .project-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #project-totals { } .project-totals > div { min-width:0; padding:7px 9px; background:#eaf2fe; border:1px solid #d4e4f9; border-radius:8px; } .project-totals span, .project-totals small { display:block; font-size:10px; color:#62748c; } .project-totals strong { display:block; font-size:15px; color:#245d9f; overflow-wrap:anywhere; } @media(max-width:750px) { .project-totals-row { grid-template-columns:minmax(0,1fr); } .project-totals { width:100%; } } #projects > li { grid-template-columns:minmax(0,1fr) auto auto auto auto; } #projects .project-total { grid-column:2; color:#245d9f; font-weight:600; } #projects .project-open { grid-column:3; } #projects .project-send { grid-column:4; } #projects .project-delete { grid-column:5; } @media(max-width:800px) { #projects > li { grid-template-columns:repeat(3,minmax(0,1fr)); } #projects .project-name { grid-column:1 / 3; grid-row:1; } #projects .project-total { grid-column:3; grid-row:1; text-align:right; overflow-wrap:anywhere; } #projects .project-open { grid-column:1; grid-row:2; } #projects .project-send { grid-column:2; grid-row:2; } #projects .project-delete { grid-column:3; grid-row:2; } } .current-role-banner { position:fixed; top:0; left:0; right:0; height:46px; display:flex; align-items:center; justify-content:center; padding:8px 16px; z-index:20; font-size:17px; font-weight:750; letter-spacing:.6px; color:white; box-shadow:0 2px 8px #13294020; } .role-customer { background:#1d5eb4; } .role-supplier { background:#176956; } body.has-role-banner { padding-top:46px; } .has-role-banner > aside { top:46px; } @media(max-width:650px) { .current-role-banner { font-size:14px; } .has-role-banner > aside { top:auto; } } #parts .part { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,390px); column-gap:16px; padding:18px; } .supplier-part-details { min-width:0; overflow-x:auto; } .supplier-part-details p { white-space:normal; overflow-wrap:anywhere; margin:6px 0; font-size:16px; font-weight:600; line-height:1.5; color:#18334f; } .supplier-pricing { position:static; width:100%; display:grid; gap:8px; background:transparent; border:0; padding:0; margin:0; } .supplier-pricing .price-box { min-height:100px; } .supplier-pricing .price-box > span { font-size:12px; } .supplier-pricing .price-box input { width:100%; padding:5px; margin:0; font-size:12px; } .supplier-pricing .price-box strong { font-size:20px; line-height:1.2; } .supplier-pricing .price-box small { font-size:10px; } #parts .part-actions { grid-column:1 / -1; border-top:1px solid #e0e7f0; padding-top:10px; } @media(max-width:750px) { #parts .part { grid-template-columns:minmax(0,1fr); } .supplier-pricing { margin-top:12px; } } /* Supplier purchase column aligned with its total. */ body[data-account-role="supplier"] #parts .part, body[data-account-role="supplier"] .project-totals-row { grid-template-columns:minmax(0,1fr) minmax(0,520px); } .supplier-pricing { } #supplier-totals { } @media(max-width:950px) { body[data-account-role="supplier"] #parts .part, body[data-account-role="supplier"] .project-totals-row { grid-template-columns:minmax(0,1fr); } } @media(max-width:500px) { .supplier-pricing { } } .supplier-profit.project-totals { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:340px; margin:16px auto 0; } .supplier-profit-note { text-align:center; font-size:11px; margin:8px 0 18px; } #project-totals input[type="text"] { width:100%; min-width:0; margin:0 0 4px; padding:4px; font:inherit; font-size:12px; } .price-box > span { overflow-wrap:anywhere; } .project-order-actions { display:flex; flex-direction:column; align-items:center; justify-self:center; gap:10px; width:min(100%,230px); } .project-order-actions > button { width:100%; margin:0; } .supplier-pricing .price-box { padding:0; gap:0; justify-content:stretch; } .supplier-pricing .unit-price-section { padding:9px; display:flex; flex-direction:column; gap:5px; flex:1; } .supplier-pricing .unit-price-section > span { font-size:12px; color:#62748c; overflow-wrap:anywhere; } .supplier-pricing .line-price-section { border-top:1px solid #d7e2ef; padding:9px; background:#eaf2fe; border-radius:0 0 10px 10px; } .supplier-pricing .line-price-section strong { font-size:16px; overflow-wrap:anywhere; } .customer-summary { display:grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap:8px; align-items:stretch; } .customer-summary #project-totals > div { padding:6px; } .customer-summary #project-totals strong { font-size:14px; } .quote-download { min-width:0; border:1px solid #d4e4f9; border-radius:8px; padding:8px; background:#eaf2fe; display:flex; flex-direction:column; gap:6px; overflow-wrap:anywhere; } .quote-download > span { font-size:12px; font-weight:600; } .quote-download small { font-size:10px; color:#62748c; } .quote-download a { font-size:13px; font-weight:600; } .quote-upload { padding:14px; margin:14px 0; border:1px solid #d4e4f9; border-radius:8px; } .quote-upload input { max-width:100%; } .customer .supplier-card a.supplier-mark { text-decoration:none; cursor:pointer; } .customer .supplier-card a.supplier-mark:hover { background:#e3efff; } .customer .supplier-card a.supplier-mark:focus-visible { outline:3px solid #246fce; outline-offset:4px; } body[data-account-role="supplier"] #parts .part { grid-template-columns:minmax(0,1fr) minmax(160px,260px); row-gap:16px; } #parts .supplier-part-details { grid-column:1; grid-row:1; } #parts .supplier-card-media { grid-column:2; grid-row:1; display:flex; gap:10px; align-items:center; justify-content:flex-end; } .supplier-card-media .card-photo { width:120px; min-height:90px; padding:8px; } .card-photo img { width:100%; height:80px; object-fit:contain; } #parts .supplier-pricing { grid-column:1 / -1; grid-row:2; } .supplier-card-delivery { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:16px; } .supplier-card-delivery label { max-width:180px; font-size:13px; } .supplier-card-delivery input { width:100%; } @media(max-width:550px){body[data-account-role="supplier"] #parts .part { grid-template-columns:minmax(0,1fr); } #parts .supplier-card-media { grid-column:1; grid-row:2; justify-content:flex-start; } #parts .supplier-pricing { }} /* Ownership colours follow the sketch; keep all four price columns in place. */ body[data-account-role="supplier"] #parts .part { background:#f1f8f4; border:2px solid #aacdb9; } #parts .supplier-request-header { grid-column:1 / -1; grid-row:1; display:grid; background:#edf4ff; border:2px solid #9bbce7; } #parts .supplier-request-header .supplier-part-details { grid-column:1; grid-row:1; } #parts .supplier-request-header .supplier-card-media { } #parts .supplier-pricing .customer-price { position:relative; background:#edf4ff; border:2px solid #9bbce7; } #parts .supplier-pricing .customer-price::before { content:""; position:absolute; background:#edf4ff; border-left:2px solid #9bbce7; border-right:2px solid #9bbce7; pointer-events:none; } #parts .supplier-pricing .customer-price .line-price-section { background:#dceafa; border-color:#9bbce7; } #parts .supplier-pricing .supplier-price { background:#f5fbf7; border-color:#aacdb9; } #parts .supplier-pricing .supplier-price .line-price-section { background:#e0f0e6; border-color:#aacdb9; } #parts .supplier-card-delivery, #parts .part-actions { border-color:#aacdb9; } @media(max-width:550px){ #parts .supplier-request-header { } #parts .supplier-request-header .supplier-card-media { } #parts .supplier-pricing { grid-row:2; } #parts .supplier-pricing .customer-price::before { display:none; } } .supplier-project-row { align-items:center; margin-bottom:12px; } .supplier-project-row > .request { margin:0; } .project-profit-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .project-profit-summary > div { } .project-profit-summary span { display:block; font-size:12px; color:#246344; } .project-profit-summary strong { display:block; font-size:18px; overflow-wrap:anywhere; color:#18334f; } @media(max-width:600px){ .supplier-project-row { grid-template-columns:minmax(0,1fr); } } .supplier-project-row { } .supplier-project-row > .request { grid-template-columns:minmax(0,1fr) 190px; column-gap:14px; align-items:center; } .supplier-project-row > .request > strong { grid-column:1; grid-row:1; } .supplier-project-row > .request > span { grid-column:1; grid-row:2; } .supplier-project-row .project-profit-summary { gap:5px; } .project-profit-summary > div { padding:6px; background:#eaf2fe; border:1px solid #d4e4f9; border-radius:6px; } .request .project-profit-summary span { margin-top:0; font-size:10px; line-height:1.25; } .request .project-profit-summary strong { font-size:14px; margin-top:4px; } @media(max-width:450px){ .supplier-project-row > .request { grid-template-columns:minmax(0,1fr); } .supplier-project-row .project-profit-summary { grid-column:1; grid-row:3; max-width:190px; justify-self:end; margin-top:8px; } } /* Flush blue header and a seamless join to the recommended-price column. */ body[data-account-role="supplier"] #parts .part { border-top-color:#9bbce7; } #parts .supplier-request-header { margin:-20px -20px 0; border-radius:8px 8px 0 0; } #parts .supplier-pricing .customer-price { border-top:0; border-radius:0 0 10px 10px; } #parts .supplier-pricing .customer-price::before { top:-18px; height:18px; left:-2px; right:-2px; border-top:0; border-bottom:0; border-radius:0; z-index:1; } @media(max-width:550px){ #parts .supplier-request-header { padding:20px; } #parts .supplier-pricing .customer-price { border-top:2px solid #9bbce7; border-radius:10px; } } .customer .supplier-card .supplier-envelope { justify-self:center; position:relative; text-align:center; } .supplier-envelope > span { font-size:34px; color:#245d9f; } .supplier-envelope small { display:block; font-size:11px; color:#62748c; } .supplier-envelope .unread-badge { position:absolute; top:4px; right:12px; min-width:22px; padding:2px 5px; background:#d73545; color:white; border-radius:20px; font-size:12px; } .supplier-envelope .unread-badge[hidden] { display:none; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #projects > .project-draft-row { display:block; } .inline-project-form { width:100%; } .inline-project-form[hidden] { display:none; } .inline-project-form form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .inline-project-form input { flex:1; min-width:150px; margin:0; } .inline-project-form #project-save-error { flex-basis:100%; margin:0; } .inline-project-form #project-save-error:empty { display:none; } .inline-item-form { margin-top:16px; } .inline-item-form form { display:grid; gap:10px 16px; } .inline-item-form label,.inline-item-form input,.inline-item-form textarea { margin:0; } .inline-item-form #item-save-error,.inline-item-form #item-files-note,.inline-item-form #item-files-preview { grid-column:1 / -1; } .inline-item-form #item-save-error:empty,.inline-item-form #item-files-preview:empty { display:none; } @media(max-width:500px){ .inline-item-form form { grid-template-columns:minmax(0,1fr); } } /* Customer item editor uses the same left-details / right-prices card layout. */ .inline-item-form { border:1px solid #d7e2ef; border-radius:12px; } .inline-item-form form { grid-template-columns:minmax(0,1fr) 210px; align-items:start; } .inline-item-details { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; min-width:0; } .inline-item-details label { font-weight:600; } .inline-item-details input:not([type="file"]),.inline-item-details textarea { border:0; border-bottom:1px solid #cbd7e6; border-radius:0; background:#f8fbff; padding:8px; } .inline-item-details #item-files-note,.inline-item-details #item-files-preview { grid-column:1 / -1; } .inline-item-pricing { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } .inline-item-pricing .price-box { min-height:0; padding:10px; gap:5px; } .inline-item-pricing input { width:100%; padding:6px; } .inline-item-pricing small { font-size:10px; color:#62748c; } .inline-item-actions { grid-column:1 / -1; display:flex; gap:8px; border-top:1px solid #e0e7f0; padding-top:12px; } #items > li { grid-template-columns:minmax(0,1fr) 210px; } #items > li > .item-pricing { grid-column:2; grid-row:1; grid-template-columns:minmax(0,1fr); margin:0; } @media(max-width:600px){ .inline-item-form form,#items > li { grid-template-columns:minmax(0,1fr); } #items > li > .item-pricing { grid-column:1; grid-row:2; } .inline-item-details { grid-template-columns:90px minmax(0,1fr); } } .inline-item-details, .inline-item-pricing { min-width:0; } .inline-item-details input, .inline-item-details textarea { min-width:0; width:100%; } #items .item-details p { white-space:normal; overflow-wrap:anywhere; } #items .editable-item-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; align-items:center; } #items .editable-item-row label { margin:0; } #items .editable-item-row input,#items .editable-item-row textarea { width:100%; min-width:0; margin:0; padding:7px; } .inline-item-form[hidden] { display:none; } #projects > .customer-project-card { position:relative; } #projects .project-card-link { grid-column:1; grid-row:1; text-decoration:none; font-weight:600; } #projects .project-card-link::after { position:absolute; inset:0; border-radius:12px; } #projects .project-card-link:focus-visible::after { outline:3px solid #e9ae29; outline-offset:2px; } #projects .project-card-actions { position:relative; z-index:1; } #projects .project-card-actions button { margin:0!important; } #projects .customer-project-card .project-total { grid-column:3; grid-row:1; padding:8px; background:#eaf2fe; border:1px solid #d4e4f9; border-radius:8px; text-align:left; } #projects .project-total small { display:block; font-size:10px; font-weight:400; } #projects .project-total strong { display:block; font-size:15px; } #projects > .customer-project-card:hover { border-color:#a8c3e4; } @media(max-width:700px){ #projects > .customer-project-card { } #projects .project-card-actions { grid-column:1 / -1; justify-content:center; } #projects .customer-project-card .project-total { grid-column:2; } } #supplier-totals .supplier-amount-caption { width:100%; min-width:0; padding:4px; margin:0 0 4px; font-size:12px; } .supplier-pricing { grid-template-columns:repeat(3,minmax(0,1fr)); } #supplier-totals input[type="number"] { width:100%; min-width:0; padding:5px; margin:4px 0; } @media(max-width:500px){ .supplier-pricing { grid-template-columns:minmax(0,1fr); } } #supplier-totals { grid-template-columns:repeat(2,minmax(0,1fr)); } #project-totals { grid-template-columns:minmax(0,1fr); } .supplier-project-row { position:relative; grid-template-columns:minmax(0,1fr) 310px; gap:14px; padding:14px; border:1px solid #e1e8f1; border-radius:9px; background:white; } .supplier-project-row > .request { display:block; } .supplier-project-row > .request::after { position:absolute; inset:0; border-radius:9px; } .supplier-project-row .project-profit-summary { grid-column:2; grid-row:1; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; max-width:none; } .project-commission input { position:relative; z-index:1; width:100%; min-width:0; padding:4px; margin:0 0 4px; font-size:11px; } .project-commission small { font-size:10px; } #projects > .customer-project-card { } .customer-project-summary { grid-column:3; grid-row:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #projects .customer-project-summary .project-total { grid-column:auto; grid-row:auto; } @media(max-width:700px){ .supplier-project-row { grid-template-columns:minmax(0,1fr); } .supplier-project-row .project-profit-summary { grid-column:1; grid-row:2; } #projects > .customer-project-card { grid-template-columns:minmax(0,1fr); } .customer-project-summary { grid-column:1; grid-row:2; } #projects .project-card-actions { grid-row:3; } } /* Project cards wrap whole sections instead of squeezing project names. */ #projects > .customer-project-card { flex-wrap:wrap; } #projects .project-card-link { word-break:normal; } #projects .project-card-actions { flex:0 1 auto; } .customer-project-summary { flex:0 1 270px; min-width:0; margin-left:auto; } .supplier-project-row { display:flex; flex-wrap:wrap; } .supplier-project-row > .request { overflow-wrap:break-word; } .supplier-project-row .project-profit-summary { flex:0 1 310px; min-width:0; margin-left:auto; } .supplier-project-row .project-profit-summary span { font-size:10px; line-height:1.25; } .supplier-project-row .project-profit-summary strong { font-size:14px; margin-top:4px; } @media(max-width:700px) { #projects .project-card-link { flex-basis:100%; } #projects .customer-project-summary { flex-basis:100%; order:2; } #projects .project-card-actions { flex-basis:100%; order:3; } .supplier-project-row .project-profit-summary { flex-basis:100%; } } .all-projects-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:270px; max-width:100%; margin:20px 24px 0 auto; } .all-projects-summary > div { min-width:0; padding:8px; background:#eaf2fe; border:1px solid #d4e4f9; border-radius:8px; } .all-projects-summary span,.all-projects-summary small { display:block; font-size:11px; } .all-projects-summary strong { display:block; color:#245d9f; font-size:15px; overflow-wrap:anywhere; } .all-projects-summary input { margin:0 0 5px; padding:4px; font-size:11px; } @media(max-width:700px){ .all-projects-summary { width:auto; margin-left:24px; } } /* Keep the project totals beside the add action without an empty extra row. */ #project-list-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; } #project-list-toolbar .all-projects-summary { margin:0 24px 0 auto; } #project-list-toolbar ~ #projects { margin-top:10px; } @media(max-width:700px) { #project-list-toolbar .all-projects-summary { margin:0 0 0 auto; } } #supplier-project-summary { } #supplier-project-summary span,#supplier-project-summary small { display:block; font-size:10px; line-height:1.25; } #supplier-project-summary strong { font-size:14px; margin-top:4px; } @media(max-width:700px){ #supplier-project-summary { margin:0 0 10px auto; } } .supplier-project-row .project-stages { flex:0 0 100%; display:flex; flex-wrap:wrap; gap:6px; padding-bottom:2px; } .project-stages span { font-size:11px; color:#69798b; padding:3px 8px; border-radius:12px; background:#f1f4f8; } .project-stages .current-stage { color:#124c91; background:#d7eaff; font-weight:700; box-shadow:inset 0 0 0 1px #87b5eb; } .supplier-project-row.project-unread { background:#fff8df; border:2px solid #e4b540; } .supplier-project-row .close-project { position:relative; z-index:1; margin-left:auto; font-size:12px; padding:6px 10px; } /* Open a supplier project through its named button, not the whole card. */ .supplier-project-row > .request { flex:0 1 auto; width:auto; padding:10px 16px; border:1px solid #a9c7eb; border-radius:8px; background:#eaf2fe; color:#245d9f; } .supplier-project-row > .request::after { content:none; } .supplier-project-row > .request > strong { white-space:normal; font-size:16px; } .supplier-project-row > .request { max-width:min(320px,100%); min-width:0; } .supplier-project-row > .request > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.4; max-height:2.8em; } :is(#quote-form,.quote-form) { grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:10px 0; background:#f7faff; } :is(#quote-form,.quote-form) > label { grid-column:1 / -1; margin:0; font-size:12px; } #quote-file { min-width:0; margin:0; padding:7px; font-size:11px; background:white; } #quote-file::file-selector-button { border:1px solid #b5cee9; border-radius:6px; padding:8px 10px; margin-right:8px; background:#eaf2fe; color:#245d9f; font:inherit; cursor:pointer; } #quote-publish { margin:0; padding:8px 10px; font-size:12px; background:#226ed2; color:white; border-color:#226ed2; } #quote-feedback { grid-column:1 / -1; margin:0; font-size:11px; } #quote-feedback:empty { display:none; } @media(max-width:420px){ :is(#quote-form,.quote-form) { grid-template-columns:minmax(0,1fr); } } #parts .part-actions { } #parts .part-actions > button { flex-shrink:0; } #parts .chat-preview { flex:1; min-width:0; padding:7px 10px; border:1px solid #d9e4e0; border-radius:7px; background:#fff; } .chat-preview small { display:block; color:#738298; font-size:10px; } .chat-preview span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; font-size:13px; } #item-response { padding:20px; border:0; border-radius:16px; box-shadow:0 16px 60px #13294040; max-height:90vh; } #item-response .item-dialog-navigation { display:flex; justify-content:flex-end; background:white; padding:0 0 8px; } #item-response #offer-title { font-size:19px; padding-bottom:12px; margin:0; border-bottom:1px solid #e1e8f1; } #item-response .item-conversation { margin:0; padding:0; border:0; } #supplier-messages { display:flex; flex-direction:column; gap:12px; list-style:none; padding:14px; margin:12px 0; background:#f4f7fb; border-radius:10px; height:clamp(180px,38vh,360px); overflow-y:auto; } #supplier-messages li { max-width:85%; padding:10px 14px; border-radius:12px; background:white; border:1px solid #e1e8f1; overflow-wrap:anywhere; } #supplier-messages li.message-own { align-self:flex-end; background:#e1efff; border-color:#c5dcf7; } #supplier-messages small { display:block; font-size:10px; color:#5b718d; margin-bottom:4px; } #supplier-messages li div { font-size:14px; white-space:pre-wrap; } #supplier-chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; } #supplier-chat-form label { grid-column:1 / -1; margin:0; font-size:11px; } #supplier-message { margin:0; min-height:64px; } #supplier-chat-form button { background:#226ed2; color:white; border-color:#226ed2; min-height:44px; } /* Light gray project cards; unread supplier requests keep their highlight. */ #projects > .customer-project-card:nth-child(odd of .customer-project-card), :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row:nth-child(odd) { background:#f0f1f3; border-color:#d9dde2; } #projects > .customer-project-card:nth-child(even of .customer-project-card), :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row:nth-child(even) { background:#f0f1f3; border-color:#d9dde2; } :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row.project-unread { background:#fff8df; border-color:#e4b540; } #projects .project-card-link { flex:0 1 320px; width:320px; max-width:100%; min-width:0; padding:10px 16px; border:1px solid #a9c7eb; border-radius:8px; background:#eaf2fe; color:#245d9f; font-size:16px; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; max-height:calc(2.8em + 22px); } #projects .project-card-link::after { content:none; } #projects .project-card-link:hover { text-decoration:none; background:#dceafa; } .message-envelope { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:40px; padding:6px 12px; border:1px solid #b5cee9; border-radius:8px; background:white; color:#245d9f; text-decoration:none; } .message-envelope > span { font-size:25px; line-height:1; } .message-envelope .unread-badge { position:absolute; right:-5px; top:-7px; padding:2px 5px; min-width:20px; border-radius:12px; background:#d73545; color:white; font-size:11px; text-align:center; } .message-envelope .unread-badge[hidden] { display:none; } #requests .company-request { position:relative; padding-right:80px; } #requests .company-message-count { position:absolute; right:16px; top:50%; transform:translateY(-50%); } .supplier-project-row .project-message-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin-left:auto; } .supplier-project-row .project-message-actions .message-envelope { position:relative; z-index:1; } /* Corner label joined to the customer item card border. */ #items > li { --item-inset:18px; } #items .item-details h3 { margin:calc(-1 * var(--item-inset)) 0 14px calc(-1 * var(--item-inset)); padding:10px 20px 10px var(--item-inset); border-right:1px solid #b7c9dd; border-bottom:1px solid #b7c9dd; border-radius:11px 0 10px 0; background:#edf2f7; color:#245d9f; overflow-wrap:anywhere; } @media(max-width:500px){ #items > li { --item-inset:12px; } } /* Let the corner label reach the card border instead of being clipped. */ #items .item-details { overflow:visible; min-width:0; } #items .item-details h3 { margin-top:calc(-1 * var(--item-inset)); margin-left:calc(-1 * var(--item-inset)); border-top-right-radius:0; } @media(max-width:600px){ #items > li { --item-inset:12px; } } #items .item-details h3 { display:block; width:max-content; max-width:calc(100% + var(--item-inset)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Stable supplier project layout, independent of project name length. */ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row { display:grid; padding:14px; align-items:start; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request { grid-column:1; grid-row:1; border-right:1px solid #a9c7eb; border-bottom:1px solid #a9c7eb; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request > strong { max-height:none; } :is(#supplier-projects,#supplier-detail-card) .project-stages { justify-content:flex-end; min-width:0; padding:0; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary { margin:0; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions { margin:0; } @media(max-width:550px){ :is(#supplier-projects,#supplier-detail-card) .project-stages { gap:4px; } :is(#supplier-projects,#supplier-detail-card) .project-stages span { font-size:10px; padding:3px 5px; } } /* Reserve a single uninterrupted row for all four project stages. */ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row { } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request { } :is(#supplier-projects,#supplier-detail-card) .project-stages { flex-wrap:nowrap; white-space:nowrap; gap:4px; } :is(#supplier-projects,#supplier-detail-card) .project-stages span { flex:0 0 auto; font-size:10px; padding:3px 6px; } @media(max-width:600px){ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row { grid-template-columns:minmax(0,1fr); } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request { grid-column:1; grid-row:1; } :is(#supplier-projects,#supplier-detail-card) .project-stages { grid-column:1; grid-row:2; justify-content:flex-end; overflow-x:auto; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary { grid-row:3; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions { grid-row:4; } } .project-commission .commission-toggle { display:flex; align-items:center; gap:5px; margin:0 0 5px; font-size:10px; cursor:pointer; } .project-commission .commission-toggle input { width:14px; height:14px; margin:0; padding:0; flex-shrink:0; } .project-commission [hidden] { display:none!important; } .customer-project-summary > :only-child,.all-projects-summary > :only-child { grid-column:1 / -1; } #supplier-project-summary .commission-summary-toggle { position:relative; padding-right:24px; } #supplier-project-summary .commission-summary-toggle input[type="checkbox"] { position:absolute; top:6px; right:6px; width:14px; height:14px; margin:0; padding:0; cursor:pointer; } :is(#supplier-projects,#supplier-detail-card) .project-profit-summary:not(:has(.project-commission)) { } .customer-page-heading { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); margin-bottom:12px; } .customer-page-heading h1 { grid-column:1; overflow-wrap:anywhere; } .customer-page-heading h2 { grid-column:2; font-size:32px; letter-spacing:-1px; margin:3px 0; text-align:center; } @media(max-width:650px){ .customer-page-heading { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .customer-page-heading h2 { font-size:26px; } } .customer-page-heading .page-heading-left { grid-column:1; display:flex; align-items:center; gap:12px; } .page-heading-left > button { flex-shrink:0; } .page-heading-left > h1 { min-width:0; } /* One-line page header: back, project/company name, section on the right. */ .customer-page-heading { display:flex; flex-wrap:nowrap; align-items:center; gap:20px; } .customer-page-heading .page-heading-left { flex:1; min-width:0; } .customer-page-heading .page-heading-left h1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .customer-page-heading > h2 { flex:0 1 auto; max-width:50%; margin-left:auto; } @media(max-width:650px){ .customer-page-heading { gap:10px; } .customer-page-heading .page-heading-left { gap:8px; } .customer-page-heading h1,.customer-page-heading > h2 { font-size:clamp(16px,3.6vw,26px); } } /* A single centered heading on the supplier company list. */ main:has(#customer-list:not([hidden])) > .customer-page-heading .page-heading-left { display:none; } main:has(#customer-list:not([hidden])) > .customer-page-heading > h2 { flex:1; max-width:100%; text-align:center; margin:3px 0; } /* Center the supplier project overview while keeping Back at the left. */ main:has(#customer-projects:not([hidden]), #customer-detail:not([hidden])) > .customer-page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } main:has(#customer-projects:not([hidden]), #customer-detail:not([hidden])) > .customer-page-heading .page-heading-left { grid-column:1; } main:has(#customer-projects:not([hidden]), #customer-detail:not([hidden])) > .customer-page-heading .page-heading-left h1 { display:none; } main:has(#customer-projects:not([hidden]), #customer-detail:not([hidden])) > .customer-page-heading > h2 { grid-column:2; max-width:none; margin:3px 0; text-align:center; } #projects-customer { text-align:center; margin-bottom:14px; } #supplier-project-summary { } .customer .supplier-project-stats { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; } .customer .supplier-project-stats > div { display:flex; gap:5px; align-items:center; padding:4px 8px; border-radius:12px; background:#f1f4f8; color:#69798b; font-size:11px; } .customer .supplier-project-stats > div.has-projects { background:#d7eaff; color:#124c91; box-shadow:inset 0 0 0 1px #87b5eb; } /* Keep the four supplier progress counters on one horizontal line. */ .customer .supplier-card { } .customer .supplier-card .supplier-project-stats { display:flex; flex-direction:row; flex-wrap:nowrap; justify-self:stretch; gap:5px; overflow-x:auto; } .customer .supplier-card .supplier-project-stats > div { flex:0 0 auto; white-space:nowrap; gap:5px; } .customer .supplier-card .supplier-project-stats span { white-space:nowrap; overflow-wrap:normal; font-size:11px; } .customer .supplier-card .supplier-project-stats strong { font-size:13px; } /* Progress along the top; company and messages retain their own lower row. */ .customer .supplier-card { grid-template-columns:minmax(0,1fr) 110px; } .customer .supplier-card .supplier-project-stats { grid-column:1 / -1; grid-row:1; justify-content:center; } .customer .supplier-card .supplier-mark { grid-column:1; grid-row:2; max-width:100%; min-width:0; } .customer .supplier-card .supplier-envelope { grid-column:2; grid-row:2; } @media(max-width:450px){ .customer .supplier-card .supplier-project-stats { justify-content:flex-start; } } /* Compact supplier cards, keeping the progress row and controls readable. */ .customer .supplier-card { padding:12px 18px; row-gap:5px; min-height:0; } .customer .supplier-card .supplier-project-stats { padding:0; } .customer .supplier-card .supplier-project-stats > div { padding:2px 6px; } .customer .supplier-card .supplier-envelope { padding:3px 8px; } .customer .supplier-card .supplier-envelope > span { font-size:27px; } .customer .supplier-card .supplier-mark { padding-top:5px; padding-bottom:5px; } .company-settings-header { display:flex; align-items:center; gap:18px; margin-bottom:22px; } .company-settings form { max-width:960px; } .company-settings .panel { margin-bottom:18px; background:#f0f1f3; } .company-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; } .company-fields label { margin:0; } .company-fields input { background:white; min-width:0; } main[hidden] { display:none!important; } @media(max-width:600px){ .company-fields { grid-template-columns:minmax(0,1fr); } } .company-form-actions { display:flex; gap:10px; } .company-fields input[readonly] { background:#f7f8fa; border-color:#e0e4e9; color:#40516a; } .company-form-actions [hidden] { display:none!important; } #projects .customer-project-stages { flex:0 0 100%; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; order:-1; } .customer .supplier-card .supplier-mark,.customer .supplier-card .supplier-envelope { grid-row:1; } /* Two fixed header halves in customer project cards. */ #projects > .customer-project-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 20px; align-items:center; } #projects .customer-project-card .project-card-link { grid-column:1; grid-row:1; width:100%; max-width:260px; min-width:0; padding:9px 12px; font-size:16px; white-space:nowrap; display:block; overflow:hidden; text-overflow:ellipsis; } #projects .customer-project-stages { grid-column:2; grid-row:1; justify-content:flex-end; min-width:0; } #projects .customer-project-stages span { flex:0 0 auto; font-size:10px; padding:3px 5px; } #projects .project-card-actions { grid-column:1; grid-row:2; justify-content:flex-start; } #projects .customer-project-summary { grid-column:2; grid-row:2; width:100%; justify-self:end; margin:0; } .security-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:960px; } .security-grid .panel { margin:0; } .security-grid h2 { font-size:18px; } .security-grid p { color:#5d6e84; font-size:14px; } .security-grid .security-preview { border-top:1px solid #d7dfe9; padding-top:12px; } @media(max-width:700px){ .security-grid { grid-template-columns:minmax(0,1fr); } } .notification-row { display:grid; grid-template-columns:minmax(0,1fr) repeat(3,auto); align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid #dce2e9; } .notification-row:last-child { border-bottom:0; } .notification-row h2 { font-size:16px; margin:0; } .notification-row label { display:flex; align-items:center; gap:7px; margin:0; font-size:12px; } .notification-row input { width:17px; height:17px; margin:0; accent-color:#226ed2; } @media(max-width:650px){ .notification-row { grid-template-columns:repeat(3,auto); gap:12px; } .notification-row h2 { grid-column:1 / -1; } } .company-user-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid #d9dfe7; } .company-user-row:last-child { border-bottom:0; } .company-user-row > div { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; } .company-user-row small { color:#69798b; } .company-settings select { display:block; width:100%; margin-top:7px; padding:10px; border:1px solid #cbd7e6; border-radius:7px; background:white; font:inherit; } .company-settings form[hidden] { display:none; } .rating-review { padding:14px 0; border-bottom:1px solid #d9dfe7; } .rating-review strong { color:#bd851c; font-size:21px; } .rating-review small { display:block; color:#69798b; } .rating-review p { white-space:pre-wrap; overflow-wrap:anywhere; } .company-settings .security-grid { margin-bottom:18px; } .project-commission .commission-settled { display:flex; justify-content:flex-end; align-items:center; gap:5px; margin:7px 0 0; font-size:10px; } .project-commission .commission-settled input { position:static; width:14px; height:14px; margin:0; padding:0; } :is(#supplier-projects,#supplier-detail-card) .project-commission { padding:5px 6px; } :is(#supplier-projects,#supplier-detail-card) .project-commission > input { padding:3px 4px; margin-bottom:3px; line-height:1.2; } :is(#supplier-projects,#supplier-detail-card) .project-commission .commission-settled { margin-top:3px; line-height:1.2; } #supplier-project-summary .commission-summary-toggle input[type="text"] { width:100%; min-width:0; padding:3px; margin:0 0 4px; font-size:11px; } .customer-commission-control { position:relative; padding-right:26px!important; min-height:32px; } .customer-commission-control > input[type="checkbox"] { position:absolute; top:7px; right:7px; width:14px; height:14px; padding:0; margin:0; cursor:pointer; } .customer-commission-control [hidden] { display:none!important; } /* Customer chat shares supplier presentation. */ #chat { padding:20px; border:0; border-radius:16px; box-shadow:0 16px 60px #13294040; max-height:90vh; } #chat .item-dialog-navigation { display:flex; justify-content:flex-end; background:white; padding:0 0 8px; } #chat #chat-title { font-size:19px; padding-bottom:12px; margin:0; border-bottom:1px solid #e1e8f1; } #chat .item-conversation { margin:0; padding:0; border:0; } #chat-messages { display:flex; flex-direction:column; gap:12px; list-style:none; padding:14px; margin:12px 0; background:#f4f7fb; border-radius:10px; height:clamp(180px,38vh,360px); overflow-y:auto; } #chat-messages li { max-width:85%; padding:10px 14px; border-radius:12px; background:white; border:1px solid #e1e8f1; overflow-wrap:anywhere; } #chat-messages li.message-own { align-self:flex-end; background:#e1efff; border-color:#c5dcf7; } #chat-messages small { display:block; font-size:10px; color:#5b718d; margin-bottom:4px; } #chat-messages li div { font-size:14px; white-space:pre-wrap; } #chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; } #chat-form label { grid-column:1 / -1; margin:0; font-size:11px; } #chat-input { margin:0; min-height:64px; } #chat-form button { background:#226ed2; color:white; border-color:#226ed2; min-height:44px; } #chat { width:min(720px,90vw); } .project-stages.detail-progress { flex-wrap:nowrap; justify-content:center; margin:12px 0; width:100%; overflow-x:auto; } .project-stages.detail-progress > span { flex:0 0 auto; white-space:nowrap; } /* Center the customer project section heading, keeping Back at the left. */ .customer-page-heading:has(#project-heading) { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; } .customer-page-heading:has(#project-heading) .page-heading-left { grid-column:1; min-width:0; } .customer-page-heading:has(#project-heading) > h2 { grid-column:2; text-align:center; margin:0; white-space:nowrap; } .customer-page-heading #project-heading { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media(max-width:650px){ .customer-page-heading:has(#project-heading) { grid-template-columns:auto minmax(0,1fr); gap:10px; } .customer-page-heading:has(#project-heading) > h2 { overflow:hidden; text-overflow:ellipsis; } .customer-page-heading:has(#project-heading) #project-heading { display:none; } } .customer-page-heading:has(#project-heading) > #project-heading { display:block; grid-column:1 / -1; grid-row:2; margin:0; font-size:24px; line-height:1.3; } .customer-page-heading:has(#project-heading) > h2 { max-width:none; width:auto; min-width:max-content; overflow:visible; text-overflow:clip; justify-self:center; } /* Compact customer project summary: price left, PDF right. */ body.customer .project-totals-row:has(.customer-summary) { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; } body.customer .project-totals-row:has(.customer-summary) .project-order-actions { align-self:flex-start; } body.customer .project-totals-row:has(.customer-summary) .detail-progress { margin:4px 0; } body.customer .customer-summary { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } body.customer .customer-summary #project-totals > div { padding:10px 14px; } body.customer .customer-summary #project-totals span { font-size:12px; } body.customer .customer-summary #project-totals strong { font-size:20px; } body.customer .customer-summary .quote-download { padding:10px 14px; gap:3px; justify-content:center; } body.customer .customer-summary .quote-download small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .customer-project-identity { grid-column:1 / -1; grid-row:2; padding:16px 20px; background:white; border:1px solid #e0e7f0; border-radius:12px; min-width:0; } .customer-page-heading .customer-project-identity > h2 { font-size:20px; letter-spacing:normal; text-align:left; margin:0 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .customer-page-heading .customer-project-identity > #project-heading { display:block; font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .customer-detail-heading { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } .customer-detail-heading > h2 { max-width:none; min-width:max-content; overflow:visible; text-align:center; margin:0; } .customer-project-panel > .customer-project-identity { padding:0; border:0; border-radius:0; background:transparent; margin-bottom:16px; } .customer-project-panel .customer-project-identity > h2 { font-size:20px; margin:0 0 10px; } .customer-project-panel .customer-project-identity > #project-heading { display:block; font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #feedback:empty, #sync-feedback:empty { display:none; } .project-card-actions button:disabled { background:#edf0f4; color:#9aa4b1; border-color:#e1e5ea; cursor:default; opacity:1; } #projects .project-card-actions { flex-wrap:nowrap; } #projects .project-card-actions button { padding:6px 8px; font-size:12px; flex:0 1 auto; min-width:0; } #projects .project-card-actions .message-envelope { min-width:34px; padding:4px 6px; flex-shrink:0; } #projects .project-card-actions { display:grid; gap:8px 5px; align-items:center; } #projects .project-card-actions button { max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap; } #projects .project-card-actions .message-envelope { grid-column:1; grid-row:2; justify-self:start; } #projects .project-card-actions > .project-send { grid-column:1; grid-row:1; } #projects .project-card-actions > .close-project { grid-column:2; grid-row:1; } #projects .project-card-actions > .project-delete { } :is(#supplier-projects,#supplier-detail-card) .project-message-actions { justify-self:stretch; flex-direction:row; align-items:center; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > [data-unread-project] { margin-right:auto; } /* Match supplier project cards to customer cards. */ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; gap:14px 20px; } :is(#supplier-projects,#supplier-detail-card) .project-stages { grid-column:2; grid-row:1; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary { grid-column:2; grid-row:2; width:100%; justify-self:end; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions { grid-column:1; grid-row:2; display:grid; grid-template-columns:max-content max-content; justify-content:start; gap:8px; width:100%; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > .close-project { grid-column:1; grid-row:1; margin:0; white-space:nowrap; font-size:12px; padding:6px 8px; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > button:disabled:not(.close-project) { grid-column:2; grid-row:1; font-size:12px; padding:6px 8px; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > [data-unread-project] { grid-column:1; grid-row:2; justify-self:start; margin:0; } @media(max-width:700px){ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row { grid-template-columns:minmax(0,1fr); } :is(#supplier-projects,#supplier-detail-card) .project-stages { grid-column:1; grid-row:2; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions { grid-column:1; grid-row:3; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary { grid-column:1; grid-row:4; } } .history-tabs { display:flex; gap:4px; margin:8px 0; } .history-tabs button { padding:4px 10px; font-size:12px; border-radius:6px; } .history-tabs button[aria-pressed=true] { background:#dce9f9; border-color:#9dbce3; color:#184b88; } .history-tabs[data-history-tabs="supplier-projects"] { justify-content:center; } .customer-project-list-panel #project-list-toolbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:12px 8px; max-width:640px; margin:0 auto; } .customer-project-list-panel #new-project { grid-column:1; grid-row:3; align-self:stretch; min-width:0; min-height:72px; padding:8px; border-radius:8px; } .customer-project-list-panel .project-list-company { grid-column:1 / -1; text-align:center; font-size:26px; letter-spacing:normal; margin:0; overflow-wrap:anywhere; } .customer-project-list-panel .history-tabs { grid-column:1 / -1; grid-row:1; justify-content:center; margin:0; } .customer-project-list-panel #project-list-toolbar .all-projects-summary { display:contents; } .customer-project-list-panel .all-projects-summary > div { grid-row:3; min-height:72px; } .customer-project-list-panel .all-projects-summary > div:first-child { grid-column:2; } .customer-project-list-panel .all-projects-summary > div:nth-child(2) { grid-column:3; } body.customer main:has(> .customer-project-list-panel) > .customer-page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } body.customer main:has(> .customer-project-list-panel) > .customer-page-heading > h2 { grid-column:2; max-width:none; margin:3px 0; text-align:center; } .excel-import-dialog { width:min(1050px,95vw); max-height:90vh; overflow:auto; } .excel-import-dialog select { width:100%; padding:8px; border:1px solid #cbd7e6; border-radius:7px; background:white; color:inherit; } .excel-mapping { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .excel-preview { overflow:auto; max-height:45vh; } .excel-preview table { width:100%; border-collapse:collapse; } .excel-preview th,.excel-preview td { padding:6px; text-align:left; border-bottom:1px solid #e0e7f0; } .excel-preview input { min-width:100px; margin:0; padding:7px; } .excel-preview input[type=checkbox] { min-width:18px; width:18px; } .excel-import-dialog [role=alert] { color:#a12626; } .customer-project-panel .project-order-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; align-items:stretch; gap:12px; } .customer-project-panel .project-order-actions > button { min-width:0; width:100%; margin:0; } .customer-project-panel .project-order-actions #finish-order { grid-column:1; grid-row:1; } .customer-project-panel .project-order-actions #import-items { grid-column:2; grid-row:1; } .excel-import-dialog { padding:24px; background:#f7f9fc; border:1px solid #d7e1ec; border-radius:16px; box-shadow:0 20px 70px #13294040; } .excel-import-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } .excel-import-heading h2 { margin:0; font-size:22px; } .excel-import-close { padding:0; width:34px; height:34px; flex-shrink:0; font-size:24px; line-height:1; } .excel-file-picker { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid #d7e1ec; border-radius:12px; background:white; } .excel-file-button { padding:12px 22px; font-weight:600; flex-shrink:0; } .excel-file-name { min-width:0; overflow-wrap:anywhere; font-size:14px; color:#476078; } .excel-import-dialog [role=alert]:empty { display:none; } .excel-mapping { background:white; border-radius:10px; padding:0 14px; margin-bottom:16px; } .excel-mapping:empty { display:none; } .excel-preview table { background:white; border:1px solid #e0e7f0; } .excel-preview th { background:#eaf0f7; font-size:12px; color:#476078; } .excel-import-actions { justify-content:flex-end; border-top:1px solid #dce5ef; padding-top:16px; margin-top:20px; } .excel-import-actions button { min-width:120px; font-weight:600; } .excel-import-dialog button:disabled { opacity:.45; cursor:not-allowed; } body.customer #finish-order:disabled, body.customer #projects .project-card-actions > .project-send:disabled { background:#edf0f4; color:#8994a3; border-color:#dfe4eb; opacity:1; cursor:default; box-shadow:none; filter:none; } #add-item { width:100%; margin:16px 0 8px; padding:9px 14px; } #add-item[hidden],#item-dialog[hidden] { display:none; } body.customer .price-box .supplier-unit-caption, body.customer .price-box .recommended-unit-caption, body.customer .price-box label[for="new-recommended"] { display:block; white-space:nowrap; overflow-wrap:normal; font-size:13px; line-height:1.4; color:#17212b; font-weight:600; } body.customer #items .customer-item-delivery { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:4px 0 10px auto; width:fit-content; max-width:100%; padding:7px 10px; border:1px solid #b9d8c8; border-radius:8px; background:#eaf5ef; font-size:12px; font-weight:600; color:#285440; } body.customer #items .customer-item-delivery > strong { font-size:12px; } body.customer #items .customer-item-header { grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:stretch; margin:calc(-1 * var(--item-inset)) calc(-1 * var(--item-inset)) 14px; } body.customer #items .customer-item-header h3 { margin:0; padding:10px 16px; font-size:17px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#edf2f7; color:#245d9f; border-bottom:1px solid #b7c9dd; border-right:1px solid #b7c9dd; border-radius:11px 0 0 0; } body.customer #items .customer-item-header .customer-item-delivery { margin:0; width:100%; max-width:none; padding:10px 14px; border-radius:0 11px 0 0; font-size:14px; gap:4px 18px; } body.customer #items .customer-item-header .customer-item-delivery > strong { font-size:17px; } #projects .project-card-actions > .project-copy { justify-self:start; font-size:12px; padding:6px 8px; } body.customer #items > li > .item-details { grid-row:2; } body.customer #items > li > .item-pricing { } body.customer #items > li > .item-actions { } @media(max-width:600px){ body.customer #items > li > .item-pricing { } body.customer #items > li > .item-actions { } } @media(max-width:600px){ .excel-import-dialog { padding:16px; } .excel-file-picker { flex-wrap:wrap; } .excel-mapping { grid-template-columns:1fr; } } #project-search { display:block; box-sizing:border-box; width:100%; height:36px; min-height:0; margin:12px 0; padding:7px 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#17212b; font-size:14px; } body.customer main:has(> .customer-project-list-panel) > .customer-page-heading > .history-tabs { grid-column:3; grid-row:1; justify-self:end; margin:0; white-space:nowrap; } .customer-project-list-panel .project-list-company { grid-row:1; } .customer-project-list-panel #new-project,.customer-project-list-panel .all-projects-summary > div { grid-row:2; } /* Place project actions directly beneath their corresponding stages. */ #projects .customer-project-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 4px; overflow:visible; align-items:start; } #projects .customer-project-stages > span { grid-row:1; text-align:center; min-width:0; } #projects .customer-project-stages > button { grid-row:2; min-width:0; width:100%; padding:6px 3px; font-size:11px; white-space:normal; overflow:visible; text-overflow:clip; margin:0; } #projects .customer-project-stages > .project-send { grid-column:1; } #projects .customer-project-stages > .close-project { grid-column:4; } #projects .project-card-actions > .project-copy { grid-column:2; grid-row:1; } #projects .project-card-actions > .project-delete { grid-column:3; grid-row:1; } #projects .project-card-actions > .message-envelope { grid-column:1; grid-row:1; } #customer-detail .project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } #customer-detail .project-head > div:first-child { min-width:0; } #customer-detail .project-head #supplier-totals { margin:0 0 0 auto; flex:0 1 auto; } @media(max-width:650px){ #customer-detail .project-head { flex-wrap:wrap; } #customer-detail .project-head #supplier-totals { margin-left:0; width:100%; } } .customer-project-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:12px; } .customer-project-top .customer-project-identity { min-width:0; flex:1; } body.customer .customer-project-top .customer-summary { width: min(52%, 480px); margin:0; flex-shrink:0; } body.customer .customer-project-panel > .project-totals-row { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; } @media(max-width:650px){ .customer-project-top { flex-direction:column; } body.customer .customer-project-top .customer-summary { width:100%; } } #quote-file[hidden],:is(#quote-saved,.quote-saved)[hidden] { display:none; } :is(#quote-saved,.quote-saved) { font-weight:600; overflow-wrap:anywhere; } #quote-selected:empty { display:none; } :is(#quote-form,.quote-form) { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; max-width:none; padding:8px 10px; } :is(#quote-form,.quote-form) > label { flex:0 0 auto; white-space:nowrap; } :is(#quote-form,.quote-form) > button { flex:0 0 auto; margin:0; padding:7px 10px; font-size:12px; white-space:nowrap; } :is(#quote-form,.quote-form) > #quote-selected,:is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved) { flex:0 1 auto; min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } :is(#quote-form,.quote-form) > #quote-publish { margin-left:auto; order:2; } :is(#quote-form,.quote-form) > #quote-feedback { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media(max-width:700px){ :is(#quote-form,.quote-form) { overflow-x:auto; } } :is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved) { display:inline-block; box-sizing:border-box; padding:7px 10px; border:1px solid #a8c3e4; border-radius:7px; background:#eaf2fe; color:#245d9f; line-height:1.3; text-decoration:none; } :is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved):hover { background:#dceaff; border-color:#6c9bce; } :is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved):focus-visible { outline:2px solid #245d9f; outline-offset:2px; } :is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved)[hidden] { display:none; } /* Wider, compact status indicators in opened projects. */ .project-stages.detail-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; box-sizing:border-box; } .project-stages.detail-progress > span { min-width:0; padding:6px 10px; text-align:center; font-size:12px; line-height:1.3; } @media(max-width:420px){ .project-stages.detail-progress { gap:4px; } .project-stages.detail-progress > span { padding:6px 3px; font-size:10px; } } #customer-quote.quote-ready { background:#fff1a8; border:2px solid #e5a800; box-shadow:0 0 0 3px #facc1533; } #customer-quote.quote-ready > span,#customer-quote.quote-ready small { color:#684600; } #customer-quote.quote-ready a { color:#644000; font-weight:700; text-decoration:underline; } .history-tabs button svg { vertical-align:-2px; margin-left:3px; } .customer-page-heading > .history-tabs[data-history-tabs="supplier-projects"] { display:none; } main:has(#customer-projects:not([hidden])) > .customer-page-heading > .history-tabs[data-history-tabs="supplier-projects"] { display:flex; grid-column:3; grid-row:1; justify-self:end; margin:0; white-space:nowrap; } #projects .project-card-actions:has(.project-restore) { } #projects .project-card-actions > .project-restore { grid-column:4; grid-row:1; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions:has(.project-restore) { grid-template-columns:repeat(3,max-content); } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > .project-delete { grid-column:2; grid-row:1; font-size:12px; padding:6px 8px; margin:0; } :is(#supplier-projects,#supplier-detail-card) .project-message-actions > .project-restore { grid-column:3; grid-row:1; font-size:12px; padding:6px 8px; margin:0; } #items .item-actions { display:flex; align-items:center; gap:8px; } #items .item-actions > .item-file-icon { margin-left:auto!important; } #items .item-actions > .item-file-icon,#items .item-actions > .item-photo-icon { } .inline-item-actions #item-files-select { margin-left:auto; } .inline-item-actions #item-files-select,.inline-item-actions #item-photos-select { font-size:20px; padding:5px 8px; min-width:38px; } .attachment-row { display:flex; align-items:center; gap:12px; padding:10px; margin:6px 0; border:1px solid #d4e4f9; border-radius:8px; background:#f7faff; } .attachment-row > img { width:72px; height:56px; flex:0 0 72px; border-radius:5px; } .attachment-row > span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; } .attachment-row > button { flex-shrink:0; margin:0; } #documents-list,#supplier-documents-list { list-style:none; padding:0; } #document-feedback:not(:empty) { padding:7px 10px; border-radius:6px; background:#edf7ef; color:#245a32; font-size:12px; } .supplier-card-media .supplier-file-icon { font-size:20px; min-width:38px; padding:5px 8px; } #documents-dialog.photo-focused { width:min(900px,92vw); max-width:92vw; } #documents-dialog.photo-focused .attachment-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; } #documents-dialog.photo-focused .attachment-row > img { max-width:100%!important; object-fit:contain; background:#eef2f6; } #documents-dialog.photo-focused .attachment-row > span { font-size:12px; color:#62748c; } #documents-dialog.photo-focused[open] { display:grid; grid-template-columns:minmax(0,1fr) repeat(5,auto); gap:8px; max-height:90vh; box-sizing:border-box; overflow:hidden; padding:16px; } #documents-dialog.photo-focused #documents-title { grid-column:1 / -1; margin:0; font-size:18px; } #documents-dialog.photo-focused #documents-list,#documents-dialog.photo-focused .attachment-row { display:contents; } #documents-dialog.photo-focused .attachment-row > img { grid-column:1 / -1; grid-row:2; height:min(52vh,480px); max-height:52vh!important; width:100%; margin:0; } #documents-dialog.photo-focused .attachment-row > span,#documents-dialog.photo-focused button { grid-row:3; margin:0; align-self:center; white-space:nowrap; padding:6px 9px; } #documents-dialog.photo-focused #document-feedback { grid-column:1 / -1; margin:0; } #documents-dialog.photo-focused #document-feedback:empty { display:none; } #items .item-actions > .item-file-icon,#items .item-actions > .item-photo-icon { width:58px; height:48px; min-width:58px; padding:5px; font-size:25px; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; } #items .item-photo-icon img { width:100%; height:100%; object-fit:cover; border-radius:4px; } /* Keep the detail fields in place; split only their existing right-hand price area. */ body.customer #items > li > .item-pricing { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; } body.customer #items .item-pricing .price-box { padding:7px; } body.customer #items .item-pricing .supplier-unit-caption,body.customer #items .item-pricing .recommended-unit-caption { white-space:normal; overflow-wrap:normal; font-size:12px; line-height:1.25; } @media(max-width:600px){ body.customer #items > li > .item-pricing { grid-column:1; grid-row:3; grid-template-columns:minmax(0,1fr); width:100%; } body.customer #items > li > .item-actions { } } body.customer #items > li > .item-pricing { } .price-media-actions { grid-column:1 / -1; display:flex; justify-content:center; gap:8px; } #items .price-media-actions > button { width:58px; height:48px; min-width:58px; padding:5px; font-size:25px; margin:0!important; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; } body.customer #items .item-actions { column-gap:inherit; } .item-actions-left { display:flex; align-items:center; gap:8px; min-width:0; } .item-actions-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:center; justify-items:center; } #items .item-actions-media > button { width:58px; height:48px; min-width:58px; padding:5px; font-size:25px; margin:0!important; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; } @media(max-width:600px){ body.customer #items .item-actions { grid-template-columns:minmax(0,1fr); gap:8px; } } #items .item-actions-media > .item-file-icon { justify-self:end; } #items .item-actions-media > .item-photo-icon { justify-self:start; } body.customer #items .item-actions { margin-top:4px; padding-top:6px; } #items .editable-item-row input:not(:disabled):not([readonly]),.inline-item-details input:not(:disabled):not([readonly]) { color:#111; -webkit-text-fill-color:#111; opacity:1; } #items .editable-item-row input:disabled,#items .editable-item-row input[readonly],.inline-item-details input:disabled { color:#89929e; -webkit-text-fill-color:#89929e; opacity:1; } .customer-project-panel .customer-project-identity > #project-supplier { font-size:26px; margin:0 0 6px; } #project-company-details p { margin:3px 0; font-size:12px; color:#526275; overflow-wrap:anywhere; } .customer-detail-heading > #project-heading { font-size:26px; white-space:normal; overflow-wrap:anywhere; } .customer-page-heading.customer-detail-heading > #project-heading { grid-column:2; grid-row:1; min-width:0; max-width:none; width:auto; justify-self:center; text-align:center; font-size:26px; white-space:normal; overflow-wrap:anywhere; } .customer-page-heading.customer-detail-heading { margin-top:0; margin-bottom:6px; padding-top:0; gap:10px; } .customer-page-heading.customer-detail-heading > #project-heading { display:flex; align-items:baseline; justify-content:center; gap:12px; line-height:1.15; margin:0; padding:0; } .project-heading-caption { font-size:15px; font-weight:500; color:#69798b; letter-spacing:normal; } .project-heading-name { font-size:30px; font-weight:700; color:#17212b; letter-spacing:-.5px; } body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) > #project-heading { display:flex; grid-column:2; grid-row:1; justify-content:center; min-width:0; width:auto; margin:0; line-height:1.15; white-space:normal; text-align:center; } body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) { grid-template-columns:minmax(80px,1fr) minmax(0,auto) minmax(80px,1fr); } body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) > #project-heading { max-width:min(640px,60vw); align-items:center; overflow:hidden; } #project-heading .project-heading-caption { flex:0 0 auto; padding:7px 12px; border:1px solid #b7c9dd; border-radius:8px; font-size:20px; font-weight:600; line-height:1.2; } #project-heading .project-heading-name { flex:0 1 auto; min-width:0; padding:7px 12px; border:1px solid #b7c9dd; border-radius:8px; font-size:26px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:650px){ body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) { grid-template-columns:auto minmax(0,1fr); } body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) > #project-heading { max-width:100%; } #project-heading .project-heading-caption { font-size:16px; padding:6px 8px; } #project-heading .project-heading-name { font-size:20px; padding:6px 8px; } } body.customer main .customer-page-heading.customer-detail-heading:has(#project-heading) > #project-heading { box-sizing:border-box; padding:7px 12px; border:1px solid #b7c9dd; border-radius:8px; background:#f3f7fc; gap:10px; } #project-heading .project-heading-caption,#project-heading .project-heading-name { padding:0; border:0; border-radius:0; background:transparent; font-size:26px; font-weight:700; font-family:inherit; letter-spacing:-.5px; line-height:1.2; } #project-heading .project-heading-caption { color:#245d9f; } #project-heading .project-heading-name { color:#17212b; } @media(max-width:650px){ #project-heading .project-heading-caption,#project-heading .project-heading-name { font-size:20px; } } body.customer #finish-order:not(:disabled) { background:#2468b4; border-color:#2468b4; color:#fff; font-weight:600; } body.customer #finish-order:not(:disabled):hover { background:#1b5597; border-color:#1b5597; } main:has(#customer-detail:not([hidden])) > .customer-page-heading > #supplier-section-title { display:flex; align-items:center; justify-content:center; box-sizing:border-box; max-width:min(640px,60vw); min-width:0; gap:10px; line-height:1.2; overflow:hidden; } .supplier-project-caption,.supplier-project-name { font-size:26px; font-weight:700; letter-spacing:-.5px; } .supplier-project-caption { color:#245d9f; flex:0 0 auto; } .supplier-project-name { color:#17212b; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:650px){ .supplier-project-caption,.supplier-project-name { font-size:20px; } } /* Equal-sized company and summary cards in both project details. */ body.customer .customer-project-top,#customer-detail .project-head { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; } body.customer .customer-project-top .customer-summary,#customer-detail .project-head #supplier-totals,body.customer .customer-project-top #project-totals { display:contents; } body.customer .customer-project-top .customer-project-identity,#customer-detail .project-head > div:first-child,body.customer .customer-project-top #project-totals > div,body.customer .customer-project-top #customer-quote,#customer-detail .project-head #supplier-totals > div { box-sizing:border-box; min-width:0; min-height:88px; margin:0; padding:12px 14px; border:1px solid #d4e4f9; border-radius:8px; background:#eaf2fe; display:flex; flex-direction:column; justify-content:center; } #customer-detail .project-head #customer,body.customer .customer-project-top #project-supplier { margin:0; font-size:24px; line-height:1.2; white-space:normal; overflow-wrap:anywhere; } body.customer .customer-project-top #customer-quote.quote-ready { background:#fff1a8; border:2px solid #e5a800; } @media(max-width:550px){ body.customer .customer-project-top,#customer-detail .project-head { gap:6px; } #customer-detail .project-head #customer,body.customer .customer-project-top #project-supplier { font-size:18px; } } body.customer .customer-project-top > .customer-project-identity { grid-column:1; grid-row:1; } body.customer .customer-project-top #project-totals > div { grid-column:2; grid-row:1; } body.customer .customer-project-top #customer-quote { grid-column:3; grid-row:1; } /* Quantity and its unit share the existing input space. */ .quantity-unit-controls{display:flex;gap:6px;min-width:0;align-items:center}.quantity-unit-controls input{min-width:0!important;width:50%!important;flex:1}.quantity-unit-controls select{min-width:0;width:50%;flex:1;padding:8px 4px;border:1px solid #ccd8e5;border-radius:6px;background:#fff;color:#111}.quantity-with-unit .quantity-unit-controls{flex:1} /* Spread supplier availability across the complete item header. */ body.customer #items .customer-item-header .customer-item-delivery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; box-sizing:border-box; } body.customer #items .customer-item-header .customer-item-delivery > strong { text-align:left; } body.customer #items .customer-item-header .customer-item-delivery > span { text-align:center; } body.customer #items .customer-item-header .customer-item-delivery > span:last-child { text-align:right; } #parts .supplier-request-header { position:relative; padding-top:54px; } #parts .supplier-item-number { position:absolute; top:0; left:0; margin:0; padding:10px 16px; font-size:17px; line-height:1.5; background:#edf2f7; color:#738298; border-right:1px solid #b7c9dd; border-bottom:1px solid #b7c9dd; border-radius:8px 0 0 0; } /* Compact supplier details beside the item number. */ #parts .supplier-request-header { padding:10px 14px 10px 64px; gap:12px; } #parts .supplier-request-header .supplier-part-details { overflow:visible; } #parts .supplier-request-header .supplier-part-details p { align-items:center; margin:3px 0; font-size:14px; line-height:1.35; } #parts .supplier-detail-label { border:1px solid #c2d4eb; border-radius:5px; background:#e2ecf9; font-weight:600; } #parts .supplier-detail-value { min-width:0; overflow-wrap:anywhere; } #parts .supplier-request-header .supplier-part-details p { grid-template-columns:max-content minmax(0,1fr); gap:8px; } #parts .supplier-detail-label { padding:3px 5px; } /* All detail labels share the width of the longest label. */ #parts .supplier-request-header .supplier-part-details { display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:8px; row-gap:6px; align-content:start; } #parts .supplier-request-header .supplier-part-details p { display:contents; } #parts .supplier-detail-label { grid-column:1; align-self:center; } #parts .supplier-detail-value { grid-column:2; align-self:center; font-size:14px; line-height:1.35; color:#18334f; font-weight:600; } #parts .supplier-detail-label { font-size:14px; line-height:1.35; color:#18334f; } /* Framed read-only values fill the details column up to the media area. */ #parts .supplier-request-header .supplier-detail-value { display:block; width:100%; min-height:27px; padding:3px 7px; border:1px solid #c2d4eb; border-radius:5px; background:#fff; align-self:stretch; } #parts .supplier-request-header .supplier-detail-label { align-self:stretch; display:flex; align-items:center; } /* Reserve only the actual media width, leaving the rest for item values. */ #parts .supplier-request-header { grid-template-columns:minmax(0,1fr) max-content; column-gap:10px; } #parts .supplier-request-header .supplier-card-media { grid-column:2; grid-row:1; } @media(max-width:550px) { #parts .supplier-request-header { grid-template-columns:minmax(0,1fr); } #parts .supplier-request-header .supplier-card-media { grid-column:1; grid-row:2; } } /* Compact availability: both captions and inputs share one row. */ #parts .supplier-card-delivery { display:flex; align-items:center; gap:24px; } #parts .supplier-card-delivery label { display:flex; align-items:center; gap:8px; margin:0; max-width:none; min-width:0; white-space:nowrap; } #parts .supplier-card-delivery input { width:90px; min-width:45px; margin:0; padding:6px 8px; } @media(max-width:550px) { #parts .supplier-card-delivery { gap:10px; } #parts .supplier-card-delivery label { gap:4px; font-size:12px; } #parts .supplier-card-delivery input { width:65px; } } #parts .supplier-card-delivery { justify-content:space-between; } .customer-page-heading > h2 { text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body main > .customer-page-heading.project-list-heading { display:grid; grid-template-columns:110px minmax(0,1fr) 110px!important; align-items:center; gap:12px; } body main > .customer-page-heading.project-list-heading > h2 { grid-column:2!important; grid-row:1!important; justify-self:stretch; width:100%; min-width:0; max-width:100%; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; } body main > .customer-page-heading.project-list-heading > .history-tabs { grid-column:3; grid-row:1; flex-direction:column; align-items:stretch; justify-self:end; width:105px; margin:0; gap:4px; } body main > .customer-page-heading.project-list-heading > .page-heading-left { grid-column:1; grid-row:1; } /* Company identity is already shown in the centered project-list heading. */ .customer-project-list-panel .project-list-company, #customer-projects #projects-customer { display:none; } /* Supplier close action sits below the final progress step. */ :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 4px; width:100%; min-width:0; justify-content:stretch; overflow:visible; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > span { grid-row:1; min-width:0; text-align:center; padding:3px 4px; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > .close-project { grid-column:4; grid-row:2; justify-self:stretch; width:100%; min-width:0; max-width:100%; margin:0; padding:6px 3px; font-size:11px; white-space:nowrap; } /* Supplier project message and delete actions share one compact row. */ :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions > button { display:inline-flex; align-items:center; justify-content:center; height:34px; margin:0; padding:6px 10px; font-size:12px; box-sizing:border-box; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions > [data-unread-project] { min-width:34px; } /* Separate the supplier project name from the card border. */ :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request { margin:0; border:1px solid #a9c7eb; border-radius:8px; background:#eaf2fe; text-align:left; line-height:1.4; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions { } #answer-project { display:none; } main:has(#customer-detail:not([hidden])) > .customer-page-heading > #answer-project { display:inline-flex; align-items:center; justify-content:center; grid-column:3; grid-row:1; justify-self:end; margin:0; } #answer-project:disabled { background:#edf0f4; color:#8994a3; border-color:#dfe4eb; cursor:default; } #detail-progress.detail-progress > #answer-project { display:inline-flex; grid-column:3; grid-row:2; align-items:center; justify-content:center; justify-self:center; margin:0; padding:6px 12px; font-size:12px; } #detail-progress.detail-progress > span { grid-row:1; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > .answer-project { grid-column:3; grid-row:2; width:100%; min-width:0; margin:0; padding:6px 3px; font-size:11px; white-space:nowrap; } :is(#supplier-projects,#supplier-detail-card) .answer-project:disabled { background:#edf0f4; color:#8994a3; border-color:#dfe4eb; cursor:default; } /* Supplier closure uses the same active/disabled colors as answering. */ :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > .close-project:not(:disabled) { background:#226ed2; border-color:#226ed2; color:#fff; } :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > .close-project:disabled { background:#edf0f4; color:#8994a3; border-color:#dfe4eb; opacity:1; cursor:default; box-shadow:none; filter:none; } /* The agreed final project output has a warm red highlight. */ :is(#quote-form,.quote-form).quote-upload.quote-closed, body.customer .customer-project-top #customer-quote.quote-closed { background:#fce4e1; border:2px solid #c97970; color:#74332d; } :is(#quote-form,.quote-form).quote-closed :is(#quote-saved,.quote-saved) { color:#74332d; } :is(#quote-form,.quote-form) > :is(#quote-saved,.quote-saved)::before { content: "PDF"; display:inline-block; margin-right:8px; padding:4px; border:1px solid currentColor; border-radius:3px; font-size:10px; font-weight:700; } :is(#quote-tile,.quote-tile) {display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:280px;padding:5px 8px;background:#eaf2fe;border:1px solid #a8c3e4;border-radius:7px;} :is(#quote-tile,.quote-tile)[hidden]{display:none;} :is(#quote-tile,.quote-tile) :is(#quote-saved,.quote-saved){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#245d9f;font-size:12px;text-decoration:none;} :is(#quote-tile,.quote-tile) :is(#quote-saved,.quote-saved)::before{content:"PDF";margin-right:7px;font-weight:700;} :is(#quote-tile,.quote-tile) :is(#quote-remove,.quote-remove){padding:0;width:24px;min-width:24px;height:24px;border:0;background:transparent;color:#963c35;font-size:21px;line-height:1;} body.customer #detail-progress > #finish-order { grid-column:1;grid-row:2;width:100%;min-width:0;margin:0;padding:6px 10px;font-size:12px;line-height:1.3;align-self:start; } .customer-project-panel .item-entry-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 8px;align-items:stretch; } .customer-project-panel .item-entry-actions > button {width:100%;min-width:0;margin:0;padding:9px 14px;} .customer-project-panel .item-entry-actions #add-item {grid-column:1;grid-row:1;} .customer-project-panel .item-entry-actions #import-items {grid-column:2;grid-row:1;} .customer-project-panel .item-entry-actions #add-item,.customer-project-panel .item-entry-actions #import-items { margin:0;padding:9px 14px;box-sizing:border-box; } .project-stages span.closure-partial { background:linear-gradient(to right,#d7eaff 0%,#d7eaff 50%,#f1f4f8 50%,#f1f4f8 100%);color:#124c91;font-weight:700;box-shadow:inset 0 0 0 1px #87b5eb; } #detail-progress > #detail-close {grid-column:4;grid-row:2;justify-self:center;margin:0;padding:6px 12px;font-size:12px;background:#2468b4;border-color:#2468b4;color:white;} #detail-progress > #detail-close:disabled {background:#edf0f4;border-color:#d8dfe7;color:#8993a0;cursor:default;} #projects .customer-project-stages > .close-project:not(:disabled) { background:#226ed2; border-color:#226ed2; color:#fff; } #projects .customer-project-stages > .close-project:not(:disabled):hover { background:#1b5597; border-color:#1b5597; } #projects .customer-project-stages > .close-project:disabled { background:#e5effb; border-color:#cbdcf0; color:#829ab5; opacity:1; cursor:default; box-shadow:none; filter:none; } body.customer .item-entry-actions #add-item:disabled {background:#e5effb;border-color:#cbdcf0;color:#829ab5;opacity:1;cursor:default;} body.customer #detail-progress > #detail-close {width:100%;min-width:0;justify-self:stretch;align-self:start;padding:6px 10px;font-size:12px;line-height:1.3;box-sizing:border-box;} .project-stages > span {box-sizing:border-box;} #projects .customer-project-stages, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages, .project-stages.detail-progress {grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1.25fr) minmax(max-content,1fr);} #projects .customer-project-stages > span, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > span, .project-stages.detail-progress > span {white-space:nowrap;min-width:max-content;} #projects .customer-project-stages > span, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-stages > span, .project-stages.detail-progress > span { font-weight:700; } .supplier-presentation {margin-top:20px;} .supplier-presentation > label {display:block;font-weight:600;margin:16px 0 6px;} .supplier-presentation > textarea {width:100%;box-sizing:border-box;padding:10px;border:1px solid #bdcde0;border-radius:8px;resize:vertical;font:inherit;} .supplier-presentation > small {display:block;margin:7px 0;color:#52657b;} .supplier-presentation > .primary {margin-top:12px;} .presentation-photos {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px;} .presentation-photo {position:relative;aspect-ratio:4/3;border:1px solid #cad9e9;border-radius:10px;overflow:hidden;background:#edf3fa;} .presentation-photo img {width:100%;height:100%;object-fit:cover;} .presentation-photo button {position:absolute;right:5px;top:5px;width:28px;height:28px;padding:0;background:white;border-radius:50%;font-size:21px;} @media(max-width:650px){.presentation-photos {grid-template-columns:repeat(2,minmax(0,1fr));}} .account-menu-group {font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#62748a;margin:16px 8px 4px;} .role-preview {display:block;font-size:11px;margin-top:10px;color:#62748a;} .role-preview select {display:block;width:100%;padding:6px;margin-top:4px;border:1px solid #cad6e4;border-radius:6px;background:white;} .company-settings form.panel > label {display:block;margin:12px 0;} .company-settings form.panel > label > input:not([type=checkbox]),.company-settings form.panel > label > select {display:block;box-sizing:border-box;width:100%;padding:8px;margin-top:4px;} #project-form .new-project-heading-row {display:flex;align-items:center;gap:10px;width:100%;} #project-form .new-project-heading-row input {flex:1;min-width:0;} #project-form .new-project-heading-row button {flex:none;margin:0;} #project-form .new-project-bottom-row {display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;} #project-form .new-project-bottom-row button {margin:0;} body.customer .customer-project-top > .customer-project-identity, body.customer .customer-project-top #project-totals > div, body.customer .customer-project-top #customer-quote {height:76px;min-height:76px;padding:8px 10px;} body.customer .customer-project-top #project-supplier {width:100%;min-width:0;white-space:nowrap;overflow-wrap:normal;font-size:24px;line-height:1.2;} /* Shared dimensions for navigation and explicit project saving. */ body button.app-back-button, body button#save-project-draft { box-sizing:border-box; height:40px; min-height:40px; padding:0 12px; font-size:14px; line-height:1.2; white-space:nowrap; align-items:center; justify-content:center; text-align:center; } /* Keep the draft save action compact and aligned with the panel edge. */ body button#save-project-draft { width:max-content; min-width:0; max-width:none; flex:0 0 auto; grid-column:3; grid-row:1; justify-self:end; margin:0; } @media(max-width:650px){body button#save-project-draft {grid-column:2;grid-row:2;}} /* One shared compact size for Back and Save project in every view. */ :root { --project-navigation-button-width:112px; } body button.app-back-button, body button#save-project-draft { width:var(--project-navigation-button-width); min-width:var(--project-navigation-button-width); max-width:var(--project-navigation-button-width); flex:0 0 var(--project-navigation-button-width); } #requests .company-request {} #requests .company-request > strong {} .company-stage-summary {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;flex:1;min-width:0;} .company-stage-summary > span {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;align-self:stretch;padding:7px 5px;border:1px solid #b8d0eb;border-radius:7px;background:#edf5ff;color:#234e7c;text-align:center;font-size:12px;line-height:1.2;} .company-stage-summary strong {font-size:18px;color:#165ca9;} @media(max-width:800px){#requests .company-request {flex-wrap:wrap;} .company-stage-summary {flex-basis:100%;}} /* Compact single-row customer project counters. */ #requests .company-request {flex-wrap:nowrap;} #requests .company-request > strong {flex:0 1 190px;} :is(#requests, .supplier-grid) .company-stage-summary {flex:1 1 auto;flex-wrap:nowrap;} :is(#requests, .supplier-grid) .company-stage-summary > span {flex:1 1 auto;} :is(#requests, .supplier-grid) .company-stage-summary strong {} /* Bound company identity, counters and envelope to separate columns. */ #requests .company-request {display:grid;padding:12px;align-items:center;} #requests .company-request > strong {min-width:0;max-width:100%;line-height:1.25;overflow-wrap:anywhere;} #requests .company-request .company-message-count {justify-self:center;max-width:44px;} :is(#requests, .supplier-grid) .company-stage-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.35fr));gap:4px;min-width:0;width:100%;} :is(#requests, .supplier-grid) .company-stage-summary > span {min-width:0;box-sizing:border-box;display:flex;flex-direction:column;white-space:normal;overflow-wrap:anywhere;} :is(#requests, .supplier-grid) .company-stage-summary strong {order:-1;} /* Align every counter on the same top baseline with compact captions. */ :is(#requests, .supplier-grid) .company-stage-summary > span {justify-content:flex-start;padding:4px 3px;gap:2px;font-size:9px;line-height:1.1;} :is(#requests, .supplier-grid) .company-stage-summary strong {display:block;flex:0 0 15px;height:15px;line-height:15px;font-size:13px;margin:0;} :is(#requests, .supplier-grid) .company-stage-summary > span > span {margin:0;} /* Center short and multiline captions beneath the aligned counters. */ :is(#requests, .supplier-grid) .company-stage-summary > span > span {display:flex;flex:1 1 auto;width:100%;align-items:center;justify-content:center;text-align:center;min-height:0;} .customer .supplier-grid .supplier-card {grid-template-columns:minmax(100px,1fr) minmax(0,3fr) 44px;gap:10px;padding:12px;align-items:center;} .customer .supplier-grid .supplier-card .supplier-mark {grid-column:1;grid-row:1;font-size:14px;line-height:1.25;margin:0;min-width:0;overflow-wrap:anywhere;} .customer .supplier-grid .company-stage-summary {grid-column:2;grid-row:1;} .customer .supplier-grid .supplier-card .supplier-envelope {grid-column:3;grid-row:1;justify-self:center;padding:3px;max-width:44px;box-sizing:border-box;} /* Match the supplier customer cards to the customer supplier cards. */ #requests .company-request > strong {justify-self:start;box-sizing:border-box;background:#eaf2fe;color:#226ed2;border-radius:12px;font-weight:750;} #requests .company-request .company-stage-summary > span > span {line-height:1.1;color:#234e7c;} /* Remove legacy request-span offsets from the company summary row. */ #requests .company-request > strong, #requests .company-request > .company-stage-summary, #requests .company-request > .company-message-count {margin:0;align-self:center;} #requests .company-request .company-stage-summary > span {margin:0;} #requests .company-request .company-message-count {display:flex;align-items:center;justify-content:center;line-height:1;} #requests .company-request .company-message-count > span {margin:0;line-height:1;} /* Answered customer projects stand out like newly received supplier requests. */ body.customer #projects > li.customer-project-card.project-answered {background:#fff8df;border:2px solid #e4b540;} :is(#quote-form,.quote-form).quote-action-error {background:#fff0ed;border:2px solid #c75b50;} :is(#quote-form,.quote-form).quote-action-error #quote-feedback {color:#a32620;font-weight:600;} :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row.project-awaiting-close {background:#fff8df;border:2px solid #e4b540;} /* Align purchase and profit amounts along the bottom of their cards. */ #supplier-project-summary > div:nth-child(-n+2), :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div:nth-child(-n+2) {display:flex;flex-direction:column;align-self:stretch;} #supplier-project-summary > div:nth-child(-n+2) > strong, :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div:nth-child(-n+2) > strong {margin-top:auto;padding-top:4px;} .supplier-detail-value.supplier-item-note {white-space:pre-wrap;overflow-wrap:anywhere;} body.customer #items > li > .item-note-row {grid-column:1 / -1;margin:6px 0;min-width:0;} body.customer #items > li > .item-actions {} #item-form > .item-note-row {grid-column:1 / -1;display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;} #item-form > .item-note-row label {margin:0;} #item-form > .item-note-row input {width:100%;min-width:0;margin:0;padding:7px;} @media(max-width:600px){body.customer #items > li > .item-note-row {grid-row:4;}body.customer #items > li > .item-actions {grid-row:5;}} #projects > .customer-project-card,:is(#supplier-projects,#supplier-detail-card) > .supplier-project-row {position:relative;} #projects .project-list-number,:is(#supplier-projects,#supplier-detail-card) .project-list-number {position:absolute;left:10px;display:block;padding:2px 8px;background:#eaf2fe;color:#245d9f;border:1px solid #b7c9dd;border-radius:6px;font-size:13px;font-weight:700;line-height:1.3;} #projects .project-card-link,:is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request {width:max-content;min-width:90px;text-align:center;justify-self:start;} /* Place the project number and opening action together in the top row. */ #projects > .customer-project-card,:is(#supplier-projects,#supplier-detail-card) > .supplier-project-row {padding-top:14px;} #projects .project-list-number,:is(#supplier-projects,#supplier-detail-card) .project-list-number {} #projects .project-card-link,:is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request {margin-left:44px;align-self:start;} /* Equal compact opening buttons in both project lists. */ #projects .customer-project-card .project-card-link, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request {box-sizing:border-box;width:90px;min-width:90px;max-width:90px;height:41px;min-height:41px;max-height:41px;padding:9px 12px;font-size:15px;line-height:21px;font-weight:700;display:block;text-align:center;} #parts .supplier-card-delivery { flex-wrap:wrap; row-gap:8px; } #parts .supplier-purchase-source { flex:0 0 100%; min-width:0; } #parts .supplier-purchase-source label { width:100%; } #parts .supplier-purchase-source input { flex:1; width:0; min-width:0; } #parts .supplier-purchase-source a { display:block; margin:4px 0 0; font-size:12px; overflow-wrap:anywhere; } #parts .supplier-purchase-source a[hidden] { display:none; } .supplier-item-search { margin:12px 0 18px; } .supplier-item-search > label { display:block; margin-bottom:6px; font-weight:600; } #supplier-item-query { width:100%; box-sizing:border-box; } .supplier-item-result { display:flex; align-items:center; gap:12px; padding:10px; margin:6px 0; border:1px solid #b8d1e8; border-radius:8px; background:#f4f9fd; } .supplier-item-result > div { flex:1; min-width:0; overflow-wrap:anywhere; } .supplier-item-result strong,.supplier-item-result span { display:block; } .supplier-item-result span { font-size:12px; margin-top:4px; } .supplier-item-result button { flex-shrink:0; } #parts .search-found-part { outline:3px solid #d9a528; outline-offset:3px; } /* Matching envelope and delete controls on project cards in both roles. */ #projects .project-card-actions > .message-envelope, #projects .project-card-actions > .project-delete, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions > .message-envelope, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions > .project-delete { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:90px; min-width:90px; max-width:90px; height:36px; min-height:36px; max-height:36px; padding:6px 10px; margin:0; font-size:12px; } /* Keep opening and numbering as tall as the other project actions. */ #projects .project-card-link, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request, #projects .project-list-number, :is(#supplier-projects,#supplier-detail-card) .project-list-number { box-sizing:border-box; height:36px; min-height:36px; max-height:36px; display:inline-flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0; } #projects .project-list-number,:is(#supplier-projects,#supplier-detail-card) .project-list-number { top:14px; } /* Compact envelope preserves room for the project totals. */ #projects .project-card-actions > .message-envelope, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions > .message-envelope { width:40px; min-width:40px; max-width:40px; height:36px; min-height:36px; max-height:36px; padding:4px; } #projects .customer-item-search-results { grid-column:1 / -1; width:100%; min-width:0; padding:8px 0; } .customer-item-search-results a { display:block; margin-top:8px; overflow-wrap:anywhere; } #items > .search-found-part { outline:3px solid #d9a528; outline-offset:3px; } /* Shared location indicators for both project workflows. */ main > .position-indicator { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:min(100%,480px); margin:0 auto 14px; box-sizing:border-box; } main > .position-indicator > button { display:flex; align-items:center; justify-content:center; text-align:center; min-width:0; min-height:32px; padding:5px 9px; box-sizing:border-box; border:1px solid #b8cde4; border-radius:7px; background:#edf4fb; color:#385b7c; font-size:13px; font-weight:700; line-height:1.2; } main > .position-indicator > .is-current { background:#176bc0; border-color:#176bc0; color:#fff; } @media(max-width:480px) { main > .position-indicator {gap:5px;} main > .position-indicator > button {font-size:11px;padding:5px;} } .supplier-stock-state {display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;width:100%;font-size:13px;} .supplier-stock-state button {width:auto;min-height:30px;padding:4px 12px;border:1px solid #9bbcab;border-radius:6px;} .supplier-stock-state button[aria-pressed="true"] {} :is(#supplier-projects,#supplier-detail-card) .project-stock-state {display:grid;gap:5px;min-width:0;align-self:start;} .project-stock-state > span {grid-column:1/-1;font-size:12px;} .project-stock-state button,.supplier-stock-state button {border:1px solid #9bbcab;border-radius:6px;padding:5px 7px;min-height:30px;font-size:12px;min-width:0;width:auto;} .supplier-stock-state button[aria-pressed="true"],.project-stock-state button[aria-pressed="true"] {} :is(#supplier-projects,#supplier-detail-card) .project-stock-state {grid-column:1/-1;grid-template-columns:minmax(0,1.4fr) minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr);width:50%;justify-self:start;} :is(#supplier-projects,#supplier-detail-card) .project-stock-state button {height:auto;line-height:1.3;font-weight:700;box-sizing:border-box;} @media(max-width:700px){:is(#supplier-projects,#supplier-detail-card) .project-stock-state {width:100%;}} :is(#supplier-projects,#supplier-detail-card) .project-stock-state {margin-top:-8px;row-gap:3px;} :is(#supplier-projects,#supplier-detail-card) .project-stock-state button {white-space:nowrap;overflow-wrap:normal;font-size:10px;min-height:27px;padding:3px 4px;} :is(#supplier-projects,#supplier-detail-card) .project-stock-state > span {line-height:1.2;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions {align-self:start;align-content:start;row-gap:5px;} :is(#supplier-projects,#supplier-detail-card) .project-message-actions > .project-stock-state {flex:0 0 100%;width:100%;align-self:start;} /* Align the procurement controls and price summary along their bottom edge. */ :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary {align-self:end;} /* Match the two left-hand action columns on supplier project cards. */ :is(#supplier-projects,#supplier-detail-card) > .supplier-project-row {row-gap:6px;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .project-list-number {left:14px;width:40px;min-width:40px;max-width:40px;height:36px;padding:0;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request {margin-left:48px;width:90px;min-width:90px;max-width:90px;height:36px;min-height:36px;max-height:36px;padding:0;font-size:12px;display:inline-flex;align-items:center;justify-content:center;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-message-actions {margin-top:0;column-gap:8px;} /* Slightly taller summaries and more separation above procurement status. */ :is(#supplier-projects,#supplier-detail-card) .project-message-actions > .project-stock-state {margin-top:6px;} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div {padding-top:10px;padding-bottom:10px;} main > .position-indicator > button {margin:0;width:auto;cursor:pointer;} main > .position-indicator > button:disabled {opacity:1;cursor:default;} main > .position-indicator > button:not(:disabled):hover {background:#dceafb;} /* One project-opening control containing its number and name. */ #projects .customer-project-card > .project-card-link, :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request {margin-left:0;width:100%;min-width:0;max-width:100%;height:36px;min-height:36px;max-height:36px;padding:7px 10px;box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:14px;line-height:20px;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row > .request > strong {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Compact stock counts on the left, project counts on the right. */ #requests .company-request {gap:7px;} #requests .company-request > strong {font-size:12px;padding:5px 8px;} #requests .company-request > .company-stock-summary {grid-template-columns:repeat(4,minmax(0,1fr));} #requests .company-request .company-stage-summary {gap:3px;} #requests .company-request .company-stage-summary > span {padding:4px 2px;} #requests .company-request .company-stage-summary > span > span {font-size:8px;} #requests .company-request .company-stage-summary strong {font-size:12px;} @media(max-width:650px){#requests .company-request {}#requests .company-request > strong {}#requests .company-request > .company-message-count {}#requests .company-stock-summary {grid-column:1;}#requests .company-stage-summary:not(.company-stock-summary) {grid-column:2/4;}} /* Equal-sized summary cells, with role-specific colours. */ #requests .company-request {grid-template-columns:minmax(95px,1.1fr) minmax(0,4.6fr) 40px;} #requests .company-all-summaries {display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;min-width:0;align-items:stretch;margin:0;} #requests .company-all-summaries > .company-stage-summary {display:contents;} #requests .company-all-summaries > .company-stage-summary > span {height:100%;margin:0;min-height:49px;background:#eaf2fe;border:1px solid #d4e4f9;} #requests .company-all-summaries > .company-stock-summary > span {background:#e0f0e6;border-color:#aacdb9;} #requests .company-all-summaries > .company-stock-summary > span > span,#requests .company-all-summaries > .company-stock-summary strong {color:#24553c;} .project-stock-state button,.supplier-stock-state button {background:linear-gradient(to right,#a8d5b8 var(--stock-progress,0%),#edf7f0 var(--stock-progress,0%));border-color:#aacdb9;color:#24553c;} .supplier-stock-state button[aria-pressed="true"],.project-stock-state button[aria-pressed="true"] {background:#a8d5b8;border-color:#82b897;color:#19472e;} @media(max-width:650px){#requests .company-request {grid-template-columns:minmax(0,1fr) 36px;}#requests .company-request > strong {grid-column:1;}#requests .company-request > .company-message-count {grid-column:2;grid-row:1;}#requests .company-all-summaries {grid-column:1/-1;}} /* Keep the unread counter anchored to its envelope within company cards. */ #requests .company-request .company-message-count {position:relative;top:auto;right:auto;transform:none;} #requests .company-request .company-message-count > .unread-badge {position:absolute;top:-7px;right:-5px;margin:0;} #projects .project-card-actions > .customer-stock-indicators {grid-column:1/-1;grid-row:auto;flex-basis:100%;width:100%;display:grid;margin-top:5px;} #projects .customer-stock-indicators > span {align-items:center;justify-content:center;color:#24553c;background:linear-gradient(to right,#a8d5b8 var(--stock-progress,0%),#edf7f0 var(--stock-progress,0%));} /* Match the project status pills, retaining supplier green. */ #projects .project-card-actions > .customer-stock-indicators {gap:4px;align-items:start;} #projects .customer-stock-indicators > span {display:block;box-sizing:border-box;border:0;border-radius:12px;font-size:10px;line-height:1.5;font-weight:700;white-space:nowrap;overflow-wrap:normal;text-align:center;} /* Keep customer actions inside their own column. */ #projects .project-card-actions {width:100%;min-width:0;max-width:100%;grid-template-columns:40px minmax(0,1fr) minmax(0,90px);} #projects .project-card-actions:has(.project-restore) {grid-template-columns:40px repeat(3,minmax(0,1fr));} #projects .project-card-actions > .project-delete,#projects .project-card-actions > .project-copy,#projects .project-card-actions > .project-restore {width:100%;min-width:0;max-width:100%;margin-left:0!important;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;} #projects .project-card-actions > .customer-stock-indicators {min-width:0;max-width:100%;grid-template-columns:minmax(0,1.4fr) minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr);} #projects .customer-stock-indicators > span {min-width:0;max-width:100%;padding:3px 2px;} #projects .customer-project-summary {max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-items:stretch;} #projects .customer-project-summary:not(:has(.project-commission)) {grid-template-columns:repeat(2,minmax(0,1fr));} #projects .customer-project-summary > * {min-width:0;width:100%;padding:7px;box-sizing:border-box;overflow-wrap:anywhere;} #projects .project-list-quote {display:flex;flex-direction:column;gap:5px;border:1px solid #d4e4f9;border-radius:6px;background:#eaf2fe;font-size:11px;} #projects .project-list-quote.quote-closed {background:#fff0ee;border-color:#dc9c95;} #projects .project-list-quote > span {font-size:11px;font-weight:700;} #projects .project-list-quote small {font-size:9px;} #projects .project-list-quote a {font-weight:700;} #projects .project-list-quote {align-items:center;justify-content:center;} #projects .project-list-quote > span,#projects .project-list-quote.quote-ready > small {display:none;} #projects .project-list-quote a {font-size:28px;text-decoration:none;line-height:1.2;} .detail-project-card-container #project-totals {display:contents;} #projects.detail-project-card-container .customer-project-summary:not(:has(.project-commission)) {grid-template-columns:repeat(2,minmax(0,1fr));} #projects.detail-project-card-container .customer-project-summary:has(.project-commission) {grid-template-columns:repeat(3,minmax(0,1fr));} #projects.detail-project-card-container .project-total {min-width:0;padding:7px;background:#eaf2fe;border:1px solid #d4e4f9;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;} #projects.detail-project-card-container .project-total > span,#projects.detail-project-card-container .project-total > small {font-size:11px;} #projects.detail-project-card-container .project-total > strong {font-size:16px;} .customer-project-panel > .customer-project-top[hidden],.customer-project-panel > .project-totals-row[hidden] {display:none;} .customer-detail-heading > #project-heading {visibility:hidden;} #projects.detail-project-card-container {list-style:none;padding:0;margin:0 0 14px;} #projects.detail-project-card-container .customer-project-summary #project-totals > .project-total {grid-column:auto;grid-row:auto;} .customer-detail-heading > #project-heading.detail-company-heading {visibility:visible;display:flex;justify-content:center;align-items:center;min-width:0;} #project-heading .detail-company-name {margin:0;font-size:20px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} :is(#supplier-projects,#supplier-detail-card) .supplier-project-row .project-profit-summary {max-width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary:not(:has(.project-commission)) {grid-template-columns:repeat(3,minmax(0,1fr));} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div {min-width:0;padding-left:5px;padding-right:5px;overflow-wrap:anywhere;} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > .project-sale-total {display:flex;flex-direction:column;align-self:stretch;} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > .project-sale-total > strong {margin-top:auto;padding-top:4px;} #customer-detail .project-head,#customer-detail #project-note,#customer-detail > .detail > #detail-progress {display:none;} #supplier-detail-card {margin-bottom:12px;} #supplier-detail-card .request:disabled {opacity:1;cursor:default;} #customer-detail :is(#quote-form,.quote-form) {width:100%;max-width:none;margin:10px 0 12px;} .project-stock-state button:disabled {opacity:.5;cursor:default;filter:none;} #supplier-project-summary {} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div:not(.project-commission) {display:flex;flex-direction:column;align-self:stretch;} :is(#supplier-projects,#supplier-detail-card) .project-profit-summary > div:not(.project-commission) > strong {margin-top:auto;padding-top:4px;} #supplier-project-summary {width:100%;max-width:none;margin:0 0 14px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} #supplier-project-summary > div {min-width:0;box-sizing:border-box;} #supplier-section-title[data-company-heading] {text-align:center;justify-self:stretch;min-width:0;white-space:nowrap;overflow:hidden;} main:has(#customer-detail:not([hidden])) > .customer-page-heading > #supplier-section-title {border:0;background:transparent;border-radius:0;box-shadow:none;padding:0;} .project-delivery-row {grid-column:1/-1;width:100%;min-width:0;padding:5px 8px;border:1px solid #aacdb9;border-radius:6px;background:#edf7f0;color:#24553c;box-sizing:border-box;} .project-delivery-row label {display:flex;align-items:center;margin:0;font-size:12px;} .project-delivery-row input {min-width:0;margin:0;padding:3px 6px;font-size:12px;} .project-delivery-row label > span:first-of-type {} .project-delivery-row small:empty {display:none;} /* Shared project conversation, identical in both roles. */ body dialog.project-chat-dialog{box-sizing:border-box;width:min(640px,calc(100vw - 32px));max-width:640px;padding:20px;border:1px solid #b9cbd9;border-radius:16px;background:#f7fafc;color:#20364b;box-shadow:0 18px 60px #15283b44;} body dialog.project-chat-dialog::backdrop{background:#172a3e66;} body dialog.project-chat-dialog header{display:flex;align-items:center;gap:16px;justify-content:space-between;} body dialog.project-chat-dialog h2{font-size:18px;margin:0;overflow-wrap:anywhere;} body dialog.project-chat-dialog button{width:auto;min-width:0;padding:9px 15px;font-size:14px;border-radius:8px;} body dialog.project-chat-dialog .project-chat-messages{display:flex;flex-direction:column;gap:10px;list-style:none;margin:18px 0;padding:0;overflow:auto;} body dialog.project-chat-dialog .project-chat-messages li{max-width:88%;padding:10px 13px;border-radius:12px;background:#fff;border:1px solid #dbe4ec;overflow-wrap:anywhere;} body dialog.project-chat-dialog .project-chat-messages li.mine{align-self:flex-end;background:#e5f0fc;} body dialog.project-chat-dialog .project-chat-messages small{font-size:11px;color:#50667a;} body dialog.project-chat-dialog .project-chat-messages p{white-space:pre-wrap;margin:5px 0 0;} body dialog.project-chat-dialog form{display:flex;flex-direction:column;gap:8px;} body dialog.project-chat-dialog textarea{box-sizing:border-box;width:100%;font:inherit;border:1px solid #aebfce;border-radius:8px;padding:10px;background:white;color:#20364b;} body dialog.project-chat-dialog form button{align-self:flex-end;background:#1964a5;color:white;border:0;} /* Prices share the lower row; photography occupies the upper right. */ body.customer #item-form > .inline-item-details{grid-column:1;grid-row:2;} body.customer #item-form > .item-top-photo{} body.customer #item-form > .inline-item-pricing, body.customer #items > li > .item-pricing{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:0;} body.customer #item-form > .item-note-row, body.customer #items > li > .item-note-row{grid-column:1 / -1;grid-row:4;} body.customer #item-form > .inline-item-actions, body.customer #items > li > .item-actions{grid-column:1 / -1;grid-row:5;} body.customer #items > li > .item-top-photo{} body.customer .item-top-photo{display:flex;align-items:center;justify-content:center;min-width:0;} body.customer .item-top-photo > button{width:80px;height:70px;margin:0!important;font-size:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;} body.customer .item-top-photo img{width:100%;height:100%;object-fit:cover;} body.customer #items .item-pricing .price-box{min-height:0;} @media(max-width:600px){body.customer #item-form,body.customer #items > li{grid-template-columns:minmax(0,1fr) 90px;}body.customer #items > li > .item-details{grid-column:1;grid-row:2;}body.customer #items .item-pricing .price-box{padding:7px;}} /* Compact editor: prices occupy the same height as type and quantity. */ body.customer #item-form{gap:10px 12px;align-items:stretch;} body.customer #item-form > .inline-item-details{display:contents;} body.customer #item-form label[for="item-name"]{grid-column:1;grid-row:2;} body.customer #item-form #item-name{grid-column:2;grid-row:2;} body.customer #item-form label[for="brand"]{grid-column:1;grid-row:3;} body.customer #item-form #brand{grid-column:2;grid-row:3;} body.customer #item-form label[for="model"]{grid-column:1;grid-row:4;} body.customer #item-form #model{grid-column:2;grid-row:4;} body.customer #item-form label[for="quantity"]{grid-column:1;grid-row:5;} body.customer #item-form .quantity-unit-controls{grid-column:2;grid-row:5;} body.customer #item-form > .item-top-photo{grid-column:3;grid-row:2 / 4;} body.customer #item-form > .inline-item-pricing{grid-column:3;grid-row:4 / 6;align-self:stretch;} body.customer #item-form .inline-item-pricing .price-box{padding:5px 8px;gap:2px;justify-content:center;} body.customer #item-form .inline-item-pricing .price-box label,body.customer #item-form .inline-item-pricing .supplier-unit-caption{font-size:11px;white-space:normal;line-height:1.2;} body.customer #item-form > .item-note-row{grid-row:6;} body.customer #item-form > .inline-item-actions{grid-row:8;} body.customer #item-form #item-files-preview{grid-row:7;} body.customer #items > li{} body.customer #items > li > .item-pricing{grid-column:2;grid-row:2;align-self:end;} body.customer #items > li > .item-top-photo{grid-column:2;grid-row:2;align-self:start;} body.customer #items > li > .item-note-row{} body.customer #items > li > .item-actions{} body.customer #items > li > .item-top-photo > button{height:48px;width:58px;} @media(max-width:600px){body.customer #item-form{gap:8px 6px;}body.customer #item-form .inline-item-pricing{gap:4px;}body.customer #item-form .inline-item-pricing .price-box{padding:4px;}body.customer #items > li{}} /* Give item identification more room than the compact price pair. */ body.customer #item-form{grid-template-columns:110px minmax(100px,1.5fr) minmax(230px,1fr);} body.customer #items > li{grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);} @media(max-width:600px){body.customer #item-form{grid-template-columns:75px minmax(70px,1.5fr) minmax(150px,1fr);}body.customer #items > li{grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr);}} body.customer #item-files-select[hidden],body.customer #items .item-file-icon[hidden]{display:none!important;} body.customer .item-top-photo > button,body.customer #items > li > .item-top-photo > button{width:100%;height:80px;box-sizing:border-box;border:1px dashed #9ab7ce;border-radius:9px;background:#eff6fc;font-size:14px;padding:5px;overflow-wrap:anywhere;} body.customer .item-top-photo > button img{width:100%;height:100%;object-fit:contain;border-radius:5px;} body.customer .item-top-photo > button.attachment-three-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border:0;background:transparent;padding:0;} .attachment-slot{height:80px;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px dashed #9ab7ce;border-radius:8px;background:#eff6fc;padding:4px;font-size:11px;overflow:hidden;overflow-wrap:anywhere;} body.customer .item-top-photo .attachment-slot img{width:100%;height:100%;object-fit:contain;} .supplier-card-media.unified-attachments{display:flex;justify-content:center;} .supplier-card-media.unified-attachments .card-photo{width:100%;} dialog.attachment-gallery{width:min(720px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #b9cbd9;border-radius:14px;padding:20px;background:#f7fafc;} dialog.attachment-gallery::backdrop{background:#172a3e66;} .attachment-gallery-view{height:min(420px,55vh);display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;border-radius:10px;overflow:hidden;} .attachment-gallery-view img{max-width:100%;max-height:100%;object-fit:contain;} .attachment-gallery-view > div{font-size:64px;} .attachment-gallery > p{overflow-wrap:anywhere;text-align:center;} .attachment-gallery-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;} .attachment-gallery-actions button{width:auto;padding:8px 12px;} .supplier-card-media.unified-attachments{flex-direction:column;align-items:center;gap:4px;} .supplier-card-media.unified-attachments .attachment-count{font-size:11px;line-height:1.3;color:#50667a;text-align:center;} .attachment-gallery-stage{position:relative;padding:0 42px;} dialog.attachment-gallery .attachment-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid #bed0df;background:#edf4fa;color:#245d9f;font-size:22px;} .attachment-gallery .attachment-arrow.previous{left:0;} .attachment-gallery .attachment-arrow.next{right:0;} .attachment-gallery .attachment-arrow:disabled{opacity:.3;cursor:default;} dialog.attachment-gallery{position:relative;} dialog.attachment-gallery h2{padding-right:38px;} dialog.attachment-gallery .attachment-gallery-close{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#334d63;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;} dialog.attachment-gallery .attachment-gallery-close:hover{background:#e3edf5;} #parts .part-actions{flex-wrap:wrap;} #parts .part-actions > .supplier-stock-state{display:grid;flex:1 1 330px;margin-left:auto;} #parts .part-actions > .supplier-stock-state > strong{display:none;} #parts .part-actions > .supplier-stock-state button{white-space:nowrap;} #parts .part-actions > .supplier-stock-state > p{grid-column:1 / -1;margin:0;} #parts .part-actions > .supplier-stock-state > p:empty{display:none;} #parts .part-actions > .supplier-stock-state > [role="status"]{grid-column:1 / -1;} #parts .part-actions > .supplier-stock-state > [role="status"]:empty{display:none;} #parts .part-actions > .supplier-stock-state{flex-basis:420px;} #parts .part-actions > .supplier-stock-state button{width:100%;box-sizing:border-box;} #parts .part-actions{display:grid;align-items:center;} #parts .part-actions > button{min-width:0;} #parts .part-actions > .supplier-stock-state{width:100%;min-width:0;margin:0;gap:4px;grid-template-columns:repeat(4,minmax(0,1fr));} #parts .part-actions > .supplier-stock-state button{} #parts .part-actions{} #parts .part-actions > button{width:90px;height:36px;padding:7px 10px;font-size:13px;} #parts .part-actions > .supplier-stock-state button{height:32px;min-height:32px;font-size:9px;padding:4px 2px;} body.customer #items .item-actions{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center;} .customer-item-stock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-width:0;} .customer-item-stock > span{min-width:0;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:4px 2px;border:1px solid #aacdb9;border-radius:6px;background:#edf7f0;color:#24553c;font-size:9px;font-weight:600;white-space:nowrap;} .customer-item-stock > span.is-set{background:#a8d5b8;border-color:#82b897;color:#19472e;} /* A real vertical container prevents attachment previews overlapping prices. */ body.customer #items > li > .item-right-column{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:10px;min-width:0;align-self:stretch;} body.customer #items .item-right-column > .item-top-photo{flex:none;width:100%;} body.customer #items .item-right-column > .item-pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin: auto 0 0;min-width:0;} body.customer #items .item-right-column .price-box{min-width:0;min-height:0;padding:6px;} body.customer #items .item-right-column > .item-pricing{position:static;padding:0;border:0;background:transparent;box-sizing:border-box;flex-shrink:0;} body.customer #items > li > .customer-item-header{display:none;} body.customer #items > li > .item-details,body.customer #items > li > .item-right-column{grid-row:1;} body.customer #items > li > .item-note-row{grid-row:2;} body.customer #items > li > .item-actions{grid-row:3;} body.customer #items .item-details .editable-item-row:first-child label{white-space:nowrap;} #parts .supplier-pricing.hide-purchase{grid-template-columns:repeat(2,minmax(0,1fr));} #parts .supplier-pricing.hide-purchase > :first-child{display:none;} #parts .supplier-pricing.hide-purchase > :nth-child(2){grid-column:1;} #parts .supplier-pricing.hide-purchase > :nth-child(3){grid-column:2;} #supplier-project-summary > div:first-child input[type="checkbox"]{width:16px;height:16px;align-self:flex-end;cursor:pointer;} #supplier-project-summary > div:first-child, #supplier-project-summary > .commission-summary-toggle{position:relative;padding-bottom:30px;} #supplier-project-summary > div:first-child input[type="checkbox"], #supplier-project-summary > .commission-summary-toggle > input[type="checkbox"]{position:absolute;top:auto;width:16px;height:16px;margin:0;align-self:auto;} #supplier-project-summary > div:first-child input[type="checkbox"], #supplier-project-summary > .commission-summary-toggle > input[type="checkbox"]{left:auto;right:10px;bottom:8px;} #parts .part-actions > button.primary:not(:disabled){background:#176bc0;border-color:#176bc0;color:white;} #parts .part-actions > button:disabled{background:#e4edf5;border-color:#d0dce7;color:#8a9baa;opacity:1;} #parts .part-actions{grid-template-columns:max-content minmax(0,1fr);gap:10px;} #parts .part-edit-group{display:flex;gap:8px;padding:5px;border:1px solid #bdccdb;border-radius:9px;background:#f0f5fa;} #parts .part-edit-group > button{width:90px;height:36px;min-width:0;padding:7px 10px;font-size:13px;} #parts .part-edit-group > button.primary:not(:disabled){background:#176bc0;border-color:#176bc0;color:white;} #parts .part-edit-group > button:disabled{background:#e4edf5;border-color:#d0dce7;color:#8a9baa;opacity:1;} #parts .part-actions > .supplier-stock-state{box-sizing:border-box;padding:7px 5px;border:1px solid #aacdb9;border-radius:9px;background:#f0f8f3;} body.customer #items .item-actions-left{box-sizing:border-box;padding:5px;border:1px solid #bdccdb;border-radius:9px;background:#f0f5fa;} body.customer #items .customer-item-stock{box-sizing:border-box;padding:7px 5px;border:1px solid #aacdb9;border-radius:9px;background:#f0f8f3;} :is(#supplier-projects,#supplier-detail-card) .answer-project:not(:disabled), #answer-project:not(:disabled){background:#c74747;border-color:#b83b3b;color:#fff;} :is(#supplier-projects,#supplier-detail-card) .answer-project:not(:disabled):hover, #answer-project:not(:disabled):hover{background:#ae3737;border-color:#9c3030;} .close-project:not(:disabled),#detail-close:not(:disabled){background:#c74747!important;border-color:#b83b3b!important;color:#fff!important;} .close-project:not(:disabled):hover,#detail-close:not(:disabled):hover{background:#ae3737!important;border-color:#9c3030!important;} /* Keep chat controls visible; only the conversation scrolls. */ body dialog.project-chat-dialog[open]{display:flex;flex-direction:column;height:min(650px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);overflow:hidden;} body dialog.project-chat-dialog header{flex:0 0 auto;min-height:0;} body dialog.project-chat-dialog .project-chat-messages{flex:1 1 0;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;} body dialog.project-chat-dialog .project-chat-messages li{flex-shrink:0;} body dialog.project-chat-dialog form{flex:0 0 auto;min-height:0;margin:0;} body dialog.project-chat-dialog textarea{height:72px;min-height:40px;max-height:100px;resize:none;} body dialog.project-chat-dialog form [role="status"]{margin:0;} body dialog.project-chat-dialog form [role="status"]:empty{display:none;} @media(max-height:500px){body dialog.project-chat-dialog{padding:10px;}body dialog.project-chat-dialog textarea{height:44px;}body dialog.project-chat-dialog .project-chat-messages{margin:8px 0;}} body.customer #projects .project-list-quote.quote-ready > .quote-available-caption, body.customer .project-list-quote.quote-ready > .quote-available-caption{display:block!important;font-size:10px;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:normal;} .supplier-purchase-source label{display:flex;align-items:center;gap:8px;min-width:0;} .supplier-purchase-source .purchase-source-field{display:flex;align-items:center;flex:1;min-width:0;gap:5px;} .supplier-purchase-source .purchase-source-field input{flex:1;min-width:0;width:0;} .supplier-purchase-source .purchase-source-field a{flex:none;margin:0;padding:3px 7px;white-space:nowrap;font-size:18px;} .project-commission .commission-rate{display:flex;align-items:center;gap:4px;width:100%;margin:0 0 5px;font-size:12px;} .project-commission .commission-rate input{width:100%;min-width:0;padding:4px;height:29px;box-sizing:border-box;font-size:12px;} .project-commission .commission-rate input[type="number"]{-moz-appearance:textfield;appearance:textfield;} .project-commission .commission-rate input::-webkit-inner-spin-button, .project-commission .commission-rate input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} .supplier-pricing input[type="number"],.project-delivery-row input[type="number"]{-moz-appearance:textfield;appearance:textfield;} .supplier-pricing input[type="number"]::-webkit-inner-spin-button, .supplier-pricing input[type="number"]::-webkit-outer-spin-button, .project-delivery-row input[type="number"]::-webkit-inner-spin-button, .project-delivery-row input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} body.customer input[data-recommended-price],body.customer #new-recommended{-moz-appearance:textfield;appearance:textfield;} body.customer input[data-recommended-price]::-webkit-inner-spin-button, body.customer input[data-recommended-price]::-webkit-outer-spin-button, body.customer #new-recommended::-webkit-inner-spin-button, body.customer #new-recommended::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} body.customer .price-box.supplier-price-display{background:#edf7f0;border-color:#aacdb9;} body.customer .supplier-price-display .supplier-unit-caption{font-size:11px!important;font-weight:400!important;color:#567264;} body.customer .supplier-price-display .unit-price-section > strong, body.customer .supplier-price-display > #new-supplier-price{font-size:15px;font-weight:500;color:#567264;} body.customer .supplier-price-display .line-price-section > small{font-size:12px;font-weight:700;color:#24553c;} input[type="number"]{appearance:textfield;-moz-appearance:textfield;} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile){grid-template-columns:minmax(0,1fr) 28px;box-sizing:border-box;} :is(#quote-tile,.quote-tile) .quote-pdf-preview{grid-column:1 / -1;display:block;width:100%;border:1px solid #dcb6b6;border-radius:5px;background:white;box-sizing:border-box;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-saved,.quote-saved){grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-remove,.quote-remove){grid-column:2;position:static;align-self:center;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile){gap:4px;} :is(#quote-tile,.quote-tile) .quote-pdf-preview{height:105px;} :is(#quote-tile,.quote-tile) .quote-pdf-preview{pointer-events:none;user-select:none;} body.customer .project-list-quote.has-customer-preview{position:relative;overflow:hidden;} body.customer .project-list-quote .customer-quote-preview{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;user-select:none;z-index:1;background:white;} body.customer .project-list-quote.has-customer-preview .quote-preview-download{inset:0;z-index:2;display:block!important;opacity:0;margin:0;padding:0;} body.customer .project-list-quote.has-customer-preview .quote-preview-download:focus-visible{opacity:1;background:#ffffffbb;outline:2px solid #245d9f;} body.customer .project-list-quote.has-customer-preview .quote-preview-download{position:static;width:auto;height:auto;} body.customer .project-list-quote.has-customer-preview .quote-preview-download::after{content:"";position:absolute;inset:0;z-index:3;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile){position:relative;display:block;padding:0;margin-right:30px;border:0;background:transparent;box-shadow:none;overflow:visible;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile) .quote-pdf-preview{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:5px;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile) :is(#quote-saved,.quote-saved){position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:1;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile) :is(#quote-saved,.quote-saved):focus-visible{opacity:1;background:#ffffffcc;outline:2px solid #245d9f;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile) :is(#quote-remove,.quote-remove){position:absolute;left:calc(100% + 5px);right:auto;top:0;bottom:auto;margin:0;width:24px;height:24px;padding:0;z-index:2;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile){width:auto;max-width:210px;height:105px;} :is(#quote-form,.quote-form).has-pdf-preview :is(#quote-tile,.quote-tile) img.quote-pdf-preview{position:static;width:auto;height:105px;max-width:210px;object-fit:contain;display:block;} body.customer .project-list-quote img.customer-quote-preview{object-fit:contain;background:white;} /* Shared delivery start date and compact day input. */ .project-delivery-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;} .project-delivery-row .project-delivery-date{font-size:12px;white-space:nowrap;} .project-delivery-row label{margin-left:auto;gap:5px;white-space:nowrap;} .project-delivery-row input{flex:0 0 52px;width:52px;box-sizing:border-box;} .project-delivery-row label > span:first-of-type{margin-left:0;} .project-delivery-row small{flex-basis:100%;} main > .position-indicator[data-extra-workspace] {grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,640px);} .empty-workspace {min-height:240px;}