/* Vega CRM design system pass (2026-09-24). Loaded after app.css on every page, including sign-in pages. One rhythm: 16px gaps, 20px inner padding, 36px controls, 12px cards, 7px inputs / 8px buttons. */ :root{--ds-gap:16px;--ds-pad:20px;--control-h:36px} /* page rhythm: same top offset on every page */ @media (min-width:1101px){main{padding-top:16px}} main .page-head{margin-bottom:var(--ds-gap)} main:has(.explorer) .page-head{margin-bottom:6px} /* cards / panels */ main .panel{padding:var(--ds-pad);margin-bottom:var(--ds-gap)} main .panel>h2:first-child,main .panel>.panel-head h2{margin-top:0} /* buttons: one height everywhere (table toolbars keep their own compact controls) */ main :is(a.button,button.button):not(.explorer *):not(.ce-chip){min-height:var(--control-h);height:var(--control-h);padding:0 16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap} main .form-actions :is(button,.button){min-height:var(--control-h)!important;height:var(--control-h);padding:0 18px!important} /* legacy form panels and sign-in pages: same control height as the rest of the site */ .form-panel input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.form-panel select,.login-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.login-card select{min-height:var(--control-h)!important;height:var(--control-h)} .login-card .button,.login-card button{min-height:var(--control-h)!important;height:var(--control-h);padding:0 18px!important;font-size:calc(13px + 1pt)} .login-card label{margin-bottom:6px} /* focus ring and placeholder: identical for every field in both themes */ main :is(input,select,textarea):focus-visible,.login-card :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} :is(input,textarea)::placeholder{color:var(--muted);opacity:.75} /* empty state */ .empty-state{text-align:center;padding:28px 12px;color:var(--muted)} .empty-state h3{margin:0 0 6px;color:var(--text)} main .page-head :is(a.button,button.button,button,input,select){height:var(--control-h)!important;min-height:var(--control-h)!important} /* release footer (was an inline style attribute, blocked by CSP style-src 'self') */ .release-info{font-size:calc(11px + 1pt);line-height:1.5;margin-top:12px;overflow-wrap:anywhere} /* bulk unit rows on phones: one compact row per unit instead of a tall card */ .mobile-card.is-compact{padding:10px 12px;display:block} .mobile-card.is-compact .mc-head{display:flex;align-items:center;gap:10px;min-height:var(--control-h,36px)} .mobile-card.is-compact .mc-head h3{margin:0;font-size:1.05em;flex:0 0 auto} .mobile-card.is-compact .mc-status{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center} .mobile-card.is-compact .mc-edit{flex:0 0 auto;white-space:nowrap;padding:0 12px;min-height:var(--control-h,36px);display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;font-weight:600;background:var(--soft)} .mobile-card.is-compact .mc-line{color:var(--muted);font-size:.92em;overflow-wrap:anywhere;margin:2px 0 4px} .mobile-card.is-compact details{margin-top:4px} .mobile-card.is-compact summary{cursor:pointer;color:var(--accent);font-size:.9em} .mobile-card.is-compact dl{display:grid;grid-template-columns:minmax(80px,auto) 1fr;gap:2px 12px;margin:6px 0 0} .mobile-card.is-compact dt{color:var(--muted)}.mobile-card.is-compact dd{margin:0;overflow-wrap:anywhere} /* wide inline forms (bulk actions etc.): fields wrap in an auto-fit grid instead of stacking full width */ form.ce-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;align-items:end} form.ce-inline .ce-router-lines,form.ce-inline>textarea{grid-column:1/-1} form.ce-inline>label:not(.ce-check){display:flex;flex-direction:column;gap:4px;min-width:0} form.ce-inline>.button,form.ce-inline>button{justify-self:start} /* ================= Final UI consistency pass (2026-09-26) ================= One look for every table, card, badge, toolbar and empty state. Shared classes only: the reference is the grid standard (.table-wrap + .data-table): soft header bar, hairline column dividers, zebra rows, compact rows, 36px toolbar controls. */ /* --- tables: the secondary tables (.ce-table) now read exactly like the grids --- */ .ce-table-wrap{border-radius:8px} /* same radius as .table-wrap */ .ce-table thead th{background:var(--soft);color:var(--muted);font-size:calc(10px + 1pt);font-weight:600; text-transform:none;letter-spacing:.2px;padding:8px 10px} .ce-table td{padding:7px 10px} .ce-table :is(th,td)+:is(th,td){border-left:1px solid var(--tbl-divider,var(--line))} .ce-table tbody tr:nth-child(even)>td{background:var(--tbl-zebra,transparent)} /* payment methods on the customer card: same compact rhythm and zebra as every other table */ .data-table.ce-methods td{padding:7px 10px} .data-table.ce-methods tbody tr:nth-child(even)>td{background:var(--tbl-zebra,transparent)} /* --- cards: one padding and one radius --- */ @media (min-width:701px){ main :is(.ce-card,.panel,.uf-card,.ce-danger){padding:var(--ds-pad);border-radius:12px} } .ite-center{border-radius:12px} /* --- badges: one pill shape (matches .ce-pill / .ite-pill and the portal badges) --- */ .badge{border-radius:999px;padding:2px 9px;font-size:calc(10px + 1pt);font-weight:600;line-height:1.35; white-space:nowrap;overflow-wrap:normal;word-break:normal} /* labels inside table cells keep their shape: a pill or a button never breaks mid-word */ .explorer .data-table :is(.badge,.ce-pill,a.button,button.button){white-space:nowrap;overflow-wrap:normal;word-break:normal} /* --- toolbars: 36px controls, like the page head and the create buttons --- */ .table-toolbar{min-height:var(--control-h)} .table-toolbar :is(select,input:not([type=checkbox]):not([type=radio]),button,.button){ min-height:var(--control-h);height:var(--control-h)} /* --- empty states: one centred, muted block wherever a list has nothing to show --- */ main :is(.ce-empty,.ite-empty){text-align:center;padding:28px 12px;color:var(--muted)} .ce-empty{margin:0} .ite-empty h4{margin:0 0 6px;color:var(--text)} /* --- narrow screens: nothing pushes the page sideways --- */ @media (max-width:700px){ .ce-bar{flex-wrap:wrap} .ce-bar .button{flex:1 1 130px;min-width:130px} .uf-pw{flex-wrap:wrap} .uf-pw>form,.uf-pw>.button,.uf-pw>button{max-width:100%} } main code,main .uf-help code{overflow-wrap:anywhere} /* Column-header icon colours (shared grid component). One token per hue; light values are >= 4.3:1 on the header background #eaf3f6, dark values >= 6:1 on #1d3445 (icons need 3:1). */ :root{--hd-teal:#0f766e;--hd-green:#15803d;--hd-blue:#1d6fb8;--hd-amber:#a16207;--hd-sky:#0e7490;--hd-purple:#6d43c9;--hd-pink:#be185d;--hd-orange:#c2410c;--hd-red:#b91c1c;--hd-indigo:#4338ca;--hd-slate:#475569;--hd-grey:#5b6b77} html[data-theme=dark]{--hd-teal:#4fd0c4;--hd-green:#6fcf97;--hd-blue:#6cb4f2;--hd-amber:#f0b95e;--hd-sky:#66c8ee;--hd-purple:#b7a0f3;--hd-pink:#f294c4;--hd-orange:#f5a262;--hd-red:#f4908a;--hd-indigo:#94a3f7;--hd-slate:#9fb6c5;--hd-grey:#a9b6c0} .hdi{display:inline-flex;vertical-align:-2px;margin-right:5px;flex:none;color:var(--hd-slate)} .hdi svg{display:block} .data-table th.hd-teal .hdi,.data-table th.hd-teal :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-teal)} .data-table th.hd-green .hdi,.data-table th.hd-green :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-green)} .data-table th.hd-blue .hdi,.data-table th.hd-blue :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-blue)} .data-table th.hd-amber .hdi,.data-table th.hd-amber :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-amber)} .data-table th.hd-sky .hdi,.data-table th.hd-sky :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-sky)} .data-table th.hd-purple .hdi,.data-table th.hd-purple :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-purple)} .data-table th.hd-pink .hdi,.data-table th.hd-pink :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-pink)} .data-table th.hd-orange .hdi,.data-table th.hd-orange :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-orange)} .data-table th.hd-red .hdi,.data-table th.hd-red :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-red)} .data-table th.hd-indigo .hdi,.data-table th.hd-indigo :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-indigo)} .data-table th.hd-slate .hdi,.data-table th.hd-slate :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-slate)} .data-table th.hd-grey .hdi,.data-table th.hd-grey :is(.hdr-icon-btn,.cc-head-trigger,.actions-head-icon,.hdr-dollar,.balance-popup-trigger.hdr-icon-btn){color:var(--hd-grey)} .data-table th .inline-head-sort,.data-table th .range-hint{opacity:.7} /* checkbox-popup column filters that show a text label (small fixed sets) */ .data-table th .cc-head-trigger.chk-head-text{width:auto;min-width:0;padding:0 6px;white-space:nowrap} .data-table th .chk-head-label{font:inherit;color:var(--text)} .cc-ok{color:#40be85}.cc-miss{color:#eebc4b;font-weight:700} /* colour the header's OWN icon buttons (magnifier, calendar, $, filter, flag...) by meaning; text-label triggers and the traffic-light icon keep their own look */ .data-table th.hd-teal .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-teal .date-search-trigger,.data-table th.hd-teal .payment-search-trigger{color:var(--hd-teal)} .data-table th.hd-green .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-green .date-search-trigger,.data-table th.hd-green .payment-search-trigger{color:var(--hd-green)} .data-table th.hd-blue .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-blue .date-search-trigger,.data-table th.hd-blue .payment-search-trigger{color:var(--hd-blue)} .data-table th.hd-amber .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-amber .date-search-trigger,.data-table th.hd-amber .payment-search-trigger{color:var(--hd-amber)} .data-table th.hd-sky .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-sky .date-search-trigger,.data-table th.hd-sky .payment-search-trigger{color:var(--hd-sky)} .data-table th.hd-purple .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-purple .date-search-trigger,.data-table th.hd-purple .payment-search-trigger{color:var(--hd-purple)} .data-table th.hd-pink .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-pink .date-search-trigger,.data-table th.hd-pink .payment-search-trigger{color:var(--hd-pink)} .data-table th.hd-orange .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-orange .date-search-trigger,.data-table th.hd-orange .payment-search-trigger{color:var(--hd-orange)} .data-table th.hd-red .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-red .date-search-trigger,.data-table th.hd-red .payment-search-trigger{color:var(--hd-red)} .data-table th.hd-indigo .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-indigo .date-search-trigger,.data-table th.hd-indigo .payment-search-trigger{color:var(--hd-indigo)} .data-table th.hd-slate .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-slate .date-search-trigger,.data-table th.hd-slate .payment-search-trigger{color:var(--hd-slate)} .data-table th.hd-grey .unit-search-trigger:not(.status-search-trigger):not(.chk-head-text),.data-table th.hd-grey .date-search-trigger,.data-table th.hd-grey .payment-search-trigger{color:var(--hd-grey)} /* never show the auto-added header icon in cells with a search box, filter or popup (belt and braces for hdicons.js) */ table thead th:has(input,select,textarea,.header-filter,button,.unit-search-trigger,.balance-popup-trigger,.balance-filter-toggle)>.hdi{display:none} /* Compact checkbox filter popups (Status, Missing, Type, Payment, Portal, Correspondence and every other one built with the same component): live filter on each tick, no Apply button. */ .unit-search-popup.payment-method-popup{width:max-content;min-width:150px;max-width:230px;padding:8px 10px;border-radius:8px;font-size:13px;line-height:1.3} .unit-search-popup.payment-method-popup>strong{display:block;font-size:12px;font-weight:600;margin:0 0 4px;color:var(--muted)} .unit-search-popup.payment-method-popup .payment-check{display:flex;align-items:center;gap:7px;margin:0;min-height:26px;padding:0 2px;font-size:13px;cursor:pointer;white-space:nowrap} .unit-search-popup.payment-method-popup .payment-check input[type=checkbox]{width:15px;height:15px;flex:0 0 15px;margin:0;accent-color:var(--accent)} .unit-search-popup.payment-method-popup .payment-check input[type=checkbox]:focus{outline:0} .unit-search-popup.payment-method-popup .payment-check input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .unit-search-popup.payment-method-popup .cc-opt-mark{display:inline-flex;align-items:center;justify-content:center;min-width:18px;line-height:0} .unit-search-popup.payment-method-popup .balance-popup-actions{display:flex;justify-content:flex-end;gap:6px;margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)} .unit-search-popup.payment-method-popup .balance-popup-actions button{min-height:0;height:22px;padding:0 2px;font-size:12px;font-weight:500;background:none;border:0;box-shadow:none;color:var(--accent);text-decoration:underline;cursor:pointer} .unit-search-popup.payment-method-popup .balance-popup-actions button:last-child{display:none} /* Same compact look for the range / date / unit-search header popups (Equipment count, Balance, dates, Unit ...) */ .unit-search-popup{padding:8px 10px;font-size:13px;border-radius:8px} .unit-search-popup.balance-range-popup,.unit-search-popup.date-range-popup{width:max-content;min-width:170px;max-width:240px} .unit-search-popup:not(.payment-method-popup) strong{display:block;font-size:12px;font-weight:600;margin:0 0 4px;color:var(--muted)} .unit-search-popup:not(.payment-method-popup) label{display:block;margin-top:6px;font-size:12px} .unit-search-popup:not(.payment-method-popup) :is(input,select){height:28px;min-height:0;padding:2px 6px;font-size:13px;width:100%} .unit-search-popup:not(.payment-method-popup) input[type=checkbox]{width:15px;height:15px} .unit-search-popup:not(.payment-method-popup) .balance-popup-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px} .unit-search-popup:not(.payment-method-popup) .balance-popup-actions button{min-height:0;height:26px;padding:0 10px;font-size:12px} .unit-search-popup :is(input,select,button):focus{outline:0} .unit-search-popup :is(input,select,button):focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Popups: never a horizontal scrollbar; long labels wrap. Status marks: ONE size everywhere. "Show all" and the other small popup controls: one compact button style site-wide. */ .unit-search-popup{overflow-x:hidden!important;overflow-y:auto} .unit-search-popup.payment-method-popup .payment-check{white-space:normal;overflow-wrap:anywhere;line-height:1.25;min-height:26px;padding:3px 2px} .cc-opt-mark svg,.st-icon svg,td[data-column=portal] svg,.status-action svg{width:18px!important;height:18px!important} .st-icon{width:18px;height:18px} .cc-opt-mark{min-width:18px} .unit-search-popup .balance-popup-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:nowrap} .unit-search-popup .balance-popup-actions button,.unit-search-popup.payment-method-popup .balance-popup-actions button{height:26px;min-height:0;padding:0 10px;font-size:12px;font-weight:500;line-height:1;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--text);text-decoration:none;box-shadow:none;cursor:pointer} .unit-search-popup .balance-popup-actions button:hover{border-color:var(--accent);color:var(--accent)} .unit-search-popup .balance-popup-actions button:focus{outline:0} .unit-search-popup .balance-popup-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .unit-search-popup:not(.payment-method-popup) .balance-popup-actions button:last-child{background:var(--accent);border-color:var(--accent);color:#fff} .unit-search-popup.payment-method-popup .balance-popup-actions button:last-child{display:none} .unit-search-popup.payment-method-popup .balance-popup-actions{border-top:1px solid var(--line);margin-top:4px;padding-top:6px} /* Quick-add group (Overview, Customers, Sites, Subscriptions headers) */ .qa-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px} .qa-group .qa{display:inline-flex;align-items:center;gap:6px;height:32px;min-height:0;padding:0 12px;font-size:13px;line-height:1;white-space:nowrap} .qa-group .qi{width:16px;height:16px;flex:none} .qa-next{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} @media(max-width:700px){.qa-group .qa span{display:none}.qa-group .qa{padding:0 10px}} /* ONE top grid for every staff page (desktop + tablet): sidebar and main share the same top padding; brand block and page header row share the same 64px band and centre line; the first sidebar group (WORK) and the first content row start on the same y. No page may add extra top margin. */ @media(min-width:701px){ :root{--top-pad:16px;--head-h:64px;--band-gap:16px} .sidebar{padding-top:var(--top-pad)!important} .sidebar .workspace-wrap{height:var(--head-h);margin:0 0 var(--band-gap)!important} .sidebar .workspace-wrap .workspace{margin:0!important;height:var(--head-h);box-sizing:border-box;display:flex;align-items:center;padding-top:0!important;padding-bottom:0!important} .sidebar #main-navigation,.sidebar nav#main-navigation{margin-top:0!important;padding-top:0!important} .sidebar #main-navigation>:first-child{margin-top:0!important} main#main,main{padding-top:var(--top-pad)!important} main>.page-head,main .page-head{min-height:var(--head-h);margin:0 0 var(--band-gap)!important;align-items:center!important;box-sizing:border-box} main .page-head>div:first-child{display:flex;flex-direction:column;justify-content:center} main .page-head h1{margin:0!important;line-height:1.2} main>.page-head+*{margin-top:0!important} main>.page-head+.ov,main>.page-head+.ov>:first-child{margin-top:0!important} } /* Quick-add buttons - Variant 2: dark ghost button, teal outline, icons drawn directly in full colour (no badge) */ .qa-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px} .qa-group .qa.add-button{--qa-green:#15803d;--qa-cyan:#0e7490;--qa-violet:#7c3aed;display:inline-flex;align-items:center;gap:8px;height:34px;min-height:34px;padding:0 13px;border-radius:8px;border:1px solid #2f8079;background:var(--white);color:#0b4f4a;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:none;transition:border-color .15s,background-color .15s,transform .05s} html[data-theme=dark] .qa-group .qa.add-button{--qa-green:#4ade80;--qa-cyan:#22d3ee;--qa-violet:#c084fc;color:#dff5f2} .qa-group .qa.add-button:hover{border-color:#39afac;background:color-mix(in srgb,#2f8079 14%,var(--white));text-decoration:none} .qa-group .qa.add-button:active{transform:translateY(1px);background:color-mix(in srgb,#2f8079 22%,var(--white))} .qa-group .qa.add-button:focus-visible{outline:2px solid #39afac;outline-offset:2px} .qa-group .qi{flex:none;display:block;width:18px;height:18px} .qa-group .qi-site{color:var(--qa-green)} .qa-group .qi-cs .qi-person{color:var(--qa-cyan)} .qa-group .qi-cs .qi-wave{color:var(--qa-violet)} .qa-next{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} @media(max-width:700px){.qa-group .qt{display:none}.qa-group .qa.add-button{padding:0 10px}} /* Top band v2: ONE 40px control height for the brand block, the page-head controls and the quick-add buttons; radius 10px; same 1px teal-family border; shared centre line (16px top grid) */ @media(min-width:701px){ :root{--head-h:40px} .sidebar .workspace-wrap{height:40px} .sidebar .workspace-wrap .workspace{height:40px!important;padding:0 44px 0 12px!important;gap:10px;border:1px solid #2f8079!important;border-radius:10px!important;background:transparent} .sidebar .workspace-wrap .workspace:hover{background:#ffffff0d} .sidebar .workspace-wrap .workspace-logo{flex:0 0 28px;width:28px;height:28px} .sidebar .workspace-wrap .workspace>div{font-size:13px;font-weight:600;line-height:1.15;color:#eaf5f8} .sidebar .workspace-wrap .workspace small{display:block;font-size:11px;font-weight:400;line-height:1.15;color:#9fb8c6} .sidebar .workspace-wrap .nav-expandall{width:24px!important;height:24px!important;right:8px!important} .sidebar .workspace-wrap .nav-expandall .ic{width:16px;height:16px} main .page-head{--control-h:40px;min-height:40px} main .page-head :is(a.button,button.button,button,input,select){border-radius:10px} } .page-head .qa-group .qa.add-button,main .page-head .qa-group .qa.add-button{height:40px!important;min-height:40px!important;border-radius:10px!important;padding:0 14px} @media(max-width:700px){.page-head .qa-group .qa.add-button{padding:0 11px}} /* ROOT-CAUSE FIX: the global dark-theme rule `html[data-theme=dark] .button.add-button:not(.secondary){background:var(--add)...}` (specificity 0,4,2) beat the quick-add ghost style in dark theme */ html[data-theme=dark] .qa-group .qa.add-button:not(.secondary){background:var(--white)!important;border-color:#2f8079!important;color:#dff5f2!important} html[data-theme=dark] .qa-group .qa.add-button:not(.secondary):hover{background:color-mix(in srgb,#2f8079 16%,var(--white))!important;border-color:#39afac!important} html[data-theme=dark] .qa-group .qa.add-button:not(.secondary):active{background:color-mix(in srgb,#2f8079 24%,var(--white))!important} html:not([data-theme=dark]) .qa-group .qa.add-button:not(.secondary){background:var(--white)!important;border-color:#2f8079!important;color:#0b4f4a!important} /* Theme toggle (variant 3): one round button showing the CURRENT mode as a multicolour icon; morph/rotate/fade 250ms; icon animation off under prefers-reduced-motion */ .sidebar-controls .theme-cycle{position:relative;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid #3f6577;background:radial-gradient(circle at 35% 30%,#2b4a5c 0%,#12222d 72%);color:#fff;cursor:pointer;overflow:hidden;box-shadow:none;font-size:0!important} .sidebar-controls .theme-cycle:hover{border-color:#39afac} .sidebar-controls .theme-cycle:focus-visible{outline:2px solid #39afac;outline-offset:2px} .theme-cycle .ti,.ibtn#theme-btn .ti{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;transform:rotate(-70deg) scale(.5);transition:opacity .25s ease,transform .25s ease;pointer-events:none} .theme-cycle:not([data-mode]) .ti-auto,.theme-cycle[data-mode=auto] .ti-auto,.theme-cycle[data-mode=light] .ti-light,.theme-cycle[data-mode=dark] .ti-dark,#theme-btn[data-state=auto] .ti-auto,#theme-btn[data-state=light] .ti-light,#theme-btn[data-state=dark] .ti-dark{opacity:1;transform:none} .ti .rays{transform-box:fill-box;transform-origin:center} .theme-cycle[data-mode=light] .rays,#theme-btn[data-state=light] .rays{animation:ti-rot 14s linear infinite} .ti .tw{animation:ti-tw 2.4s ease-in-out infinite}.ti .tw2{animation-delay:1.1s} @keyframes ti-rot{to{transform:rotate(360deg)}} @keyframes ti-tw{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.theme-cycle .ti,#theme-btn .ti{transition:none}.ti .rays,.ti .tw{animation:none!important}} .sidebar-controls .theme-cycle[data-mode=light],.sidebar-controls .theme-cycle[data-mode=dark],.sidebar-controls .theme-cycle[data-mode=auto]{background:radial-gradient(circle at 35% 30%,#2b4a5c 0%,#12222d 72%)!important;border-color:#3f6577!important;color:#fff!important} .sidebar-controls .theme-cycle[data-mode]:hover{border-color:#39afac!important} /* Header band alignment for pages with a tools block (Customers, Sites, Subscriptions ...): row 1 = 40px band shared with the sidebar brand block (title left, quick-add + add buttons right); search / sort / column tools drop to row 2. Nothing may push the buttons off the brand block's top / centre / bottom lines. */ @media(min-width:701px){ main .page-head:has(>.page-tools){display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:40px auto;column-gap:14px;row-gap:12px;align-items:center;min-height:0!important} main .page-head:has(>.page-tools)>div:first-child{grid-column:1;grid-row:1;align-self:center} main .page-head>.page-tools{display:contents} main .page-head>.page-tools>.row-actions{grid-column:2;grid-row:1;justify-self:end;align-self:center;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;height:40px;margin:0!important} main .page-head>.page-tools>*:not(.row-actions){grid-column:1 / -1;grid-row:2} main .page-head .qa-group{flex-wrap:nowrap} } .qa-group .qi-task{color:var(--qa-lime,#4d7c0f)}html[data-theme=dark] .qa-group .qa.add-button{--qa-lime:#a6d84a} .login-story .brand .login-mark{display:inline-block;vertical-align:middle;width:36px;height:36px;margin-right:10px} /* QuickBooks settings + invoice badge */ .qbo-page .qbo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0} .qbo-page .qbo-row form{margin:0} .qbo-page input[type=text],.qbo-page select{min-height:34px} .qbo-page .qbo-scroll{max-height:340px;overflow:auto;margin-top:8px} .qbo-page .qbo-scroll table{width:100%;border-collapse:collapse;font-size:13px} .qbo-page .qbo-scroll th,.qbo-page .qbo-scroll td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#e2e8f0);vertical-align:top} .qbo-page .qbo-item{padding:8px 0;border-bottom:1px solid var(--line,#e2e8f0)} .qbo-ok{background:#dcfce7!important;color:#166534!important} .qbo-bad{color:#b91c1c} span.badge.qbo-bad{background:#fee2e2!important;color:#991b1b!important} .qbo-warn{background:#fef3c7!important;color:#92400e!important} span.badge.qbo-muted{background:#e2e8f0!important;color:#475569!important} html[data-theme=dark] .qbo-ok{background:#14532d!important;color:#bbf7d0!important} html[data-theme=dark] span.badge.qbo-bad{background:#7f1d1d!important;color:#fecaca!important} html[data-theme=dark] .qbo-warn{background:#78350f!important;color:#fde68a!important} html[data-theme=dark] span.badge.qbo-muted{background:#334155!important;color:#cbd5e1!important} html[data-theme=dark] .qbo-bad{color:#fca5a5} .qbo-page .ce-bar{position:static!important;margin-top:10px;background:none;border:0;padding:0} /* saved cards block + card phone page */ .sc-list{list-style:none;margin:0 0 8px;padding:0}.sc-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.sc-list li:first-child{border-top:0} .sc-ic{font-size:20px}.sc-t{flex:1;min-width:0}.sc-sub{display:block;color:var(--muted);font-size:12px} .sc-act{display:flex;gap:6px}.sc-act form,.sc-bar form{margin:0}.sc-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.sc-bar form{display:flex;gap:6px} .cp-box{border:1px solid var(--line);border-radius:8px;padding:11px 12px;background:var(--white);min-height:42px} .button.sm{min-height:28px;height:28px;padding:0 10px;font-size:12px} /* no horizontal scroll: quick-add buttons become icon-only on narrower content areas (labels stay as tooltips / aria-labels) */ @media(max-width:1000px){.page-head .qa-group .qt{display:none}.page-head .qa-group .qa.add-button{padding:0 11px!important}.page-head,.dashboard-actions{min-width:0;max-width:100%}} .acct-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}.acct-row input[type=email]{height:var(--control-h);min-height:var(--control-h);margin-top:0;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--text);flex:1 1 220px} .acct-err{color:#b91c1c}html[data-theme=dark] .acct-err{color:#fca5a5} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .acct-dates{margin-top:2px} /* /account/ styling pass 2026-09-27: harmonious cards, no floating dead-space bars, custom file control, small tri-tone section icons */ .acct-page .ce-card h3{display:flex;align-items:center;gap:8px} .acct-ic{width:17px;height:17px;flex:none} .acct-page .ce-card.ic-teal .acct-ic{color:var(--hd-teal)} .acct-page .ce-card.ic-sky .acct-ic{color:var(--hd-sky)} .acct-page .ce-card.ic-red .acct-ic{color:var(--hd-red)} .acct-page .ce-card.ic-blue .acct-ic{color:var(--hd-blue)} /* form-actions bar: end-of-form footer, not a floating strip (this page's forms are short, one per card) */ .acct-page .ce-bar{position:static;margin:12px 0 0;padding:0;border:0;background:none;box-shadow:none;min-height:0;border-radius:0} .acct-page .ce-bar .button{flex:none;min-width:0} /* Identity: avatar + choose/upload/remove ALL in one row (only wraps at mobile widths), single standard gap before the name fields */ .acct-identity{display:flex;align-items:center;gap:14px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap} .acct-photo{width:56px;height:56px;font-size:1.3em;flex:none} .acct-photo-actions{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap} .acct-photo-actions .acct-row{margin:0;align-items:center} @media (max-width:520px){.acct-photo-actions{flex-direction:column;align-items:flex-start}} .acct-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .acct-file-btn{height:var(--control-h);min-height:var(--control-h);display:inline-flex;align-items:center;padding:0 16px;margin:0;cursor:pointer} .acct-filename{font-size:.85em;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:520px){.acct-identity{flex-direction:column;align-items:flex-start}} /* /account/ tabs (2026-09-27): reuse the existing .ce-tabs / .ce-panel system (crm/templates/crm/customer_edit.html), JS in app.js adds .ce-js */ /* Overview tab: compact Variant B header (avatar+identity left, stat chips right, single row, avatar/text/chips share one vertical center) */ .acct-hdr{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 12px} .acct-hdr-av{width:36px;height:36px;font-size:1em;flex:none;line-height:36px} .acct-hdr-id{min-width:0;display:flex;flex-direction:column;justify-content:center} .acct-hdr-name{font-size:13.5px;font-weight:800;line-height:1.2;display:flex;align-items:center;gap:7px;white-space:nowrap} .acct-hdr-mail{color:var(--muted);font-size:11.5px;line-height:1.2;margin-top:1px} .acct-hdr-chips{margin-left:auto;display:flex;align-items:center;gap:6px} .acct-chip{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:3px 9px;text-align:center;min-width:96px;line-height:1.2} .acct-chip .l{font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);line-height:1.2} .acct-chip .v{font-size:11px;font-weight:700;margin-top:1px;white-space:nowrap;line-height:1.2} @media (max-width:700px){.acct-hdr{flex-wrap:wrap}.acct-hdr-chips{margin-left:0;width:100%}.acct-chip{flex:1}} /* /account/ Time zone tab: merge search+select into one visually grouped control, tidy helper lines (2026-09-27) */ #tab-timezone .tz-filter{margin:0!important;border-radius:8px 8px 0 0;border-bottom:0!important} #tab-timezone select[data-tz-select]{margin-top:0!important;border-radius:0 0 8px 8px;border-top:1px solid var(--line)} #tab-timezone .tz-preview{margin:8px 0 0!important;color:var(--muted);font-size:.85em;line-height:1.3} #tab-timezone .ce-field>p.uf-help:not(.tz-preview){margin:2px 0 0!important;color:var(--muted);font-size:.85em;line-height:1.3} #tab-timezone .acct-tz-hint{margin:2px 0 6px!important;color:var(--muted);font-size:.85em} /* /account/ Time zone tab: effective-zone summary + DST info + explicit org-default checkbox (2026-09-27) */ .acct-tz-now{display:flex;flex-direction:column;gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px} .acct-tz-row{display:flex;gap:10px;align-items:baseline;font-size:.9em} .acct-tz-row .l{color:var(--muted);min-width:130px;flex:none;font-size:.9em} .acct-tz-row .v{font-weight:700} .acct-tz-row .acct-tz-clock{font-variant-numeric:tabular-nums;font-weight:700} .acct-tz-default{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:600} .acct-tz-default input{width:16px;height:16px} #tz-picker.is-disabled{opacity:.5;pointer-events:none} /* Time zone tab: this card is alone in its panel (marked ce-wide for the shared .ce-sections layout) -- cap it to the same comfortable content width as the other tabs instead of stretching across the whole row, and give the picker field enough room for the search+select (tz.css caps those at 520px) since the generic .acct-name-row .ce-field{width:220px} rule (sized for short Profile/Phone fields) would otherwise squash it. */ #tab-timezone .ce-card{max-width:700px;justify-self:start} #tab-timezone .acct-name-row #tz-picker{width:520px;flex:0 1 520px} #tab-timezone .tz-preview{display:none} /* /account/ Security tab: fixed +1 country-code prefix next to the phone field */ .acct-phone-row{display:flex;align-items:center;gap:0} .acct-phone-prefix{display:inline-flex;align-items:center;height:var(--control-h);min-height:var(--control-h);padding:0 10px;border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;background:var(--soft);color:var(--muted);font-weight:700} .acct-phone-row input{border-radius:0 8px 8px 0!important} /* /account/: cap each card's interactive content to a comfortable reading width so the Save/action button stays next to its fields instead of stretching to the far right edge of a very wide (4K) card -- the card background itself stays full width. */ .acct-page .ce-panel .ce-grid,.acct-page .ce-panel .ce-bar,.acct-page .ce-panel form.acct-row{max-width:700px} /* /account/ Profile tab: First name / Last name / Save all in ONE row; the card hugs its widest row (photo row vs this row) instead of a fixed column or full card width */ .acct-name-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap} .acct-name-row .ce-field{flex:0 0 auto;width:220px} .acct-name-save{flex:none;height:var(--control-h);min-height:var(--control-h)} /* /account/ Sign-in & security tab: same content-hugging card treatment as Profile, for consistency; phone note sits under its row */ /* the Sign-in-email help paragraph is long unwrapped text that was inflating this card's fit-content width far past its actual row (700px cap) -- cap it so it wraps and all three Security cards size to their real content, not a stray long sentence */ #tab-security .ce-card p.uf-help{max-width:700px} .acct-phone-note{margin-top:8px!important} /* Columns: icon button that JS appends to the page-head action row (app.js) -- same height as its neighbours */ .page-head .row-actions .columns-btn{padding:0!important;width:var(--control-h);min-width:var(--control-h);flex:none} .page-head .row-actions .columns-btn svg{display:block} /* ===== Site fix 2 (2026-11-07): shared control sizes (site audit S2, S4, S8, S9, S12, S13, A5) ===== */ /* Default for any form control that no component styles: the standard 36px field, regular weight. Zero-class specificity, so every component rule (grid filters, page head, compact toolbars) still wins. */ input:where(:not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=range],[type=color],[type=image],[type=submit],[type=button],[type=reset])),select:where(:not([multiple],[size])){height:var(--control-h,36px);font-weight:400} select:where(:not([multiple],[size])){padding-top:0;padding-bottom:0} main input:where([type=file]):not(.acct-file-input){height:var(--control-h,36px);padding:0 6px 0 0;line-height:calc(var(--control-h,36px) - 2px);border:0;background:none;font-weight:400} main input:where([type=file]):not(.acct-file-input)::file-selector-button{height:var(--control-h,36px);margin-right:10px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--accent);font:inherit;font-weight:600;cursor:pointer} /* Buttons without the .button class (plain