/* ==========================================================================
Eclipse rebrand — token overlay (v2 — design direction)
--------------------------------------------------------------------------
Cél: a meglévő POC vizuálisan azonnal a Dealer POC Design Direction
dokumentumban definiált irányba mozduljon — Razor / komponens
szintű változtatás NÉLKÜL, csak a CSS-tokenek és néhány globális
szabály felülírásával.
HOGYAN KELL HASZNÁLNI
--------------------------------------------------------------------------
1. Másold ezt a fájlt a meglévő stylesheet melle (pl. wwwroot/css/).
2. Az `App.razor` / `_Host.cshtml` / `index.html` -jében az
eclipse-brand.css UTÁN linkeld:
3. Build, hard refresh. Semmi más változás nem kell.
Ha bármelyik token a meglévő `eclipse-brand.css`-ben már szerepel a
`:root`-on, ez a fájl egyszerűen felülírja (specifikusabb cascade-pozíció).
Ha új token, akkor új token — a régi komponensek nem hivatkoznak rá,
de a 2-3. implementációs lépéskor használni fogjuk.
========================================================================== */
:root {
/* ────────────────────────────────────────────────────────────────────
LAYOUT — a topbar magassága (#1832)
A MainLayout topbarja sticky (top:0); az oldalak saját sticky elemei
(pl. a szerkesztő morzsa-sávja) ehhez képest kell tapadjanak, különben
ráúsznak és eltakarják a navigációt. A mért magasság 60.5px, lefelé
kerekítve — így fél pixel átfedés van rés helyett.
Kis kijelzőn a fejléc hamburger-gombra vált (44px érintőfelület +
2×10px padding = 64px) — a token a BP-M sávban ezért nagyobb (#1839).
──────────────────────────────────────────────────────────────────── */
--topbar-h: 60px;
/* ────────────────────────────────────────────────────────────────────
SZÍN — háttér-rétegek
A meglévő POC valószínűleg egyetlen `--bg` / `--bg-color` tokenre
épít. Itt 3-rétegű rendszert vezetünk be:
canvas → a legkülső háttér (page, body)
elev → a kártyák / panelek (kiemelt felület)
surface → másodlagos lapozó-felület (toolbar, fejléc-háttér, tree)
A `--bg` aliast meghagyjuk visszafelé-kompatibilitás miatt.
──────────────────────────────────────────────────────────────────── */
--bg-canvas: #f7f8fa; /* page background — designhű szürke */
--bg-elev: #ffffff; /* card, panel */
--bg-surface: #eef1f5; /* toolbar, tree header */
--bg: var(--bg-canvas); /* legacy alias */
/* ────────────────────────────────────────────────────────────────────
SZÍN — Eclipse-sötét (header, KPI-band)
──────────────────────────────────────────────────────────────────── */
--eclipse-dark: #0a0e1a;
--eclipse-ink: #e5e7eb; /* sötét-mód text — FIGYELEM: a brand-overlay-ben a --eclipse-ink másra van használva, az ALIAS-PATCH blokk lent felülírja */
/* ────────────────────────────────────────────────────────────────────
SZÍN — szöveg-skála
A meglévő `--text-color` legtöbb helyen rendben van; ezt az `--ink`
aliassal pótoljuk, és a halványuló variánsokat is bevezetjük.
──────────────────────────────────────────────────────────────────── */
--ink: #0e131d; /* primary text */
--ink-muted: #4b5563; /* secondary text, labels */
--ink-subtle: #6b7280; /* tertiary, captions */
--ink-faint: #9aa3b2; /* placeholder, breadcrumbs */
--text-color: var(--ink); /* legacy alias */
/* ────────────────────────────────────────────────────────────────────
SZÍN — hairline / vonalak
Egységes 3-szintű vonalrendszer. A meglévő `--border-color` aliasként.
──────────────────────────────────────────────────────────────────── */
--line: #e6e8ee; /* hairline (default) */
--line-bright: #d6dae3; /* aktív input border */
--line-strong: #c4cad6; /* nyomatékos elválasztó */
--border-color: var(--line); /* legacy alias */
/* ────────────────────────────────────────────────────────────────────
SZÍN — Corona (akcent-arany — primer brand-szín)
POC-ben a `--rz-primary` és `--eclipse-corona` névteret használjuk —
az ALIAS-PATCH blokk lent ezeket kapcsolja rá az új coronára.
──────────────────────────────────────────────────────────────────── */
--corona: #c89366;
--corona-deep: #8d5d33;
--corona-soft: rgba(200,147,102,.14);
--accent-color: var(--corona); /* legacy alias — POC-ben nem használt */
--primary: var(--corona); /* legacy alias — POC-ben nem használt */
/* ────────────────────────────────────────────────────────────────────
SZÍN — Signal (kék — szekunder, kötés-vizualizáció, info)
Csak adat-kapcsolatok és tájékoztató jelek; SOHA nem brand-szín.
──────────────────────────────────────────────────────────────────── */
--signal: #2f6df0;
--signal-deep: #1d4ed8;
--signal-soft: rgba(47,109,240,.10);
/* ────────────────────────────────────────────────────────────────────
SZÍN — szemantikus (siker / figyelmeztetés / hiba)
──────────────────────────────────────────────────────────────────── */
--success: #15803d;
--success-soft: rgba(21,128,61,.10);
--warning: #b45309;
--warning-soft: rgba(180,83,9,.10);
--danger: #b91c1c;
--danger-soft: rgba(185,28,28,.10);
/* ────────────────────────────────────────────────────────────────────
TIPOGRÁFIA — családok
Mind a 3 stack rendszer-fontokra is visszaesik, ha nincs custom.
Ajánlott Google-fontok: Fraunces (serif), Inter (sans), JetBrains Mono.
Importálás az App.razor head-jében (lásd ott).
──────────────────────────────────────────────────────────────────── */
--serif: 'Instrument Serif', 'Source Serif Pro', Georgia, serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
/* ────────────────────────────────────────────────────────────────────
SUGÁR / ÁRNYÉK
──────────────────────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-card: 0 1px 0 rgba(17,24,39,.02), 0 8px 28px rgba(17,24,39,.04);
--shadow-pop: 0 12px 40px rgba(17,24,39,.10);
/* ────────────────────────────────────────────────────────────────────
SPECIÁLIS — focus-ring (egységes input-fókusz)
──────────────────────────────────────────────────────────────────── */
--focus-ring: 0 0 0 2px var(--corona-soft);
}
/* ==========================================================================
BREAKPOINTOK — SSOT (#1839)
--------------------------------------------------------------------------
A CSS media query NEM tud var()-t olvasni, ezért a töréspontok nem lehetnek
tokenek — ez a lista a hivatkozási alap, minden .css ezt a négy sávot
használja (a korábbi ad-hoc 620/720/880/980/1100 értékek helyett):
BP-S max-width: 599px telefon álló (teszt: 390×844)
BP-M max-width: 899px tablet álló / nagy tel. (teszt: 768×1024)
BP-L max-width: 1199px tablet fekvő (teszt: 1024×768)
(fölötte) laptop / asztali (teszt: 1280×800)
A sávok EGYMÁSBA ÁGYAZÓDNAK: ami BP-M-ben áll, az BP-S-en is érvényes,
ezért a szűkebb sáv csak a különbséget írja le.
Használat: `@media (max-width: 899px)` ← mindig a fenti értékek egyike.
========================================================================== */
/* A fejléc hamburgerre vált BP-M alatt — a magasabb sáv miatt a sticky
morzsa-sáv és a szerkesztő-rail igazítása is együtt mozog (#1832). */
@media (max-width: 899px) {
:root { --topbar-h: 64px; }
}
/* ==========================================================================
ALIAS-PATCH — Dealer POC kontextus (új blokk, a felmérés alapján)
--------------------------------------------------------------------------
A meglévő POC sem `--accent-color`, sem `--primary`, sem `--text-color`
aliasokat NEM használ — a Radzen `--rz-*` és a saját `--eclipse-*`
névteret hajtja meg. Ez a blokk ezt a két névteret köti rá az új
tokenekre, hogy az eclipse-brand.css UTÁN linkelt overlay azonnal
hatásos legyen, MINDENFÉLE komponens-átírás NÉLKÜL.
========================================================================== */
:root {
/* --- Eclipse alias-skála (eclipse-brand.css használja) ---
A --eclipse-ink fent a tokens.diff.css "sötét-mód text" jelentésű, de
a brand-overlayben világos szöveg → itt visszaállítjuk a primary-ink-re. */
/* Oldalháttér (body, belépő-oldalak, Radzen base) — az ajánlat-szerkesztő
mélyebb #eceef3 canvasához igazítva, hogy MINDEN oldal egyforma legyen.
A --bg-canvas (#f7f8fa) szándékosan világosabb marad: a szerkesztőn belül
világos akcentus (lépés-hover, pnum, util-grid páros sorok) épít rá. */
--eclipse-bg: #eceef3;
--eclipse-bg-elevated: var(--bg-elev);
--eclipse-bg-surface: var(--bg-surface);
--eclipse-ink: var(--ink);
--eclipse-ink-muted: var(--ink-muted);
--eclipse-ink-subtle: var(--ink-subtle);
--eclipse-ink-faint: var(--ink-faint);
--eclipse-line: var(--line);
--eclipse-line-bright: var(--line-bright);
--eclipse-corona: var(--corona);
--eclipse-corona-deep: var(--corona-deep);
--eclipse-corona-bright: #e8c48e; /* nincs új ekvivalens, megmarad */
--eclipse-signal: var(--signal);
--eclipse-signal-bright: var(--signal-deep);
--eclipse-success: var(--success);
--eclipse-warning: var(--warning);
--eclipse-danger: var(--danger);
/* --- Radzen tokens — accent + focus-ring áthajtása az új coronára --- */
--rz-primary: var(--corona);
--rz-primary-dark: var(--corona-deep);
--rz-primary-light: var(--corona); /* régi #e8c48e túl harsány hover-en */
--rz-secondary: var(--signal);
--rz-secondary-dark: var(--signal-deep);
--rz-success: var(--success);
--rz-warning: var(--warning);
--rz-danger: var(--danger);
--rz-info: var(--signal);
--rz-input-focus-shadow: var(--focus-ring);
--rz-link-color: var(--signal);
--rz-text-anchor-color: var(--signal);
--rz-text-anchor-hover-color: var(--corona-deep);
/* Display-tipográfia — Fraunces serif (App.razor Google Fonts importálja) */
--rz-text-h1-font-family: var(--serif);
--rz-text-h2-font-family: var(--serif);
--rz-text-mono-font-family: var(--mono);
/* Sidebar / select hover-bg az új coronára */
--rz-sidebar-item-hover-background-color: var(--corona-soft);
--rz-sidebar-item-selected-background-color: var(--corona-soft);
--rz-sidebar-item-selected-color: var(--corona-deep);
--rz-listbox-item-hover-background-color: var(--corona-soft);
--rz-listbox-item-selected-background-color: var(--corona-soft);
--rz-listbox-item-selected-color: var(--corona-deep);
--rz-datatable-row-hover-background-color: rgba(200,147,102,.06);
--rz-datatable-row-selected-background-color: var(--corona-soft);
--rz-badge-background-color: var(--corona);
}
/* ==========================================================================
GLOBÁLIS OVERRIDE-OK — minimális set, csak ami a régi UI-t azonnal
"Eclipse-rebrandeli" komponens-csere nélkül.
========================================================================== */
/* 1) Numerikus értékek mindenhol tabular-nums-ban
────────────────────────────────────────────────────────────────────
A POC-ben a részlet / kamat / összeg-mezők változó-szélességű
számokkal jelennek meg, ami "ugráló" érzetet ad. Ez 1 sorral fix.
A Radzen belső input-osztálya .rz-spinner-input — direkt selectorral
érjük el, mert a generic .rz-numeric input öröklődést a Radzen CSS
bizonyos verziókban felülírja. */
.rz-numeric input,
.rz-numeric input.rz-spinner-input,
input.rz-spinner-input,
.rz-spin-input,
.rz-numeric .rz-spin-input,
.rz-textbox.numeric input,
input[type="number"],
.k-numerictextbox input,
[data-numeric="true"],
.num,
.numeric {
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
font-family: var(--mono) !important;
}
/* 2) Általános letter-spacing reset magyar UI-szövegre
A régi POC sok helyen az alapból "túl tág" Roboto-track-eket örökli.
Az `.eyebrow` / `.label-eyebrow` osztályokon SZÁNDÉKOS a tágítás —
azokra nem terjed ki ez a reset. */
body, .rz-content, .rz-card, .form-label, label {
letter-spacing: 0;
}
/* 3) Eyebrow / kis-caps utility (új — a 2-3. lépésben fogjuk használni) */
.eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .22em;
color: var(--corona-deep);
}
/* 4) Input-fókusz — corona-ring (Radzen + sima input)
Ha a POC `--accent-color`-t alias-elte fent corona-ra, akkor ez már
automatikusan jó. Ez a blokk biztosítja a sárgás Bootstrap-fókusz
eltüntetését. */
.rz-textbox:focus-within,
.rz-numeric:focus-within,
.rz-dropdown:focus-within,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
border-color: var(--corona) !important;
box-shadow: var(--focus-ring) !important;
}
/* 5) Pill-státusz komponens (új — a 2. implementációs lépés használja)
Egyszerű span-alapú, semmi JS. Razor-helper külön doksiban.
Használat: Elkészítve */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 10px;
border-radius: 999px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: .01em;
white-space: nowrap;
border: 1px solid transparent;
}
.pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
.pill-elkeszitve { background: var(--bg-surface); color: var(--ink-muted); border-color: var(--line-bright); }
.pill-kikuldve { background: var(--signal-soft); color: var(--signal-deep); border-color: rgba(47,109,240,.25); }
.pill-bekuldve { background: var(--corona-soft); color: var(--corona-deep); border-color: rgba(200,147,102,.30); }
.pill-elfogadva { background: var(--success-soft); color: var(--success); border-color: rgba(21,128,61,.25); }
.pill-meghiusult { background: var(--danger-soft); color: var(--danger); border-color: rgba(185,28,28,.25); }
.pill-visszaadott{ background: #fef3c7; color: #b45309; border-color: rgba(180,83,9,.25); }
.pill-elutasitott{ background: var(--danger-soft); color: var(--danger); border-color: rgba(185,28,28,.25); }
.pill-atemelve { background: #e0e7ff; color: #3730a3; border-color: rgba(55,48,163,.22); }