/* ========================================================================= Almanach — komponensréteg ------------------------------------------------------------------------- Betöltési sorrend: almanach-tokens.css → almanach-components.css Előfeltétel: a tokenfájl nélkül ez a fájl nem működik. Két felületmód, EGY osztálykészlet. A geometria a tokenből jön: marketing módban --radius = 0 és --radius-pill nincs (fallback 0), tehát ugyanez a `.btn` szögletes; product módban (``) pill. Ezért nincs `.btn-app`: a komponens nem tud a módról, a mód tud róla. FIGYELEM — két mért csapda, mindkettő visszaesésre hajlamos: 1) A háttérszínt MINDIG background-color-ral add meg, soha a background rövidítéssel: az törölné a papír-textúrát (background-image). 2) Ez a fájl NEM kerülhet @layer-be. A Tailwind preflight rétegezetlen, és a rétegezetlen szabály veri a rétegezettet specificitástól függetlenül — a .btn/.field minden vitatott tulajdonságát elvitte (mérve: border-width 0, padding 0, letter-spacing normal). Az ára: `class="btn px-4"` foltozás döntetlen és némán hatástalan, ezért a foltozás tiltott — burkolóelemre tedd az utility-t. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Elem-alapok ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--surface); color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--lh-body); margin: 0; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); } /* Folyékony címsor: a tokenskála asztali fix méret, 375 px-en a 62 px kilóg. */ @media (max-width: 767px) { h1 { font-size: clamp(32px, 9vw, 44px); } h2 { font-size: clamp(24px, 6.5vw, 30px); } h3 { font-size: 20px; } } /* A kizárás nem kozmetika: a:hover (0,1,1) legyőzné a .btn-primary-t (0,1,0), és a linkként megírt gombok hoveren siennára váltanának, aláhúzással. */ a:where(:not(.btn, .chip, .nav-brand, .navlink, .card-link, .pill-opt)) { color: var(--link, var(--accent)); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:where(:not(.btn, .chip, .nav-brand, .navlink, .card-link, .pill-opt)):hover { color: var(--sienna-hover, var(--accent)); } :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: inherit; } ::selection { background-color: var(--vellum); color: var(--ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------------- 2. Szövegosztályok ------------------------------------------------------------------------- */ /* Monospace verzál címke. Ez a rendszer hangja — soha nem kisbetűs, soha nem szoros. Papíron 11 px-en az Ink 3 csak 4.31:1, ezért ott .lbl-aa kell; kártyán (#FBF8F1) a sima .lbl 4.70:1, elég. */ .lbl { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-muted); } .lbl-aa { color: var(--ink-3-aa); } .lbl-lg { font-size: var(--text-label); letter-spacing: var(--ls-label); } /* Azonosító, fájlnév, felhasználónév: monospace és halk, de NEM verzál — a verzál meghamisítja az azonosítót (`admin` → `ADMIN`). */ .meta { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-muted); letter-spacing: 0; text-transform: none; } .meta-link { color: var(--text-secondary); text-decoration: underline; } .meta-link:hover { color: var(--text-primary); } .lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--text-secondary); max-width: 44ch; } .measure { max-width: var(--measure); } .read { max-width: var(--read-measure, var(--measure)); margin-inline: auto; } /* ------------------------------------------------------------------------- 3. Gombok — egy nézetben EGY elsődleges ------------------------------------------------------------------------- */ .btn { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-label); letter-spacing: var(--ls-label); /* A ritkítás az utolsó betű után is ott van, ezért a felirat fél ritkításnyival balra ülne — az ugyanekkora behúzás bal oldalt kiegyenlíti (mérve: 1,7–1,9 px eltérés a bal és a jobb sáv között, JAVITASOK.md H-28). */ text-indent: var(--ls-label); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; width: 100%; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill, 0); background-color: transparent; cursor: pointer; text-decoration: none; transition: background-color .12s linear, color .12s linear; } @media (min-width: 640px) { .btn { display: inline-flex; width: auto; height: var(--control-height, 48px); padding: 0 26px; } } .btn-primary { background-color: var(--surface-inverse); color: var(--text-on-inverse); } .btn-secondary { background-color: transparent; color: var(--text-primary); border: var(--border-button) solid var(--border-strong); } .btn-accent { background-color: var(--accent); color: var(--text-on-accent); } .btn-quiet { background-color: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border-hairline); } .btn-ghost { background-color: transparent; color: var(--text-secondary); } .btn-primary:hover { background-color: var(--ink-2); } .btn-accent:hover { background-color: var(--sienna-hover, var(--accent)); } .btn-secondary:hover { background-color: var(--surface-fill); } .btn-quiet:hover { background-color: var(--surface-fill); color: var(--text-primary); } .btn-ghost:hover { background-color: var(--surface-fill); color: var(--text-primary); } .btn[disabled], .btn[aria-disabled='true'] { background-color: var(--vellum); color: var(--text-muted); border-color: transparent; cursor: not-allowed; } /* A product mód gombfelirata antikva, nem verzál mono: a pill gombon a 0.16em ritkítás 48 px-en már sávot rajzol, nem szót. Az elsődleges ÉS a másodlagos akció egyszerre vált — egymás melletti gombárnál a kétféle feliratnyelv véletlennek olvasódik. */ .app .btn-accent, .app .btn-primary, .app .btn-secondary, .app .btn-quiet, [data-almanach-mode='product'] .btn-accent, [data-almanach-mode='product'] .btn-primary, [data-almanach-mode='product'] .btn-secondary, [data-almanach-mode='product'] .btn-quiet { font-family: var(--font-serif); font-size: 18px; font-weight: 400; letter-spacing: 0; text-indent: 0; text-transform: none; } /* A variánsok SORRENDJE tartalmi kérdés: .btn-block a .btn-sm ELŐTT némán width:auto-ra megy. Először méret, utána szélesség. */ .btn-sm { height: var(--control-height-sm, 40px); padding: 0 18px; font-size: var(--text-micro); } .btn-block { width: 100%; } .btn-icon { width: 44px; height: 44px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background-color: transparent; color: var(--text-muted); border-radius: var(--radius-pill, 0); cursor: pointer; } .btn-icon:hover { color: var(--text-primary); background-color: var(--surface-fill); } .btn-icon svg { width: 20px; height: 20px; } .btn-icon-danger:hover { color: var(--accent); } /* Szöveges gomb: a vonal és a szöveg EGYÜTT vált siennára. */ .btn-text { display: inline-flex; align-items: center; min-height: var(--touch-min); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-primary); background: none; border: 0; padding: 0; border-bottom: 1.5px solid var(--border-strong); cursor: pointer; } .btn-text:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ------------------------------------------------------------------------- 4. Chip, pötty, kód ------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 12px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); background-color: transparent; border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); text-decoration: none; } .chip-aa { color: var(--ink-3-aa); } .chip-fill { background-color: var(--surface-fill); border-color: transparent; } .chip-action { cursor: pointer; } .chip-action:hover { color: var(--text-primary); border-color: var(--border-strong); } .chip-src { text-transform: none; letter-spacing: 0; font-size: var(--text-small); } .chip-file { max-width: 220px; } .chip-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 7 px: olive = élesítve, sienna = jóváhagyásra vár, slate = fut, ink-3 = archivált. A szintet a pötty hordozza, nem a szöveg színe — siennából soha nem lesz kis szöveg. */ .dot { width: 7px; height: 7px; flex: none; display: inline-block; border-radius: var(--radius-pill, 0); } .dot-olive { background-color: var(--approved); } .dot-late { background-color: var(--bordeaux, var(--accent)); } .dot-sienna { background-color: var(--accent); } .dot-slate { background-color: var(--info); } .dot-muted { background-color: var(--ink-3); } .dot-pulse { animation: almanach-pulse 1.8s ease-in-out infinite; } @keyframes almanach-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } .code { font-family: var(--font-mono); font-size: var(--text-code); background-color: var(--data-fill, var(--vellum)); color: var(--data-ink, var(--text-primary)); padding: 2px 7px; border-radius: var(--radius-sm, 0); } /* Adatblokk: a gépi tartalom hűvös felületen áll, saját görgetéssel. A width:max-content és a burkoló CSAK EGYÜTT működik — nélküle 390 px-en a tábla karakterenként tördel („UTOLS / Ó / MOZGÁ / S"). */ .datablock { background-color: var(--data-fill, var(--vellum)); border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-sm, 0); padding: var(--space-4); overflow-x: auto; } .datablock > pre { margin: 0; width: max-content; min-width: 100%; font-family: var(--font-mono); font-size: var(--text-code); color: var(--data-ink, var(--text-primary)); } /* ------------------------------------------------------------------------- 5. Űrlap — a címke a mező FÖLÉ kerül, így üresen is olvasható ------------------------------------------------------------------------- */ .field-row { display: flex; flex-direction: column; gap: 7px; } .field-label { display: block; font-size: var(--text-small); color: var(--text-secondary); } .field { width: 100%; height: var(--control-height, 48px); padding: 0 18px; font-family: var(--font-serif); font-size: var(--text-body); color: var(--text-primary); background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); } .field::placeholder { color: var(--text-muted); opacity: 1; } .field:hover { border-color: var(--app-line-firm, var(--border-hairline)); } .field:focus-visible { border-color: var(--accent); outline-color: var(--accent); } .field-sm { height: 38px; padding: 0 12px; font-size: var(--text-small); } .field-area { height: auto; min-height: 96px; padding: 12px 16px; border-radius: var(--radius, 0); line-height: 1.55; resize: vertical; } .field-num { font-family: var(--font-mono); text-align: right; } /* Hiba: a KERET vált siennára, a szöveg nem. A mondat teljes mondat. */ .field[aria-invalid='true'] { border-color: var(--accent); border-width: 1.5px; } .field-error { display: flex; align-items: flex-start; gap: 11px; font-size: var(--text-body); line-height: 1.5; color: var(--sienna-deep, var(--ink-2)); background-color: var(--sienna-wash, var(--surface-fill)); border: var(--hairline) solid var(--sienna-wash-ln, var(--border-hairline)); border-radius: var(--radius, 0); padding: 12px 14px; } .field-error svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke: var(--sienna-text, var(--accent)); } .field-hint { font-size: var(--text-small); color: var(--text-muted); } /* Jelölőelem. 18 px a doboz, de a kattintható sáv legalább 44 px. */ .choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); font-size: 16px; color: var(--text-secondary); cursor: pointer; } .choice-box { width: 18px; height: 18px; flex: none; background-color: var(--surface-raised); border: 1px solid var(--app-line-firm, var(--border-strong)); border-radius: 5px; } .choice-box-round { border-radius: var(--radius-pill, 0); } .choice input:checked + .choice-box { background-color: var(--accent); border-color: var(--accent); } /* Kapcsoló — admin: MCP, skill, jogosultság */ .switch { width: 44px; height: 26px; flex: none; padding: 3px; background-color: var(--vellum); border: 0; border-radius: var(--radius-pill, 0); cursor: pointer; display: flex; } .switch > span { display: block; width: 20px; height: 20px; background-color: var(--paper-hi); border-radius: var(--radius-pill, 0); transition: transform .14s ease; } .switch[aria-checked='true'] { background-color: var(--approved); } .switch[aria-checked='true'] > span { transform: translateX(18px); } /* Pill-váltó: AI Chat / Admin a felső sávban. Két-három rövid opcióra. */ .pill-switch { display: inline-flex; gap: 2px; padding: 3px; background-color: var(--surface-fill); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); } .pill-opt { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; font-size: var(--text-small); color: var(--text-secondary); border-radius: var(--radius-pill, 0); text-decoration: none; } .pill-opt[aria-current='page'] { background-color: var(--surface-raised); color: var(--text-primary); box-shadow: 0 1px 2px rgba(33,29,23,.06); } /* ------------------------------------------------------------------------- 6. Felületek: kártya, callout, panel ------------------------------------------------------------------------- */ .card { background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); padding: var(--space-5); } .card-lg { border-radius: var(--radius-lg, 0); padding: 28px; } /* Kijelölt listaelem: 3 px sienna él a bal oldalon. A „bal oldali színes csík" a marketing módban tiltott — a product listában viszont ez az egyetlen jel, ami görgetés közben periférián is látszik. */ .card-sel { background-color: var(--surface-raised); border-color: var(--app-line-firm, var(--border-strong)); box-shadow: inset var(--radius-xs, 3px) 0 0 var(--accent); } .callout { background-color: var(--surface-alt); border-block: var(--hairline) solid var(--border-hairline); padding: var(--space-4) 0; } .app .callout, [data-almanach-mode='product'] .callout { border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); padding: 14px 16px; } .inverse-block { background-color: var(--surface-inverse); color: var(--text-on-inverse); padding: var(--space-6); } .inverse-block .lbl { color: var(--vellum); } .panel { background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-md, 0); overflow: hidden; } .panel-head { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: var(--hairline) solid var(--border-hairline); } .panel-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } /* ------------------------------------------------------------------------- 7. Táblázat — zebracsíkozás nincs ------------------------------------------------------------------------- */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3-aa); text-align: left; font-weight: 500; padding: var(--space-2) var(--space-3); border-bottom: var(--rule-strong) solid var(--border-strong); white-space: nowrap; } .tbl td { padding: 11px var(--space-3); border-bottom: var(--hairline) solid var(--border-hairline); vertical-align: top; } .tbl td:last-child, .tbl th:last-child { text-align: right; } .tbl-num td:nth-child(n+2) { font-family: var(--font-mono); font-size: var(--text-small); } /* Adat-táblázat: hűvös fejléc, a számok slate-ben. Token-, napló-, használati táblák — minden, ami mérés és nem mondat. */ .tbl-data th { background-color: var(--data-fill, var(--vellum)); color: var(--data-ink, var(--ink-2)); border-bottom-color: var(--data-line, var(--border-hairline)); border-bottom-width: var(--hairline); } .tbl-data td { border-bottom-color: var(--data-line, var(--border-hairline)); } .tbl-wrap { overflow-x: auto; border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-md, 0); } .tbl-wrap > .tbl { width: max-content; min-width: 100%; } /* ------------------------------------------------------------------------- 8. Alkalmazás-héj: felső sáv, oldalsáv ------------------------------------------------------------------------- */ .nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h, 60px); padding-inline: var(--page-margin-s); border-bottom: var(--hairline) solid var(--border-hairline); background-color: var(--surface-alt); } @media (min-width: 1024px) { .nav { padding-inline: 28px; } } /* Vízszintes lockup: rajz + ÉLŐ Newsreader-szó. 22 px szóhoz 34 px rajz, 13 px köz. A szó soha nem görbe és soha nem sienna. */ .nav-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-size: 20px; letter-spacing: -.012em; color: var(--text-primary); text-decoration: none; } .nav-jel { width: 31px; height: auto; display: block; } @media (min-width: 1024px) { .nav-brand { font-size: 22px; gap: 13px; } .nav-jel { width: 34px; } } .navlinks { display: flex; align-items: center; gap: 30px; } .navlink { display: inline-flex; align-items: center; min-height: var(--touch-min); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3-aa); text-decoration: none; } .navlink:hover, .navlink.on { color: var(--text-primary); } /* Mobil menü:

a topbar jobb blokkjában. A summary a kapcsoló (a .btn-icon geometriájával: 44×44 tapintófelület, benne a menu és a bezar ikon — az [open] állapot váltja őket), a .nav-menu-panel a topbar ALÁ nyílik teljes szélességben (ezért a .nav position: relative), ugyanazokkal a .navlink-ekkel, amik asztalon a topbarban állnak. JS nélkül működik (natív details), a summary billentyűzetről fókuszálható és Enterrel/szóközzel nyílik. 767 px-ig él; felette display: none, mert ott a .navlinks a topbarban van. */ .nav-menu { display: none; } .nav-menu > summary { list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary svg { width: 24px; height: 24px; } .nav-menu-open, .nav-menu-close { display: inline-flex; } .nav-menu-close, .nav-menu[open] .nav-menu-open { display: none; } .nav-menu[open] .nav-menu-close { display: inline-flex; } .nav-menu-panel { position: absolute; inset-inline: 0; top: 100%; z-index: 20; padding: var(--space-2) var(--page-margin-s) var(--space-3); background-color: var(--surface-alt); border-bottom: var(--hairline) solid var(--border-hairline); } .nav-menu-panel .navlinks { flex-direction: column; align-items: stretch; gap: 0; } .nav-menu-sep { margin: var(--space-2) 0; border: 0; border-top: var(--hairline) solid var(--border-hairline); } @media (max-width: 767px) { .nav-menu { display: block; } } .shell { display: flex; min-height: 0; flex: 1; } .sidebar { width: var(--sidebar-w, 312px); flex: none; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background-color: var(--surface-alt); border-right: var(--hairline) solid var(--border-hairline); overflow-y: auto; } .sidebar-group { display: flex; flex-direction: column; gap: var(--space-2); } .sidebar-group > .lbl { padding-inline: 2px; } /* Beszélgetés-kártya: 12 px sarok, 1 px keret, kijelölve 3 px sienna él. A dátumcsoport fejléce .lbl .lbl-aa. */ .session-card { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; background-color: transparent; border: var(--hairline) solid transparent; border-radius: var(--radius, 0); text-decoration: none; color: var(--text-primary); cursor: pointer; } .session-card:hover { background-color: var(--surface-raised); border-color: var(--app-line-soft, var(--border-hairline)); } .session-card[aria-current='true'] { background-color: var(--surface-raised); border-color: var(--app-line, var(--border-hairline)); box-shadow: inset var(--radius-xs, 3px) 0 0 var(--accent); } .session-title { font-size: 16px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-meta { display: flex; align-items: center; gap: var(--space-2); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; background-color: var(--surface); } /* ------------------------------------------------------------------------- 9. Chat ------------------------------------------------------------------------- */ .thread { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-5); } .thread > .read { display: flex; flex-direction: column; gap: 28px; } /* Kérdés: halk folt jobbra igazítva. */ .msg-q { display: flex; justify-content: flex-end; } .bubble { max-width: 80%; padding: 12px 16px; background-color: var(--surface-fill); border: var(--hairline) solid var(--app-line-soft, transparent); border-radius: var(--radius-md, 0); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; } /* Válasz: keret nélkül áll a lapon, előtte sienna § — a szakaszjel a forrásmegjelölés jele, NEM logó. */ .msg-a { display: flex; gap: 14px; } .msg-mark { flex: none; margin-top: -1px; font-size: 20px; line-height: 1.5; color: var(--accent); } .msg-mark-muted { color: var(--text-muted); } .msg-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .msg-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-primary); } .msg-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .msg-tools { display: flex; align-items: center; gap: var(--space-1); } /* Beviteli sor: hajszálvonal fölötte, árnyék nincs; a küldés gomb 48×48 és a mező jobb végén ül. */ .composer { flex: none; padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--hairline) solid var(--border-hairline); background-color: var(--surface); } .composer-box { display: flex; align-items: flex-end; gap: var(--space-2); padding: 8px 8px 8px 18px; background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-lg, 0); } .composer-box:focus-within { border-color: var(--accent); } .composer-input { flex: 1; min-width: 0; border: 0; background: none; resize: none; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--text-primary); padding: 12px 0; max-height: 168px; } .composer-input:focus-visible { outline: none; } .composer-send { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background-color: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-pill, 0); cursor: pointer; } .composer-send:hover { background-color: var(--sienna-hover, var(--accent)); } .composer-send[disabled] { background-color: var(--vellum); color: var(--text-muted); cursor: not-allowed; } .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); } /* ------------------------------------------------------------------------- 10. Admin: kapcsolósor, ACL-rács ------------------------------------------------------------------------- */ .rowlist { display: flex; flex-direction: column; } .rowitem { display: flex; align-items: center; gap: var(--space-4); padding: 14px var(--space-4); border-bottom: var(--hairline) solid var(--app-line-soft, var(--border-hairline)); } .rowitem:last-child { border-bottom: 0; } .rowitem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rowitem-title { font-size: 17px; } .rowitem-sub { font-size: var(--text-small); color: var(--text-secondary); } /* --acl-cols: ahány jogosultság-oszlop van. Az auto-fit itt nem jó: a fejléc-cellák számát nem ismeri, és félsornyival elcsúsztatja a rácsot. */ .acl { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(var(--acl-cols, 3), minmax(72px, 1fr)); align-items: stretch; gap: 1px; background-color: var(--data-line, var(--border-hairline)); border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-md, 0); overflow: hidden; } .acl > * { display: flex; align-items: center; background-color: var(--surface-raised); padding: 10px 12px; } .acl > .acl-h { background-color: var(--data-fill, var(--vellum)); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--data-ink, var(--ink-2)); justify-content: center; } .acl-cell { justify-content: center; } /* ------------------------------------------------------------------------- 11. Modális, toast, üres állapot ------------------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; background-color: rgba(33,29,23,.42); display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .modal { width: 100%; max-width: 460px; background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-lg, 0); padding: 26px; display: flex; flex-direction: column; gap: var(--space-4); } .modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; } .toast { position: fixed; inset-inline: var(--space-4); bottom: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; background-color: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius, 0); } @media (min-width: 768px) { .toast { inset-inline: auto var(--space-5); max-width: 28rem; } } .toast-dot { margin-top: 8px; flex: none; } .toast-close { margin-left: auto; background: none; border: 0; color: var(--vellum); cursor: pointer; } .toast-close:hover { color: var(--paper); } .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) var(--space-5); text-align: center; } .empty > img { width: 44px; height: auto; opacity: .8; } .empty-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } /* --- Állapot-badge és összeg (ügyfélportál) -------------------------------- A pötty továbbra is a jel, a badge csak keretet ad neki: pénzügyi listában a puszta pötty + szöveg túl halk, a kitöltött badge viszont színes foltok sorát rajzolja. Ezért: 1 px keret, átlátszó belső, benne a 7 px pötty. */ .badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; font-size: var(--text-small); color: var(--text-secondary); background-color: transparent; border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); white-space: nowrap; } .badge-late { color: var(--bordeaux-deep, var(--ink-2)); border-color: var(--bordeaux-line, var(--border-hairline)); background-color: var(--bordeaux-wash, transparent); } .badge-wait { color: var(--sienna-deep, var(--ink-2)); border-color: var(--sienna-wash-ln, var(--border-hairline)); } .badge-ok { color: var(--ink-2); border-color: var(--app-line-firm, var(--border-hairline)); } /* Összeg: monospace és tabuláris, hogy a listában a számjegyek egy vonalba essenek. A pénznem halk és kisebb — a szám a főszereplő. */ .money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; } .money-cur { font-size: .8em; color: var(--text-muted); margin-left: .35em; } .money-lg { font-size: 30px; } .money-late { color: var(--bordeaux, inherit); } /* Összegző sorok: nettó / áfa / bruttó. A bruttó felül 2 px tintavonal. */ .sum { display: flex; flex-direction: column; } .sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding: 8px 0; font-size: var(--text-small); color: var(--text-secondary); } .sum-total { border-top: var(--rule-strong) solid var(--border-strong); margin-top: var(--space-2); padding-top: 12px; font-size: var(--text-body); color: var(--text-primary); } /* --- Adatpár: címke fölül, érték alul (fiókadat, számlaadat) ----------- */ .pair { display: flex; flex-direction: column; gap: 3px; } .pair > .lbl { margin-bottom: 1px; } /* --- Kiválasztható opciókártya (fizetési mód) --------------------------- */ .pick { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); cursor: pointer; text-align: left; } .pick:hover { border-color: var(--app-line-firm, var(--border-strong)); } .pick[aria-checked='true'] { border-color: var(--accent); border-width: 1.5px; } .pick-main { display: flex; flex-direction: column; gap: 3px; } /* ------------------------------------------------------------------------- 12. Telefon — 390 px a mérték ------------------------------------------------------------------------- Az app-héj mobilon EGY nézet: a lista és a beszélgetés váltakozik, nem szűkül. Amíg a lista van elöl, a fejléc morzsája elrejtve. ------------------------------------------------------------------------- */ @media (max-width: 767px) { .shell { flex-direction: column; } .sidebar { width: auto; border-right: 0; border-bottom: var(--hairline) solid var(--border-hairline); max-height: 45vh; } .shell[data-view='thread'] .sidebar { display: none; } .shell[data-view='list'] .main { display: none; } .thread { padding: var(--space-5) var(--space-4); } .bubble { max-width: 88%; } .msg-body p { font-size: 16px; } .composer { padding: var(--space-3) var(--space-4) var(--space-4); } .composer-box { padding-left: 14px; } .btn-icon, .composer-send { min-width: var(--touch-min); min-height: var(--touch-min); } .navlinks { gap: var(--space-4); } .acl { grid-template-columns: 1fr; } .acl > .acl-h:not(:first-child) { display: none; } .rowitem { flex-wrap: wrap; } .sum-row { gap: var(--space-4); } .money-lg { font-size: 26px; } } /* ------------------------------------------------------------------------- 13. Nyomtatás ------------------------------------------------------------------------- */ @media print { body { background-color: #fff; font-size: 12pt; } .app .sidebar, .app .composer, .toast, .app .btn { display: none !important; } .card, .panel, .tbl-wrap { break-inside: avoid; } a { color: var(--ink); text-decoration: none; } }