/* ── Cross-document View Transitions (the iframe shell's replacement) ────────────── Every tab is a REAL page load again; there is no page iframe, so modals/overlays behave exactly as they do on a standalone page. `navigation:auto` here is used ONLY for its paint-holding: the browser keeps the old page on screen until the new document paints, so the chrome (sidebar, topbar, customer header, tabs — pixel-identical between pages) never blinks. Every snapshot layer stays un-animated (see the safety net below): an earlier attempt that let the layers animate flashed BLACK for the first frame of the new document. Do NOT animate the ::view-transition layers, and do not remove the opaque html/body backgrounds. The soft cross-fade is done instead by the new document itself — `.body` fades in on load, which behaves identically in Chrome, Safari and Firefox. */ @view-transition{ navigation:auto; } .body{ animation:abzBodyIn .18s cubic-bezier(.4,0,.2,1) both; } @keyframes abzBodyIn{ from{ opacity:0; } } /* ---------- Table title rails: one control height everywhere ---------- Every button, dropdown, search field and icon button that sits in a table's toolbar rail is exactly 38px tall, on every page, so the rail reads as one band. Vertical padding is zeroed (heights are fixed); horizontal padding, colours and borders stay with each control's own rule. */ :is(.sectoolbar,.toolrow,.tbar,.sumtoolbar,.sumtools,.ch.chrow,.actiongroup,.tkbar) :is(.search,.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,select,button:not(.searchclear):not(.stog)){ height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0; } :is(.sectoolbar,.toolrow,.tbar,.sumtoolbar,.sumtools,.ch.chrow) :is(.entgrp,.ftgrp){display:inline-flex;align-items:center;} /* Row selection is shown by the CHECKBOX ONLY — never tint the row, in either theme. Only the td background is cleared, so the tr-level zebra stripe still shows through. */ :is(.table,.tutable,.dtable,.sumtbl,.mptable,.striped-rows) tbody tr:is(.selected,.sel)>td{background:transparent !important;} /* DARK MODE: #D0D4D9 is the main "white" — card/table/modal titles, buttons, table text */ html.dark :is(.cname h1,.card .ch h3,.card>.ch h3,.sectoolbar h2,.toolrow h2,.tbar h2,.sumtoolbar h2,#tblTitle, .tkhead h2,.hxhd h3,.cdochd h3,.vthead h2,.vtmhead h2,.mphd h2,.ptmhd h2,.shead h2, .table tbody td,.table td.lead,.table td.num,.dtable td,.sumtbl tbody td,.hxtbl tbody td,.vtatbl td,.asttbl td,.mptable td,.ftptable td){color:#D0D4D9 !important;} html.dark :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.tkcancel,.hxa,.vtbtn,.vtedit,.cdocbtn,.acttrackbtn,.fchoose,#vtChoose):not(.cyan):not(.tabactive):not(.open):not(.active):not(.ghost-cyan){color:#D0D4D9 !important;} html.dark :is(.table tbody td,.hxtbl tbody td) :is(b,strong,.lead,.c2a){color:#D0D4D9 !important;} /* DARK MODE: every modal / off-canvas backdrop wash is #373745 at 80% */ html.dark :is(.tkov,.hxov,.cdocov,.ov,.dlhov,.dpaov,.mpov,.ptmov,.vtov,.asgov,.invov,.hxdocov,.capzov,.msgov,.fileov,.ftpov,.addrov,.contactov,.mandateov,.ddsetupov,.ddtrackov,.scrim,.offscrim){background:rgba(55,55,69,.8) !important;} /* Toasts ALWAYS sit above every modal wash, off-canvas panel and nested popover. Page-level `.toastwrap{z-index:120}` (and view-ticket.js's inline 200000) lose to this !important rule, so a toast fired from inside any modal is never dimmed or buried. */ :is(.toastwrap,#toastWrap,.vttoastwrap,#vtToastWrap,#ordToastWrap){z-index:300000 !important;} /* LIGHT MODE: one border colour everywhere + flat cards (no drop shadow) */ html:not(.dark){--line:#E6EAEE;--line-2:#E6EAEE;} /* FLAT: no drop shadow on cards or buttons, in either theme (overlays/menus keep theirs) */ :is(.card,.kpi,.listcard,.chartcard,.cardpad,.fccard,.sumcard,.tblwrap,.sheet,.ftpinfo,.contact,.prod,.tile,.msg,.stat), :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,.actbtn,.detbtn,.simchip,.dchip,.tkcancel,.tknext,.tkopt,.acttrackbtn,.astexport,.asgexport,.hxa,.vtbtn,.vtedit,.vtmsave,.cdocbtn,.fchoose,#vtChoose,.actdrop-btn,.pgb,.sbtn,button.cyan){box-shadow:none !important;} html:not(.dark) :is(.card,.kpi,.listcard,.chartcard,.cardpad,.fccard,.sumcard,.tblwrap,.sheet,.ftpinfo,.contact,.prod){box-shadow:none;} /* LIGHT MODE: bordered (plain/neutral) buttons all use #E6EAEE, hover changes the background only — the border never deepens. Coloured/solid + active states keep theirs. */ html:not(.dark) :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,.ftpill,.actbtn,.detbtn,.simchip,.dchip,.tkcancel,.acttrackbtn,.astexport,.asgexport,.hxa,.vtbtn,.vtedit,.vtchoose,#vtChoose,.fchoose,.vtdd-btn,.ftpeye,.actdrop-btn):not(.cyan):not(.open):not(.tabactive):not(.active), html:not(.dark) :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,.ftpill,.actbtn,.detbtn,.simchip,.dchip,.tkcancel,.acttrackbtn,.astexport,.asgexport,.hxa,.vtbtn,.vtedit,.vtchoose,#vtChoose,.fchoose,.vtdd-btn,.ftpeye,.actdrop-btn):not(.cyan):not(.open):not(.tabactive):not(.active):hover{ border-color:#E6EAEE; } /* DARK MODE: same contract — neutral/bordered buttons and icon buttons keep var(--line) at rest AND on hover; only the background changes. Coloured/solid + active states keep theirs. */ html.dark :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,.ftpill,.actbtn,.detbtn,.simchip,.dchip,.tkcancel,.acttrackbtn,.astexport,.asgexport,.hxa,.vtbtn,.vtedit,.vtchoose,#vtChoose,.fchoose,.vtdd-btn,.ftpeye,.actdrop-btn,.cal-preset,.cal-nav):not(.cyan):not(.open):not(.tabactive):not(.active):not(.primary), html.dark :is(.btn,.fbtn,.bulkbtn,.vubtn,.repbtn,.mbtn,.entbtn,.entgrp,.rd-btn,.exp-btn,.ftbtn,.ftgrp,.ftpill,.actbtn,.detbtn,.simchip,.dchip,.tkcancel,.acttrackbtn,.astexport,.asgexport,.hxa,.vtbtn,.vtedit,.vtchoose,#vtChoose,.fchoose,.vtdd-btn,.ftpeye,.actdrop-btn,.cal-preset,.cal-nav):not(.cyan):not(.open):not(.tabactive):not(.active):not(.primary):hover{ border-color:var(--line) !important; } /* Customer header meta rail (Brighouse, UK · Since · Partner · Account Manager) sits on ONE line only where it actually FITS. The rail measures ~700px nowrap and the header actions ~330px, so below 1280px the sheet (overflow:hidden) clipped the actions clean off — the rail must be allowed to wrap there. Verify any change by measuring .chead scrollWidth vs clientWidth at 1024 / 1280 / 1440px: it must never exceed clientWidth. */ @media(min-width:1280px){.chead .cmeta{flex-wrap:nowrap;}} /* Main nav: the active (magenta) tab is FLAT — no drop shadow, in either theme. Every page declares its own `.tab.active{box-shadow:…}`; this shared rule outranks it (0,3,0) and loads after the page's inline