#horizon-booking-demo .hi-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:12px 0 18px;flex-wrap:wrap} #horizon-booking-demo .hi-toolbar .hd-label{width:min(100%,320px)} #horizon-booking-demo .hi-filters,#horizon-booking-demo .hi-contact-actions,#horizon-booking-demo .hi-issued-actions,#horizon-booking-demo .hi-draft-actions,#horizon-booking-demo .hi-preview-actions{display:flex;gap:8px;flex-wrap:wrap} #horizon-booking-demo .hi-filters [aria-pressed=true]{border-color:#f02586;color:#fff;background:#78204a} #horizon-booking-demo .hi-list-heading{font-size:15px;line-height:1.4;margin:16px 0 5px;font-weight:650} #horizon-booking-demo .hi-list-help{font-size:12px;line-height:1.5;margin:0 0 12px;color:var(--hd-secondary)} #horizon-booking-demo :is(#hd-page-invoices,#hd-page-reports,#hd-page-account) .hd-page-heading h2{line-height:1.3;overflow-wrap:anywhere;max-width:46ch} #horizon-booking-demo .hi-workspace{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:20px;align-items:start} #horizon-booking-demo .hi-invoice-row{width:100%;display:flex;justify-content:space-between;gap:12px;padding:16px;text-align:left;border:1px solid #3a4356;border-radius:10px;background:#1a202c;color:#edf0fa;margin-bottom:9px;cursor:pointer;font:inherit} #horizon-booking-demo .hi-invoice-row[aria-pressed=true]{border-color:#ee2580;box-shadow:0 0 0 1px #ee258055} #horizon-booking-demo .hi-invoice-row span:last-child{text-align:right;flex-shrink:0} #horizon-booking-demo .hi-invoice-row small,#horizon-booking-demo .hi-customer-invoice small{display:block;color:#bac5d9;margin-top:5px} #horizon-booking-demo .hi-editor{padding:20px;border:1px solid #3b4559;border-radius:12px;background:#181f2b;min-width:0;scroll-margin-top:20px} #horizon-booking-demo .hi-editor h3,#horizon-booking-demo .hi-editor h4{margin:0 0 12px} #horizon-booking-demo .hi-editor h4{margin-top:20px} #horizon-booking-demo .hi-editor-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:18px} #horizon-booking-demo .hi-editor-heading p{font-size:12px;color:#b9c6dc;margin:0} #horizon-booking-demo .hi-charge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px} #horizon-booking-demo .hi-part-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(55px,.5fr) minmax(90px,.8fr) auto;gap:8px;align-items:end;margin-bottom:12px} #horizon-booking-demo .hi-confirm{display:block;font-size:13px;margin:20px 0 12px} #horizon-booking-demo .hd-invoice-totals{padding:14px;border-top:1px solid #41495a;font-weight:600} #horizon-booking-demo .hi-breakdown{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:18px 0} #horizon-booking-demo .hi-breakdown dd{margin:0;text-align:right} #horizon-booking-demo .hi-editor dt{overflow-wrap:anywhere;color:#c6d0e1} #horizon-booking-demo .hi-editor form+form,#horizon-booking-demo .hi-editor details{margin-top:20px;padding-top:16px;border-top:1px solid #3b4559} #horizon-booking-demo .hi-editor-notice,#horizon-booking-demo .hi-preview-error{color:#ffb6ce;font-size:13px;white-space:pre-wrap} #horizon-booking-demo .hi-outstanding{color:#efb8d0;font-weight:700} #horizon-booking-demo .hi-customer-invoices{border-top:1px solid #3b4559;margin-top:20px;padding-top:16px} #horizon-booking-demo .hi-customer-invoice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0} /* The document owns the viewing area; preview navigation never scrolls away. */ html.hi-preview-open,html.hi-preview-open body{overflow:hidden;overscroll-behavior:none} #horizon-booking-demo #hi-preview{position:fixed;inset:0;box-sizing:border-box;margin:auto;width:min(1000px,calc(100vw - 32px));height:calc(100dvh - 32px);max-width:none;max-height:none;padding:0;overflow:hidden;background:var(--hm-card,var(--hd-bg))!important;background-image:none!important;color:var(--hd-fg)!important;border-color:var(--hd-line);overscroll-behavior:contain} #horizon-booking-demo #hi-preview[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto} #horizon-booking-demo #hi-preview .hi-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hd-line);background:inherit} #horizon-booking-demo #hi-preview .hi-preview-header>div{min-width:0} #horizon-booking-demo #hi-preview h2{margin:0;font:650 18px/1.25 'Segoe UI',system-ui,sans-serif;color:var(--hd-fg)!important} #horizon-booking-demo #hi-preview .hi-preview-header p{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere;color:var(--hd-secondary)!important} #horizon-booking-demo #hi-preview [data-close-preview]{flex:none;min-height:44px;min-width:64px;margin:0} #horizon-booking-demo #hi-preview .hi-preview-content{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden} #horizon-booking-demo #hi-preview .hi-preview-delivery{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:8px 12px;border-bottom:1px solid var(--hd-line)} #horizon-booking-demo #hi-preview .hi-preview-delivery label{display:block;min-width:0;margin:0;font-size:12px;line-height:1.4;color:var(--hd-fg)!important} #horizon-booking-demo #hi-preview .hi-preview-delivery input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;margin:3px 0 0;padding:9px 10px;font:400 16px/1.35 'Segoe UI',system-ui,sans-serif;background:var(--hd-soft)!important;color:var(--hd-fg)!important;-webkit-text-fill-color:var(--hd-fg);border:1px solid var(--hd-line)!important;border-radius:8px} #horizon-booking-demo #hi-preview .hi-preview-delivery a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin:0;padding:9px 12px;font-size:13px;white-space:nowrap} #horizon-booking-demo #hi-preview iframe{display:block;box-sizing:border-box;width:100%;height:100%;min-height:0;border:0;background:#fff;margin:0} #horizon-booking-demo #hi-preview .hi-preview-footer{padding:10px 12px;border-top:1px solid var(--hd-line);background:inherit} #horizon-booking-demo #hi-preview .hi-preview-error{margin:0 0 8px;color:var(--pf-error,#bc3662)!important;font-size:13px;line-height:1.4;max-height:22dvh;overflow:auto} #horizon-booking-demo #hi-preview .hi-preview-error:empty{display:none} #horizon-booking-demo #hi-preview .hi-preview-review{display:flex;align-items:start;gap:8px;margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--hd-fg)!important} #horizon-booking-demo #hi-preview .hi-preview-review input{flex:none;margin:3px 0} #horizon-booking-demo #hi-preview .hi-preview-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;margin:0} #horizon-booking-demo #hi-preview .hi-preview-actions button{min-height:44px;margin:0;font-size:14px;line-height:1.25;padding:10px 14px} #horizon-booking-demo #hi-preview .hi-preview-actions [data-preview-send]{margin-left:auto;min-width:100px;flex:none} #horizon-booking-demo #hi-send-confirm{position:fixed;inset:0;box-sizing:border-box;width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:22px;overflow:auto;background:var(--hm-card,var(--hd-bg))!important;background-image:none!important;color:var(--hd-fg)!important;border-color:var(--hd-line)} #horizon-booking-demo #hi-send-confirm h2{margin:0 0 12px;font:650 22px/1.3 'Segoe UI',system-ui,sans-serif;color:var(--hd-fg)!important} #horizon-booking-demo #hi-send-confirm p{margin:0 0 12px;color:var(--hd-fg)!important;font-size:15px;line-height:1.5} #horizon-booking-demo #hi-send-confirm .hi-send-recipient{font-weight:650;overflow-wrap:anywhere} #horizon-booking-demo #hi-send-confirm .hi-send-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} #horizon-booking-demo #hi-send-confirm button{min-height:44px;font-size:15px;line-height:1.3;padding:10px 14px} @media(max-width:760px),(max-width:1100px) and (max-height:600px){ #horizon-booking-demo #hi-preview{width:100vw;height:var(--hi-preview-height,100dvh);top:var(--hi-preview-top,0px);bottom:auto;margin:0;border:0;border-radius:0} #horizon-booking-demo #hi-preview .hi-preview-header{padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))} #horizon-booking-demo #hi-preview .hi-preview-footer{padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))} #horizon-booking-demo #hi-preview .hi-preview-delivery{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))} #horizon-booking-demo #hi-preview .hi-preview-actions button:first-child:not([data-preview-send]){max-width:62%} } @media(max-width:1100px) and (max-height:500px){ #horizon-booking-demo #hi-preview .hi-preview-header{padding-block:6px} #horizon-booking-demo #hi-preview .hi-preview-header>div{display:flex;align-items:baseline;gap:12px} #horizon-booking-demo #hi-preview .hi-preview-header p{margin:0} #horizon-booking-demo #hi-preview .hi-preview-delivery{padding-block:6px} #horizon-booking-demo #hi-preview .hi-preview-delivery label{display:flex;align-items:center;gap:10px;white-space:nowrap} #horizon-booking-demo #hi-preview .hi-preview-delivery input{margin:0} #horizon-booking-demo #hi-preview .hi-preview-footer{padding-block:6px} #horizon-booking-demo #hi-preview .hi-preview-error{margin-bottom:6px;font-size:12px} } #horizon-booking-demo .hi-editor .hd-field{box-sizing:border-box;width:100%} @media(max-width:900px){#horizon-booking-demo .hi-part-row{grid-template-columns:minmax(0,1fr) 65px 100px}#horizon-booking-demo .hi-part-row button{grid-column:1/-1;justify-self:start}} @media(max-width:720px){#horizon-booking-demo .hi-workspace{grid-template-columns:1fr}#horizon-booking-demo .hi-charge-grid{grid-template-columns:1fr}#horizon-booking-demo .hi-editor{padding:14px}#horizon-booking-demo .hi-part-row{grid-template-columns:minmax(0,1fr) 60px}#horizon-booking-demo .hi-part-row .hd-label:first-child{grid-column:1/-1}} #horizon-booking-demo .hi-invoice-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap} #horizon-booking-demo .hi-sidebar{min-width:0;display:grid;gap:14px} #horizon-booking-demo .hi-filters{gap:6px} #horizon-booking-demo .hi-date-filter{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #horizon-booking-demo .hi-date-trigger{display:inline-flex;align-items:center;gap:9px;min-height:38px;font:inherit;font-size:12px} #horizon-booking-demo .hi-date-trigger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none} #horizon-booking-demo .hi-date-trigger[aria-expanded=true]{border-color:#f02586} #horizon-booking-demo .hi-date-trigger[aria-expanded=true]>span:last-child{transform:rotate(180deg)} #horizon-booking-demo .hi-clear-date{font-size:11px;padding:6px 8px} #horizon-booking-demo .hi-clear-date[hidden],#horizon-booking-demo .hi-calendar[hidden]{display:none} #horizon-booking-demo .hi-calendar{padding:12px;border:1px solid #3b4559;border-radius:12px;background:#1a202c} #horizon-booking-demo .hi-date-filter .hi-calendar{position:absolute;top:calc(100% + 7px);left:0;z-index:20;box-sizing:border-box;width:min(300px,100%);min-width:0;box-shadow:0 12px 28px #0008} #horizon-booking-demo .hi-calendar-title{display:block;font-size:12px;margin:0 0 10px} #horizon-booking-demo .hi-calendar-heading,#horizon-booking-demo .hi-calendar-selection{display:flex;align-items:center;justify-content:space-between;gap:8px} #horizon-booking-demo .hi-calendar-heading button{padding:4px 12px;font-size:20px} #horizon-booking-demo .hi-calendar-week,#horizon-booking-demo .hi-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center} #horizon-booking-demo .hi-calendar-week{color:#bac5d9;font-size:11px;margin:10px 0 4px} #horizon-booking-demo .hi-calendar-day{position:relative;border:1px solid transparent;background:transparent;color:inherit;border-radius:6px;min-height:30px;padding:5px;font:inherit;font-size:12px;cursor:pointer} #horizon-booking-demo .hi-calendar-day:hover,#horizon-booking-demo .hi-calendar-day:focus-visible{border-color:#ec2a86} #horizon-booking-demo .hi-calendar-day[aria-current=date]{box-shadow:inset 0 0 0 1px #8796b5} #horizon-booking-demo .hi-calendar-day[aria-pressed=true]{background:#78204a;border-color:#f02586;color:#fff} #horizon-booking-demo .hi-calendar-day.has-invoices:after{content:'';position:absolute;bottom:2px;left:calc(50% - 2px);width:4px;height:4px;background:#ff79b5;border-radius:50%} #horizon-booking-demo .hi-calendar-selection{font-size:12px;margin-top:10px} #horizon-booking-demo .hi-calendar-selection button{font-size:11px;padding:5px 8px} #horizon-booking-demo .hi-calendar small{display:block;color:#bac5d9;font-size:10px;margin-top:8px} #horizon-booking-demo .hi-part-row .hi-part-choice{grid-column:1/-1} #horizon-booking-demo .hi-parts>.hi-part-row{grid-template-columns:minmax(65px,.6fr) minmax(120px,1fr) auto} #horizon-booking-demo .hi-part-choice{position:relative;min-width:0} #horizon-booking-demo .hi-part-choice>input{width:100%} #horizon-booking-demo .hi-part-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:250px;overflow:auto;overscroll-behavior:contain;background:var(--hd-bg);border:1px solid var(--hd-line);border-radius:10px;box-shadow:0 10px 28px #0005;padding:4px} #horizon-booking-demo .hi-part-suggestions[hidden]{display:none} #horizon-booking-demo .hi-part-suggestions>.hi-part-suggestion{display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;gap:12px;padding:10px;border:0;border-radius:6px;background:transparent;color:var(--hd-fg);cursor:pointer;grid-column:auto;justify-self:stretch;font-size:12px;line-height:1.4} #horizon-booking-demo .hi-part-suggestion>span{min-width:0;overflow-wrap:anywhere} #horizon-booking-demo .hi-part-suggestion>strong{font-size:11px;flex:none;font-variant-numeric:tabular-nums} #horizon-booking-demo .hi-part-suggestion:hover,#horizon-booking-demo .hi-part-suggestion[aria-selected=true]{background:var(--hd-soft);outline:1px solid var(--hd-line)} @media(max-width:480px){#horizon-booking-demo .hi-parts>.hi-part-row{grid-template-columns:minmax(55px,.6fr) minmax(105px,1fr)}#horizon-booking-demo .hi-parts>.hi-part-row>button{grid-column:1/-1}#horizon-booking-demo .hi-part-suggestions>.hi-part-suggestion{align-items:flex-start;flex-direction:column;gap:3px}} #horizon-booking-demo .hi-parts{--hi-part-background:#ffffff0d;--hi-part-alternate:#ffffff1f} #horizon-booking-demo .hi-parts>.hi-part-row{padding:14px;border:1px solid var(--hd-line,#3b4559);border-radius:10px;background:var(--hi-part-background);min-width:0} #horizon-booking-demo .hi-parts>.hi-part-row:nth-child(even){background:var(--hi-part-alternate)} #horizon-booking-demo:is([data-horizon-theme=evergreen],[data-horizon-theme=midnight]) .hi-parts{--hi-part-background:color-mix(in srgb,var(--ha-accent) 16%,var(--ha-white));--hi-part-alternate:color-mix(in srgb,var(--ha-accent) 8%,var(--ha-white))} #horizon-booking-demo .hi-delete-draft{margin-left:auto;color:#ff9cbb;border-color:#94445d} #horizon-booking-demo dialog.hd-dialog.hi-catalogue{width:min(720px,94vw);max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;box-shadow:none;overflow:visible} #horizon-booking-demo dialog.hi-catalogue[open]{display:flex;flex-direction:column;gap:12px} #horizon-booking-demo .hi-catalogue-panel.hd-dialog{box-sizing:border-box;width:100%;max-width:none;min-height:0;max-height:calc(100dvh - 110px);margin:0;padding:22px;overflow:auto;flex:0 1 auto} #horizon-booking-demo .hi-catalogue-close-bar{display:flex;justify-content:center;flex:none} #horizon-booking-demo .hi-catalogue-close-bar button{min-width:100px;min-height:42px;box-shadow:0 4px 14px #0005} #horizon-booking-demo .hi-catalogue h2{margin:0 0 8px} #horizon-booking-demo .hi-catalogue-row{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:end;gap:10px;margin:14px 0} #horizon-booking-demo .hi-catalogue-error,#horizon-booking-demo .hi-delete-error{color:#ffb6ce} #horizon-booking-demo .hi-catalogue-count,#horizon-booking-demo .hi-stock-import-note{font-size:12px;color:#bac5d9} #horizon-booking-demo .hi-stock-info{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;color:#bac5d9;padding:0 0 10px;border-bottom:1px solid #3b4559} #horizon-booking-demo .hi-stock-info small{width:100%;overflow-wrap:anywhere} #horizon-booking-demo .hi-stock-negative{color:#ff9cbb} #horizon-booking-demo .hi-catalogue-row[hidden]{display:none} #horizon-booking-demo .hi-add-part{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #horizon-booking-demo .hi-category-squares{display:flex;gap:5px;flex-wrap:wrap;min-width:0} #horizon-booking-demo .hi-category-square.hd-secondary{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:54px;height:54px;min-width:54px;padding:5px;border-radius:8px;font-size:9px;line-height:1.1} #horizon-booking-demo .hi-category-square svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #horizon-booking-demo .hi-category-square:hover,#horizon-booking-demo .hi-category-square:focus-visible{border-color:#f02586;color:#ffb6d6} #horizon-booking-demo .hi-picker-items{display:grid;gap:7px;margin-top:12px} #horizon-booking-demo .hi-picker-count{font-size:12px;color:#bac5d9} #horizon-booking-demo .hi-picker-item{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:12px;border:1px solid #52617a;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;font-size:13px} #horizon-booking-demo .hi-picker-item span{min-width:0;overflow-wrap:anywhere} #horizon-booking-demo .hi-picker-item strong{flex:none;color:#f29ac2} #horizon-booking-demo .hi-picker-item:hover,#horizon-booking-demo .hi-picker-item:focus-visible{border-color:#f02586;background:#f0258610} #horizon-booking-demo .hi-product-categories{grid-column:1/-1;font-size:12px} #horizon-booking-demo .hi-product-categories summary{cursor:pointer;color:inherit;padding:7px 0;overflow-wrap:anywhere} #horizon-booking-demo .hi-product-categories .hi-category-missing{color:#ff9cbb} #horizon-booking-demo .hi-product-categories fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px;border:1px solid #52617a;border-radius:8px} #horizon-booking-demo .hi-product-categories fieldset label{display:flex;align-items:center;gap:7px;font-size:12px} #horizon-booking-demo .hi-product-categories input{width:16px;height:16px;flex:none} #horizon-booking-demo .hs-products-card{margin:16px 0} @media(max-width:540px){#horizon-booking-demo .hi-add-part{gap:10px}#horizon-booking-demo .hi-category-square.hd-secondary{width:50px;height:50px;min-width:50px}#horizon-booking-demo .hi-category-squares{gap:6px}#horizon-booking-demo .hi-product-categories fieldset{grid-template-columns:1fr}} @media(max-width:720px){#horizon-booking-demo .hi-catalogue-row{grid-template-columns:minmax(0,1fr) 120px}#horizon-booking-demo .hi-catalogue-row button{grid-column:1/-1;justify-self:end}} .hi-payment-terms { min-width:0; margin:16px 0; border:1px solid var(--hd-border, #44516a); border-radius:10px; padding:16px; } .hi-payment-terms legend { padding:0 6px; font-weight:600; } .hi-engineer-filter {display:grid;gap:10px;margin:12px 0;min-width:0} .hz-invoice-permissions form {margin:16px 0} .hz-invoice-permissions fieldset {display:grid;gap:12px;min-width:0;padding:16px;border:1px solid var(--hd-border,#44516a);border-radius:10px} .hz-invoice-permissions legend {font-weight:600;padding:0 6px} /* Applied invoice filters stay recognisable in every appearance. */ html body #horizon-booking-demo #hd-page-invoices :is([data-invoice-filter],[data-toggle-invoice-date],[data-toggle-invoice-range])[aria-pressed=true]{border-color:#f02586!important;box-shadow:0 0 0 2px #f02586!important} #horizon-booking-demo .hi-date-filter{display:block} #horizon-booking-demo .hi-date-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:3px} #horizon-booking-demo .hi-date-or{font-size:12px;color:var(--hd-secondary);padding:0 2px} #horizon-booking-demo .hi-date-current{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px} #horizon-booking-demo .hi-date-summary{font-size:12px;line-height:1.5;color:var(--hd-secondary)} #horizon-booking-demo .hi-range-fields{display:grid;gap:12px} #horizon-booking-demo .hi-range-fields .hd-field{width:100%;min-width:0;box-sizing:border-box} #horizon-booking-demo .hi-range-actions{display:flex;gap:8px;flex-wrap:wrap} #horizon-booking-demo .hi-range-error{font-size:12px;color:var(--ws-error,#ff8fae);line-height:1.4;margin:8px 0} #horizon-booking-demo .hi-range-error:empty{display:none} #horizon-booking-demo .hi-date-filter .hi-calendar{max-height:60vh;overflow:auto} /* Applied mode follows the filter, rather than whichever picker is being edited. */ html body #horizon-booking-demo #hd-page-invoices .hi-date-options .hi-date-trigger[aria-pressed=true]{background:var(--ws-accent,#70536d)!important;background-image:none!important;color:#fff!important;border-color:var(--ws-accent,#70536d)!important;box-shadow:0 0 0 2px var(--ws-accent,#70536d)!important;font-weight:650} html body #horizon-booking-demo #hd-page-invoices .hi-date-active-badge{display:inline-flex;align-items:center;white-space:nowrap;font-size:10px;line-height:1.3;padding:2px 5px;border:1px solid currentColor;border-radius:5px;color:inherit!important} html body #horizon-booking-demo #hd-page-invoices .hi-date-active-badge[hidden]{display:none!important} /* Invoice preparation: distinct working sections and a clear review area. */ html body #horizon-booking-demo #hd-page-invoices{ --hi-field:var(--ws-field,var(--hd-bg,#172131)); --hi-accent:var(--ws-accent,var(--hd-line,#53617a)); --hi-panel:var(--ws-panel,var(--hd-soft,#202c3d)); --hi-ink:var(--hd-fg,#eaf1ff);--hi-muted:var(--hd-secondary,#b6c3d8); --hi-edge:var(--ws-line,var(--hd-line,#53617a)); --hi-part-odd:color-mix(in srgb,var(--hi-field) 88%,var(--hi-accent)); --hi-part-even:color-mix(in srgb,var(--hi-field) 72%,var(--hi-accent)); --hi-pink:var(--hq-edit-ink,#ff91bd); } html body #horizon-booking-demo #hd-page-invoices .hi-editor{padding:20px;overflow:visible} html body #horizon-booking-demo #hd-page-invoices .hi-editor-heading{margin-bottom:22px} html body #horizon-booking-demo #hd-page-invoices .hi-editor-heading h3{font-size:20px;font-weight:700;line-height:1.35;margin-bottom:6px} html body #horizon-booking-demo #hd-page-invoices .hi-editor-heading p{font-size:13px;line-height:1.5;color:var(--hi-muted)} html body #horizon-booking-demo #hd-page-invoices #hd-invoice-form{display:grid;gap:20px;min-width:0} html body #horizon-booking-demo #hd-page-invoices :is(.hi-form-section,.hi-delivery-section){ box-sizing:border-box;min-width:0;margin:0;padding:20px;border:1px solid var(--hi-edge);border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--hi-panel) 90%,var(--hi-field)),var(--hi-panel)); color:var(--hi-ink);box-shadow:inset 0 1px #ffffff16,0 3px 9px #0000000c; } html body #horizon-booking-demo #hd-page-invoices .hi-section-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--hi-edge)} html body #horizon-booking-demo #hd-page-invoices :is(.hi-section-heading h4,.hi-delivery-section h4){font-size:17px;font-weight:700;line-height:1.4;color:var(--hi-ink);margin:0} html body #horizon-booking-demo #hd-page-invoices .hi-section-step{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;width:29px;height:29px;border:1px solid var(--hi-edge);border-radius:9px;background:var(--hi-field);color:var(--hi-ink);font-size:12px;font-weight:750;vertical-align:middle} html body #horizon-booking-demo #hd-page-invoices .hi-editor :is(.hd-label,.hi-confirm){font-size:14px;font-weight:550;line-height:1.5;color:var(--hi-ink)} html body #horizon-booking-demo #hd-page-invoices .hi-editor :is(input:not([type=checkbox]),select,textarea){font-size:14px;line-height:1.45;min-height:40px;scroll-margin-bottom:190px} html body #horizon-booking-demo #hd-page-invoices .hi-editor :is(.hd-demo-note,.hi-section-help,.hi-parts-empty){font-size:13px;line-height:1.55;color:var(--hi-muted)} html body #horizon-booking-demo #hd-page-invoices .hi-section-help{margin:0 0 12px} html body #horizon-booking-demo #hd-page-invoices .hi-charge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px} html body #horizon-booking-demo #hd-page-invoices .hi-confirm{display:flex;align-items:center;gap:9px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hi-edge)} html body #horizon-booking-demo #hd-page-invoices .hi-confirm input{width:17px;height:17px;flex:none} html body #horizon-booking-demo #hd-page-invoices .hi-add-part-button{margin-left:auto;padding:9px 15px;min-height:40px;font-size:14px;font-weight:750;color:var(--hi-pink)!important;white-space:nowrap} html body #horizon-booking-demo #hd-page-invoices .hi-add-part-button:focus-visible{outline:3px solid var(--hi-pink);outline-offset:3px} html body #horizon-booking-demo #hd-page-invoices .hi-add-part{margin:0 0 16px;min-width:0} html body #horizon-booking-demo #hd-page-invoices .hi-category-squares{gap:7px} html body #horizon-booking-demo #hd-page-invoices .hi-category-square{font-size:10px;min-height:56px} html body #horizon-booking-demo #hd-page-invoices .hi-parts{display:grid;gap:14px;min-width:0} html body #horizon-booking-demo #hd-page-invoices .hi-parts>.hi-part-row{padding:16px;margin:0;gap:12px;border:1px solid var(--hi-edge);border-radius:10px;background:var(--hi-part-odd)!important;color:var(--hi-ink);box-shadow:inset 0 1px #ffffff12} html body #horizon-booking-demo #hd-page-invoices .hi-parts>.hi-part-row:nth-child(even){background:var(--hi-part-even)!important} html body #horizon-booking-demo #hd-page-invoices .hi-part-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--hi-edge);font-size:14px;line-height:1.4} html body #horizon-booking-demo #hd-page-invoices .hi-line-total{font-size:13px;font-weight:650;text-align:right;font-variant-numeric:tabular-nums} html body #horizon-booking-demo #hd-page-invoices .hi-parts-empty{margin:0;padding:18px;border:1px dashed var(--hi-edge);border-radius:9px;background:var(--hi-field)} html body #horizon-booking-demo #hd-page-invoices .hi-parts-empty[hidden]{display:none} html body #horizon-booking-demo #hd-page-invoices .hi-payment-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0;margin:0;padding:0;border:0} html body #horizon-booking-demo #hd-page-invoices .hi-payment-terms legend{font-size:13px;font-weight:550;color:var(--hi-muted);padding:0;margin:0 0 12px} html body #horizon-booking-demo #hd-page-invoices .hi-payment-terms :is(#hi-payment-custom-label,.hd-demo-note){grid-column:1/-1;margin:0} html body #horizon-booking-demo #hd-page-invoices .hi-payment-terms #hi-payment-custom-label[hidden]{display:none} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-section{margin-top:20px} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-section h4{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--hi-edge)} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-section .hi-contact-actions{margin-top:12px} html body #horizon-booking-demo #hd-page-invoices .hi-draft-footer{box-sizing:border-box;min-width:0;margin-top:20px;padding:16px 18px;background:var(--hi-field);color:var(--hi-ink);border:1px solid var(--hi-edge);border-radius:12px;box-shadow:0 -4px 20px #00000020;z-index:8} html body #horizon-booking-demo #hd-page-invoices .hi-draft-footer .hd-invoice-totals{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;margin:0 0 14px;padding:0 0 14px;border:0;border-bottom:1px solid var(--hi-edge);background:transparent!important;color:var(--hi-ink);font-weight:400} html body #horizon-booking-demo #hd-page-invoices .hi-summary-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:0;font-size:13px;line-height:1.45} html body #horizon-booking-demo #hd-page-invoices .hi-summary-breakdown>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0} html body #horizon-booking-demo #hd-page-invoices .hi-summary-breakdown dt{color:var(--hi-muted);font-weight:500} html body #horizon-booking-demo #hd-page-invoices .hi-summary-breakdown dd{margin:0;color:var(--hi-ink);font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums} html body #horizon-booking-demo #hd-page-invoices .hi-grand-total{display:grid;gap:2px;text-align:right;min-width:120px} html body #horizon-booking-demo #hd-page-invoices .hi-grand-total span{font-size:13px;font-weight:650;color:var(--hi-muted)} html body #horizon-booking-demo #hd-page-invoices .hi-grand-total strong{font-size:28px;line-height:1.2;color:var(--hi-ink);font-variant-numeric:tabular-nums} html body #horizon-booking-demo #hd-page-invoices .hi-summary-invalid{font-size:13px;line-height:1.5} html body #horizon-booking-demo #hd-page-invoices .hi-draft-actions{align-items:center;gap:10px} html body #horizon-booking-demo #hd-page-invoices :is(.hi-draft-actions,.hi-contact-actions) button{min-height:40px;padding:9px 15px;font-size:14px;font-weight:650} html body #horizon-booking-demo #hd-page-invoices .hi-delete-draft{margin-left:auto;background:transparent!important;box-shadow:none;color:var(--hi-pink)!important;font-size:13px} @media(min-width:1101px) and (min-height:750px){html body #horizon-booking-demo #hd-page-invoices .hi-draft-footer{position:sticky;bottom:12px}} @media(max-width:1100px){ html body #horizon-booking-demo #hd-page-invoices .hi-workspace{grid-template-columns:minmax(210px,.65fr) minmax(0,1.5fr)} html body #horizon-booking-demo #hd-page-invoices .hi-draft-footer .hd-invoice-totals{grid-template-columns:1fr;gap:14px} html body #horizon-booking-demo #hd-page-invoices .hi-grand-total{display:flex;align-items:baseline;justify-content:space-between;text-align:left} } @media(max-width:760px), (max-width:1100px) and (max-height:600px){ html body #horizon-booking-demo #hd-page-invoices .hi-workspace{grid-template-columns:1fr} html body #horizon-booking-demo #hd-page-invoices .hi-editor{padding:12px} html body #horizon-booking-demo #hd-page-invoices :is(.hi-form-section,.hi-delivery-section){padding:15px} html body #horizon-booking-demo #hd-page-invoices .hi-charge-grid, html body #horizon-booking-demo #hd-page-invoices .hi-payment-terms{grid-template-columns:1fr} html body #horizon-booking-demo #hd-page-invoices .hi-summary-breakdown{grid-template-columns:1fr;gap:8px} html body #horizon-booking-demo #hd-page-invoices .hi-parts>.hi-part-row{grid-template-columns:minmax(50px,.55fr) minmax(90px,1fr);padding:12px;gap:12px} html body #horizon-booking-demo #hd-page-invoices .hi-parts>.hi-part-row>button{grid-column:1/-1;justify-self:start} html body #horizon-booking-demo #hd-page-invoices .hi-draft-footer{position:static;padding:15px} html body #horizon-booking-demo #hd-page-invoices .hi-draft-actions{display:grid;grid-template-columns:1fr 1fr} html body #horizon-booking-demo #hd-page-invoices .hi-delete-draft{grid-column:1/-1;justify-self:end} html body #horizon-booking-demo #hd-page-invoices .hi-grand-total strong{font-size:26px} } /* Phone appearance is chosen independently of the desktop theme. */ @media(max-width:760px), (max-width:1100px) and (max-height:600px){ html body #horizon-booking-demo[data-phone-workspace=true] #hd-page-invoices{--hi-field:var(--pf-field,var(--hd-bg));--hi-panel:var(--pf-panel,var(--hd-soft));--hi-edge:var(--hd-line);--hi-ink:var(--hd-fg);--hi-muted:var(--hd-secondary);--hi-accent:var(--hd-line)} html body #horizon-booking-demo[data-phone-workspace=true][data-phone-appearance=light] #hd-page-invoices{--hi-pink:#b01961} html body #horizon-booking-demo[data-phone-workspace=true]:is([data-phone-appearance=dark],[data-phone-appearance=bubbles]) #hd-page-invoices{--hi-pink:#ff91bd} } /* HQ inset part cards retain their separate light shades and edges. */ @media (min-width:761px) and (min-height:601px), (min-width:1101px){ html body #horizon-booking-demo:is([data-horizon-theme=hq-test],[data-horizon-theme=hq]) #hd-page-invoices :is(.hi-part-row,.hi-section-step,.hi-parts-empty){--hi-ink:var(--ws-ink);--hi-muted:var(--ws-muted);--hi-edge:var(--ws-line)} html body #horizon-booking-demo:is([data-horizon-theme=hq-test],[data-horizon-theme=hq]) #hd-page-invoices .hi-parts>.hi-part-row{box-shadow:inset 0 1px #ffffff80,0 2px 5px #21132826} } /* Clear separation between finding invoices and working on the selected one. */ html body #horizon-booking-demo #hd-page-invoices .hi-workspace{column-gap:36px;row-gap:36px} html body #horizon-booking-demo #hd-page-invoices .hi-sidebar{position:relative;align-self:stretch;align-content:start} html body #horizon-booking-demo #hd-page-invoices .hi-sidebar::after{content:"";position:absolute;pointer-events:none;top:0;bottom:0;right:-19px;width:2px;border-radius:2px;background:var(--hi-muted,var(--hd-secondary));opacity:.55} @media(max-width:760px), (max-width:1100px) and (max-height:600px){ html body #horizon-booking-demo #hd-page-invoices .hi-sidebar::after{top:auto;bottom:-19px;left:0;right:0;width:auto;height:2px} } /* Compact invoice directory, matching the customer directory proportions. */ html body #horizon-booking-demo #hd-page-invoices .hi-workspace{grid-template-columns:minmax(190px,.17fr) minmax(0,.83fr)} html body #horizon-booking-demo #hd-page-invoices .hd-invoice-list{max-height:clamp(240px,48vh,420px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--hi-edge);border-radius:10px} html body #horizon-booking-demo #hd-page-invoices .hi-invoice-row{padding:10px 12px;margin:0;border-radius:0;border-width:0 0 1px;font-size:12px;gap:8px} html body #horizon-booking-demo #hd-page-invoices .hi-invoice-row>span:first-child{min-width:0;flex:1} html body #horizon-booking-demo #hd-page-invoices .hi-invoice-row strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #horizon-booking-demo #hd-page-invoices .hi-invoice-row small{font-size:11px;overflow-wrap:anywhere} html body #horizon-booking-demo #hd-page-invoices .hi-linked-job{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:12px 14px;background:var(--hi-field);border:1px solid var(--hi-edge);border-radius:9px;color:var(--hi-ink);font-size:13px} html body #horizon-booking-demo #hd-page-invoices .hi-linked-job>div:first-child{display:grid;gap:5px} html body #horizon-booking-demo #hd-page-invoices .hi-linked-job span{color:var(--hi-muted)} html body #horizon-booking-demo #hd-page-invoices .hi-linked-job-actions{display:flex;gap:8px;flex-wrap:wrap} html body #horizon-booking-demo .hi-invoice-row-menu{position:fixed;z-index:1500;width:210px;padding:6px;background:var(--hm-card,var(--hd-bg));color:var(--hd-fg);border:1px solid var(--hd-line);border-radius:10px;box-shadow:0 10px 30px #0006} html body #horizon-booking-demo .hi-invoice-row-menu[hidden]{display:none} html body #horizon-booking-demo .hi-invoice-row-menu>strong{display:block;padding:7px 10px;font-size:12px;overflow-wrap:anywhere} html body #horizon-booking-demo .hi-invoice-row-menu>button{width:100%;text-align:left;min-height:40px} @media(max-width:760px), (max-width:1100px) and (max-height:600px){html body #horizon-booking-demo #hd-page-invoices .hi-workspace{grid-template-columns:1fr}} /* Different destinations are clear in both quote and invoice job controls. */ html body #horizon-booking-demo :is(.hd-job-record-link,.hd-job-timeline-link){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;font-weight:650} html body #horizon-booking-demo .hd-job-record-link{background:var(--ws-accent,#70536d)!important;background-image:none!important;color:#fff!important;border:1px solid var(--ws-accent,#70536d)!important} html body #horizon-booking-demo .hd-job-timeline-link{background:var(--hd-soft)!important;background-image:none!important;color:var(--hd-fg)!important;border:1px solid var(--hd-secondary)!important;box-shadow:none} #horizon-booking-demo :is(.hd-job-record-link,.hd-job-timeline-link) svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Local part actions stay beside the amounts, without losing the section's add button. */ html body #horizon-booking-demo #hd-page-invoices{--hi-remove-bg:#f8dde4;--hi-remove-ink:#81273e;--hi-remove-edge:#a44c66} html body #horizon-booking-demo #hd-page-invoices .hi-part-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;min-width:0} html body #horizon-booking-demo #hd-page-invoices .hi-part-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 12px;font-size:13px;font-weight:700;white-space:nowrap;grid-column:auto;justify-self:auto} html body #horizon-booking-demo #hd-page-invoices .hi-part-actions .hi-remove-part{background:var(--hi-remove-bg)!important;background-image:none!important;color:var(--hi-remove-ink)!important;border:1px solid var(--hi-remove-edge)!important;box-shadow:inset 0 1px #ffffff26} #horizon-booking-demo .hi-remove-part svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #horizon-booking-demo .hi-add-next-part>span{font-size:19px;line-height:1} html body #horizon-booking-demo #hd-page-invoices .hi-part-actions button:focus-visible{outline:3px solid var(--hi-edge);outline-offset:3px} /* Delivery and the customer being billed share one section, divided into two columns. */ html body #horizon-booking-demo #hd-page-invoices .hi-delivery-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-email{min-width:0} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer{min-width:0;padding:15px 18px;border:1px solid var(--hi-edge);border-left:3px solid var(--hi-edge);border-radius:9px;background:var(--hi-field);color:var(--hd-fg)} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer h5{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--hd-secondary)} html body #horizon-booking-demo #hd-page-invoices .hi-customer-overview-name{display:block;font-size:18px;line-height:1.35;margin-bottom:12px;color:var(--hd-fg);overflow-wrap:anywhere} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0;font-size:13px;line-height:1.45} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer dl>div:first-child{grid-column:1/-1} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer dt{color:var(--hd-secondary);font-size:12px;font-weight:550;margin-bottom:3px} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer dd{margin:0;color:var(--hd-fg);white-space:pre-line;overflow-wrap:anywhere} @media(max-width:1100px){html body #horizon-booking-demo #hd-page-invoices .hi-part-actions{grid-column:1/-1}} @media(max-width:760px), (max-width:1100px) and (max-height:600px){ html body #horizon-booking-demo #hd-page-invoices .hi-delivery-columns{grid-template-columns:minmax(0,1fr);gap:16px} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-customer{padding:14px} html body #horizon-booking-demo #hd-page-invoices .hi-part-actions{grid-column:1/-1} } /* Each numbered stage has its own tone; part cards keep their inset differentiation. */ @media (min-width:761px) and (min-height:601px), (min-width:1101px){ html body #horizon-booking-demo:is([data-horizon-theme=horizon],[data-horizon-theme=bubbles]) #hd-page-invoices{--hi-ink:#f1f5fc;--hi-muted:#d2ddeb;--hi-edge:#8c9bb0;--hi-section-job:#404b5b;--hi-section-parts:#25303f;--hi-section-payment:#2c2735;--hi-section-delivery:#333e4c;--hi-part-odd:#465365;--hi-part-even:#3e4a5b;--hi-remove-bg:#633545;--hi-remove-ink:#fff1f3;--hi-remove-edge:#d9a0b1} html body #horizon-booking-demo[data-horizon-theme=hq-classic] #hd-page-invoices{--hi-ink:#fff7dc;--hi-muted:#eeeede;--hi-edge:#9aaa8c;--hi-section-job:#405f4b;--hi-section-parts:#203c2c;--hi-section-payment:#4c6d55;--hi-section-delivery:#304c3c;--hi-part-odd:#466451;--hi-part-even:#3d5948;--hi-remove-bg:#674639;--hi-remove-ink:#fff4d8;--hi-remove-edge:#d0b08a} html body #horizon-booking-demo[data-horizon-theme=evergreen] #hd-page-invoices{--hi-ink:#20382a;--hi-muted:#354c3c;--hi-edge:#607965;--hi-section-job:#c8dccb;--hi-section-parts:#a6c2ac;--hi-section-payment:#e2ece2;--hi-section-delivery:#b6cfbc;--hi-part-odd:#e8f0e8;--hi-part-even:#dae7db} html body #horizon-booking-demo[data-horizon-theme=midnight] #hd-page-invoices{--hi-ink:#20364a;--hi-muted:#2e455b;--hi-edge:#607891;--hi-section-job:#c8dceb;--hi-section-parts:#9cb9d1;--hi-section-payment:#e2edf5;--hi-section-delivery:#b1cbe0;--hi-part-odd:#e8f0f7;--hi-part-even:#dae6f1} html body #horizon-booking-demo[data-horizon-theme=hq-test] #hd-page-invoices{--hi-ink:#30233f;--hi-muted:#584665;--hi-edge:#8d78a2;--hi-section-job:#e1d4ed;--hi-section-parts:#bfa5d4;--hi-section-payment:#efe8f5;--hi-section-delivery:#d1bddf} html body #horizon-booking-demo[data-horizon-theme=hq] #hd-page-invoices{--hi-ink:#35263b;--hi-muted:#5b4563;--hi-edge:#90759a;--hi-section-job:#e1d3e5;--hi-section-parts:#c1a5cb;--hi-section-payment:#f1e9f3;--hi-section-delivery:#d3bddc} html body #horizon-booking-demo #hd-page-invoices .hi-form-section[aria-labelledby=hi-job-heading]{background:var(--hi-section-job,var(--hi-panel))} html body #horizon-booking-demo #hd-page-invoices .hi-form-section[aria-labelledby=hi-parts-heading]{background:var(--hi-section-parts,var(--hi-panel))} html body #horizon-booking-demo #hd-page-invoices .hi-form-section[aria-labelledby=hi-payment-heading]{background:var(--hi-section-payment,var(--hi-panel))} html body #horizon-booking-demo #hd-page-invoices .hi-delivery-section{background:var(--hi-section-delivery,var(--hi-panel))} }