/* ============================================================================
ABmobil Tools - stylesheet. Layout after crm.webp.si (Filament 4), the look
"Modern" (30.09.2026): Inter, indigo primary, slate grays, navy sidebar and
primary buttons, white cards with a tinted header (Modern layer at the end).
No framework. Dark mode: the same tokens get dark values under
prefers-color-scheme or html[data-theme=dark] (user menu).
============================================================================ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;
--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--gray-950:#0f172a;
--primary-50:#f0f0ff;--primary-100:#e2e1fe;--primary-500:#7c73f5;--primary-600:#6358e8;--primary-700:#5146d0;
--success-50:#f0fdf4;--success-600:#16a34a;--success-700:#15803d;
--warning-50:#fffbeb;--warning-600:#d97706;--warning-700:#b45309;
--danger-50:#fef2f2;--danger-500:#ef4444;--danger-600:#dc2626;--danger-700:#b91c1c;
--info-50:#f0f9ff;--info-600:#0284c7;--info-700:#0369a1;
--indigo-50:#eef2ff;--indigo-600:#4f46e5;--indigo-700:#4338ca;
--violet-50:#f5f3ff;--violet-600:#7c3aed;--violet-700:#6d28d9;
--ring:rgba(15,23,42,.07);--ring-strong:rgba(15,23,42,.13);
--shadow-sm:0 1px 2px 0 rgba(15,23,42,.04);
--shadow:0 2px 6px -1px rgba(15,23,42,.07),0 1px 2px -1px rgba(15,23,42,.05);
--shadow-lg:0 16px 32px -8px rgba(15,23,42,.16),0 4px 8px -4px rgba(15,23,42,.08);
--radius-md:.4375rem;--radius-lg:.625rem;--radius-xl:1rem;
--sidebar-w:16.5rem;--topbar-h:4rem;
--bg:#eef1f7;--surface:#fff;--well:#e5e9f2;--overlay:rgba(15,23,42,.55);--inset-ring:rgba(3,7,18,.06);--code-bg:rgba(9,9,11,.06);
--btn-primary:#6358e8;--btn-primary-hover:#7c73f5;--btn-danger:#dc2626;--btn-danger-hover:#ef4444;--btn-success:#16a34a;--btn-success-hover:#22c55e;--btn-orange:#ea580c;--btn-orange-hover:#f97316;
--btn-main:#141b34;--btn-main-hover:#232d52;
--card-head:#f7f8fc;--card-shadow:0 0 0 1px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04),0 6px 16px -6px rgba(15,23,42,.10);
--sb-bg:#141b34;--sb-text:#b3bbd6;--sb-muted:#6f7aa0;--sb-hover:rgba(255,255,255,.05);--sb-border:rgba(255,255,255,.07);
--sb-active-bg:rgba(124,115,245,.2);--sb-active:#cdc9ff;
/* Light unless the dark rules below say otherwise, so scrollbars and checkboxes follow the chosen theme, not the system's */
color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--gray-950);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:.875rem;line-height:1.25rem}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
svg.i{width:1.5rem;height:1.5rem;flex:none}
svg.i-s{width:1.25rem;height:1.25rem;flex:none}
svg.i-xs{width:1rem;height:1rem;flex:none}
.muted{color:var(--gray-500)}
.text-xs{font-size:.75rem;line-height:1rem}
.nowrap{white-space:nowrap}
.mt{margin-top:1.5rem}.mt-s{margin-top:.5rem}
.h2{font-size:1rem;line-height:1.5rem;font-weight:600;margin:0 0 .75rem}
.list{margin:.5rem 0 0;padding-left:1.25rem;line-height:1.7}
.code{font-size:.8rem;padding:.1rem .3rem;border-radius:.25rem;background:var(--code-bg)}
.pre{margin:.5rem 0 0;padding:.75rem;border-radius:var(--radius-lg);background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--ring);font-size:.75rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.details summary{cursor:pointer;color:var(--gray-500);font-size:.75rem;margin-top:.25rem}
/* ----- layout ----- */
.app{display:flex;min-height:100dvh}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--surface);box-shadow:1px 0 0 var(--ring);display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;z-index:30}
.sidebar-header{height:var(--topbar-h);display:flex;align-items:center;padding:0 1.5rem;gap:.75rem;flex:none}
.brand{font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:var(--gray-950);display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.sidebar-nav{flex:1;overflow-y:auto;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.75rem}
.nav-group{display:flex;flex-direction:column;gap:.25rem}
.nav-group-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--gray-500);padding:0 .5rem;margin-bottom:.25rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:var(--radius-lg);color:var(--gray-700);font-weight:500;width:100%;text-align:left}
.nav-item svg{color:var(--gray-400)}
.nav-item:hover{background:var(--gray-100)}
.nav-item.active{background:var(--gray-100);color:var(--primary-600)}
.nav-item.active svg{color:var(--primary-600)}
.nav-badge{margin-left:auto;font-size:.75rem;font-weight:500;padding:.125rem .5rem;border-radius:var(--radius-md);background:var(--warning-50);color:var(--warning-600);box-shadow:inset 0 0 0 1px rgba(217,119,6,.1)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:var(--overlay);z-index:25}
.brand-short{display:none} /* the folded sidebar's name (sidebar-mini at the end) */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:var(--surface);box-shadow:0 1px 0 var(--ring),var(--shadow-sm);display:flex;align-items:center;gap:1rem;padding:0 2rem;position:sticky;top:0;z-index:20}
.topbar .spacer{flex:1}
.topbar-review{flex:none;white-space:nowrap} /* Review pending leads (an admin, while Draft Leads wait) */
@media (max-width:640px){.topbar-review .lbl{display:none}}
/* green with a pulsing red dot in its corner and a green count (request 05.10.2026) */
.topbar-review{position:relative}
.topbar-review .pulse-dot{position:absolute;top:-.25rem;right:-.25rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--danger-600);box-shadow:0 0 0 2px #fff;animation:review-pulse 1.6s ease-out infinite}
@keyframes review-pulse{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(220,38,38,.6)}70%{box-shadow:0 0 0 2px #fff,0 0 0 .55rem rgba(220,38,38,0)}100%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(220,38,38,0)}}
@media (prefers-reduced-motion:reduce){.topbar-review .pulse-dot{animation:none}}
.icon-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-lg);color:var(--gray-400)}
.icon-btn:hover{background:var(--gray-100);color:var(--gray-600)}
.avatar{width:2rem;height:2rem;border-radius:9999px;background:var(--gray-200);color:var(--gray-700);display:grid;place-items:center;font-size:.75rem;font-weight:600;flex:none}
.avatar.sm{width:1.5rem;height:1.5rem;font-size:.625rem}
.content{padding:2rem;max-width:120rem;width:100%;margin:0;display:flex;flex-direction:column;gap:2rem} /* left-aligned: every page (the board too) keeps the same 2rem from the sidebar; 120rem caps only very wide screens (request 25.09.2026, was 96rem centred) */
.banner-impersonation{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-radius:var(--radius-lg);background:var(--warning-50);color:var(--warning-700);box-shadow:inset 0 0 0 1px rgba(217,119,6,.15)}
/* ----- auth layout (sign-in, install, errors) ----- */
body.auth{display:flex;min-height:100dvh;align-items:center;justify-content:center}
.auth-main{width:100%;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{width:100%;max-width:28rem;background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 0 0 1px var(--ring),var(--shadow-sm);padding:2.5rem}
.auth-card-wide{max-width:44rem}
.auth-card h1{font-size:1.5rem;line-height:2rem;font-weight:700;letter-spacing:-.025em;margin:1.5rem 0 0}
.auth-brand{display:flex;align-items:center;gap:.6rem;font-size:1.125rem;font-weight:700;letter-spacing:-.025em}
.alert{padding:.75rem 1rem;border-radius:var(--radius-lg);font-size:.875rem;line-height:1.4}
.alert-error{background:var(--danger-50);color:var(--danger-700);box-shadow:inset 0 0 0 1px rgba(220,38,38,.15)}
.alert-info{background:var(--info-50);color:var(--info-700);box-shadow:inset 0 0 0 1px rgba(2,132,199,.15)}
.alert-success{background:var(--success-50);color:var(--success-700);box-shadow:inset 0 0 0 1px rgba(22,163,74,.15)}
.alert .list{margin:0}
/* ----- page header ----- */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.breadcrumbs{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--gray-500);margin-bottom:.5rem}
.breadcrumbs svg{color:var(--gray-400)}
/* Variants and Versions on a calculation (requests 05.10.2026) */
.calc-variants{display:inline-flex;gap:.25rem;margin-left:.75rem}
.calc-variants a,.calc-variants .on{padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;line-height:1.25rem;box-shadow:inset 0 0 0 1px var(--gray-200);color:var(--gray-700)}
.calc-variants a:hover{background:var(--gray-50);color:var(--gray-950)}
.calc-variants .on{background:var(--gray-950);color:var(--surface);box-shadow:none}
.calc-versions{display:flex;flex-direction:column;gap:.25rem}
.calc-ver{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;margin:0 -.5rem;padding:.5rem;border-radius:var(--radius-lg);width:calc(100% + 1rem)}
.calc-ver:hover{background:var(--gray-50)}
.calc-ver-top{display:flex;justify-content:space-between;gap:.5rem;font-size:.875rem;font-variant-numeric:tabular-nums}
.calc-ver-d{display:block;margin-top:.125rem;font-size:.75rem;color:var(--gray-500)}
.ver-table{margin-top:.75rem}
.ver-table td,.ver-table th{padding:.5rem .75rem;font-size:.8125rem}
.ver-table td:not(:first-child),.ver-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ver-table tr.ver-rent td{font-weight:500;color:var(--gray-950)}
.breadcrumbs .cur{color:var(--gray-950)}
/* Breadcrumbs without a title (the calculation): centred on the buttons' line (request 25.09.2026) */
.page-header:has(> div > .breadcrumbs:only-child){align-items:center}
.breadcrumbs:only-child{margin-bottom:0}
h1{font-size:1.875rem;line-height:2.25rem;font-weight:700;letter-spacing:-.025em;margin:0;color:var(--gray-950)}
.subheading{margin:.25rem 0 0;color:var(--gray-500);font-size:.875rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
/* ----- buttons ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;border-radius:var(--radius-lg);padding:.5rem .75rem;font-size:.875rem;font-weight:500;line-height:1.25rem;box-shadow:var(--shadow-sm);transition:background-color .1s,color .1s;white-space:nowrap}
.btn svg{width:1.25rem;height:1.25rem}
.btn-primary{background:var(--btn-main);color:#fff} /* navy like the sidebar (request 30.09.2026); stages and the timeline keep --btn-primary (indigo) */
.btn-primary:hover{background:var(--btn-main-hover)}
.btn-gray{background:var(--surface);color:var(--gray-950);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm)}
.btn-gray:hover{background:var(--gray-50)}
.btn-danger{background:var(--btn-danger);color:#fff}
.btn-danger:hover{background:var(--btn-danger-hover)}
.btn-success{background:var(--btn-success);color:#fff}
.btn-success:hover{background:var(--btn-success-hover)}
.btn-orange{background:var(--btn-orange);color:#fff} /* Draft Lead: Stop neplačniki (request 29.09.2026) */
.btn-orange:hover{background:var(--btn-orange-hover)}
.btn[hidden]{display:none}
.btn-sm{padding:.25rem .5rem;font-size:.75rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:default}
.btn-gray[disabled]:hover{background:var(--surface)}
.btn-gray-danger{color:var(--danger-600)} /* Delete as a plain button (the calculation, request 30.09.2026) */
.btn-gray-danger:hover{background:var(--danger-50)}
.link{font-size:.875rem;font-weight:600;color:var(--primary-600)}
.link:hover{color:var(--primary-500)}
.link-gray{font-size:.875rem;font-weight:600;color:var(--gray-700)}
.link-gray:hover{color:var(--gray-950)}
.link-danger{font-size:.875rem;font-weight:600;color:var(--danger-600)}
.link-danger:hover{color:var(--danger-500)}
/* ----- badges ----- */
.badge{display:inline-flex;align-items:center;gap:.25rem;min-width:1.5rem;border-radius:var(--radius-md);padding:.25rem .5rem;font-size:.75rem;font-weight:500;line-height:1rem;white-space:nowrap}
.b-gray{background:var(--gray-50);color:var(--gray-600);box-shadow:inset 0 0 0 1px rgba(82,82,91,.1)}
.b-dark{background:var(--gray-100);color:var(--gray-700);box-shadow:inset 0 0 0 1px rgba(63,63,70,.15)}
.b-info{background:var(--info-50);color:var(--info-600);box-shadow:inset 0 0 0 1px rgba(2,132,199,.1)}
.b-indigo{background:var(--indigo-50);color:var(--indigo-600);box-shadow:inset 0 0 0 1px rgba(79,70,229,.1)}
.b-primary{background:var(--primary-50);color:var(--primary-600);box-shadow:inset 0 0 0 1px rgba(37,99,235,.1)}
.b-warning{background:var(--warning-50);color:var(--warning-600);box-shadow:inset 0 0 0 1px rgba(217,119,6,.1)}
.b-violet{background:var(--violet-50);color:var(--violet-600);box-shadow:inset 0 0 0 1px rgba(124,58,237,.1)}
.b-success{background:var(--success-50);color:var(--success-600);box-shadow:inset 0 0 0 1px rgba(22,163,74,.1)}
.b-danger{background:var(--danger-50);color:var(--danger-600);box-shadow:inset 0 0 0 1px rgba(220,38,38,.1)}
/* ----- cards / sections ----- */
.card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 0 0 1px var(--ring),var(--shadow-sm)}
.section-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem}
.section-header h3{margin:0;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--gray-950);flex:1}
.section-header .desc{font-size:.875rem;color:var(--gray-500);margin:0}
.section-body{border-top:1px solid var(--gray-200);padding:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.entry .l{font-size:.875rem;font-weight:500;color:var(--gray-500);margin-bottom:.25rem}
.entry .v{font-size:.875rem;color:var(--gray-950)}
.entry .v a{color:var(--primary-600);font-weight:500}
.entry.span-2{grid-column:span 2}
.entry.span-3{grid-column:span 3}
/* Labels above values like Details, four in a row (the confirmed client on Review draft) */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.item{display:flex;align-items:center;gap:1.5rem}
.item>.grid-4{flex:1;min-width:0}
.item>.row-actions{flex:none}
.item .v{overflow-wrap:anywhere}
.item .v .badge-after{margin-left:.5rem}
.item[data-href]{cursor:pointer}
.item[data-href]:hover{background:var(--gray-50)}
.card>.item:last-child{border-radius:0 0 var(--radius-xl) var(--radius-xl)}
/* Radio options with a title and a line of explanation (Delete company, offer Type, Add flex offer) */
.choices{display:flex;flex-direction:column;gap:.75rem}
.choice{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem 1rem;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--gray-200);cursor:pointer}
.choice:hover{background:var(--gray-50)}
.choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--primary-600);background:var(--primary-50)}
.choice:has(input:disabled){cursor:default;opacity:.6}
.choice[hidden]{display:none}
.dup-warn{display:flex;gap:.35rem;align-items:flex-start;font-size:.8125rem;color:var(--warning-700)} /* Duplicate calculation: what the copy changes on the deal */
.dup-warn .i-xs{flex:none;margin-top:.15rem}
.choice input{margin:.125rem 0 0;width:1rem;height:1rem;accent-color:var(--primary-600);flex:none}
.choice>span{display:flex;flex-direction:column;gap:.25rem}
/* Inside a form field the field's label and input rules must not reach the options */
.field .choice{display:flex;margin:0;font-weight:400;color:inherit}
.field .choice input{flex:none;width:1rem;height:1rem;padding:0;margin:.125rem 0 0}
.choices-row{flex-direction:row;flex-wrap:wrap}
.choices-row .choice{flex:1 1 14rem;align-items:center}
.field .choices-row .choice input{margin:0}
/* Add flex offer: one row per vehicle, the package price on the right */
.pick-list{max-height:22rem;overflow-y:auto;padding:.125rem;gap:.5rem}
.pick-list .choice{align-items:center}
.pick-list .choice input{margin:0}
.pick-list .choice .muted{font-size:.875rem}
.pick-list .choice b{font-weight:600}
.pick-list .choice-price{margin-left:auto;padding-left:1rem;font-weight:600;white-space:nowrap;color:var(--gray-950)}
@media (max-width:1180px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}.item{flex-direction:column;align-items:flex-start}}
/* ----- stats / stage grid ----- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.stats-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* Dashboard: the four counters and Deal value (request 13.10.2026); the narrow screens below as .stats */
.stat{padding:1.5rem}
.stat .l{font-size:.875rem;font-weight:500;color:var(--gray-500)}
.stat .n{font-size:1.875rem;line-height:2.25rem;font-weight:600;letter-spacing:-.025em;margin-top:.25rem}
.stat .d{font-size:.875rem;color:var(--gray-500);margin-top:.25rem;display:flex;align-items:center;gap:.25rem}
.stat .d.up{color:var(--success-600)}
/* ----- forms ----- */
.form{display:flex;flex-direction:column;gap:1.25rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
.form-grid .span-2{grid-column:span 2}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid .span-all{grid-column:1/-1}
.field label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-950);margin-bottom:.5rem}
.field label .req{color:var(--danger-600)}
.field .field-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem} /* a label with a checkbox on its right (Process inquiry: Client name · Private person) */
.field .field-head label{margin-bottom:0}
.addr-one{grid-column:1 / -1} /* the one Address field (app.js initAddress) takes the row of Address, Postal code and City */
.form-grid.cols-4 .addr-by-tax>.addr-one{grid-column:span 3} /* Draft Lead, New company: the one Address field, the tax number right of it (request 29.09.2026) */
.form-grid.cols-4 .addr-by-tax:has(>.tax-field[hidden])>.addr-one{grid-column:1 / -1} /* New company, a private person: no tax number */
form[data-cw-first]:not(.cw-open) [data-furs].span-3{grid-column:span 3} /* New company: Client is a company stays right of the name */
.cw-switch{align-self:end;display:flex;align-items:center;min-height:2.05rem}.cw-switch .toggle{min-height:0} /* Draft Lead: Client is a company next to the name, level with its field */
.field .field-head .addr-manual{font-size:.875rem;font-weight:400;margin-left:auto}
.field .field-head .check{display:inline-flex;font-weight:400;margin-left:auto} /* stays at the right when the label beside it hides (Edit company: a private person has no CompanyWall link) */
.field .wrp{display:flex;align-items:center;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm)}
/* a value a register or CompanyWall fill overwrote (app.js pulseChanged, request 29.09.2026): pulses yellow, stays tinted until typed in */
.field .wrp.cw-changed{background:var(--warning-50);box-shadow:inset 0 0 0 1px rgba(217,119,6,.45),var(--shadow-sm);animation:cw-pulse 1s ease-in-out 3}
@keyframes cw-pulse{50%{box-shadow:inset 0 0 0 1px rgba(217,119,6,.7),0 0 0 .3rem rgba(251,191,36,.35)}}
@media (prefers-reduced-motion:reduce){.field .wrp.cw-changed{animation:none}}
.field .wrp:focus-within{box-shadow:inset 0 0 0 2px var(--primary-600)}
.field input,.field select,.field textarea{flex:1;border:0;background:transparent;padding:.4rem .75rem;font:inherit;color:var(--gray-950);min-width:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:0}
/* Form selects: the chevron of .select, set in by the field's own padding instead of the browser's arrow at the edge */
.field select,.ofield select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-size:1rem;cursor:pointer}
.field select{padding-right:2.5rem;background-position:right .75rem center}
.field select:disabled{cursor:default}
.field .suffix{padding:0 .75rem;color:var(--gray-500);border-left:1px solid var(--gray-200);align-self:stretch;display:flex;align-items:center}
.field .help{font-size:.875rem;color:var(--gray-500);margin-top:.5rem}
.field .help b{color:var(--gray-950);font-weight:500}
.field .err{font-size:.875rem;color:var(--danger-600);margin-top:.5rem}
/* New company: only the register search (or the CompanyWall link) until the fields open (form[data-cw-first].cw-open, app.js) */
form[data-cw-first]:not(.cw-open) [data-cw-details],form.cw-open [data-cw-manual]{display:none}
form[data-cw-first]:not(.cw-open) [data-furs]{grid-column:1 / -1} /* the name (the register search) takes the whole row until the fields open */
form[data-cw-first]:has([data-companywall] input[type="url"]:not(:placeholder-shown)) .cw-more{display:none} /* a CompanyWall link typed in: no Private person */
.cw-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem} /* Client is a company left, Enter the data manually right (request 29.09.2026) */
.cw-lines:not(:has(> [data-companywall-status]:not([hidden]), > [data-blockade]:not([hidden]), > button:not([hidden]))){display:none} /* Hide an empty report row, but keep its browser action visible. */
.blockade{display:inline-flex;align-items:center;gap:.375rem} /* red note about account blockades (blockade_note()) */
.cw-src{margin-left:.375rem;font-size:.75rem;font-weight:400;color:var(--gray-500)} /* "Source: CompanyWall" / "Source: Bizi" by Credit data (request 30.09.2026) */
.blockade .blk-y{display:block} /* one line per year with a blockade, "Blockade 2026" (request 29.09.2026) */
.blockade:has(.blk-y+.blk-y){align-items:flex-start}
.blockade:has(.blk-y+.blk-y) > .i-s{margin-top:.2rem}
.field .blockade{margin-top:.5rem}
.cw-blockade .blockade{grid-column:1 / -1;font-weight:600} /* New company: the blockades bold, on a row of their own under Revenue (request 29.09.2026) */
form:has([data-blockade-status]) .blockade{display:none!important} /* the blockade line by Credit data says it (request 29.09.2026: no second, red note); the note is still saved */
.input,.select{border:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm);padding:.4rem .75rem;font:inherit;color:var(--gray-950)}
.input:focus,.select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600)}
.select{padding-right:2rem;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem}
.check{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;color:var(--gray-950)}
.check input{width:1rem;height:1rem;border-radius:.25rem;accent-color:var(--primary-600)}
/* Add variant: what the copy keeps (request 06.10.2026) */
.keep-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem 1rem;margin-top:.875rem}
@media (max-width:480px){.keep-list{grid-template-columns:1fr}}
.search{position:relative;width:16rem;max-width:100%}
.search input{width:100%;border:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm);padding:.4rem .75rem .4rem 2.25rem;font:inherit}
.search input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600)}
.search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--gray-400)}
.page-header .search input{padding-top:.5rem;padding-bottom:.5rem}
/* ----- tables ----- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.5rem}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.table-wrap{overflow-x:auto}
.card>.table-wrap:first-child{border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.card>.table-wrap:first-child .t thead th{border-top:0}
table.t{width:100%;border-collapse:collapse;text-align:left}
.t thead{background:var(--gray-50)}
.t th{padding:.875rem .75rem;font-size:.875rem;font-weight:600;color:var(--gray-950);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.th-sort{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.th-sort svg{color:var(--gray-400);visibility:hidden}
.th-sort:hover svg,.th-sort:focus-visible svg,.th-sort.on svg{visibility:visible}
.th-sort.on svg{color:var(--gray-950)}
.t td{padding:1rem .75rem;font-size:.875rem;color:var(--gray-950);border-bottom:1px solid var(--gray-200);vertical-align:middle}
.t th:first-child,.t td:first-child{padding-left:1.5rem}
.t th:last-child,.t td:last-child{padding-right:1.5rem}
.t tbody tr:not(.no-link){cursor:pointer}
.t tbody tr:hover{background:var(--gray-50)}
.t tbody tr:last-child td{border-bottom:0}
.t .d{color:var(--gray-500);font-size:.875rem}
.t .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.t tfoot td{font-weight:600;border-bottom:0}
.t .warn{color:var(--warning-600);font-weight:500}
.t .bad{color:var(--danger-600);font-weight:500}
.t-compact td{padding:.5rem .5rem}
.t-compact td:first-child{padding-left:0}
.t-compact tr:first-child td{border-top:0}
.row-actions{display:flex;gap:.75rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.row-actions form{display:inline}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;font-size:.875rem;color:var(--gray-500);border-top:1px solid var(--gray-200)}
.pagination .pp{display:flex;align-items:center;gap:.5rem}
.owner{display:inline-flex;align-items:center;gap:.5rem}
.collapsed .section-body{display:none}
.ceo-view [data-ceo-fold]{display:none} /* the CEO's view of a calculation: only the groups the CEO decides on (request 26.09.2026) */
.calc-grid:not(.ceo-view) [data-ceo-only]{display:none}
/* The fields a CEO changes while checking (request 26.09.2026): light yellow, light green once changed in this round */
.ofield.ceo-edit .wrp{background:var(--warning-50);box-shadow:inset 0 0 0 1px rgba(217,119,6,.35),var(--shadow-sm)}
.ofield.ceo-changed .wrp{background:var(--success-50);box-shadow:inset 0 0 0 1px rgba(22,163,74,.4),var(--shadow-sm)} /* any field, also under Full calculation */
.ofield.ceo-changed .toggle{border-radius:var(--radius-lg);box-shadow:0 0 0 .35rem var(--success-50)}
.ofield.ceo-edit .wrp:focus-within,.ofield.ceo-changed .wrp:focus-within{box-shadow:inset 0 0 0 2px var(--primary-600)}
/* CEO Review: the approval and the changes per CEO (requests 26.09.2026) */
.ceo-review{display:flex;flex-direction:column;gap:.75rem;font-size:.875rem;padding:1rem 1.5rem 1.25rem} /* less room above than a section-body (request 30.09.2026) */
/* approved: a check in a green circle, waiting: a clock in an amber one (request 30.09.2026) */
.ceo-review .st{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:9999px;flex:none}
.ceo-review .st.ok{background:var(--success-600);color:#fff}
.ceo-review .st.wait{background:var(--warning-50);color:var(--warning-600);box-shadow:inset 0 0 0 1px rgba(217,119,6,.35)}
.ceo-review .st svg{width:.8125rem;height:.8125rem;stroke-width:3}
.ceo-review .st.wait svg{stroke-width:2.25}
.ceo-who+.ceo-who{padding-top:.75rem;border-top:1px solid var(--gray-200)}
.ceo-name{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem;margin-bottom:.375rem;font-weight:600;color:var(--gray-950)}
.ceo-name .muted{font-weight:400}
/* The offer at a glance on top of the CEO view (request 26.09.2026) */
.ceo-head{padding:1.25rem 1.5rem}
.ceo-car{font-size:1.125rem;line-height:1.75rem;font-weight:600;color:var(--gray-950)}
.ceo-terms{margin-top:.15rem;font-size:.875rem;color:var(--gray-600);font-variant-numeric:tabular-nums}
.ceo-view .row4.ruled{border-top:0;padding-top:0} /* no line between the study and its values in the CEO's view (request 26.09.2026) */
.ceo-files{display:flex;flex-direction:column;gap:.5rem;padding:.875rem 1rem} /* the CEO's attachments as links (request 26.09.2026) */
.ceo-file{display:flex;align-items:center;gap:.5rem;min-width:0}
.ceo-file .i-s{flex:none;color:var(--gray-400)}
.chev{transition:transform .15s;color:var(--gray-400)}
.collapsed .chev{transform:rotate(-90deg)}
/* ----- dropdowns ----- */
.dropdown-wrap{position:relative}
.dropdown{position:absolute;top:calc(100% + .5rem);right:0;z-index:40;width:14rem;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--ring),var(--shadow-lg);padding:.25rem;display:none}
.dropdown.open{display:block}
.dropdown .dl{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500);padding:.5rem .75rem .25rem}
.dropdown .di{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border-radius:var(--radius-md);font-size:.875rem;color:var(--gray-700);text-align:left}
.dropdown .di:hover{background:var(--gray-50);color:var(--gray-950)}
.dropdown .di.cur{color:var(--gray-400)}
.dropdown .di svg{width:1rem;height:1rem;color:var(--gray-400)}
.dropdown hr{border:0;border-top:1px solid var(--gray-200);margin:.25rem 0}
.dropdown .di.won{color:var(--success-600)}
.dropdown .di.lost{color:var(--danger-600)}
.dd-user{padding:.5rem .75rem}
.dd-name{font-size:.875rem;font-weight:500}
.dd-email{font-size:.75rem;color:var(--gray-500);overflow-wrap:anywhere}
/* ----- kanban (pipeline) ----- */
.notice{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-lg);background:var(--warning-50);color:var(--warning-700);box-shadow:inset 0 0 0 1px rgba(217,119,6,.15);font-size:.875rem}
.rev-changes{display:flex;flex-direction:column;gap:.125rem;margin-top:.375rem} /* a revised calculation: what changed against the version before (request 05.10.2026) */
.notice a,.notice button{font-weight:600;text-decoration:underline}
.notice-danger{background:var(--danger-50);color:var(--danger-700);box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)} /* Rejected customer (request 30.09.2026) */
/* The board fills the window below the page header (full width); the columns share it, 12rem at least,
so all six fit on a large screen and only a narrow one scrolls sideways; each column scrolls on its own under its heading */
.content:has(>.board){height:calc(100dvh - var(--topbar-h));min-height:32rem;max-width:none}
.board{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;align-items:stretch;flex:1;min-height:0}
.board,.col{scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}
.col{flex:1 1 0;min-width:12rem;background:var(--well);border-radius:var(--radius-xl);padding:.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:14rem;overflow-y:auto}
.col-h{display:flex;align-items:center;justify-content:space-between;padding:.5rem .5rem .25rem;font-size:.875rem;font-weight:600;color:var(--gray-950);position:sticky;top:0;z-index:2;background:inherit}
.col-h .cnt{font-weight:500;color:var(--gray-500);font-size:.75rem}
.qdots{display:inline-flex;gap:.3rem;margin-left:auto;margin-right:.5rem} /* Qualified Lead: Ready, Pending calculation, In approval as filter dots (request 30.09.2026) */
.qdot{width:.7rem;height:.7rem;border-radius:9999px;box-shadow:0 0 0 2px var(--well);transition:opacity .1s,box-shadow .1s}
.qdot.q-ready{background:var(--success-600)}.qdot.q-calc{background:var(--danger-600)}.qdot.q-approval{background:var(--warning-600)}
.qdot:hover{box-shadow:0 0 0 2px var(--well),0 0 0 3.5px var(--gray-300)}
.qdots.filtering .qdot{opacity:.3}
.qdots.filtering .qdot[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--well),0 0 0 3.5px currentColor}
.qdot.q-ready{color:var(--success-600)}.qdot.q-calc{color:var(--danger-600)}.qdot.q-approval{color:var(--warning-600)}
.kdraft{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--danger-600);margin-right:.4rem;vertical-align:.1em;flex:none} /* a deal with a draft calculation open: before the card title and in the Draft calculation filter (request 06.10.2026) */
.filter-check .kdraft{margin-right:0}
.kcard[hidden]{display:none}
.kcard .kb{display:flex} /* the task (To send, Follow-up, …) on its own line under the type (request 06.10.2026) */
.kcard .qbadge{padding:.05rem .4rem;font-size:.6875rem}
.col.won{background:var(--success-50)}
.col.lost{background:var(--danger-50)}
.kcard{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--ring),var(--shadow-sm);padding:.75rem;display:flex;flex-direction:column;gap:.25rem;position:relative;cursor:pointer} /* a click anywhere opens the deal, a drag moves it (app.js) */
.kcard:hover{box-shadow:0 0 0 1px var(--ring-strong),var(--shadow)}
.kcard.dragging{opacity:.5;transform:rotate(1.5deg)}
.kcard .kt{font-size:.875rem;font-weight:500;color:var(--gray-950);padding-right:1.5rem} /* the title: the vehicle (the company is under it, .ks) */
.kcard .ks{font-size:.875rem;color:var(--gray-600)}
.kcard .me{font-size:.75rem;color:var(--gray-500)}
.kcard .kt,.kcard .ks,.kcard .me{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* one line each; a long vehicle or company ends in … and shows whole in its title (request 25.09.2026) */
.kcard .ft{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.kcard .ft .days{margin-left:auto;font-size:.75rem;color:var(--gray-500)}
.kcard .ft .days.warn{color:var(--warning-600);font-weight:500}
.kcard .ft .days.bad{color:var(--danger-600);font-weight:500}
.kcard .menu-btn{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;border-radius:var(--radius-md);display:grid;place-items:center;color:var(--gray-400)}
.kcard .menu-btn:hover{background:var(--gray-100);color:var(--gray-700)}
.kcard .ft .owner{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--gray-600);min-width:0} /* the deal owner */
.kcard .dropdown{top:2rem;right:.5rem;width:13rem}
.col .drop-hint{border:2px dashed var(--gray-300);border-radius:var(--radius-lg);padding:1rem;text-align:center;color:var(--gray-400);font-size:.75rem;display:none}
.col.over .drop-hint{display:block}
/* While a card is dragged, Delete, Won and Lost rise from the bottom of the board as drop targets (request 25.09.2026, like Bigin) */
.content:has(>.board){position:relative}
.drop-bar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;gap:1.5rem;padding:1rem 2rem;background:var(--surface);box-shadow:0 -1px 0 var(--ring),0 -4px 12px -4px rgba(0,0,0,.08);transform:translateY(100%);opacity:0;visibility:hidden;transition:transform .15s ease-out,opacity .15s ease-out,visibility 0s .15s}
.drop-bar.show{transform:none;opacity:1;visibility:visible;transition:transform .15s ease-out,opacity .15s ease-out}
.drop-zone{flex:0 1 20rem;display:flex;align-items:center;justify-content:center;gap:.5rem;height:3rem;border:2px dashed var(--gray-300);border-radius:var(--radius-lg);font-size:.875rem;font-weight:500;color:var(--gray-700);transition:background-color .1s,color .1s}
.drop-zone svg{pointer-events:none}
.drop-zone.dz-won{border-color:var(--success-600)}
.drop-zone.dz-lost{border-color:var(--danger-600)}
.drop-zone.over{background:var(--well);color:var(--gray-950)}
.drop-zone.dz-won.over{background:var(--success-50);color:var(--success-700)}
.drop-zone.dz-lost.over{background:var(--danger-50);color:var(--danger-700)}
@media (prefers-reduced-motion:reduce){.drop-bar,.drop-bar.show{transition:none}}
/* Won and Lost start collapsed to a narrow strip with the name upright; a click on the heading opens or closes each (request 25.09.2026) */
.col-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:left}
.col-toggle svg{color:var(--gray-500)}
.col-toggle:hover svg{color:var(--gray-950)}
.col-toggle .ic-expand,.col.collapsed .col-toggle .ic-collapse{display:none}
.col.collapsed .col-toggle .ic-expand{display:block}
.col.collapsed{flex:0 0 2.75rem;min-width:2.75rem;padding:0;overflow:hidden}
.col.collapsed > :not(.col-h){display:none}
.col.collapsed .col-h{flex:1;padding:0;position:static;align-items:stretch}
.col.collapsed .col-toggle{writing-mode:vertical-rl;justify-content:flex-start;height:100%;padding:.75rem 0}
.col.collapsed .col-toggle svg{order:-1}
.col.collapsed:hover{box-shadow:inset 0 0 0 1px var(--ring-strong)}
.col.collapsed.over{outline:2px dashed var(--gray-400);outline-offset:-.25rem}
.col.won.collapsed.over{outline-color:var(--success-600)}
.col.lost.collapsed.over{outline-color:var(--danger-600)}
/* ----- modals ----- */
/* Every dialog slightly blurs the page behind it (request 26.09.2026: "kadar odprem katerikoli popup, naj se ozadje nekoliko zamegli") */
.overlay{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:1rem;z-index:50;overflow-y:auto}
.overlay>.modal{margin:auto 0} /* centred when it fits, scrolls from the top when it is taller than the window */
.overlay.open{display:flex}
.modal{width:100%;max-width:28rem;background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 0 0 1px var(--ring),var(--shadow-lg)}
.modal-lg{max-width:40rem}
.modal-xl{max-width:56rem}
/* A dialog in parts (New / Edit company): a heading, optionally a control on its right, then a grid */
.form-block+.form-block{border-top:1px solid var(--gray-200);padding-top:1.25rem}
.form-block>.section-sub,.form-block-h{margin-bottom:1rem}
.form-block-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.form-grid.cols-4 .span-3{grid-column:span 3}
/* Flex Offers dialog, Vehicle, Photo and Pricing with two fields a row (requests 26.09.2026): the photo is a thumbnail as high as an input and its actions */
.fx-photo{display:flex;align-items:center;gap:.75rem;min-height:2.3rem}
.fx-photo-thumb{flex:0 0 4.5rem;height:2.3rem;display:flex;align-items:center;justify-content:center;padding:.125rem;border-radius:var(--radius-md);background:#fff;box-shadow:inset 0 0 0 1px var(--ring-strong);color:var(--gray-400);cursor:pointer;overflow:hidden}
.fx-photo-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.fx-photo .muted{font-size:.875rem}
.fx-photo:not(.has-file) [data-when-file],.fx-photo.has-file [data-when-empty],.fx-photo.has-file .fx-photo-thumb svg{display:none}
.section-sub .muted{font-weight:400;margin-left:.25rem}
/* The photo field with a preview beside the upload (calculation_form.php without a card) */
.photo-field{display:flex;gap:1.25rem;align-items:flex-start}
.photo-box{flex:0 0 9rem;height:6rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--ring-strong);overflow:hidden;color:var(--gray-400);font-size:.8125rem;text-align:center;padding:.5rem}
.photo-box img{max-width:100%;max-height:100%;object-fit:contain}
.photo-inputs{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}
.field input[type=file]{padding:.3rem .5rem;cursor:pointer}
.field input[type=file]::file-selector-button{font:inherit;font-size:.8125rem;border:0;border-radius:var(--radius-md);background:var(--gray-100);color:var(--gray-950);padding:.25rem .65rem;margin-right:.75rem;cursor:pointer}
@media (max-width:1023px){.form-grid.cols-4 .span-3,.form-grid.cols-4 .addr-by-tax>.addr-one{grid-column:span 1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* a label for screen readers only */
.modal-h{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem}
.modal-h h3{margin:0;font-size:1rem;font-weight:600;flex:1}
.modal-b{padding:1.5rem;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);display:flex;flex-direction:column;gap:1.25rem}
.modal-f{padding:1rem 1.5rem;display:flex;gap:.75rem}
.modal-f .link-danger{margin-left:auto} /* Remove contact at the right end of the contact dialog's footer (company card) */
/* The confirm dialog (js/app.js CrmConfirm; request 25.09.2026): the question as the title, the explanation under it */
.modal-confirm{max-width:26rem}
.modal-confirm .modal-h h3{line-height:1.4}
.modal-confirm .modal-b{color:var(--gray-600)}
.modal-confirm .modal-b[hidden]+.modal-f{border-top:1px solid var(--gray-200)}
/* ----- toasts ----- */
.toasts{position:fixed;top:1rem;right:1rem;z-index:70;display:flex;flex-direction:column;gap:.5rem;max-width:24rem;width:calc(100% - 2rem)}
.toast{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 0 0 1px var(--ring),var(--shadow-lg);font-size:.875rem;color:var(--gray-950);transition:opacity .3s}
.toast span{flex:1}
.toast svg{margin-top:.1rem}
.toast-success svg{color:var(--success-600)}
.toast-error svg{color:var(--danger-600)}
.toast-info svg{color:var(--info-600)}
.toast-warning svg{color:var(--warning-600)}
.toast-close{color:var(--gray-400);display:grid;place-items:center}
.toast-close:hover{color:var(--gray-700)}
.toast.hide{opacity:0}
@media (max-width:1180px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.entry.span-2,.entry.span-3{grid-column:span 2}}
@media (max-width:1023px){
.sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
.sidebar.open{transform:none}
.sidebar.open~.sidebar-backdrop{display:block}
.content{padding:1rem}.topbar{padding:0 1rem}
.stats{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.entry.span-2,.entry.span-3{grid-column:span 1}
.form-grid,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}
.photo-field{flex-direction:column}.photo-box{flex-basis:auto;width:100%}
.auth-card{padding:1.5rem}
}
/* ----- phase 2: lists, forms, pickers, cards ----- */
[hidden]{display:none!important}
.contents{display:contents}
/* Review draft: the company's tax number and address, closed until needed (CompanyWall fills them) */
.form-grid .by-hand{grid-column:1/-1}
[data-companywall-status]:empty{display:none}
/* Review draft: Assigned to next to Discard in the page header (owner_id of the review form) */
.owner-pick{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--gray-950);white-space:nowrap}
.owner-pick .select{font-weight:400;padding-top:.5rem;padding-bottom:.5rem}
.by-hand>summary{cursor:pointer;width:max-content;font-size:.875rem;font-weight:500;color:var(--gray-950)}
.by-hand>.form-grid{margin-top:1rem}
.m0{margin:0}
.fw-n{font-weight:400}
.pre-wrap{white-space:pre-wrap;overflow-wrap:anywhere}
/* Reject client / Reject customer: the e-mail to the client as it goes out (templates/reject_mail.php, request 13.10.2026) */
.mail-send{white-space:normal}
.field-group{display:flex;flex-direction:column;gap:1.25rem} /* Pipeline presets: a rejection reason's e-mail fields, spaced like the dialog's own */
.field-group[hidden]{display:none}
.mail-preview{margin:.5rem 0 0;padding:.75rem;border-radius:var(--radius-lg);background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--ring);font-size:.75rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:15rem;overflow-y:auto;color:var(--gray-700)}
.warn{color:var(--warning-600);font-weight:500}
.bad{color:var(--danger-600);font-weight:500}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.section-sub{font-size:.875rem;font-weight:600;color:var(--gray-950);margin:0}
.section-toggle{width:100%;text-align:left}
.section-header .link-gray{background:none}
.cell-link{font-weight:500}
.cell-link:hover{color:var(--primary-600)}
.actions-cell{width:1%;white-space:nowrap}
.row-actions .icon-btn{width:1.75rem;height:1.75rem}
.row-actions .icon-btn[disabled]{opacity:.35;cursor:default}
.row-actions .icon-btn[disabled]:hover{background:none;color:var(--gray-400)}
.t tbody tr.no-link{cursor:default}
.t tbody tr.no-link:hover{background:transparent}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:45;margin-top:.25rem;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--ring),var(--shadow-lg);padding:.25rem;display:none;max-height:16rem;overflow-y:auto}
.ac-list.open{display:block}
.ac-item{display:block;width:100%;text-align:left;padding:.5rem .75rem;border-radius:var(--radius-md);font-size:.875rem;color:var(--gray-950)}
.ac-note{padding:.5rem .75rem;font-size:.8125rem;color:var(--danger-600)} /* the FURS register cannot be searched: why (api/furs.php error) */
.ac-head{padding:.5rem .75rem .25rem;font-size:.75rem;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.03em} /* a group's title in a suggestion list (New deal: the FURS register) */
.ac-item:hover,.ac-item.hl{background:var(--gray-50)}
.ac-item .d{color:var(--gray-500);font-size:.75rem}
.ac-manual{margin-top:.25rem;border-top:1px solid var(--gray-100);border-radius:0 0 var(--radius-md) var(--radius-md);color:var(--gray-500);font-size:.8125rem} /* New company: "Not in the register" (initFurs) */
.ac-chosen{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.75rem;font-weight:500;color:var(--success-700);background:var(--success-50);padding:.25rem .5rem;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px rgba(22,163,74,.15)}
.ac-chosen button{font-weight:600;color:var(--primary-600);margin-left:.25rem}
.ac-chosen button:hover{color:var(--primary-500)}
.toast .link{white-space:nowrap}
.dropdown form{display:block}
.dropdown .di.lost svg{color:var(--danger-600)}
.dropdown a.di{color:var(--gray-700)}
.entry .v .warn,.entry .v .bad{font-weight:500}
.field .wrp input[type=number]{-moz-appearance:textfield}
.subheading .badge{vertical-align:middle}
/* ----- phase 3: top-bar search, board, settings ----- */
.global-search{position:relative;width:20rem;max-width:100%}
.global-search input{width:100%;border:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm);padding:.4rem .75rem .4rem 2.25rem;font:inherit;color:var(--gray-950)}
.global-search input::placeholder{color:var(--gray-400)}
.global-search input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600)}
.global-search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--gray-400)}
.global-search .ac-list{left:auto;right:0;width:28rem;max-width:calc(100vw - 2rem);max-height:70vh;overflow-y:auto} /* suggestions (request 30.09.2026), right-aligned under the box */
.global-search .ac-item{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search .ac-item .d{overflow:hidden;text-overflow:ellipsis}
.global-search .ac-all{margin-top:.25rem;border-top:1px solid var(--gray-100);border-radius:0 0 var(--radius-md) var(--radius-md);color:var(--primary-600);font-weight:500}
.page-header form.actions{margin:0}
.page-header .header-field{width:16rem;max-width:100%;align-self:flex-start} /* New offer: Assigned to, top right */
.kcard a.kt:hover{color:var(--primary-600)}
.kcard.moving{opacity:.6}
.col-empty{font-size:.75rem;text-align:center;padding:1rem .5rem}
.dropdown .di-mark{width:1rem;flex:none;text-align:center;font-size:.75rem;color:var(--primary-600)}
.dropdown .di.cur .di-mark::before{content:"\2713"}
/* Board filters (request 25.09.2026): a pill per filter opens a menu instead of the system's select */
.filter-pill{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 .875rem;border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 0 0 1px var(--ring),var(--shadow-sm);font-size:.875rem;font-weight:500;color:var(--gray-950);white-space:nowrap}
.filter-pill:hover{box-shadow:0 0 0 1px var(--ring-strong),var(--shadow-sm)}
.filter-pill .fp-l{color:var(--gray-500);font-weight:400}
.filter-pill svg{color:var(--gray-400)}
.filter-pill.on{background:var(--primary-50);color:var(--primary-700);box-shadow:0 0 0 1px var(--primary-100)}
.filter-pill.on .fp-l,.filter-pill.on svg{color:var(--primary-600)}
/* Follow-up required (request 25.09.2026): a checkbox dressed as a filter button, with the number of offers it finds */
.filter-check{cursor:pointer;user-select:none}
.filter-check input{width:1rem;height:1rem;margin:0;accent-color:var(--primary-600)}
.filter-touch{cursor:text}
.filter-touch input{width:3rem;height:1.5rem;margin:0;padding:0 .375rem;border:0;border-radius:var(--radius-md);background:var(--gray-100);font:inherit;color:inherit;text-align:center;-moz-appearance:textfield}
.filter-touch input::-webkit-outer-spin-button,.filter-touch input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.filter-touch input:focus{outline:2px solid var(--primary-500);outline-offset:0}
.filter-touch.on input{background:var(--surface)}
.filter-check .fc-n{font-size:.75rem;font-weight:500;color:var(--gray-500)}
.filter-check.on .fc-n{color:var(--primary-600)}
.filter-check:has(input:focus-visible){outline:2px solid var(--primary-600);outline-offset:2px}
.dropdown.filter-menu{width:auto;min-width:12rem;white-space:nowrap}
.dropdown .di.sel{color:var(--gray-950);font-weight:500}
.dropdown .di.sel .di-mark::before{content:"\2713"}
.dropdown .di .di-sub{margin-left:auto;padding-left:1rem;font-size:.75rem;color:var(--gray-500)}
.dropdown .di[disabled]{cursor:default}
.kv{width:auto;border-collapse:collapse}
.kv th{text-align:left;font-weight:500;color:var(--gray-500);padding:.25rem 1.5rem .25rem 0;white-space:nowrap}
.kv td{padding:.25rem 0}
@media (max-width:1023px){.global-search{width:11rem}.global-search input{padding-left:2rem}}
/* ----- dark mode: same tokens, dark values (system preference or the user menu) ----- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#0b1120;--surface:#111a2e;--well:#0d1526;--overlay:rgba(0,0,0,.7);--inset-ring:rgba(255,255,255,.08);--code-bg:rgba(255,255,255,.08);
--gray-50:#172036;--gray-100:#1e293b;--gray-200:#2a3650;--gray-300:#3b4863;--gray-400:#64748b;--gray-500:#94a3b8;
--gray-600:#cbd5e1;--gray-700:#e2e8f0;--gray-800:#f1f5f9;--gray-900:#f8fafc;--gray-950:#f8fafc;
--primary-50:rgba(139,131,250,.14);--primary-100:rgba(139,131,250,.22);--primary-500:#b4aefc;--primary-600:#9d95fb;--primary-700:#8a81f8;
--success-50:rgba(74,222,128,.12);--success-600:#4ade80;--success-700:#86efac;
--warning-50:rgba(251,191,36,.12);--warning-600:#fbbf24;--warning-700:#fcd34d;
--danger-50:rgba(248,113,113,.12);--danger-500:#f87171;--danger-600:#f87171;--danger-700:#fca5a5;
--info-50:rgba(56,189,248,.12);--info-600:#38bdf8;--info-700:#7dd3fc;
--indigo-50:rgba(129,140,248,.12);--indigo-600:#818cf8;--indigo-700:#a5b4fc;
--violet-50:rgba(167,139,250,.12);--violet-600:#a78bfa;--violet-700:#c4b5fd;
--ring:rgba(255,255,255,.07);--ring-strong:rgba(255,255,255,.14);
--shadow-sm:0 1px 2px 0 rgba(0,0,0,.4);--shadow:0 1px 3px 0 rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.5);--shadow-lg:0 16px 32px -8px rgba(0,0,0,.6),0 4px 8px -4px rgba(0,0,0,.5);
--btn-primary:#6358e8;--btn-primary-hover:#7c73f5;
--btn-main:#27325e;--btn-main-hover:#33407a;--sb-bg:#0a0f1f;--sb-border:rgba(255,255,255,.06);
--card-head:#152038;--card-shadow:0 0 0 1px rgba(255,255,255,.07),0 8px 20px -8px rgba(0,0,0,.6);
color-scheme:dark;
}}
:root[data-theme="dark"]{
--bg:#0b1120;--surface:#111a2e;--well:#0d1526;--overlay:rgba(0,0,0,.7);--inset-ring:rgba(255,255,255,.08);--code-bg:rgba(255,255,255,.08);
--gray-50:#172036;--gray-100:#1e293b;--gray-200:#2a3650;--gray-300:#3b4863;--gray-400:#64748b;--gray-500:#94a3b8;
--gray-600:#cbd5e1;--gray-700:#e2e8f0;--gray-800:#f1f5f9;--gray-900:#f8fafc;--gray-950:#f8fafc;
--primary-50:rgba(139,131,250,.14);--primary-100:rgba(139,131,250,.22);--primary-500:#b4aefc;--primary-600:#9d95fb;--primary-700:#8a81f8;
--success-50:rgba(74,222,128,.12);--success-600:#4ade80;--success-700:#86efac;
--warning-50:rgba(251,191,36,.12);--warning-600:#fbbf24;--warning-700:#fcd34d;
--danger-50:rgba(248,113,113,.12);--danger-500:#f87171;--danger-600:#f87171;--danger-700:#fca5a5;
--info-50:rgba(56,189,248,.12);--info-600:#38bdf8;--info-700:#7dd3fc;
--indigo-50:rgba(129,140,248,.12);--indigo-600:#818cf8;--indigo-700:#a5b4fc;
--violet-50:rgba(167,139,250,.12);--violet-600:#a78bfa;--violet-700:#c4b5fd;
--ring:rgba(255,255,255,.07);--ring-strong:rgba(255,255,255,.14);
--shadow-sm:0 1px 2px 0 rgba(0,0,0,.4);--shadow:0 1px 3px 0 rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.5);--shadow-lg:0 16px 32px -8px rgba(0,0,0,.6),0 4px 8px -4px rgba(0,0,0,.5);
--btn-primary:#6358e8;--btn-primary-hover:#7c73f5;
--btn-main:#27325e;--btn-main-hover:#33407a;--sb-bg:#0a0f1f;--sb-border:rgba(255,255,255,.06);
--card-head:#152038;--card-shadow:0 0 0 1px rgba(255,255,255,.07),0 8px 20px -8px rgba(0,0,0,.6);
color-scheme:dark;
}
/* ----- v2: web drafts (Review draft, Settings) ----- */
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start}
.review-aside{position:sticky;top:calc(var(--topbar-h) + 2rem);display:flex;flex-direction:column;gap:2rem}
.received th{vertical-align:top}
.received td{overflow-wrap:anywhere;white-space:pre-wrap}
.hints{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.hint{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-lg);background:var(--warning-50);color:var(--gray-950);box-shadow:inset 0 0 0 1px rgba(217,119,6,.15)}
.hint svg{color:var(--warning-600)}
.hint .grow{flex:1;min-width:0}
.hint .why{font-size:.75rem;color:var(--gray-500)}
.key{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;overflow-wrap:anywhere;background:var(--code-bg);padding:.4rem .6rem;border-radius:var(--radius-md)}
.form-section > div + div{border-top:1px solid var(--gray-200);padding-top:1.25rem}
/* Process inquiry: two separate steps (1 Customer data, 2 Qualify or reject); the step's action on the right */
.steps{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;list-style:none;margin:1rem 0 0;padding:0;font-size:.875rem;font-weight:500;color:var(--gray-500)}
.steps li>a,.steps li>span{display:inline-flex;align-items:center;gap:.5rem}
.steps .sep{display:inline-flex;color:var(--gray-300)}
.steps .cur{color:var(--gray-950);font-weight:600}
.steps a:hover{color:var(--primary-600)}
.step-no{display:inline-grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--gray-200);color:var(--gray-600);font-size:.75rem;font-weight:600;line-height:1}
.steps .cur .step-no{background:var(--primary-600);color:#fff}
.steps .done .step-no{background:var(--success-600);color:#fff}
.sub-block{border-top:1px solid var(--gray-200);margin-top:1.5rem;padding-top:1.25rem}
.sub-block>.section-sub{margin-bottom:1rem}
.decide-opt{border-top:1px solid var(--gray-200);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.decide-opt:first-child{border-top:0}
/* A tooltip on a button's wrapper (data-tip; Draft Lead: Confirm client while data is missing). A disabled button lets the hover through. */
.tip-wrap{position:relative;display:block}
.tip-wrap[data-tip]>.btn:disabled,.tip-wrap[data-tip]>.link:disabled{pointer-events:none}
.link:disabled{color:var(--gray-400);cursor:default}
.section-link.tip-wrap[data-tip]:hover::after{left:auto;right:0;transform:none} /* Get insurance offer at the card's right edge: the tooltip ends there */
.tip-wrap[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);width:max-content;max-width:18rem;padding:.375rem .625rem;border-radius:.5rem;background:#18181b;color:#fff;font-size:.75rem;line-height:1rem;font-weight:500;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.18);z-index:40;pointer-events:none}
.decide-opt .field label{margin-bottom:.375rem}
.need{margin:0;font-size:.8125rem;line-height:1.4;color:var(--gray-500)}
.need-missing{color:var(--warning-700)}
.need-ok{color:var(--success-700)}
.ac-chosen a{font-weight:600;color:var(--primary-600)}
.ac-chosen a:hover{color:var(--primary-500)}
.ac-chosen>a{margin-left:.25rem}
@media (max-width:1180px){.review-grid{grid-template-columns:1fr}.review-aside{position:static}}
/* ----- v3: offers (editor, summary, attachments) ----- */
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start}
.calc-side{position:sticky;top:calc(var(--topbar-h) + 2rem);display:flex;flex-direction:column;gap:1.5rem;max-height:calc(100dvh - var(--topbar-h) - 3rem);overflow-y:auto;scrollbar-width:thin;padding:.25rem;margin:-.25rem} /* the padding keeps the cards' ring and shadow, which the scrolling column clipped */
.ofg{position:relative}
.ofg .section-body{padding:1.25rem 1.5rem}
.section-link{position:absolute;right:3.5rem;top:1.1rem;font-size:.8rem} /* left of the chevron, which sits at the right edge (request 25.09.2026) */
.section-header:not(.section-toggle) ~ .section-link{right:1.5rem} /* a section without a chevron: at the right edge */
.ofields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.25rem}
.ofields-1{grid-template-columns:minmax(0,1fr)}
/* Vehicle: the specification and the purchase side by side in one card, a rule between them (request 25.09.2026) */
.ofpanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ofpane{min-width:0;display:flex;flex-direction:column;gap:1rem}
.ofpane:first-child{padding-right:1.5rem}
.ofpane+.ofpane{padding-left:1.5rem;border-left:1px solid var(--gray-200)}
@media (max-width:640px){.ofpanes{grid-template-columns:minmax(0,1fr)}.ofpane:first-child{padding-right:0}.ofpane+.ofpane{padding:1.25rem 0 0;margin-top:1.25rem;border-left:0;border-top:1px solid var(--gray-200)}}
.ofield{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.ofield.full,.row3{grid-column:1 / -1}
.ruled{border-top:1px solid var(--gray-200);padding-top:1rem} /* a line above a run of fields (rule; requests 25. and 26.09.2026) */
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 1.25rem}
.row2{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.25rem} /* vehicle specification in pairs (request 25.09.2026) */
.row4{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem 1.25rem} /* Resale's values under the study, a line above them (requests 25.09.2026; the line is rule, .ruled) */
.row5{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,.6fr);gap:.75rem 1.25rem} /* Client: name, revenue, profit, credit report, eBonitete (request 30.09.2026) and its score, narrower (01.10.2026) */
.ofield label{font-size:.8rem;font-weight:500;color:var(--gray-600)}
.ofield label .u{color:var(--gray-400);font-weight:400}
.ofield .wrp{display:flex;align-items:center;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm)}
.ofield .wrp:focus-within{box-shadow:inset 0 0 0 2px var(--primary-600)}
.ofield input,.ofield select,.ofield textarea{flex:1;border:0;background:transparent;padding:.35rem .6rem;font:inherit;color:var(--gray-950);min-width:0;width:100%}
.ofield select{padding-right:2rem;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .6rem center;background-size:1rem}
.ofield input:focus,.ofield select:focus,.ofield textarea:focus{outline:0}
.ofield input[disabled],.ofield select[disabled],.ofield textarea[disabled]{color:var(--gray-500)}
.ofield input.computed{color:var(--gray-600);background:transparent}
.ofield .wrp:has(>input.computed){background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--ring-strong)} /* computed: grey, with a hairline border like the fields (request 30.09.2026) */
.ofield input.missing,.ofield select.missing{box-shadow:inset 0 0 0 2px rgba(217,119,6,.45);border-radius:var(--radius-lg)}
.ofield .help{font-size:.75rem;color:var(--gray-500)}
/* A yes/no switch (calculation, Included services; request 25.09.2026): the switch, then its label, no box; on means selected */
.toggle{display:inline-flex;align-items:center;gap:.65rem;min-height:2.25rem;font-size:.875rem;color:var(--gray-950);cursor:pointer}
/* Autosave (request 25.09.2026): a saved field flashes light green for a moment (calculation-editor.js). */
.calc-grid .wrp,.calc-grid .upl,.calc-grid .toggle{transition:background-color .6s ease-out}
.calc-grid .saved-flash{background-color:rgba(22,163,74,.16)!important;transition:none}
.calc-grid .toggle.saved-flash{border-radius:var(--radius-lg);box-shadow:0 0 0 .35rem rgba(22,163,74,.16)}
.toggle input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:2.5rem;height:1.5rem;margin:0;border-radius:999px;background:var(--gray-300);cursor:pointer;transition:background-color .15s ease-out}
.toggle input::before{content:"";position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s ease-out}
.toggle input:checked{background:var(--primary-600)}
.toggle input:checked::before{transform:translateX(1rem)}
.toggle input:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px}
.toggle input:disabled{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.toggle input,.toggle input::before{transition:none}}
.ofield .suffix{padding:0 .6rem;font-size:.8rem;color:var(--gray-500);border-left:1px solid var(--gray-200);align-self:stretch;display:flex;align-items:center}
.calc-equiv{border-left:0 !important;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none} /* Discount in EUR / in %: the other unit on the right (request 05.10.2026) */
.calc-equiv:empty{display:none !important}
.ms-models{margin-top:1rem} /* Market study: the DCM models to tick (request 05.10.2026) */
.ms-model-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.375rem 1rem;font-size:.875rem}
[data-market-version-wrap]{margin-top:.75rem;max-width:20rem}
/* Client (request 26.09.2026): name, revenue, profit and the CompanyWall link as text at the inputs' height */
.ofield .shown{padding:.35rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-blockade{margin-top:1rem;font-size:.875rem} /* the customer's blockades from CompanyWall under the row */
.urlshot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.urlshot .wrp{flex:1;min-width:12rem}
.urlshot a.disabled{opacity:.5;pointer-events:none}
.attach{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.attach-preview{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem}
.attach-thumb{height:2.5rem;border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--ring)}
.attach-pdf{font-size:.7rem;font-weight:700;padding:.2rem .45rem;border-radius:var(--radius-md);background:var(--danger-50);color:var(--danger-600)}
/* Upload cards (calculation: dealer offer, specification, vehicle image; request 25.09.2026): one preview size for every file */
.upl-group{grid-column:1 / -1;display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.upl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem}
.upl{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 0 0 1px var(--ring-strong),var(--shadow-sm);overflow:hidden}
.upl-thumb{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:6.5rem;padding:.5rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200);color:var(--gray-500)}
button.upl-thumb{cursor:pointer}
button.upl-thumb:hover{background:var(--gray-100);color:var(--gray-950)}
button.upl-thumb:focus-visible{outline:2px solid var(--primary-600);outline-offset:-2px}
.upl-thumb img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.upl-preview{display:contents}
.upl-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.75rem;font-weight:500}
.upl-pdf{font-size:.75rem;font-weight:700;letter-spacing:.06em;padding:.45rem .7rem;border-radius:var(--radius-md);background:var(--surface);box-shadow:0 0 0 1px var(--ring-strong);color:var(--gray-700)}
.upl-page{box-shadow:0 0 0 1px var(--ring-strong),var(--shadow-sm);background:#fff} /* a PDF's first page (PDF.js) */
.upl-pdf.upl-tag{position:absolute;right:.4rem;bottom:.4rem;padding:.15rem .35rem;font-size:.625rem}
.upl-body{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .75rem .7rem;min-width:0}
.upl-title{font-size:.8125rem;font-weight:600;color:var(--gray-950)}
.upl-actions{display:flex;flex-wrap:wrap;gap:.2rem .75rem;margin-top:.4rem}
.upl-act{font-size:.75rem;font-weight:500;color:var(--gray-600)}
.upl-act:hover{color:var(--gray-950);text-decoration:underline}
.upl-act.danger{color:var(--danger-600)}
.upl.drop-over,.attach.drop-over,.photo-field.drop-over{outline:2px dashed var(--primary-600);outline-offset:2px} /* a file dragged over an upload (app.js) */
.upl.drop-over .upl-thumb{background:var(--gray-100);color:var(--gray-950)}
.upl:not(.has-file) [data-when-file],.upl.has-file [data-when-empty],.upl.has-file .upl-empty{display:none}
.ins-file{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--gray-950)} /* Get insurance offer: the file that goes with it */
.ins-file svg{color:var(--gray-500)}
.ins-ask{margin:0 0 1rem;font-size:.875rem;font-weight:500;color:var(--gray-950)} /* the question after uploading the dealer offer or specification */
/* The attachments in the sidebar as a grid, two in a row (requests 25.09.2026), each one a card of its own like
Summary, no surrounding Attachments card; app style: a rounded tile on top with the picture or the PDF's first page
filling it (a dashed one while empty), the title and the actions under it */
.calc-side .upl-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem}
.calc-side .upl{padding:.5rem;border-radius:var(--radius-xl);box-shadow:0 0 0 1px var(--ring-strong),var(--shadow-sm);transition:box-shadow .15s}
.calc-side .upl:hover{box-shadow:0 0 0 1px var(--ring-strong),var(--shadow)}
.calc-side .upl-thumb{height:5.5rem;padding:0;border:0;border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.calc-side .upl-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ring-strong);pointer-events:none} /* over the picture */
.calc-side button.upl-thumb:hover{background:var(--surface)}
.calc-side .upl-thumb:hover::after{box-shadow:inset 0 0 0 1px rgba(9,9,11,.25)}
.calc-side .upl-thumb img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.calc-side .upl-page{object-position:top;box-shadow:none}
.calc-side .upl:not(.has-file) .upl-thumb{background:var(--gray-50);color:var(--gray-400)}
.calc-side .upl:not(.has-file) .upl-thumb::after{box-shadow:none;border:1px dashed var(--gray-300)}
.calc-side .upl:not(.has-file) .upl-thumb:hover{color:var(--gray-700)}
.calc-side .upl-thumb svg.i{width:1.25rem;height:1.25rem}
.calc-side .upl-empty>span{display:none} /* the icon only; Choose file is among the actions */
.calc-side .upl-pdf{padding:.2rem .35rem;font-size:.625rem}
.calc-side .upl-pdf.upl-tag{right:.35rem;bottom:.35rem;padding:.12rem .3rem;font-size:.5625rem;line-height:1;border-radius:.2rem;background:var(--gray-950);color:#fff;box-shadow:none}
.calc-side .upl-body{gap:.2rem;padding:.6rem .25rem .25rem}
.calc-side .upl-title{font-size:.8125rem;line-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-side .upl-actions{margin-top:0;gap:.25rem .625rem} /* Open, Replace and Remove fit in one line */
.calc-side .upl-act{font-size:.75rem;color:var(--gray-600)}
.calc-side .upl-act:hover{color:var(--gray-950)}
.calc-side .upl-act.danger{color:var(--danger-600)}
.calc-side .upl-act.danger:hover{color:var(--danger-700)}
.urlshot .link-gray{font-size:.8rem} /* Insert search link (calculation-editor.js) */
.sum-line{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.875rem}
.ctable{width:100%;border-collapse:collapse;font-size:.875rem} /* in the Calculation popup (request 25.09.2026) */
.ctable th,.ctable td{padding:.5rem .5rem;text-align:right;border-bottom:1px solid var(--gray-200);white-space:nowrap}
.ctable th:first-child,.ctable td:first-child{text-align:left;white-space:normal}
.ctable tr.tot td{font-weight:600}
.ctable tr.grand td{font-weight:700;background:var(--gray-50)}
.ctable tbody tr:hover td{background:var(--gray-100)} /* the row under the mouse (request 25.09.2026) */
.appr{display:flex;flex-direction:column;gap:.6rem;font-size:.8rem}
.appr .ok{color:var(--success-600);font-weight:700}
.appr .wait{color:var(--warning-600)}
@media (max-width:1180px){.calc-grid{grid-template-columns:minmax(0,1fr)}.calc-side{position:static;max-height:none}}
@media (max-width:900px){.row4,.row5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ofields,.row3{grid-template-columns:1fr}.section-link{position:static;display:block;padding:0 1.5rem .5rem}}
/* ----- board / list switch, filter chips, new-offer steps ----- */
.seg{display:inline-flex;background:var(--gray-100);border-radius:var(--radius-lg);padding:.2rem;gap:.2rem}
.seg-btn{padding:.35rem .85rem;border-radius:.375rem;font-size:.875rem;font-weight:500;color:var(--gray-600)}
.seg-btn:hover{color:var(--gray-950)}
.seg-btn.active{background:var(--surface);color:var(--gray-950);box-shadow:var(--shadow-sm)}
.badge .badge-x{margin-left:.25rem;font-weight:700;color:inherit;opacity:.7}
.badge .badge-x:hover{opacity:1}
.form-row{display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap}
.form-row .field{flex:1;min-width:16rem;margin:0}
.form-row .btn{margin-top:1.75rem}
.step{display:inline-flex;align-items:center;gap:.5rem}
.company-chip{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;border-radius:var(--radius-lg);background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--ring)}
.company-chip b{font-size:1rem}
.company-chip .muted{flex:1}
/* New offer, Customer: the company as a read-only field beside the Contact select, the same height */
.company-box{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.4rem .75rem;line-height:1.25rem;border-radius:var(--radius-lg);background:var(--gray-50);box-shadow:inset 0 0 0 1px var(--ring-strong)}
.company-box svg{flex:none;color:var(--gray-400)}
.company-box a{flex:none;max-width:65%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-box a:hover{color:var(--primary-600)}
.company-box .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ----- offer card, laid out like a Bigin deal: stage bar, side panel, tabs, timeline ----- */
.stagebar{overflow-x:auto;padding:1.25rem 1.5rem;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}
.stg-list{display:flex;align-items:flex-start;list-style:none;margin:0;padding:0 0 1.5rem;min-width:50rem}
/* Every stage after the first grows a line (::before) from the previous node to its own, so the bar runs edge to edge */
.stg{flex:1;display:flex;align-items:flex-start;min-width:0}
.stg:first-child{flex:none}
.stg::before{content:"";flex:1;height:2px;margin-top:calc(1rem - 1px);background:var(--gray-200)}
.stg:first-child::before{display:none}
.stg.done::before,.stg.cur::before{background:var(--btn-primary)}
/* Won and Lost stand apart, after a divider */
.stg.out{flex:none;margin-left:1.75rem}
.stg.out::before{display:none}
.stg.out.won{align-self:stretch;margin:0 0 -1.5rem 2rem;padding:0 0 1.5rem 2rem;border-left:1px solid var(--gray-200)}
.stg-at{position:relative;flex:none;display:flex;justify-content:center}
.stg-node{height:2rem;display:grid;place-items:center;margin:0}
.stg-dot{width:1.375rem;height:1.375rem;border-radius:9999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--gray-300);display:grid;place-items:center;color:var(--gray-400)}
.stg-dot svg{width:.8rem;height:.8rem}
.stg.done .stg-dot{background:var(--btn-primary);box-shadow:none;color:#fff}
button.stg-dot:hover{box-shadow:inset 0 0 0 2px var(--btn-primary);color:var(--btn-primary)}
.stg.done button.stg-dot:hover{box-shadow:0 0 0 3px var(--primary-100);color:#fff}
.stg.won button.stg-dot:hover{box-shadow:inset 0 0 0 2px var(--btn-success);color:var(--btn-success)}
.stg.lost button.stg-dot:hover{box-shadow:inset 0 0 0 2px var(--btn-danger);color:var(--btn-danger)}
.stg-pill{display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .875rem;border-radius:9999px;background:var(--btn-primary);color:#fff;font-weight:600;white-space:nowrap}
button.stg-pill:hover{background:var(--btn-primary-hover)}
.stg.won .stg-pill{background:var(--btn-success)}
.stg.lost .stg-pill{background:var(--btn-danger)}
/* the label hangs under its node; the first one starts at the left edge */
.stg-l{position:absolute;top:2.375rem;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--gray-500)}
.stg:first-child .stg-l{left:0;transform:none}
.stg.done .stg-l{color:var(--gray-700)}
.deal{display:grid;grid-template-columns:22rem minmax(0,1fr);gap:2rem;align-items:start}
.deal-aside{display:flex;flex-direction:column;gap:1.5rem} /* company card: Contacts, Credit score (and Notes) as separate cards, spaced like .calc-side */
.side-group{padding:1.25rem 1.5rem;border-top:1px solid var(--gray-200);overflow-wrap:anywhere}
.side-group:first-child{border-top:0}
.side-group h3{margin:0 0 .75rem;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--gray-950)}
.side-group h3:last-child{margin-bottom:0} /* a heading alone (Private person on the offer card) */
.side-name{display:block;font-weight:600;color:var(--gray-950);text-align:left}
a.side-name:hover,button.side-name:hover{color:var(--primary-600)} /* a contact's name is a button that opens its dialog (company card) */
.side-pos{font-weight:400;color:var(--gray-500)} /* the contact's title in brackets after the name */
.side-title{color:inherit} /* the client's name as the heading of its group (offer card) */
.side-title:hover{color:var(--primary-600)}
.side-line{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.side-line svg{color:var(--gray-400)}
.side-line a:hover{color:var(--primary-600)}
.side-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.625rem 1rem;margin:0}
.side-kv dt{color:var(--gray-500)}
.side-kv dd{margin:0;color:var(--gray-950)}
.side-kv dd.warn{color:var(--warning-600)}
.side-kv dd.bad{color:var(--danger-600);font-weight:500}
.side-kv.mt-s{margin-top:.75rem} /* under the company on the offer card: revenue, profit, credit rating */
/* Company card (request 26.09.2026): a group's heading with its action (Add contact, Edit), the contacts one under another */
/* The heading is a band across the whole card with a line under it, as tall as the tab bar (.tab: 1rem + 1.25rem + .875rem + 2px = 52px),
so the first line lines up with the one under Timeline / Deals (request 26.09.2026) */
.side-h{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:-1.25rem -1.5rem 1.25rem;padding:.875rem 1.5rem;box-shadow:inset 0 -1px 0 var(--gray-200)}
.side-group .side-h h3{margin:0}
.side-contact+.side-contact{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gray-100)}
/* The name with the remove X at its right, shown while the pointer is over the contact (request 26.09.2026); always on touch screens */
.side-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.side-top .side-name{min-width:0}
.side-top form{margin:0;flex:none}
.side-x{display:grid;place-items:center;width:1.5rem;height:1.5rem;margin:-.125rem -.25rem -.125rem 0;border-radius:var(--radius-md);color:var(--gray-400);opacity:0;transition:opacity .1s}
.side-contact:hover .side-x,.side-x:focus-visible{opacity:1}
.side-x:hover{color:var(--danger-600);background:var(--gray-100)}
@media (hover:none){.side-x{opacity:1}}
/* Offer card (request 05.10.2026): the Flex vehicles as a sidebar group, the Manager as a dropdown that saves on change */
.side-pick{margin:0}
.deal-params{max-width:36rem;gap:.75rem 2rem} /* the Deal parameters tab on the card (request 05.10.2026) */
.deal-params-h{display:flex;gap:.5rem;align-items:baseline;margin:1.75rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--gray-200);font-size:.875rem;font-weight:600;color:var(--gray-950)} /* Original inquiry: what the website form sent (request 05.10.2026) */
.deal-params-h .muted{font-weight:400}
.deal-params dd{overflow-wrap:anywhere}
.deal-params dd.pre-line{white-space:pre-line}
.side-pick select{appearance:none;max-width:100%;border:0;border-radius:var(--radius-md);margin:-.125rem -.375rem;padding:.125rem 1.5rem .125rem .375rem;font:inherit;color:var(--gray-950);cursor:pointer;background:transparent url("data:image/svg+xml;utf8,") no-repeat right .375rem center/.875rem}
.side-pick select:hover{background-color:var(--gray-100)}
.side-pick select:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600)}
.side-pick select.is-empty{color:var(--gray-500)}
/* The Offer box on a Flex deal (request 05.10.2026): every term a dropdown, the discount typed, a second car under a line */
.offer-kv dt.offer-next,.offer-kv dd.offer-next{margin-top:.25rem;padding-top:.875rem;border-top:1px solid var(--gray-100)}
.offer-kv{align-items:center}
.offer-kv .side-pick{display:block;min-width:0} /* every field across its column, the dropdown arrow at the right edge (request 05.10.2026) */
.offer-kv .side-pick select{display:block;width:100%;margin:0;padding:.375rem 1.75rem .375rem .625rem;background-position:right .5rem center;box-shadow:inset 0 0 0 1px var(--gray-200)}
.offer-kv .side-pick select:hover{background-color:var(--gray-50)}
.offer-kv .side-pick select:focus-visible{box-shadow:inset 0 0 0 2px var(--primary-600)}
.offer-veh{display:flex;align-items:center;gap:.5rem}
.offer-veh .side-pick{flex:1}
.offer-veh:hover .side-x{opacity:1}
.offer-disc{position:relative}
.offer-disc input,.offer-text input{display:block;width:100%;border:0;border-radius:var(--radius-md);margin:0;padding:.375rem 1.75rem .375rem .625rem;font:inherit;color:var(--gray-950);background:transparent;box-shadow:inset 0 0 0 1px var(--gray-200)}
.offer-disc input:hover,.offer-text input:hover{background:var(--gray-50)}
.offer-disc input:focus,.offer-text input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600);background:var(--surface)}
.offer-text input{padding-right:.625rem}
.offer-disc span{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);color:var(--gray-500);pointer-events:none}
.offer-disc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.625rem;align-items:center} /* the discount about half the width, the net / gross monthly rent in one line beside it (request 05.10.2026) */
.offer-pending{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-top:.5rem;font-size:.8125rem} /* a salesperson's custom net price awaiting a Sales manager (request 05.10.2026) */
.offer-pending-acts{display:inline-flex;gap:.75rem;margin-left:auto}
.offer-pending-acts form{margin:0}
.offer-pending-acts button{background:none;border:0;padding:0;cursor:pointer;font-size:.8125rem}
.offer-rent{text-align:right;font-size:.8125rem;line-height:1.25rem;color:var(--gray-950);font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-variants{margin-top:.875rem;padding-top:.75rem;border-top:1px solid var(--gray-100);display:flex;flex-direction:column;gap:.125rem} /* the main calculation's variants under Prime Offer (request 05.10.2026) */
.offer-variant{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 -.5rem;padding:.375rem .5rem;border-radius:var(--radius-lg);font-size:.8125rem;color:var(--gray-700);font-variant-numeric:tabular-nums}
.offer-variant:hover{background:var(--gray-50)}
.offer-variant b{color:var(--gray-950);font-weight:600}
.offer-add-variant{display:inline-flex;align-items:center;gap:.375rem;margin-top:.25rem;font-size:.8125rem;background:none;border:0;padding:0;cursor:pointer}
/* The calculations as a sidebar card (request 05.10.2026): one block per calculation, the whole block opens it */
.side-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.75rem} /* a card heading with a link on its right (Prime Offer: the calculation, request 05.10.2026) */
.side-group .side-head h3{margin:0}
.side-head .link{white-space:nowrap}
.side-group h3 .cnt{margin-left:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;padding:0 .4rem;border-radius:9999px;background:var(--gray-100);color:var(--gray-600);vertical-align:2px}
.side-note{margin-bottom:.75rem;font-size:.8125rem}
.side-calc{display:block;margin:0 -.75rem;padding:.625rem .75rem;border-radius:var(--radius-lg);color:inherit}
.side-calc:hover{background:var(--gray-50)}
.side-calc+.side-calc{margin-top:.125rem}
.side-calc-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.side-calc-no{font-weight:600;color:var(--gray-950);font-variant-numeric:tabular-nums}
.side-calc-d{display:block;margin-top:.125rem;font-size:.8125rem;color:var(--gray-500)}
.tab-panel>.item:last-child{border-radius:0 0 var(--radius-xl) var(--radius-xl)} /* the Deals tab's last row, on hover */
.tabs{display:flex;gap:1.75rem;padding:0 1.5rem;box-shadow:inset 0 -1px 0 var(--gray-200)}
.tab{display:inline-flex;align-items:center;gap:.375rem;padding:1rem 0 .875rem;border-bottom:2px solid transparent;font-weight:500;color:var(--gray-500);white-space:nowrap}
.tab:hover{color:var(--gray-950)}
.tab[aria-selected="true"]{color:var(--primary-600);border-bottom-color:var(--primary-600)}
.tab .cnt{font-size:.75rem;line-height:1rem;padding:0 .4rem;border-radius:9999px;background:var(--gray-100);color:var(--gray-600)}
.tab-panel{padding:1.5rem}
.tab-panel.flush{padding:0}
/* Company card, Deals (request 26.09.2026): one row per deal: vehicle (duration / mileage) · Prime or Flex · Last action · Open;
the type has a fixed width so the columns line up from row to row */
.deal-row{padding:1rem 1.5rem;white-space:nowrap} /* never on two lines (request 26.09.2026) */
.deal-row-v{flex:1;min-width:0;display:flex;gap:.25em}
.deal-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--gray-950)} /* a long vehicle ends in …, whole in its title */
.deal-row-p{flex:none;color:var(--gray-500)} /* (48M / 30.000KM) is never cut */
.deal-row-t{flex:none;width:3.5rem}
.deal-row-d,.deal-row>.link-gray{flex:none}
/* Phones: one line cannot hold it all, so the vehicle line (still one line) is on top and the type, last action and Open under it */
@media (max-width:640px){.item.deal-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem 1rem}.deal-row-v{flex:1 0 100%}.deal-row-t{width:auto}.deal-row>.link-gray{margin-left:auto}}
/* Inner menu of a page with several parts (Settings, templates/settings_nav.php; request 26.09.2026): tabs under the title, links */
.page-top .page-tabs{padding:0;margin-top:1.25rem;overflow-x:auto}
.tab[aria-current="page"]{color:var(--primary-600);border-bottom-color:var(--primary-600)}
/* Settings -> Calculation presets, the matrices (request 26.09.2026): registration and servicing side by side,
each a table whose amounts are edited in their cells – text until hovered, a field when focused, the unit in grey */
.mtx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}
@media (max-width:1024px){.mtx-grid{grid-template-columns:minmax(0,1fr)}}
.t.mtx th.num{text-align:right}
.t.mtx td{padding-top:.3125rem;padding-bottom:.3125rem}
.mtx-cell{display:inline-flex;align-items:center;gap:.375rem}
.mtx-cell input{width:6.5rem;padding:.4375rem .5rem;border:0;border-radius:var(--radius-md);background:transparent;font:inherit;color:var(--gray-950);text-align:right;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px transparent;transition:background-color .15s,box-shadow .15s}
.mtx-cell input:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--gray-300)}
.mtx-cell input:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary-600)}
.mtx-cell .u{color:var(--gray-500)}
.mtx-from{color:var(--gray-500)}
@media (max-width:480px){.mtx-cell input{width:4.75rem}}
.panel-bar{display:flex;justify-content:flex-end;padding:1rem 1.5rem}
.panel-empty{padding:0 1.5rem 1.5rem}
/* A flush tab panel without a bar on top (company card Deals, e-mails, a closed deal's tabs): the empty text keeps its distance from the tabs,
and the first row does not draw a second line under theirs */
.tab-panel.flush>.panel-empty:first-child{padding-top:1.5rem}
.tab-panel.flush>.section-body:first-child{border-top:0}
/* Timeline tab: a note box on top, then notes and events in one stream by day (time, dot, kind and author, body) */
.composer{margin-bottom:1rem;padding:.5rem .75rem;border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm)}
.composer:focus-within{box-shadow:inset 0 0 0 2px var(--primary-600)}
.composer textarea{display:block;width:100%;min-height:3.5rem;padding:.25rem 0 .5rem;border:0;background:transparent;resize:vertical;font:inherit;color:var(--gray-950)}
.composer textarea:focus{outline:0}
.composer textarea::placeholder{color:var(--gray-400)}
.composer-f{display:flex;justify-content:flex-end;padding-top:.5rem;border-top:1px solid var(--gray-200)}
.feed-bar{display:flex;justify-content:flex-end;margin-bottom:.75rem}
.feed-bar .check{font-size:.75rem;color:var(--gray-600)}
.feed-empty{display:none}
/* "Show notes only" (the company card): the events, and days without a note, step aside */
.feed:has(.feed-filter:checked) :is(.is-event,.tline-group:not(.has-note)){display:none}
.feed:has(.feed-filter:checked) .feed-empty{display:block}
.feed:has(.feed-filter:checked) .tline:not(:has(.is-note)){display:none}
/* The deal card's simple timeline by default (request 06.10.2026): only the key dates and the notes; "Show all events" brings the rest */
.feed:has(.feed-all):not(:has(.feed-all:checked)) .ev.is-event:not(.is-key){display:none}
.feed:has(.feed-all):not(:has(.feed-all:checked)) .evl:not(:has(.is-note,.is-key)){display:none}
.feed-toggle{min-height:0;gap:.5rem;font-size:.75rem;color:var(--gray-600)}
/* The deal card's events (request 06.10.2026): a line between them, the name and date on top, the text under it; a note in a light grey box */
.evl{display:flex;flex-direction:column;margin-top:-.75rem;clip-path:inset(0 0 1px 0)} /* the clip hides the last visible event's line, whichever events the simple view hides */
.ev{padding:.75rem 0;border-bottom:1px solid var(--gray-200)}
.ev-line{display:flex;align-items:baseline;gap:.5rem}
.ev-kind{font-size:.875rem;font-weight:600;color:var(--gray-950);text-decoration:none}
a.ev-kind:hover{text-decoration:underline}
.ev-date{font-size:.75rem;color:var(--gray-500);font-variant-numeric:tabular-nums}
.ev-text{margin-top:.125rem;font-size:.875rem;color:var(--gray-600);overflow-wrap:anywhere}
.ev-text .badge{vertical-align:middle}
.ev-count{color:var(--gray-500)}
.ev-by{margin-left:auto;font-size:.75rem;color:var(--gray-500);text-align:right}
.ev-box{padding:.75rem 1rem;border-radius:var(--radius-lg);background:var(--gray-50)}
.ev-body{margin-top:.25rem;color:var(--gray-950)}
.ev-del{margin-top:.375rem}
.ev-del .link-danger{font-size:.75rem;font-weight:500;opacity:.6}
.ev:hover .ev-del .link-danger,.ev-del .link-danger:focus-visible{opacity:1}
/* An e-mail opened from an event: its row lights up for a moment */
tr.row-flash td{background:var(--gray-100)}
.tline{position:relative}
.tline::before{content:"";position:absolute;top:.5rem;bottom:.5rem;left:calc(3rem + 1rem + .5rem - 1px);width:2px;background:var(--gray-200)}
.tline-row{position:relative;display:grid;grid-template-columns:3rem 1rem minmax(0,1fr);gap:1rem;align-items:start;padding:.5rem 0}
.tline-time{font-size:.75rem;color:var(--gray-500);text-align:right;line-height:1.25rem;font-variant-numeric:tabular-nums}
.tline-dot{position:relative;width:.75rem;height:.75rem;margin:.25rem auto 0;border-radius:9999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--gray-300)}
.is-note .tline-dot{background:var(--btn-primary);box-shadow:0 0 0 3px var(--surface)}
.tline-day{padding:0 0 .25rem}
.tline-group+.tline-group .tline-day{padding-top:1.5rem}
.tline-day>span:last-child{font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--gray-500)}
.tline-head{display:flex;align-items:baseline;gap:.5rem}
.tline-kind{font-size:.6875rem;line-height:1.25rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-600)}
.tline-by{margin-left:auto;font-size:.75rem;color:var(--gray-500);text-align:right}
.tline-body{margin-top:.125rem;color:var(--gray-950)}
.tline-sub{margin-top:.125rem;color:var(--gray-600);overflow-wrap:anywhere}
.tline-sub .badge{vertical-align:middle}
.tline-del{margin-top:.375rem}
.tline-del .link-danger{font-size:.75rem;font-weight:500;opacity:.6}
.tline-row:hover .tline-del .link-danger,.tline-del .link-danger:focus-visible{opacity:1}
@media (max-width:1180px){.deal{grid-template-columns:1fr}}
/* Flex price list: a vehicle that lacks data for its document gets a warning mark after its name; the tooltip lists what */
.tip-wrap.flag-missing{display:inline-flex;vertical-align:-.1875rem;margin-left:.375rem;color:var(--warning-600);cursor:help}
/* ----- Market study (DCM; request 25.09.2026): the study kept on the calculation, above the residual value fields, and the dialog ----- */
.mstudy{font-size:.875rem;color:var(--gray-600)}
.ofg .mstudy:not(:empty){margin-bottom:1.25rem}
/* The study laid out (request 25.09.2026): head with chips, framed table with a grey head and a footer row for both countries. */
.mstudy-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .75rem}
.mstudy-title{margin-right:.35rem;font-weight:600;color:var(--gray-950)}
.mstudy-chip{display:inline-flex;align-items:center;padding:.125rem .55rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--gray-200);color:var(--gray-600);font-size:.75rem;font-weight:500;white-space:nowrap}
.mstudy-when{margin-left:auto;font-size:.75rem;color:var(--gray-500);font-variant-numeric:tabular-nums;white-space:nowrap}
/* All white (request 25.09.2026): no grey fills, grey only in the lines, the head's small caps and the chips' outline. */
.mstudy-box{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--surface)}
.mstudy-t{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums} /* 13 px, in line with the fields around it (request 25.09.2026) */
.mstudy-t th{padding:.55rem .9rem;border-bottom:1px solid var(--gray-200);color:var(--gray-500);font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:right;white-space:nowrap}
.mstudy-t td{padding:.55rem .9rem;border-bottom:1px solid var(--gray-100);color:var(--gray-950);text-align:right;white-space:nowrap}
.mstudy-t th:first-child,.mstudy-t td:first-child{text-align:left}
.mstudy-t th.mstudy-th-title{color:var(--gray-950);font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none} /* the title in place of Country (request 25.09.2026) */
.mstudy-t tbody tr:last-child td{border-bottom:0}
.mstudy-t tbody tr:hover td{background:var(--gray-100)} /* the row under the mouse, as in Cost breakdown (request 25.09.2026) */
.mstudy-t tfoot td{padding-top:.55rem;padding-bottom:.55rem;border-top:1px solid var(--gray-300);border-bottom:0;color:var(--gray-950);font-weight:600}
.mstudy-avg{margin-right:.3rem;color:var(--gray-400);font-size:.75rem;font-weight:500}
.mstudy-sum{margin:.6rem 0 0;font-size:.8rem;color:var(--gray-500)}
.ms-status{margin:0;font-size:.875rem;color:var(--gray-600)}
.ms-status.working::before{content:"";display:inline-block;width:.75rem;height:.75rem;margin-right:.5rem;vertical-align:-.1em;border-radius:50%;border:2px solid var(--gray-300);border-top-color:var(--gray-600);animation:ms-spin .8s linear infinite}
@keyframes ms-spin{to{transform:rotate(360deg)}}
.mstudy-models{margin:.4rem 0 0;font-size:.75rem;color:var(--gray-500)} /* the DCM models the study ran on, with their vehicles */
.ceo-view .mstudy-when,.ceo-view .mstudy-models,.ceo-view #sum-number{display:none} /* the CEO's view: no study time, no DCM models line, no number in Summary (it is in the breadcrumbs; requests 30.09.2026) */
.mstudy-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1.25rem} /* Create / Regenerate market study in Resale projection (request 29.09.2026) */
.ofg .mstudy:not(:empty)+.mstudy-actions{margin-top:-.25rem}
.mstudy-actions .tip-wrap{display:inline-block}
.mstudy-hint{font-size:.8rem;color:var(--gray-500)}
@media (prefers-reduced-motion:reduce){.ms-status.working::before{animation:none}}
/* ============================================================================
Modern layer (decision 30.09.2026, the only design since): dark navy
sidebar, indigo accent, slate grays (the tokens at the top), rounder cards
with a tinted header band, outlined badges, navy primary buttons. These
rules come last, so they win over the base rules above.
============================================================================ */
/* sidebar: navy, light text, the active item tinted indigo */
.sidebar{background:var(--sb-bg);box-shadow:none;color:var(--sb-text);scrollbar-color:rgba(255,255,255,.15) transparent}
.sidebar-header{border-bottom:1px solid var(--sb-border);padding:0 1.75rem} /* the name lines up with the MENU label */
.brand{color:#fff;font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.sidebar-nav{padding:1.25rem 1rem;gap:1rem}
.nav-group{gap:.125rem}
.nav-group+.nav-group{border-top:1px solid var(--sb-border);padding-top:1rem}
.nav-group-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sb-muted);padding:0 .75rem;margin-bottom:.375rem}
.nav-item{color:var(--sb-text);padding:.5625rem .75rem;transition:background-color .12s,color .12s}
.nav-item svg{width:1.25rem;height:1.25rem;color:var(--sb-muted)}
.nav-item:hover{background:var(--sb-hover);color:#fff}
.nav-item:hover svg{color:var(--sb-text)}
.nav-item.active{background:var(--sb-active-bg);color:var(--sb-active)}
.nav-item.active svg{color:var(--sb-active)}
.nav-badge{min-width:1.25rem;padding:.0625rem .4rem;border-radius:9999px;background:#ef4444;color:#fff;box-shadow:none;text-align:center;font-weight:600}
.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid var(--sb-border);flex:none}
.sidebar-user .avatar{background:rgba(255,255,255,.1);color:#fff}
.su-text{display:flex;flex-direction:column;min-width:0}
.su-name{color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-email{color:var(--sb-muted);font-size:.75rem;line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* topbar: translucent, a hairline under it, the search as a soft pill */
.topbar{background:color-mix(in srgb,var(--surface) 85%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--ring)}
.global-search input{background:var(--well);box-shadow:none;border-radius:var(--radius-lg)} /* rounded corners, not a pill (request 30.09.2026) */
.global-search input:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary-600)}
.topbar .avatar{background:var(--primary-100);color:var(--primary-700)}
/* page: lighter headings, tables with quiet headers, outlined badges */
h1{font-size:1.625rem;line-height:2rem;font-weight:600;letter-spacing:-.02em}
.btn-primary{box-shadow:0 1px 2px rgba(20,27,52,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.t thead{background:transparent}
.t th{font-size:.8125rem;font-weight:500;color:var(--gray-500)}
.th-sort svg{visibility:visible;opacity:.5}
.th-sort.on svg{opacity:1}
.badge{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent)}
.stat .n{font-weight:600}
.kcard:hover{box-shadow:0 0 0 1px var(--ring-strong),var(--shadow)}
/* cards stand out from the page (request 30.09.2026): a deeper shadow on a darker background, the header as its own
tinted band with an indigo bar before the title; a collapsed card is its header alone, rounded all round */
.card{box-shadow:var(--card-shadow)}
.card>.section-header{background:var(--card-head);padding-top:.875rem;padding-bottom:.875rem}
.card>.section-header:first-child{border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.card.collapsed>.section-header:first-child{border-radius:var(--radius-xl)}
.section-header h3{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;letter-spacing:-.005em}
/* a table whose header row is the card's header: the title in the first cell, the column labels beside it (request 12.10.2026) */
.t thead.t-title{background:var(--card-head)}
.t thead.t-title th{padding-top:.875rem;padding-bottom:.875rem;vertical-align:middle}
.t thead.t-title h3{margin:0;display:flex;align-items:center;gap:.625rem;font-size:.9375rem;line-height:1.5rem;font-weight:600;letter-spacing:-.005em;color:var(--gray-950);white-space:nowrap}
/* Reports: every number column the same width, the names take the rest, so the numbers of the cards line up; the labels sort
(request 12.10.2026) */
.t-report th.num,.t-report td.num{width:10rem}
.t-report .th-sort{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.t-report .th-sort:hover,.t-report .th-sort.on{color:var(--gray-950)}
.t-report .th-sort[data-dir="asc"] svg{transform:rotate(180deg)}
.t-report .count-link{color:inherit;text-decoration:none}
a.stat-link{display:block;color:inherit;text-decoration:none} /* the Dashboard counters open the filtered board (request 12.10.2026) */
a.stat-link:hover{box-shadow:0 0 0 1px var(--ring-strong),var(--card-shadow)}
/* Reports: the period stands out (request 12.10.2026), a white bar with a ring, the chosen period navy like the main button;
Custom opens From and To */
.seg-period{background:var(--surface);box-shadow:0 0 0 1px var(--ring),var(--shadow-sm);padding:.25rem;gap:.25rem;flex-wrap:wrap}
.seg-period .seg-btn{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 1rem;font-size:.9375rem;color:var(--gray-700);background:none;border:0;font-family:inherit;cursor:pointer}
.seg-period .seg-btn:hover{background:var(--gray-100);color:var(--gray-950)}
.seg-period .seg-btn.active,.seg-period .seg-btn.active:hover{background:var(--btn-main);color:#fff;box-shadow:none}
.period-menu{width:auto;padding:.75rem}
.period-form{display:flex;align-items:flex-end;gap:.5rem}
.period-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;font-weight:500;color:var(--gray-500)}
.period-form input{height:2.25rem;padding:0 .5rem;border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:0 0 0 1px var(--ring);font:inherit;font-size:.875rem;color:var(--gray-950)}
.period-form .btn{height:2.25rem}
.t-report .count-link:hover{color:var(--primary-700);text-decoration:underline}
.section-header h3::before,.t thead.t-title h3::before{content:"";flex:none;width:.25rem;height:1.125rem;border-radius:9999px;background:linear-gradient(180deg,var(--primary-500),var(--primary-700))}
.section-toggle:hover{background:color-mix(in srgb,var(--primary-600) 6%,var(--card-head))}
.section-link{top:.95rem}
/* wide screens: the topbar's menu button folds the sidebar to a strip of icons (html.sidebar-mini, cookie
toolsab_sidebar; request 30.09.2026, was hidden); the label is the item's tooltip, a badge sits on the icon */
.sidebar{transition:width .15s}
@media (min-width:1024px){
.sidebar-mini .sidebar{width:4.5rem}
.sidebar-mini .sidebar-header{padding:0;justify-content:center}
.sidebar-mini .brand-full,.sidebar-mini .nav-label,.sidebar-mini .nav-group-label,.sidebar-mini .su-text{display:none}
.sidebar-mini .brand-short{display:inline}
.sidebar-mini .sidebar-nav{padding:1.25rem .75rem}
.sidebar-mini .nav-item{justify-content:center;padding:.625rem;position:relative}
.sidebar-mini .nav-badge{position:absolute;top:.125rem;right:.125rem;min-width:1rem;padding:0 .25rem;font-size:.625rem;line-height:1rem}
.sidebar-mini .sidebar-user{justify-content:center;padding:1rem 0}
}
/* The CEO only looks (request 30.09.2026): body.role-ceo (header.php) hides what creates, edits, deletes or moves
([data-no-ceo]) and leaves some things visible but not clickable ([data-ceo-inert]: the deal's stages, a contact's name) */
.role-ceo [data-no-ceo]{display:none !important}
.role-ceo [data-ceo-inert],.role-ceo [data-ceo-inert] *{pointer-events:none;cursor:default}
/* sign-in: the navy of the sidebar behind the card */
body.auth{background:radial-gradient(60rem 40rem at 20% 0%,#2a2f6b 0%,transparent 60%),#141b34}
/* Internal notes on a calculation (request 01.10.2026): the thread in the sidebar, the composer under it */
.calc-notes{display:flex;flex-direction:column;gap:.75rem}
.calc-note{position:relative;font-size:.875rem;line-height:1.45}
.calc-note-h{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.15rem;font-size:.8125rem}
.calc-note-h .muted{font-size:.75rem}
.calc-note-x{margin-left:auto;padding:0 .15rem;border:0;background:none;color:var(--gray-400);cursor:pointer;opacity:0}
.calc-note:hover .calc-note-x,.calc-note-x:focus-visible{opacity:1}
.calc-note-x:hover{color:var(--danger-600,#dc2626)}
.calc-notes .composer{margin:0}
.shown .shown-missing{color:#b45309} /* a required CompanyWall link not there yet (request 01.10.2026), amber as a missing field */
/* Send offer: other salespeople in Cc (request 01.10.2026), a grouped list with a hairline between rows and the switch on the right */
.field .field-label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-950);margin-bottom:.5rem}
.cc-list{border-radius:var(--radius-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring-strong),var(--shadow-sm);overflow:hidden}
.field .cc-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:.55rem .75rem;font-weight:400;cursor:pointer}
.cc-row+.cc-row{border-top:1px solid var(--gray-200)}
.cc-who{display:flex;flex-direction:column;line-height:1.3;font-size:.875rem;color:var(--gray-950)}
.cc-who .muted{font-size:.75rem}
.cc-row .toggle{min-height:0}
.field .cc-row.locked,.field .cc-row.doc-row{cursor:default}
.doc-row .cc-who .link{font-weight:500} /* Attach: the document's name opens it in a new tab (request 01.10.2026) */
.field .doc-row .toggle{display:inline-flex;margin:0;min-height:0}
.cc-row.locked .toggle input:disabled{opacity:.6} /* the Sales manager when Sales sends: on, cannot be switched off */
.field .cc-row .toggle input{flex:none;width:2.5rem;height:1.5rem;padding:0;border:0}
/* Valuations: the spreadsheet of vehicles pasted from Excel (request 02.10.2026). Tight cells, the inputs borderless like a sheet's cells. */
.val-grid{min-width:1280px}
.val-grid th,.val-grid td{padding:.375rem .5rem;white-space:nowrap;font-size:.8125rem}
.val-grid th:first-child,.val-grid td:first-child{padding-left:.75rem;width:2rem}
.val-grid th.val-num,.val-grid td.val-num{text-align:right;font-variant-numeric:tabular-nums;min-width:6rem}
.val-grid td.val-cell{padding:0;border-right:1px solid var(--gray-100)}
.val-grid td.val-cell input{display:block;width:100%;min-width:6rem;border:0;border-radius:0;background:transparent;padding:.5rem .5rem;font:inherit;font-size:.8125rem;color:var(--gray-950)}
.val-grid td.val-cell input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600);background:var(--surface)}
.val-grid th.val-h-brand,.val-grid input[data-k="brand"]{min-width:7.5rem}
.val-grid th.val-h-model,.val-grid input[data-k="model"]{min-width:10rem}
.val-grid th.val-h-vin,.val-grid input[data-k="vin"]{min-width:11.5rem;font-variant-numeric:tabular-nums}
.val-grid input[data-k="reg_date"]{min-width:6.5rem;text-align:right}
.val-grid input[data-k="power_kw"]{min-width:4.5rem;text-align:right}
.val-grid input[data-k="mileage"]{min-width:6rem;text-align:right}
.val-grid .val-sel input{width:1rem;height:1rem;margin:0;vertical-align:middle}
.val-grid .val-note{color:var(--gray-500);font-size:.75rem}
.val-grid .val-err{display:inline-block;max-width:18rem;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;color:var(--danger-600);font-size:.75rem}
.val-grid td.val-link{min-width:5rem}
.val-grid tr[data-busy="1"] td{background:var(--gray-50)}
.val-hint{font-size:.8125rem;color:var(--gray-500)}
/* Valuations: Fuel and Body type as dropdowns, the column headers sort the sheet (request 05.10.2026) */
.val-grid td.val-cell select{display:block;width:100%;min-width:7rem;border:0;border-radius:0;background-color:transparent;padding:.5rem 1.5rem .5rem .5rem;font:inherit;font-size:.8125rem;color:var(--gray-950);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .375rem center;background-size:.875rem}
.val-grid td.val-cell select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary-600);background-color:var(--surface)}
.val-grid td.val-cell select.val-unknown{color:var(--danger-600)}
.val-grid td.val-cell select option{color:var(--gray-950)}
.val-grid .th-sort{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.val-grid .th-sort:hover{color:var(--gray-950)}
.val-grid .th-sort.on{color:var(--gray-950)}
.val-grid .th-sort[data-dir="asc"] svg{transform:rotate(180deg)}
/* Phones (request 05.10.2026): a calculation's header buttons fill the width, two or three to a row, Approve calculation
on a row of its own; cards and dialogs keep 1rem inside instead of 1.5rem; the Client's name has a row to itself */
@media (max-width:640px){
.page-header>.calc-actions{width:100%;gap:.5rem}
.calc-actions>*{flex:1 1 auto}
.calc-actions .btn{width:100%}
.calc-actions>form:has(.btn-success){flex-basis:100%}
.breadcrumbs{flex-wrap:wrap}
.calc-variants{margin-left:0}
.section-header,.card>.section-header{padding-left:1rem;padding-right:1rem}
.section-body,.ofg .section-body{padding:1rem}
.section-link{padding:0 1rem .5rem}
.ceo-head{padding:1rem}
.row5>.ofield:first-child{grid-column:1 / -1}
.modal-h,.modal-f{padding-left:1rem;padding-right:1rem}
.modal-b{padding:1rem}
.modal-b:has(>.ctable){overflow-x:auto}
}
/* Resale projection on a phone (request 05.10.2026): avto.net and mobile.de as buttons in the body instead of the header
links, and the study's table goes down, not across: a card per country, a label and its value per line */
.mstudy-links{display:none}
@media (max-width:640px){
.section-link[data-search-links]{display:none}
.mstudy-links{display:flex;gap:.5rem;margin:0 0 1rem}
.mstudy-links .btn{flex:1 1 0}
.mstudy-box{overflow:visible;border:0;border-radius:0;background:none}
.mstudy-t,.mstudy-t tbody,.mstudy-t tfoot,.mstudy-t tr{display:block}
.mstudy-t thead{display:none}
.mstudy-t tr{padding:.25rem .875rem;margin-bottom:.5rem;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--surface)}
.mstudy-t tfoot tr{margin-bottom:0;background:var(--gray-50)}
.mstudy-t td,.mstudy-t tfoot td{display:flex;align-items:baseline;gap:.3rem;padding:.4rem 0;border-top:0;border-bottom:1px solid var(--gray-100);text-align:right}
.mstudy-t tr td:last-child{border-bottom:0}
.mstudy-t td:first-child{font-weight:600;color:var(--gray-950)}
.mstudy-t td[data-l]::before{content:attr(data-l);margin-right:auto;color:var(--gray-500);font-weight:500}
.mstudy-t tbody tr:hover td{background:none}
}
/* Today on the dashboard (request 06.10.2026): the tasks as a checklist, each row a link to the filtered view */
.today{margin-bottom:1.5rem}
.today .section-header h3{flex:1}
.todo-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--gray-200)}
.todo + .todo{border-top:1px solid var(--gray-100)}
.todo a{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.5rem;color:inherit}
.todo a:hover{background:var(--gray-50)}
.todo-box{flex:none;width:1.125rem;height:1.125rem;border-radius:var(--radius-sm,.25rem);box-shadow:inset 0 0 0 1.5px var(--gray-400);display:grid;place-items:center;color:var(--surface)}
.todo-t{flex:1;min-width:0;display:flex;flex-direction:column}
.todo-t b{font-size:.875rem;font-weight:500;color:var(--gray-950)}
.todo-h{font-size:.75rem;color:var(--gray-500)}
.todo-n{font-size:1.125rem;font-weight:600;color:var(--gray-950);min-width:1.5rem;text-align:right}
.todo-go{color:var(--gray-400)}
/* Tools (dashboard.php): one card per tool, three in a row on wide screens (tools.abmobil.app, 13.10.2026) */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.tool-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.tool-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .75rem; background: var(--indigo-50); color: var(--indigo-600); }
.tool-icon .i { width: 1.5rem; height: 1.5rem; }
.tool-name { font-weight: 600; font-size: 1.05rem; }
.tool-text { color: var(--gray-500); font-size: .9rem; line-height: 1.45; }
.tool-go { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--indigo-600); font-weight: 500; font-size: .9rem; }
/* LTR sale calculation (ltr_sale.php, 13.10.2026): the cards one under another (as the Prime calculation), derived figures as read-only values */
.ltr-stack>.card{margin-bottom:1rem}
.ltr-form .form-grid.cols-3 .field.span-3{grid-column:1/-1}
.ltr-form input.num{text-align:right;font-variant-numeric:tabular-nums}
.ltr-out-wrap{display:flex;align-items:center;min-height:2.5rem;padding:.4rem .75rem;border-radius:var(--radius-md);background:var(--well);font-variant-numeric:tabular-nums}
.ltr-out-wrap.strong{font-weight:600}
.ltr-out.signed.good{color:var(--success-700)}.ltr-out.signed.bad{color:var(--danger-600)}
.ltr-out.big{font-size:1.25rem;font-weight:700}
.ltr-kv th{width:60%}.ltr-kv td{text-align:right;font-variant-numeric:tabular-nums}
.ltr-kv th .d{font-weight:400;color:var(--gray-500);font-size:.75rem}
.ltr-lines-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:720px){.ltr-lines-grid{grid-template-columns:1fr}}
.ltr-lines-title{font-weight:600;margin-bottom:.35rem;display:flex;justify-content:space-between;gap:.5rem}
.ltr-lines td{padding:.15rem .25rem}.ltr-lines td.num{width:9rem}
.ltr-lines input{width:100%;padding:.35rem .5rem;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--surface);color:inherit;font:inherit}
.ltr-lines input.num{text-align:right;font-variant-numeric:tabular-nums}
.ltr-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:2.5rem}
.ltr-caption{font-size:.8125rem}
.ltr-study{border-top:1px solid var(--gray-200);padding-top:1rem}
.ltr-study-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}
.ltr-study-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.ltr-study-table td.num,.ltr-study-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.ltr-results .section-header{background:var(--indigo-50)}
.good{color:var(--success-700)}.bad{color:var(--danger-600)}
/* Autosave (request 13.10.2026, as the Prime calculation): a field saves itself when left and flashes light green; the lines' inputs too */
.ltr-form .wrp,.ltr-form .ltr-lines input{transition:background-color .6s ease-out}
.ltr-form .wrp.saved-flash,.ltr-form .ltr-lines input.saved-flash{background-color:rgba(22,163,74,.16)!important;transition:none}
.ltr-form .wrp input,.ltr-form .wrp select,.ltr-form .wrp textarea{background:transparent}
.ltr-savestate{font-size:.8125rem;align-self:center;min-width:5rem;text-align:right}
.ltr-savestate.saving{color:var(--warning-700)}.ltr-savestate.failed{color:var(--danger-600)}