/* * LISA Harbor — consistency layer (presentation only). Loaded last. * * One vocabulary for every desktop module, so a button, a field or a table looks the same wherever it appears: * controls 28 px (default) and 26 px (inside tables, card headers, side panels) · radius 9 / 8 * fields 36 px, white with a 1 px border · search fields grey with an icon * tables header 12 px / 600 in sentence case, cells 13 px, padding 11 x 12 (editor tables 9 x 10) * panels radius 14, 1 px border, no shadow · item cards radius 12 * chips 22 px high, 12 px / 600, no capitals, one tone per meaning * labels 12.5 px / 500 in sentence case · no text below 12 px inside module pages * KPI strips one hairline grid with neutral values * * Mobile and printed documents are not touched (everything is scoped to desktop screens). */ @media screen and (min-width:761px){ /* 1. Buttons ------------------------------------------------------------------------------ */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn,.ui-btn-subtle,.state-btn,.state-btn-primary,.q-btn,.q-btn-primary,.mail-sync-btn,.corr-toggle-btn,.planner-action-btn):where(:not([class*="hb-"],.lisa-so-btn,.seg-btn,.qsg-step,.qsg-back,.qsg-save,.sp-btn)){ box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px; height:28px!important;min-height:28px!important;padding:0 14px!important;border-radius:9px!important; font:600 13px/1 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap; transition-property:background-color,border-color,color,box-shadow!important } /* compact: inside tables, card headers, list rows and dense side areas */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(td,th,.cr-section-head,.d-section-head,.task-item,.timeline-row,.planner-vessel-actions,.apm-row-co,.apm-row-vessel,.planner-vessel-row,.contact-card) :is(.ui-btn,.ui-btn-subtle,.state-btn,.q-btn,.planner-action-btn,.corr-toggle-btn):where(:not([class*="hb-"],.lisa-so-btn,.seg-btn,.qsg-step,.qsg-back,.qsg-save,.sp-btn)){ height:30px!important;min-height:30px!important;padding:0 12px!important;border-radius:8px!important;font-size:12.5px!important } /* secondary (the default look of every neutral button) */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.mail-sync-btn,.corr-toggle-btn,.planner-action-btn):where(:not([class*="hb-"],.lisa-so-btn,.seg-btn,.qsg-step,.qsg-back,.qsg-save,.sp-btn)){ border:1px solid var(--border2)!important;background:var(--bg2)!important;color:var(--text2)!important;box-shadow:none!important } :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.mail-sync-btn,.corr-toggle-btn,.planner-action-btn):where(:not([class*="hb-"],.lisa-so-btn,.seg-btn,.qsg-step,.qsg-back,.qsg-save,.sp-btn)):hover{background:var(--bg4)!important;color:var(--text)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.mail-sync-btn,.corr-toggle-btn,.planner-action-btn):disabled{opacity:.5;cursor:not-allowed} /* primary */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn:where(:not(.ui-btn-subtle)),.state-btn-primary,.q-btn-primary){border:1px solid var(--hb-accent)!important;background:var(--hb-accent)!important;color:#fff!important;box-shadow:none!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn:where(:not(.ui-btn-subtle)),.state-btn-primary,.q-btn-primary):hover{background:var(--hb-accent-hover)!important;border-color:var(--hb-accent-hover)!important;color:#fff!important} /* confirm / save / export: accent outline (old green and blue inline colours map here) */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.mail-sync-btn):where(:not([class*="hb-"],.lisa-so-btn)):is([style*="#22c55e"],[style*="#16a34a"],[style*="#86efac"],[style*="var(--green)"],[style*="var(--blue"],[style*="#2563eb"],[style*="#3b82f6"],[style*="#60a5fa"],[style*="#93c5fd"]), :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .mail-sync-btn{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--border2))!important;background:var(--bg2)!important;color:var(--hb-accent-ink)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.mail-sync-btn):where(:not([class*="hb-"],.lisa-so-btn)):is([style*="#22c55e"],[style*="#16a34a"],[style*="#86efac"],[style*="var(--green)"],[style*="var(--blue"],[style*="#2563eb"],[style*="#3b82f6"],[style*="#60a5fa"],[style*="#93c5fd"]):hover,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .mail-sync-btn:hover{background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} /* destructive: quiet red text, soft red on hover */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.ui-btn-danger):where(:not([class*="hb-"],.lisa-so-btn)):is([style*="#ef4444"],[style*="#dc2626"],[style*="#f87171"],[style*="#fca5a5"],[style*="var(--red)"]),:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .ui-btn-danger{border-color:transparent!important;background:transparent!important;color:var(--hb-danger)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.ui-btn-danger):where(:not([class*="hb-"],.lisa-so-btn)):is([style*="#ef4444"],[style*="#dc2626"],[style*="#f87171"],[style*="#fca5a5"],[style*="var(--red)"]):hover,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .ui-btn-danger:hover{background:var(--hb-danger-soft)!important;color:var(--hb-danger)!important} /* toggled-on buttons */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.filter-chip):where(:not([class*="hb-"],.seg-btn)).active,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn-subtle,.state-btn,.q-btn,.filter-chip):where(:not([class*="hb-"],.seg-btn))[aria-pressed="true"]{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--border2))!important;background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} /* icon-only buttons are squares of the control size */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.ui-btn,.ui-btn-subtle,.state-btn,.q-btn):where(:not([class*="hb-"],.lisa-so-btn))[aria-label]:where(:has(>svg:only-child,>i:only-child)){width:28px;min-width:28px!important;padding:0!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(td,th,.cr-section-head,.d-section-head,.task-item,.timeline-row,.planner-vessel-actions,.apm-row-co,.apm-row-vessel,.planner-vessel-row,.contact-card) :is(.ui-btn,.ui-btn-subtle,.state-btn,.q-btn):where(:not([class*="hb-"]))[aria-label]:where(:has(>svg:only-child,>i:only-child)){width:30px;min-width:30px!important;padding:0!important} /* 2. Fields ------------------------------------------------------------------------------- */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input:where(:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=button],[type=submit],[type=range],[type=color])),select,textarea,.q-input,.state-input,.state-select,.state-note):where(:not(td *,th *,.q-cell,.hb-status-select,.lisa-order-status-select)){ box-sizing:border-box;height:28px;min-height:28px;padding:0 10px;border:1px solid var(--border2)!important;border-radius:8px!important; background-color:var(--bg2);color:var(--text)!important;font:500 13px/1.2 var(--hb-font)!important;box-shadow:none } :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(select,.state-select):where(:not(td *,th *,.q-cell,.hb-status-select)){padding-right:30px} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(textarea,.state-note):where(:not(td *)){height:auto;min-height:76px;padding:9px 12px;line-height:1.5!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input,select,textarea,.q-input,.state-input,.state-select,.state-note):where(:not(td *,.q-cell,[type=checkbox],[type=radio])):hover{border-color:var(--text5)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input,select,textarea,.q-input,.state-input,.state-select,.state-note):where(:not([type=checkbox],[type=radio])):focus{border-color:var(--hb-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--hb-accent) 16%,transparent)!important;outline:0} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input,textarea)::placeholder{color:var(--text5);font-weight:500;opacity:1} /* search fields: grey fill, icon on the left, white once focused */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input[type=search],input[placeholder*="earch" i],input[placeholder^="Filter" i],input[id*="search" i]):where(:not([type=checkbox],td *,#apm-search,#ss-search,.cr-search,#contacts-search-input)){ padding-left:36px!important;border-color:transparent!important; background:var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7e86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px 50%!important } :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input[type=search],input[placeholder*="earch" i],input[placeholder^="Filter" i],input[id*="search" i]):where(:not([type=checkbox],td *,#apm-search,#ss-search,.cr-search,#contacts-search-input)):focus{background-color:var(--bg2)!important;border-color:var(--hb-accent)!important} /* planner and account search boxes carry their own icon: same box, same grey fill */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(#apm-search,#ss-search,.cr-search,#contacts-search-input,#cr-search-input){height:28px;min-height:28px;border-radius:9px!important;border:1px solid transparent!important;background-color:var(--bg3)!important;font:500 13.5px var(--hb-font)!important;color:var(--text)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(#apm-search,#ss-search,.cr-search,#contacts-search-input,#cr-search-input):focus{background-color:var(--bg2)!important;border-color:var(--hb-accent)!important} /* checkboxes and radios */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(input[type=checkbox],input[type=radio]){accent-color:var(--hb-accent)} /* form labels */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.state-field label,label.q-label,.q-label){color:var(--text4)!important;font:500 12.5px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} /* 3. Chips and badges --------------------------------------------------------------------- */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.lisa-declined-badge,.invoice-delivery-badge,.corr-count-pill,.ci-badge,.task-month-badge,.k-pill){ display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;height:22px;min-width:0;padding:0 10px!important;border:0!important;border-radius:999px!important; background:var(--bg4);color:var(--text3);font:600 12px/1 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap } :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .task-pill{display:inline-flex;align-items:center;gap:5px;padding:0!important;color:var(--text4);font:500 12.5px var(--hb-font)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.lisa-declined-badge,.invoice-delivery-badge,.corr-count-pill,.ci-badge,.task-month-badge)[style*="#22c55e"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.invoice-delivery-badge,.task-month-badge)[style*="#16a34a"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.task-month-badge)[style*="var(--green)"]{background:var(--hb-ok-soft)!important;color:var(--hb-ok)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.lisa-declined-badge,.corr-count-pill,.task-month-badge)[style*="#ef4444"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.lisa-declined-badge,.task-month-badge)[style*="#dc2626"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .lisa-declined-badge,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .task-month-badge.overdue{background:var(--hb-danger-soft)!important;color:var(--hb-danger)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill,.task-month-badge)[style*="#f59e0b"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.task-month-badge)[style*="#f97316"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.task-month-badge)[style*="#d97706"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .task-month-badge.today{background:var(--hb-warn-soft)!important;color:var(--hb-warn)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill,.task-month-badge)[style*="#3b82f6"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.task-month-badge)[style*="#2563eb"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill)[style*="var(--blue"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.invoice-delivery-badge),:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .task-month-badge.other{background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill)[style*="#a78bfa"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill)[style*="#8b5cf6"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill)[style*="#a855f7"],:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.pill,.corr-count-pill)[style*="#7c3aed"]{background:color-mix(in srgb,var(--hb-violet) 14%,var(--bg2))!important;color:var(--hb-violet)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .lisa-qio-purchase-note{margin-top:2px;color:var(--hb-danger)!important;font:600 12px var(--hb-font)!important;text-transform:none!important;letter-spacing:0!important} /* 4. Tables -------------------------------------------------------------------------------- */ #app :where(#view-company,#view-vessel,#view-contacts,#view-quarterly,#view-purchases,#view-installed,#view-addresses,#view-invoiceregister,#view-creditnotes,#view-insights,#view-settings,#view-meeting,#view-apm,#view-ss,#view-top10,#view-contactintelligence,#view-tasks,#view-timeline) table:where(:not(.hb-items table)) th{ padding:11px 12px!important;background:var(--bg3);color:var(--text4)!important;font:600 12px/1.3 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important } #app :where(#view-company,#view-vessel,#view-contacts,#view-quarterly,#view-purchases,#view-installed,#view-addresses,#view-invoiceregister,#view-creditnotes,#view-insights,#view-settings,#view-meeting,#view-apm,#view-ss,#view-top10,#view-contactintelligence) table:where(:not(.hb-items table,.pur-sticky-table)) td{ padding:11px 12px!important;color:var(--text2);font-size:13px!important;line-height:1.4 } #app :is(#view-sauerpo,#view-orderconf,#view-proforma,#view-commercialinvoice) .hb-items th{padding:11px 10px!important} #app #view-purchases #pur-table td,#app #view-purchases .pur-sticky-table th{padding:11px 12px!important} #app :is(#view-company,#view-vessel,#view-quarterly,#view-contacts) td strong,#app :is(#view-company,#view-vessel) td[style*="font-weight:700"]{font-weight:650} /* 5. Labels and the 12 px floor inside module pages ----------------------------------------- */ :is(#view-company,#view-vessel,#view-contacts,#view-apm,#view-ss,#view-tasks,#view-mail,#view-timeline,#view-quarterly,#view-meeting,#view-settings,#view-purchases,#view-invoiceregister,#view-creditnotes,#view-installed,#view-addresses,#view-sauerpo,#view-orderconf,#view-proforma,#view-commercialinvoice) :is([style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"],[style*="font-size:11.5px"]):where(:not(button,.ui-btn,.ui-btn-subtle)){font-size:12px!important} :is(#view-company,#view-vessel,#view-contacts,#view-apm,#view-ss,#view-tasks,#view-mail,#view-timeline,#view-quarterly,#view-meeting,#view-purchases,#view-invoiceregister,#view-creditnotes,#view-installed,#view-addresses) [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important} :is(#view-company,#view-vessel,#view-contacts,#view-apm,#view-ss,#view-tasks,#view-mail,#view-timeline) [style*="Space Mono"],#view-apm *,#view-ss *{font-family:var(--hb-font)!important} #app :is(.task-kpi-label,.task-month-weekhead,.task-col-title,.home-card-title,.contact-kpi-label,.vessel-stat-label,.cr-kpi-sub){font:500 12.5px/1.3 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--text4)!important} #app :is(.vessel-stat-val,.task-day-count,.task-section-count,.task-overdue-count,.task-month-weekno,.task-month-num){font-family:var(--hb-font)!important} /* 6. Segmented controls: one of N ------------------------------------------------------------ */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.seg-ctrl,.mail-filter-tabs){display:inline-flex;align-items:center;gap:2px;padding:3px!important;border:0!important;border-radius:10px!important;background:var(--bg4)!important;overflow:visible!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.seg-btn,.mail-filter-tabs>button){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px!important;min-height:30px!important;padding:0 12px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--text4)!important;font:600 12.5px/1 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;white-space:nowrap;cursor:pointer} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.seg-btn,.mail-filter-tabs>button):hover{color:var(--text)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.seg-btn.active,.seg-btn[aria-pressed="true"],.seg-btn[style*="background:var(--blue2)"],.mail-filter-tabs>button.active){background:var(--bg2)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(17,37,45,.14)!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .mail-filter-tabs span{margin-left:2px;font:600 12px var(--hb-font)!important;color:var(--text5)} /* 7. KPI strips: one hairline grid, neutral values, no coloured dots -------------------------- */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-kpi-label::before,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .hb-kpi>div:first-child::before{content:none!important;display:none!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-kpi-label,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .hb-kpi>div:first-child{gap:0!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-section-body:has(>.cr-kpis:only-child),:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-section-body:has(>.cr-kpis:first-child:last-child){padding:0!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-section-body>.cr-kpis:first-child:last-child{border:0!important;border-radius:0!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-kpi-val{color:var(--text)!important;font:700 24px/1.15 var(--hb-font)!important;letter-spacing:-.03em!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .cr-kpi-sub{margin-top:4px;color:var(--text5)!important} /* 8. Page frame of the legacy pages: same left edge, lead line instead of a repeated title ---------- */ #app :is(#apm-search,#ss-search){width:300px!important;padding:0 40px 0 36px!important} #app :is(#apm-search-count,#ss-search-count){right:12px!important;color:var(--text5)!important;font:500 12px var(--hb-font)!important} /* planner KPI cards -> one strip */ /* cycle bar */ /* section heading + the two summary panels */ /* company rows and their vessel lists */ /* survey planner */ #app .dpo-ring{background:conic-gradient(var(--hb-accent) var(--dpo-progress),var(--border) 0)!important} #app .dpo-ring>span{color:var(--hb-accent-ink)!important;font:700 11px var(--hb-font)!important} #app .dpo-ring:before{background:var(--bg2)!important} /* 9. Tasks --------------------------------------------------------------------------------- */ #app .task-shell{max-width:none!important;margin:0!important;padding:8px 0 40px!important;gap:16px!important} #app .home-card-title{margin-bottom:14px!important} /* 10. Mail --------------------------------------------------------------------------------- */ #app .mail-inbox{padding:8px 0 20px!important;gap:14px} #app .mail-inbox-title{display:none} #app .mail-inbox-sub{margin:0!important;color:var(--text4)!important;font:500 14px/1.5 var(--hb-font)!important} #app .mail-inbox-tools{gap:12px!important} #app #view-mail .mail-filter-tabs{overflow-x:auto!important} #app #view-mail :is(.mail-list,.mail-preview-panel){border-radius:0!important;background:var(--bg2)!important;box-shadow:none!important} #app #view-mail .mail-preview-actions .mail-reply-menu-btn{border-color:var(--hb-accent)!important;background:var(--hb-accent)!important;color:#fff!important} #app #view-mail .mail-preview-actions .mail-reply-menu-btn:hover{border-color:var(--hb-accent-hover)!important;background:var(--hb-accent-hover)!important;color:#fff!important} #app #view-mail .mail-preview-actions .ui-btn-subtle.danger{border-color:transparent!important;background:transparent!important;color:var(--hb-danger)!important} #app #view-mail .mail-preview-actions .ui-btn-subtle.danger:hover{background:var(--hb-danger-soft)!important;color:var(--hb-danger)!important} .mail-reply-menu{min-width:160px!important;border-color:var(--border)!important;border-radius:10px!important;box-shadow:var(--hb-shadow-pop)!important;padding:4px!important} .mail-reply-menu button{height:32px;gap:9px!important;padding:0 10px!important;border-radius:7px!important;font:500 13px var(--hb-font)!important} .mail-reply-menu button:hover{color:var(--text)!important} .mail-reply-menu :is(i,svg){width:14px!important;height:14px!important;color:var(--text4)} #app .mail-reply-menu-btn :is(i[data-lucide="chevron-down"],svg.lucide-chevron-down){width:13px;height:13px;margin-left:-2px} @container mailpane (max-width: 640px){ #app #view-mail .mail-preview-actions .mail-action-link{font-size:0!important;gap:0!important;width:28px;padding:0!important} } @container mailpane (max-width: 440px){ #app #view-mail .mail-preview-actions .ui-btn-subtle{font-size:0!important;gap:0!important;padding:0 8px!important;min-width:28px} #app #view-mail .mail-preview-actions .mail-reply-menu-btn{gap:2px!important} } /* 11. Timeline ----------------------------------------------------------------------------- */ #view-timeline .control-page{max-width:none!important;padding:8px 0 40px!important} #view-timeline .control-title{display:none} #view-timeline .control-sub{margin:0 0 18px!important;color:var(--text4)!important;font:500 14px/1.5 var(--hb-font)!important} #view-timeline .control-panel{margin-top:0!important;border:1px solid var(--border)!important;border-radius:14px!important;background:var(--bg2)!important;box-shadow:none!important;overflow:hidden} #view-timeline .timeline-row{padding:14px 20px!important;border-bottom:1px solid var(--row-border)!important} #view-timeline .timeline-row:last-child{border-bottom:0!important} #view-timeline .timeline-row:hover{background:var(--bg3)} #view-timeline .timeline-row :is(strong,.timeline-title){color:var(--text)!important;font:650 14px var(--hb-font)!important} /* 12. Accounts, fleet and contacts ----------------------------------------------------------- */ #app .cr-selector{gap:12px!important} #app .cr-selector>span{font:500 13px var(--hb-font)!important} #app .contact-card{border-radius:12px!important} #app .contact-card .contact-name{font:650 14px var(--hb-font)!important} #app .contact-card a,#app .cr-body a:where(:not(.ui-btn,.ui-btn-subtle,.hb-btn)){color:var(--hb-accent-ink)} #view-contacts #contacts-detail h2,#view-contacts #contacts-detail .contact-detail-name,#view-contacts .contact-detail-head>div:first-child>div:first-child{color:var(--text)!important;font:700 26px/1.15 var(--hb-font)!important;letter-spacing:-.03em!important} :is(#view-company,#view-vessel) .hb-entity-head>div:first-child>div:first-child{font-family:var(--hb-font)!important} #app .vessel-card{border-radius:12px!important} #app .vessel-stat-label{color:var(--text5)!important} #app .vessel-stat-val{color:var(--text)!important;font-weight:650!important} /* KPI grids: hairlines painted by the cells, so a short last row never shows a grey block */ :is(#app,.side-panel) .cr-kpis{display:grid!important;gap:0!important;overflow:hidden;border:1px solid var(--border)!important;border-radius:14px!important;background:var(--bg2)!important} :is(#app,.side-panel) .cr-kpi{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:1px 0 0 var(--border),0 1px 0 var(--border)!important} /* inside a card the strip runs edge to edge: no box inside a box */ :is(#app,.side-panel) .cr-section-body>.cr-kpis:first-child:last-child{border:0!important;border-radius:0!important} :is(#app,.side-panel) .cr-section-body:where(:not(:has(>.cr-kpis:only-child)))>.cr-kpis{margin-left:-24px;margin-right:-24px;border-left:0!important;border-right:0!important;border-radius:0!important} :is(#app,.side-panel) .cr-section-body:where(:not(:has(>.cr-kpis:only-child)))>.cr-kpis:first-child{margin-top:-20px;border-top:0!important} :is(#app,.side-panel) .cr-section-body:where(:not(:has(>.cr-kpis:only-child)))>.cr-kpis:first-child+*{margin-top:20px} /* contacts: same page title and links as every other page */ #view-contacts .cr-selector>span:first-child{font:500 13px var(--hb-font)!important;color:var(--text4)!important} #view-contacts .cr-body>div:first-child{align-items:center!important} #view-contacts .cr-body>div:first-child>div:first-child>div:first-child{color:var(--text)!important;font:700 26px/1.15 var(--hb-font)!important;letter-spacing:-.03em!important} #view-contacts .cr-body>div:first-child>div:first-child>div:nth-child(2){margin-top:6px!important;color:var(--text4)!important;font:500 13.5px var(--hb-font)!important} :is(#view-contacts,#view-company,#view-vessel) a:where(:not(.ui-btn,.ui-btn-subtle,.hb-btn,.lisa-so-btn)){color:var(--hb-accent-ink)!important;font-weight:600;text-decoration:none!important} :is(#view-contacts,#view-company,#view-vessel) a:where(:not(.ui-btn,.ui-btn-subtle,.hb-btn,.lisa-so-btn)):hover{text-decoration:underline!important} #view-contacts .cr-section-head>span[style*="margin-left:auto"]{color:var(--text)!important;font:650 13px var(--hb-font)!important} #view-contacts .contact-card.active .contact-name{color:var(--hb-accent-ink)!important} /* count badges next to tab and section names: one shape everywhere */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.hb-q-tab,.hb-outline-item,.hb-snav-item) em,#hb-dv-tabs em,#hb-detail-tabs em{display:inline-flex!important;align-items:center;justify-content:center;height:20px;min-width:20px;padding:0 7px!important;border-radius:999px!important;background:var(--bg4)!important;color:var(--text4)!important;font:600 12px/1 var(--hb-font)!important;font-style:normal;letter-spacing:0!important} :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .hb-q-tab.is-active em,:is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) .hb-q-tab[aria-selected="true"] em{background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} /* credit notes: the free-form credit button is a normal toolbar button */ :is(#app,.side-panel,#spotlight-overlay,body>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])) :is(.hb-dochead-tools,.hb-dochead-tools :is(button,.ui-btn-subtle)){height:28px!important;min-height:28px!important;padding:0 14px!important;border-radius:9px!important;font:600 13px/1 var(--hb-font)!important;letter-spacing:0!important} /* planner company status: the ring and its counters */ #app .dpo-company-status,#app span:has(>.dpo-ring)+*{font-family:var(--hb-font)!important} /* accounts: vessel cards and survey badges */ #app .vessel-stat-val{font-size:13px!important} #app .vessel-stat-label{font-size:12px!important} #app .survey-badge-label{font:600 12px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} /* the step number inside Quote Studio's stepper */ #view-quote .qsg-step-num,#view-quote .qsg-step>span:first-child{font-size:12.5px!important} /* toolbar buttons that still carry an old inline green: accent outline like every other "confirm" button */ #app button.hb-dochead-tools[style*="#16a34a"]{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--border2))!important;background:var(--bg2)!important;color:var(--hb-accent-ink)!important} #app button.hb-dochead-tools[style*="#16a34a"]:hover{background:var(--hb-accent-soft)!important} /* 13. Dialogs and drawers ------------------------------------------------------------------- */ /* the :not(#hb-x) prefix only raises specificity above the shared #app-level rules */ body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])>div:is([style*="width:min("],[style*="width: min("]){border:1px solid var(--border)!important;border-radius:14px!important;background:var(--bg2)!important;box-shadow:var(--hb-shadow-pop)!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])>div:is([style*="width:min("],[style*="width: min("]):where(:not([style*="max-height"])){padding:22px 24px 20px!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"])>div:is([style*="width:min("],[style*="width: min("])>div:first-child:is([style*="font-weight:700"],[style*="font-weight:800"],[style*="font-weight:900"]){margin-bottom:12px!important;color:var(--text)!important;font:650 16px/1.3 var(--hb-font)!important;letter-spacing:-.01em!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is([style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"]):where(:not(button)){font-size:12.5px!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is(label,[style*="color:var(--muted)"]):where(:not(button,option)){color:var(--text4)!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is(button,.ui-btn-subtle):is([style*="#22c55e"],[style*="#16a34a"],[style*="#86efac"]):where(:not([class*="hb-"])){background:var(--hb-accent)!important;border-color:var(--hb-accent)!important;color:#fff!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is(button,.ui-btn-subtle):is([style*="#22c55e"],[style*="#16a34a"],[style*="#86efac"]):where(:not([class*="hb-"])):hover{background:var(--hb-accent-hover)!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is(button,.ui-btn-subtle):is([style*="#ef4444"],[style*="#dc2626"]):where(:not([class*="hb-"])){border-color:color-mix(in srgb,var(--hb-danger) 40%,var(--border2))!important;background:var(--bg2)!important;color:var(--hb-danger)!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) :is(button,.ui-btn-subtle):is([style*="#ef4444"],[style*="#dc2626"]):where(:not([class*="hb-"])):hover{background:var(--hb-danger-soft)!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) span[style*="border-radius:999px"]{display:inline-flex;align-items:center;height:22px;padding:0 10px!important;border:0!important;border-radius:999px!important;background:var(--bg4)!important;color:var(--text3)!important;font:600 12px/1 var(--hb-font)!important;letter-spacing:0!important} body:not(#hb-x)>div:is([style*="position:fixed"],[style*="position: fixed"]):is([style*="inset:0"],[style*="inset: 0"]) span[style*="border-radius:999px"]:is([style*="#2563eb"],[style*="var(--blue"],[style*="#1d4ed8"],[style*="#3b82f6"]){background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} /* side drawers (account workspace, vessel view, units, outreach logs, purchases) */ body:not(#hb-x) .side-panel>div:first-child{box-sizing:border-box;min-height:68px;padding:14px 24px!important;border-bottom:1px solid var(--border)!important;background:var(--bg2)!important} body:not(#hb-x) .side-panel>div:first-child :is([id$="-side-type"],span[style*="text-transform:uppercase"]){color:var(--text5)!important;font:500 12.5px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} body:not(#hb-x) .side-panel>div:first-child [id$="-side-title"],body:not(#hb-x) .side-panel>div:first-child>div:first-child>span[style*="text-transform:uppercase"]{color:var(--text)!important;font:650 18px/1.25 var(--hb-font)!important;letter-spacing:-.01em!important} body:not(#hb-x) .side-panel>div:first-child>button:last-child{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;border:1px solid var(--border2)!important;border-radius:8px!important;background:var(--bg2)!important;color:var(--text3)!important} body:not(#hb-x) .side-panel>div:first-child>button:last-child:hover{background:var(--bg4)!important;color:var(--text)!important} body:not(#hb-x) .side-panel [id$="-side-body"]{padding:24px!important} body:not(#hb-x) .side-panel :is([style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"]):where(:not(button)){font-size:12px!important} body:not(#hb-x) .side-panel [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important} body:not(#hb-x) .side-panel .state-meta{color:var(--text5)!important;font:500 12px var(--hb-font)!important} body:not(#hb-x) .side-panel .workspace-entry-row{align-items:end;gap:12px;grid-template-columns:170px minmax(0,1fr) auto} body:not(#hb-x) .side-panel .workspace-entry-row>.state-field{align-self:end} body:not(#hb-x) .side-panel :is(.workspace-entry-date,.workspace-entry-comment,.workspace-entry-btn){height:28px!important;min-height:28px!important} body:not(#hb-x) .side-panel .workspace-entry-comment{padding:8px 12px!important;line-height:1.35!important} body:not(#hb-x) .side-panel .workspace-entry-btn{padding:0 16px!important} /* Quote Studio: the unit row number */ #view-quote #q-units-wrap [style*="width:18px"][style*="text-align:center"]{width:22px!important;color:var(--text5)!important;font:500 12px var(--hb-font)!important} /* bar tracks painted with a fixed light colour by the planner become neutral tracks in both themes */ /* 14. Page headers: the module name is shown once, in the top bar ------------------------------------- Every page then starts the same way: a lead line on the left and its actions on the right. The headings stay in the DOM for screen readers. */ :is(.hb-dochead-title,.quote-page-eyebrow,.quote-page-title,.prc-heading>div>span:first-child,.prc-heading h2,.ci-eyebrow,.ci-title,.hb-sig-title, #view-quarterly>div>div:first-child>span:first-child,#view-meeting #meeting-print-wrap>div:first-child>div:first-child>div:first-child){ position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important } /* documents: tools on the right, tabs underneath */ #app .hb-dochead{grid-template-areas:'tools tools' 'tabs tabs'!important;margin-bottom:16px!important} #app .hb-dochead-tools{justify-content:flex-end} #app .hb-dochead:not(:has(.hb-dochead-tools)){grid-template-areas:'tabs tabs'!important} /* Quote Studio: reference first, actions after it */ #view-quote .quote-page-head{gap:12px 20px!important;margin-bottom:16px!important} /* reports: lead line and actions on one row */ #view-top10 .prc-heading{align-items:center!important;margin:0 0 14px!important} #view-top10 .prc-heading p{margin:0!important;color:var(--text4)!important;font:500 14px/1.5 var(--hb-font)!important} #view-top10 .prc-tabs{margin-top:0!important} .ci-topbar{align-items:center!important} .ci-subtitle{margin-top:0!important} #view-quarterly>div>div:first-child{justify-content:flex-end!important;margin-bottom:16px!important} #view-meeting #meeting-print-wrap>div:first-child{margin-bottom:16px!important} #view-meeting #meeting-print-wrap>div:first-child>div:first-child>div:nth-child(2){margin:0!important;color:var(--text4)!important;font:500 14px/1.5 var(--hb-font)!important} #view-insights .hb-sig-head{align-items:center!important;margin-bottom:16px!important} #view-insights .hb-sig-lead{margin:0!important;font:500 14px/1.5 var(--hb-font)!important} /* same content width on every page: the tools stay on the right edge, long text keeps a readable measure */ #app .hb-dochead-tools{justify-self:end} #view-meeting #meeting-print-wrap{max-width:none!important} #view-meeting .mtg-section>div:nth-child(2){max-width:96ch} #view-insights>div{max-width:none!important} #view-insights .hb-sig-lead{max-width:72ch} /* 15. Refinement pass -------------------------------------------------------------------------- */ /* top bar: the two month figures carry their label again, on two compact lines */ #app.lisa-atlas-shell .h-month-kpi{display:grid!important;grid-template-columns:auto auto;grid-template-areas:'label label' 'value trend';align-content:center;justify-content:start;column-gap:6px;row-gap:1px;height:40px!important;padding:0 16px!important} #app.lisa-atlas-shell .h-month-kpi>.h-month-kpi-label{grid-area:label} #app.lisa-atlas-shell .h-month-kpi>.h-month-kpi-value{grid-area:value} #app.lisa-atlas-shell .h-month-kpi>.h-month-kpi-trend{grid-area:trend;position:static!important;transform:none!important;top:auto!important;margin:0!important} #app.lisa-atlas-shell .h-month-kpi-label{display:block!important;grid-column:1 / -1;color:var(--text5)!important;font:500 12px/1.15 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} #app.lisa-atlas-shell .h-month-kpi-value{font:650 14.5px/1.15 var(--hb-font)!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums} #app.lisa-atlas-shell .h-month-kpi-trend{align-self:center;font:600 11.5px var(--hb-font)!important} #app.lisa-atlas-shell .h-month-kpi-trend svg{width:12px;height:12px} #app.lisa-atlas-shell .h-month-kpi:hover{background:var(--bg3)!important} /* board toolbar: a real chevron on the Metrics toggle */ #app .deals-view-pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--bg4);color:var(--text4);font:600 11.5px/1 var(--hb-font)!important} #app .deals-view-btn.active .deals-view-pending-count{background:var(--hb-accent-soft);color:var(--hb-accent-ink)} /* board cards stay readable when the deal panel narrows the columns */ #view-pipeline .k-col{container-type:inline-size} @container (max-width:250px){ #view-pipeline .k-card{padding-left:12px!important;padding-right:12px!important} #view-pipeline .k-company{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3} #view-pipeline .k-meta-row{letter-spacing:0!important} #view-pipeline .k-amount{font-size:14px!important} #view-pipeline .k-card{column-gap:6px!important} #view-pipeline .k-task-footer{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;margin-left:-12px!important;margin-right:-12px!important;padding-left:12px!important;padding-right:12px!important} #view-pipeline .k-task-footer span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3} } /* deal panel: no empty counters, no empty tabs, the record's own typeface everywhere */ #hb-detail-tabs em:empty{display:none!important} #hb-detail-tabs button[data-hb-tab='items'] em:empty{display:inline-flex!important;visibility:hidden} #hb-detail-tabs button[data-hb-empty]{display:none!important} #detail :is(.li-partno,.li-qty,.li-price,.li-total,.li-discount,.li-footer-total){font-family:var(--hb-font)!important;font-variant-numeric:tabular-nums} #detail .li-table{font-size:13px!important} #detail .li-table th{padding:10px 10px!important;color:var(--text4)!important;font:600 12px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} #detail .li-table td{padding:10px 10px!important;vertical-align:middle} #detail .li-table tbody tr:hover{box-shadow:none!important} #detail .li-partno{color:var(--text)!important;font-weight:650} #detail .li-total{color:var(--text)!important} #detail .li-discount{font-size:12.5px!important;color:var(--text4)!important} #detail .li-footer{padding:12px 12px!important} #detail .li-footer-label{color:var(--text4)!important;font:500 12.5px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} #detail .li-footer-total{color:var(--text)!important;font:700 15px var(--hb-font)!important} #detail #detail-body [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important} #detail #detail-body :is([style*="font-size:9px"],[style*="font-size:10px"]){font-size:12px!important} #detail #detail-body :is([style*="font-size:11px"]):where(:not(button)){font-size:12.5px!important} #detail #detail-body [style*="Space Mono"]{font-family:var(--hb-font)!important} #detail #detail-body .d-section-card select:where(:not(.q-cell)){height:28px;min-height:28px;padding:0 30px 0 12px!important;border:1px solid var(--border2)!important;border-radius:9px!important;font:500 13.5px var(--hb-font)!important} /* Quote Studio line items: part numbers and status read in full, description takes the rest */ #view-quote table[aria-label="Quote line items"] col:nth-child(1){width:32px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(2){width:214px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(4){width:108px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(5){width:54px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(6){width:76px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(7){width:88px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(8){width:72px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(9){width:58px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(10){width:118px!important} #view-quote table[aria-label="Quote line items"] col:nth-child(11){width:96px!important} #view-quote table[aria-label="Quote line items"] thead th:nth-child(12),#view-quote table[aria-label="Quote line items"] tbody td:nth-child(12){width:40px!important} #view-quote table[aria-label="Quote line items"] thead th:nth-child(n+5):nth-child(-n+9){padding-left:6px!important;padding-right:6px!important;text-align:center} #view-quote table[aria-label="Quote line items"] thead th:nth-child(1),#view-quote table[aria-label="Quote line items"] tbody td:nth-child(1){padding-left:8px!important;padding-right:0!important} #view-quote table[aria-label="Quote line items"] td:nth-child(2) input[data-quote-field="partNo"]{min-width:96px} #view-quote table[aria-label="Quote line items"] select.lisa-order-status-select{min-width:0!important} /* row delete: a quiet icon that turns red on hover (the accessible name stays "Delete") */ #view-quote table[aria-label="Quote line items"] td:nth-child(12) button{width:30px!important;min-width:30px!important;height:30px!important;padding:0!important;font-size:0!important;position:relative} #view-quote table[aria-label="Quote line items"] td:nth-child(12) button::before{content:'';position:absolute;inset:0;margin:auto;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") center/15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") center/15px no-repeat} /* commercial documents: an empty line-item table says so */ #app .hb-items:has(tbody:empty)::after{content:'No line items on this document yet.';display:block;padding:28px 20px;color:var(--text5);font:500 13.5px var(--hb-font);text-align:center} /* document queues: the document number never breaks; a long status chip shortens instead */ #app .hb-q-list>button>div:nth-child(1)>span:first-child{flex:none;white-space:nowrap} #app .hb-q-list>button>div:nth-child(1)>span:last-child:not(:first-child){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app .hb-q-list>button>div:nth-child(1)>span:last-child:has(span){flex:0 1 auto;min-width:0} #app .hb-q-list>button>div:nth-child(1)>span:last-child:has(span)>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* inline calendar triggers inside date fields stay a quiet icon wherever the field sits */ :is(#app,#detail,#deal-view-overlay,.side-panel) .icon-btn-inline{width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--text5)!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .icon-btn-inline:hover{color:var(--hb-accent-ink)!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .icon-btn-inline svg{width:15px;height:15px} /* small status tags (priority, state) use the shared chip */ :is(#app,#detail,#deal-view-overlay,.side-panel) .state-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px!important;border:0!important;border-radius:999px!important;background:var(--bg4)!important;color:var(--text3)!important;font:600 12px/1 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .state-tag:is(.blue,.info){background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .state-tag:is(.green,.ok,.success){background:var(--hb-ok-soft)!important;color:var(--hb-ok)!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .state-tag:is(.amber,.warn,.orange){background:var(--hb-warn-soft)!important;color:var(--hb-warn)!important} :is(#app,#detail,#deal-view-overlay,.side-panel) .state-tag:is(.red,.danger){background:var(--hb-danger-soft)!important;color:var(--hb-danger)!important} /* registers: emphasis is weight 600, never black-heavy */ #app .hb-regtable td:is([style*="font-weight:800"],[style*="font-weight:900"],[style*="font-weight:950"]),#app .hb-regtable td :is(strong,b){font-weight:600!important} #app .hb-regbar-filters :is(input,select){font-weight:500!important} /* Quote Studio header: reference on its own line, tools on the next, at every width (the narrow-container rule used to turn the row into a column and give the title a 300 px height) */ #view-quote .quote-studio-guided .quote-page-head{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;align-content:flex-start!important;height:auto!important} #view-quote .quote-studio-guided .quote-page-title-wrap{flex:1 1 100%!important;width:100%;height:auto!important;min-width:0!important} #view-quote .quote-studio-guided .quote-page-actions{flex:1 1 100%!important;width:100%!important;justify-content:flex-start!important} #view-quote .quote-studio-guided .quote-page-actions>:last-child{margin-left:0} /* Quote Studio uses one bottom action bar with the existing live totals mirror. */ #app[data-view='quote'] .content{display:flex!important;flex-direction:column;padding-bottom:0!important} #app[data-view='quote'] #view-quote.quote-studio-guided-active{display:flex!important;flex:1 0 auto;flex-direction:column} #app:not([data-view='quote']) #view-quote{display:none!important} #view-quote .quote-studio-guided{display:flex!important;flex:1 0 auto;flex-direction:column;align-items:stretch!important;padding-bottom:0!important} #view-quote .qsg-workspace{flex:1 0 auto;min-width:0;width:100%} #view-quote .qsg-footer{ bottom:0!important;width:100%!important;gap:clamp(16px,2vw,30px)!important;min-height:74px!important;margin-top:auto!important;padding:10px 22px!important; border:1px solid #24424e!important;border-radius:0!important;background:#102630!important;color:#fff!important; box-shadow:0 -8px 24px rgba(12,30,39,.2)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important } #view-quote .qsg-footer-progress{display:none!important} #view-quote .hb-qtotals{justify-content:flex-start;gap:clamp(16px,1.8vw,30px)} #view-quote .hb-qtotal{padding:0!important;border:0!important} #view-quote .hb-qtotal-label{color:#a2b5bc!important;font-size:11px!important} #view-quote .hb-qtotal-value{color:#fff!important;font-size:16px!important;font-weight:700!important} #view-quote .hb-qtotal.is-total .hb-qtotal-value{color:#fff!important;font-size:20px!important;font-weight:750!important} #view-quote .qsg-footer-actions>button{border-color:#294753!important;background:#193540!important;color:#fff!important} #view-quote .qsg-footer-actions>.qsg-back{border-color:transparent!important;background:transparent!important;color:#d4e0e2!important} #view-quote .qsg-footer-actions>.qsg-save{border-color:#294753!important;background:#193540!important;color:#fff!important} #view-quote .quote-studio-guided .qsg-footer #q-save-dashboard{border-color:#294753!important;background:#193540!important;color:#fff!important} #view-quote .qsg-footer-actions>.qsg-next,#view-quote .qsg-footer-actions>.qsg-print{border-color:#0f7e76!important;background:#0f7e76!important;color:#fff!important} #view-quote .qsg-footer-actions>button:hover{background:#254551!important} #view-quote .qsg-footer-actions>.qsg-next:hover,#view-quote .qsg-footer-actions>.qsg-print:hover{background:#0b6a64!important} @media (max-width:1379px){ #view-quote .qsg-footer{gap:14px!important;padding-left:18px!important} #view-quote .qsg-footer-hint{display:none!important} #view-quote .qsg-footer-progress{min-width:0!important} #view-quote .hb-qtotal{padding:0 14px!important} #view-quote .hb-qtotal-value{font-size:14px!important} #view-quote .hb-qtotal.is-total .hb-qtotal-value{font-size:18px!important} } /* 16. Names are never cut off --------------------------------------------------------------------- Company, vessel and person names wrap onto a second, balanced line instead of ending in "...". */ #view-pipeline :is(.k-vessel,.k-company), #view-pipeline .k-task-footer span, #app .hb-q-list>button>div:nth-child(2), :is(#app,#detail,#deal-view-overlay,.side-panel) :where([style*="text-overflow:ellipsis"],[style*="text-overflow: ellipsis"]){ white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word;text-wrap:balance;line-height:1.3 } #view-pipeline .k-vessel{line-height:1.25!important} /* Deal View: the date picker icon inside the task form stays an icon, not a filled button */ #deal-view-overlay #deal-view-body .deal-view-inline-form button.icon-btn-inline{width:auto!important;height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--text5)!important} /* Deal View: "no score yet" sits in a quiet dashed ring instead of breaking over three lines */ #deal-view-body .deal-view-potential-empty{display:grid!important;place-items:center;width:78px;height:78px;box-sizing:border-box;padding:10px;border:2px dashed var(--border2);border-radius:50%;color:var(--text5)!important;font:600 12px/1.25 var(--hb-font)!important;text-align:center} /* Purchasing: long vessel names wrap inside their column */ /* 17. Deal panel action bar: colour follows the action, never the position -------------------------- (the bar gains SuperOffice and navigation buttons depending on context, so nth-of-type colouring painted "Open Vessel View" green, "Open Account View" red and left "Reopen deal" white on white) */ :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:nth-of-type(n){display:inline-flex;align-items:center;gap:7px;height:28px;min-height:28px;padding:0 14px;border:1px solid var(--border2)!important;border-radius:9px!important;background:var(--bg2)!important;color:var(--text2)!important;font:600 13px/1 var(--hb-font)!important;box-shadow:none!important;opacity:1} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:nth-of-type(n):hover{background:var(--bg4)!important;color:var(--text)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:nth-of-type(n) :is(img,svg,.lisa-so-logo){opacity:1!important;filter:none!important} /* primary: open the full deal workspace */ :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="openDealView"]{border-color:var(--hb-accent)!important;background:var(--hb-accent)!important;color:#fff!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="openDealView"]:hover{border-color:var(--hb-accent-hover)!important;background:var(--hb-accent-hover)!important;color:#fff!important} /* outcome: won / lost as soft tones, reopen as an accent outline */ :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailQuickMarkWon"]{border-color:color-mix(in srgb,var(--hb-ok) 32%,transparent)!important;background:var(--hb-ok-soft)!important;color:var(--hb-ok)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailQuickMarkWon"]:hover{background:color-mix(in srgb,var(--hb-ok) 18%,var(--bg2))!important;color:var(--hb-ok)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailQuickMarkLost"]{border-color:color-mix(in srgb,var(--hb-danger) 32%,transparent)!important;background:var(--hb-danger-soft)!important;color:var(--hb-danger)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailQuickMarkLost"]:hover{background:color-mix(in srgb,var(--hb-danger) 18%,var(--bg2))!important;color:var(--hb-danger)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailReopenDeal"]{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--border2))!important;background:var(--bg2)!important;color:var(--hb-accent-ink)!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button[onclick*="detailReopenDeal"]:hover{background:var(--hb-accent-soft)!important} /* SuperOffice: neutral button with its own logo; a missing link is flagged by a quiet red outline */ :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button.lisa-so-btn.lisa-so-missing-link{border-color:color-mix(in srgb,var(--hb-danger) 38%,var(--border2))!important} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button.lisa-so-btn .lisa-so-edit{height:20px;margin:0 -4px 0 4px;padding-left:8px;border-left:1px solid var(--border2);color:var(--text4);opacity:1} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button.lisa-so-btn .lisa-so-edit:hover{color:var(--text)} /* navigation to other views reads as a quieter secondary group */ :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:is([onclick^="goToVessel"],[onclick^="goToCompany"],[onclick^="switchView('table')"]){border-color:transparent!important;background:transparent!important;color:var(--text3)!important;padding:0 10px} :is(#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:is([onclick^="goToVessel"],[onclick^="goToCompany"],[onclick^="switchView('table')"]):hover{background:var(--bg4)!important;color:var(--text)!important} /* Deal panel actions, one row (Bogdan, 2026-10-12). Navigation (vessel, account, deals board) lives as icons in the panel header (.hb-go, moved there by lisa-desktop-panel-chrome.js); the footer keeps the actions: SuperOffice on the left; outcome, deal view and More on the right. Every label stays whole. Order follows the action, never the position, because the set changes by context. The doubled #detail outranks the generic section-17 rules above. */ #detail#detail>.d-top-actions.hb-docked{flex-wrap:nowrap;align-items:center;gap:6px;padding:10px 14px;min-width:0;container-type:inline-size} #detail#detail>.d-top-actions.hb-docked>button:nth-of-type(n){flex:0 0 auto;min-width:0;max-width:none;height:28px;min-height:28px;white-space:nowrap;overflow:visible;text-overflow:clip} :is(#detail#detail>.d-top-actions.hb-docked,#detail #detail-body .d-top-actions)>button:nth-of-type(n){padding:0 11px!important;gap:6px;font-size:12.5px!important} #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn{order:1} #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn>span:not(.lisa-so-edit){overflow:visible;text-overflow:clip} #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn .lisa-so-logo{width:14px!important;height:14px!important} #detail#detail>.d-top-actions.hb-docked>button[onclick^="openNewDealForm"]{order:2} #detail#detail>.d-top-actions.hb-docked>button:is([onclick*="detailQuickMarkWon"],[onclick*="detailQuickMarkLost"],[onclick*="detailReopenDeal"]){order:5} #detail#detail>.d-top-actions.hb-docked>button:is([onclick*="detailQuickMarkWon"],[onclick*="detailReopenDeal"]){margin-left:auto} #detail#detail>.d-top-actions.hb-docked>button[onclick*="openDealView"]{order:6} #detail#detail>.d-top-actions.hb-docked>div{order:7;flex:0 0 auto;margin-left:0!important} /* joined pairs: Update SO | Open SO (one logo for the pair) and Won | Lost */ #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn:has(+button.lisa-so-btn),#detail#detail>.d-top-actions.hb-docked>button[onclick*="detailQuickMarkWon"]:has(+button[onclick*="detailQuickMarkLost"]){border-top-right-radius:0!important;border-bottom-right-radius:0!important} #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn+button.lisa-so-btn,#detail#detail>.d-top-actions.hb-docked>button[onclick*="detailQuickMarkWon"]+button[onclick*="detailQuickMarkLost"]{margin-left:-7px;border-top-left-radius:0!important;border-bottom-left-radius:0!important} #detail#detail>.d-top-actions.hb-docked>button.lisa-so-btn+button.lisa-so-btn .lisa-so-logo{display:none!important} #detail#detail>.d-top-actions.hb-docked>button:hover{position:relative;z-index:1} #detail#detail>.d-top-actions.hb-docked>button:is([onclick*="detailQuickMarkWon"],[onclick*="detailQuickMarkLost"]){min-width:56px;justify-content:center} /* More: icon only (its label is the tooltip), same height as the rest */ #detail#detail>.d-top-actions.hb-docked>div>button{width:28px;height:28px!important;min-height:28px!important;padding:0!important;justify-content:center;white-space:nowrap} #detail#detail>.d-top-actions.hb-docked>div>button>span{display:none} #detail#detail>.d-top-actions.hb-docked>div>button svg{width:16px!important;height:16px!important} /* the narrowest panel (520 px) tightens the padding instead of cutting a label */ @container (max-width:500px){ #detail#detail>.d-top-actions.hb-docked>button:nth-of-type(n){padding:0 8px!important} } /* header navigation icons, styled like the previous/next deal buttons beside them */ #hb-detail-nav .hb-go{display:inline-flex;gap:2px;margin:0 10px 0 auto;padding-right:10px;border-right:1px solid var(--border)} #hb-detail-nav .hb-go:empty{display:none} #hb-detail-nav .hb-go>button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;padding:0!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--bg2)!important;color:var(--text3)!important;font-size:0!important;box-shadow:none!important;cursor:pointer} #hb-detail-nav .hb-go>button:hover{background:var(--bg4)!important;color:var(--text)!important} #hb-detail-nav .hb-go>button::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--hb-nav-icon) center/contain no-repeat;mask:var(--hb-nav-icon) center/contain no-repeat} #hb-detail-nav .hb-go>button[onclick^="goToVessel"]{--hb-nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.189V14'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76'/%3E%3Cpath d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1'/%3E%3C/svg%3E")} #hb-detail-nav .hb-go>button[onclick^="goToCompany"]{--hb-nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E")} #hb-detail-nav .hb-go>button[onclick^="switchView('table')"]{--hb-nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v11'/%3E%3Cpath d='M12 5v6'/%3E%3Cpath d='M18 5v14'/%3E%3C/svg%3E")} /* hard-coded light alert boxes follow the theme (the APM check in Quote Studio and similar notices) */ #app [style*="background:#fff1f2"],#app [style*="background:#fef2f2"],#app [style*="background:#fee2e2"]{background:var(--hb-danger-soft)!important;border-color:color-mix(in srgb,var(--hb-danger) 28%,transparent)!important;color:var(--hb-danger)!important} #app [style*="background:#fff7ed"],#app [style*="background:#fffbeb"],#app [style*="background:#fef3c7"]{background:var(--hb-warn-soft)!important;border-color:color-mix(in srgb,var(--hb-warn) 28%,transparent)!important;color:var(--hb-warn)!important} #app [style*="background:#f0fdf4"],#app [style*="background:#dcfce7"],#app [style*="background:#ecfdf5"]{background:var(--hb-ok-soft)!important;border-color:color-mix(in srgb,var(--hb-ok) 28%,transparent)!important;color:var(--hb-ok)!important} #app :is([style*="background:#eff6ff"],[style*="background:#dbeafe"]):where(:not(button)){background:var(--hb-accent-soft)!important;border-color:color-mix(in srgb,var(--hb-accent) 25%,transparent)!important} #app :is([style*="background:#fff1f2"],[style*="background:#fef2f2"]) strong{color:inherit!important} @container (max-width:900px){ #view-quote .qsg-footer{flex-wrap:wrap;gap:8px 16px!important} #view-quote .hb-qtotals{flex:1 1 100%;justify-content:space-between;gap:10px} #view-quote .qsg-footer-actions{flex:1 1 100%;justify-content:flex-end} } /* document queues: every line is shown in full; hints use the accent instead of the old blue */ #app .hb-q-list>button>div:nth-child(n+3){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word;line-height:1.35} #app .hb-q-list>button [style*="#2563eb"],#app .hb-q-list>button [style*="#1d4ed8"],#app .hb-q-list>button [style*="var(--blue"]{color:var(--hb-accent-ink)!important} /* 18. Board summary strips ------------------------------------------------------------------------- Pipeline and revenue indicators, then won revenue by product line. Shown above the board; the app's Focus Mode button hides them (its state is remembered per device). They read in full, no "...". */ /* the strips belong to the deal board only: hidden on every other page and whenever Focus Mode is on */ #app.lisa-atlas-shell:not([data-view="table"]) :is(.kpi-grid,#purpose-row,#wallet-share-row), #app.lisa-atlas-shell :is(.kpi-grid,#purpose-row,#wallet-share-row):is([style*="display: none"],[style*="display:none"]){display:none!important} #app.lisa-atlas-shell[data-view="table"]:not(.table-focus) .kpi-grid:where(:not([style*="display: none"],[style*="display:none"])){display:flex!important} #app.lisa-atlas-shell .kpi-grid{flex-wrap:wrap;margin:0 0 12px!important;border-radius:14px!important} #app.lisa-atlas-shell .kpi-grid>.kpi-card{flex:1 1 150px;min-width:0} #app.lisa-atlas-shell #purpose-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;margin:0 0 16px!important;border-radius:14px!important} #app.lisa-atlas-shell .kpi-card{padding:14px 16px 15px!important;box-shadow:1px 0 0 var(--border),0 1px 0 var(--border)!important} #app.lisa-atlas-shell .kpi-label{color:var(--text4)!important;font:500 12.5px/1.3 var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important} #app.lisa-atlas-shell .kpi-val{margin-top:6px!important;font:700 22px/1.15 var(--hb-font)!important;letter-spacing:-.03em!important;font-variant-numeric:tabular-nums} #app.lisa-atlas-shell .kpi-sub{margin-top:4px!important;color:var(--text5)!important;font:500 12px/1.35 var(--hb-font)!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} #app.lisa-atlas-shell :is(.kpi-grid,#purpose-row) :is([style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"]){font-size:12px!important} #app.lisa-atlas-shell :is(.kpi-grid,#purpose-row) [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important} #app.lisa-atlas-shell.table-focus :is(.kpi-grid,#purpose-row,#wallet-share-row,#alert-strip){display:none!important} /* Focus Mode shows its state like every other on/off button */ #app #focus-toggle.active{border-color:color-mix(in srgb,var(--hb-accent) 45%,var(--border2))!important;background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important} /* Commercial document queues and read-only document panels */ #app .lisa-doc-list-row{display:flex;align-items:stretch;width:100%;min-width:0;margin:0;border-bottom:1px solid var(--row-border)} #app .lisa-doc-list-row>button:first-child{min-height:0;min-width:0;text-align:left} #app .lisa-doc-list-row>button:first-child>div:nth-child(n+2){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere} #app .lisa-doc-list-view{flex:0 0 auto;align-self:center;margin:0 10px 0 4px;padding:6px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text2);font:700 11px var(--hb-font);cursor:pointer;white-space:nowrap} #app .lisa-doc-list-view:hover{border-color:var(--hb-accent);color:var(--hb-accent-ink);background:var(--hb-accent-soft)} .lisa-doc-quick-overlay{position:fixed;inset:0;z-index:10025;background:rgba(15,23,42,.30);display:flex;justify-content:flex-end} .lisa-doc-quick-panel{box-sizing:border-box;width:min(680px,100vw);height:100dvh;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg3);border-left:1px solid var(--border);box-shadow:-18px 0 48px rgba(15,23,42,.20);color:var(--text);font-family:var(--hb-font)} .lisa-doc-quick-panel.is-document{width:min(980px,100vw)} .lisa-doc-quick-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--border)} .lisa-doc-quick-kicker{color:var(--text4);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em} .lisa-doc-quick-title{margin-top:5px;color:var(--text);font-size:21px;font-weight:850;line-height:1.2;overflow-wrap:anywhere} .lisa-doc-quick-subtitle{margin-top:6px;color:var(--text4);font-size:12px;overflow-wrap:anywhere} .lisa-doc-quick-icon{flex:none;width:32px;height:32px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text2);font:700 22px/1 var(--hb-font);cursor:pointer} .lisa-doc-quick-content{flex:1;min-height:0;overflow:auto;padding:18px 20px;display:grid;align-content:start;gap:18px} .lisa-doc-quick-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .lisa-doc-quick-fact{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg2)} .lisa-doc-quick-fact span{display:block;color:var(--text4);font-size:10px;font-weight:800;text-transform:uppercase} .lisa-doc-quick-fact strong{display:block;margin-top:4px;color:var(--text);font-size:13px;overflow-wrap:anywhere} .lisa-doc-quick-items>strong{font-size:12px}.lisa-doc-quick-items>div{margin-top:8px;border:1px solid var(--border);border-radius:10px;overflow:hidden} .lisa-doc-quick-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--row-border);font-size:12px} .lisa-doc-quick-item:last-child{border-bottom:0}.lisa-doc-quick-item>div{min-width:0}.lisa-doc-quick-item b,.lisa-doc-quick-item span,.lisa-doc-quick-item small{display:block}.lisa-doc-quick-item b{color:var(--hb-accent-ink);font-family:ui-monospace,SFMono-Regular,monospace}.lisa-doc-quick-item span{margin-top:3px;color:var(--text2);overflow-wrap:anywhere}.lisa-doc-quick-item small{margin-top:3px;color:var(--text4)}.lisa-doc-quick-item>strong{white-space:nowrap} .lisa-doc-quick-error{margin:0;padding:10px 12px;border-radius:9px;background:var(--hb-danger-soft);color:var(--hb-danger);font-size:12px} .lisa-doc-quick-document{flex:1;min-height:0;width:100%;border:0;background:#fff} .lisa-doc-quick-footer{flex:none;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:13px 18px;border-top:1px solid var(--border)} .lisa-doc-quick-footer button{min-height:28px;padding:0 14px;border-radius:9px;font:700 12px var(--hb-font);cursor:pointer} .lisa-doc-quick-footer button:disabled{opacity:.45;cursor:not-allowed} .lisa-doc-quick-secondary{border:1px solid var(--border2);background:var(--bg2);color:var(--text2)} .lisa-doc-quick-primary{border:1px solid var(--hb-accent);background:var(--hb-accent);color:#fff} .lisa-doc-quick-primary:hover{background:var(--hb-accent-hover)} } .lisa-doc-quick-content>section,.lisa-doc-quick-head>div:first-child{min-width:0} .lisa-doc-quick-footer{max-height:35dvh;overflow-y:auto} @media(max-width:460px){ .lisa-doc-quick-facts{grid-template-columns:minmax(0,1fr)} .lisa-doc-quick-item{flex-wrap:wrap} .lisa-doc-quick-item>strong{margin-left:auto} .lisa-doc-quick-footer button{flex:1 1 auto} } /* Commercial invoice register: keep every field and action inside the drawer. */ .lisa-ir-preview-overlay{position:fixed;inset:0;z-index:10025;display:flex;justify-content:flex-end;background:rgba(15,23,42,.30)} .lisa-ir-preview-panel{box-sizing:border-box;width:min(720px,100vw);height:100dvh;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg3);border-left:1px solid var(--border);box-shadow:-18px 0 48px rgba(15,23,42,.20);color:var(--text)} .lisa-ir-preview-panel *{box-sizing:border-box} .lisa-ir-preview-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;padding:17px 20px;border-bottom:1px solid var(--border)} .lisa-ir-preview-heading{flex:1;min-width:0;overflow-wrap:anywhere} .lisa-ir-preview-navigation{display:flex;flex:none;align-items:center;gap:5px} .lisa-ir-preview-scroll{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;display:grid;align-content:start;gap:20px;padding:20px} .lisa-ir-preview-scroll>section{min-width:0} .lisa-ir-preview-metrics,.lisa-ir-preview-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .lisa-ir-preview-details{display:grid;grid-template-columns:minmax(0,1fr);gap:18px} .lisa-ir-preview-metrics>div{min-width:0;overflow-wrap:anywhere} .lisa-ir-preview-section{min-width:0} .lisa-ir-preview-facts{gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)} .lisa-ir-preview-fact{min-width:0;padding:10px 12px;border-bottom:1px solid var(--row-border)} .lisa-ir-preview-fact:nth-child(odd){border-right:1px solid var(--row-border)} .lisa-ir-preview-fact:nth-last-child(-n+2){border-bottom:0} .lisa-ir-preview-label{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .lisa-ir-preview-value{margin-top:4px;color:var(--text);font-size:12px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere} .lisa-ir-preview-items{min-width:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)} .lisa-ir-preview-item{min-width:0;padding:12px 14px;border-bottom:1px solid var(--row-border)} .lisa-ir-preview-item:last-child{border-bottom:0} .lisa-ir-preview-item-main{display:grid;grid-template-columns:minmax(72px,100px) minmax(0,1fr) auto;gap:10px;align-items:start;min-width:0;font-size:12px} .lisa-ir-preview-item-main strong{color:var(--blue2);font-family:ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere} .lisa-ir-preview-item-main span{color:var(--text2);font-weight:700;overflow-wrap:anywhere} .lisa-ir-preview-item-main b{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap} .lisa-ir-preview-item-meta{display:flex;flex-wrap:wrap;gap:5px 16px;margin:7px 0 0 110px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums} .lisa-ir-preview-empty{padding:14px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:12px} .lisa-ir-preview-footer{flex:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-width:0;padding:12px 20px;border-top:1px solid var(--border);background:var(--bg3)} .lisa-ir-preview-footer button{min-height:34px;padding:0 10px;border-radius:8px;font:700 11px var(--hb-font);white-space:nowrap;cursor:pointer} .lisa-ir-preview-footer button:disabled{opacity:.45;cursor:not-allowed} .lisa-cn-preview-overlay{position:fixed;inset:0;z-index:10035;display:flex;justify-content:flex-end;background:rgba(15,23,42,.30)} .lisa-cn-preview-panel{box-sizing:border-box;width:min(900px,100vw);height:100dvh;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg3);border-left:1px solid var(--border);box-shadow:-18px 0 48px rgba(15,23,42,.20)} .lisa-cn-preview-scroll{flex:1;min-height:0;overflow:auto} .lisa-cn-preview-scroll .cn-print{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere} @media(max-width:700px){ .lisa-ir-preview-head,.lisa-ir-preview-scroll{padding:14px} .lisa-ir-preview-footer{justify-content:stretch;padding:10px 14px} .lisa-ir-preview-footer button{flex:1 1 auto} .lisa-ir-preview-details{grid-template-columns:minmax(0,1fr)} } @media(max-width:460px){ .lisa-ir-preview-metrics,.lisa-ir-preview-facts{grid-template-columns:minmax(0,1fr)} .lisa-ir-preview-fact{border-right:0!important;border-bottom:1px solid var(--row-border)!important} .lisa-ir-preview-fact:last-child{border-bottom:0!important} .lisa-ir-preview-item-main{grid-template-columns:minmax(0,1fr) auto} .lisa-ir-preview-item-main span{grid-column:1/-1;grid-row:2} .lisa-ir-preview-item-main b{grid-column:2;grid-row:1} .lisa-ir-preview-item-meta{margin-left:0} } /* Notifications (uiToast) — readable on any background (Bogdan, 2026-10-12). They were translucent green/red text at 11 px in the bottom-right corner and blended with the cards and the deal panel below. Now: top centre under the top bar, an opaque inverse surface, 13 px text and a coloured icon per tone. The app still creates, times and removes them; this only restyles them. */ @media screen and (min-width:761px){ #ui-toast-root{top:calc(var(--hb-topbar,60px) + 12px)!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%);align-items:center;max-width:min(520px,calc(100vw - 32px))!important;gap:8px!important} #ui-toast-root .ui-toast{--hb-toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");--hb-toast-tone:#3ec5b5;display:flex;align-items:flex-start;gap:10px;min-width:260px;max-width:100%;padding:11px 16px 11px 12px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;background:#11252d!important;color:#f4f8f8!important;font:550 13px/1.45 var(--hb-font,Inter,system-ui,sans-serif)!important;letter-spacing:0;box-shadow:0 16px 40px rgba(8,20,26,.32),0 3px 10px rgba(8,20,26,.18)!important;animation-name:hb-toast-in!important} #ui-toast-root .ui-toast::before{content:"";flex:none;width:20px;height:20px;margin-top:-.5px;border-radius:50%;background:var(--hb-toast-tone);-webkit-mask:var(--hb-toast-icon) center/12px 12px no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:var(--hb-toast-icon) center/12px 12px no-repeat exclude,linear-gradient(#000 0 0)} #ui-toast-root .ui-toast[data-tone="success"]{--hb-toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--hb-toast-tone:#34d399} #ui-toast-root .ui-toast[data-tone="warn"]{--hb-toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");--hb-toast-tone:#fbbf24} #ui-toast-root .ui-toast[data-tone="error"]{--hb-toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");--hb-toast-tone:#f87171} #ui-toast-root .ui-toast.ui-toast-out{animation-name:hb-toast-out!important} /* dark theme: the inverse surface is light */ html:not(.light) #ui-toast-root .ui-toast{border-color:rgba(17,37,45,.12)!important;background:#eef4f5!important;color:#11252d!important;box-shadow:0 16px 40px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.3)!important} html:not(.light) #ui-toast-root .ui-toast[data-tone="success"]{--hb-toast-tone:#15803d} html:not(.light) #ui-toast-root .ui-toast[data-tone="warn"]{--hb-toast-tone:#b45309} html:not(.light) #ui-toast-root .ui-toast[data-tone="error"]{--hb-toast-tone:#c2362f} html:not(.light) #ui-toast-root .ui-toast:not([data-tone]),html:not(.light) #ui-toast-root .ui-toast[data-tone="info"]{--hb-toast-tone:#0f766e} } @keyframes hb-toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} @keyframes hb-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}} /* Dialogs appended outside #app (SuperOffice deal form, editors, pickers) inherited the 40 px minimum field height of lisa-visual-refresh.css, so a 28 px field still rendered 40 px tall. On desktop the minimum follows the 28 px control contract; elements that set their own height keep it. */ @media screen and (min-width:761px){ :is(input,select,.q-input,.state-input,.state-select,.ir-input,.planner-input,.mail-search-input):where(:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=file],[type=color],#app *)){min-height:28px} }