/* Fonts load from a in base.html head (12 June): the @import
chain here delayed font discovery and caused late text swaps. */
/* GA4 chrome — placeholder styling tokens, refined under visual-parity phase. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body {
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
font-size: 13px;
color: #1a1a1a;
background: #d7d7d7;
}
/* Only the fixed app canvas pins the viewport; standalone pages
(print views, login) scroll like normal documents. */
body:has(.ga4-fit-stage) {
overflow: hidden;
}
:root {
/* Global UI density. Desktop GA4 is denser than the web reskin —
the whole app canvas renders at this zoom (see fitCanvas() in
ga4.js, which compensates the canvas width/height so the page
still fills the window). Overlays appended to get the
same zoom below so nothing renders at mixed scales. */
--ga4-ui-zoom: 0.85;
}
/* Body-appended overlays sit outside the zoomed canvas — match them. */
.ga4-search-popover,
.ga4-cal-drop-label,
body > .ga4-doc-modal {
zoom: var(--ga4-ui-zoom);
}
.ga4-fit-stage {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #d7d7d7;
}
.ga4-fit-sizer {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.ga4-fit-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--ga4-view-height, 100vh);
min-height: 0;
overflow: hidden;
transform: none;
transform-origin: top left;
display: flex;
flex-direction: column;
}
/* Top bar */
.ga4-topbar {
display: flex;
align-items: center;
gap: 0;
background: linear-gradient(#5e5e5e, #353535);
color: #fff;
padding: 0 14px;
height: 55px;
border-top: 1px solid #797979;
border-bottom: 2px solid #1e1e1e;
overflow: hidden;
flex: 0 0 auto;
}
.ga4-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
background: #fff;
color: #c2002f;
font-weight: 900;
font-family: "Arial Black", Arial, sans-serif;
text-decoration: none;
margin-right: 8px;
border-radius: 3px;
}
.ga4-nav {
color: #fff;
text-decoration: none;
min-width: 62px;
width: clamp(62px, 4.2vw, 84px);
flex: 0 1 clamp(62px, 4.2vw, 84px);
height: 55px;
padding: 5px 4px 4px;
font-size: 12px;
border-left: 1px solid #2b2b2b;
border-right: 1px solid #5e5e5e;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.ga4-nav:hover { background: linear-gradient(#686868, #414141); }
.ga4-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
min-width: 22px;
padding: 0 3px;
border-radius: 2px;
background: #4f7886;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.ga4-right { margin-left: auto; display: inline-flex; gap: 2px; }
/* Quick search row */
.ga4-search {
background: linear-gradient(#454545, #292929);
border-top: 1px solid #555;
border-bottom: 2px solid #151515;
padding: 4px 14px;
display: flex;
align-items: center;
gap: 4px;
color: #ddd;
flex: 0 0 auto;
}
.ga4-search input {
width: 210px;
padding: 3px 8px;
font-size: 12px;
border: 1px solid #1d1d1d;
background: #515151;
color: #fff;
font-style: italic;
}
.ga4-search input::placeholder { color: #e5e5e5; }
.ga4-search button {
height: 24px;
border: 1px solid #181818;
background: linear-gradient(#656565, #383838);
color: #fff;
font-size: 11px;
}
.ga4-search a { color: #ddd; text-decoration: none; font-size: 12px; padding: 4px 18px; border: 1px solid #1f1f1f; background: #4b4b4b; }
.ga4-user { margin-left: auto; font-style: italic; }
/* Content area */
.ga4-content {
max-width: none;
margin: 0;
padding: 10px 14px 18px;
background: #d7d7d7;
border: 0;
flex: 1 1 auto;
min-height: 0;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ga4-h2 {
margin: 0 0 10px;
font-size: 16px;
color: #1a1a1a;
}
.ga4-muted { color: #555; font-size: 12px; }
/* KPI row */
.ga4-kpi-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.ga4-kpi-wide { grid-column: span 4; }
.ga4-kpi {
border: 1px solid #c9cbcf;
background: #f7f8fa;
padding: 8px 10px;
}
.ga4-kpi-label {
font-size: 11px;
text-transform: uppercase;
color: #555;
letter-spacing: 0.04em;
}
.ga4-kpi-value {
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #1a1a1a;
margin-top: 4px;
}
/* Login */
.ga4-login {
background: #c2002f;
min-height: var(--ga4-view-height, 100vh);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ga4-login-card {
background: #fff;
padding: 22px 26px;
width: 320px;
border-radius: 4px;
border: 1px solid #6b0017;
box-shadow: 0 6px 28px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
gap: 10px;
}
.ga4-login-card h1 {
margin: 0;
font-size: 18px;
color: #c2002f;
}
.ga4-login-sub { margin: 0 0 4px; color: #555; font-size: 12px; }
.ga4-login-card label { display: flex; flex-direction: column; font-size: 12px; color: #333; gap: 3px; }
.ga4-login-card input {
padding: 6px 8px;
font-size: 13px;
border: 1px solid #b1b3b7;
}
.ga4-login-card button {
margin-top: 4px;
background: #c2002f;
color: #fff;
border: 0;
padding: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 3px;
}
.ga4-login-card button:hover { background: #a30028; }
.ga4-error {
background: #fff2f3;
border: 1px solid #c2002f;
color: #c2002f;
padding: 6px 8px;
font-size: 12px;
margin: 0;
}
/* customers — appended by Phase 2 customers build (do not interleave with foundation rules above) */
.ga4-cust-ribbon {
background: #6f6f6f;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 5px 10px;
margin: -4px -8px 0 -8px;
}
.ga4-cust-ribbon-count {
font-weight: 400;
margin-left: 6px;
color: #f0f0f0;
}
.ga4-cust-actionbar {
display: flex;
gap: 6px;
background: #ececec;
padding: 6px 8px;
border-bottom: 1px solid #c8c8c8;
margin: 0 -8px;
}
.ga4-cust-btn {
background: #fff;
border: 1px solid #b1b3b7;
padding: 4px 14px;
font-size: 12px;
cursor: pointer;
color: #1a1a1a;
border-radius: 2px;
}
.ga4-cust-btn:hover:not(:disabled) { background: #f5f5f5; }
.ga4-cust-btn:disabled { color: #888; cursor: not-allowed; background: #fafafa; }
.ga4-cust-btn-dropdown::after { content: ''; }
.ga4-cust-alpha {
display: flex;
gap: 0;
background: #ececec;
padding: 4px 6px;
border-bottom: 1px solid #c8c8c8;
margin: 0 -8px;
font-size: 12px;
}
.ga4-cust-alpha button {
background: #fff;
border: 1px solid #b1b3b7;
border-right: 0;
width: 28px;
height: 22px;
cursor: pointer;
font-weight: 700;
color: #1a1a1a;
padding: 0;
}
.ga4-cust-alpha button:last-child { border-right: 1px solid #b1b3b7; }
.ga4-cust-alpha button:hover { background: #f5f5f5; }
.ga4-cust-alpha button.active { background: #c2002f; color: #fff; }
.ga4-cust-alpha-clear {
width: auto !important;
padding: 0 8px !important;
margin-left: 6px !important;
border-right: 1px solid #b1b3b7 !important;
}
.ga4-cust-grid {
margin: 0 -8px;
border: 1px solid #c8c8c8;
background: #fff;
}
.ga4-cust-grid .tabulator-header {
background: #d8d8d8;
border-bottom: 1px solid #b1b3b7;
font-weight: 700;
font-size: 12px;
color: #1a1a1a;
}
.ga4-cust-grid .tabulator-col,
.ga4-cust-grid .tabulator-cell {
padding: 4px 8px;
font-size: 15px;
border-right: 1px solid #e2e2e2;
}
.ga4-cust-grid .tabulator-row { background: #fff; }
.ga4-cust-grid .tabulator-row:nth-child(even) { background: #fafafa; }
.ga4-cust-grid .tabulator-row.tabulator-row-odd { background: #fff; }
.ga4-cust-grid .tabulator-row:hover { background: #ffe9ed; cursor: pointer; }
.ga4-cust-grid .tabulator-row.tabulator-selected { background: #c2002f33; }
.ga4-cust-grid .tabulator-cell.tabulator-editing { background: #fff7c2; }
.ga4-cust-acc { font-weight: 700; }
.ga4-cust-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga4-cust-contact { color: #555; margin-left: 18px; }
/* Customer record page */
.ga4-cust-rec-ribbon {
background: #d3d3d3;
border: 1px solid #b1b3b7;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
margin: -4px -8px 0 -8px;
}
.ga4-cust-fav {
background: transparent;
border: 0;
font-size: 18px;
color: #1a1a1a;
cursor: pointer;
padding: 0 2px;
}
.ga4-cust-rec-title { flex: 1; }
.ga4-cust-notice {
background: #ececec;
border: 1px solid #b1b3b7;
padding: 3px 18px;
font-size: 12px;
font-weight: 400;
cursor: pointer;
}
.ga4-cust-rec-actionbar {
display: flex;
gap: 0;
background: #ececec;
padding: 6px 8px;
border-bottom: 1px solid #b1b3b7;
margin: 0 -8px;
}
.ga4-cust-rec-actionbar .ga4-cust-btn {
border-radius: 0;
border-right: 0;
padding: 6px 22px;
font-size: 13px;
min-width: 110px;
}
.ga4-cust-rec-actionbar .ga4-cust-btn:last-child { border-right: 1px solid #b1b3b7; }
.ga4-cust-card {
background: #f0f0f0;
border: 1px solid #b1b3b7;
border-top: 0;
padding: 10px 14px;
margin: 0 -8px;
}
.ga4-cust-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
font-size: 13px;
}
.ga4-cust-row label {
width: 110px;
text-align: left;
color: #1a1a1a;
font-weight: 400;
}
.ga4-cust-row input[type=text] {
background: #fff;
border: 1px solid #b1b3b7;
padding: 3px 6px;
font-size: 13px;
height: 22px;
box-sizing: border-box;
color: #1a1a1a;
}
.ga4-cust-input-wide { width: 520px; max-width: 70%; }
.ga4-cust-input-title { width: 70px; }
.ga4-cust-input-name { width: 220px; }
.ga4-cust-input-houseno { width: 110px; }
.ga4-cust-input-postcode { width: 140px; }
.ga4-cust-inline-label { width: auto !important; margin-left: 8px; }
.ga4-cust-icons {
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
.ga4-cust-icons button {
background: #fff;
border: 1px solid #b1b3b7;
width: 42px;
height: 36px;
cursor: pointer;
font-size: 20px;
color: #1a1a1a;
padding: 0;
}
.ga4-cust-icon-btn {
background: #fff;
border: 1px solid #b1b3b7;
width: 32px;
height: 30px;
cursor: pointer;
font-size: 15px;
color: #1a1a1a;
padding: 0;
}
.ga4-cust-icons button:disabled,
.ga4-cust-icon-btn:disabled { color: #666; cursor: not-allowed; }
.ga4-cust-sep {
border-top: 1px solid #b1b3b7;
margin: 8px 0;
}
/* Tabs under the record card */
.ga4-cust-tabs {
display: flex;
gap: 0;
background: #d3d3d3;
border-bottom: 1px solid #b1b3b7;
padding: 0 8px;
margin: 8px -8px 0 -8px;
}
.ga4-cust-tab {
background: #aaa;
color: #1a1a1a;
border: 1px solid #888;
border-bottom: 0;
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
min-width: 110px;
}
.ga4-cust-tab:hover { background: #b5b5b5; }
.ga4-cust-tab.active {
background: #fff;
border-bottom: 1px solid #fff;
position: relative;
top: 1px;
color: #1a1a1a;
border-top: 2px solid #1a1a1a;
}
.ga4-cust-tab-count {
background: #ececec;
color: #1a1a1a;
border-radius: 9px;
padding: 1px 7px;
font-size: 11px;
margin-left: 6px;
font-weight: 600;
}
.ga4-cust-tab.active .ga4-cust-tab-count { background: #c2002f33; }
.ga4-cust-tabpane {
display: none;
background: #fff;
border: 1px solid #b1b3b7;
border-top: 0;
margin: 0 -8px;
padding: 0;
}
.ga4-cust-tabpane.active { display: block; }
.ga4-cust-doc-table,
.ga4-cust-veh-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ga4-cust-doc-table thead th,
.ga4-cust-veh-table thead th {
background: #ececec;
border-bottom: 1px solid #b1b3b7;
text-align: left;
padding: 6px 10px;
font-weight: 700;
font-size: 12px;
}
.ga4-cust-doc-table td,
.ga4-cust-veh-table td {
padding: 6px 10px;
border-bottom: 1px solid #e2e2e2;
}
.ga4-cust-doc-table .col-date { width: 110px; }
.ga4-cust-doc-table .col-docno { width: 110px; font-weight: 700; }
.ga4-cust-doc-table .col-reg { width: 120px; font-weight: 700; }
.ga4-cust-doc-table .col-veh { width: 240px; }
.ga4-cust-veh-table .col-reg { width: 160px; font-weight: 700; }
.ga4-cust-doc-row,
.ga4-cust-veh-row { cursor: pointer; }
.ga4-cust-doc-row:hover,
.ga4-cust-veh-row:hover { background: #ffe9ed; }
.ga4-cust-doc-row:focus,
.ga4-cust-veh-row:focus { outline: 2px solid #c2002f; outline-offset: -2px; }
.ga4-cust-empty {
color: #666;
font-style: italic;
padding: 14px 10px !important;
}
.ga4-cust-gap {
color: #555;
padding: 18px 14px;
font-size: 13px;
background: #fafafa;
}
/* vehicles */
.ga4-veh-ribbon {
background: #6f6f6f;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid #555;
}
.ga4-veh-ribbon-count {
font-weight: 400;
margin-left: 6px;
color: #f3f3f3;
}
.ga4-veh-searchrow {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
background: #f3f3f3;
border-left: 1px solid #b1b3b7;
border-right: 1px solid #b1b3b7;
}
.ga4-veh-searchrow input[type=text] {
flex: 0 0 320px;
padding: 4px 8px;
font-size: 13px;
border: 1px solid #b1b3b7;
background: #fff;
}
.ga4-veh-searchrow button {
background: #fff;
border: 1px solid #b1b3b7;
padding: 3px 8px;
font-size: 13px;
cursor: pointer;
}
.ga4-veh-searchrow button:hover { background: #f0f0f0; }
.ga4-veh-clear { color: #c2002f; font-weight: 700; }
.ga4-veh-actionbar {
display: flex;
background: #ececec;
border: 1px solid #b1b3b7;
border-top: 0;
}
.ga4-veh-btn {
background: #ececec;
border: 0;
border-right: 1px solid #b1b3b7;
padding: 6px 14px;
font-size: 13px;
cursor: pointer;
color: #1a1a1a;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.ga4-veh-btn:hover:not(:disabled) { background: #f5f5f5; }
.ga4-veh-btn:disabled { color: #888; cursor: not-allowed; background: #fafafa; }
.ga4-veh-alpha {
display: flex;
background: #fff;
border: 1px solid #b1b3b7;
border-top: 0;
}
.ga4-veh-alpha button {
flex: 1;
background: #fff;
border: 0;
border-right: 1px solid #b1b3b7;
padding: 4px 0;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.ga4-veh-alpha button:last-child { border-right: 1px solid #b1b3b7; }
.ga4-veh-alpha button:hover { background: #f5f5f5; }
.ga4-veh-alpha button.active { background: #c2002f; color: #fff; }
.ga4-veh-alpha-clear {
flex: 0 0 56px !important;
background: #f3f3f3 !important;
}
.ga4-veh-grid {
margin: 0;
border: 1px solid #b1b3b7;
border-top: 0;
}
.ga4-veh-grid .tabulator-header {
background: #ececec;
border-bottom: 1px solid #b1b3b7;
font-weight: 700;
}
.ga4-veh-grid .tabulator-col,
.ga4-veh-grid .tabulator-cell {
font-size: 15px;
padding: 6px 10px;
}
.ga4-veh-grid .tabulator-row { background: #fff; }
.ga4-veh-grid .tabulator-row:nth-child(even) { background: #fafafa; }
.ga4-veh-grid .tabulator-row.tabulator-row-odd { background: #fff; }
.ga4-veh-grid .tabulator-row:hover { background: #ffe9ed; cursor: pointer; }
.ga4-veh-grid .tabulator-row.tabulator-selected { background: #c2002f33; }
.ga4-veh-reg { font-weight: 700; }
.ga4-veh-spanner {
display: inline-block;
width: 18px;
color: #6f6f6f;
margin-right: 6px;
}
.ga4-veh-mm { }
.ga4-veh-acc { font-weight: 700; margin-right: 12px; }
.ga4-veh-custname { color: #1a1a1a; }
/* Record page */
.ga4-veh-rec-ribbon {
display: flex;
align-items: center;
gap: 8px;
background: #6f6f6f;
color: #fff;
padding: 4px 10px;
border: 1px solid #555;
font-size: 13px;
font-weight: 600;
}
.ga4-veh-fav {
background: transparent;
border: 0;
color: #f3c500;
font-size: 18px;
cursor: pointer;
padding: 0 4px;
}
.ga4-veh-rec-title { flex: 1; }
.ga4-veh-notice {
background: #c2002f;
color: #fff;
border: 0;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.ga4-veh-rec-actionbar {
display: flex;
background: #ececec;
border: 1px solid #b1b3b7;
border-top: 0;
}
.ga4-veh-rec-actionbar .ga4-veh-btn {
border-right: 1px solid #b1b3b7;
background: #ececec;
}
.ga4-veh-rec-actionbar .ga4-veh-btn:last-child { border-right: 1px solid #b1b3b7; }
.ga4-veh-card {
background: #fff;
border: 1px solid #b1b3b7;
border-top: 0;
padding: 12px 14px;
}
.ga4-veh-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.ga4-veh-row label {
flex: 0 0 130px;
font-size: 12px;
font-weight: 700;
color: #333;
}
.ga4-veh-row input[type=text] {
padding: 3px 6px;
font-size: 13px;
border: 1px solid #b1b3b7;
background: #fff;
}
.ga4-veh-row input[type=text]:disabled { background: #f0f0f0; color: #888; }
.ga4-veh-input-reg { width: 200px; font-weight: 700; }
.ga4-veh-input-mk { width: 220px; }
.ga4-veh-input-md { width: 320px; }
.ga4-veh-input-wide { width: 540px; max-width: 70%; }
.ga4-veh-input-mid { width: 200px; }
.ga4-veh-input-cc { width: 110px; }
.ga4-veh-input-tyre { width: 140px; }
.ga4-veh-inline-label {
flex: 0 0 auto !important;
margin-left: 12px !important;
}
.ga4-veh-inline-btn {
background: #ececec;
border: 1px solid #b1b3b7;
padding: 3px 10px;
font-size: 12px;
cursor: pointer;
}
.ga4-veh-inline-btn:disabled { color: #888; cursor: not-allowed; background: #fafafa; }
.ga4-veh-tyre-lbl {
font-size: 12px;
color: #555;
font-weight: 600;
}
.ga4-veh-sep {
height: 1px;
background: #b1b3b7;
margin: 10px -14px;
}
.ga4-veh-tabs {
display: flex;
background: #f3f3f3;
border: 1px solid #b1b3b7;
border-top: 0;
margin-top: 8px;
}
.ga4-veh-tab {
background: #f3f3f3;
border: 0;
border-right: 1px solid #b1b3b7;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
color: #1a1a1a;
}
.ga4-veh-tab:hover { background: #ececec; }
.ga4-veh-tab.active {
background: #fff;
border-bottom: 2px solid #c2002f;
position: relative;
top: 0;
}
.ga4-veh-tab-count {
display: inline-block;
background: #ececec;
border-radius: 9px;
padding: 0 7px;
font-size: 11px;
margin-left: 6px;
font-weight: 600;
}
.ga4-veh-tab.active .ga4-veh-tab-count { background: #c2002f33; }
.ga4-veh-tabpane {
display: none;
background: #fff;
border: 1px solid #b1b3b7;
border-top: 0;
}
.ga4-veh-tabpane.active { display: block; }
.ga4-veh-doc-table,
.ga4-veh-rem-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ga4-veh-doc-table thead th,
.ga4-veh-rem-table thead th {
background: #ececec;
border-bottom: 1px solid #b1b3b7;
text-align: left;
padding: 6px 10px;
font-weight: 700;
font-size: 12px;
}
.ga4-veh-doc-table td,
.ga4-veh-rem-table td {
padding: 6px 10px;
border-bottom: 1px solid #e2e2e2;
}
.ga4-veh-doc-table .col-date,
.ga4-veh-rem-table .col-date { width: 110px; }
.ga4-veh-doc-table .col-docno { width: 110px; font-weight: 700; }
.ga4-veh-doc-table .col-acc { width: 110px; font-weight: 700; }
.ga4-veh-doc-table .col-cust { width: 240px; }
.ga4-veh-rem-table .col-type { width: 200px; font-weight: 700; }
.ga4-veh-rem-table .col-methods { width: 200px; }
.ga4-veh-rem-table .col-actioned { width: 110px; }
.ga4-veh-rem-table .col-resched { width: 140px; }
.ga4-veh-doc-row { cursor: pointer; }
.ga4-veh-doc-row:hover { background: #ffe9ed; }
.ga4-veh-doc-row:focus { outline: 2px solid #c2002f; outline-offset: -2px; }
.ga4-veh-empty {
color: #666;
font-style: italic;
padding: 14px 10px !important;
}
.ga4-veh-gap {
color: #555;
padding: 18px 14px;
font-size: 13px;
background: #fafafa;
}
/* /vehicles */
/* ===== estimates ===== (appended by estimates page build) */
/* List ribbon */
.ga4-est-ribbon {
background: #2f6a3a;
color: #fff;
padding: 6px 12px;
font-weight: 600;
font-size: 13px;
}
.ga4-est-ribbon-count { font-weight: 400; margin-left: 8px; opacity: 0.9; }
/* Action bar buttons */
.ga4-est-actionbar {
display: flex; gap: 6px;
padding: 6px 10px; background: #f0f0f0; border-bottom: 1px solid #c8c8c8;
}
.ga4-est-btn {
padding: 4px 10px;
font-size: 12px;
border: 1px solid #888;
background: linear-gradient(#fdfdfd, #e6e6e6);
color: #222;
cursor: pointer;
border-radius: 2px;
}
.ga4-est-btn:hover:not([disabled]) { background: linear-gradient(#fff, #d4d4d4); }
.ga4-est-btn[disabled] { color: #888; cursor: not-allowed; opacity: 0.7; }
.ga4-est-btn-small { padding: 3px 8px; font-size: 11px; }
.ga4-est-btn-primary { background: linear-gradient(#fff7d6, #ffe187); }
.ga4-est-btn-dropdown::after { content: ""; }
/* Filter bar */
.ga4-est-filterbar {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; background: #f7f7f7; border-bottom: 1px solid #d0d0d0;
font-size: 12px;
}
.ga4-est-filterbar label { color: #444; }
.ga4-est-filter-label { font-weight: 600; margin-right: 4px; }
.ga4-est-date { width: 110px; padding: 2px 4px; border: 1px solid #aaa; font-size: 12px; }
.ga4-est-select { padding: 2px 4px; border: 1px solid #aaa; font-size: 12px; background: #fff; }
.ga4-est-x {
width: 22px; height: 22px; padding: 0; border: 1px solid #888;
background: linear-gradient(#fff, #ddd); color: #b00; font-weight: 700; cursor: pointer;
}
.ga4-est-x[disabled] { color: #aaa; cursor: not-allowed; }
/* Grid */
.ga4-est-grid { width: 100%; }
.ga4-est-tchip {
display: inline-block; min-width: 22px; padding: 1px 6px;
text-align: center; color: #fff; font-weight: 700; font-size: 11px;
border-radius: 2px;
}
.ga4-est-tchip-es { background: #2f8d3f; }
.ga4-est-tchip-si { background: #1d6fb2; }
/* H-0e / defect D6: GA4 Job Sheet chips are purple, not orange.
Matches the JS title strip and the JS list ribbon. */
.ga4-est-tchip-js { background: #5b3d7e; }
.ga4-est-tchip-pa, .ga4-est-tchip-cn { background: #a8324a; }
.ga4-status-pill {
display: inline-block;
min-width: 72px;
max-width: 110px;
padding: 1px 7px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 2px;
font-size: 11px;
font-weight: 700;
line-height: 16px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-est-reg {
font-family: 'Arial Black', sans-serif;
letter-spacing: 0.5px;
}
/* ----- Detail ribbon + actionbar ----- */
.ga4-est-rec-ribbon {
display: flex; align-items: center; gap: 8px;
background: #2f6a3a; color: #fff; padding: 6px 12px;
font-weight: 600; font-size: 13px;
}
.ga4-est-rec-title { flex: 1; }
.ga4-est-fav {
background: none; border: none; color: #ffd23f; font-size: 16px; cursor: pointer;
padding: 0 4px;
}
.ga4-est-notice {
background: linear-gradient(#fff, #ddd); border: 1px solid #555;
color: #222; padding: 2px 10px; font-size: 12px; cursor: pointer;
}
.ga4-est-rec-actionbar {
display: flex; gap: 6px; padding: 6px 10px;
background: #f0f0f0; border-bottom: 1px solid #c8c8c8;
}
/* Two-column vehicle/customer */
.ga4-est-rec-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
padding: 10px 12px; background: #f7f7f7;
}
.ga4-est-vehicle, .ga4-est-customer {
background: #fff; border: 1px solid #ccc; padding: 8px 10px;
}
.ga4-est-block-h {
margin: 0 0 6px 0; font-size: 12px; font-weight: 700;
color: #2f6a3a; text-transform: uppercase; letter-spacing: 0.5px;
}
.ga4-est-vrow, .ga4-est-crow {
display: flex; align-items: center; gap: 6px;
margin-bottom: 4px; font-size: 12px;
}
.ga4-est-vrow > label, .ga4-est-crow > label {
width: 90px; text-align: right; color: #444;
}
.ga4-est-vrow input, .ga4-est-crow input,
.ga4-est-vrow select, .ga4-est-crow select {
padding: 2px 4px; border: 1px solid #aaa; font-size: 12px;
background: #fafafa;
}
.ga4-est-vrow input[readonly], .ga4-est-crow input[readonly] { background: #f0f0f0; }
.ga4-est-vrow-pair { display: grid; grid-template-columns: 90px 1fr 90px 1fr; }
.ga4-est-vrow-pair input { width: 100%; }
.ga4-est-input-reg { width: 100px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.ga4-est-input-wide { flex: 1; }
.ga4-est-input-title { width: 55px; }
.ga4-est-input-name { flex: 1; }
.ga4-est-icon-btn {
background: linear-gradient(#fff, #ddd); border: 1px solid #888;
padding: 2px 6px; font-size: 12px; cursor: pointer;
}
.ga4-est-icon-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ga4-est-vactions {
display: flex; gap: 6px; margin-top: 8px; padding-top: 8px;
border-top: 1px dashed #ccc;
}
.ga4-est-cust-icons { display: flex; gap: 4px; }
.ga4-est-link { color: #1d6fb2; text-decoration: none; font-size: 12px; margin-left: auto; }
.ga4-est-link:hover { text-decoration: underline; }
.ga4-est-inline-label { margin-left: 6px; }
/* ----- Tabs (six-tab body) ----- */
.ga4-est-tabs {
display: flex; gap: 0; padding: 0 12px; margin: 0;
border-bottom: 2px solid #2f6a3a; background: #f7f7f7;
}
.ga4-est-tab {
padding: 6px 14px; font-size: 12px;
background: linear-gradient(#fff, #e8e8e8);
border: 1px solid #bbb; border-bottom: none;
cursor: pointer; color: #333;
margin-right: 2px;
}
.ga4-est-tab:hover { background: linear-gradient(#fff, #d4d4d4); }
.ga4-est-tab.active {
background: #fff; color: #2f6a3a; font-weight: 700;
border-color: #2f6a3a; border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.ga4-est-tab-count {
display: inline-block; min-width: 16px; padding: 0 5px;
margin-left: 4px;
background: #2f6a3a; color: #fff; border-radius: 8px;
font-size: 10px; font-weight: 700;
}
.ga4-est-tabpane { display: none; padding: 10px 12px; background: #fff; min-height: 240px; }
.ga4-est-tabpane.active { display: block; }
/* ----- History tab ----- */
.ga4-est-hist-grid {
display: grid; grid-template-columns: 280px 1fr; gap: 12px;
}
.ga4-est-hist-left, .ga4-est-hist-right {
background: #fafafa; border: 1px solid #ddd;
}
.ga4-est-hist-head {
background: #2f6a3a; color: #fff; padding: 4px 8px; font-size: 12px;
font-weight: 600; display: flex; align-items: center;
}
.ga4-est-hist-head .ga4-est-link { color: #cde7c4; margin-left: auto; }
.ga4-est-subtabs {
display: flex; gap: 0; background: #ececec; border-bottom: 1px solid #ccc;
}
.ga4-est-subtab {
padding: 5px 10px; font-size: 11px; border: none; cursor: pointer;
background: transparent; color: #444;
border-right: 1px solid #ccc;
}
.ga4-est-subtab:hover { background: #ddd; }
.ga4-est-subtab.active {
background: #fff; color: #2f6a3a; font-weight: 700;
border-bottom: 2px solid #2f6a3a; margin-bottom: -1px;
}
.ga4-est-subpane { display: none; padding: 4px; max-height: 360px; overflow-y: auto; }
.ga4-est-subpane.active { display: block; }
/* Tables */
.ga4-est-mini-table, .ga4-est-hist-table, .ga4-est-line-table, .ga4-est-activity-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.ga4-est-mini-table th, .ga4-est-hist-table th,
.ga4-est-line-table th, .ga4-est-activity-table th {
text-align: left; padding: 4px 6px;
background: #ececec; border-bottom: 1px solid #bbb;
font-weight: 600;
}
.ga4-est-mini-table td, .ga4-est-hist-table td,
.ga4-est-line-table td, .ga4-est-activity-table td {
padding: 4px 6px; border-bottom: 1px solid #eee;
}
.ga4-est-hist-table tr:hover, .ga4-est-doc-row:hover { background: #eaf2ff; cursor: pointer; }
.ga4-est-doc-row:focus { outline: 2px solid #1d6fb2; }
.ga4-est-empty { color: #999; font-style: italic; padding: 10px; text-align: center; }
.col-eye { width: 28px; text-align: center; }
.ga4-est-eye {
background: none; border: none; cursor: pointer; font-size: 14px; color: #1d6fb2;
}
/* ----- Description ----- */
.ga4-est-desc-bar {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
font-size: 12px;
}
.ga4-est-desc-body {
width: 100%; font-size: 12px; padding: 6px;
border: 1px solid #aaa; background: #fafafa; font-family: inherit;
}
/* ----- Labour / Parts / Advisories ----- */
.col-check { width: 28px; }
.col-handle { width: 22px; }
.col-num { width: 70px; text-align: right; }
.col-partno { width: 140px; }
.ga4-est-handle { color: #999; cursor: grab; user-select: none; text-align: center; }
.ga4-est-joblookup td { background: #f6fff0; }
.ga4-est-lookup-icon { color: #2f6a3a; margin-right: 4px; }
.ga4-est-lookup-input {
width: 100%; padding: 3px 6px; border: 1px solid #2f6a3a;
background: #f6fff0; font-size: 12px;
}
.ga4-est-line-totals {
display: flex; gap: 24px; justify-content: flex-end;
padding: 8px 12px; background: #f7f7f7; border-top: 1px solid #ddd;
font-size: 12px;
}
.ga4-est-line-totals label {
display: block; color: #666; font-size: 10px; text-transform: uppercase;
}
.ga4-est-line-totals span {
font-weight: 700; font-size: 13px;
}
/* ----- Activity ----- */
.ga4-est-activity-table td { font-size: 12px; }
.ga4-est-gap-note {
margin-top: 10px; padding: 8px; background: #fff8d6; border-left: 3px solid #d4b500;
font-size: 11px; color: #555;
}
.ga4-est-gap {
padding: 16px; color: #888; font-style: italic; text-align: center;
background: #fafafa; border: 1px dashed #ccc;
}
/* ----- Modals + side-panel ----- */
.ga4-est-modal {
position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.ga4-est-modal[hidden] { display: none; }
.ga4-est-modal-box {
background: #fff; min-width: 520px; max-width: 720px;
border: 1px solid #444; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
font-size: 12px;
}
.ga4-est-modal-small { min-width: 360px; max-width: 480px; }
.ga4-est-modal-ribbon {
background: #2f6a3a; color: #fff; padding: 6px 10px;
font-weight: 600; display: flex; align-items: center; justify-content: space-between;
}
.ga4-est-modal-x {
background: none; border: none; color: #fff; font-size: 18px; cursor: pointer;
padding: 0 4px;
}
.ga4-est-modal-actions {
display: flex; gap: 6px; padding: 6px 10px;
background: #f0f0f0; border-bottom: 1px solid #ccc;
}
.ga4-est-modal-body { padding: 10px 12px; }
.ga4-est-form-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.ga4-est-form-row label { width: 110px; text-align: right; color: #444; }
.ga4-est-form-row input, .ga4-est-form-row select { flex: 1; padding: 3px 5px; border: 1px solid #aaa; }
.ga4-est-form-row textarea { flex: 1; padding: 4px; border: 1px solid #aaa; }
.ga4-est-email-body { width: 100%; padding: 6px; border: 1px solid #aaa; }
.ga4-est-modal-blurb { font-size: 11px; color: #666; margin: 8px 0 0 0; }
.ga4-est-tech-body { display: flex; gap: 12px; align-items: flex-start; flex-direction: column; }
.ga4-est-tech-plate {
background: #ffd23f; color: #222; padding: 8px 16px;
font-family: 'Arial Black', sans-serif; font-size: 24px;
border: 2px solid #222; letter-spacing: 2px;
}
.ga4-est-tech-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
}
.ga4-est-tech-card {
background: #f7f7f7; border: 1px solid #ccc; padding: 12px; font-weight: 600;
}
/* Notices side-panel */
.ga4-est-side {
position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
background: #fff; border-left: 2px solid #2f6a3a; box-shadow: -3px 0 12px rgba(0,0,0,0.2);
z-index: 900; display: flex; flex-direction: column;
}
.ga4-est-side[hidden] { display: none; }
.ga4-est-side-ribbon {
background: #2f6a3a; color: #fff; padding: 6px 10px;
font-weight: 600; display: flex; align-items: center; justify-content: space-between;
}
.ga4-est-side-actions {
padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
border-bottom: 1px solid #ddd;
}
.ga4-est-side-body { padding: 10px; flex: 1; }
/* ===== invoices (blue ribbons; shares estimates classes) ===== */
.ga4-est-ribbon-si { background: #1d6fb2; }
.ga4-est-rec-ribbon-si { background: #155a91; }
/* GA4 desktop clone overrides */
.ga4-doc-screen {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(220px, 13vw, 255px);
gap: 12px;
flex: 1 1 auto;
min-height: 0;
height: 100%;
min-width: 0;
}
.ga4-doc-main,
.ga4-doc-side section,
.ga4-cal-main,
.ga4-cal-side section {
border: 3px solid #1f1f1f;
border-radius: 4px;
background: #efefef;
box-shadow: inset 0 0 0 1px #777;
}
.ga4-doc-main,
.ga4-cal-main {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ga4-doc-titlebar,
.ga4-cal-titlebar {
display: grid;
grid-template-columns: auto auto auto 1fr auto auto;
align-items: center;
gap: 8px;
height: 35px;
padding: 0 8px;
background: linear-gradient(#0d596b, #073747);
color: #fff;
font-size: 15px;
}
.ga4-doc-star { color: #b5d9ef; font-size: 20px; line-height: 1; }
.ga4-doc-warn { color: #ffff00; font-weight: 700; }
.ga4-doc-locked { color: #b0d8ff; }
.ga4-doc-linkref { color: #d9f7ff; }
.ga4-doc-titlebar button,
.ga4-cal-titlebar button {
height: 24px;
border: 1px solid #1d1d1d;
background: #2e6a79;
color: #fff;
}
.ga4-doc-titlebar .ga4-doc-close,
.ga4-cal-titlebar button:last-child {
background: #9b1f56;
width: 34px;
}
.ga4-doc-commandbar,
.ga4-cal-toolbar,
.ga4-cal-subbar {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(90px, max-content);
align-items: stretch;
min-height: 39px;
background: linear-gradient(#676767, #3f3f3f);
border-bottom: 2px solid #252525;
}
.ga4-doc-commandbar button,
.ga4-cal-toolbar button,
.ga4-cal-subbar button,
.ga4-cal-subbar a,
.ga4-cal-subbar select {
border: 0;
border-right: 1px solid #252525;
border-left: 1px solid #696969;
background: linear-gradient(#696969, #454545);
color: #fff;
font-size: 14px;
padding: 0 16px;
text-decoration: none;
display: grid;
place-items: center;
}
.ga4-doc-commandbar button:disabled { color: #cfcfcf; }
.ga4-doc-drop::after { content: " v"; font-size: 11px; }
.ga4-doc-command-spacer,
.ga4-cal-toolbar span { min-width: 1px; }
.ga4-doc-fields {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 18px;
padding: 12px 14px 14px;
background: #f2f2f2;
flex: 0 0 auto;
}
.ga4-doc-vehicle,
.ga4-doc-customer {
min-width: 0;
}
.ga4-doc-row {
display: grid;
grid-template-columns: 105px minmax(0, 1fr) auto auto auto auto;
gap: 0;
align-items: center;
margin-bottom: 3px;
}
.ga4-doc-row.two { grid-template-columns: 105px 1fr 105px 1fr; }
.ga4-doc-row.name { grid-template-columns: 105px 70px 1fr 1fr; }
.ga4-doc-row.postcode { grid-template-columns: 105px 1fr 90px 1fr 34px; }
.ga4-doc-row.email { grid-template-columns: 105px 24px 1fr; }
.ga4-doc-row label {
padding-right: 8px;
color: #4d4d4d;
text-align: right;
}
.ga4-doc-row input,
.ga4-doc-row select,
.ga4-doc-row button,
.side-row input,
.side-row select {
height: 24px;
min-width: 0;
border: 1px solid #c1c1c1;
border-bottom-color: #aaa;
border-right-color: #aaa;
background: #f8f8f8;
color: #111;
padding: 2px 5px;
font-size: 13px;
}
.ga4-doc-row input[readonly],
.side-row input[readonly] { background: #f5f5f5; }
.ga4-doc-row .reg {
font-weight: 700;
width: 115px;
}
.ga4-doc-row .wide { min-width: 260px; }
.ga4-doc-row .full { grid-column: 2 / -1; width: 100%; }
.ga4-doc-row button {
background: linear-gradient(#fbfbfb, #ddd);
min-width: 34px;
}
.ga4-red-x {
background: linear-gradient(#d76868, #b52e2e) !important;
color: #fff !important;
font-weight: 700;
}
.ga4-icon-btn {
width: 34px;
overflow: hidden;
text-indent: -999px;
position: relative;
}
.ga4-icon-btn::after {
content: "?";
text-indent: 0;
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.ga4-doc-buttonrow {
display: flex;
gap: 5px;
margin-top: 9px;
}
.ga4-doc-buttonrow.right { justify-content: flex-end; }
.ga4-doc-buttonrow button {
height: 28px;
border: 1px solid #b7b7b7;
background: linear-gradient(#fff, #dedede);
padding: 0 14px;
}
.ga4-doc-tabs {
display: flex;
background: #242424;
border-top: 2px solid #1a1a1a;
border-bottom: 2px solid #161616;
flex: 0 0 auto;
}
.ga4-doc-tabs button {
min-width: 138px;
height: 38px;
color: #fff;
background: linear-gradient(#5c5c5c, #373737);
border: 0;
border-right: 1px solid #202020;
border-left: 1px solid #6e6e6e;
font-size: 15px;
}
.ga4-doc-tabs button.active {
background: linear-gradient(#4d4d4d, #222);
border-bottom: 3px solid #111;
}
.ga4-doc-tabpane {
display: none;
background: #efefef;
min-height: 0;
padding: 8px;
overflow: auto;
}
.ga4-doc-tabpane.active {
display: block;
flex: 1 1 auto;
}
.ga4-doc-history {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 8px;
min-height: 0;
}
.ga4-doc-reminders,
.ga4-doc-prev {
border: 1px solid #202020;
background: #f7f7f7;
min-height: 0;
}
.ga4-doc-rem-head {
height: 33px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
background: #5b5b5b;
color: #fff;
font-size: 14px;
}
.ga4-doc-rem-head a { color: #fff; text-decoration: none; }
.ga4-doc-reminders table {
width: 100%;
height: 270px;
border-collapse: collapse;
}
.ga4-doc-reminders th,
.ga4-doc-table th {
background: #c9c9c9;
color: #111;
border: 1px solid #8f8f8f;
height: 25px;
font-weight: 400;
}
.ga4-doc-reminders td,
.ga4-doc-table td {
border: 1px solid #d4d4d4;
height: 27px;
padding: 3px 6px;
background: #f8f8f8;
}
.ga4-doc-empty {
color: #777;
font-style: italic;
text-align: center;
}
.ga4-doc-privacy {
height: 33px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: grid;
place-items: center;
color: #777;
font-size: 12px;
}
.ga4-doc-balance-lines {
background: #f9f8df;
padding: 8px;
}
.ga4-doc-balance-lines div {
display: flex;
justify-content: space-between;
margin: 7px 0;
}
.ga4-doc-subtabs {
display: flex;
height: 33px;
background: #4c4c4c;
}
.ga4-doc-subtabs button {
min-width: 112px;
border: 0;
border-right: 1px solid #222;
background: linear-gradient(#666, #444);
color: #fff;
}
.ga4-doc-subtabs button.active {
background: #d7d7d7;
color: #111;
border-top: 3px solid #222;
}
.ga4-doc-subtabs .ga4-doc-print { margin-left: auto; min-width: 52px; }
.ga4-doc-subpane { display: none; padding: 0; }
.ga4-doc-subpane.active { display: block; }
.ga4-doc-table {
width: 100%;
border-collapse: collapse;
}
.ga4-doc-table tr.current td { background: #b9eff8; }
.ga4-doc-table tr:nth-child(even):not(.current) td { background: #eee; }
.ga4-doc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ga4-doc-modal {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.28);
}
.ga4-doc-modal[hidden] { display: none; }
.ga4-doc-modal-box {
width: min(520px, calc(100vw - 40px));
border: 3px solid #222;
background: #efefef;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
/* I-2 (OVR004): GA4 Issue Invoice / Add Payments modal is a wide
FileMaker-style window positioned to the right of the doc form, not a
small centred clone modal. Apply via .ga4-doc-modal--wide on the modal
root; the payment / extras layouts below assume the wider box. Truth:
docs/ui-parity/overnight-ga4-vs-build-review/ga4-reference-selected/
071-issue-7258-dialog.png and 084 + 086. */
.ga4-doc-modal--wide {
justify-content: flex-end;
padding-right: clamp(20px, 4vw, 80px);
}
.ga4-doc-modal--wide .ga4-doc-modal-box {
width: min(920px, calc(100vw - 80px));
max-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
}
.ga4-doc-modal--wide .ga4-doc-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0;
}
.ga4-doc-modal-title-tag {
font-size: 13px;
font-weight: 600;
color: #ffd54a;
margin-left: 8px;
letter-spacing: 0.2px;
}
.ga4-doc-modal-title-tag--view {
color: #cfd8e0;
}
.ga4-doc-modal-title {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
background: linear-gradient(#5c5c5c, #232323);
color: #fff;
font-size: 15px;
}
.ga4-doc-modal-title strong { flex: 1; }
.ga4-doc-modal-title button {
min-width: 36px;
height: 28px;
border: 0;
/* H-1: softened from bright magenta #b00047 to GA4-muted red. */
background: #a02238;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.ga4-doc-modal-title button:hover {
background: #c1334b;
}
.ga4-doc-modal-body {
min-height: 92px;
padding: 14px 16px;
color: #222;
font-size: 14px;
}
.ga4-doc-modal-body p { margin: 0 0 9px 0; }
.ga4-doc-modal-actions {
display: flex;
justify-content: flex-end;
padding: 8px 12px 12px;
}
.ga4-doc-modal-actions button {
min-width: 90px;
padding: 5px 12px;
border: 1px solid #777;
background: linear-gradient(#fff, #ddd);
cursor: pointer;
}
.ga4-doc-tabpane textarea {
width: 100%;
min-height: 360px;
border: 1px solid #aaa;
background: #fff;
padding: 8px;
}
.ga4-doc-side {
display: flex;
flex-direction: column;
gap: 10px;
}
.ga4-doc-side section {
overflow: hidden;
}
.ga4-doc-side h3 {
margin: 0;
min-height: 31px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 9px;
background: #777;
color: #fff;
font-size: 15px;
font-weight: 400;
}
.ga4-doc-side h3 small { font-size: 12px; font-weight: 400; }
.side-row {
display: grid;
grid-template-columns: 92px 1fr;
gap: 4px;
align-items: center;
padding: 3px 8px;
}
.side-row span {
color: #999;
font-style: italic;
text-align: right;
}
.side-row:has(span) { grid-template-columns: 56px 42px 1fr; }
.side-row label { color: #555; }
.side-row input,
.side-row select {
width: 100%;
text-align: right;
}
.side-row select { text-align: left; }
.side-row.total label,
.side-row.balance label { font-weight: 700; }
.side-row.balance input { background: #fff8b8; }
/* Calendar day view */
.ga4-cal-screen {
display: grid;
/* H-gate-fix B: lift the rail floor to 300px so the 7-column day grid
(7 cells × 36px + cell borders + side padding) and 4-column months
grid both fit without clipping. Previous 280px floor still overflowed
by 15px in 1500x950 review smoke. Border-box on the cells below also
prevents the 1px border from pushing content past the container edge. */
grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 340px);
gap: 12px;
flex: 1 1 auto;
min-height: 0;
height: 100%;
min-width: 0;
}
.ga4-cal-titlebar {
grid-template-columns: auto 1fr auto auto;
background: linear-gradient(#a56300, #7b4300);
}
.ga4-cal-toolbar {
grid-template-columns: minmax(130px, 190px) 34px repeat(5, minmax(74px, 112px)) 1fr minmax(95px, 130px);
}
.ga4-cal-toolbar input {
margin: 7px 0 7px 8px;
border: 1px solid #222;
background: #555;
color: #fff;
padding: 3px 8px;
}
.ga4-cal-toolbar button.active {
background: #d8d8d8;
color: #111;
border-bottom: 3px solid #111;
}
.ga4-cal-subbar {
min-height: 35px;
grid-template-columns: minmax(92px, 135px) 34px repeat(3, minmax(72px, 92px)) 1fr;
}
.ga4-cal-grid {
display: grid;
grid-template-columns: 50px repeat(7, minmax(120px, 1fr));
grid-template-rows: 18px 1fr;
flex: 1 1 auto;
height: auto;
min-height: 0;
overflow: hidden;
background: #fff;
}
.ga4-cal-corner,
.ga4-cal-resource-head {
height: 18px;
background: #b9b9b9;
border-right: 1px solid #989898;
border-bottom: 1px solid #989898;
text-align: center;
font-size: 9px;
line-height: 18px;
}
.ga4-cal-times {
position: relative;
grid-column: 1;
grid-row: 2;
background: #cdcdcd;
border-right: 1px solid #aaa;
}
.ga4-cal-times div {
height: 10%;
border-top: 1px solid #aaa;
padding-top: 2px;
text-align: center;
font-size: 9px;
}
.ga4-cal-resource-col {
position: relative;
grid-row: 2;
border-right: 1px solid #c5c5c5;
transition: background 140ms ease, box-shadow 140ms ease;
}
.ga4-cal-resource-col.ga4-cal-drop-target,
.ga4-cal-resource-col.ga4-cal-create-active {
background: linear-gradient(rgba(86, 142, 204, 0.14), rgba(86, 142, 204, 0.07));
box-shadow: inset 0 0 0 2px rgba(46, 112, 190, 0.65);
}
.ga4-cal-hourline {
height: 10%;
border-top: 1px solid #d0d0d0;
}
.ga4-cal-appt {
position: absolute;
left: 1px;
right: 1px;
overflow: hidden;
padding: 3px 4px;
border: 1px solid rgba(0,0,0,0.18);
color: #111;
font-size: 10px;
line-height: 1.18;
cursor: grab;
user-select: none;
will-change: transform, height, top;
transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease, height 140ms ease;
}
.ga4-cal-appt:active { cursor: grabbing; }
.ga4-cal-appt strong,
.ga4-cal-appt span {
display: block;
/* G095: clamp long customer/vehicle labels inside the appointment block. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-cal-appt.mechanical { background: #f6c8f7; }
.ga4-cal-appt.service { background: #dcec3b; }
.ga4-cal-appt.diagnostic { background: #18f724; }
.ga4-cal-appt.mot-test { background: #b9ecfb; }
.ga4-cal-appt.cancellation { background: #ff2020; color: #fff; }
.ga4-cal-appt.electrical { background: #fff27a; }
.ga4-cal-appt.general { background: #d8e6ff; }
.ga4-cal-appt.remap { background: #f2d0ff; }
.ga4-cal-appt.off-holiday { background: #b6b6b6; }
.ga4-cal-appt.sms-sent { background: #c9f2e1; }
.ga4-cal-appt--dragging,
.ga4-cal-appt--resizing {
opacity: 0.82;
z-index: 6;
box-shadow: 0 9px 22px rgba(0,0,0,0.34);
}
.ga4-cal-resize-handle {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7px;
cursor: ns-resize;
background: linear-gradient(transparent, rgba(0,0,0,0.16));
}
.ga4-appt-modal { z-index: 55; }
.ga4-appt-modal-box {
width: min(1160px, calc(100vw - 80px));
background: #e9e9e9;
position: relative;
}
.ga4-appt-commandbar {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(100px, 1fr);
background: linear-gradient(#5f5f5f, #2f2f2f);
border-bottom: 1px solid #111;
}
.ga4-appt-doc-menu {
position: absolute;
top: 82px;
left: calc(20% + 1px);
z-index: 3;
width: calc(20% - 2px);
border: 1px solid #222;
background: #efefef;
box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
.ga4-appt-doc-menu[hidden] { display: none; }
.ga4-appt-doc-menu button {
display: block;
width: 100%;
height: 30px;
border: 0;
border-bottom: 1px solid #ccc;
background: linear-gradient(#fff, #ddd);
color: #111;
text-align: left;
padding: 0 12px;
}
.ga4-appt-doc-menu button:hover { background: #d8e7ff; }
.ga4-appt-commandbar button {
min-height: 38px;
border: 0;
border-right: 1px solid #222;
background: transparent;
color: #fff;
font-size: 14px;
}
.ga4-appt-form {
display: flex;
flex-direction: column;
background: #f5f5f5;
}
.ga4-appt-strip { height: 16px; background: #fff9a5; border-bottom: 1px solid #ddd; }
.ga4-appt-time {
display: grid;
grid-template-columns: minmax(150px, 0.8fr) minmax(160px, 0.9fr) minmax(260px, 1.25fr) minmax(260px, 1.25fr) minmax(130px, 0.65fr);
align-items: end;
gap: 8px;
padding: 12px 24px;
background: #f7f6e6;
border-bottom: 1px solid #d1d1c0;
}
.ga4-appt-time label,
.ga4-appt-details label {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
align-items: center;
gap: 6px;
margin: 0;
}
.ga4-appt-time label { grid-template-columns: 42px minmax(0, 1fr); }
.ga4-appt-time label.ga4-appt-time-only {
grid-template-columns: minmax(0, 1fr);
}
.ga4-appt-time label.ga4-appt-time-only span { display: none; }
.ga4-appt-time span,
.ga4-appt-details span {
color: #666;
font-size: 13px;
}
.ga4-appt-time input,
.ga4-appt-time select,
.ga4-appt-details input {
min-width: 0;
height: 28px;
border: 1px solid #b7b7b7;
background: #fff;
padding: 3px 6px;
font-size: 13px;
}
.ga4-appt-duration {
display: grid;
grid-template-rows: 28px 28px;
position: static;
align-self: stretch;
min-width: 0;
max-width: 156px;
text-align: center;
border: 1px solid #bdc8d4;
background: #fff;
}
.ga4-appt-duration strong {
background: #d7eccf;
padding-top: 6px;
}
.ga4-appt-duration span { padding-top: 7px; }
.ga4-appt-details {
display: grid;
grid-template-columns: minmax(320px, 1fr) 130px minmax(320px, 1fr) 110px;
gap: 8px 12px;
padding: 16px 24px;
}
.ga4-appt-details .ga4-appt-col-left { grid-column: 1; }
.ga4-appt-details [data-appt-vrm] { grid-column: 2; }
.ga4-appt-details .ga4-appt-col-right { grid-column: 3; }
.ga4-appt-details [data-appt-new-customer] { grid-column: 4; }
.ga4-appt-details .ga4-appt-col-left-wide { grid-column: 1 / span 2; }
.ga4-appt-details .ga4-appt-col-right-wide { grid-column: 3 / span 2; }
.ga4-appt-details button {
height: 28px;
border: 1px solid #aaa;
background: linear-gradient(#fff, #ddd);
}
.ga4-appt-tabs {
display: grid;
grid-template-columns: repeat(6, minmax(100px, 1fr));
margin: 0;
background: linear-gradient(#666, #333);
border-top: 1px solid #111;
}
.ga4-appt-tabs button {
height: 36px;
border: 0;
border-right: 1px solid #222;
background: transparent;
color: #fff;
}
.ga4-appt-tabs button.active {
background: #e6e6e6;
color: #111;
}
.ga4-appt-notes {
margin: 16px 24px 18px;
min-height: 180px;
resize: vertical;
border: 1px solid #c4c4c4;
background: #fff;
}
.ga4-cal-side {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
/* H-gate-fix B: drop overflow:hidden — it was masking the right-rail
overflow rather than fixing it. Cell borders are now contained via
box-sizing on .ga4-cal-month-grid below. */
min-width: 0;
box-sizing: border-box;
}
.ga4-cal-side > section { box-sizing: border-box; min-width: 0; }
.ga4-cal-side h3 {
margin: 0;
padding: 8px 10px;
color: #fff;
background: #777;
font-weight: 400;
}
.ga4-cal-picker { padding-bottom: 8px; }
.ga4-cal-year {
display: grid;
grid-template-columns: 34px 1fr 34px;
align-items: center;
padding: 4px 10px;
font-size: 30px;
}
.ga4-cal-year a {
border: 0;
background: transparent;
color: #777;
font-size: 30px;
text-align: center;
text-decoration: none;
}
.ga4-cal-months {
display: grid;
/* G051 + H-gate-fix B: 12 month buttons in 4-wide grid with minmax(0,
1fr) so cell content cannot push the row wider than the container. */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
padding: 0 8px 6px;
text-align: center;
font-size: 12px;
box-sizing: border-box;
}
.ga4-cal-months a {
color: #111;
text-decoration: none;
border-radius: 4px;
padding: 2px 0;
}
.ga4-cal-months a.active {
background: #64a2ff;
color: #fff;
}
.ga4-cal-month-grid {
display: grid;
/* G051 + H-gate-fix B: 7-column day grid with minmax(0, 1fr) so the
1px cell borders below cannot push the row past the rail width.
H-rail-final: drop horizontal padding 6px -> 2px so each cell gets
~2px more width budget for the weekday labels below. */
grid-template-columns: repeat(7, minmax(0, 1fr));
padding: 0 2px;
text-align: center;
font-size: 11px;
box-sizing: border-box;
}
.ga4-cal-month-grid strong,
.ga4-cal-month-grid a {
/* H-gate-fix B: border-box so the 1px solid border below doesn't add
14px of overflow (7 cells × 2px) per row. */
box-sizing: border-box;
min-width: 0;
min-height: 22px;
border: 1px solid #d0d0d0;
color: #111;
text-decoration: none;
display: grid;
place-items: center;
padding: 0;
}
.ga4-cal-month-grid strong {
/* H-rail-final: weekday header cells (3-letter labels: Mon Tue Wed
Thu Fri Sat Sun). The default -inherited bold at 11px
rendered 'Mon' at 48px, but each cell is only ~39px wide in the
300px rail. The GA4 truth screenshot at
docs/ui-parity/full-audit-current/page_calendar.png shows the
weekday headers WITHOUT cell borders — just bold black text on
white spaced across the row. Match that:
- drop the cell border (recovers 2px of content width per cell)
- drop the cell background (no cell-style framing)
- drop font-size to 9.5px / weight 600 / -0.3px letter-spacing
so all seven labels fit cleanly inside their ~41px content
area at 1500x950 AND 1440x950
- keep min-height for vertical alignment with day-number rows
Numeric day cells below are untouched. */
font-size: 9px;
font-weight: 600;
letter-spacing: -0.4px;
border: 0;
background: transparent;
color: #1a2033;
}
.ga4-cal-month-grid a.muted { color: #aaa; }
.ga4-cal-month-grid a.selected {
background: #4f8cff;
color: #fff;
}
/* (Global/User notes paper retired 2026-06-10 — replaced by the
Workshop Assistant panel; see .ga4-cal-assistant in the mint layer.) */
/* (Draft watermark removed 2026-06-10 per Jez — Print Draft renders the
plain stationery like every other output.) */
/* ----- Admin > Doc Template Settings editor ----- */
.ga4-tplset {
display: grid;
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: 20px;
padding: 14px;
}
.ga4-tplset-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.ga4-tplset-form label {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 700;
}
.ga4-tplset-form input,
.ga4-tplset-form textarea {
padding: 7px 10px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font: 13px 'Outfit', 'Segoe UI', sans-serif;
resize: vertical;
}
.ga4-tplset-hint {
margin: 2px 0 0;
color: var(--mint-muted);
font-size: 12px;
}
.ga4-tplset-headings {
margin: 2px 0 0;
padding: 10px 12px;
border: 1px solid var(--mint-border);
border-radius: 8px;
}
.ga4-tplset-headings legend {
padding: 0 6px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 800;
}
.ga4-tplset-headings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 12px;
}
.ga4-tplset-headings-grid label {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
color: var(--mint-text);
font-size: 12.5px;
font-weight: 600;
}
.ga4-tplset-saved {
margin: 10px 14px 0;
padding: 8px 12px;
border: 1px solid #9bd4ae;
border-radius: 8px;
background: #e9f9ef;
color: #176a3a;
font-weight: 700;
}
.ga4-adminedit-error {
margin: 10px 14px 0;
padding: 8px 12px;
border: 1px solid #e2a0a8;
border-radius: 8px;
background: #fdeef0;
color: #9b1f2e;
font-weight: 700;
}
.ga4-tplset-save {
align-self: flex-start;
min-height: 36px;
padding: 0 18px;
border: 1px solid var(--section-accent);
border-radius: 8px;
background: var(--section-accent);
color: #ffffff;
font-weight: 800;
cursor: pointer;
}
.ga4-tplset-save:hover { filter: brightness(1.1); }
.ga4-tplset-preview {
display: flex;
align-items: flex-start;
justify-content: center;
}
.ga4-tplset-page {
width: 100%;
max-width: 560px;
padding: 24px 26px;
border: 1px solid #c9c9c9;
background: #ffffff;
box-shadow: 0 10px 24px rgba(22, 36, 29, 0.12);
color: #111;
font: 11px Verdana, Arial, sans-serif;
}
.ga4-tplset-letterhead {
display: flex;
justify-content: space-between;
gap: 14px;
}
.ga4-tplset-letterhead h1 {
margin: 0 0 8px;
font-size: 22px;
}
.ga4-tplset-letterhead p {
margin: 0;
line-height: 1.5;
}
.ga4-tplset-contact {
padding-top: 30px;
text-align: right;
line-height: 1.6;
}
.ga4-tplset-band {
height: 5px;
margin: 12px 0;
background: #e6e6e6;
}
.ga4-tplset-bodyhint {
display: flex;
flex-direction: column;
gap: 7px;
padding: 8px 0 46px;
}
.ga4-tplset-bodyhint span {
height: 9px;
border-radius: 3px;
background: #f0f0f0;
}
.ga4-tplset-bodyhint span:nth-child(2) { width: 80%; }
.ga4-tplset-bodyhint span:nth-child(3) { width: 60%; }
.ga4-tplset-footer {
margin: 0;
line-height: 1.6;
text-align: center;
}
/* ----- Admin live editors (Admin wiring P1) -----
Row-per-form editors for reference lists, employees, bays, MOT
rates and predefined jobs. Wrapped in .ga4-adminedit, which is
excluded from the global controlled-action click guard. */
.ga4-adminedit {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px 16px;
}
.ga4-adminedit-row {
display: grid;
align-items: center;
gap: 8px;
margin: 0;
}
.ga4-adminedit-grid { grid-template-columns: minmax(220px, 1fr) 70px 60px 70px 76px; }
.ga4-adminedit-grid.has-value { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 70px 60px 70px 76px; }
.ga4-adminedit-staffgrid { grid-template-columns: minmax(170px, 1fr) 62px 48px 250px 60px 56px 64px 76px; }
.ga4-adminedit-rategrid { grid-template-columns: minmax(190px, 1fr) 92px 70px 60px 56px 64px 76px; }
.ga4-adminedit-jobgrid { grid-template-columns: minmax(150px, 220px) 84px minmax(180px, 1fr) 60px 56px 64px 76px; }
.ga4-adminedit-appttypegrid { grid-template-columns: minmax(160px, 1fr) 58px minmax(150px, 220px) 60px 56px 64px 76px; }
.ga4-adminedit-row.is-head {
padding-bottom: 2px;
color: var(--mint-muted);
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ga4-adminedit-row.is-add {
margin-top: 8px;
padding-top: 10px;
border-top: 1px dashed var(--mint-border);
}
.ga4-adminedit-row input:not([type=checkbox]):not([type=color]) {
min-height: 31px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font: 13px 'Outfit', 'Segoe UI', sans-serif;
}
.ga4-adminedit-row input[type=color] {
width: 40px;
height: 31px;
padding: 2px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
}
.ga4-adminedit-num { text-align: center; font-variant-numeric: tabular-nums; }
.ga4-adminedit-active {
display: grid;
place-items: center;
}
.ga4-adminedit-roles {
display: flex;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
color: var(--mint-muted);
white-space: nowrap;
}
.ga4-adminedit-roles label {
display: inline-flex;
align-items: center;
gap: 3px;
}
.ga4-adminedit-colourchip {
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border: 1px solid var(--mint-border);
border-radius: 7px;
color: #111111;
font-size: 12px;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-adminedit-save,
.ga4-adminedit-del {
min-height: 31px;
border-radius: 7px;
font-weight: 800;
cursor: pointer;
}
.ga4-adminedit-save {
border: 1px solid var(--section-accent);
background: var(--section-accent);
color: #ffffff;
}
.ga4-adminedit-save:hover { filter: brightness(1.1); }
.ga4-adminedit-del {
border: 1px solid color-mix(in srgb, var(--status-danger) 45%, var(--mint-border));
background: color-mix(in srgb, var(--status-danger) 6%, #ffffff);
color: var(--status-danger);
}
.ga4-adminedit-del:hover { background: color-mix(in srgb, var(--status-danger) 14%, #ffffff); }
.ga4-adminedit-settings {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
padding: 12px 14px 4px;
}
.ga4-adminedit-settings label {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 700;
}
.ga4-adminedit-settings select,
.ga4-adminedit-settings input {
min-height: 31px;
min-width: 120px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font: 13px 'Outfit', 'Segoe UI', sans-serif;
}
.ga4-adminedit-settings .ga4-adminedit-save { padding: 0 16px; }
.ga4-adminedit-link {
color: var(--section-accent);
font-weight: 700;
}
.ga4-adminedit-nomgrid { grid-template-columns: minmax(180px, 1fr) 110px 110px 76px; }
.ga4-adminedit-fixed {
color: var(--mint-text);
font-weight: 700;
}
.ga4-adminedit-footnote { padding: 0 14px 12px; }
.ga4-adminedit-export {
display: block;
margin: 4px 0;
padding: 6px 10px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
text-align: center;
text-decoration: none;
}
a.ga4-adminedit-save.ga4-adminedit-export {
border-color: var(--section-accent);
background: var(--section-accent);
color: #ffffff;
}
.ga4-adminedit-exportform {
display: flex;
flex-direction: column;
gap: 8px;
}
.ga4-adminedit-exportform label {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 700;
}
.ga4-adminedit-exportform input {
min-height: 31px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
}
.ga4-adminedit-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.ga4-adminedit-chips a {
padding: 5px 12px;
border: 1px solid var(--mint-border);
border-radius: 999px;
background: #ffffff;
color: var(--mint-text);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.ga4-adminedit-chips a.active {
border-color: var(--section-accent);
background: var(--section-accent);
color: #ffffff;
}
.ga4-adminedit-reconcile { margin-top: 10px; padding: 0 16px; }
.ga4-adminedit-inlineform { display: inline; margin: 0; }
.ga4-adminedit-tmplgrid { grid-template-columns: 170px 92px minmax(220px, 1fr) 56px 64px 76px; align-items: start; }
.ga4-adminedit-tmplgrid textarea {
min-height: 52px;
padding: 6px 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font: 12.5px 'Outfit', 'Segoe UI', sans-serif;
resize: vertical;
}
.ga4-adminedit-tmplgrid select {
min-height: 31px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
}
.ga4-adminedit-stockgrid { grid-template-columns: 110px minmax(170px, 1fr) 100px 64px 58px 52px 74px 74px 74px 64px 76px; }
.ga4-adminedit-stocksearch {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.ga4-adminedit-stocksearch input[name=q] {
flex: 1 1 280px;
min-height: 31px;
max-width: 420px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 7px;
}
.ga4-adminedit-stocksearch .ga4-adminedit-save { padding: 0 14px; }
.ga4-adminedit-usergrid { grid-template-columns: 140px minmax(150px, 1fr) 140px 170px 56px 64px 76px; }
.ga4-adminedit-suppgrid { grid-template-columns: minmax(180px, 1fr) 140px 200px 60px 56px 64px 76px; }
.ga4-adminedit-expgrid { grid-template-columns: 150px 96px minmax(170px, 1fr) 110px 80px 80px 52px 64px 76px; }
/* Business reports — CSS bars, no JS libraries. */
.ga4-report-h {
margin: 16px 0 8px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ga4-report-bars {
display: flex;
flex-direction: column;
gap: 5px;
}
.ga4-report-barrow {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 96px;
align-items: center;
gap: 10px;
}
.ga4-report-label {
overflow: hidden;
color: var(--mint-text);
font-size: 12px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-report-track {
height: 16px;
border-radius: 5px;
background: #f0ece2;
overflow: hidden;
}
.ga4-report-bar {
display: block;
height: 100%;
border-radius: 5px;
background: var(--section-accent);
min-width: 2px;
}
.ga4-report-bar.alt { background: #2f6a3a; }
.ga4-report-val {
text-align: right;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Document attachments modal. */
.ga4-att-modal .ga4-doc-table { margin-bottom: 10px; }
.ga4-att-upload {
display: flex;
align-items: center;
gap: 8px;
}
.ga4-att-upload input[type=file] { flex: 1 1 auto; font-size: 12px; }
.ga4-att-upload button,
.ga4-att-del {
min-height: 28px;
padding: 0 12px;
border: 1px solid #777;
background: linear-gradient(#fff, #ddd);
cursor: pointer;
font-weight: 700;
}
.ga4-att-del { color: #9b1f2e; }
.ga4-att-hint { margin: 8px 0 0; color: #777; font-size: 11.5px; }
/* ----- Document Labour/Parts line editor (Admin wiring P1) ----- */
.ga4-lineadd {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 8px;
padding: 8px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: var(--mint-surface-2);
}
.ga4-lineadd select,
.ga4-lineadd input {
min-height: 30px;
padding: 0 8px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
font: 12.5px 'Outfit', 'Segoe UI', sans-serif;
}
.ga4-lineadd .ga4-lineadd-desc { flex: 1 1 220px; min-width: 180px; }
.ga4-lineadd .ga4-lineadd-job { max-width: 230px; }
.ga4-lineadd .ga4-lineadd-tech { max-width: 180px; }
.ga4-lineadd .ga4-lineadd-qty { width: 64px; text-align: center; }
.ga4-lineadd .ga4-lineadd-unit { width: 84px; text-align: right; }
.ga4-lineadd .ga4-lineadd-part { width: 130px; }
.ga4-lineadd button {
min-height: 30px;
padding: 0 14px;
border: 1px solid var(--section-accent);
border-radius: 7px;
background: var(--section-accent);
color: #ffffff;
font-weight: 800;
cursor: pointer;
}
.ga4-lineadd [data-line-cancel] {
border-color: var(--mint-border);
background: #ffffff;
color: var(--mint-text);
}
.ga4-line-actions { white-space: nowrap; }
.ga4-line-actions-h { width: 96px; }
.ga4-line-actions button {
min-height: 24px;
margin-right: 4px;
padding: 0 9px;
border: 1px solid var(--mint-border);
border-radius: 6px;
background: #ffffff;
color: var(--mint-text);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}
.ga4-line-actions [data-line-del] {
border-color: color-mix(in srgb, var(--status-danger) 40%, var(--mint-border));
color: var(--status-danger);
}
.ga4-line-table td {
padding: 4px 6px;
}
.ga4-line-cell-input {
width: 100%;
min-height: 26px;
padding: 3px 6px;
border: 1px solid #C9DDD4;
border-radius: 6px;
background: #FFFFFF;
color: var(--mint-text);
font: 12.5px 'Outfit', 'Segoe UI', sans-serif;
}
.ga4-line-cell-input:focus {
border-color: var(--section-accent);
outline: 2px solid color-mix(in srgb, var(--section-accent) 18%, transparent);
outline-offset: 0;
}
.ga4-line-cell-input.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.ga4-line-row.saving .ga4-line-cell-input {
background: #F5FAF8;
}
.ga4-doc-staff {
width: 100%;
min-height: 27px;
}
/* Customers/Vehicles: keep existing data screens but pull them into GA4 desktop density. */
.ga4-cust-ribbon,
.ga4-veh-ribbon,
.ga4-est-ribbon {
margin: 0;
border: 3px solid #1f1f1f;
border-bottom: 0;
background: linear-gradient(#666, #3a3a3a);
color: #fff;
flex: 0 0 auto;
}
.ga4-cust-actionbar,
.ga4-veh-actionbar,
.ga4-est-actionbar,
.ga4-est-filterbar,
.ga4-cust-alpha,
.ga4-veh-alpha {
margin: 0;
flex: 0 0 auto;
}
.ga4-cust-grid,
.ga4-veh-grid,
.ga4-est-grid {
margin: 0;
border: 3px solid #1f1f1f;
border-top-width: 1px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.ga4-cust-rec-ribbon,
.ga4-veh-rec-ribbon {
background: linear-gradient(#0d596b, #073747);
border: 3px solid #1f1f1f;
border-bottom: 0;
color: #fff;
margin: 0;
min-height: 35px;
}
.ga4-cust-rec-actionbar,
.ga4-veh-rec-actionbar {
margin: 0;
background: linear-gradient(#676767, #3f3f3f);
border: 3px solid #1f1f1f;
border-top: 0;
border-bottom: 2px solid #252525;
}
.ga4-cust-rec-actionbar .ga4-cust-btn,
.ga4-veh-rec-actionbar .ga4-veh-btn {
background: linear-gradient(#696969, #454545);
color: #fff;
border-color: #252525;
}
.ga4-cust-card,
.ga4-veh-card {
margin: 0;
border-left: 3px solid #1f1f1f;
border-right: 3px solid #1f1f1f;
background: #f2f2f2;
}
.ga4-cust-tabs,
.ga4-veh-tabs {
margin: 0;
background: #242424;
border-left: 3px solid #1f1f1f;
border-right: 3px solid #1f1f1f;
}
.ga4-cust-tab,
.ga4-veh-tab {
background: linear-gradient(#5c5c5c, #373737);
color: #fff;
}
.ga4-cust-tab.active,
.ga4-veh-tab.active {
background: linear-gradient(#f7f7f7, #d8d8d8);
color: #111;
}
.ga4-cust-tabpane,
.ga4-veh-tabpane {
border: 3px solid #1f1f1f;
border-top: 0;
background: #efefef;
min-height: 420px;
}
/* First-pass left-to-right GA4 pages */
.ga4-chipbar {
flex: 0 0 auto;
display: flex;
gap: 0;
border: 3px solid #1f1f1f;
border-top: 0;
background: linear-gradient(#555, #353535);
}
.ga4-chipbar button {
min-width: 96px;
height: 34px;
border: 0;
border-right: 1px solid #222;
background: linear-gradient(#656565, #444);
color: #fff;
font-size: 13px;
}
.ga4-chipbar button.active {
background: #d7d7d7;
color: #111;
border-top: 3px solid #222;
}
.ga4-gap-inline {
display: inline-flex;
align-items: center;
padding-left: 10px;
color: #666;
font-style: italic;
font-size: 12px;
}
.ga4-home,
.ga4-rem-screen {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(235px, 16vw, 320px);
gap: 12px;
}
.ga4-home-main,
.ga4-rem-main {
min-height: 0;
display: flex;
flex-direction: column;
}
.ga4-home-kpis {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
padding: 8px;
border: 3px solid #1f1f1f;
border-top: 0;
background: #efefef;
}
.ga4-home-kpi {
min-height: 54px;
padding: 7px 10px;
color: #111;
text-decoration: none;
border: 1px solid #aaa;
background: linear-gradient(#fff, #ddd);
}
.ga4-home-kpi span {
display: block;
color: #555;
font-size: 12px;
}
.ga4-home-kpi strong {
display: block;
margin-top: 3px;
font-size: 20px;
}
.ga4-home-kpi.money strong { font-size: 17px; }
.ga4-home-panels {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-top: 8px;
}
.ga4-home-panel,
.ga4-home-side section,
.ga4-rem-donut,
.ga4-admin-panel {
border: 3px solid #1f1f1f;
border-radius: 4px;
background: #efefef;
overflow: hidden;
}
.ga4-home-panel h3,
.ga4-home-side h3,
.ga4-rem-donut h3 {
margin: 0;
padding: 8px 10px;
color: #fff;
background: #666;
font-size: 15px;
font-weight: 400;
}
.ga4-home-panel {
min-height: 0;
overflow: auto;
}
.ga4-home-side {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.ga4-home-side a {
display: block;
padding: 8px 10px;
border-bottom: 1px solid #ccc;
color: #111;
text-decoration: none;
background: linear-gradient(#fff, #e0e0e0);
}
.ga4-home-side p {
margin: 0;
padding: 10px;
color: #555;
line-height: 1.4;
}
.ga4-rem-donut {
display: flex;
flex-direction: column;
min-height: 0;
}
.ga4-rem-filters {
display: grid;
grid-template-columns: 1fr 28px;
gap: 4px;
padding: 10px;
}
.ga4-rem-filters button {
height: 28px;
border: 1px solid #999;
background: linear-gradient(#fff, #ddd);
}
.ga4-rem-ring {
width: 170px;
height: 170px;
margin: 20px auto;
border-radius: 50%;
background: conic-gradient(#6ac45e 0 65%, #e8b83c 65% 82%, #d64b4b 82% 100%);
display: grid;
place-items: center;
}
.ga4-rem-ring span {
width: 96px;
height: 96px;
border-radius: 50%;
background: #efefef;
display: grid;
place-items: center;
font-size: 32px;
font-weight: 700;
}
.ga4-rem-legend {
padding: 8px 14px;
display: grid;
gap: 6px;
}
.ga4-rem-legend span {
padding: 5px 8px;
background: #ddd;
border: 1px solid #aaa;
}
.ga4-due-now {
display: inline-block;
padding: 2px 6px;
background: #68d166;
border-radius: 2px;
font-weight: 700;
}
.ga4-rem-err {
display: inline-grid;
place-items: center;
width: 20px;
height: 18px;
background: linear-gradient(90deg, #d33 0 50%, #48a84f 50% 100%);
color: #fff;
font-weight: 700;
}
.ga4-admin {
flex: 1 1 auto;
min-height: 0;
display: grid;
place-items: end;
}
.ga4-admin-panel {
width: min(980px, 100%);
min-height: min(620px, 100%);
display: flex;
flex-direction: column;
}
.ga4-admin-title {
height: 38px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#5f5f5f, #3d3d3d);
color: #fff;
font-size: 16px;
}
.ga4-admin-close {
width: 36px;
height: 28px;
border: 1px solid #64103a;
background: #9b1f56;
color: #fff;
font-weight: 700;
}
.ga4-admin-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #3b3b3b;
}
.ga4-admin-tabs button {
height: 38px;
border: 0;
border-right: 1px solid #222;
background: linear-gradient(#666, #444);
color: #fff;
}
.ga4-admin-tabs button.active {
background: #d7d7d7;
color: #111;
border-top: 3px solid #222;
}
.ga4-admin-grid {
display: none;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 14px;
overflow: auto;
}
.ga4-admin-grid.active {
display: grid;
flex: 1 1 auto;
min-height: 0;
}
.ga4-admin-tile {
min-height: 120px;
border: 1px solid #aaa;
background: linear-gradient(#fff, #dcdcdc);
color: #111;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 13px;
}
.ga4-admin-icon {
display: grid;
place-items: center;
width: 42px;
height: 34px;
border-radius: 3px;
background: #4f7886;
color: #fff;
font-weight: 700;
}
.ga4-admin-modal {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0,0,0,0.25);
display: grid;
place-items: center;
}
.ga4-admin-modal[hidden] { display: none; }
.ga4-admin-modal-box {
width: min(620px, calc(100vw - 40px));
border: 3px solid #1f1f1f;
background: #efefef;
}
.ga4-admin-modal-body { padding: 14px; }
.ga4-admin-formrow {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.ga4-admin-formrow label {
text-align: right;
color: #555;
}
.ga4-admin-formrow input {
min-height: 26px;
border: 1px solid #aaa;
padding: 3px 6px;
background: #f8f8f8;
}
.ga4-admin-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
padding-top: 8px;
}
.ga4-admin-actions button {
min-width: 80px;
height: 30px;
border: 1px solid #aaa;
background: linear-gradient(#fff, #ddd);
}
/* Pull-back pass: GA4 density, no spare sub-toolbar, record panes fit viewport. */
.ga4-topbar {
height: 52px;
padding: 0 10px;
}
.ga4-nav {
min-width: 54px;
width: clamp(54px, 3.9vw, 78px);
flex: 0 1 clamp(54px, 3.9vw, 78px);
height: 52px;
padding: 4px 3px 3px;
font-size: 11.5px;
}
.ga4-nav-icon {
height: 18px;
min-width: 21px;
font-size: 9.5px;
}
.ga4-top-search {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
flex: 1 1 170px;
max-width: 260px;
min-width: 112px;
}
.ga4-top-search input {
min-width: 0;
width: 100%;
height: 24px;
padding: 3px 8px;
border: 1px solid #1d1d1d;
background: #515151;
color: #fff;
font-size: 12px;
font-style: italic;
}
.ga4-top-search input::placeholder { color: #e5e5e5; }
.ga4-top-search button {
height: 24px;
padding: 0 8px;
border: 1px solid #181818;
background: linear-gradient(#656565, #383838);
color: #fff;
font-size: 11px;
}
.ga4-right {
margin-left: 8px;
align-items: stretch;
}
.ga4-right .ga4-user {
display: inline-flex;
align-items: center;
padding: 0 10px;
color: #f0f0f0;
font-size: 12px;
font-style: italic;
white-space: nowrap;
}
.ga4-content { padding: 7px 14px 10px; }
.ga4-instance-banner {
margin: 0 0 6px 0;
padding: 5px 10px;
border: 2px solid #7a1d1d;
background: #fff0b8;
color: #7a1d1d;
font-weight: 800;
text-align: center;
}
.ga4-doc-screen {
gap: 8px;
grid-template-columns: minmax(0, 1fr) clamp(205px, 12.5vw, 244px);
}
.ga4-doc-titlebar,
.ga4-cal-titlebar {
height: 32px;
font-size: 14px;
}
.ga4-doc-titlebar {
display: flex;
}
.ga4-doc-titlebar strong,
.ga4-doc-titlebar .ga4-doc-linkref,
.ga4-doc-titlebar .ga4-doc-warn {
white-space: nowrap;
}
.ga4-doc-titlebar .ga4-doc-notice {
margin-left: auto;
}
.ga4-doc-titlebar button {
flex: 0 0 auto;
}
.ga4-doc-commandbar,
.ga4-cal-toolbar,
.ga4-cal-subbar {
min-height: 35px;
}
.ga4-doc-commandbar button,
.ga4-cal-toolbar button,
.ga4-cal-subbar button,
.ga4-cal-subbar a,
.ga4-cal-subbar select {
font-size: 13px;
padding: 0 13px;
}
.ga4-doc-fields {
gap: 12px;
padding: 8px 12px 8px;
}
.ga4-doc-row {
grid-template-columns: 100px minmax(0, 1fr) auto auto auto auto;
margin-bottom: 2px;
}
.ga4-doc-row.two { grid-template-columns: 100px 1fr 96px 1fr; }
.ga4-doc-row.name { grid-template-columns: 100px 64px 1fr 1fr; }
.ga4-doc-row.postcode { grid-template-columns: 100px 1fr 82px 1fr 32px; }
.ga4-doc-row.email { grid-template-columns: 100px 22px 1fr; }
.ga4-doc-row input,
.ga4-doc-row select,
.ga4-doc-row button,
.side-row input,
.side-row select {
height: 22px;
font-size: 12px;
}
.ga4-doc-buttonrow {
margin-top: 6px;
}
.ga4-doc-buttonrow button {
height: 25px;
padding: 0 12px;
}
.ga4-doc-tabs button {
min-width: 128px;
height: 34px;
font-size: 14px;
}
.ga4-doc-tabpane {
padding: 6px;
overflow: hidden;
}
.ga4-doc-tabpane.active {
display: flex;
flex-direction: column;
}
.ga4-doc-history {
flex: 1 1 auto;
height: 100%;
overflow: hidden;
}
.ga4-doc-reminders,
.ga4-doc-prev {
display: flex;
flex-direction: column;
overflow: hidden;
}
.ga4-doc-rem-head { height: 29px; }
.ga4-doc-reminders table {
flex: 1 1 auto;
height: auto;
}
.ga4-doc-privacy { height: 28px; }
.ga4-doc-balance-lines { padding: 5px 8px; }
.ga4-doc-balance-lines div { margin: 4px 0; }
.ga4-doc-subtabs { height: 30px; }
.ga4-doc-subtabs button { min-width: 104px; }
.ga4-doc-subpane.active {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
.ga4-doc-reminders th,
.ga4-doc-table th {
height: 23px;
}
.ga4-doc-reminders td,
.ga4-doc-table td {
height: 24px;
padding: 2px 6px;
}
.ga4-doc-side {
gap: 7px;
min-height: 0;
overflow: hidden;
}
.ga4-doc-side h3 {
min-height: 28px;
font-size: 14px;
}
.side-row {
padding: 2px 7px;
gap: 3px;
}
.ga4-cust-card,
.ga4-veh-card {
flex: 0 0 auto;
}
.ga4-cust-row,
.ga4-veh-row {
margin-bottom: 4px;
}
.ga4-cust-row input[type=text],
.ga4-veh-row input[type=text],
.ga4-veh-owner-fields input {
height: 24px;
font-size: 13px;
}
.ga4-cust-tabs,
.ga4-veh-tabs {
flex: 0 0 auto;
}
.ga4-cust-tabpane,
.ga4-veh-tabpane {
min-height: 0;
flex: 1 1 auto;
overflow: auto;
}
.ga4-cust-tabpane.active,
.ga4-veh-tabpane.active {
display: block;
}
.ga4-veh-rec-ribbon {
gap: 8px;
}
.ga4-veh-close {
width: 34px;
height: 28px;
border: 1px solid #64103a;
background: #9b1f56;
color: #fff;
font-weight: 700;
}
.ga4-veh-card {
position: relative;
min-height: 306px;
padding: 8px 14px;
padding-right: clamp(425px, 33vw, 610px);
}
.ga4-veh-row label {
flex-basis: 126px;
}
.ga4-veh-input-reg { width: 180px; }
.ga4-veh-input-mk { width: 210px; }
.ga4-veh-input-md { width: 300px; }
.ga4-veh-input-wide { width: min(540px, 100%); }
.ga4-veh-input-mid { width: 185px; }
.ga4-veh-owner-panel {
position: absolute;
top: 8px;
right: 14px;
width: clamp(390px, 30vw, 590px);
color: #222;
}
.ga4-veh-mini-tabs {
display: grid;
grid-template-columns: repeat(5, 1fr);
border: 1px solid #222;
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.ga4-veh-mini-tabs button {
height: 24px;
border: 0;
border-right: 1px solid #333;
background: #8a8a8a;
color: #fff;
font-size: 12px;
}
.ga4-veh-mini-tabs button:last-child { border-right: 0; }
.ga4-veh-mini-tabs button.active {
background: #565656;
}
.ga4-veh-stock-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) 34px 34px 58px repeat(3, minmax(58px, 72px));
gap: 4px;
align-items: center;
padding: 8px 0 6px;
font-size: 13px;
}
.ga4-veh-stock-row button,
.ga4-veh-stock-row a {
height: 25px;
display: grid;
place-items: center;
border: 1px solid #aaa;
background: linear-gradient(#fff, #ddd);
color: #111;
text-decoration: none;
}
.ga4-veh-stock-row button.active {
background: #bf5f8a;
color: #111;
font-weight: 700;
}
.ga4-veh-owner-fields {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
align-items: center;
gap: 0;
margin-left: 20px;
}
.ga4-veh-owner-fields label {
padding: 3px 8px 3px 0;
color: #555;
}
.ga4-veh-owner-fields input {
width: 100%;
border: 1px solid #c1c1c1;
background: #f8f8f8;
padding: 2px 6px;
}
.ga4-veh-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px 28px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #aaa;
font-size: 13px;
}
.ga4-veh-feature-grid label {
min-height: 20px;
}
@media (max-width: 1150px) {
.ga4-top-search { display: none; }
.ga4-veh-card {
padding-right: 14px;
}
.ga4-veh-owner-panel {
position: static;
width: 100%;
margin-bottom: 8px;
}
}
/* Admin full-screen GA4 pass */
.ga4-admin {
flex: 1 1 auto;
min-height: 0;
height: 100%;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
}
.ga4-admin-panel {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
border: 3px solid #1f1f1f;
border-radius: 3px;
background: #202020;
overflow: hidden;
}
.ga4-admin-title {
height: 35px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
background: linear-gradient(#0d6f80, #034b5b);
color: #fff;
border-bottom: 1px solid #1a1a1a;
font-size: 15px;
}
.ga4-admin-title strong {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ga4-admin-close {
margin-left: auto;
width: 38px;
height: 27px;
display: grid;
place-items: center;
border: 1px solid #64103a;
background: #9b1f56;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.ga4-admin-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 0 0 auto;
background: #272727;
}
.ga4-admin-tabs a {
height: 35px;
display: grid;
place-items: center;
border-right: 1px solid #222;
background: linear-gradient(#646464, #393939);
color: #fff;
text-decoration: none;
font-size: 14px;
}
.ga4-admin-tabs a.active {
background: #d7d7d7;
color: #111;
border-top: 2px solid #242424;
}
.ga4-admin-workarea {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
display: flex;
overflow: hidden;
background: #d7d7d7;
}
.ga4-admin-browser {
width: clamp(220px, 16vw, 300px);
flex: 0 0 clamp(220px, 16vw, 300px);
min-height: 0;
display: flex;
flex-direction: column;
border-right: 2px solid #202020;
background: #303030;
overflow: hidden;
}
.ga4-admin-panel:not(.has-tool) .ga4-admin-browser {
display: none;
}
.ga4-admin-browser-head {
height: 30px;
display: flex;
align-items: center;
padding: 0 9px;
color: #fff;
background: linear-gradient(#5e5e5e, #393939);
border-bottom: 1px solid #1c1c1c;
font-weight: 700;
}
.ga4-admin-browser-grid {
min-height: 0;
flex: 1 1 auto;
padding: 8px;
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: 6px;
overflow: auto;
}
.ga4-admin-mini-tile {
min-height: 58px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 5px 8px;
border: 1px solid #181818;
background: linear-gradient(#5e5e5e, #383838);
color: #fff;
text-decoration: none;
}
.ga4-admin-mini-tile.active {
background: linear-gradient(#ececec, #cfcfcf);
color: #111;
}
.ga4-admin-mini-icon,
.ga4-admin-icon {
display: grid;
place-items: center;
width: 34px;
height: 28px;
border-radius: 3px;
background: #4f7886;
color: #fff;
font-size: 12px;
font-weight: 800;
}
.ga4-admin-mini-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.ga4-admin-mini-copy strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.ga4-admin-mini-copy small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
opacity: .72;
font-size: 10.5px;
}
.ga4-admin-stage {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
overflow: hidden;
background: #d7d7d7;
}
.ga4-admin-panel:not(.has-tool) .ga4-admin-stage {
flex-direction: column;
}
.ga4-admin-icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.ga4-admin-svg {
width: 23px;
height: 23px;
stroke: currentColor;
fill: none;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.ga4-admin-landing-head {
flex: 0 0 auto;
display: flex;
align-items: baseline;
gap: 14px;
padding: 14px 18px 4px;
background: #d7d7d7;
}
.ga4-admin-landing-head h2 {
margin: 0;
font-size: 20px;
color: #111;
}
.ga4-admin-landing-head p {
margin: 0;
color: #4e5a55;
font-size: 13px;
}
.ga4-admin-grid {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
grid-auto-rows: minmax(110px, auto);
align-content: start;
gap: 10px;
padding: 12px 18px 18px;
overflow: auto;
}
.ga4-admin-grid.active {
display: grid;
}
.ga4-admin-tile {
min-height: 110px;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid #b7b7b7;
background: linear-gradient(#fff, #dedede);
color: #111;
text-decoration: none;
text-align: left;
font-size: 13px;
}
.ga4-admin-tile strong {
max-width: 100%;
overflow-wrap: anywhere;
}
.ga4-admin-tile-copy {
min-width: 0;
display: grid;
gap: 5px;
}
.ga4-admin-tile-copy strong {
font-size: 14px;
line-height: 1.2;
}
.ga4-admin-tile-copy small {
color: #586661;
font-size: 12px;
line-height: 1.35;
}
.ga4-admin-tool {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ededed;
}
.ga4-admin-tool-head {
min-height: 34px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
background: linear-gradient(#5d5d5d, #333);
color: #fff;
border-bottom: 1px solid #202020;
}
.ga4-admin-tool-head strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-admin-tool-head span {
color: #e7e7e7;
white-space: nowrap;
}
.ga4-admin-actions {
flex: 0 0 auto;
min-height: 34px;
padding: 5px 7px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
border-bottom: 1px solid #c2c2c2;
background: #ececec;
}
.ga4-admin-actions button,
.ga4-admin-filterbar button,
.ga4-admin-alpha button,
.ga4-admin-tabline button,
.ga4-admin-export-panel button,
.ga4-admin-form > button {
min-height: 26px;
border: 1px solid #b3b3b3;
background: linear-gradient(#fff, #dcdcdc);
color: #111;
padding: 3px 10px;
font: inherit;
}
.ga4-admin-actions button:disabled,
.ga4-admin-export-panel button:disabled {
color: #9b9b9b;
background: #ececec;
}
.ga4-admin-alpha,
.ga4-admin-filterbar {
flex: 0 0 auto;
padding: 4px 8px;
display: flex;
flex-wrap: wrap;
gap: 3px;
background: #ededed;
border-bottom: 1px solid #d4d4d4;
}
.ga4-admin-alpha button {
min-width: 28px;
min-height: 22px;
padding: 1px 5px;
font-size: 11px;
}
.ga4-admin-table-wrap {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
overflow: auto;
background: #f2f2f2;
}
.ga4-admin-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: #f5f5f5;
}
.ga4-admin-table th,
.ga4-admin-table td {
height: 26px;
padding: 4px 8px;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #dcdcdc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.ga4-admin-table th {
background: #cecece;
color: #111;
font-weight: 700;
}
.ga4-admin-table tr.selected td,
.ga4-admin-table tr:hover td {
background: #acecf4;
}
.ga4-admin-table .empty {
height: 120px;
text-align: center;
color: #777;
font-style: italic;
}
.ga4-admin-table.compact th,
.ga4-admin-table.compact td {
height: 24px;
}
.ga4-admin-split {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(230px, 32%) minmax(0, 1fr);
gap: 10px;
padding: 10px;
overflow: hidden;
}
.ga4-admin-listbox {
min-height: 0;
display: flex;
flex-direction: column;
border: 1px solid #999;
background: #f4f4f4;
overflow: auto;
}
.ga4-admin-list-title {
height: 28px;
flex: 0 0 auto;
padding: 5px 8px;
background: #5c5c5c;
color: #fff;
font-weight: 700;
}
.ga4-admin-listbox button {
min-height: 28px;
text-align: left;
border: 0;
border-bottom: 1px solid #ddd;
background: #f4f4f4;
padding: 4px 8px;
font: inherit;
}
.ga4-admin-listbox button.active {
background: #acecf4;
}
.ga4-admin-form {
min-height: 0;
min-width: 0;
overflow: auto;
padding: 10px;
background: #eeeeee;
border: 1px solid #b4b4b4;
}
.ga4-admin-form.full {
flex: 1 1 auto;
border: 0;
}
.ga4-admin-field {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
align-items: center;
gap: 8px;
margin: 0 0 7px;
}
.ga4-admin-field.wide {
align-items: start;
}
.ga4-admin-field span {
color: #444;
text-align: right;
}
.ga4-admin-field input,
.ga4-admin-field textarea {
width: 100%;
min-width: 0;
min-height: 26px;
border: 1px solid #c2c2c2;
background: #f8f8f8;
padding: 3px 7px;
color: #111;
font: inherit;
}
.ga4-admin-field textarea {
min-height: 160px;
resize: vertical;
}
.ga4-admin-gridform {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
}
.ga4-admin-tabline {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 8px 0;
border-bottom: 1px solid #1f1f1f;
}
.ga4-admin-tabline button {
border-color: #333;
border-bottom: 0;
background: linear-gradient(#666, #3d3d3d);
color: #fff;
}
.ga4-admin-tabline button:first-child {
background: #d7d7d7;
color: #111;
}
.ga4-admin-checkgrid {
display: grid;
grid-template-columns: repeat(2, minmax(170px, 1fr));
gap: 6px 24px;
padding: 10px 0;
}
.ga4-admin-yn {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 4px 0 8px 158px;
}
.ga4-admin-yn span {
color: #444;
margin-right: 8px;
}
.ga4-admin-yn button {
width: 36px;
height: 25px;
border: 1px solid #999;
background: #e6e6e6;
}
.ga4-admin-yn button.active {
background: #bf5f8a;
font-weight: 700;
}
.ga4-admin-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-left: 158px;
}
.ga4-admin-inline button {
min-height: 24px;
border: 1px solid #aaa;
background: linear-gradient(#fff, #ddd);
}
.ga4-admin-cardgrid {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(3, minmax(210px, 1fr));
align-content: start;
gap: 10px;
padding: 10px;
overflow: auto;
}
.ga4-admin-export-panel {
min-width: 0;
border: 1px solid #b6b6b6;
background: #efefef;
padding: 10px;
}
.ga4-admin-export-panel > strong {
display: block;
margin-bottom: 8px;
}
.ga4-admin-export-panel button {
width: 100%;
margin-top: 7px;
}
.ga4-admin-safe {
margin: 12px 0 0 158px;
padding: 10px;
border: 1px solid #b8a366;
background: #fff8d7;
color: #333;
display: grid;
gap: 3px;
}
@media (max-width: 1100px) {
.ga4-admin-browser {
width: 205px;
flex-basis: 205px;
}
.ga4-admin-grid {
grid-template-columns: repeat(3, minmax(145px, 1fr));
}
.ga4-admin-split,
.ga4-admin-cardgrid {
grid-template-columns: 1fr;
}
.ga4-admin-field {
grid-template-columns: 120px minmax(0, 1fr);
}
.ga4-admin-inline,
.ga4-admin-safe,
.ga4-admin-yn {
margin-left: 128px;
}
}
/* Full-audit remediation: keep dense GA4 layout but remove clipped/short controls.
H-rail-final: scope this to .ga4-cal-month-grid a only — the previous
selector `.ga4-cal-picker a, .ga4-cal-picker strong` also captured
the weekday header cells (Mon..Sun) and forced them to
22px, which made `Mon`/`Wed` overflow their 41px cells regardless
of the smaller font-size set on the weekday-only rule above.
The day-number cells (which actually need the larger size)
are unaffected. */
.ga4-cal-month-grid a {
font-size: 22px;
line-height: 1;
}
.ga4-cal-main button,
.ga4-doc-row button.ga4-icon-btn {
min-width: 54px;
padding-left: 6px;
padding-right: 6px;
}
.ga4-cal-mode-panel {
grid-column: 2 / -1;
grid-row: 2 / -1;
z-index: 6;
margin: 8px;
padding: 8px 10px;
background: #fffef3;
border: 1px solid #888;
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
overflow: auto;
font-size: 12px;
line-height: 1.35;
}
.ga4-cal-mode-panel strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
}
.ga4-cal-mode-panel p {
margin: 0 0 6px 0;
}
.ga4-cal-mode-panel ul {
margin: 0;
padding-left: 18px;
}
.ga4-action-form {
display: grid;
gap: 8px;
min-width: min(520px, 82vw);
}
.ga4-action-field {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
align-items: start;
gap: 8px;
font-size: 12px;
}
.ga4-action-field span {
padding-top: 4px;
color: #333;
font-weight: 700;
}
.ga4-action-field input,
.ga4-action-field textarea,
.ga4-action-field select {
width: 100%;
min-height: 25px;
border: 1px solid #aaa;
padding: 3px 6px;
font: inherit;
background: #fff;
}
.ga4-action-field textarea {
min-height: 76px;
resize: vertical;
}
.ga4-action-note {
border: 1px solid #b8a366;
background: #fff8d7;
padding: 7px 9px;
color: #333;
line-height: 1.35;
}
.ga4-action-buttons {
display: flex;
justify-content: flex-end;
gap: 7px;
}
.ga4-action-buttons button {
min-height: 28px;
padding: 4px 14px;
border: 1px solid #777;
background: linear-gradient(#fff, #ddd);
color: #111;
}
.ga4-doc-modal-box:has(.ga4-customer-comms) {
width: min(900px, calc(100vw - 80px));
}
.ga4-doc-modal-box:has(.ga4-customer-sms),
.ga4-doc-modal-box:has(.ga4-doc-sms-form) {
width: min(1160px, calc(100vw - 70px));
}
.ga4-customer-comms {
min-width: min(840px, calc(100vw - 120px));
}
.ga4-customer-sms,
.ga4-doc-sms-form {
min-width: min(1080px, calc(100vw - 120px));
padding: 16px 18px;
box-sizing: border-box;
}
.ga4-customer-comms textarea {
min-height: 150px;
}
.ga4-customer-sms textarea,
.ga4-doc-sms-form textarea {
min-height: 230px;
}
.ga4-customer-comms .ga4-customer-email-body {
min-height: 260px;
}
.ga4-doc-modal--email {
justify-content: center;
padding: 0;
}
.ga4-doc-modal--email .ga4-doc-modal-box {
width: calc(100vw - 8px);
height: calc(100vh - 8px);
max-height: calc(100vh - 8px);
display: flex;
flex-direction: column;
}
.ga4-doc-modal--email .ga4-doc-modal-title {
padding: 8px 10px;
background: linear-gradient(#565656, #252525);
}
.ga4-doc-modal--email .ga4-doc-modal-body {
flex: 1 1 auto;
overflow: hidden;
padding: 0;
background: #ececec;
}
.ga4-doc-modal--email .ga4-doc-modal-actions {
display: none;
}
.ga4-email-compose {
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
background: #efefef;
color: #1d1d1d;
font-size: 14px;
}
.ga4-email-toolbar {
display: grid;
grid-template-columns: repeat(3, 142px) minmax(0, 1fr);
height: 42px;
border-top: 1px solid #1f1f1f;
border-bottom: 1px solid #2b2b2b;
background: linear-gradient(#646464, #3a3a3a);
}
.ga4-email-toolbar button {
border: 0;
border-right: 1px solid #252525;
background: transparent;
color: #f5f5f5;
font: 600 15px Arial, Helvetica, sans-serif;
cursor: pointer;
}
.ga4-email-toolbar button:hover {
background: rgba(255,255,255,0.10);
}
.ga4-email-top {
display: grid;
grid-template-columns: minmax(0, 1fr) 460px;
gap: 22px;
padding: 30px 46px 12px;
}
.ga4-email-fields {
min-width: 0;
display: grid;
gap: 0;
}
.ga4-email-fields label {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
align-items: center;
}
.ga4-email-fields label span {
padding: 4px 8px 4px 2px;
color: #686868;
}
.ga4-email-fields input,
.ga4-email-fields select {
min-height: 27px;
border: 1px solid #c6c6c6;
border-bottom-color: #d9d9d9;
padding: 3px 7px;
background: #fff;
color: #111;
font: 14px Arial, Helvetica, sans-serif;
}
.ga4-email-fields input[readonly] {
color: #666;
background: #f7f7f7;
}
.ga4-email-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
}
.ga4-email-split label:first-child input {
border-right: 0;
}
.ga4-email-split label:last-child {
grid-template-columns: 58px minmax(0, 1fr);
}
.ga4-email-toolsrow {
display: grid;
grid-template-columns: 250px 250px;
gap: 36px;
margin-top: 14px;
}
.ga4-email-toolsrow label {
grid-template-columns: 1fr;
gap: 5px;
}
.ga4-email-toolsrow label span {
padding: 0;
}
.ga4-email-attachments {
min-height: 160px;
border: 2px solid #4a4a4a;
border-radius: 4px;
background: #fff;
overflow: hidden;
}
.ga4-email-attach-head {
height: 30px;
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
padding: 0 10px;
border-bottom: 1px solid #333;
background: #c4c4c4;
color: #1d1d1d;
font-weight: 700;
}
.ga4-email-attach-file {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 28px;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 3px 8px;
border-bottom: 1px solid #e1e1e1;
}
.ga4-email-pdf {
display: inline-grid;
place-items: center;
width: 28px;
height: 22px;
border: 1px solid #c9c9c9;
color: #c0392b;
font-size: 9px;
font-weight: 800;
}
.ga4-email-attach-file > span:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-email-attach-file button {
border: 0;
background: transparent;
color: #c0392b;
font-weight: 800;
}
.ga4-email-body {
flex: 1 1 auto;
min-height: 0;
margin: 0 46px 30px;
padding: 8px;
border: 2px solid #333;
background: #fff;
color: #111;
font: 15px Arial, Helvetica, sans-serif;
line-height: 1.45;
resize: none;
}
.ga4-doc-row.postcode {
grid-template-columns: 100px minmax(0, 1fr) 82px minmax(0, 1fr) 56px;
}
.ga4-doc-row.email input.full,
.ga4-doc-row.two input {
text-overflow: ellipsis;
}
.ga4-doc-select-controlled {
min-width: 128px;
}
.ga4-payment-grid {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 10px 12px;
align-items: end;
}
.ga4-payment-grid label {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 6px;
}
.ga4-payment-grid label.wide { grid-column: 1 / 3; }
.ga4-payment-grid input,
.ga4-payment-grid select {
height: 28px;
border: 1px solid #aaa;
padding: 3px 6px;
}
.ga4-payment-grid button {
height: 28px;
border: 1px solid #999;
background: linear-gradient(#fff, #ddd);
}
.ga4-payment-balance {
grid-column: 3;
grid-row: 1 / span 3;
display: grid;
grid-template-rows: 32px 44px;
min-width: 190px;
border: 1px solid #aeb8c2;
background: #fff;
text-align: center;
}
/* ---- I-2 (OVR004): Issue Invoice / Add Payments modal geometry ----
GA4 truth captures 071 + 084 + 086: wide right-positioned window with
a two-column body (form rail + balance side) and a Payments history
block underneath. */
.ga4-issue-modal-body {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
gap: 16px;
padding: 14px 16px 0;
background: #f5f5f5;
}
.ga4-issue-form-rail {
display: flex;
flex-direction: column;
gap: 12px;
}
.ga4-issue-field {
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.ga4-issue-field-label {
font-size: 13px;
color: #333;
font-weight: 600;
}
.ga4-issue-field-control {
display: flex;
gap: 6px;
align-items: center;
}
.ga4-issue-field-control select,
.ga4-issue-field-control input {
flex: 1;
min-width: 0;
height: 30px;
border: 1px solid #9aa1ab;
padding: 3px 7px;
background: #fff;
font: inherit;
}
.ga4-issue-x {
width: 30px;
height: 30px;
border: 1px solid #777;
background: #a02238;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.ga4-issue-x:hover { background: #c1334b; }
.ga4-issue-pill {
height: 30px;
padding: 0 14px;
border: 1px solid #888;
background: linear-gradient(#fff, #ddd);
cursor: pointer;
font: inherit;
white-space: nowrap;
}
.ga4-issue-amount {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.ga4-issue-cal {
width: 34px;
height: 30px;
border: 1px solid #888;
background: linear-gradient(#fff, #ddd);
cursor: pointer;
font-size: 15px;
}
.ga4-issue-field--note .ga4-issue-field-control input { flex: 1; }
.ga4-issue-save {
margin-top: 6px;
padding-left: 98px; /* align with control column */
}
.ga4-issue-save-btn {
width: 100%;
min-height: 44px;
background: linear-gradient(#5db663, #2f8d3f);
border: 1px solid #1d6b29;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.ga4-issue-save-btn:hover { filter: brightness(1.05); }
.ga4-issue-balance {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #aeb8c2;
}
.ga4-issue-balance-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #e3e7ec;
font-size: 13px;
}
.ga4-issue-balance-row:last-child { border-bottom: 0; }
.ga4-issue-balance-row span { color: #555; }
.ga4-issue-balance-row strong {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: #1a2033;
}
.ga4-issue-balance-row--remaining {
background: #f7f4d8;
border-top: 1px solid #d6cb88;
font-weight: 700;
}
.ga4-issue-balance-row--remaining strong { color: #6a4a00; }
.ga4-issue-history {
padding: 14px 16px;
background: #f5f5f5;
border-top: 1px solid #dcdfe4;
}
.ga4-issue-history h4 {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
}
.ga4-issue-history-empty {
color: #8a94a6;
font-style: italic;
font-size: 12.5px;
padding: 8px 4px;
}
/* ---- I-4 (OVR008 + OVR009): Insurance Excess + Credit Note modals ----
Both transaction modals share the same wide-shell + two-column layout
so they read as GA4 Transactions surfaces, not generic clone forms. */
.ga4-tx-modal {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
gap: 16px;
padding: 14px 16px 14px;
background: #f5f5f5;
}
.ga4-tx-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
align-content: start;
}
.ga4-tx-field {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.ga4-tx-field--wide { grid-column: 1 / -1; }
.ga4-tx-field > span {
font-size: 12px;
font-weight: 600;
color: #4a5568;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ga4-tx-field > input,
.ga4-tx-field input:not(.ga4-tx-amount-input):not(.ga4-tx-date-input) {
height: 30px;
border: 1px solid #9aa1ab;
padding: 3px 7px;
background: #fff;
font: inherit;
}
.ga4-tx-amount-wrap {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
border: 1px solid #9aa1ab;
background: #fff;
}
.ga4-tx-currency {
text-align: center;
font-weight: 700;
color: #4a5568;
background: #f0f2f5;
border-right: 1px solid #d3d7df;
line-height: 28px;
height: 28px;
}
.ga4-tx-amount-input {
height: 28px;
border: 0;
outline: 0;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 14px;
padding: 3px 8px;
background: transparent;
}
.ga4-tx-inline {
display: flex;
gap: 6px;
align-items: center;
}
.ga4-tx-date-input {
flex: 1;
height: 30px;
border: 1px solid #9aa1ab;
padding: 3px 7px;
background: #fff;
font: inherit;
font-variant-numeric: tabular-nums;
}
.ga4-tx-side {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #aeb8c2;
}
.ga4-tx-side > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #e3e7ec;
font-size: 13px;
}
.ga4-tx-side > div:last-child { border-bottom: 0; }
.ga4-tx-side strong {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.ga4-tx-side--remainder {
background: #f7f4d8;
border-top: 1px solid #d6cb88 !important;
font-weight: 700;
}
.ga4-tx-side--remainder strong { color: #6a4a00; }
.ga4-tx-warn {
grid-column: 1 / -1;
background: #fff4d0;
border: 1px solid #d6b04a;
border-left: 4px solid #b78509;
padding: 9px 12px;
font-size: 12.5px;
line-height: 1.45;
color: #4a3a07;
}
.ga4-tx-warn strong { color: #6a4a00; }
.ga4-tx-buttons {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 4px;
}
.ga4-tx-primary {
min-height: 38px;
padding: 0 18px;
border: 1px solid #1d6b29;
background: linear-gradient(#5db663, #2f8d3f);
color: #fff;
font-weight: 700;
cursor: pointer;
font-size: 13px;
}
.ga4-tx-primary:hover { filter: brightness(1.05); }
.ga4-tx-secondary {
min-height: 38px;
padding: 0 14px;
border: 1px solid #888;
background: linear-gradient(#fff, #ddd);
color: #1a2033;
cursor: pointer;
font-size: 13px;
}
/* I-4: tidier created Credit Note view — replaces the generic clone
chrome on a CN that lives at /invoices/ (CN docs share the SI
detail template). We tag the doc body with .ga4-cn-detail when the
doc_type is CN so we can swap accents without touching the SI shell. */
.ga4-cn-detail .ga4-doc-toolbar { background: linear-gradient(#5b3d7e, #3e2960); }
.ga4-cn-detail .ga4-doc-header-bar { background: #f4eaff; border-color: #c4a8e0; }
.ga4-cn-detail .ga4-doc-card { border-left: 4px solid #5b3d7e; }
/* ---- J-1 (OVR009): dedicated Credit Note detail surface ----
Lives at /credits/ via templates/documents/credit_note.html. The
CN is read-only post-creation so the surface drops Issue/Draft/
Convert/Transactions and uses a deep-red identity band that reads
as a credit document, not a colourised invoice. */
.ga4-doc-titlebar.ga4-doc-titlebar--cn {
background: linear-gradient(#a02238, #6b1424);
color: #fff;
}
.ga4-doc-titlebar.ga4-doc-titlebar--cn strong { color: #fff; }
.ga4-cn-warn {
background: #fff;
color: #6b1424;
padding: 2px 8px;
font-weight: 700;
border-radius: 3px;
margin-left: 8px;
}
.ga4-cn-detail .ga4-doc-toolbar {
background: linear-gradient(#5c5c5c, #2f2f2f);
border-bottom: 3px solid #a02238;
}
.ga4-cn-identity {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: #d0d0d0;
border-top: 1px solid #b8b8b8;
border-bottom: 1px solid #b8b8b8;
margin: 0;
}
.ga4-cn-identity-cell {
display: flex;
flex-direction: column;
padding: 10px 14px;
background: #fff;
gap: 2px;
}
.ga4-cn-identity-cell > span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6b7280;
}
.ga4-cn-identity-cell > strong {
font-size: 18px;
font-weight: 700;
color: #1a2033;
font-variant-numeric: tabular-nums;
}
.ga4-cn-identity-cell > strong a {
color: #1d4ed8;
text-decoration: none;
border-bottom: 1px dotted #1d4ed8;
}
.ga4-cn-sub {
font-size: 11px;
color: #8a94a6;
font-weight: 500;
}
.ga4-cn-identity-cell--total {
background: #fce6e0;
}
.ga4-cn-credit {
color: #a02238;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ga4-cn-fields {
padding: 12px 14px;
}
.ga4-cn-section-heading {
margin: 0 0 6px;
padding: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6b7280;
border-bottom: 1px solid #d3d7df;
padding-bottom: 4px;
}
.ga4-cn-lines {
padding: 4px 14px 14px;
}
.ga4-cn-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: #fff;
border: 1px solid #d3d7df;
}
.ga4-cn-table th,
.ga4-cn-table td {
padding: 6px 8px;
border-bottom: 1px solid #eef0f3;
text-align: left;
}
.ga4-cn-table th { background: #f0f2f5; color: #1a2033; font-weight: 700; }
.ga4-cn-table td.num,
.ga4-cn-table th.num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ga4-cn-table th.grow,
.ga4-cn-table td.grow { width: auto; }
.ga4-cn-table tfoot th { background: #f7f4d8; }
.ga4-cn-totals-label { text-align: right; }
.ga4-cn-totals-grand th,
.ga4-cn-totals-grand td {
background: #fce6e0 !important;
font-weight: 800;
font-size: 13px;
border-top: 2px solid #a02238;
}
.ga4-cn-activity {
padding: 4px 14px 18px;
}
.ga4-cn-activity-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: #fff;
border: 1px solid #d3d7df;
}
.ga4-cn-activity-table th,
.ga4-cn-activity-table td {
padding: 6px 8px;
border-bottom: 1px solid #eef0f3;
text-align: left;
}
.ga4-cn-activity-table th { background: #f0f2f5; font-weight: 700; }
/* Visual backlog fix pass — dark FileMaker-style anchored popover.
GA4 truth (recapture 023 / 035 / 037 / 042 / 095): the doc-toolbar
dropdown is a dark slate gradient with white labels, larger row
height, sharp corners, and a thin top border below the trigger.
Previously this was a flat white popover with light hover — the
live audit flagged it as 'web-looking, not FileMaker'. Apply the
new shell + items rules in one block so every doc-action popover
on the platform (Convert / Transactions / Extras / Draft / future
anchored menus that use #docPopover) inherits the same style. */
.ga4-doc-popover {
position: absolute;
z-index: 60;
background: linear-gradient(#4a4a4d, #2c2c2f);
border: 1px solid #0e0e10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
min-width: 200px;
padding: 2px 0;
font-family: 'Outfit', sans-serif;
}
.ga4-doc-popover[hidden] { display: none; }
.ga4-doc-popover .ga4-menu-item {
text-align: left;
padding: 10px 18px;
min-height: 38px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: transparent;
color: #f2f3f5;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.ga4-doc-popover .ga4-menu-item:last-child { border-bottom: 0; }
.ga4-doc-popover .ga4-menu-item:hover,
.ga4-doc-popover .ga4-menu-item:focus {
background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.04));
color: #ffffff;
outline: none;
}
.ga4-doc-popover .ga4-menu-item:active {
background: rgba(0, 0, 0, 0.20);
}
.ga4-doc-popover .ga4-menu-item[disabled] {
color: rgba(255, 255, 255, 0.40);
cursor: not-allowed;
}
/* ---- I-5 (OVR010): distinct ES / JS / SI / CN print variants ----
The print template (templates/documents/print.html) ships a single
.ga4-print-body class. I-5 adds the doc-type modifier
.ga4-print-body--es | --js | --si | --cn so each variant has its
own accent without forking the template. */
.ga4-print-body--es .ga4-print-head { border-top: 6px solid #2f8d3f; }
.ga4-print-body--js .ga4-print-head { border-top: 6px solid #5b3d7e; }
.ga4-print-body--si .ga4-print-head { border-top: 6px solid #1d4ed8; }
.ga4-print-body--cn .ga4-print-head { border-top: 6px solid #c0392b; }
.ga4-print-body--es .ga4-print-docno strong { color: #2f8d3f; }
.ga4-print-body--js .ga4-print-docno strong { color: #5b3d7e; }
.ga4-print-body--si .ga4-print-docno strong { color: #1d4ed8; }
.ga4-print-body--cn .ga4-print-docno strong { color: #c0392b; }
.ga4-print-state {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 3px;
text-transform: uppercase;
vertical-align: middle;
}
.ga4-print-state--draft { background: #fff0c5; color: #6a4a00; border: 1px solid #d6b04a; }
.ga4-print-state--issued { background: #d3f6df; color: #1a5b25; border: 1px solid #4cae62; }
.ga4-print-state--cn { background: #fce6e0; color: #8b1f12; border: 1px solid #c0392b; }
.ga4-print-state--pdf { background: #e4ecff; color: #1d4ed8; border: 1px solid #1d4ed8; }
.ga4-print-state--advisories { background: #fff0c5; color: #6a4a00; border: 1px solid #d6b04a; }
.ga4-print-state--jobsheet { background: #ece1ff; color: #3e2960; border: 1px solid #5b3d7e; }
.ga4-print-state--checklist { background: #d3f6df; color: #1a5b25; border: 1px solid #4cae62; }
.ga4-print-totals-note strong { color: #1a2033; font-size: 13px; }
.ga4-print-totals-note span { display: block; color: #4a5568; margin-top: 4px; font-size: 12px; line-height: 1.4; }
@media print {
.ga4-print-body--es .ga4-print-head { border-top-width: 8px; }
.ga4-print-body--js .ga4-print-head { border-top-width: 8px; }
.ga4-print-body--si .ga4-print-head { border-top-width: 8px; }
.ga4-print-body--cn .ga4-print-head { border-top-width: 8px; }
}
/* ---- J-2 (OVR010): Extras print variants ----
Each ?layout= picks its own template (see
_PRINT_LAYOUTS in app/blueprints/documents.py). These rules style
the variant-specific blocks shared across templates: the advisory
list/badge, the jobsheet vehicle band + sign-off, the checklist
bands + tick-cells. */
.ga4-print-section {
margin: 18px 0 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #1a2033;
border-bottom: 1px solid #d3d7df;
padding-bottom: 4px;
}
.ga4-print-advisory-list th,
.ga4-print-advisory-list td { vertical-align: top; }
.ga4-print-advisory-badge {
display: inline-block;
padding: 2px 7px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
}
.ga4-print-advisory-badge--advisory,
.ga4-print-advisory-badge--watch { background: #fff0c5; color: #6a4a00; border: 1px solid #d6b04a; }
.ga4-print-advisory-badge--fail,
.ga4-print-advisory-badge--reject { background: #fce6e0; color: #8b1f12; border: 1px solid #c0392b; }
.ga4-print-advisory-badge--pass,
.ga4-print-advisory-badge--ok { background: #d3f6df; color: #1a5b25; border: 1px solid #4cae62; }
.ga4-print-advisory-badge--reviewed { background: #e4ecff; color: #1d4ed8; border: 1px solid #1d4ed8; }
.ga4-print-advisory-empty {
padding: 14px;
border: 1px dashed #b6bbc4;
background: #f0f2f5;
color: #4a5568;
font-style: italic;
}
.ga4-print-advisory-signoff,
.ga4-print-jobsheet-signoff {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-top: 24px;
font-size: 12px;
}
.ga4-print-sig-line {
display: inline-block;
flex: 1;
border-bottom: 1px solid #1a2033;
height: 22px;
margin-left: 8px;
min-width: 110px;
}
.ga4-print-advisory-signoff > div,
.ga4-print-jobsheet-signoff > div {
display: flex;
align-items: flex-end;
}
/* Jobsheet variant — bigger vehicle band, no prices on the line table. */
.ga4-print-vehicle-band {
background: #f0f2f5;
border: 1px solid #d3d7df;
border-left: 4px solid #5b3d7e;
padding: 12px 14px;
margin: 14px 0;
}
.ga4-print-vehicle-band h2 {
margin: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #6b7280;
}
.ga4-print-vehicle-band-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px 18px;
}
.ga4-print-vehicle-band-grid > div { display: flex; flex-direction: column; }
.ga4-print-vehicle-band-grid > div > span {
font-size: 11px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ga4-print-vehicle-band-grid > div > strong {
font-size: 14px;
font-weight: 700;
color: #1a2033;
font-variant-numeric: tabular-nums;
}
.ga4-print-jobsheet-lines th,
.ga4-print-jobsheet-lines td { vertical-align: top; }
.ga4-print-jobsheet-done {
text-align: center;
width: 60px;
font-size: 18px;
}
.ga4-print-jobsheet-notes-box {
height: 64px;
border: 1px solid #b6bbc4;
background: #fff;
margin-bottom: 6px;
}
/* Checklist variant — pre-printed bands with tickable boxes. */
.ga4-print-checklist-band {
break-inside: avoid;
margin: 12px 0;
}
.ga4-print-checklist-band h3 {
margin: 0 0 4px;
font-size: 13px;
font-weight: 700;
color: #1a2033;
background: #f0f2f5;
padding: 6px 10px;
border-left: 3px solid #2f8d3f;
}
.ga4-print-checklist-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.ga4-print-checklist-table th,
.ga4-print-checklist-table td {
border: 1px solid #d3d7df;
padding: 4px 6px;
vertical-align: top;
}
.ga4-print-checklist-table th { background: #f6f7f9; }
.ga4-print-checklist-table td.num { text-align: center; font-size: 16px; width: 38px; }
.ga4-print-checklist-table td:last-child { min-width: 220px; }
.ga4-print-checklist-recorded {
margin-top: 18px;
padding: 12px;
background: #fff8d7;
border: 1px solid #d6b04a;
}
.ga4-print-checklist-recorded h2 {
margin: 0 0 6px;
font-size: 12px;
text-transform: uppercase;
color: #6a4a00;
letter-spacing: 0.5px;
}
.ga4-print-checklist-recorded ul {
margin: 0;
padding-left: 18px;
}
.ga4-print-checklist-recorded li {
font-size: 12px;
padding: 3px 0;
}
/* PDF variant — slightly tighter shadow + bumped gutters for a cleaner
PDF export aesthetic when the user prints from this layout. */
.ga4-print-layout--pdf .ga4-print-doc { padding: 0 8px; }
.ga4-print-doc--pdf .ga4-print-head { padding-bottom: 8px; }
@media print {
.ga4-print-jobsheet-notes-box { background: #fff !important; }
}
.ga4-payment-balance strong {
padding-top: 8px;
background: #f6f6f6;
}
.ga4-payment-balance span {
padding-top: 11px;
color: #b00000;
font-weight: 700;
font-size: 16px;
}
.ga4-veh-feature-grid input[type=checkbox],
.ga4-admin-checkgrid input[type=checkbox] {
width: 20px;
height: 20px;
min-height: 20px;
vertical-align: middle;
}
.ga4-admin-mini-tile {
min-height: 46px;
}
.ga4-admin-mini-tile strong {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.15;
}
.ga4-admin-actions button,
.ga4-admin-filterbar button,
.ga4-admin-alpha button,
.ga4-admin-tabline button,
.ga4-admin-export-panel button,
.ga4-admin-form > button,
.ga4-admin-listbox button {
min-height: 28px;
line-height: 1.2;
}
.ga4-admin-alpha button.active,
.ga4-admin-filterbar button.active,
.ga4-admin-tabline button.active {
background: #d7d7d7;
color: #111;
font-weight: 700;
}
.ga4-admin-table td {
min-width: 0;
}
.ga4-print-body {
margin: 0;
background: #d8d8d8;
color: #111;
font: 13px Arial, Helvetica, sans-serif;
/* Normal document flow — the window scrolls, not a nested box. */
height: auto;
min-height: 100%;
}
.ga4-print-doc {
width: 920px;
min-height: 1180px;
margin: 24px auto;
padding: 34px 38px;
background: #fff;
border: 1px solid #9b9b9b;
box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.ga4-print-head {
display: flex;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 3px solid #222;
}
.ga4-print-brand {
display: block;
font-size: 26px;
}
.ga4-print-head span,
.ga4-print-meta p,
.ga4-print-totals span {
display: block;
margin: 3px 0;
}
.ga4-print-docno {
min-width: 180px;
text-align: right;
}
.ga4-print-docno strong {
display: block;
font-size: 24px;
}
.ga4-print-docno span {
font-size: 18px;
}
.ga4-print-meta {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 20px;
padding: 18px 0;
}
.ga4-print-meta h2,
.ga4-print-receipts h2 {
margin: 0 0 7px;
font-size: 14px;
text-transform: uppercase;
}
.ga4-print-lines {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
}
.ga4-print-lines th,
.ga4-print-lines td {
border: 1px solid #b8b8b8;
padding: 6px 7px;
vertical-align: top;
}
.ga4-print-lines th {
background: #efefef;
text-align: left;
}
.ga4-print-lines .num,
.ga4-print-totals td {
text-align: right;
white-space: nowrap;
}
.ga4-print-lines .empty {
text-align: center;
color: #666;
}
.ga4-print-totals {
display: grid;
grid-template-columns: 1fr 260px;
gap: 24px;
margin-top: 24px;
}
.ga4-print-totals table {
width: 100%;
border-collapse: collapse;
}
.ga4-print-totals th,
.ga4-print-totals td {
border-bottom: 1px solid #bbb;
padding: 6px 0;
}
.ga4-print-totals th {
text-align: left;
}
.ga4-print-receipts {
margin-top: 26px;
}
.ga4-print-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 28px;
}
.ga4-print-foot button {
min-width: 88px;
height: 30px;
}
@media print {
.ga4-print-body {
background: #fff;
}
.ga4-print-doc {
width: auto;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
}
.ga4-print-foot {
display: none;
}
}
/* ---- AutoDiag headed stationery print (refreshed 2026-06-11) ----
Customer-facing headed-paper layout for print.html. It keeps the
GA4 document data shape but gives invoices a stronger letterhead,
invoice summary panel, vehicle strip, and readable work report.
Avoid heavy solid fills: many customers keep PDFs electronically,
but a lot of workshops still print them on mono lasers.
ga4-sty-* classes are additive so the Extras variant templates
(advisories / jobsheet / checklist / pdf) keep their own styling. */
.ga4-sty-doc {
display: flex;
flex-direction: column;
color: #111;
font: 12.5px Arial, Helvetica, sans-serif;
line-height: 1.35;
}
.ga4-sty-letterhead {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
align-items: end;
gap: 30px;
padding: 8px 0 18px;
border-bottom: 4px solid #c0392b;
}
.ga4-sty-letterhead::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 84px;
height: 4px;
background: #c0392b;
}
.ga4-sty-kicker {
margin: 0 0 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.1px;
text-transform: uppercase;
color: #c0392b;
}
.ga4-sty-company h1 {
margin: 0;
font-size: 47px;
line-height: 0.95;
font-weight: 800;
letter-spacing: 0;
color: #17191f;
}
.ga4-sty-company .ga4-sty-address {
margin: 14px 0 0;
max-width: 260px;
line-height: 1.45;
font-size: 11.5px;
color: #3f4650;
text-transform: uppercase;
}
.ga4-sty-company p {
margin: 0;
}
.ga4-sty-contact {
padding: 10px 0 2px 18px;
border-left: 1px solid #d8dde5;
text-align: right;
font-size: 11.5px;
color: #252a32;
}
.ga4-sty-contact p {
margin: 0 0 7px;
}
.ga4-sty-contact span {
display: inline-block;
min-width: 46px;
text-align: right;
color: #8a929e;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
}
/* Brand rule: thin red, prints as a clean mid-grey hairline in mono. */
.ga4-sty-band {
height: 3px;
margin: 12px 0 16px;
background: #c0392b;
}
.ga4-sty-addr {
display: grid;
grid-template-columns: minmax(0, 1fr) 318px;
gap: 26px;
padding: 20px 0 18px;
align-items: stretch;
}
.ga4-sty-sechead {
margin: 0 0 9px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #c0392b;
}
.ga4-sty-customer {
min-height: 118px;
padding: 13px 16px 12px 18px;
background: #f7f8fa;
border-left: 5px solid #c0392b;
border-top: 1px solid #e3e6eb;
border-right: 1px solid #e3e6eb;
border-bottom: 1px solid #e3e6eb;
}
.ga4-sty-customer p {
margin: 0 0 4px;
color: #16191e;
}
.ga4-sty-customer .ga4-sty-sechead {
margin-bottom: 10px;
}
.ga4-sty-nocust {
color: #888;
font-style: italic;
}
.ga4-sty-meta {
min-width: 0;
padding: 15px 18px 14px;
background: #f8fafc;
color: #17191f;
border: 1px solid #dfe4ec;
border-left: 5px solid #c0392b;
border-radius: 4px;
}
.ga4-sty-meta-title {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 12px;
}
.ga4-sty-meta-title strong:first-child {
font-size: 12px;
font-weight: 700;
letter-spacing: 2.8px;
text-transform: uppercase;
color: #c0392b;
}
.ga4-sty-meta-title .ga4-sty-num {
font-size: 28px;
line-height: 1;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ga4-sty-meta-amount {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 0 0 12px;
padding: 11px 0;
border-top: 1px solid #d6dce5;
border-bottom: 1px solid #d6dce5;
}
.ga4-sty-meta .ga4-sty-meta-amount span {
color: #606975;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.ga4-sty-meta-amount strong {
color: #c0392b;
font-size: 23px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ga4-sty-meta > div:not(.ga4-sty-meta-title):not(.ga4-sty-meta-amount) {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 5px 0;
}
.ga4-sty-meta > div:not(.ga4-sty-meta-title):not(.ga4-sty-meta-amount) span {
color: #606975;
font-size: 11px;
}
.ga4-sty-meta em {
font-style: normal;
color: #17191f;
font-variant-numeric: tabular-nums;
}
.ga4-sty-vehicle {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0 0 18px;
table-layout: fixed;
border: 1px solid #cfd4dd;
}
.ga4-sty-vehicle td {
border: 0;
border-right: 1px solid #d9dde4;
border-bottom: 1px solid #d9dde4;
padding: 7px 8px;
text-align: center;
width: 20%;
}
.ga4-sty-vehicle td:last-child {
border-right: 0;
}
.ga4-sty-vehicle tr:last-child td {
border-bottom: 0;
}
.ga4-sty-vehicle tr.h td {
background: #f3f5f8;
border-bottom: 2px solid #c0392b;
color: #333943;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ga4-sty-vehicle td.ga4-sty-reg {
background: #fcd12a; /* UK plate yellow; mono prints a light tint */
color: #111;
font-weight: 800;
font-size: 14.5px;
letter-spacing: 1.2px;
}
/* Padding cells keep 5-per-row alignment when fewer fields are ticked
in Admin > Doc Template Settings > Document headings. */
.ga4-sty-vehicle td.ga4-sty-pad {
border: 0;
background: transparent;
}
.ga4-sty-jobdesc {
margin: 0 0 17px;
white-space: pre-wrap;
line-height: 1.5;
font-size: 11.6px;
color: #1b1d22;
}
.ga4-sty-work {
margin: 0 0 16px;
padding: 12px 14px 0;
border-top: 2px solid #c0392b;
background: linear-gradient(180deg, #fafafa 0, #fff 42px);
}
.ga4-sty-work .ga4-sty-sechead {
margin-bottom: 10px;
}
.ga4-sty-nolines {
color: #888;
font-style: italic;
}
/* Line tables: open rows with hairline separators; the section header
carries the red rule instead of a filled band. */
.ga4-sty-lines {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
font-size: 11.8px;
}
.ga4-sty-lines td {
border: 0;
border-bottom: 1px solid #dde1e7;
padding: 7px 8px;
}
.ga4-sty-lines tr.h td {
background: #f7f8fa;
border-top: 1px solid #c0392b;
border-bottom: 3px solid #c0392b;
color: #333943;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ga4-sty-lines td.desc { width: auto; }
.ga4-sty-lines td.num {
width: 84px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ga4-sty-lines tr.h td.num { text-align: right; }
.ga4-sty-totals {
display: flex;
justify-content: flex-end;
/* No trailing margin: the flex doc container counts it, and 18px here
once pushed a one-page invoice onto two pages by 4px (11 Jun 2026). */
margin: 10px 0 0;
}
.ga4-sty-totals table {
width: 350px;
border-collapse: collapse;
border-spacing: 0;
background: #fff;
border-top: 3px solid #c0392b;
border-bottom: 2px solid #333943;
}
.ga4-sty-totals th {
padding: 6px 12px;
text-align: left;
font-weight: 400;
font-size: 12px;
color: #333943;
}
.ga4-sty-totals td {
width: 120px;
padding: 6px 12px;
border: 0;
border-bottom: 1px solid #e2e6ec;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ga4-sty-totals tr.sub th,
.ga4-sty-totals tr.bal th,
.ga4-sty-totals tr.sub td,
.ga4-sty-totals tr.bal td {
font-weight: 700;
}
/* The headline figure: strong rules, red value (mono: dark grey). */
.ga4-sty-totals tr.total th,
.ga4-sty-totals tr.total td {
background: #f6f7f9;
border-top: 2px solid #333943;
border-bottom: 2px solid #333943;
font-weight: 800;
font-size: 15.5px;
}
.ga4-sty-totals tr.total td {
color: #c0392b;
}
.ga4-sty-companyfoot {
margin-top: auto;
padding-top: 24px;
text-align: center;
}
.ga4-sty-companyfoot p {
margin: 2px 0;
}
.ga4-sty-companyfoot .ga4-sty-band {
margin-bottom: 14px;
}
/* Convert / Transactions popover menu items inside the doc action modal. */
.ga4-menu-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 0;
}
.ga4-menu-list .ga4-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 8px 12px;
font-size: 14px;
background: #f6f7fa;
border: 1px solid #c7cdd6;
border-radius: 3px;
cursor: pointer;
}
.ga4-menu-list .ga4-menu-item:hover {
background: #e2eaf5;
border-color: #6f8aa8;
}
/* ====================================================================
Phase G-1: GA4 doc-type colour key + ribbon variants + nav badge.
GA4 recapture 2026-06-04: ES title strip green (shot 021/040), SI
blue (033/070), JS purple (052/093). Unpaid list ribbon red (076).
==================================================================== */
.ga4-doc-titlebar.ga4-doc-titlebar--es {
background: linear-gradient(#6b8a3d, #4f6c2a);
}
.ga4-doc-titlebar.ga4-doc-titlebar--si {
background: linear-gradient(#1d4e7e, #143861);
}
.ga4-doc-titlebar.ga4-doc-titlebar--js {
background: linear-gradient(#5b3d7e, #3e2960);
}
.ga4-doc-titlebar.ga4-doc-titlebar--cn,
.ga4-doc-titlebar.ga4-doc-titlebar--cr {
background: linear-gradient(#8a3939, #5e2424);
}
/* Unpaid worklist ribbon — GA4 red (recapture shot 076). Estimates list
already inherits the default green; Job Sheets list should pick up the
purple variant when its template opts in. */
.ga4-est-ribbon.ga4-est-ribbon--unpaid,
.ga4-est-ribbon.ga4-est-ribbon-unpaid {
background: #a83232;
}
.ga4-est-ribbon.ga4-est-ribbon--js,
.ga4-est-ribbon.ga4-est-ribbon-js {
background: #5b3d7e;
}
.ga4-est-ribbon.ga4-est-ribbon--si,
.ga4-est-ribbon.ga4-est-ribbon-si {
background: #1d4e7e;
}
/* Top-nav reminders badge — driven by reminders_due_count (gap G002). */
.ga4-nav-icon.ga4-nav-icon--badge {
background: #c0392b;
color: #fff;
}
/* G-6: GA4 Issue Invoice / Add Payments four-button bar (recapture
shots 071, 086) + green save button. */
.ga4-issue-bar {
display: flex;
gap: 6px;
margin: -4px -4px 8px -4px;
padding: 6px 8px;
background: #2c4868;
border-bottom: 1px solid #1a2c46;
}
.ga4-issue-bar button {
flex: 1 1 0;
background: #d4d7da;
color: #1a2033;
border: 1px solid #6a7387;
border-radius: 3px;
padding: 6px 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ga4-issue-bar button:hover { background: #e8eaec; }
.ga4-btn-green {
background: #4b8a4a;
color: #fff;
border: 1px solid #2a6a2a;
border-radius: 3px;
padding: 8px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.ga4-btn-green:hover { background: #57a056; }
/* G-7: GA4 payment side panel (recapture shot 086) — Outstanding /
Surcharge Amount / Customer / Remaining stacked at the right of the
modal. Rows live inside .ga4-payment-grid via .ga4-payment-side. */
.ga4-payment-side {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: #f0f3f8;
border: 1px solid #c7cdd6;
border-radius: 4px;
min-width: 200px;
}
.ga4-payment-side > div {
display: flex;
justify-content: space-between;
font-size: 13px;
}
.ga4-payment-side > div span {
color: #4a5568;
}
.ga4-payment-side > div strong {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: #1a2033;
}
/* G-4: GA4 Activity tab — 4 columns (When / Doc Info / User / Description).
Each When cell holds date + time inline; each Doc Info cell holds the
coloured chip + doc number inline. Recapture shots 052, 057, 075, 088. */
.ga4-doc-activity .ga4-act-date,
.ga4-doc-activity .ga4-act-time,
.ga4-doc-activity .ga4-act-docno {
display: inline-block;
margin-right: 6px;
font-variant-numeric: tabular-nums;
}
.ga4-doc-activity .ga4-act-time {
color: #4a5568;
}
.ga4-doc-activity .ga4-est-tchip {
margin-right: 6px;
font-size: 11px;
padding: 1px 5px;
}
/* H-1 popover container originally defined an `#efefef` light shell here.
The visual-backlog-fix-pass replaced .ga4-doc-popover with a dark
FileMaker gradient at the top of the file (see line ~3810), but the
old block then re-set background to #efefef + the old border / shadow
when CSS source order resolved it last. Codex caught this:
computed popoverBackground = rgb(239, 239, 239) (i.e. #efefef)
menu item text already white -> low contrast on light shell.
Removed the entire old container declaration so the dark shell at
line ~3810 is the only .ga4-doc-popover rule. The list-wrapper
variant below stays — it inherits the parent container's dark bg. */
.ga4-doc-popover-list {
display: flex;
flex-direction: column;
padding: 0;
}
.ga4-doc-popover-list .ga4-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 18px;
min-height: 38px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #f2f3f5;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.ga4-doc-popover-list .ga4-menu-item:last-child { border-bottom: 0; }
.ga4-doc-popover-list .ga4-menu-item:hover,
.ga4-doc-popover-list .ga4-menu-item:focus {
background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.04));
color: #ffffff;
outline: none;
}
/* H-1: title-bar colour variants for the shared doc modal.
warn = red (Missing Customer Details), info = grey, ok = green. */
.ga4-doc-modal-title.ga4-doc-modal-title--warn {
background: linear-gradient(#c0392b, #7a1f12);
}
.ga4-doc-modal-title.ga4-doc-modal-title--info {
background: linear-gradient(#5c5c5c, #232323);
}
.ga4-doc-modal-title.ga4-doc-modal-title--ok {
background: linear-gradient(#2f8d3f, #1a5b25);
}
/* H-1: soften the bright magenta X close to GA4's muted red. */
.ga4-doc-modal-title button {
background: #a02238;
}
.ga4-doc-modal-title button:hover {
background: #c1334b;
}
/* H-2B: drag-create preview rect inside a resource column. */
.ga4-cal-drag-preview {
position: absolute;
left: 4px;
right: 4px;
background: rgba(33, 102, 192, 0.32);
border: 1.5px dashed #1d4e7e;
color: #0a1d33;
font-size: 11px;
font-weight: 700;
text-align: center;
pointer-events: none;
z-index: 5;
}
.ga4-cal-appt--dragging,
.ga4-cal-appt--resizing {
opacity: 0.82;
box-shadow: 0 9px 22px rgba(0,0,0,0.34);
}
/* H-2B: floating drop-time label following the cursor on drag-move. */
.ga4-cal-drop-label {
position: fixed;
z-index: 60;
background: #1a2033;
color: #fff;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.ga4-cal-drop-label[hidden] { display: none; }
/* ====================================================================
H-2C: GA4 Appointment Details modal — linked / unlinked variants.
Spec/calendar.md §2: linked = purple stripe + 'Linked to: XX nnn' +
red Note banner; unlinked = green stripe.
==================================================================== */
/* Title-bar stripe colours keyed to data-variant on the modal root. */
.ga4-appt-modal[data-variant="unlinked"] .ga4-appt-modal-title {
background: linear-gradient(#2f8d3f, #1a5b25);
}
.ga4-appt-modal[data-variant="linked"] .ga4-appt-modal-title {
background: linear-gradient(#5b3d7e, #3e2960);
}
.ga4-appt-modal-title strong { flex: 0 0 auto; }
.ga4-appt-link-label {
flex: 1 1 auto;
margin-left: 14px;
font-weight: 600;
color: #fff5b0;
font-size: 13px;
}
.ga4-appt-modal[data-variant="unlinked"] .ga4-appt-link-label { display: none; }
/* Red Note banner — only shown on the linked variant. */
.ga4-appt-note {
background: #c0392b;
color: #fff;
padding: 7px 14px;
font-size: 12.5px;
line-height: 1.4;
border-bottom: 1px solid #7a1f12;
}
.ga4-appt-modal[data-variant="unlinked"] .ga4-appt-note { display: none; }
/* Variant-aware toolbar buttons. */
.ga4-appt-modal[data-variant="linked"] .ga4-appt-when-unlinked { display: none; }
.ga4-appt-modal[data-variant="unlinked"] .ga4-appt-when-linked { display: none; }
/* Body: two-column vehicle + customer block. */
.ga4-appt-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
padding: 12px;
background: #efefef;
}
.ga4-appt-vehicle,
.ga4-appt-customer {
display: flex;
flex-direction: column;
gap: 4px;
background: #f6f6f6;
border: 1px solid #c7cdd6;
padding: 10px;
}
.ga4-appt-row {
display: grid;
grid-template-columns: 100px minmax(0, 1fr) auto auto;
gap: 6px;
align-items: center;
font-size: 12.5px;
}
.ga4-appt-row.two {
grid-template-columns: 100px minmax(0, 1fr) 80px minmax(0, 1fr);
}
.ga4-appt-row.postcode {
grid-template-columns: 100px minmax(0, 1fr) 80px minmax(0, 1fr) 30px;
}
.ga4-appt-row.name3 {
grid-template-columns: 100px minmax(60px, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
}
.ga4-appt-row.email {
grid-template-columns: 100px 22px minmax(0, 1fr);
}
.ga4-appt-row label {
color: #1a2033;
font-weight: 600;
}
.ga4-appt-row input,
.ga4-appt-row select {
height: 24px;
border: 1px solid #b6bbc4;
background: #fff;
padding: 1px 6px;
font-size: 12.5px;
}
.ga4-appt-row input.full { grid-column: span 3; }
.ga4-appt-row input[readonly] { background: #ececec; color: #4a5568; }
.ga4-appt-extra {
margin-top: 2px;
padding: 7px 8px;
border: 1px dashed #c7cdd6;
border-radius: 7px;
background: #fff;
}
.ga4-appt-extra-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 5px;
color: #1a2033;
font-size: 12.5px;
font-weight: 700;
}
.ga4-appt-extra-head button,
.ga4-appt-extra-row button {
height: 24px;
border: 1px solid #6a7387;
background: linear-gradient(#fafafa, #d7d7d7);
color: #1a2033;
font-size: 12px;
cursor: pointer;
}
.ga4-appt-extra-head button {
padding: 0 8px;
}
.ga4-appt-extra-list {
display: grid;
gap: 5px;
}
.ga4-appt-extra-row {
display: grid;
grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr) 28px;
gap: 6px;
}
.ga4-appt-extra-row input {
min-width: 0;
height: 24px;
border: 1px solid #b6bbc4;
background: #fff;
padding: 1px 6px;
font-size: 12.5px;
}
.ga4-appt-extra-row button {
padding: 0;
color: #a51f35;
font-weight: 800;
}
.ga4-appt-search-btn,
.ga4-appt-new-btn,
.ga4-appt-postcode-btn,
.ga4-appt-vrm {
height: 24px;
border: 1px solid #6a7387;
background: linear-gradient(#fafafa, #d7d7d7);
color: #1a2033;
font-size: 12px;
padding: 0 8px;
cursor: pointer;
}
.ga4-appt-search-btn,
.ga4-appt-postcode-btn { font-size: 13px; line-height: 1; }
.ga4-appt-veh-actions {
display: flex;
gap: 4px;
padding-top: 6px;
border-top: 1px dashed #c7cdd6;
margin-top: 4px;
}
.ga4-appt-veh-actions button {
flex: 0 0 auto;
height: 24px;
padding: 0 8px;
background: linear-gradient(#fafafa, #d7d7d7);
border: 1px solid #6a7387;
font-size: 12px;
cursor: pointer;
}
/* From/To rows with date + hour + min segmented controls. */
.ga4-appt-when {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 56px 56px;
gap: 4px;
align-items: center;
}
.ga4-appt-when > span { color: #c0c4cc; font-size: 12px; }
.ga4-appt-when input,
.ga4-appt-when select {
height: 22px;
border: 1px solid #b6bbc4;
background: #fff;
padding: 1px 4px;
font-size: 12px;
}
/* ---- H-3 search popover ---- */
.ga4-search-popover {
/* I-3 (OVR005): widened from 360px -> 560px so the GA4-style
selector window can host a proper columnar row layout (primary
identifier + 2 secondary columns + tertiary line). The dropdown
no longer reads like a generic compact lookup. */
position: absolute;
z-index: 950;
width: 560px;
background: #fff;
border: 2px solid #1a2033;
border-radius: 4px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
font-family: 'Outfit', sans-serif;
font-size: 12px;
color: #1a2033;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ga4-search-popover[data-kind="customer"] .ga4-search-head { background: #fff8e0; }
.ga4-search-popover[data-kind="vehicle"] .ga4-search-head { background: #e9f1ff; }
.ga4-search-popover[data-kind="customer"] .ga4-search-head::before { content: 'Customers'; }
.ga4-search-popover[data-kind="vehicle"] .ga4-search-head::before { content: 'Vehicles'; }
.ga4-search-head::before {
font-weight: 700;
font-size: 11px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #5b3d7e;
align-self: center;
margin-right: 4px;
}
.ga4-search-popover[hidden] { display: none; }
.ga4-search-head {
display: flex;
gap: 4px;
padding: 6px;
background: #f0f2f5;
border-bottom: 1px solid #d3d7df;
}
.ga4-search-input {
flex: 1;
height: 24px;
border: 1px solid #b6bbc4;
border-radius: 3px;
padding: 1px 6px;
font-size: 12px;
background: #fff;
}
.ga4-search-input:focus {
outline: none;
border-color: #C0392B;
box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}
.ga4-search-close {
width: 24px; height: 24px;
border: 1px solid #b6bbc4;
background: #fff;
cursor: pointer;
font-weight: 700;
border-radius: 3px;
}
.ga4-search-close:hover { background: #ffe4e0; border-color: #C0392B; color: #C0392B; }
.ga4-search-results {
max-height: 280px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* I-3 (OVR005): tabular column header above the results list. */
.ga4-search-cols {
display: grid;
padding: 5px 10px;
background: #f0f2f5;
border-bottom: 1px solid #d3d7df;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #5b6470;
}
.ga4-search-cols--customer { grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 8px; }
.ga4-search-cols--vehicle { grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 8px; }
.ga4-search-row {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
padding: 6px 8px;
border: none;
border-bottom: 1px solid #eef0f3;
background: #fff;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.ga4-search-row--customer {
grid-template-columns: 80px minmax(0, 1.4fr) minmax(0, 1.2fr);
gap: 8px;
padding: 8px 10px;
font-size: 12px;
}
.ga4-search-row--vehicle {
grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1.3fr);
gap: 8px;
padding: 8px 10px;
font-size: 12px;
}
.ga4-search-row--customer .ga4-search-col1 strong,
.ga4-search-row--vehicle .ga4-search-col1 strong {
font-variant-numeric: tabular-nums;
letter-spacing: 0.3px;
}
.ga4-search-col1, .ga4-search-col2, .ga4-search-col3 {
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ga4-search-sub {
grid-column: 1 / -1;
font-size: 11px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 2px;
}
.ga4-search-row:hover,
.ga4-search-row:focus {
background: #ffeae6;
outline: none;
}
.ga4-search-row strong {
font-weight: 700;
font-size: 12px;
color: #1a2033;
}
.ga4-search-row-2 {
font-size: 11px;
color: #4a5568;
}
.ga4-search-row-3 {
font-size: 11px;
color: #8a94a6;
}
.ga4-search-empty {
padding: 16px 12px;
text-align: center;
color: #8a94a6;
font-style: italic;
font-size: 12px;
}
.ga4-search-foot {
padding: 4px 8px;
background: #f0f2f5;
border-top: 1px solid #d3d7df;
font-size: 10px;
color: #6b7280;
text-align: center;
}
/* ====================================================================
Visual backlog fix pass — native-style confirm shell.
Convert / generic 'are you sure?' confirms (capture 096) render as
a small system-window dialog, not the dark-title-bar full modal.
Lighter overlay, narrower box, light title strip, classic OK/Cancel
button styling. Applied via .ga4-doc-modal--native on the modal
root; showConfirm() toggles it on by default.
NOTE: placed AFTER the canonical `.ga4-doc-modal-title button`
rules above so the test that grep-pins the canonical block via
`re.search('\\.ga4-doc-modal-title button\\s*\\{[^}]+\\}')` keeps
finding the canonical block first.
==================================================================== */
.ga4-doc-modal--native { background: rgba(0, 0, 0, 0.15); }
.ga4-doc-modal--native .ga4-doc-modal-box {
width: min(420px, calc(100vw - 40px));
border: 1px solid #6b7280;
border-radius: 6px;
background: #f7f7f8;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.ga4-doc-modal--native .ga4-doc-modal-title {
background: linear-gradient(#ecedef, #d4d7dc);
color: #1a2033;
padding: 7px 12px;
border-bottom: 1px solid #b6bbc4;
}
.ga4-doc-modal--native .ga4-doc-modal-title strong {
color: #1a2033;
font-weight: 600;
}
.ga4-doc-modal--native .ga4-doc-modal-title button {
background: transparent;
color: #4a5568;
font-weight: 600;
}
.ga4-doc-modal--native .ga4-doc-modal-title button:hover {
background: rgba(0, 0, 0, 0.08);
}
.ga4-doc-modal--native .ga4-doc-modal-body {
background: #f7f7f8;
color: #1a2033;
font-size: 13px;
padding: 16px 18px 4px;
line-height: 1.5;
}
.ga4-doc-modal--native .ga4-doc-modal-actions {
background: #f0f2f5;
border-top: 1px solid #d6d9de;
padding: 10px 14px;
gap: 8px;
}
.ga4-doc-modal--native .ga4-doc-modal-actions button { min-width: 86px; }
.ga4-native-primary {
background: linear-gradient(#fbfbfc, #e3e6eb) !important;
border: 1px solid #6b7280 !important;
color: #1a2033 !important;
font-weight: 600;
padding: 5px 18px !important;
border-radius: 3px;
}
.ga4-native-primary:hover { background: linear-gradient(#ffffff, #ecf0f5) !important; }
.ga4-native-secondary {
background: linear-gradient(#fbfbfc, #e3e6eb) !important;
border: 1px solid #b6bbc4 !important;
color: #1a2033 !important;
padding: 5px 14px !important;
border-radius: 3px;
}
.ga4-native-secondary:hover { background: linear-gradient(#ffffff, #ecf0f5) !important; }
/* ====================================================================
Visual backlog fix pass — browser styling cleanup.
Strip web-default appearance on form controls (focus rings, system
select arrows, system date pickers) so the surface reads as a
FileMaker-style form, not a Chrome/Edge browser page. Scoped to
.ga4-doc-screen / .ga4-doc-modal-box / .ga4-cal-screen so it
never touches the login form or other surfaces that DO want the
browser default.
==================================================================== */
.ga4-doc-screen input,
.ga4-doc-screen select,
.ga4-doc-screen textarea,
.ga4-doc-modal-box input,
.ga4-doc-modal-box select,
.ga4-doc-modal-box textarea,
.ga4-cal-screen input,
.ga4-cal-screen select,
.ga4-cal-screen textarea {
font-family: 'Outfit', sans-serif;
font-size: inherit;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #ffffff;
background-image: none;
outline: none;
}
.ga4-doc-screen select,
.ga4-doc-modal-box select,
.ga4-cal-screen select,
.ga4-doc-screen select {
/* Drop the native dropdown caret + replace with a tight 8x6 SVG.
(Doc screen included 2026-06-10 — the staff/referral selects were
rendering caret-less and read as plain inputs.) */
padding-right: 22px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 8px 6px;
}
/* Referral select inside the yellow balance box — give it room. */
.ga4-doc-balance-lines select {
flex: 1 1 auto;
min-width: 0;
max-width: 60%;
min-height: 26px;
margin-left: 8px;
}
.ga4-doc-screen input:focus,
.ga4-doc-screen select:focus,
.ga4-doc-screen textarea:focus,
.ga4-doc-modal-box input:focus,
.ga4-doc-modal-box select:focus,
.ga4-doc-modal-box textarea:focus,
.ga4-cal-screen input:focus,
.ga4-cal-screen select:focus,
.ga4-cal-screen textarea:focus {
/* GA4-style focus — subtle border darken, no blue browser ring. */
border-color: #6b7280;
box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.20);
}
/* Strip browser focus rings on all buttons inside the doc/modal/calendar
shells so we never get the Chrome-blue outline that screams 'web'. */
.ga4-doc-screen button:focus,
.ga4-doc-modal-box button:focus,
.ga4-cal-screen button:focus,
.ga4-doc-popover button:focus,
.ga4-doc-popover-list button:focus {
outline: none;
box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.20);
}
/* ===== Autodiag Mint Tech reskin, pass 1: Estimates list + detail =====
Visual-only layer. Scoped by .autodiag-mint so existing GA4 clone routes,
field bindings, Tabulator setup, document actions and calendar logic stay
untouched until each section is explicitly rolled into the reskin. */
body:has(.autodiag-mint) {
font-family: "Outfit", "Segoe UI", Tahoma, Arial, sans-serif;
color: #16241d;
background: #eef4f1;
}
body:has(.autodiag-mint) .ga4-fit-stage,
body:has(.autodiag-mint) .ga4-fit-sizer,
body:has(.autodiag-mint) .ga4-fit-canvas,
body:has(.autodiag-mint) .ga4-content {
background: #eef4f1;
}
body:has(.autodiag-mint) .ga4-topbar {
height: 62px;
padding: 0 18px;
background: linear-gradient(180deg, #ffffff 0%, #f3f8f5 100%);
border-top: 0;
border-bottom: 1px solid #d5e2db;
box-shadow: 0 8px 22px rgba(15, 110, 86, 0.08);
color: #16241d;
}
body:has(.autodiag-mint) .ga4-nav {
min-width: 64px;
width: clamp(64px, 4.2vw, 76px);
flex: 0 1 clamp(64px, 4.2vw, 76px);
height: 58px;
color: #647a6f;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
font-family: "Outfit", "Segoe UI", sans-serif;
font-weight: 600;
}
body:has(.autodiag-mint) .ga4-nav:hover {
background: #f3f8f5;
color: var(--section-accent, #0f6e56);
}
body:has(.autodiag-mint) .ga4-nav-icon {
min-width: 28px;
height: 25px;
padding: 5px 7px 4px;
border-radius: 8px;
background: rgba(15, 110, 86, 0.10);
color: var(--section-accent, #0f6e56);
font-family: "JetBrains Mono", Consolas, monospace;
font-weight: 800;
box-shadow: inset 0 0 0 1px rgba(15, 110, 86, 0.13);
}
body:has(.autodiag-mint) .ga4-right {
color: #647a6f;
border-left: 1px solid #d5e2db;
}
body:has(.autodiag-mint) .ga4-user {
color: #647a6f;
}
body:has(.autodiag-mint) .ga4-user strong {
color: #16241d;
}
body:has(.autodiag-mint) .ga4-top-search input,
body:has(.autodiag-mint) .ga4-top-search button {
height: 34px;
border: 1px solid #d5e2db;
background: #ffffff;
color: #16241d;
border-radius: 8px;
font-family: "Outfit", "Segoe UI", sans-serif;
}
body:has(.autodiag-mint) .ga4-top-search {
flex: 0 1 270px;
max-width: 270px;
min-width: 170px;
margin-left: auto;
}
body:has(.autodiag-mint) .ga4-top-search input {
min-width: 0;
width: 100%;
padding: 0 12px;
}
body:has(.autodiag-mint) .ga4-top-search button {
margin-left: 2px;
padding: 0 12px;
background: var(--section-accent, #0f6e56);
border-color: var(--section-accent, #0f6e56);
color: #ffffff;
font-weight: 700;
}
.autodiag-mint {
--mint-bg: #eef4f1;
--mint-surface: #ffffff;
--mint-surface-2: #f3f8f5;
--mint-border: #d5e2db;
--mint-text: #16241d;
--mint-muted: #647a6f;
--status-danger: #a32d2d;
--status-success: #22c55e;
--status-pending: #f59e0b;
--status-info: #185fa5;
color: var(--mint-text);
font-family: "Outfit", "Segoe UI", Tahoma, Arial, sans-serif;
}
.autodiag-mint button,
.autodiag-mint input,
.autodiag-mint select,
.autodiag-mint textarea {
font-family: "Outfit", "Segoe UI", Tahoma, Arial, sans-serif;
letter-spacing: 0;
}
/* Estimates list */
.autodiag-mint-list {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
padding: 14px;
gap: 10px;
background:
linear-gradient(135deg, rgba(15, 110, 86, 0.08), rgba(255, 255, 255, 0) 34%),
var(--mint-bg);
}
.autodiag-mint-list .ga4-est-ribbon {
min-height: 48px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
border-radius: 10px 10px 0 0;
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
font-size: 17px;
font-weight: 800;
box-shadow: 0 14px 26px rgba(15, 110, 86, 0.12);
}
.autodiag-mint-list .ga4-est-ribbon-count {
color: rgba(255, 255, 255, 0.82);
font-weight: 600;
}
.autodiag-mint-list .ga4-est-actionbar,
.autodiag-mint-list .ga4-est-filterbar {
margin: 0;
padding: 10px 14px;
border: 1px solid var(--mint-border);
background: var(--mint-surface);
box-shadow: 0 8px 18px rgba(22, 36, 29, 0.04);
}
.autodiag-mint-list .ga4-est-actionbar {
border-top: 0;
border-radius: 0 0 10px 10px;
}
.autodiag-mint-list .ga4-est-filterbar {
border-radius: 10px;
gap: 8px;
color: var(--mint-muted);
}
.autodiag-mint-list .ga4-est-filterbar label {
color: var(--mint-muted);
font-weight: 600;
}
.autodiag-mint-list .ga4-est-btn,
.autodiag-mint-list .ga4-est-x,
.autodiag-mint-list .ga4-est-select,
.autodiag-mint-list .ga4-est-date {
min-height: 34px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: var(--mint-surface);
color: var(--mint-text);
box-shadow: none;
}
.autodiag-mint-list .ga4-est-btn {
padding: 0 14px;
font-weight: 700;
}
.autodiag-mint-list .ga4-est-btn:hover:not([disabled]),
.autodiag-mint-list .ga4-est-x:hover:not([disabled]) {
background: var(--mint-surface-2);
border-color: color-mix(in srgb, var(--section-accent) 45%, var(--mint-border));
}
.autodiag-mint-list .ga4-est-btn-primary {
background: var(--section-accent);
border-color: var(--section-accent);
color: #ffffff;
}
.autodiag-mint-list .ga4-est-btn-primary:hover:not([disabled]) {
background: color-mix(in srgb, var(--section-accent) 82%, #16241d);
}
.autodiag-mint-list .ga4-est-x {
color: var(--status-danger);
font-weight: 800;
}
.autodiag-mint-list .ga4-est-grid {
flex: 1 1 auto;
min-height: 0;
border: 1px solid var(--mint-border);
border-radius: 10px;
overflow: hidden;
background: var(--mint-surface);
box-shadow: 0 16px 30px rgba(22, 36, 29, 0.08);
}
.autodiag-mint-list .tabulator {
border: 0;
background: var(--mint-surface);
font-family: "Outfit", "Segoe UI", sans-serif;
}
.autodiag-mint-list .tabulator .tabulator-header {
font-size: 14px;
border-bottom: 1px solid var(--mint-border);
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-list .tabulator .tabulator-col,
.autodiag-mint-list .tabulator .tabulator-cell {
border-color: var(--mint-border);
padding-top: 8px;
padding-bottom: 8px;
}
.autodiag-mint-list .tabulator .tabulator-row {
min-height: 42px;
background: var(--mint-surface);
color: var(--mint-text);
}
.autodiag-mint-list .tabulator .tabulator-row:nth-child(even),
.autodiag-mint-list .tabulator .tabulator-row.tabulator-row-even {
background: #fbfdfc;
}
.autodiag-mint-list .tabulator .tabulator-row:hover {
background: color-mix(in srgb, var(--section-accent) 10%, #ffffff);
cursor: pointer;
}
.autodiag-mint-list .ga4-est-tchip {
min-width: 30px;
padding: 2px 8px;
border-radius: 7px;
background: var(--section-accent);
font-family: "JetBrains Mono", Consolas, monospace;
font-weight: 800;
}
/* Registration plates: UK-plate yellow with clean geometric lettering.
Outfit 800 is actually loaded (JetBrains Mono 800 was not, so the
old monospace rendered faux-bold and scrappy). */
.autodiag-mint-list .ga4-est-reg,
.autodiag-mint-doc .reg,
.autodiag-mint-doc [data-doc-field="veh_reg"] {
display: inline-block;
min-height: 26px;
border: 1px solid #d9ab07;
border-radius: 6px;
background: linear-gradient(180deg, #ffd75e, #f5c518) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.07);
color: #111111 !important;
font-family: "Outfit", "Segoe UI", sans-serif !important;
font-size: 14px;
font-weight: 800;
letter-spacing: 1.4px;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
text-align: center;
}
.autodiag-mint-list .ga4-status-pill {
border-radius: 999px;
font-family: "Outfit", "Segoe UI", sans-serif;
font-weight: 800;
}
/* Estimate detail. Vertical metrics are deliberately tight so a full
ES/JS/SI document near-fits a 1080p window like desktop GA4; when the
viewport is shorter, .ga4-doc-main and .ga4-doc-side scroll instead
of crushing the History pane at the bottom. */
.autodiag-mint-doc {
padding: 10px 12px;
gap: 10px;
background:
linear-gradient(135deg, rgba(15, 110, 86, 0.08), rgba(255, 255, 255, 0) 32%),
var(--mint-bg);
}
/* Right rail (Additional Info / Extras / Totals) — wider than the
legacy clamp so dates and labels render without truncation now the
canvas lays out at 1/zoom width. */
.autodiag-mint-doc.ga4-doc-screen {
grid-template-columns: minmax(0, 1fr) clamp(285px, 17vw, 335px);
}
.autodiag-mint-doc .ga4-doc-main {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.autodiag-mint-doc .ga4-doc-side {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.autodiag-mint-doc .ga4-doc-side > section {
flex: 0 0 auto;
}
.autodiag-mint-doc .ga4-doc-main,
.autodiag-mint-doc .ga4-doc-side > section,
.autodiag-mint-doc .ga4-doc-vehicle,
.autodiag-mint-doc .ga4-doc-customer,
.autodiag-mint-doc .ga4-doc-reminders,
.autodiag-mint-doc .ga4-doc-prev,
.autodiag-mint-doc .ga4-doc-tabpane {
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface);
box-shadow: 0 12px 24px rgba(22, 36, 29, 0.06);
}
.autodiag-mint-doc .ga4-doc-titlebar {
min-height: 40px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
border-radius: 10px 10px 0 0;
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
box-shadow: 0 14px 26px rgba(15, 110, 86, 0.12);
}
.autodiag-mint-doc .ga4-doc-titlebar strong {
font-size: 16px;
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-star {
color: #f5c518;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.autodiag-mint-doc .ga4-doc-warn {
color: #fef3c7;
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-notice,
.autodiag-mint-doc .ga4-doc-close {
height: 32px;
border: 1px solid rgba(255,255,255,0.24);
border-radius: 8px;
background: rgba(255,255,255,0.13);
color: #ffffff;
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-close {
background: var(--status-danger);
border-color: var(--status-danger);
}
.autodiag-mint-doc .ga4-doc-commandbar {
min-height: 42px;
display: flex;
align-items: stretch;
flex: 0 0 auto;
padding: 5px 6px;
gap: 6px;
border: 1px solid var(--mint-border);
border-top: 0;
border-radius: 0 0 10px 10px;
background: var(--mint-surface);
}
.autodiag-mint-doc .ga4-doc-command-spacer {
flex: 1 1 auto;
min-width: 6px;
}
/* GA4 'Delete ▼' — right-aligned, danger-tinted (live truth 2026-06-10). */
.autodiag-mint-doc .ga4-doc-commandbar .ga4-doc-delete {
border-color: color-mix(in srgb, var(--status-danger) 45%, var(--mint-border));
background: color-mix(in srgb, var(--status-danger) 6%, #ffffff);
color: var(--status-danger);
}
.autodiag-mint-doc .ga4-doc-commandbar .ga4-doc-delete:hover {
border-color: var(--status-danger);
background: color-mix(in srgb, var(--status-danger) 12%, #ffffff);
}
.autodiag-mint-doc .ga4-doc-commandbar button,
.autodiag-mint-doc .ga4-doc-buttonrow button,
.autodiag-mint-doc .ga4-icon-btn,
.autodiag-mint-doc .ga4-doc-subtabs button {
min-height: 30px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
box-shadow: none;
}
.autodiag-mint-doc .ga4-doc-commandbar button:hover,
.autodiag-mint-doc .ga4-doc-buttonrow button:hover:not([disabled]),
.autodiag-mint-doc .ga4-icon-btn:hover:not([disabled]) {
border-color: color-mix(in srgb, var(--section-accent) 45%, var(--mint-border));
background: var(--mint-surface-2);
}
.autodiag-mint-doc .ga4-doc-commandbar button[data-doc-action="save"],
.autodiag-mint-doc .ga4-doc-commandbar button[data-doc-action="print"],
.autodiag-mint-doc .ga4-doc-commandbar button[data-doc-action="email"] {
background: var(--section-accent);
border-color: var(--section-accent);
color: #ffffff;
}
.autodiag-mint-doc .ga4-doc-fields {
gap: 10px;
padding: 8px 0;
background: transparent;
}
.autodiag-mint-doc .ga4-doc-vehicle,
.autodiag-mint-doc .ga4-doc-customer {
padding: 10px 12px;
}
.autodiag-mint-doc .ga4-doc-row {
margin-bottom: 4px;
gap: 6px;
}
.autodiag-mint-doc .ga4-doc-row label {
color: var(--mint-muted);
font-weight: 700;
}
.autodiag-mint-doc .ga4-doc-row input,
.autodiag-mint-doc .ga4-doc-row select,
.autodiag-mint-doc .ga4-doc-tabpane textarea,
.autodiag-mint-doc .ga4-doc-side input,
.autodiag-mint-doc .ga4-doc-side select {
min-height: 27px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
box-shadow: inset 0 1px 0 rgba(22,36,29,0.03);
}
.autodiag-mint-doc .ga4-doc-row input[readonly],
.autodiag-mint-doc .ga4-doc-side input[readonly] {
background: var(--mint-surface-2);
color: var(--mint-text);
}
.autodiag-mint-doc .ga4-red-x {
min-height: 27px;
border: 1px solid color-mix(in srgb, var(--status-danger) 40%, var(--mint-border));
border-radius: 7px;
background: color-mix(in srgb, var(--status-danger) 10%, #ffffff);
color: var(--status-danger);
font-weight: 900;
}
.autodiag-mint-doc .ga4-doc-buttonrow {
border-top: 1px solid var(--mint-border);
}
.autodiag-mint-doc .ga4-doc-tabs {
gap: 4px;
padding: 0 0 0 4px;
border-bottom: 2px solid var(--section-accent);
background: transparent;
}
.autodiag-mint-doc .ga4-doc-tabs button {
min-height: 34px;
border: 1px solid var(--mint-border);
border-bottom: 0;
border-radius: 9px 9px 0 0;
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-tabs button.active {
background: #ffffff;
color: var(--section-accent);
border-color: var(--section-accent);
box-shadow: inset 0 -3px 0 #ffffff;
}
.autodiag-mint-doc .ga4-doc-tabpane {
padding: 10px;
border-top: 0;
border-radius: 0 0 10px 10px;
}
/* The active pane keeps a workable floor so the History grid never gets
crushed against the bottom edge; when the column runs out of room the
whole .ga4-doc-main scrolls instead. */
.autodiag-mint-doc .ga4-doc-tabpane.active {
flex: 1 0 auto;
min-height: 290px;
}
.autodiag-mint-doc .ga4-doc-tabpane textarea {
min-height: 240px;
}
.autodiag-mint-doc .ga4-doc-rem-head,
.autodiag-mint-doc .ga4-doc-hist-head,
.autodiag-mint-doc .ga4-doc-side h3 {
background: var(--mint-surface-2);
color: var(--mint-text);
border-bottom: 1px solid var(--mint-border);
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-subtabs {
gap: 4px;
padding: 6px;
background: var(--mint-surface-2);
border-bottom: 1px solid var(--mint-border);
}
.autodiag-mint-doc .ga4-doc-subtabs button.active {
background: var(--section-accent);
border-color: var(--section-accent);
color: #ffffff;
}
.autodiag-mint-doc .ga4-doc-table,
.autodiag-mint-doc .ga4-doc-reminders table {
border-collapse: separate;
border-spacing: 0;
color: var(--mint-text);
}
.autodiag-mint-doc .ga4-doc-table th,
.autodiag-mint-doc .ga4-doc-reminders th {
background: var(--mint-surface-2);
border-bottom: 1px solid var(--mint-border);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-table td,
.autodiag-mint-doc .ga4-doc-reminders td {
border-bottom: 1px solid var(--mint-border);
background: #ffffff;
}
.autodiag-mint-doc .ga4-doc-table tr:nth-child(even) td {
background: #fbfdfc;
}
.autodiag-mint-doc .ga4-doc-table tr:hover td {
background: color-mix(in srgb, var(--section-accent) 9%, #ffffff);
}
.autodiag-mint-doc .num,
.autodiag-mint-doc .side-row input,
.autodiag-mint-list .tabulator-cell[tabulator-field="doc_no"] {
font-family: "JetBrains Mono", Consolas, monospace;
font-weight: 700;
}
.autodiag-mint-doc .ga4-doc-side {
gap: 8px;
}
.autodiag-mint-doc .ga4-doc-side h3 {
min-height: 28px;
font-size: 13px;
}
.autodiag-mint-doc .side-row {
padding: 2px 8px;
}
.autodiag-mint-doc .side-row label {
color: var(--mint-muted);
font-weight: 700;
}
.autodiag-mint-doc .side-row.balance input,
.autodiag-mint-doc .side-row.total input {
background: color-mix(in srgb, var(--section-accent) 12%, #ffffff);
color: var(--mint-text);
font-family: "JetBrains Mono", Consolas, monospace;
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-popover,
.autodiag-mint-doc .ga4-doc-popover-list {
border: 1px solid color-mix(in srgb, var(--section-accent) 40%, var(--mint-border));
border-radius: 10px;
background: #ffffff;
color: var(--mint-text);
box-shadow: 0 18px 36px rgba(22, 36, 29, 0.18);
}
/* ===== Autodiag Mint Tech reskin, pass 2: site-wide rollout ===== */
.autodiag-mint-list .ga4-cust-ribbon,
.autodiag-mint-list .ga4-veh-ribbon,
.autodiag-mint-list .ga4-est-ribbon {
min-height: 48px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
border-radius: 10px 10px 0 0;
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
font-size: 17px;
font-weight: 800;
box-shadow: 0 14px 26px rgba(22, 36, 29, 0.10);
}
.autodiag-mint-list .ga4-cust-ribbon-count,
.autodiag-mint-list .ga4-veh-ribbon-count,
.autodiag-mint-list .ga4-est-ribbon-count {
color: rgba(255, 255, 255, 0.82);
font-weight: 600;
}
.autodiag-mint-list .ga4-cust-actionbar,
.autodiag-mint-list .ga4-veh-actionbar,
.autodiag-mint-list .ga4-veh-searchrow,
.autodiag-mint-list .ga4-chipbar,
.autodiag-mint-reminders .ga4-est-actionbar {
margin: 0;
padding: 10px 14px;
border: 1px solid var(--mint-border);
background: var(--mint-surface);
box-shadow: 0 8px 18px rgba(22, 36, 29, 0.04);
}
.autodiag-mint-list .ga4-cust-actionbar,
.autodiag-mint-list .ga4-veh-actionbar {
border-top: 0;
border-radius: 0 0 10px 10px;
}
.autodiag-mint-list .ga4-cust-alpha,
.autodiag-mint-list .ga4-veh-alpha,
.autodiag-mint-list .ga4-chipbar {
border-radius: 10px;
border: 1px solid var(--mint-border);
background: var(--mint-surface);
}
.autodiag-mint-list .ga4-cust-alpha button,
.autodiag-mint-list .ga4-veh-alpha button,
.autodiag-mint-list .ga4-chipbar button,
.autodiag-mint-list .ga4-cust-btn,
.autodiag-mint-list .ga4-veh-btn,
.autodiag-mint-list .ga4-veh-searchrow button {
min-height: 34px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
box-shadow: none;
}
.autodiag-mint-list .ga4-cust-alpha button.active,
.autodiag-mint-list .ga4-veh-alpha button.active,
.autodiag-mint-list .ga4-chipbar button.active,
.autodiag-mint-list .ga4-cust-btn:not(:disabled):hover,
.autodiag-mint-list .ga4-veh-btn:not(:disabled):hover,
.autodiag-mint-list .ga4-veh-searchrow button:hover {
border-color: var(--section-accent);
background: color-mix(in srgb, var(--section-accent) 10%, #ffffff);
color: var(--section-accent);
}
.autodiag-mint-list .ga4-cust-alpha button.active,
.autodiag-mint-list .ga4-veh-alpha button.active,
.autodiag-mint-list .ga4-chipbar button.active {
background: var(--section-accent);
color: #ffffff;
}
.autodiag-mint-list .ga4-veh-searchrow input[type=text] {
min-height: 34px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
padding: 0 12px;
}
.autodiag-mint-list .ga4-cust-grid,
.autodiag-mint-list .ga4-veh-grid,
.autodiag-mint-reminders .ga4-est-grid {
flex: 1 1 auto;
min-height: 0;
border: 1px solid var(--mint-border);
border-radius: 10px;
overflow: hidden;
background: var(--mint-surface);
box-shadow: 0 16px 30px rgba(22, 36, 29, 0.08);
}
.autodiag-mint-list .ga4-cust-grid .tabulator,
.autodiag-mint-list .ga4-veh-grid .tabulator,
.autodiag-mint-reminders .ga4-est-grid .tabulator {
border: 0;
background: #ffffff;
font-family: "Outfit", "Segoe UI", sans-serif;
}
.autodiag-mint-list .ga4-cust-grid .tabulator-header,
.autodiag-mint-list .ga4-veh-grid .tabulator-header,
.autodiag-mint-reminders .ga4-est-grid .tabulator-header {
border-bottom: 1px solid var(--mint-border);
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-list .ga4-cust-grid .tabulator-row,
.autodiag-mint-list .ga4-veh-grid .tabulator-row,
.autodiag-mint-reminders .ga4-est-grid .tabulator-row {
min-height: 34px;
background: #ffffff;
color: var(--mint-text);
}
.autodiag-mint-list .ga4-cust-grid .tabulator-row:nth-child(even),
.autodiag-mint-list .ga4-veh-grid .tabulator-row:nth-child(even),
.autodiag-mint-reminders .ga4-est-grid .tabulator-row:nth-child(even) {
background: #fbfdfc;
}
.autodiag-mint-list .ga4-cust-grid .tabulator-row:hover,
.autodiag-mint-list .ga4-veh-grid .tabulator-row:hover,
.autodiag-mint-reminders .ga4-est-grid .tabulator-row:hover {
background: color-mix(in srgb, var(--section-accent) 10%, #ffffff);
}
.autodiag-mint .ga4-est-reg,
.autodiag-mint .ga4-veh-reg,
.autodiag-mint .ga4-veh-input-reg,
.autodiag-mint .ga4-cust-doc-table .col-reg,
.autodiag-mint .ga4-veh-doc-table .col-docno {
border-radius: 6px;
background: linear-gradient(180deg, #ffd75e, #f5c518) !important;
color: #111111 !important;
font-family: "Outfit", "Segoe UI", sans-serif !important;
font-weight: 800;
letter-spacing: 1.2px;
font-variant-numeric: tabular-nums;
}
/* Customer / vehicle record pages */
.autodiag-mint-record {
min-height: 100%;
padding: 14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 9%, transparent), rgba(255,255,255,0) 34%),
var(--mint-bg);
}
.autodiag-mint-record .ga4-cust-rec-ribbon,
.autodiag-mint-record .ga4-veh-rec-ribbon {
min-height: 48px;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
border-radius: 10px 10px 0 0;
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
box-shadow: 0 14px 26px rgba(22, 36, 29, 0.10);
}
.autodiag-mint-record .ga4-cust-fav,
.autodiag-mint-record .ga4-veh-fav {
color: #f5c518;
}
.autodiag-mint-record .ga4-cust-notice,
.autodiag-mint-record .ga4-veh-notice,
.autodiag-mint-record .ga4-veh-close {
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.24);
background: rgba(255,255,255,0.13);
color: #ffffff;
font-weight: 800;
}
.autodiag-mint-record .ga4-veh-close {
background: var(--status-danger);
border-color: var(--status-danger);
}
.autodiag-mint-record .ga4-cust-rec-actionbar,
.autodiag-mint-record .ga4-veh-rec-actionbar {
border: 1px solid var(--mint-border);
border-top: 0;
border-radius: 0 0 10px 10px;
background: var(--mint-surface);
box-shadow: 0 8px 18px rgba(22, 36, 29, 0.04);
}
.autodiag-mint-record .ga4-cust-btn,
.autodiag-mint-record .ga4-veh-btn,
.autodiag-mint-record .ga4-veh-stock-row button,
.autodiag-mint-record .ga4-veh-stock-row a,
.autodiag-mint-record .ga4-cust-icon-btn,
.autodiag-mint-record .ga4-veh-inline-btn {
min-height: 32px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
box-shadow: none;
}
.autodiag-mint-record .ga4-cust-icons button {
width: 42px;
min-width: 42px;
height: 36px;
min-height: 36px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-size: 20px;
font-weight: 700;
box-shadow: none;
}
.autodiag-mint-record .ga4-cust-card,
.autodiag-mint-record .ga4-veh-card,
.autodiag-mint-record .ga4-cust-tabpane,
.autodiag-mint-record .ga4-veh-tabpane,
.autodiag-mint-record .ga4-veh-owner-panel {
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface);
box-shadow: 0 12px 24px rgba(22, 36, 29, 0.06);
}
.autodiag-mint-record .ga4-cust-row label,
.autodiag-mint-record .ga4-veh-row label,
.autodiag-mint-record .ga4-veh-owner-fields label {
color: var(--mint-muted);
font-weight: 700;
}
.autodiag-mint-record .ga4-cust-row input[type=text],
.autodiag-mint-record .ga4-veh-row input[type=text],
.autodiag-mint-record .ga4-veh-owner-fields input {
min-height: 31px;
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
}
.autodiag-mint-record .ga4-cust-tabs,
.autodiag-mint-record .ga4-veh-tabs,
.autodiag-mint-record .ga4-veh-mini-tabs {
gap: 4px;
border-bottom: 2px solid var(--section-accent);
background: transparent;
}
.autodiag-mint-record .ga4-cust-tab,
.autodiag-mint-record .ga4-veh-tab,
.autodiag-mint-record .ga4-veh-mini-tabs button {
border: 1px solid var(--mint-border);
border-bottom: 0;
border-radius: 9px 9px 0 0;
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-record .ga4-cust-tab.active,
.autodiag-mint-record .ga4-veh-tab.active,
.autodiag-mint-record .ga4-veh-mini-tabs button.active {
background: #ffffff;
color: var(--section-accent);
border-color: var(--section-accent);
}
.autodiag-mint-record table th {
background: var(--mint-surface-2);
color: var(--mint-muted);
border-bottom: 1px solid var(--mint-border);
}
.autodiag-mint-record table td {
border-bottom: 1px solid var(--mint-border);
}
.autodiag-mint-record tr:hover td,
.autodiag-mint-record .ga4-cust-doc-row:hover,
.autodiag-mint-record .ga4-veh-doc-row:hover {
background: color-mix(in srgb, var(--section-accent) 9%, #ffffff);
}
/* Document lookup controls: remove the legacy visible '?' pseudo icon. */
.autodiag-mint-doc .ga4-icon-btn {
width: auto;
min-width: 58px;
text-indent: 0;
overflow: visible;
font-size: 12px;
}
.autodiag-mint-doc .ga4-icon-btn::after {
content: none;
}
.autodiag-mint-doc .ga4-doc-toolbar {
min-height: 47px;
padding: 6px;
gap: 6px;
border: 1px solid var(--mint-border);
border-top: 0;
border-radius: 0 0 10px 10px;
background: var(--mint-surface);
}
.autodiag-mint-doc .ga4-doc-toolbar button {
min-height: 34px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
}
/* Calendar */
.autodiag-mint-calendar {
padding: 14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 9%, transparent), rgba(255,255,255,0) 34%),
var(--mint-bg);
}
.autodiag-mint-calendar .ga4-cal-main,
.autodiag-mint-calendar .ga4-cal-side > section {
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface);
box-shadow: 0 12px 24px rgba(22, 36, 29, 0.06);
}
.autodiag-mint-calendar .ga4-cal-titlebar {
border-radius: 10px 10px 0 0;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
}
/* Toolbar + subbar: two clearly separated control strips. The toolbar
(search / view switch / primary actions) sits on white; the subbar
(bay filter / date nav) sits on the tinted surface so the two rows
stop blurring into one another. Segmented pill groups carry their
own container so related controls read as a unit. */
.autodiag-mint-calendar .ga4-cal-toolbar,
.autodiag-mint-calendar .ga4-cal-subbar {
display: flex;
align-items: center;
gap: 10px;
grid-template-columns: unset;
grid-auto-columns: unset;
border-bottom: 1px solid var(--mint-border);
background: var(--mint-surface);
}
.autodiag-mint-calendar .ga4-cal-toolbar {
padding: 9px 12px;
}
.autodiag-mint-calendar .ga4-cal-subbar {
padding: 7px 12px;
background: var(--mint-surface-2);
}
.autodiag-mint-calendar .ga4-cal-flex-spacer {
flex: 1 1 auto;
min-width: 6px;
}
.autodiag-mint-calendar .ga4-cal-group {
display: flex;
align-items: stretch;
gap: 6px;
}
.autodiag-mint-calendar .ga4-cal-toolbar button,
.autodiag-mint-calendar .ga4-cal-subbar button,
.autodiag-mint-calendar .ga4-cal-subbar a,
.autodiag-mint-calendar .ga4-cal-subbar select,
.autodiag-mint-calendar .ga4-cal-toolbar input {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 13px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-size: 13px;
font-weight: 700;
}
.autodiag-mint-calendar .ga4-cal-toolbar input {
width: 190px;
margin: 0;
font-weight: 500;
}
.autodiag-mint-calendar .ga4-cal-group--bay select {
min-width: 110px;
}
/* Segmented pill groups: view switch (List/Day/Week/Month) and the
date nav (Yesterday/Today/Tomorrow) share one bordered container. */
.autodiag-mint-calendar .ga4-cal-seg {
display: flex;
align-items: stretch;
gap: 2px;
padding: 3px;
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface-2);
}
.autodiag-mint-calendar .ga4-cal-subbar .ga4-cal-seg {
background: #ffffff;
}
.autodiag-mint-calendar .ga4-cal-seg button,
.autodiag-mint-calendar .ga4-cal-seg a {
height: 28px;
padding: 0 14px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--mint-muted);
font-weight: 700;
cursor: pointer;
}
.autodiag-mint-calendar .ga4-cal-seg button:hover,
.autodiag-mint-calendar .ga4-cal-seg a:hover {
background: color-mix(in srgb, var(--section-accent) 10%, #ffffff);
color: var(--mint-text);
}
.autodiag-mint-calendar .ga4-cal-seg .ga4-cal-today-link {
background: color-mix(in srgb, var(--section-accent) 10%, #ffffff);
color: var(--section-accent);
font-weight: 800;
}
.autodiag-mint-calendar .ga4-cal-seg button.active,
.autodiag-mint-calendar .ga4-cal-seg a.active {
background: var(--section-accent);
color: #ffffff;
box-shadow: 0 2px 7px color-mix(in srgb, var(--section-accent) 35%, transparent);
}
.autodiag-mint-calendar .ga4-cal-toolbar .ga4-cal-btn-primary {
border-color: var(--section-accent);
background: var(--section-accent);
color: #ffffff;
box-shadow: 0 4px 12px color-mix(in srgb, var(--section-accent) 30%, transparent);
}
.autodiag-mint-calendar .ga4-cal-toolbar .ga4-cal-btn-primary:hover {
filter: brightness(1.08);
}
.autodiag-mint-calendar .ga4-cal-subbar-count {
padding-right: 2px;
color: var(--mint-muted);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.autodiag-mint-calendar .ga4-cal-months a.active,
.autodiag-mint-calendar .ga4-cal-month-grid a.selected {
background: var(--section-accent);
border-color: var(--section-accent);
color: #ffffff;
}
.autodiag-mint-calendar .ga4-cal-grid {
border-color: var(--mint-border);
background: #ffffff;
}
.autodiag-mint-calendar .ga4-cal-resource-head,
.autodiag-mint-calendar .ga4-cal-corner {
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-calendar .ga4-cal-times {
background: var(--mint-surface-2);
color: var(--mint-muted);
}
.autodiag-mint-calendar .ga4-cal-year,
.autodiag-mint-calendar .ga4-cal-months,
.autodiag-mint-calendar .ga4-cal-month-grid {
background: var(--mint-surface);
color: var(--mint-text);
}
/* ----- Workshop Assistant (AI preview, right rail) ----- */
.ga4-cal-assistant {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 250px;
overflow: hidden;
}
.ga4-assist-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--mint-border);
border-radius: 10px 10px 0 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 13%, #ffffff), #ffffff 70%);
}
.ga4-assist-avatar {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 65%, #16241d));
color: #ffffff;
box-shadow: 0 6px 14px color-mix(in srgb, var(--section-accent) 30%, transparent);
}
.ga4-assist-avatar svg { width: 19px; height: 19px; }
.ga4-assist-headtext {
display: flex;
flex-direction: column;
line-height: 1.25;
min-width: 0;
}
.ga4-assist-headtext strong {
font-size: 14px;
font-weight: 800;
color: var(--mint-text);
}
.ga4-assist-headtext span {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--mint-muted);
}
.ga4-assist-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
.ga4-assist-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: #fbfdfc;
}
.ga4-assist-msg {
max-width: 94%;
padding: 8px 11px;
border-radius: 12px;
font-size: 12.5px;
line-height: 1.45;
overflow-wrap: break-word;
}
.ga4-assist-msg--ai {
align-self: flex-start;
border: 1px solid var(--mint-border);
border-bottom-left-radius: 4px;
background: #ffffff;
color: var(--mint-text);
box-shadow: 0 4px 10px rgba(22, 36, 29, 0.05);
}
.ga4-assist-msg--user {
align-self: flex-end;
border-bottom-right-radius: 4px;
background: var(--section-accent);
color: #ffffff;
font-weight: 600;
}
.ga4-assist-msg ul {
margin: 6px 0 0;
padding-left: 16px;
}
.ga4-assist-msg li { margin: 3px 0; }
.ga4-assist-msg em {
display: block;
margin-top: 5px;
color: var(--mint-muted);
font-size: 11.5px;
}
.ga4-assist-reg {
padding: 0 5px;
border-radius: 4px;
background: #f5c518;
color: #000000;
font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ga4-assist-typing {
display: inline-flex;
gap: 4px;
padding: 3px 0 1px;
}
.ga4-assist-typing i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint-muted);
animation: ga4AssistBlink 1s infinite;
}
.ga4-assist-typing i:nth-child(2) { animation-delay: 0.16s; }
.ga4-assist-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ga4AssistBlink {
0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-2px); }
}
.ga4-assist-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 12px;
border-top: 1px solid var(--mint-border);
background: #ffffff;
}
.ga4-assist-chips button {
height: 26px;
padding: 0 11px;
border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
border-radius: 999px;
background: color-mix(in srgb, var(--section-accent) 7%, #ffffff);
color: var(--section-accent);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}
.ga4-assist-chips button:hover {
background: var(--section-accent);
color: #ffffff;
}
.ga4-assist-inputrow {
display: flex;
gap: 7px;
padding: 9px 12px 11px;
border-radius: 0 0 10px 10px;
background: #ffffff;
}
.ga4-assist-inputrow input {
flex: 1 1 auto;
min-width: 0;
height: 34px;
padding: 0 11px;
border: 1px solid var(--mint-border);
border-radius: 9px;
background: #fbfdfc;
font-size: 12.5px;
}
.ga4-assist-inputrow button {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 38px;
height: 34px;
border: 0;
border-radius: 9px;
background: var(--section-accent);
color: #ffffff;
cursor: pointer;
box-shadow: 0 4px 10px color-mix(in srgb, var(--section-accent) 28%, transparent);
}
.ga4-assist-inputrow button svg { width: 16px; height: 16px; }
.ga4-assist-inputrow button:hover { filter: brightness(1.08); }
.autodiag-mint-calendar .ga4-cal-grid--legacy {
display: none !important;
}
.autodiag-mint-calendar .ga4-modern-cal-wrap {
flex: 1 1 auto;
min-height: 430px;
height: auto;
border: 1px solid var(--mint-border);
border-top: 0;
border-radius: 0 0 10px 10px;
overflow: hidden;
background: #ffffff;
}
.autodiag-mint-calendar .ga4-modern-calendar,
.autodiag-mint-calendar .ga4-modern-calendar .ec {
width: 100%;
height: 100%;
font-family: Outfit, "Segoe UI", sans-serif;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec {
--ec-border-color: #d5e2db;
--ec-today-bg-color: rgba(15, 110, 86, 0.08);
--ec-event-bg-color: #dbeafe;
--ec-event-border-color: #b7c9dd;
--ec-event-text-color: #16241d;
border: 0;
background: #ffffff;
color: var(--mint-text);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header,
.autodiag-mint-calendar .ga4-modern-calendar .ec-resource {
background: var(--mint-surface-2);
color: var(--mint-muted);
font-weight: 800;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time,
.autodiag-mint-calendar .ga4-modern-calendar .ec-line {
color: var(--mint-muted);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-content {
cursor: crosshair;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-bg-event,
.autodiag-mint-calendar .ga4-modern-calendar .ec-highlight {
background: rgba(29, 158, 117, 0.16);
outline: 2px solid rgba(29, 158, 117, 0.35);
outline-offset: -2px;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event {
border: 1px solid rgba(22, 36, 29, 0.14);
border-radius: 8px;
box-shadow: 0 10px 20px rgba(22, 36, 29, 0.13);
overflow: hidden;
transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(22, 36, 29, 0.18);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event-body {
padding: 3px 6px;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event-title {
white-space: normal;
}
.autodiag-mint-calendar .ga4-modern-event-time {
display: block;
margin-bottom: 1px;
overflow: hidden;
font-size: 10px;
font-weight: 900;
line-height: 1.05;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-event-line {
display: block;
overflow: hidden;
font-size: 9px;
font-weight: 700;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-event--cancelled,
.autodiag-mint-calendar .ga4-modern-event--cancellation {
--ec-event-bg-color: #a32d2d;
--ec-event-border-color: #7f1d1d;
--ec-event-text-color: #ffffff;
}
.autodiag-mint-calendar .ga4-modern-event--collection,
.autodiag-mint-calendar .ga4-modern-event--complete,
.autodiag-mint-calendar .ga4-modern-event--paid {
--ec-event-bg-color: #22c55e;
--ec-event-border-color: #15803d;
--ec-event-text-color: #ffffff;
}
.autodiag-mint-calendar .ga4-modern-event--waiting,
.autodiag-mint-calendar .ga4-modern-event--pending,
.autodiag-mint-calendar .ga4-modern-event--wait {
--ec-event-bg-color: #f59e0b;
--ec-event-border-color: #b45309;
--ec-event-text-color: #16241d;
}
.autodiag-mint-calendar .ga4-modern-event--general {
--ec-event-bg-color: #dbeafe;
--ec-event-border-color: #93c5fd;
--ec-event-text-color: #16241d;
}
/* Calendar visual system v2: same diary layout, materially upgraded finish. */
body:has(.autodiag-mint-calendar) {
--cal-green: #0F6E56;
--cal-green-dark: #084D3D;
--cal-green-soft: #E8F4EF;
--cal-ink: #17231F;
--cal-muted: #5E716A;
--cal-line: #CADBD3;
--cal-line-strong: #AFC8BD;
--cal-surface: #FFFFFF;
--cal-surface-2: #F4F8F6;
--cal-blue: #CFE0F7;
--cal-blue-border: #6E9ED2;
--cal-red: #FF1F2D;
--cal-red-border: #9F1239;
--cal-service: #B8EDC8;
--cal-service-border: #219653;
--cal-amber: #FFD84D;
--cal-amber-border: #B7791F;
}
body:has(.autodiag-mint-calendar) .ga4-topbar {
height: 68px;
padding: 0 18px 0 20px;
align-items: center;
gap: 3px;
background: linear-gradient(180deg, #FFFFFF 0%, #F5FAF7 100%);
border-bottom: 1px solid #BFD6CC;
box-shadow: 0 12px 28px rgba(15, 110, 86, 0.12);
}
body:has(.autodiag-mint-calendar) .ga4-nav {
position: relative;
height: 62px;
min-width: 68px;
width: clamp(68px, 4.25vw, 82px);
flex-basis: clamp(68px, 4.25vw, 82px);
padding: 7px 4px 6px;
border: 0;
border-radius: 10px;
color: #4F665E;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
}
body:has(.autodiag-mint-calendar) .ga4-nav:hover {
background: #ECF6F1;
color: var(--cal-green);
}
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"] {
background: #E4F2EC;
color: var(--cal-green-dark);
box-shadow: inset 0 0 0 1px rgba(15, 110, 86, 0.22);
}
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"]::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 3px;
height: 3px;
border-radius: 3px;
background: var(--cal-green);
}
body:has(.autodiag-mint-calendar) .ga4-nav-icon {
min-width: 31px;
height: 27px;
padding: 0 7px;
border-radius: 9px;
background: #E7F2EE;
color: var(--cal-green);
box-shadow: inset 0 0 0 1px rgba(15, 110, 86, 0.18), 0 1px 2px rgba(15, 60, 45, 0.08);
font-size: 10px;
}
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"] .ga4-nav-icon {
background: linear-gradient(180deg, #128465 0%, var(--cal-green) 100%);
color: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-right {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #D7E5DF;
}
body:has(.autodiag-mint-calendar) .ga4-top-search {
max-width: 315px;
}
body:has(.autodiag-mint-calendar) .ga4-top-search input,
body:has(.autodiag-mint-calendar) .ga4-top-search button {
height: 36px;
border-radius: 9px;
}
body:has(.autodiag-mint-calendar) .ga4-top-search input {
border-color: #C7DAD1;
background: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(17, 44, 34, 0.04);
}
body:has(.autodiag-mint-calendar) .ga4-top-search button {
min-width: 62px;
background: linear-gradient(180deg, #128465 0%, var(--cal-green) 100%);
border-color: var(--cal-green);
box-shadow: 0 4px 10px rgba(15, 110, 86, 0.22);
}
.autodiag-mint-calendar {
padding: 12px;
background:
linear-gradient(180deg, #F5FAF7 0%, #E7F1EC 100%),
var(--mint-bg);
}
.autodiag-mint-calendar .ga4-cal-screen {
gap: 13px;
}
.autodiag-mint-calendar .ga4-cal-main,
.autodiag-mint-calendar .ga4-cal-side > section {
border-color: var(--cal-line);
border-radius: 12px;
background: var(--cal-surface);
box-shadow: 0 16px 34px rgba(20, 60, 45, 0.14);
}
.autodiag-mint-calendar .ga4-cal-titlebar {
min-height: 42px;
padding: 0 14px;
border: 0;
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, #118464 0%, var(--cal-green) 62%, #0A5946 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -1px 0 rgba(0,0,0,0.16);
}
.autodiag-mint-calendar .ga4-cal-titlebar strong {
display: flex;
align-items: center;
min-height: 42px;
color: #FFFFFF;
font-size: 14px;
font-weight: 850;
letter-spacing: 0;
}
.autodiag-mint-calendar .ga4-cal-toolbar,
.autodiag-mint-calendar .ga4-cal-subbar {
border-bottom: 1px solid var(--cal-line);
background: linear-gradient(180deg, #FFFFFF 0%, #F7FBF9 100%);
}
.autodiag-mint-calendar .ga4-cal-toolbar {
padding: 9px 10px 8px;
gap: 8px;
}
.autodiag-mint-calendar .ga4-cal-subbar {
padding: 8px 10px;
gap: 8px;
background: #F2F8F5;
}
.autodiag-mint-calendar .ga4-cal-group {
gap: 6px;
}
.autodiag-mint-calendar .ga4-cal-toolbar button,
.autodiag-mint-calendar .ga4-cal-subbar button,
.autodiag-mint-calendar .ga4-cal-subbar a,
.autodiag-mint-calendar .ga4-cal-subbar select,
.autodiag-mint-calendar .ga4-cal-toolbar input,
.autodiag-mint-calendar .ga4-assist-chips button,
.autodiag-mint-calendar .ga4-assist-inputrow input,
.autodiag-mint-calendar .ga4-assist-inputrow button {
height: 34px;
border: 1px solid #BED4CA;
border-radius: 8px;
background: #FFFFFF;
color: var(--cal-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(17, 45, 34, 0.08);
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
}
.autodiag-mint-calendar .ga4-cal-toolbar input {
width: 205px;
padding: 0 12px;
color: #536A62;
font-weight: 650;
}
.autodiag-mint-calendar .ga4-cal-toolbar button:hover,
.autodiag-mint-calendar .ga4-cal-subbar button:hover,
.autodiag-mint-calendar .ga4-cal-subbar a:hover,
.autodiag-mint-calendar .ga4-assist-chips button:hover {
border-color: #7FB6A0;
background: #ECF6F1;
color: var(--cal-green-dark);
}
.autodiag-mint-calendar .ga4-cal-toolbar button:focus-visible,
.autodiag-mint-calendar .ga4-cal-subbar button:focus-visible,
.autodiag-mint-calendar .ga4-cal-subbar a:focus-visible,
.autodiag-mint-calendar .ga4-cal-months a:focus-visible,
.autodiag-mint-calendar .ga4-cal-month-grid a:focus-visible,
.autodiag-mint-calendar .ga4-assist-chips button:focus-visible,
.autodiag-mint-calendar .ga4-assist-inputrow input:focus-visible,
.autodiag-mint-calendar .ga4-assist-inputrow button:focus-visible {
outline: 2px solid #1A7F64;
outline-offset: 2px;
}
.autodiag-mint-calendar .ga4-cal-seg {
height: 34px;
padding: 3px;
border: 1px solid #BED4CA;
border-radius: 9px;
background: #E6F1EC;
box-shadow: inset 0 1px 2px rgba(12, 60, 45, 0.08);
}
.autodiag-mint-calendar .ga4-cal-seg button,
.autodiag-mint-calendar .ga4-cal-seg a {
height: 26px;
padding: 0 14px;
border: 0;
border-radius: 7px;
background: transparent;
color: #486159;
box-shadow: none;
font-size: 12px;
font-weight: 850;
}
.autodiag-mint-calendar .ga4-cal-seg button.active,
.autodiag-mint-calendar .ga4-cal-seg a.active,
.autodiag-mint-calendar .ga4-cal-seg .ga4-cal-today-link.active {
background: linear-gradient(180deg, #128465 0%, var(--cal-green) 100%);
color: #FFFFFF;
box-shadow: 0 3px 8px rgba(15, 110, 86, 0.28);
}
.autodiag-mint-calendar .ga4-cal-toolbar .ga4-cal-btn-primary {
min-width: 104px;
border-color: var(--cal-green-dark);
background: linear-gradient(180deg, #15906E 0%, var(--cal-green) 100%);
color: #FFFFFF;
box-shadow: 0 6px 14px rgba(15, 110, 86, 0.30);
}
.autodiag-mint-calendar .ga4-cal-toolbar .ga4-cal-btn-primary:hover,
.autodiag-mint-calendar .ga4-assist-inputrow button:hover {
filter: none;
background: linear-gradient(180deg, #18A079 0%, #0D7C5F 100%);
color: #FFFFFF;
}
.autodiag-mint-calendar .ga4-cal-subbar-count {
color: #455E55;
font-size: 12px;
font-weight: 850;
}
.autodiag-mint-calendar .ga4-modern-cal-wrap {
border-color: var(--cal-line);
border-radius: 0 0 12px 12px;
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-modern-calendar,
.autodiag-mint-calendar .ga4-modern-calendar .ec {
font-family: "Outfit", "Segoe UI", sans-serif;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec {
--ec-border-color: var(--cal-line);
--ec-today-bg-color: rgba(15, 110, 86, 0.065);
color: var(--cal-ink);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header,
.autodiag-mint-calendar .ga4-modern-calendar .ec-resource {
min-height: 26px;
background: linear-gradient(180deg, #FBFDFC 0%, #EAF3EF 100%);
color: #314D44;
border-color: var(--cal-line);
box-shadow: inset 0 -1px 0 var(--cal-line-strong);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time {
color: #3F5B52;
font-size: 11px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-line {
border-color: #D3E2DB;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-line {
border-color: #D8E6E0;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-lines {
background: repeating-linear-gradient(
to bottom,
rgba(15, 110, 86, 0.026) 0,
rgba(15, 110, 86, 0.026) 1px,
transparent 1px,
transparent 16px
);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event {
border: 1px solid rgba(22, 36, 29, 0.18);
border-left: 5px solid var(--ec-event-border-color, var(--cal-blue-border));
border-radius: 9px;
background-color: var(--ec-event-bg-color, var(--cal-blue));
box-shadow: 0 10px 20px rgba(20, 45, 35, 0.15);
overflow: hidden;
transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(20, 45, 35, 0.22);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event-body {
height: 100%;
padding: 0;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event-title {
height: 100%;
white-space: normal;
}
.autodiag-mint-calendar .ga4-modern-ticket {
display: flex;
flex-direction: column;
gap: 3px;
height: 100%;
min-height: 0;
padding: 6px 7px 5px 8px;
overflow: hidden;
color: var(--ec-event-text-color, #16241d);
}
.autodiag-mint-calendar .ga4-modern-ticket-top {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.autodiag-mint-calendar .ga4-modern-event-time {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: currentColor;
font-size: 11px;
font-weight: 950;
line-height: 1.05;
}
.autodiag-mint-calendar .ga4-modern-event-type {
flex: 0 1 auto;
max-width: 58%;
padding: 2px 5px;
border-radius: 5px;
background: rgba(255,255,255,0.54);
color: currentColor;
font-size: 8.5px;
font-weight: 950;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.autodiag-mint-calendar .ga4-modern-event-customer,
.autodiag-mint-calendar .ga4-modern-event-vehicle,
.autodiag-mint-calendar .ga4-modern-event-phone {
display: block;
overflow: hidden;
color: currentColor;
font-size: 9.5px;
font-weight: 760;
line-height: 1.12;
opacity: 0.94;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-event-customer {
font-weight: 900;
}
.autodiag-mint-calendar .ga4-modern-event-reg {
align-self: flex-start;
max-width: 100%;
padding: 1px 6px 2px;
border: 1px solid #D0A900;
border-radius: 4px;
background: #F5C518;
color: #111111;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.14);
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 9px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.08;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-event--general {
--ec-event-bg-color: var(--cal-blue);
--ec-event-border-color: var(--cal-blue-border);
--ec-event-text-color: #10233D;
}
.autodiag-mint-calendar .ga4-modern-event--cancellation,
.autodiag-mint-calendar .ga4-modern-event--cancelled {
--ec-event-bg-color: var(--cal-red);
--ec-event-border-color: var(--cal-red-border);
--ec-event-text-color: #FFFFFF;
}
.autodiag-mint-calendar .ga4-modern-event--service,
.autodiag-mint-calendar .ga4-modern-event--collection,
.autodiag-mint-calendar .ga4-modern-event--complete,
.autodiag-mint-calendar .ga4-modern-event--paid {
--ec-event-bg-color: var(--cal-service);
--ec-event-border-color: var(--cal-service-border);
--ec-event-text-color: #102018;
}
.autodiag-mint-calendar .ga4-modern-event--diagnostic,
.autodiag-mint-calendar .ga4-modern-event--electrical,
.autodiag-mint-calendar .ga4-modern-event--waiting,
.autodiag-mint-calendar .ga4-modern-event--pending,
.autodiag-mint-calendar .ga4-modern-event--wait {
--ec-event-bg-color: var(--cal-amber);
--ec-event-border-color: var(--cal-amber-border);
--ec-event-text-color: #1B1A12;
}
.autodiag-mint-calendar .ga4-cal-side {
gap: 11px;
}
.autodiag-mint-calendar .ga4-cal-picker,
.autodiag-mint-calendar .ga4-cal-assistant {
overflow: hidden;
}
.autodiag-mint-calendar .ga4-cal-side h3 {
padding: 10px 12px;
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, #5F6A66 0%, #4B5552 100%);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
font-size: 12px;
font-weight: 850;
}
.autodiag-mint-calendar .ga4-cal-year {
padding: 8px 11px 5px;
color: var(--cal-ink);
}
.autodiag-mint-calendar .ga4-cal-year strong {
font-size: 31px;
font-weight: 950;
letter-spacing: 0;
}
.autodiag-mint-calendar .ga4-cal-year a {
border-radius: 8px;
color: #60736C;
}
.autodiag-mint-calendar .ga4-cal-year a:hover {
background: var(--cal-green-soft);
color: var(--cal-green);
}
.autodiag-mint-calendar .ga4-cal-months {
gap: 5px;
padding: 0 11px 8px;
}
.autodiag-mint-calendar .ga4-cal-months a {
min-height: 23px;
border: 1px solid transparent;
border-radius: 7px;
color: var(--cal-ink);
font-weight: 800;
}
.autodiag-mint-calendar .ga4-cal-months a:hover {
border-color: #BFD6CC;
background: #F1F8F5;
}
.autodiag-mint-calendar .ga4-cal-months a.active,
.autodiag-mint-calendar .ga4-cal-month-grid a.selected {
background: linear-gradient(180deg, #128465 0%, var(--cal-green) 100%);
border-color: var(--cal-green-dark);
color: #FFFFFF;
}
.autodiag-mint-calendar .ga4-cal-month-grid {
gap: 2px;
padding: 0 8px 9px;
}
.autodiag-mint-calendar .ga4-cal-month-grid strong {
min-height: 18px;
color: #29473D;
font-size: 9px;
font-weight: 900;
letter-spacing: 0;
}
.autodiag-mint-calendar .ga4-cal-month-grid a {
min-height: 24px;
border-color: #D3E1DB;
border-radius: 5px;
background: #FFFFFF;
color: #182A24;
font-size: 17px;
font-weight: 850;
}
.autodiag-mint-calendar .ga4-cal-month-grid a:hover {
border-color: #9FC0B2;
background: #EFF7F3;
}
.autodiag-mint-calendar .ga4-cal-month-grid a.muted {
color: #A2AEAA;
background: #FAFCFB;
}
.autodiag-mint-calendar .ga4-assist-head {
padding: 11px 12px;
border-bottom-color: #D4E3DC;
background: linear-gradient(180deg, #FBFDFC 0%, #EEF7F3 100%);
border-radius: 12px 12px 0 0;
}
.autodiag-mint-calendar .ga4-assist-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(180deg, #15906E 0%, var(--cal-green) 100%);
box-shadow: 0 7px 16px rgba(15, 110, 86, 0.24);
}
.autodiag-mint-calendar .ga4-assist-headtext strong {
color: var(--cal-ink);
font-size: 14px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-assist-headtext span {
color: var(--cal-muted);
font-size: 11px;
font-weight: 750;
}
.autodiag-mint-calendar .ga4-assist-body {
padding: 13px;
background: linear-gradient(180deg, #FBFDFC 0%, #F6FAF8 100%);
}
.autodiag-mint-calendar .ga4-assist-msg--ai {
border-color: #D4E3DC;
border-radius: 9px;
box-shadow: 0 8px 18px rgba(20, 60, 45, 0.10);
font-size: 12px;
}
.autodiag-mint-calendar .ga4-assist-chips {
padding: 9px 12px 7px;
border-top-color: #D4E3DC;
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-assist-chips button {
height: 27px;
padding: 0 10px;
border-radius: 8px;
background: #F4FAF7;
color: var(--cal-green-dark);
font-size: 11px;
}
.autodiag-mint-calendar .ga4-assist-inputrow {
padding: 9px 12px 11px;
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-assist-inputrow input {
flex: 1 1 auto;
min-width: 0;
background: #F8FBFA;
font-weight: 650;
}
.autodiag-mint-calendar .ga4-assist-inputrow button {
width: 38px;
min-width: 38px;
border-color: var(--cal-green);
background: linear-gradient(180deg, #15906E 0%, var(--cal-green) 100%);
color: #FFFFFF;
}
/* Admin and reminders */
.autodiag-mint-admin,
.autodiag-mint-reminders {
min-height: 100%;
padding: 14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 9%, transparent), rgba(255,255,255,0) 34%),
var(--mint-bg);
}
.autodiag-mint-admin .ga4-admin-panel,
.autodiag-mint-admin .ga4-admin-browser,
.autodiag-mint-admin .ga4-admin-stage,
.autodiag-mint-admin .ga4-admin-tool,
.autodiag-mint-admin .ga4-admin-listbox,
.autodiag-mint-admin .ga4-admin-form,
.autodiag-mint-admin .ga4-admin-export-panel,
.autodiag-mint-reminders .ga4-rem-main,
.autodiag-mint-reminders .ga4-rem-donut {
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface);
box-shadow: 0 12px 24px rgba(22, 36, 29, 0.06);
}
.autodiag-mint-admin .ga4-admin-title,
.autodiag-mint-admin .ga4-admin-tool-head,
.autodiag-mint-reminders .ga4-rem-donut h3 {
border-color: color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
background:
linear-gradient(135deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 72%, #16241d));
color: #ffffff;
}
.autodiag-mint-admin .ga4-admin-tabs a,
.autodiag-mint-admin .ga4-admin-actions button,
.autodiag-mint-admin .ga4-admin-filterbar button,
.autodiag-mint-admin .ga4-admin-alpha button,
.autodiag-mint-admin .ga4-admin-tabline button,
.autodiag-mint-admin .ga4-admin-export-panel button,
.autodiag-mint-admin .ga4-admin-form > button,
.autodiag-mint-admin .ga4-admin-listbox button,
.autodiag-mint-reminders .ga4-rem-filters button {
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
font-weight: 700;
}
.autodiag-mint-admin .ga4-admin-tabs a.active,
.autodiag-mint-admin .ga4-admin-mini-tile.active,
.autodiag-mint-admin .ga4-admin-alpha button.active,
.autodiag-mint-admin .ga4-admin-filterbar button.active,
.autodiag-mint-admin .ga4-admin-tabline button.active,
.autodiag-mint-admin .ga4-admin-listbox button.active {
background: var(--section-accent);
color: #ffffff;
border-color: var(--section-accent);
}
.autodiag-mint-admin .ga4-admin-workarea,
.autodiag-mint-admin .ga4-admin-stage,
.autodiag-mint-admin .ga4-admin-landing-head {
background: color-mix(in srgb, var(--mint-bg) 82%, #ffffff);
}
.autodiag-mint-admin .ga4-admin-browser-head {
height: auto;
min-height: 38px;
background: var(--mint-surface-2);
color: var(--mint-muted);
border-bottom: 1px solid var(--mint-border);
}
.autodiag-mint-admin .ga4-admin-mini-tile {
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--mint-text);
}
.autodiag-mint-admin .ga4-admin-mini-tile:hover {
background: var(--mint-surface-2);
border-color: var(--mint-border);
}
.autodiag-mint-admin .ga4-admin-mini-tile.active .ga4-admin-mini-copy small {
opacity: .86;
}
.autodiag-mint-admin .ga4-admin-mini-icon,
.autodiag-mint-admin .ga4-admin-icon {
width: 40px;
height: 40px;
border-radius: 11px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 88%, #ffffff), var(--section-accent));
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.autodiag-mint-admin .ga4-admin-mini-icon {
width: 34px;
height: 34px;
border-radius: 9px;
}
.autodiag-mint-admin .ga4-admin-grid {
grid-auto-rows: minmax(112px, auto);
}
.autodiag-mint-admin .ga4-admin-tile {
border: 1px solid var(--mint-border);
border-left: 4px solid var(--section-accent);
border-radius: 10px;
background: #ffffff;
color: var(--mint-text);
box-shadow: 0 10px 22px rgba(22, 36, 29, 0.06);
}
.autodiag-mint-admin .ga4-admin-tile:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--section-accent) 45%, var(--mint-border));
box-shadow: 0 14px 28px rgba(22, 36, 29, 0.09);
}
.autodiag-mint-admin .ga4-admin-tile-copy small,
.autodiag-mint-admin .ga4-admin-landing-head p {
color: var(--mint-muted);
}
.autodiag-mint-admin .ga4-admin-field input,
.autodiag-mint-admin .ga4-admin-field textarea {
border: 1px solid var(--mint-border);
border-radius: 7px;
background: #ffffff;
color: var(--mint-text);
}
.autodiag-mint-admin .ga4-admin-table th {
background: var(--mint-surface-2);
color: var(--mint-muted);
}
.autodiag-mint-admin .ga4-admin-table td {
border-color: var(--mint-border);
}
.autodiag-mint-admin .ga4-admin-table tr.selected td,
.autodiag-mint-admin .ga4-admin-table tr:hover td {
background: color-mix(in srgb, var(--section-accent) 9%, #ffffff);
}
.autodiag-mint-reminders .ga4-rem-ring {
border-color: color-mix(in srgb, var(--section-accent) 35%, var(--mint-border));
background: var(--mint-surface-2);
}
.autodiag-mint-reminders .ga4-rem-ring span,
.autodiag-mint .num,
.autodiag-mint .ga4-cust-acc,
.autodiag-mint .ga4-veh-acc,
.autodiag-mint .ga4-admin-table td {
font-family: "JetBrains Mono", Consolas, monospace;
}
/* Registration cells and inline list search refinements */
.autodiag-mint-list .ga4-est-actionbar,
.autodiag-mint-list .ga4-veh-actionbar,
.autodiag-mint-reminders .ga4-est-actionbar {
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.autodiag-mint .ga4-list-search-inline {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
}
.autodiag-mint .ga4-list-quick {
min-height: 34px;
width: 260px;
border: 1px solid var(--mint-border);
border-radius: 8px;
background: #ffffff;
color: var(--mint-text);
padding: 0 12px;
font-family: "Outfit", "Segoe UI", sans-serif;
font-weight: 600;
}
.autodiag-mint .ga4-list-quick:focus {
border-color: var(--section-accent);
outline: 2px solid color-mix(in srgb, var(--section-accent) 18%, transparent);
}
.autodiag-mint .ga4-list-quick-go {
min-width: 74px;
}
.autodiag-mint-list .ga4-veh-searchrow-inline {
order: 20;
margin-left: 8px;
padding: 0;
border: 0;
background: transparent;
}
.autodiag-mint-list .ga4-veh-searchrow-inline input[type=text] {
flex: 0 0 260px;
}
/* Full-yellow registration cells in the list grids. Inline-flex keeps
Tabulator's side-by-side cell flow while vertically centring the
plate text (the old block layout pinned it to the cell top). */
.autodiag-mint .tabulator-cell[tabulator-field="registration"] {
display: inline-flex !important;
align-items: center;
background: linear-gradient(180deg, #ffd75e, #f5c518) !important;
box-shadow: inset 1px 0 0 #e0b30d, inset -1px 0 0 #e0b30d,
inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
color: #111111 !important;
font-family: "Outfit", "Segoe UI", sans-serif !important;
font-size: 14.5px;
font-weight: 800;
letter-spacing: 1.3px;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
padding-left: 11px !important;
padding-right: 11px !important;
}
.autodiag-mint .tabulator-cell[tabulator-field="registration"] .ga4-est-reg,
.autodiag-mint .tabulator-cell[tabulator-field="registration"] .ga4-veh-reg {
display: block;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent !important;
box-shadow: none;
color: inherit !important;
font-size: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
/* ---- Site wiring N2-N4: record mini-panels + account statement ---- */
.ga4-rec-minipanel {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 6px 14px;
padding: 10px 14px;
background: #FFFFFF;
border: 1px solid #D5DBD8;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(26, 32, 51, 0.10);
font-size: 12.5px;
}
.ga4-rec-minipanel label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.ga4-rec-minipanel input {
padding: 5px 8px;
border: 1.5px solid #D5DBD8;
border-radius: 6px;
font: inherit;
min-width: 170px;
}
.ga4-rec-minipanel a,
.ga4-rec-minipanel button {
padding: 6px 12px;
border: 1px solid #1D9E75;
border-radius: 6px;
background: #1D9E75;
color: #FFFFFF;
font: inherit;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.ga4-rec-minipanel a:hover,
.ga4-rec-minipanel button:hover { filter: brightness(1.06); }
.ga4-rec-minipanel-hint { color: #6A7570; font-size: 11.5px; }
.ga4-statement { max-width: 880px; margin: 18px auto; padding: 0 16px; }
.ga4-statement-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
.ga4-statement-head h1 { margin: 0 0 4px; font-size: 20px; }
.ga4-statement-acc { font-weight: 700; }
.ga4-statement-addr { color: #4A5568; font-size: 12.5px; }
.ga4-statement-meta { text-align: right; font-size: 12.5px; }
.ga4-statement-actions { margin-top: 8px; display: flex; gap: 8px; justify-content: flex-end; }
.ga4-statement-actions button,
.ga4-statement-actions a {
padding: 5px 12px; border: 1px solid #D5DBD8; border-radius: 6px;
background: #FFFFFF; font: inherit; cursor: pointer; text-decoration: none; color: inherit;
}
.ga4-statement-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ga4-statement-table th, .ga4-statement-table td { padding: 6px 9px; border-bottom: 1px solid #E2E6E3; text-align: left; }
.ga4-statement-table thead th { background: #F0F2F5; }
.ga4-statement-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ga4-statement-table tfoot th { border-top: 2px solid #1A2033; font-size: 13.5px; }
.ga4-statement-empty { color: #6A7570; text-align: center; }
@media print { .ga4-statement-actions { display: none; } }
/* T2 reminders + T3 stock */
.ga4-rem-send {
padding: 3px 12px; border: 1px solid #1D9E75; border-radius: 6px;
background: #1D9E75; color: #FFF; font: inherit; font-size: 11.5px;
font-weight: 600; cursor: pointer;
}
.ga4-est-btn.active { background: #1A2033; color: #FFF; }
/* T4/T5: forbidden page, vehicle history, deliver-to print block */
.ga4-forbidden { max-width: 560px; margin: 70px auto; padding: 28px; background: #FFF; border: 1px solid #D5DBD8; border-radius: 10px; text-align: center; }
.ga4-forbidden h1 { font-size: 20px; margin: 0 0 10px; }
.ga4-forbidden a { display: inline-block; margin-top: 14px; padding: 7px 16px; background: #1D9E75; color: #FFF; border-radius: 6px; text-decoration: none; font-weight: 600; }
.ga4-vehhistory-doc { margin-bottom: 18px; }
.ga4-vehhistory-dochead { display: flex; gap: 16px; align-items: baseline; padding: 6px 9px; background: #F0F2F5; border: 1px solid #E2E6E3; border-bottom: 0; font-size: 13px; }
.ga4-vehhistory-dochead .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.ga4-sty-deliverto { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #999; }
.ga4-sty-deliverto-label { font-weight: 700; }
/* Home joins the mint family (UI consistency 2026-06-10): the old
desktop-grey chrome (3px black borders, gradient KPIs, #666 header
bars) is fully overridden so home reads like every other page. */
.autodiag-mint-home .ga4-home-kpis {
border: 0;
background: transparent;
padding: 10px 0 2px;
gap: 10px;
}
.autodiag-mint-home .ga4-home-kpi,
.autodiag-mint-home .ga4-home-panel,
.autodiag-mint-home .ga4-home-side section {
background: var(--mint-surface);
border: 1px solid var(--mint-border);
border-radius: 10px;
color: var(--mint-text);
box-shadow: 0 6px 16px rgba(15, 110, 86, 0.06);
}
.autodiag-mint-home .ga4-home-kpi {
text-decoration: none;
transition: border-color .15s ease;
}
.autodiag-mint-home .ga4-home-kpi:hover { border-color: var(--section-accent); }
.autodiag-mint-home .ga4-home-kpi span {
color: var(--mint-muted);
text-transform: uppercase;
letter-spacing: .05em;
font-size: 11px;
font-weight: 600;
}
.autodiag-mint-home .ga4-home-kpi strong { color: var(--mint-text); }
.autodiag-mint-home .ga4-home-panel h3,
.autodiag-mint-home .ga4-home-side h3 {
margin: 0;
padding: 9px 14px;
background: var(--mint-surface-2);
border-bottom: 1px solid var(--mint-border);
color: var(--mint-text);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 10px 10px 0 0;
}
.autodiag-mint-home .ga4-home-panels { gap: 12px; padding-top: 10px; }
.autodiag-mint-home .ga4-home-side a {
display: block;
padding: 8px 14px;
margin: 6px 10px;
background: var(--mint-surface-2);
border: 1px solid var(--mint-border);
border-radius: 8px;
color: var(--mint-text);
text-decoration: none;
font-weight: 600;
font-size: 12.5px;
}
.autodiag-mint-home .ga4-home-side a:hover { border-color: var(--section-accent); }
.autodiag-mint-home .ga4-home-side section p {
padding: 4px 14px 10px;
margin: 0;
color: var(--mint-muted);
font-size: 12px;
}
/* Home keeps its two-column grid (main + quick-actions rail) — the
-list base flex column would stack the rail underneath. */
.autodiag-mint-home.autodiag-mint-list {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(235px, 16vw, 320px);
gap: 12px;
}
/* Reminders keeps its two-column grid too, and the side panel joins
the mint surface style. */
.ga4-rem-screen.autodiag-mint-list {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(235px, 16vw, 320px);
gap: 12px;
}
.autodiag-mint-list .ga4-rem-donut {
border: 1px solid var(--mint-border);
border-radius: 10px;
background: var(--mint-surface);
box-shadow: 0 6px 16px rgba(15, 110, 86, 0.06);
}
.autodiag-mint-list .ga4-rem-donut h3 {
margin: 0;
padding: 9px 14px;
background: var(--mint-surface-2);
border-bottom: 1px solid var(--mint-border);
color: var(--mint-text);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 10px 10px 0 0;
}
/* Live finding 2026-06-10: showGlobal messages (#ga4GlobalActionModal,
a .ga4-doc-modal at z-index 40) rendered BEHIND the appointment modal
(z-index 55) — VRM Lookup looked dead because its response was buried.
The transient message overlay always sits on top of everything. */
#ga4GlobalActionModal { z-index: 1200; }
/* OS Places address picker (postcode lookup with a key configured) */
.ga4-addrpick { display: block; max-height: 300px; overflow: auto; }
.ga4-addrpick strong { display: block; margin-bottom: 6px; }
.ga4-addrpick-item {
display: block;
width: 100%;
text-align: left;
margin: 3px 0;
padding: 6px 10px;
background: var(--mint-surface-2, #f3f8f5);
border: 1px solid var(--mint-border, #d5e2db);
border-radius: 6px;
font: inherit;
font-size: 12px;
cursor: pointer;
}
.ga4-addrpick-item:hover { border-color: #1D9E75; }
.ga4-appt-addrpick { margin-top: 6px; }
/* Appointment modal: customer's-garage dropdown + VRM comparison table */
.ga4-appt-vehmenu {
position: absolute;
z-index: 60; /* above the appt modal content */
min-width: 320px;
max-height: 260px;
overflow: auto;
background: #fff;
border: 1px solid #c8c8c8;
border-radius: 8px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
padding: 4px;
}
.ga4-appt-vehmenu button {
display: block;
width: 100%;
text-align: left;
padding: 7px 10px;
margin: 2px 0;
background: #fff;
border: 1px solid transparent;
border-radius: 6px;
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.ga4-appt-vehmenu button:hover { background: #f0f6f3; border-color: #1D9E75; }
.ga4-appt-vehmenu .ga4-appt-vehmenu-add {
border-top: 1px solid #e2e2e2;
border-radius: 0 0 6px 6px;
color: #1D9E75;
font-weight: 600;
}
.ga4-vrm-compare {
width: 100%;
border-collapse: collapse;
margin: 8px 0;
font-size: 12.5px;
}
.ga4-vrm-compare th, .ga4-vrm-compare td {
padding: 4px 9px;
border-bottom: 1px solid #e2e2e2;
text-align: left;
}
.ga4-vrm-compare tr > th:first-child { color: #666; font-weight: 600; }
.ga4-vrm-compare td:last-child { font-weight: 700; }
/* PDF margins pass (2026-06-11): the bank-details footer must never
split across pages; trim its breathing room slightly so a full
single-page document still fits inside the print margins. */
@media print {
.ga4-sty-companyfoot {
break-inside: avoid;
page-break-inside: avoid;
padding-top: 12px;
}
}
/* Multi-page documents (2026-06-11): money never splits, table headers
repeat when a long line list breaks across pages. */
@media print {
.ga4-sty-totals,
.ga4-sty-meta {
break-inside: avoid;
page-break-inside: avoid;
}
.ga4-sty-doc table thead { display: table-header-group; }
.ga4-sty-doc table tr { break-inside: avoid; page-break-inside: avoid; }
}
/* Autodiag Workshop OS visual system. Final override layer for the
approved emerald direction across calendar, documents, lists and admin. */
:root {
--aw-green-950: #062A22;
--aw-green-900: #073D31;
--aw-green-850: #084C3D;
--aw-green-800: #0A5F4B;
--aw-green-700: #0F6E56;
--aw-green-600: #128464;
--aw-green-100: #E8F3EE;
--aw-green-050: #F4FAF7;
--aw-ink: #13231D;
--aw-muted: #52665E;
--aw-border: #BFD3CA;
--aw-border-strong: #90B3A4;
--aw-surface: #FFFFFF;
--aw-surface-2: #F6FAF8;
--aw-bg: #E8F0EC;
--aw-shadow-sm: 0 2px 8px rgba(8, 62, 49, 0.10);
--aw-shadow-md: 0 12px 28px rgba(8, 62, 49, 0.15);
--aw-radius: 10px;
--aw-radius-sm: 7px;
--aw-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
--aw-plate: #F5C518;
--aw-danger: #C81E34;
--aw-blue: #CFE0F7;
--aw-blue-border: #6E9ED2;
--aw-service: #BDECCB;
--aw-service-border: #219653;
--aw-amber: #FFD84D;
--aw-amber-border: #B7791F;
}
body:has(.autodiag-mint) {
color: var(--aw-ink);
background: var(--aw-bg);
font-family: var(--aw-font);
}
body:has(.autodiag-mint) .ga4-content {
background:
linear-gradient(135deg, rgba(15, 110, 86, 0.08), rgba(255,255,255,0) 38%),
var(--aw-bg);
}
body:has(.autodiag-mint) .ga4-topbar {
height: 62px;
padding: 0 16px;
gap: 4px;
border-top: 1px solid rgba(255,255,255,0.16);
border-bottom: 1px solid #05241D;
background:
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 42%),
linear-gradient(180deg, var(--aw-green-850), var(--aw-green-950));
box-shadow: 0 10px 26px rgba(5, 36, 29, 0.28);
}
body:has(.autodiag-mint) .ga4-nav {
position: relative;
height: 54px;
min-width: 62px;
width: clamp(62px, 4.05vw, 82px);
flex-basis: clamp(62px, 4.05vw, 82px);
padding: 5px 4px 4px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: rgba(236, 248, 243, 0.88);
font-size: 11px;
font-weight: 750;
letter-spacing: 0;
}
body:has(.autodiag-mint) .ga4-nav:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.14);
color: #FFFFFF;
}
body:has(.autodiag-mint) .ga4-nav-icon {
min-width: 29px;
height: 25px;
padding: 0 7px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
font-size: 9.5px;
font-weight: 850;
}
body:has(.autodiag-mint) .ga4-right {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid rgba(255,255,255,0.14);
}
body:has(.autodiag-mint) .ga4-right .ga4-user {
color: rgba(238, 248, 243, 0.88);
font-size: 11px;
font-style: normal;
}
body:has(.autodiag-mint) .ga4-top-search {
flex: 1 1 190px;
max-width: 292px;
}
body:has(.autodiag-mint) .ga4-top-search input,
body:has(.autodiag-mint) .ga4-top-search button {
height: 34px;
border-radius: 8px;
font-family: var(--aw-font);
}
body:has(.autodiag-mint) .ga4-top-search input {
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.12);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.10);
}
body:has(.autodiag-mint) .ga4-top-search input::placeholder {
color: rgba(236, 248, 243, 0.74);
}
body:has(.autodiag-mint) .ga4-top-search button {
min-width: 64px;
border: 1px solid rgba(255,255,255,0.22);
background: linear-gradient(180deg, #1CA47C, var(--aw-green-700));
color: #FFFFFF;
box-shadow: 0 5px 12px rgba(0,0,0,0.20);
font-weight: 800;
}
body:has(.autodiag-mint-home) .ga4-nav[href="/"],
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"],
body:has(.autodiag-mint-estimates) .ga4-nav[href="/estimates"],
body:has(.autodiag-mint-jobsheets) .ga4-nav[href="/jobsheets"],
body:has(.autodiag-mint-invoices) .ga4-nav[href="/invoices"],
body:has(.autodiag-mint-reminders) .ga4-nav[href="/reminders"],
body:has(.autodiag-mint-admin) .ga4-nav[href="/admin"] {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.24);
color: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"]::after,
body:has(.autodiag-mint-estimates) .ga4-nav[href="/estimates"]::after,
body:has(.autodiag-mint-jobsheets) .ga4-nav[href="/jobsheets"]::after,
body:has(.autodiag-mint-invoices) .ga4-nav[href="/invoices"]::after,
body:has(.autodiag-mint-admin) .ga4-nav[href="/admin"]::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 3px;
height: 3px;
border-radius: 999px;
background: #7CE0B7;
}
body:has(.autodiag-mint-calendar) .ga4-nav[href="/calendar"] .ga4-nav-icon,
body:has(.autodiag-mint-estimates) .ga4-nav[href="/estimates"] .ga4-nav-icon,
body:has(.autodiag-mint-jobsheets) .ga4-nav[href="/jobsheets"] .ga4-nav-icon,
body:has(.autodiag-mint-invoices) .ga4-nav[href="/invoices"] .ga4-nav-icon,
body:has(.autodiag-mint-admin) .ga4-nav[href="/admin"] .ga4-nav-icon {
border-color: rgba(124, 224, 183, 0.56);
background: linear-gradient(180deg, #19A77D, var(--aw-green-700));
}
.autodiag-mint {
--section-accent: var(--aw-green-700);
color: var(--aw-ink);
font-family: var(--aw-font);
}
.autodiag-mint :is(input:not([type=checkbox]):not([type=color]), select, textarea) {
border-color: var(--aw-border);
border-radius: var(--aw-radius-sm);
background: #FFFFFF;
color: var(--aw-ink);
box-shadow: inset 0 1px 1px rgba(9, 54, 43, 0.05);
font-family: var(--aw-font);
letter-spacing: 0;
}
.autodiag-mint :is(input:not([type=checkbox]):not([type=color]), select, textarea):focus {
border-color: var(--aw-green-600);
outline: 2px solid rgba(18, 132, 100, 0.18);
outline-offset: 1px;
}
.autodiag-mint :is(button, .ga4-est-btn, .ga4-cal-subbar a, .ga4-admin-tabs a, .ga4-adminedit-link) {
font-family: var(--aw-font);
letter-spacing: 0;
}
.autodiag-mint :is(.ga4-est-btn, .ga4-doc-commandbar button, .ga4-doc-buttonrow button, .ga4-doc-modal-actions button, .ga4-cal-toolbar button, .ga4-cal-subbar button, .ga4-cal-subbar a, .ga4-appt-commandbar button, .ga4-appt-row button, .ga4-appt-doc-menu button, .ga4-admin-actions button, .ga4-adminedit-save, .ga4-adminedit-del, .ga4-adminedit-link, .ga4-admin-tabs a, .ga4-admin-alpha button, .ga4-assist-chips button) {
border: 1px solid var(--aw-border);
border-radius: 8px;
background: linear-gradient(180deg, #FFFFFF, #F2F7F4);
color: var(--aw-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(8, 62, 49, 0.08);
font-size: 12px;
font-weight: 780;
text-decoration: none;
}
.autodiag-mint :is(.ga4-est-btn, .ga4-doc-commandbar button, .ga4-doc-buttonrow button, .ga4-cal-toolbar button, .ga4-cal-subbar button, .ga4-cal-subbar a, .ga4-appt-commandbar button, .ga4-appt-row button, .ga4-admin-actions button, .ga4-admin-tabs a, .ga4-admin-alpha button, .ga4-assist-chips button):hover:not([disabled]) {
border-color: var(--aw-border-strong);
background: #ECF6F1;
color: var(--aw-green-800);
}
.autodiag-mint :is(.ga4-cal-btn-primary, .ga4-est-btn-primary, .ga4-adminedit-save, button[data-doc-action="save"], button[data-appt-save], .ga4-assist-inputrow button) {
border-color: var(--aw-green-800);
background: linear-gradient(180deg, #19A77D, var(--aw-green-700));
color: #FFFFFF;
box-shadow: 0 5px 12px rgba(15, 110, 86, 0.24);
}
.autodiag-mint :is(.ga4-doc-delete, .ga4-adminedit-del, [data-line-del], .ga4-red-x, .ga4-admin-close, .ga4-doc-close, #ga4ApptClose) {
border-color: color-mix(in srgb, var(--aw-danger) 58%, #7A1523);
background: linear-gradient(180deg, #DE4254, var(--aw-danger));
color: #FFFFFF;
}
.autodiag-mint :is(.ga4-est-ribbon, .ga4-doc-titlebar, .ga4-cal-titlebar, .ga4-admin-title, .ga4-admin-tool-head, .ga4-doc-modal-title, .ga4-cal-side h3) {
border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
linear-gradient(180deg, var(--aw-green-700), var(--aw-green-900));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.18);
font-family: var(--aw-font);
font-weight: 830;
}
.autodiag-mint :is(.ga4-doc-main, .ga4-doc-side section, .ga4-cal-main, .ga4-cal-side > section, .ga4-est-grid, .ga4-admin-panel, .ga4-admin-browser, .ga4-admin-stage, .ga4-admin-tool) {
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius);
background: var(--aw-surface);
box-shadow: var(--aw-shadow-md);
}
.autodiag-mint .ga4-status-pill {
min-height: 20px;
padding: 2px 8px;
border: 1px solid rgba(19, 35, 29, 0.14);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.34);
font-size: 11px;
font-weight: 850;
}
.autodiag-mint :is(.ga4-est-reg, .ga4-modern-event-reg, .ga4-doc-row .reg) {
border: 1px solid #D0A900;
border-radius: 5px;
background: linear-gradient(180deg, #FFE071, var(--aw-plate));
color: #111111;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.12);
font-family: "JetBrains Mono", Consolas, monospace;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.autodiag-mint-list .ga4-est-ribbon {
min-height: 42px;
display: flex;
align-items: center;
padding: 0 14px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
font-size: 15px;
}
.autodiag-mint-list .ga4-est-actionbar,
.autodiag-mint-list .ga4-est-filterbar {
min-height: 44px;
padding: 7px 10px;
border: 1px solid var(--aw-border);
border-top: 0;
background: linear-gradient(180deg, #FFFFFF, var(--aw-green-050));
gap: 8px;
}
.autodiag-mint-list .ga4-est-filterbar {
background: var(--aw-green-050);
}
.autodiag-mint-list .ga4-est-date,
.autodiag-mint-list .ga4-est-select {
min-height: 31px;
padding: 0 9px;
}
.autodiag-mint-list .ga4-est-grid {
border-radius: 0 0 var(--aw-radius) var(--aw-radius);
border-top: 0;
overflow: hidden;
}
.autodiag-mint-list .ga4-est-grid .tabulator {
border: 0;
background: #FFFFFF;
font-family: var(--aw-font);
}
.autodiag-mint-list .ga4-est-grid .tabulator-header {
border-bottom: 1px solid var(--aw-border-strong);
background: linear-gradient(180deg, #F9FCFB, #E7F2EE);
}
.autodiag-mint-list .ga4-est-grid .tabulator-col {
border-right-color: var(--aw-border);
background: transparent;
color: #254239;
font-weight: 850;
}
.autodiag-mint-list .ga4-est-grid .tabulator-row {
border-bottom-color: #E2ECE7;
background: #FFFFFF;
}
.autodiag-mint-list .ga4-est-grid .tabulator-row:nth-child(even) {
background: #F8FBFA;
}
.autodiag-mint-list .ga4-est-grid .tabulator-row:hover {
background: #EAF6F1;
}
.autodiag-mint-list .ga4-est-grid .tabulator-cell {
border-right-color: #E1EAE6;
color: var(--aw-ink);
font-size: 15px;
}
.autodiag-mint-doc {
padding: 12px;
background: linear-gradient(180deg, #F4FAF7, #E6F0EB);
}
.autodiag-mint-doc .ga4-doc-screen {
gap: 12px;
}
.autodiag-mint-doc .ga4-doc-titlebar {
min-height: 40px;
height: 40px;
padding: 0 12px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
font-size: 14px;
}
.autodiag-mint-doc .ga4-doc-titlebar strong {
font-size: 15px;
font-weight: 850;
}
.autodiag-mint-doc .ga4-doc-commandbar,
.autodiag-mint-calendar .ga4-cal-toolbar,
.autodiag-mint-calendar .ga4-cal-subbar,
.autodiag-mint-calendar .ga4-appt-commandbar {
min-height: 42px;
padding: 6px 8px;
border-bottom: 1px solid var(--aw-border);
background: linear-gradient(180deg, #FFFFFF, var(--aw-green-050));
gap: 7px;
}
.autodiag-mint-doc .ga4-doc-commandbar button,
.autodiag-mint-calendar .ga4-cal-toolbar button,
.autodiag-mint-calendar .ga4-cal-subbar button,
.autodiag-mint-calendar .ga4-cal-subbar a,
.autodiag-mint-calendar .ga4-cal-subbar select {
min-height: 30px;
padding: 0 12px;
border-radius: 8px;
}
.autodiag-mint-doc .ga4-doc-fields {
gap: 12px;
padding: 10px 12px;
background: #FFFFFF;
}
.autodiag-mint-doc .ga4-doc-vehicle,
.autodiag-mint-doc .ga4-doc-customer {
padding: 10px;
border: 1px solid #D6E4DE;
border-radius: 9px;
background: #F8FBFA;
}
.autodiag-mint-doc .ga4-doc-row label,
.autodiag-mint-doc .side-row label {
color: #405950;
font-size: 12px;
font-weight: 700;
}
.autodiag-mint-doc .ga4-doc-row input,
.autodiag-mint-doc .ga4-doc-row select,
.autodiag-mint-doc .side-row input,
.autodiag-mint-doc .side-row select {
min-height: 24px;
border-color: #C9DAD3;
background: #FFFFFF;
}
.autodiag-mint-doc .ga4-doc-row input[readonly],
.autodiag-mint-doc .side-row input[readonly] {
background: #F1F6F4;
color: #4B625A;
}
.autodiag-mint-doc .ga4-doc-tabs {
gap: 4px;
padding: 6px 8px 0;
border: 0;
background: #DDEBE5;
}
.autodiag-mint-doc .ga4-doc-tabs button,
.autodiag-mint-doc .ga4-doc-subtabs button,
.autodiag-mint-calendar .ga4-appt-tabs button {
border: 1px solid transparent;
border-radius: 8px 8px 0 0;
background: transparent;
color: #3C544C;
font-size: 12px;
font-weight: 800;
}
.autodiag-mint-doc .ga4-doc-tabs button.active,
.autodiag-mint-doc .ga4-doc-subtabs button.active,
.autodiag-mint-calendar .ga4-appt-tabs button.active {
border-color: var(--aw-border);
border-bottom-color: #FFFFFF;
background: #FFFFFF;
color: var(--aw-green-900);
box-shadow: 0 -2px 8px rgba(8, 62, 49, 0.08);
}
.autodiag-mint-doc .ga4-doc-tabpane {
background: #FFFFFF;
}
.autodiag-mint-doc .ga4-doc-reminders,
.autodiag-mint-doc .ga4-doc-prev {
border: 1px solid var(--aw-border);
border-radius: 9px;
background: #FFFFFF;
overflow: hidden;
}
.autodiag-mint-doc .ga4-doc-rem-head,
.autodiag-mint-doc .ga4-doc-subtabs,
.autodiag-mint-doc .ga4-doc-side h3 {
border-bottom: 1px solid var(--aw-border);
background: linear-gradient(180deg, #F7FBF9, #E6F1EC);
color: var(--aw-green-900);
font-weight: 850;
}
.autodiag-mint-doc .ga4-doc-table th,
.autodiag-mint-doc .ga4-doc-reminders th {
border-color: #C6D9D0;
background: linear-gradient(180deg, #F4FAF7, #E3F0EA);
color: #29473D;
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
}
.autodiag-mint-doc .ga4-doc-table td,
.autodiag-mint-doc .ga4-doc-reminders td {
border-color: #E0EAE6;
background: #FFFFFF;
}
.autodiag-mint-doc .ga4-doc-table tr:nth-child(even):not(.current) td {
background: #F7FBF9;
}
.autodiag-mint-doc .ga4-doc-table tr:hover td {
background: #EAF6F1;
}
.autodiag-mint-doc .ga4-doc-side section {
overflow: hidden;
}
.autodiag-mint-doc .ga4-doc-side h3 {
min-height: 31px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
}
.autodiag-mint-doc .side-row.balance input {
border-color: #D8B600;
background: #FFF2A8;
color: #111111;
font-weight: 900;
}
.autodiag-mint-calendar {
--cal-green: var(--aw-green-700);
--cal-green-dark: var(--aw-green-900);
--cal-green-soft: var(--aw-green-100);
--cal-ink: var(--aw-ink);
--cal-muted: var(--aw-muted);
--cal-line: var(--aw-border);
--cal-line-strong: var(--aw-border-strong);
--cal-blue: var(--aw-blue);
--cal-blue-border: var(--aw-blue-border);
--cal-red: var(--aw-danger);
--cal-red-border: #8F1021;
--cal-service: var(--aw-service);
--cal-service-border: var(--aw-service-border);
--cal-amber: var(--aw-amber);
--cal-amber-border: var(--aw-amber-border);
padding: 12px;
background: linear-gradient(180deg, #F3FAF6, #E5EFEA);
}
.autodiag-mint-calendar .ga4-cal-main,
.autodiag-mint-calendar .ga4-cal-side > section {
border-color: var(--aw-border);
border-radius: var(--aw-radius);
background: #FFFFFF;
box-shadow: var(--aw-shadow-md);
}
.autodiag-mint-calendar .ga4-cal-titlebar {
min-height: 44px;
height: 44px;
padding: 0 14px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
}
.autodiag-mint-calendar .ga4-cal-titlebar strong {
font-size: 15px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-cal-toolbar,
.autodiag-mint-calendar .ga4-cal-subbar {
background: linear-gradient(180deg, #FFFFFF, #F0F7F4);
}
.autodiag-mint-calendar .ga4-cal-subbar {
background: #ECF5F1;
}
.autodiag-mint-calendar .ga4-cal-seg {
height: 32px;
padding: 3px;
border: 1px solid #B5CCC2;
border-radius: 9px;
background: #DDEBE5;
box-shadow: inset 0 1px 2px rgba(8, 62, 49, 0.10);
}
.autodiag-mint-calendar .ga4-cal-seg button,
.autodiag-mint-calendar .ga4-cal-seg a {
height: 24px;
border: 0;
border-radius: 7px;
background: transparent;
box-shadow: none;
color: #405950;
}
.autodiag-mint-calendar .ga4-cal-seg button.active,
.autodiag-mint-calendar .ga4-cal-seg a.active,
.autodiag-mint-calendar .ga4-cal-seg .ga4-cal-today-link.active {
background: linear-gradient(180deg, #18A079, var(--aw-green-700));
color: #FFFFFF;
box-shadow: 0 3px 9px rgba(15, 110, 86, 0.25);
}
.autodiag-mint-calendar .ga4-modern-cal-wrap {
position: relative;
border-color: var(--aw-border);
border-radius: 0 0 var(--aw-radius) var(--aw-radius);
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-modern-bay-strip {
position: absolute;
z-index: 4;
top: 0;
left: 0;
right: 0;
display: grid;
height: 30px;
pointer-events: none;
}
.autodiag-mint-calendar .ga4-modern-bay-strip span,
.autodiag-mint-calendar .ga4-modern-bay-strip strong {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: hidden;
border-right: 1px solid #74A391;
background:
linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 45%),
linear-gradient(180deg, var(--aw-green-700), var(--aw-green-900));
color: #FFFFFF;
font-size: 12px;
font-weight: 950;
line-height: 1;
text-align: center;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0,0,0,0.22);
text-transform: uppercase;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-bay-strip span {
border-left: 0;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec {
--ec-border-color: var(--aw-border);
--ec-today-bg-color: rgba(15, 110, 86, 0.075);
color: var(--aw-ink);
font-family: var(--aw-font);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header,
.autodiag-mint-calendar .ga4-modern-calendar .ec-resource {
min-height: 30px;
border-color: #759E8E;
background:
linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 45%),
linear-gradient(180deg, var(--aw-green-700), var(--aw-green-900));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.18);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-resource .ec-title,
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-title {
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 12px;
font-weight: 950;
text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-resource {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0 6px;
background:
linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 45%),
linear-gradient(180deg, var(--aw-green-700), var(--aw-green-900)) !important;
color: #FFFFFF !important;
overflow: visible;
font-size: 12px;
font-weight: 950;
line-height: 1.1;
text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-resource * {
color: #FFFFFF !important;
}
.autodiag-mint-calendar .ga4-modern-resource-title {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
color: #FFFFFF !important;
font-size: 12px;
font-weight: 950;
line-height: 1.1;
text-align: center;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0,0,0,0.22);
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time {
color: #29473D;
font-size: 11px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-line,
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-line {
border-color: #C2D6CD;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-lines {
background: repeating-linear-gradient(
to bottom,
rgba(15, 110, 86, 0.038) 0,
rgba(15, 110, 86, 0.038) 1px,
transparent 1px,
transparent 16px
);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event {
border: 1px solid color-mix(in srgb, var(--ec-event-border-color, var(--aw-blue-border)) 72%, #FFFFFF);
border-left-width: 1px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.03)),
var(--ec-event-bg-color, var(--aw-blue));
box-shadow: 0 4px 10px rgba(8, 62, 49, 0.14);
overflow: hidden;
transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease, filter 130ms ease;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-event:hover {
transform: translateY(-1px);
border-color: var(--ec-event-border-color, var(--aw-blue-border));
box-shadow: 0 9px 18px rgba(8, 62, 49, 0.20);
filter: saturate(1.04);
}
.autodiag-mint-calendar .ga4-modern-ticket {
gap: 3px;
padding: 6px 7px 6px;
color: var(--ec-event-text-color, #16241d);
}
.autodiag-mint-calendar .ga4-modern-ticket-top {
gap: 5px;
padding-bottom: 2px;
border-bottom: 1px solid rgba(19, 35, 29, 0.12);
}
.autodiag-mint-calendar .ga4-modern-event-status {
flex: 0 0 auto;
width: 8px;
height: 8px;
border: 1px solid rgba(255,255,255,0.78);
border-radius: 999px;
background: var(--ec-event-border-color, var(--aw-blue-border));
box-shadow: 0 0 0 1px rgba(19,35,29,0.10);
}
.autodiag-mint-calendar .ga4-modern-event-time {
font-size: 11px;
font-weight: 950;
}
.autodiag-mint-calendar .ga4-modern-event-type {
padding: 2px 6px;
border: 1px solid rgba(19,35,29,0.10);
border-radius: 999px;
background: rgba(255,255,255,0.62);
font-size: 8.5px;
}
.autodiag-mint-calendar .ga4-modern-event-customer {
font-size: 10px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-modern-event-vehicle,
.autodiag-mint-calendar .ga4-modern-event-phone {
color: color-mix(in srgb, currentColor 82%, #000000);
font-size: 9.5px;
}
.autodiag-mint-calendar .ga4-modern-event-reg {
padding: 1px 6px 2px;
font-size: 9px;
line-height: 1.1;
}
.autodiag-mint-calendar .ga4-cal-picker,
.autodiag-mint-calendar .ga4-cal-assistant {
overflow: hidden;
}
.autodiag-mint-calendar .ga4-cal-side h3 {
min-height: 36px;
padding: 9px 12px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
font-size: 12px;
font-weight: 850;
}
.autodiag-mint-calendar .ga4-cal-year,
.autodiag-mint-calendar .ga4-cal-months,
.autodiag-mint-calendar .ga4-cal-month-grid {
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-cal-year strong {
color: var(--aw-green-900);
font-size: 30px;
font-weight: 950;
}
.autodiag-mint-calendar .ga4-cal-months a,
.autodiag-mint-calendar .ga4-cal-month-grid a {
border-color: #D0E0D8;
border-radius: 6px;
background: #FFFFFF;
color: var(--aw-ink);
}
.autodiag-mint-calendar .ga4-cal-months a.active,
.autodiag-mint-calendar .ga4-cal-month-grid a.selected {
border-color: var(--aw-green-800);
background: linear-gradient(180deg, #18A079, var(--aw-green-700));
color: #FFFFFF;
}
.autodiag-mint-calendar .ga4-assist-head {
padding: 11px 12px;
border-bottom: 1px solid var(--aw-border);
background: linear-gradient(180deg, #F9FCFB, #E7F2EE);
}
.autodiag-mint-calendar .ga4-assist-avatar {
border-radius: 10px;
background: linear-gradient(180deg, #18A079, var(--aw-green-800));
}
.autodiag-mint-calendar .ga4-assist-headtext strong {
color: var(--aw-green-950);
font-size: 14px;
font-weight: 900;
}
.autodiag-mint-calendar .ga4-assist-body {
background: #F7FBF9;
}
.autodiag-mint-calendar .ga4-assist-msg--ai {
border-color: #D3E3DC;
border-radius: 9px;
box-shadow: var(--aw-shadow-sm);
}
.autodiag-mint-calendar .ga4-assist-chips,
.autodiag-mint-calendar .ga4-assist-inputrow {
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-appt-modal-box {
border: 1px solid var(--aw-border);
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 26px 70px rgba(4, 32, 25, 0.34);
overflow: hidden;
}
.autodiag-mint-calendar .ga4-appt-note {
border-bottom: 1px solid #F1C7CE;
background: #FFF0F2;
color: #8D1526;
}
.autodiag-mint-calendar .ga4-appt-form {
background: #FFFFFF;
}
.autodiag-mint-calendar .ga4-appt-time {
padding: 12px 18px;
border-bottom: 1px solid var(--aw-border);
background: #F4FAF7;
}
.autodiag-mint-calendar .ga4-appt-time span,
.autodiag-mint-calendar .ga4-appt-row label {
color: #405950;
font-size: 12px;
font-weight: 800;
}
.autodiag-mint-calendar .ga4-appt-duration {
border-color: var(--aw-border);
border-radius: 9px;
overflow: hidden;
}
.autodiag-mint-calendar .ga4-appt-duration strong {
background: linear-gradient(180deg, #E7F2EE, #D6E8E0);
color: var(--aw-green-900);
}
.autodiag-mint-calendar .ga4-appt-vehicle,
.autodiag-mint-calendar .ga4-appt-customer {
padding: 10px;
border: 1px solid #D6E4DE;
border-radius: 9px;
background: #F8FBFA;
}
.autodiag-mint-calendar .ga4-appt-tabs {
gap: 4px;
padding: 6px 8px 0;
border-top: 1px solid var(--aw-border);
background: #DDEBE5;
}
.autodiag-mint-calendar .ga4-appt-notes {
border-color: var(--aw-border);
border-radius: 9px;
}
.autodiag-mint-admin {
--section-accent: var(--aw-green-700);
padding: 14px;
background: linear-gradient(180deg, #F2F8F5, #E5EFEA);
}
.autodiag-mint-admin .ga4-admin {
place-items: stretch;
}
.autodiag-mint-admin .ga4-admin-panel {
width: min(1180px, 100%);
border-color: var(--aw-border);
overflow: hidden;
}
.autodiag-mint-admin .ga4-admin-title {
min-height: 42px;
height: 42px;
padding: 0 12px;
font-size: 15px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
}
.autodiag-mint-admin .ga4-admin-tabs {
gap: 5px;
padding: 7px 8px 0;
background: #DDEBE5;
}
.autodiag-mint-admin .ga4-admin-tabs a {
min-height: 32px;
display: grid;
place-items: center;
border-radius: 8px 8px 0 0;
color: #3A554B;
}
.autodiag-mint-admin .ga4-admin-tabs a.active {
border-color: var(--aw-border);
border-bottom-color: #FFFFFF;
background: #FFFFFF;
color: var(--aw-green-900);
box-shadow: 0 -2px 8px rgba(8, 62, 49, 0.08);
}
.autodiag-mint-admin .ga4-admin-workarea,
.autodiag-mint-admin .ga4-admin-stage {
background: #FFFFFF;
}
.autodiag-mint-admin .ga4-admin-browser-head {
min-height: 38px;
border-bottom: 1px solid var(--aw-border);
background: linear-gradient(180deg, #F7FBF9, #E6F1EC);
color: var(--aw-green-900);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.autodiag-mint-admin .ga4-admin-mini-tile,
.autodiag-mint-admin .ga4-admin-tile {
border-color: transparent;
border-radius: 9px;
background: #FFFFFF;
color: var(--aw-ink);
}
.autodiag-mint-admin .ga4-admin-mini-tile:hover,
.autodiag-mint-admin .ga4-admin-tile:hover {
border-color: var(--aw-border);
background: #F4FAF7;
}
.autodiag-mint-admin .ga4-admin-mini-tile.active {
border-color: var(--aw-green-700);
background: #E8F3EE;
color: var(--aw-green-950);
}
.autodiag-mint-admin .ga4-admin-mini-icon,
.autodiag-mint-admin .ga4-admin-icon {
border-radius: 10px;
background:
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
linear-gradient(180deg, #18A079, var(--aw-green-800));
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 5px 12px rgba(15,110,86,0.18);
}
.autodiag-mint-admin .ga4-admin-tool-head {
min-height: 42px;
padding: 0 12px;
border-radius: var(--aw-radius) var(--aw-radius) 0 0;
}
.autodiag-mint-admin .ga4-adminedit {
background: #FFFFFF;
}
.autodiag-mint-admin .ga4-adminedit-row.is-head {
min-height: 30px;
padding: 0 10px;
border: 1px solid #C6D9D0;
border-radius: 8px;
background: linear-gradient(180deg, #F4FAF7, #E3F0EA);
color: #29473D;
}
.autodiag-mint-admin .ga4-adminedit-row:not(.is-head) {
min-height: 36px;
padding: 4px 6px;
border-radius: 8px;
}
.autodiag-mint-admin .ga4-adminedit-row:not(.is-head):hover {
background: #F4FAF7;
}
.autodiag-mint-admin .ga4-adminedit-row.is-add {
border-top: 1px dashed var(--aw-border-strong);
background: #FBFDFC;
}
.autodiag-mint-admin .ga4-adminedit-row input:not([type=checkbox]):not([type=color]),
.autodiag-mint-admin .ga4-adminedit-row select,
.autodiag-mint-admin .ga4-adminedit-row textarea,
.autodiag-mint-admin .ga4-adminedit-settings input,
.autodiag-mint-admin .ga4-adminedit-settings select {
border-color: var(--aw-border);
border-radius: 7px;
background: #FFFFFF;
font-family: var(--aw-font);
}
.autodiag-mint-admin .ga4-adminedit-save {
border-color: var(--aw-green-800);
background: linear-gradient(180deg, #18A079, var(--aw-green-700));
color: #FFFFFF;
}
.autodiag-mint-admin .ga4-adminedit-del {
border-color: #A51528;
background: linear-gradient(180deg, #DE4254, var(--aw-danger));
color: #FFFFFF;
}
.autodiag-mint-admin .ga4-adminedit-colourchip {
border-color: #B9CDC4;
border-radius: 7px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
font-weight: 850;
}
body:has(.autodiag-mint-calendar) .ga4-appt-modal-box {
border: 1px solid var(--aw-border);
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 26px 70px rgba(4, 32, 25, 0.34);
overflow: hidden;
}
body:has(.autodiag-mint-calendar) .ga4-appt-modal-title {
min-height: 42px;
padding: 0 12px;
border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
linear-gradient(180deg, var(--aw-green-700), var(--aw-green-900));
color: #FFFFFF;
font-family: var(--aw-font);
font-weight: 850;
}
body:has(.autodiag-mint-calendar) #ga4ApptClose {
border: 1px solid #A51528;
border-radius: 8px;
background: linear-gradient(180deg, #DE4254, var(--aw-danger));
color: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar {
min-height: 42px;
padding: 6px 8px;
border-bottom: 1px solid var(--aw-border);
background: linear-gradient(180deg, #FFFFFF, var(--aw-green-050));
gap: 7px;
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar button,
body:has(.autodiag-mint-calendar) .ga4-appt-row button,
body:has(.autodiag-mint-calendar) .ga4-appt-doc-menu button {
border: 1px solid var(--aw-border);
border-radius: 8px;
background: linear-gradient(180deg, #FFFFFF, #F2F7F4);
color: var(--aw-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 2px rgba(8, 62, 49, 0.08);
font-family: var(--aw-font);
font-size: 12px;
font-weight: 800;
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar button:hover,
body:has(.autodiag-mint-calendar) .ga4-appt-row button:hover,
body:has(.autodiag-mint-calendar) .ga4-appt-doc-menu button:hover {
border-color: var(--aw-border-strong);
background: #ECF6F1;
color: var(--aw-green-800);
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar [data-appt-save] {
border-color: var(--aw-green-800);
background: linear-gradient(180deg, #19A77D, var(--aw-green-700));
color: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-appt-note {
border-bottom: 1px solid #F1C7CE;
background: #FFF0F2;
color: #8D1526;
}
body:has(.autodiag-mint-calendar) .ga4-appt-form {
background: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-appt-time {
padding: 12px 18px;
border-bottom: 1px solid var(--aw-border);
background: #F4FAF7;
}
body:has(.autodiag-mint-calendar) .ga4-appt-time span,
body:has(.autodiag-mint-calendar) .ga4-appt-row label {
color: #405950;
font-size: 12px;
font-weight: 800;
}
body:has(.autodiag-mint-calendar) .ga4-appt-time input,
body:has(.autodiag-mint-calendar) .ga4-appt-time select,
body:has(.autodiag-mint-calendar) .ga4-appt-row input,
body:has(.autodiag-mint-calendar) .ga4-appt-row select,
body:has(.autodiag-mint-calendar) .ga4-appt-extra-row input,
body:has(.autodiag-mint-calendar) .ga4-appt-notes {
border-color: var(--aw-border);
border-radius: 7px;
background: #FFFFFF;
color: var(--aw-ink);
font-family: var(--aw-font);
}
body:has(.autodiag-mint-calendar) .ga4-appt-duration {
border-color: var(--aw-border);
border-radius: 9px;
overflow: hidden;
}
body:has(.autodiag-mint-calendar) .ga4-appt-duration strong {
background: linear-gradient(180deg, #E7F2EE, #D6E8E0);
color: var(--aw-green-900);
}
body:has(.autodiag-mint-calendar) .ga4-appt-body {
background: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-appt-vehicle,
body:has(.autodiag-mint-calendar) .ga4-appt-customer {
padding: 10px;
border: 1px solid #D6E4DE;
border-radius: 9px;
background: #F8FBFA;
}
body:has(.autodiag-mint-calendar) .ga4-appt-extra {
border-color: #C8DAD3;
background: #FFFFFF;
}
body:has(.autodiag-mint-calendar) .ga4-appt-extra-head {
color: #405950;
font-size: 13px;
}
body:has(.autodiag-mint-calendar) .ga4-appt-row input[readonly] {
background: #F1F6F4;
color: #4B625A;
}
body:has(.autodiag-mint-calendar) .ga4-appt-tabs {
gap: 4px;
padding: 6px 8px 0;
border-top: 1px solid var(--aw-border);
background: #DDEBE5;
}
body:has(.autodiag-mint-calendar) .ga4-appt-tabs button {
border: 1px solid transparent;
border-radius: 8px 8px 0 0;
background: transparent;
color: #3C544C;
font-family: var(--aw-font);
font-size: 12px;
font-weight: 800;
}
body:has(.autodiag-mint-calendar) .ga4-appt-tabs button.active {
border-color: var(--aw-border);
border-bottom-color: #FFFFFF;
background: #FFFFFF;
color: var(--aw-green-900);
box-shadow: 0 -2px 8px rgba(8, 62, 49, 0.08);
}
/* Live adjustment: let Administration use the full workspace width and make
the estimate history subtabs tall enough for their labels. */
.autodiag-mint-admin .ga4-admin {
width: 100%;
}
.autodiag-mint-admin .ga4-admin-panel {
width: 100%;
max-width: none;
}
.autodiag-mint-doc .ga4-doc-subtabs {
align-items: end;
padding: 8px 8px 0;
}
.autodiag-mint-doc .ga4-doc-subtabs button {
min-height: 34px;
padding: 0 14px;
line-height: 32px;
font-size: 12.5px;
}
/* Live admin behaviour pass: wider user-access editor. */
.ga4-adminedit-usergrid {
grid-template-columns: 130px minmax(150px, .8fr) 150px minmax(360px, 1.35fr) 180px 60px 76px 76px;
}
.ga4-adminedit-usergrid select {
min-height: 32px;
border: 1px solid var(--aw-border, #BFD3CA);
border-radius: 7px;
background: #FFFFFF;
color: var(--aw-ink, #13231D);
font-weight: 700;
}
.ga4-adminedit-access {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
align-items: center;
min-width: 0;
}
.ga4-adminedit-access label {
display: inline-flex;
gap: 4px;
align-items: center;
white-space: nowrap;
font-size: 11.5px;
font-weight: 800;
color: var(--aw-muted, #52665E);
}
.ga4-live-banner {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 10000;
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--aw-border-strong, #90B3A4);
border-radius: 8px;
background: #FFFFFF;
color: var(--aw-ink, #13231D);
box-shadow: 0 14px 34px rgba(8, 62, 49, .18);
font-family: "Outfit", "Segoe UI", Tahoma, Arial, sans-serif;
}
.ga4-live-banner strong {
font-size: 13px;
}
.ga4-live-banner button {
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--aw-green-700, #0F6E56);
border-radius: 7px;
background: var(--aw-green-700, #0F6E56);
color: #FFFFFF;
font-weight: 800;
}
/* Calendar repair 2026-06-12:
use EventCalendar's real aligned header/time gutter, not the overlay strip;
keep "Today" white instead of flooding the whole day grid green. */
.autodiag-mint-calendar .ga4-modern-bay-strip {
display: none !important;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec {
--ec-bg-color: #FFFFFF;
--ec-today-bg-color: #FFFFFF;
--ec-highlight-color: rgba(29, 158, 117, 0.12);
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-day.ec-today,
.autodiag-mint-calendar .ga4-modern-calendar .ec-slots.ec-today,
.autodiag-mint-calendar .ga4-modern-calendar .ec-col-head.ec-today {
--ec-day-bg-color: #FFFFFF !important;
background-color: #FFFFFF !important;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time-grid .ec-body .ec-sidebar {
min-width: 50px;
background-color: #F2F2F2;
color: #4A4A4A !important;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-time,
.autodiag-mint-calendar .ga4-modern-calendar .ec-slot {
color: #4A4A4A !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
font-size: 10px;
font-weight: 500;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-resource,
.autodiag-mint-calendar .ga4-modern-resource-title {
text-transform: none;
}
.autodiag-mint-calendar .ga4-modern-ticket-top {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
align-items: center;
gap: 5px;
}
.autodiag-mint-calendar .ga4-modern-event-time {
min-width: 0;
overflow: visible;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-event-type {
grid-column: 1 / -1;
justify-self: start;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Short appointment cards need to read like compact job tickets, not badges
squeezed into a one-hour slot. */
.autodiag-mint-calendar .ga4-modern-ticket {
justify-content: flex-start;
gap: 3px;
}
.autodiag-mint-calendar .ga4-modern-ticket-top {
display: flex;
grid-template-columns: none;
gap: 5px;
min-width: 0;
padding-bottom: 0;
border-bottom: 0;
}
.autodiag-mint-calendar .ga4-modern-ticket-meta {
display: flex;
gap: 4px;
align-items: center;
min-width: 0;
overflow: hidden;
}
.autodiag-mint-calendar .ga4-modern-event-time {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
line-height: 1.06;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-ticket-meta .ga4-modern-event-type {
flex: 0 1 auto;
grid-column: auto;
justify-self: auto;
max-width: 66%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-ticket-meta .ga4-modern-event-reg {
flex: 0 0 auto;
max-width: 74px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact {
gap: 2px;
padding: 4px 6px 3px 7px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-ticket-top {
gap: 4px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-status {
width: 6px;
height: 6px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-time {
font-size: 10.5px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-ticket-meta {
gap: 3px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-type {
max-width: 72px;
padding: 1px 4px;
border-radius: 4px;
font-size: 8px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-reg {
max-width: 62px;
padding: 0 4px 1px;
font-size: 8.5px;
line-height: 1.05;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-customer {
font-size: 9.25px;
line-height: 1.04;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-vehicle {
font-size: 8.75px;
line-height: 1.04;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-phone {
display: none;
}
/* GA4 parity 2026-06-12: lock pill, customer live-edit, MOT remove X. */
.ga4-doc-lockpill {
margin-left: 6px;
background: #b8312f;
color: #fff;
border: 1px solid #8e2422;
border-radius: 3px;
padding: 2px 10px;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.ga4-doc-lockpill--open { background: #1a7a4a; border-color: #14603a; }
.ga4-cust-editing { background: #fffbe6 !important; outline: 1.5px solid #d9a000; }
.ga4-cust-edit-active { background: #d9a000; color: #fff; }
.side-row--mot { display: flex; align-items: center; gap: 4px; }
.side-row--mot input { flex: 1 1 auto; min-width: 0; }
.ga4-mot-x { flex: 0 0 auto; }
.ga4-admin-override p { font-weight: 700; margin: 0 0 6px; }
.ga4-admin-override input[type="password"] {
width: 100%;
padding: 6px 8px;
margin: 4px 0 8px;
border: 1px solid #aaa;
border-radius: 3px;
}
.ga4-override-err { color: #b8312f; font-weight: 700; margin: 0 0 8px; }
/* Toasts + styled confirm (2026-06-12) — modern feedback primitives. */
.ga4-toast-rail {
position: fixed;
top: 14px;
right: 14px;
z-index: 12000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.ga4-toast {
min-width: 220px;
max-width: 360px;
background: #1f2a26;
color: #fff;
border-left: 4px solid #2e9e6b;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
padding: 10px 14px;
font-weight: 600;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.ga4-toast--in { opacity: 1; transform: translateY(0); }
.ga4-toast--err { border-left-color: #d24a43; }
.ga4-toast--info { border-left-color: #2f6fb3; }
.ga4-confirm-overlay {
position: fixed;
inset: 0;
z-index: 11000;
background: rgba(16, 24, 21, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.18s ease;
}
.ga4-confirm--in { opacity: 1; }
.ga4-confirm-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
padding: 20px 22px 16px;
width: 380px;
max-width: calc(100vw - 48px);
transform: translateY(6px) scale(0.98);
transition: transform 0.18s ease;
}
.ga4-confirm--in .ga4-confirm-card { transform: translateY(0) scale(1); }
.ga4-confirm-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.ga4-confirm-msg { color: #3c4843; margin-bottom: 16px; line-height: 1.45; }
.ga4-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ga4-confirm-actions button {
border-radius: 6px;
padding: 7px 16px;
font-weight: 600;
cursor: pointer;
border: 1px solid #c4ccc8;
background: #fff;
}
.ga4-confirm-go { background: #1b6e53 !important; border-color: #14543f !important; color: #fff; }
.ga4-confirm-go--danger { background: #b8312f !important; border-color: #8e2422 !important; }
/* Audit finds 2026-06-12: reminders filter selects + record detail table. */
.ga4-rem-filters select {
flex: 1 1 auto;
min-width: 0;
padding: 4px 6px;
border: 1px solid #c4ccc8;
border-radius: 4px;
background: #fff;
font: inherit;
}
.ga4-doc-detail-table { width: 100%; border-collapse: collapse; }
.ga4-doc-detail-table th {
text-align: left;
padding: 4px 12px 4px 0;
color: #4a5550;
font-weight: 600;
white-space: nowrap;
vertical-align: top;
width: 1%;
}
.ga4-doc-detail-table td { padding: 4px 0; word-break: break-word; }
.ga4-doc-detail-table tr + tr th,
.ga4-doc-detail-table tr + tr td { border-top: 1px solid #e4e9e6; }
/* ====================================================================
Live-use pass 12 June 2026 (user feedback while running the real day)
- the Issue / SMS / Email windows were right-shifted FileMaker-style;
they centre now
- the shared modal shell modernises: rounded card, breathing room
- the inline Labour/Parts inputs were faint 12.5px boxes the user
described as "blurred out" - darker, bigger, clearer borders
==================================================================== */
.ga4-doc-modal--wide {
justify-content: center;
padding-right: 0;
}
.ga4-doc-modal-box {
border: 1px solid #2c3531;
border-radius: 12px;
overflow: hidden;
background: #fbfcfb;
box-shadow: 0 24px 64px rgba(10, 20, 16, 0.38);
}
.ga4-doc-modal-title {
padding: 12px 18px;
background: linear-gradient(#3b433f, #202623);
font-size: 15px;
}
.ga4-doc-modal-title button {
border-radius: 6px;
}
.ga4-doc-modal-body {
padding: 18px 20px;
}
.ga4-doc-modal-actions {
padding: 10px 20px 16px;
}
.ga4-doc-modal-actions button {
border-radius: 6px;
padding: 7px 16px;
}
/* SMS / form modals: roomy rows instead of cramped table lines. */
.ga4-doc-modal-body .ga4-action-field {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0 0 14px;
}
.ga4-doc-modal-body .ga4-action-field > span {
flex: 0 0 110px;
padding-top: 9px;
font-weight: 600;
color: #3c4843;
}
.ga4-doc-modal-body .ga4-action-field input,
.ga4-doc-modal-body .ga4-action-field select,
.ga4-doc-modal-body .ga4-action-field textarea {
flex: 1 1 auto;
min-width: 0;
padding: 9px 12px;
font-size: 14px;
border: 1px solid #aebbb5;
border-radius: 8px;
background: #fff;
}
.ga4-doc-modal-body .ga4-action-buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 6px;
}
.ga4-doc-modal-body .ga4-action-buttons button {
border-radius: 6px;
padding: 8px 18px;
font-weight: 600;
}
/* Labour/Parts inline editors: readable at a glance. */
.ga4-line-table td {
padding: 5px 6px;
}
.ga4-line-cell-input {
min-height: 32px;
padding: 5px 8px;
font-size: 14px;
color: #16201c;
border: 1px solid #94a8a0;
}
.ga4-lineadd input,
.ga4-lineadd select {
min-height: 32px;
font-size: 14px;
color: #16201c;
border: 1px solid #94a8a0;
border-radius: 6px;
padding: 5px 8px;
}
.ga4-line-table thead th {
font-size: 12.5px;
}
/* Live-use pass 2, 12 June 2026: bigger appointment modal, proper
action buttons, opt-in email attachment checklist. */
.ga4-appt-modal-box {
width: min(1720px, calc(100vw - 32px));
}
.ga4-appt-veh-actions {
gap: 8px;
padding-top: 10px;
}
.ga4-appt-veh-actions button {
height: 34px;
padding: 0 14px;
font-size: 13.5px;
font-weight: 600;
border: 1px solid #5d6a66;
border-radius: 7px;
background: linear-gradient(#ffffff, #e7ebe9);
color: #1d2724;
cursor: pointer;
}
.ga4-appt-veh-actions button:hover {
background: linear-gradient(#ffffff, #d8dfdc);
}
.ga4-email-attach-sub {
margin: 10px 0 4px;
font-size: 12.5px;
font-weight: 600;
color: #3c4843;
}
.ga4-email-attach-none {
font-weight: 400;
color: #6a756f;
}
.ga4-email-attach-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
border-radius: 6px;
cursor: pointer;
}
.ga4-email-attach-opt:hover { background: #eef2f0; }
.ga4-email-attach-opt input { width: 16px; height: 16px; }
.ga4-email-attach-opt span { word-break: break-all; font-size: 13px; }
.ga4-email-attach-drop {
margin: 10px 0 2px;
padding: 10px;
border: 1.5px dashed #b9c2bd;
border-radius: 6px;
text-align: center;
font-size: 12px;
color: #6a756f;
background: #f6f8f7;
}
.ga4-email-attachments.is-dropping {
border-color: #c0392b;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.ga4-email-attachments.is-dropping .ga4-email-attach-drop {
border-color: #c0392b;
color: #c0392b;
background: #fbecea;
}
.ga4-att-modal.is-dropping {
outline: 2px dashed #c0392b;
outline-offset: 3px;
}
/* Appointment modal tab panes (12 June). */
.ga4-appt-pane { display: none; }
.ga4-appt-pane.active { display: block; }
.ga4-appt-pane-body,
.ga4-appt-pane-empty {
min-height: 180px;
max-height: 320px;
overflow-y: auto;
background: #fff;
border: 1px solid #c9d2ce;
border-radius: 8px;
padding: 12px 14px;
}
.ga4-appt-pane-empty {
display: flex;
align-items: center;
justify-content: center;
color: #6a756f;
font-style: italic;
}
.ga4-appt-pane-body h4 { margin: 0 0 4px; font-size: 13px; color: #3c4843; }
.ga4-appt-pane-body p { margin: 0 0 12px; white-space: pre-wrap; }
.ga4-appt-pane-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ga4-appt-pane-table th {
text-align: left;
padding: 6px 8px;
border-bottom: 2px solid #c9d2ce;
font-size: 12px;
text-transform: uppercase;
color: #5a6661;
}
.ga4-appt-pane-table td { padding: 6px 8px; border-bottom: 1px solid #e4e9e6; }
.ga4-appt-pane-table th.num, .ga4-appt-pane-table td.num { text-align: right; }
.ga4-appt-pane-table tbody tr[data-doc-id] { cursor: pointer; }
.ga4-appt-pane-table tbody tr[data-doc-id]:hover { background: #eef4f1; }
/* 12 June: the appointment modal stretches vertically - the tab panes
and description grow to fill the screen instead of leaving dead space
under the modal. */
.ga4-appt-modal-box {
display: flex;
flex-direction: column;
/* the overlay is exactly viewport-sized, so % is scale-proof under
the fit-stage (vh is not) - 12 June "more" pass */
height: calc(100% - 20px);
min-height: 0;
max-height: none;
overflow-y: auto;
}
.ga4-appt-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.ga4-appt-panes {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.ga4-appt-pane.active {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.ga4-appt-pane.active .ga4-appt-notes {
flex: 1 1 auto;
min-height: 220px;
}
.ga4-appt-pane.active .ga4-appt-pane-body,
.ga4-appt-pane.active .ga4-appt-pane-empty {
flex: 1 1 auto;
max-height: none;
min-height: 0;
margin: 0 24px 18px;
}
/* 15 Jun 2026: appt-modal vehicle + customer values read too light (esp. read-only VRM fields at #4B625A). Darken value text + nudge weight so both panels are legible; labels already dark. */
body:has(.autodiag-mint-calendar) .ga4-appt-row input,
body:has(.autodiag-mint-calendar) .ga4-appt-row select,
body:has(.autodiag-mint-calendar) .ga4-appt-row input[readonly] {
color: #14241E;
font-weight: 600;
}
/* 15 Jun 2026: reg is the #1 glance target on a calendar card. Size it up (9px -> 13px) so it dominates the card; widen the pill so longer plates show in full. Plate styling + colours unchanged. */
.autodiag-mint-calendar .ga4-modern-event-reg {
font-size: 13px;
}
.autodiag-mint-calendar .ga4-modern-ticket-meta .ga4-modern-event-reg {
max-width: 104px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-reg {
font-size: 12px;
max-width: 96px;
}
/* 15 Jun 2026: bay titles render in .ec-col-head > span but were white-on-white. Commit 8bb03be forced .ec-col-head.ec-today to a white background (its keep-Today-white change leaked onto the header cells) while the header text is white, so the titles vanished. Keep the time-grid body white but show the column HEADER cells as the green bar with centred white titles (the intended design). */
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-grid .ec-col-head {
background-color: transparent !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.autodiag-mint-calendar .ga4-modern-calendar .ec-header .ec-grid .ec-col-head span {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #FFFFFF;
font-size: 11px;
font-weight: 900;
text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
/* MOT History dialog (DVSA) - 15 Jun 2026. GA4-style embedded history. */
.ga4-mot-overlay {
position: fixed; inset: 0; z-index: 80;
display: flex; align-items: flex-start; justify-content: center;
padding: 40px 16px; overflow: auto;
background: rgba(16, 24, 32, 0.55);
opacity: 0; transition: opacity .16s ease;
}
.ga4-mot-overlay.is-in { opacity: 1; }
.ga4-mot-dialog {
width: min(960px, 100%);
background: #F4F6F9; border-radius: 12px;
box-shadow: 0 18px 50px rgba(16, 24, 32, .4);
overflow: hidden;
transform: translateY(-8px); transition: transform .16s ease;
}
.ga4-mot-overlay.is-in .ga4-mot-dialog { transform: none; }
.ga4-mot-bar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; color: #fff;
background: linear-gradient(180deg, #22324a, #1A2033);
}
.ga4-mot-bar-title { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ga4-mot-bar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ga4-mot-btn {
border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12);
color: #fff; padding: 6px 12px; border-radius: 7px;
font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ga4-mot-btn:hover { background: rgba(255, 255, 255, .22); }
.ga4-mot-btn--close { background: #C0392B; border-color: #C0392B; }
.ga4-mot-btn--close:hover { background: #a8321f; }
.ga4-mot-subbar {
padding: 8px 16px; background: #fff; border-bottom: 1px solid #DDE1E9;
font-weight: 700; color: #1A2033; font-variant-numeric: tabular-nums;
}
.ga4-mot-body { max-height: 68vh; overflow: auto; padding: 14px 16px; }
.ga4-mot-foot {
padding: 10px 16px; font-size: 11px; color: #8a94a6;
background: #fff; border-top: 1px solid #DDE1E9;
}
.ga4-mot-empty { padding: 24px; text-align: center; color: #4a5568; }
.ga4-mot-test {
background: #fff; border: 1px solid #DDE1E9; border-radius: 10px;
margin-bottom: 12px; overflow: hidden;
}
.ga4-mot-test-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 14px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ga4-mot-test.is-pass .ga4-mot-test-head { background: #1A7A4A; }
.ga4-mot-test.is-fail .ga4-mot-test-head { background: #C0392B; }
.ga4-mot-result { margin-left: 8px; font-weight: 800; letter-spacing: .4px; }
.ga4-mot-test-exp { flex: 0 0 auto; font-weight: 600; }
.ga4-mot-test-meta {
display: flex; gap: 26px; padding: 8px 14px; font-size: 13px; color: #4a5568;
border-bottom: 1px solid #F0F2F5; font-variant-numeric: tabular-nums;
}
.ga4-mot-defs { padding: 6px 14px 10px; }
.ga4-mot-def {
display: flex; gap: 10px; padding: 4px 0; font-size: 13px;
border-top: 1px solid #F3F4F7;
}
.ga4-mot-def:first-child { border-top: 0; }
.ga4-mot-def-type { flex: 0 0 100px; font-weight: 800; font-size: 11px; letter-spacing: .3px; }
.ga4-mot-def--major .ga4-mot-def-type { color: #C0392B; }
.ga4-mot-def--minor .ga4-mot-def-type { color: #B7770D; }
.ga4-mot-def--adv .ga4-mot-def-type { color: #4A5568; }
.ga4-mot-def--none { color: #8a94a6; font-style: italic; }
.ga4-mot-def-text { color: #1A2033; }
.ga4-mot-loading .ga4-mot-body { min-height: 90px; }
@media print { .ga4-mot-overlay { display: none !important; } }
/* 15 Jun 2026: enlarge appt-modal vehicle + customer fields for legibility
(techs struggled to read them) - taller inputs, bigger labels. The
Description stays resizable; its forced minimum is reduced so the detail
panels get the room. */
body:has(.autodiag-mint-calendar) .ga4-appt-row {
font-size: 14px;
gap: 7px;
}
body:has(.autodiag-mint-calendar) .ga4-appt-row label {
font-size: 13.5px;
}
body:has(.autodiag-mint-calendar) .ga4-appt-row input,
body:has(.autodiag-mint-calendar) .ga4-appt-row select,
body:has(.autodiag-mint-calendar) .ga4-appt-extra-row input {
height: 30px;
font-size: 14px;
padding: 3px 9px;
}
body:has(.autodiag-mint-calendar) .ga4-appt-pane.active .ga4-appt-notes {
min-height: 130px;
}
/* 15 Jun 2026: bigger New Doc dropdown (Estimate / Job Sheet / Invoice) - was cramped. */
body:has(.autodiag-mint-calendar) .ga4-appt-doc-menu { min-width: 230px; }
body:has(.autodiag-mint-calendar) .ga4-appt-doc-menu button {
height: 44px;
font-size: 15px;
text-align: left;
padding: 0 18px;
}
/* 15 Jun 2026: chassis last-6 bold (read-only VIN display, matches the field). */
.ga4-appt-chassis-pretty {
grid-column: span 3;
height: 30px;
display: flex;
align-items: center;
border: 1px solid var(--aw-border, #b6bbc4);
border-radius: 7px;
background: #F1F6F4;
color: #14241E;
padding: 3px 9px;
font-size: 14px;
letter-spacing: 0.4px;
white-space: nowrap;
overflow: hidden;
}
.ga4-appt-chassis-pretty[hidden] { display: none; }
.ga4-appt-chassis-pretty strong { font-weight: 800; }
/* 16 Jun 2026: appt Description box read far too small. The generic
`.ga4-cal-screen textarea { font-size: inherit }` (13px body) out-specified
`.ga4-appt-notes`, so the notes area never grew. Re-assert a larger, readable
size with a winning-specificity selector. */
.ga4-cal-screen .ga4-appt-notes,
.ga4-doc-modal-box .ga4-appt-notes {
font-size: 18px;
line-height: 1.5;
}
/* 16 Jun 2026: global search full-results modal — top-right Quick Search +
calendar Appointment Search. Renders at full scale (own class, not in the
zoomed-overlay list) so it stays crisp and readable. */
.ga4-gsearch-overlay {
position: fixed; inset: 0; z-index: 4000;
background: rgba(20, 26, 36, 0.45);
display: flex; align-items: flex-start; justify-content: center;
padding: 7vh 16px 16px;
}
.ga4-gsearch-overlay[hidden] { display: none; }
.ga4-gsearch-modal {
width: min(860px, 96vw); max-height: 84vh;
background: #fff; border-radius: 12px; border: 1px solid #DDE1E9;
box-shadow: 0 18px 50px rgba(26, 32, 51, 0.30);
display: flex; flex-direction: column; overflow: hidden;
font-family: 'Outfit', 'Segoe UI', sans-serif; color: #1A2033;
}
.ga4-gsearch-head {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid #DDE1E9;
}
.ga4-gsearch-input {
flex: 1 1 auto; font: 600 18px 'Outfit', sans-serif;
padding: 11px 14px; border: 1.5px solid #DDE1E9; border-radius: 8px;
color: #1A2033; outline: none;
}
.ga4-gsearch-input:focus {
border-color: #C0392B; box-shadow: 0 0 0 3px rgba(226, 55, 68, 0.08);
}
.ga4-gsearch-close {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px;
border: 1px solid #DDE1E9; background: #fff; color: #4A5568;
font-weight: 700; cursor: pointer;
}
.ga4-gsearch-close:hover { background: #F0F2F5; }
.ga4-gsearch-results { overflow-y: auto; padding: 6px 0 10px; }
.ga4-gsearch-sec {
position: sticky; top: 0; background: #F0F2F5; color: #4A5568;
font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; padding: 7px 16px;
}
.ga4-gsearch-sec-n {
display: inline-block; min-width: 18px; margin-left: 6px;
color: #8A94A6; font-weight: 700;
}
.ga4-gsearch-row {
display: grid; grid-template-columns: 130px 1.2fr 1fr; gap: 12px;
width: 100%; text-align: left; align-items: baseline;
padding: 10px 16px; border: 0; border-bottom: 1px solid #EEF1F5;
background: #fff; cursor: pointer; font-size: 15px; color: #1A2033;
}
.ga4-gsearch-row:hover { background: #FFE9ED; }
.ga4-gsearch-c1 { font-variant-numeric: tabular-nums; }
.ga4-gsearch-c3 { color: #4A5568; font-size: 14px; }
.ga4-gsearch-empty { padding: 28px 16px; text-align: center; color: #8A94A6; font-size: 15px; }
.ga4-gsearch-foot { border-top: 1px solid #DDE1E9; padding: 9px 16px; font-size: 12px; color: #8A94A6; }
/* 16 Jun 2026: vehicle on-site marker — one red dot carried across surfaces.
Blue variant for cards/rows whose own colour is red. */
.ga4-onsite-dot {
position: absolute; top: 4px; right: 4px;
width: 12px; height: 12px; border-radius: 50%;
background: #e11d2a;
box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.35);
pointer-events: none; z-index: 4;
}
.ga4-onsite-dot--blue { background: #1d4ed8; }
/* booking-modal toggle */
.ga4-appt-onsite.is-on {
background: #e11d2a;
border-color: #b3121e;
color: #fff;
font-weight: 700;
}
.ga4-appt-onsite:disabled { opacity: 0.5; cursor: not-allowed; }
/* inline dot for lists + record headers (sits next to the registration) */
.ga4-onsite-listdot {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
background: #e11d2a; margin-right: 6px; vertical-align: middle;
box-shadow: 0 0 0 1.5px #fff;
}
.ga4-onsite-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px;
background: #fdeaec; color: #b3121e; font-weight: 700; font-size: 13px;
border: 1px solid #f3b4ba;
}
.ga4-onsite-badge::before {
content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e11d2a;
}
.ga4-veh-btn.is-on { background: #e11d2a; border-color: #b3121e; color: #fff; font-weight: 700; }
/* on-site marker on the vendor calendar (Week / Month / List / time views) */
.ga4-modern-calendar .ec-event.ga4-onsite .ec-event-title::before,
.ga4-modern-calendar .ec-event.ga4-onsite--blue .ec-event-title::before {
content: ""; display: inline-block; width: 8px; height: 8px;
border-radius: 50%; margin-right: 5px; vertical-align: middle;
box-shadow: 0 0 0 1.5px #fff;
}
.ga4-modern-calendar .ec-event.ga4-onsite .ec-event-title::before { background: #e11d2a; }
.ga4-modern-calendar .ec-event.ga4-onsite--blue .ec-event-title::before { background: #1d4ed8; }
/* on-site pill on the modern calendar ticket (day/week/month) */
.ga4-modern-onsite {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
background: #e11d2a; color: #fff; font-weight: 800; font-size: 10px;
letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle;
}
.ga4-modern-onsite--blue { background: #1d4ed8; }
/* on-site two-state On/Off toggle in the appointment command bar */
.ga4-appt-onsite { display: inline-flex; align-items: center; gap: 6px; }
.ga4-appt-onsite-lbl { font-size: 12px; font-weight: 700; color: #4a5568; }
.ga4-appt-onsite-seg { min-width: 40px; padding: 5px 11px; border: 1px solid #c4c4c4; background: #fff; color: #4a5568; font-weight: 700; font-size: 12px; cursor: pointer; }
.ga4-appt-onsite-seg:first-of-type { border-radius: 6px 0 0 6px; }
.ga4-appt-onsite-seg:last-of-type { border-radius: 0 6px 6px 0; border-left: 0; }
.ga4-appt-onsite-seg[data-onsite="1"].is-active { background: #e11d2a; border-color: #b3121e; color: #fff; }
.ga4-appt-onsite-seg[data-onsite="0"].is-active { background: #6b7280; border-color: #4b5563; color: #fff; }
.ga4-appt-onsite.is-disabled { opacity: 0.5; pointer-events: none; }
.ga4-copy-btn {
flex: 0 0 auto;
min-width: 26px;
height: 26px;
padding: 0 7px;
border: 1px solid #b9c2bd;
border-radius: 5px;
background: linear-gradient(#fbfbfb, #e9edeb);
color: #1d1d1d;
font-weight: 700;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.ga4-copy-btn:hover { background: linear-gradient(#fff, #dfe4e2); }
.ga4-copy-btn.is-copied { border-color: #1A7A4A; color: #1A7A4A; }
.ga4-doc-row input.ga4-vin-copy-src.full { grid-column: 2 / -2; }
.ga4-doc-row .ga4-copy-btn { grid-column: -2 / -1; justify-self: start; }
.ga4-appt-chassis-row input[name="chassis"].full,
.ga4-appt-chassis-row .ga4-appt-chassis-pretty { grid-column: 2 / 4; }
.ga4-appt-chassis-row .ga4-copy-btn { grid-column: 4 / 5; justify-self: start; height: 28px; }
.ga4-status-select {
max-width: 100%;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.22);
border-radius: 8px;
padding: 2px 4px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.ga4-status-select:focus { outline: 2px solid rgba(192,57,43,0.35); }
.ga4-adminedit-statusgrid { grid-template-columns: minmax(150px, 1fr) 52px 52px 52px 52px 52px 64px 64px 64px 76px; }
.ga4-adminedit-statusgrid input[type=color] { width: 46px; height: 26px; padding: 0; border: 1px solid var(--border, #ddd); border-radius: 5px; cursor: pointer; }
.ga4-appt-modal-title .ga4-appt-doc-pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 11px;
margin-left: 10px;
border: 0;
border-radius: 12px;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
background: #4b5563;
cursor: pointer;
}
.ga4-appt-modal-title .ga4-appt-doc-pill:hover { filter: brightness(1.08); }
.ga4-appt-modal-title .ga4-appt-doc-pill--es { background: #0F6E56; }
.ga4-appt-modal-title .ga4-appt-doc-pill--si { background: #1D4ED8; }
.ga4-appt-modal-title .ga4-appt-doc-pill--js { background: #B7770D; }
/* Calendar ticket doc-type pill (ES/INV/JS at a glance) */
.ga4-modern-docpill{display:inline-block;font:700 9px/1.45 'Outfit',sans-serif;font-variant-numeric:tabular-nums;padding:0 5px;border-radius:4px;margin-left:4px;letter-spacing:.3px;color:#fff;vertical-align:middle;}
.ga4-modern-docpill--es{background:#1A7A4A;}
.ga4-modern-docpill--si{background:#1D4ED8;}
.ga4-modern-docpill--js{background:#B7770D;}
.ga4-modern-docpill--cn{background:#6D28D9;}
.ga4-modern-docpill--pa{background:#4A5568;}
/* AI write-up button (document description tab) */
.ga4-aiwrite-bar{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap;}
.ga4-aiwrite-btn{background:#6D28D9;color:#fff;border:0;border-radius:6px;padding:6px 13px;font:600 13px 'Outfit',sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(109,40,217,.25);}
.ga4-aiwrite-btn:hover{background:#5b21b6;}
.ga4-aiwrite-btn:disabled{opacity:.6;cursor:default;}
.ga4-aiwrite-hint{color:#8A94A6;font:400 12px 'Outfit',sans-serif;}
/* Document print/PDF header-tighten (2026-06-16): pull the BILL TO +
doc-summary boxes, vehicle grid and section gaps in so the page is
given over to the work description + lines. A big write-up now fits on
one page; short docs stop spilling the totals onto an empty page 2.
Spacing only - the AutoDiag wordmark is untouched. */
.ga4-sty-letterhead{padding:4px 0 9px;}
.ga4-sty-company .ga4-sty-address{margin-top:6px;}
.ga4-sty-addr{padding:9px 0 11px;}
.ga4-sty-customer{min-height:0;padding:9px 14px 8px 14px;}
.ga4-sty-customer p{margin:0 0 2px;}
.ga4-sty-customer .ga4-sty-sechead{margin-bottom:6px;}
.ga4-sty-meta{padding:9px 16px 9px;}
.ga4-sty-meta-title{margin-bottom:7px;}
.ga4-sty-meta-title .ga4-sty-num{font-size:23px;}
.ga4-sty-meta-amount{margin:0 0 7px;padding:7px 0;}
.ga4-sty-meta-amount strong{font-size:20px;}
.ga4-sty-meta > div:not(.ga4-sty-meta-title):not(.ga4-sty-meta-amount){margin:3px 0;}
.ga4-sty-vehicle{margin-bottom:10px;}
.ga4-sty-vehicle td{padding:5px 8px;}
.ga4-sty-work{margin-bottom:10px;padding-top:8px;}
.ga4-sty-jobdesc{margin-bottom:10px;line-height:1.4;}
.ga4-sty-lines{margin-bottom:10px;}
.ga4-sty-lines td{padding:5px 8px;}
.ga4-sty-totals{margin-top:6px;}
/* Bank matching surface */
.ga4-bank-flash{margin:10px 0;padding:9px 14px;background:#e7f4ec;border:1px solid #bfe0cc;border-radius:6px;color:#1A7A4A;font:600 13px 'Outfit',sans-serif;}
.ga4-bank-help{margin:8px 0 14px;color:#4A5568;font:400 12.5px 'Outfit',sans-serif;}
.ga4-bank-table{width:100%;border-collapse:collapse;background:#fff;font:500 13px 'Outfit',sans-serif;}
.ga4-bank-table th{text-align:left;background:#F0F2F5;color:#4A5568;font:700 11px 'Outfit',sans-serif;letter-spacing:.4px;text-transform:uppercase;padding:8px 10px;border-bottom:2px solid #DDE1E9;}
.ga4-bank-table td{padding:8px 10px;border-bottom:1px solid #eef0f4;vertical-align:middle;}
.ga4-bank-table tr:hover td{background:#F7F8FA;}
.ga4-bank-table .mono{font-variant-numeric:tabular-nums;font-weight:600;}
.ga4-bank-why{color:#4A5568;font-size:12px;}
.ga4-bank-conf{display:inline-block;padding:2px 8px;border-radius:10px;font:700 11px 'Outfit',sans-serif;font-variant-numeric:tabular-nums;color:#fff;}
.ga4-bank-conf--high{background:#1A7A4A;}
.ga4-bank-conf--medium{background:#B7770D;}
.ga4-bank-conf--low{background:#8A94A6;}
.ga4-bank-actions{white-space:nowrap;}
.ga4-bank-actions .ga4-est-btn{padding:5px 10px;font-size:12px;}
.ga4-bank-empty{margin:18px 0;padding:20px;background:#fff;border:1px dashed #DDE1E9;border-radius:8px;color:#8A94A6;text-align:center;font:500 13px 'Outfit',sans-serif;}
/* Task 1 (17 Jun 2026): Delete button in the appointment modal command bar.
Auto-flow columns so the optional Delete fits one row (5 or 6 buttons);
red treatment so the destructive action reads clearly. */
.ga4-appt-commandbar {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(92px, 1fr);
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar [data-appt-delete] {
border-color: #a32b1c;
background: linear-gradient(180deg, #d9614c, #b5301d);
color: #ffffff;
}
body:has(.autodiag-mint-calendar) .ga4-appt-commandbar [data-appt-delete]:hover {
background: linear-gradient(180deg, #c8513c, #9f2818);
color: #ffffff;
}
/* Task 3 (17 Jun 2026): calendar hover glance card (work description + details). */
.ga4-cal-hovercard {
position: fixed;
z-index: 60;
display: none;
max-width: 300px;
padding: 10px 12px;
border: 1px solid #cfe0d8;
border-radius: 10px;
background: #ffffff;
color: #1a2230;
box-shadow: 0 8px 24px rgba(8, 40, 30, 0.18);
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
line-height: 1.4;
pointer-events: none;
}
.ga4-cal-hovercard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ga4-cal-hovercard-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.ga4-cal-hovercard-doc { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #1d4ed8; color: #fff; }
.ga4-cal-hovercard-type { color: #5a6675; font-weight: 600; margin-bottom: 6px; }
.ga4-cal-hovercard-row { margin-bottom: 2px; }
.ga4-cal-hovercard-row b { color: #5a6675; font-weight: 700; margin-right: 4px; }
.ga4-cal-hovercard-desc { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #dfe6e1; white-space: pre-wrap; }
.ga4-cal-hovercard-empty { color: #97a2ad; font-style: italic; }
/* Task 2 (17 Jun 2026): larger, more readable document text on the
estimate / invoice / job-sheet open view (workshop found it too small). */
.ga4-doc-screen { font-size: 14px; }
.ga4-doc-table th, .ga4-doc-table td { font-size: 14.5px; }
.ga4-doc-row label { font-size: 13.5px; }
.ga4-doc-row input, .ga4-doc-row select { font-size: 14.5px; }
.ga4-doc-side { font-size: 13.5px; }
.side-row input, .side-row select { font-size: 14px; }
/* Task 2 follow-up (17 Jun 2026): match .autodiag-mint-doc theme specificity
so the label/value size bump actually wins the cascade. */
.autodiag-mint-doc .ga4-doc-row label,
.autodiag-mint-doc .side-row label { font-size: 13.5px; }
.autodiag-mint-doc .ga4-doc-row input,
.autodiag-mint-doc .ga4-doc-row select,
.autodiag-mint-doc .side-row input,
.autodiag-mint-doc .side-row select { font-size: 14.5px; }
/* Task 2 (17 Jun 2026): subtle attention pulse for empty Mileage / Email. */
@keyframes ga4-pulse-empty {
0%, 100% { box-shadow: 0 0 0 0 rgba(217,138,40,0); }
50% { box-shadow: 0 0 0 3px rgba(217,138,40,0.30); }
}
.ga4-pulse-empty {
animation: ga4-pulse-empty 1.7s ease-in-out infinite;
border-color: #d98a28 !important;
}
@media print { .ga4-pulse-empty { animation: none !important; box-shadow: none !important; } }
@media (prefers-reduced-motion: reduce) {
.ga4-pulse-empty { animation: none; box-shadow: 0 0 0 2px rgba(217,138,40,0.30); }
}
/* Task 1 (17 Jun 2026): Veh History sub-tabs on the appointment modal. */
.ga4-appt-subtabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.ga4-appt-subtabs button {
font: 600 12px 'Outfit', sans-serif;
padding: 4px 11px;
border: 1px solid #cfe0d8;
border-radius: 7px;
background: #f3f7f5;
color: #3a4a43;
cursor: pointer;
}
.ga4-appt-subtabs button.active { background: #1d9e75; border-color: #178a64; color: #ffffff; }
.ga4-appt-subpane[hidden] { display: none; }
/* Task 1b (17 Jun 2026): converted-to lineage label on a doc title. */
.ga4-doc-converted { color: #1a7a4a; background: #e7f5ee; border: 1px solid #bfe3ce; border-radius: 6px; padding: 1px 8px; font-weight: 700; }
/* 18 Jun 2026: calendar cards - reg box uses Outfit (drop the JetBrains
Mono monospace the workshop disliked) with tabular figures, and bump the
card body text up a notch for legibility. Appended last so it wins the
cascade; sizes kept under the compact (1h) card clip threshold. */
.autodiag-mint-calendar .ga4-modern-event-reg {
font-family: "Outfit", "Segoe UI", sans-serif;
font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: 14px;
letter-spacing: 0.4px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-reg {
font-size: 13px;
}
.autodiag-mint-calendar .ga4-modern-event-customer {
font-size: 12px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-customer {
font-size: 11px;
}
.autodiag-mint-calendar .ga4-modern-event-vehicle,
.autodiag-mint-calendar .ga4-modern-event-phone {
font-size: 11px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-vehicle {
font-size: 10px;
}
.autodiag-mint-calendar .ga4-modern-event-time {
font-size: 12.5px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-time {
font-size: 11.5px;
}
.autodiag-mint-calendar .ga4-modern-event-type {
font-size: 9.5px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-type {
font-size: 8.5px;
}
/* Document print/PDF compaction (18 Jun 2026 print compaction): the doc
wasted vertical space (oversized wordmark + big summary numbers, loose
header cards, section gaps) so a normal estimate pushed the totals block
onto an empty page 2. Pull everything in so a typical doc fits one page;
print/PDF only (.ga4-sty-*), the on-screen .ga4-doc-* view is untouched.
Appended after the header-tighten block so these win. Spacing/size only. */
.ga4-sty-doc { font-size: 12px; line-height: 1.3; }
.ga4-sty-company h1 { font-size: 31px; line-height: 0.95; }
.ga4-sty-kicker { margin: 0 0 4px; letter-spacing: 1.8px; }
.ga4-sty-company .ga4-sty-address { margin-top: 5px; line-height: 1.35; font-size: 11px; }
.ga4-sty-contact { padding: 4px 0 2px 18px; font-size: 11px; }
.ga4-sty-contact p { margin: 0 0 4px; }
.ga4-sty-letterhead { padding: 2px 0 6px; }
.ga4-sty-band { margin: 7px 0 9px; }
.ga4-sty-addr { padding: 6px 0 8px; }
.ga4-sty-sechead { margin: 0 0 5px; }
.ga4-sty-customer { padding: 7px 13px 6px 13px; }
.ga4-sty-customer p { margin: 0 0 2px; }
.ga4-sty-customer .ga4-sty-sechead { margin-bottom: 5px; }
.ga4-sty-meta { padding: 7px 14px 7px; }
.ga4-sty-meta-title { margin-bottom: 5px; }
.ga4-sty-meta-title strong:first-child { font-size: 11px; letter-spacing: 2.2px; }
.ga4-sty-meta-title .ga4-sty-num { font-size: 20px; }
.ga4-sty-meta-amount { margin: 0 0 5px; padding: 5px 0; }
.ga4-sty-meta-amount strong { font-size: 18px; }
.ga4-sty-meta > div:not(.ga4-sty-meta-title):not(.ga4-sty-meta-amount) { margin: 2px 0; }
.ga4-sty-vehicle { margin-bottom: 8px; }
.ga4-sty-vehicle td { padding: 4px 8px; }
.ga4-sty-vehicle td.ga4-sty-reg { font-size: 13px; }
.ga4-sty-jobdesc { margin-bottom: 8px; line-height: 1.32; font-size: 11.3px; }
.ga4-sty-work { margin-bottom: 8px; padding-top: 6px; }
.ga4-sty-work .ga4-sty-sechead { margin-bottom: 6px; }
.ga4-sty-lines { margin-bottom: 8px; font-size: 11.3px; }
.ga4-sty-lines td { padding: 4px 8px; }
.ga4-sty-totals { margin-top: 5px; }
.ga4-sty-totals th { padding: 4px 12px; font-size: 11.5px; }
.ga4-sty-totals td { padding: 4px 12px; }
.ga4-sty-totals tr.total th, .ga4-sty-totals tr.total td { font-size: 14px; }
/* 19 Jun 2026: work description on the calendar pill (GA4 parity). */
.autodiag-mint-calendar .ga4-modern-event-desc {
text-transform: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 2px;
font-size: 11px;
font-weight: 600;
line-height: 1.14;
color: color-mix(in srgb, currentColor 78%, #000000);
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-desc {
-webkit-line-clamp: 1;
font-size: 10px;
}
/* 19 Jun 2026: Vehicles-on-site pill + modal (calendar header). */
.autodiag-mint-calendar .ga4-cal-onsite-pill {
display: inline-flex; align-items: center; gap: 6px;
min-height: 30px; padding: 4px 12px; margin-right: 6px;
border: 1px solid var(--border, #DDE1E9); border-radius: 999px;
background: #ffffff; color: var(--text, #1A2033);
font: inherit; font-weight: 700; font-size: 12px; cursor: pointer;
box-shadow: 0 1px 3px rgba(26, 32, 51, 0.08);
}
.autodiag-mint-calendar .ga4-cal-onsite-pill:hover { background: #F4F6F9; border-color: #c7ccd6; }
.autodiag-mint-calendar .ga4-cal-onsite-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
background: #e11d2a; color: #fff; font-weight: 800; font-size: 11px;
font-variant-numeric: tabular-nums;
}
.ga4-onsite-modal-box { width: min(440px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
.ga4-onsite-modal-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ga4-onsite-close { border: none; background: transparent; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 4px; }
.ga4-onsite-close:hover { color: #1A2033; }
.ga4-onsite-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ga4-onsite-row {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
width: 100%; text-align: left; padding: 9px 12px;
border: 1px solid var(--border, #DDE1E9); border-radius: 10px; background: #fff;
font: inherit; cursor: pointer;
}
.ga4-onsite-row:hover { background: #F4F6F9; border-color: #c7ccd6; }
.ga4-onsite-reg {
font-weight: 800; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 6px;
background: #FCE96A; color: #1A2033; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ga4-onsite-mid { display: flex; flex-direction: column; min-width: 0; }
.ga4-onsite-vehicle { font-weight: 700; font-size: 12.5px; color: #1A2033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga4-onsite-cust { font-size: 11.5px; color: #4A5568; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga4-onsite-since { font-size: 11px; color: #8A94A6; white-space: nowrap; }
.ga4-onsite-empty { padding: 26px 12px; text-align: center; color: #8A94A6; font-size: 13px; }
/* short-card-desc-hide-20260622: short (compact) calendar cards have no room for the work
description - cramming it clips mid-line at the border and mashes the card.
Hide it on compact cards; the hover glance card still shows it in full. */
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-desc { display: none; }
/* output-customer-clean-20260623: customer print/PDF output should not carry
the small decorative strike above the service strapline. */
.ga4-sty-letterhead::before {
content: none;
display: none;
}
.ga4-tplset-check {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
color: var(--ink, #182330);
}
.ga4-tplset-check input {
width: auto;
min-width: 0;
}
/* compact-card-laptop-fit-20260623: one-hour day-view tickets on narrower
laptop widths need to keep the booking readable without mashing lines. */
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-vehicle,
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-phone,
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-desc {
display: none;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact {
gap: 1px;
padding-top: 4px;
padding-bottom: 4px;
}
.autodiag-mint-calendar .ga4-modern-ticket-compact .ga4-modern-event-customer { line-height: 1.05; }
/* appointment-engine-fields-separate-20260623b: keep Engine Code and Engine No
as two separate side-by-side input boxes, not a full-width stacked block. */
body:has(.autodiag-mint-calendar) .ga4-appt-row.ga4-appt-engine-row {
grid-template-columns: 100px minmax(0, 1fr) 96px minmax(0, 1fr);
column-gap: 14px;
}
/* ===== workshop-todos-20260709 =================================================
Calendar toolbar to-do pill + popup + booking-linked card pills.
Reuses .ga4-doc-modal / .ga4-doc-modal-box for overlay + positioning, mirrors
the on-site pill sizing. Self-contained; appended at EOF. */
.ga4-cal-todo-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border: 1px solid #d9a441; border-radius: 999px;
background: #fbf4e6; color: #8a5a10; font-weight: 700; font-size: 13px;
cursor: pointer; line-height: 1; white-space: nowrap;
}
.ga4-cal-todo-pill:hover { background: #f6e9cf; }
.ga4-cal-todo-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: #d9a441; color: #fff; font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ga4-cal-todo-pill[data-todo-empty="1"] { border-color: #cfd6e2; background: #f3f5f9; color: #5b6577; }
.ga4-cal-todo-pill[data-todo-empty="1"] .ga4-cal-todo-count { background: #aeb6c4; }
.ga4-todo-modal-box { width: 460px; max-width: 94vw; }
.ga4-todo-modal-title { display: flex; align-items: center; justify-content: space-between; }
.ga4-todo-close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.ga4-todo-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
.ga4-todo-tab {
border: 1px solid #cfd6e2; background: #fff; border-radius: 8px;
padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: #4a5568;
}
.ga4-todo-tab.is-active { background: #1a2033; border-color: #1a2033; color: #fff; }
.ga4-todo-add-row { display: flex; gap: 8px; padding: 12px 14px; align-items: center; }
.ga4-todo-input {
flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1.5px solid #cfd6e2;
border-radius: 8px; font-size: 14px;
}
.ga4-todo-input:focus { outline: none; border-color: #d9a441; box-shadow: 0 0 0 3px rgba(217,164,65,0.16); }
.ga4-todo-cat { padding: 8px 8px; border: 1.5px solid #cfd6e2; border-radius: 8px; font-size: 13px; background: #fff; }
.ga4-todo-add-btn {
border: 0; background: #c0392b; color: #fff; border-radius: 8px;
padding: 8px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.ga4-todo-add-btn:hover { background: #a93226; }
.ga4-todo-list { padding: 0 14px 14px; max-height: 48vh; overflow-y: auto; }
.ga4-todo-empty { padding: 22px 6px; text-align: center; color: #8a94a6; font-size: 14px; }
.ga4-todo-item {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px;
border-bottom: 1px solid #edf0f5;
}
.ga4-todo-item:last-child { border-bottom: 0; }
.ga4-todo-check {
flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid #b9c1cf;
border-radius: 6px; background: #fff; cursor: pointer; display: inline-flex;
align-items: center; justify-content: center; color: #1a7a4a; font-size: 14px; line-height: 1;
}
.ga4-todo-item.is-done .ga4-todo-check { background: #1a7a4a; border-color: #1a7a4a; color: #fff; }
.ga4-todo-main { flex: 1 1 auto; min-width: 0; }
.ga4-todo-body { font-size: 14px; color: #1a2033; word-break: break-word; }
.ga4-todo-item.is-done .ga4-todo-body { text-decoration: line-through; color: #8a94a6; }
.ga4-todo-sub { margin-top: 3px; font-size: 11px; color: #8a94a6; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ga4-todo-tag {
display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .02em;
}
.ga4-todo-tag--parts { background: #e7f0ff; color: #1d4ed8; }
.ga4-todo-tag--docs { background: #efe7ff; color: #6d28d9; }
.ga4-todo-tag--customer { background: #e6f6ec; color: #1a7a4a; }
.ga4-todo-tag--general { background: #eef1f5; color: #4a5568; }
.ga4-todo-tag--booking { background: #fbf4e6; color: #8a5a10; }
.ga4-todo-del { border: 0; background: transparent; color: #b9c1cf; cursor: pointer; font-size: 13px; padding: 2px 4px; }
.ga4-todo-del:hover { color: #c0392b; }
/* booking-card pills */
.ga4-modern-todopill {
display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10px;
font-weight: 800; letter-spacing: .02em; line-height: 1.5; margin-left: 4px; vertical-align: middle;
}
.ga4-modern-todopill--count { background: #d9a441; color: #fff; }
.ga4-modern-todopill--parts { background: #1d4ed8; color: #fff; }
.ga4-modern-todopill--docs { background: #6d28d9; color: #fff; }
.ga4-modern-todopill--customer { background: #1a7a4a; color: #fff; }
.ga4-modern-todo-add {
border: 0; background: rgba(217,164,65,0.9); color: #fff; width: 18px; height: 18px;
border-radius: 5px; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer;
margin-left: 4px; vertical-align: middle; padding: 0;
}
.ga4-modern-todo-add:hover { background: #c0392b; }
/* ===== end workshop-todos ===================================================== */