/* ========================================================================== * DocAI Light — világos DocAI arculat (DOCAI_DESIGN=light) * (A Public Sans fontot a layout tölti -kel, nem @import-tal.) * Aktiválja: html[data-theme="light"]. Vékony override-réteg a meglévő * (Inspinia) világos alapon. * * ⚠️ FONTOS — GOMBOK ÉS ÁLLAPOT-SZÍNEK: * A gombok és badge-ek színe a rendszerben gyakran FUNKCIONÁLIS állapotot * kódol (pl. partner-/doctype-validáció eredménye: success/warning/danger, * a DocAI-gomb text-info/text-danger jelölése). Ezt EZ A RÉTEG SZÁNDÉKOSAN * NEM színezi át — a "btn-", "badge-", "label-" szemantikus színek a base témából * jönnek. A gombok átszínezése külön tervezést igényel (lásd * docs/2026-06-22-DOCAI_LIGHT_DESIGN.md → „Nyitott: gomb-szemantika"). * * Token-forrás: docs/_todo.md 2. szakasz · prototípus: docs/design/DocAI Rebrand.html * ========================================================================== */ html[data-theme="light"] { --dl-bg: #F1F3F6; --dl-surface: #FFFFFF; --dl-surface-2: #F7F8FA; --dl-line: #E4E7EC; --dl-input-line: #D5DAE1; --dl-ink: #1B2430; --dl-slate: #5B6573; --dl-muted: #8A93A0; --dl-navy-900: #0B1220; --dl-navy-700: #14213A; --dl-navy-600: #1E2A40; --dl-red: #CE1126; --dl-red-hover: #B30F21; --dl-amber: #B7791F; /* rgb(183,121,31) — mélyebb, olvashatóbb warning sárga */ --dl-amber-hover: #9C6519; --dl-amber-soft: rgba(183, 121, 31, .10); --dl-green: #15704A; /* egységes DocAI zöld: „kifizetve" + info-család (teal→zöld); Inspinia btn-success KÉK, nem jó */ --dl-green-hover: #115C3D; --dl-green-soft: rgba(21, 112, 74, .14); } /* ====== BÁZIS / TIPOGRÁFIA ====== */ html[data-theme="light"] body { font-family: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--dl-ink); } html[data-theme="light"] body.top-navigation, html[data-theme="light"] #page-wrapper.gray-bg, html[data-theme="light"] .gray-bg { background-color: var(--dl-bg); } /* Tartalmi linkek: türkiz -> navy (NEM gomb; a .btn-* kimarad). */ html[data-theme="light"] a:not(.btn):not([class*="badge"]):not([class*="label"]) { color: var(--dl-navy-700); } html[data-theme="light"] a:not(.btn):not([class*="badge"]):not([class*="label"]):hover, html[data-theme="light"] a:not(.btn):not([class*="badge"]):not([class*="label"]):focus { color: var(--dl-navy-600); } /* ====== NAVBAR (navy fejléc) ====== * Csak a navbar-wrapper (row border-bottom white-bg, .wrapper/.page-heading * NÉLKÜL) — az oldal-fejlécek (.row.wrapper...page-heading) fehérek maradnak. */ html[data-theme="light"] #page-wrapper > .row.border-bottom.white-bg:not(.wrapper):not(.page-heading), html[data-theme="light"] .top-navigation .navbar-static-top, html[data-theme="light"] .top-navigation .navbar { background-color: var(--dl-navy-900) !important; border-bottom-color: var(--dl-navy-900) !important; } /* Menüpontok: halvány fehér, aktív = fehér + piros aláhúzás (navigációs állapot). * CSAK desktop (≥992px, navbar-expand-lg kibontott navy sáv) — a lg alatti * összecsukott menü FEHÉR hátterű legördülő, ott az Inspinia sötét-szöveg marad * (különben az aktív menüpont fehér-fehéren láthatatlan lenne). */ @media (min-width: 992px) { /* A .navbar a szelektorban azért kell, hogy specificitásban verje a tartalmi-link * szabályt (a:not(.btn):not([class*="badge"]):not([class*="label"]) → navy), * különben az inaktív menüpontok navy-on-navy láthatatlanok lennének. */ html[data-theme="light"] .top-navigation .navbar .nav > li > a { color: rgba(255, 255, 255, .72); font-weight: 500; background: transparent; border-bottom: 3px solid transparent; } /* CSAK a felső szintű menüpont (> a közvetlen gyermek) — különben a leszármazott * szelektor a legördülő almenü linkjeit is fehérré tenné a fehér dropdown-háttéren * (hover-re eltűnnének). Az almenü-elemek az Inspinia sötét szövegét tartják. */ html[data-theme="light"] .top-navigation .navbar .nav > li > a:hover, html[data-theme="light"] .top-navigation .navbar .nav > li > a:focus { color: #fff; background: transparent; border-color: transparent; border-bottom-color: transparent; } html[data-theme="light"] .top-navigation .navbar .nav > li.active { background: transparent; } html[data-theme="light"] .top-navigation .navbar .nav > li.active > a { color: #fff; font-weight: 700; border-bottom-color: var(--dl-red); } } /* Legördülő almenü hover: piros szöveg + halvány háttér (a felső szintű menüpont * fehér hover-e a @media blokkban van; ez a navy navbar dropdown-jának almenü-elemeit * célozza, közvetlen gyermek `> li > a`, hogy a tartalmi-link navy hover-t felülírja). */ html[data-theme="light"] .top-navigation .navbar .dropdown-menu > li > a:hover, html[data-theme="light"] .top-navigation .navbar .dropdown-menu > li > a:focus { color: var(--dl-red); background-color: var(--dl-surface-2); } /* Logó: navy „Doc" + piros „AI" (a docai-design.css adja a navy brand-blokkot). */ html[data-theme="light"] .docai-logo .docai-accent, html[data-theme="light"] .docai-logo-heading .docai-accent { color: var(--dl-red); } html[data-theme="light"] .top-navigation .navbar-brand.docai-logo { background: var(--dl-navy-900); } /* ====== TÁBLÁZAT (kozmetikai — nem állapot) ====== */ html[data-theme="light"] .table thead th, html[data-theme="light"] .table > thead > tr > th { background: var(--dl-surface-2); color: var(--dl-slate); font-weight: 700; border-bottom: 1px solid var(--dl-line); } /* ====== ŰRLAP / FÓKUSZ ====== */ html[data-theme="light"] .form-control:focus { border-color: var(--dl-red); box-shadow: 0 0 0 .2rem rgba(206, 17, 38, .18); } html[data-theme="light"] .form-control { border-color: var(--dl-input-line); } /* ====== PANELEK (ibox) — keret kozmetika ====== */ html[data-theme="light"] .ibox-title, html[data-theme="light"] .ibox-content { border-color: var(--dl-line); } /* ====== GOMBOK — opt-in DocAI brand/action osztályok (Fázis 4) ====== * FONTOS: a szemantikus Bootstrap gombokat (btn-primary/info/success/warning/ * danger) SZÁNDÉKOSAN NEM írjuk át — azok validációs/üzleti állapotot kódolnak * (lásd a fájl elején a figyelmeztetést). Ezek opt-in osztályok: csak olyan * gombra szabad rátenni, ahol a szín NEM hordoz állapotot (pl. fő CTA, mentés, * új rekord, feltöltés). Alkalmazás blade-enként, kézzel ellenőrzött helyen. * * .btn-docai-brand — piros fő CTA, képernyőnként legfeljebb egy * .btn-docai-action — navy strukturális akció * .btn-docai-delete-outline — piros outline (törlés), ha az outline-design kell */ /* Piros fő CTA */ html[data-theme="light"] .btn.btn-docai-brand { background-color: var(--dl-red); border-color: var(--dl-red); color: #fff; } html[data-theme="light"] .btn.btn-docai-brand:hover, html[data-theme="light"] .btn.btn-docai-brand:focus, html[data-theme="light"] .btn.btn-docai-brand:active { background-color: var(--dl-red-hover); border-color: var(--dl-red-hover); color: #fff; } html[data-theme="light"] .btn.btn-docai-brand:focus { box-shadow: 0 0 0 .2rem rgba(206, 17, 38, .25); } /* Navy strukturális akció */ html[data-theme="light"] .btn.btn-docai-action { background-color: var(--dl-navy-700); border-color: var(--dl-navy-700); color: #fff; } html[data-theme="light"] .btn.btn-docai-action:hover, html[data-theme="light"] .btn.btn-docai-action:focus, html[data-theme="light"] .btn.btn-docai-action:active { background-color: var(--dl-navy-900); border-color: var(--dl-navy-900); color: #fff; } html[data-theme="light"] .btn.btn-docai-action:focus { box-shadow: 0 0 0 .2rem rgba(20, 33, 58, .25); } /* Piros outline — törlés (csak kézzel ellenőrzött helyre) */ html[data-theme="light"] .btn.btn-docai-delete-outline { background-color: transparent; border-color: var(--dl-red); color: var(--dl-red); } html[data-theme="light"] .btn.btn-docai-delete-outline:hover, html[data-theme="light"] .btn.btn-docai-delete-outline:focus, html[data-theme="light"] .btn.btn-docai-delete-outline:active { background-color: var(--dl-red); border-color: var(--dl-red); color: #fff; } html[data-theme="light"] .btn.btn-docai-delete-outline:focus { box-shadow: 0 0 0 .2rem rgba(206, 17, 38, .18); } /* ====== GLOBÁLIS btn-primary → navy (light) ====== * Auditált döntés (2026-06-23): a btn-primary a rendszerben AKCIÓT vagy AKTÍV/ * kiválasztott állapotot jelöl, SOHA nem validációs súlyosságot — az badge-ben él * (Document::resolve*BadgeColor → badge-{secondary|primary|good|warning|danger}, * InvoiceValidateService::SEVERITY). Ezért a türkiz btn-primary a light témában * egységesen navy strukturális akcióvá válik — nem kell képernyőnként class-t * adogatni. KIVÉTEL: piros brand-CTA (.btn-docai-brand) és piros-outline törlés * (.btn-docai-delete-outline) — ezeket a :not() kizárja. Az aktív/kiválasztott * toggle-ök továbbra is olvashatók (navy aktív vs. szürke/white/outline inaktív). */ html[data-theme="light"] .btn.btn-primary:not(.btn-docai-brand):not(.btn-docai-delete-outline):not(.btn-docai-paid) { background-color: var(--dl-navy-700); border-color: var(--dl-navy-700); color: #fff; } html[data-theme="light"] .btn.btn-primary:not(.btn-docai-brand):not(.btn-docai-delete-outline):not(.btn-docai-paid):hover, html[data-theme="light"] .btn.btn-primary:not(.btn-docai-brand):not(.btn-docai-delete-outline):not(.btn-docai-paid):focus, html[data-theme="light"] .btn.btn-primary:not(.btn-docai-brand):not(.btn-docai-delete-outline):not(.btn-docai-paid):active { background-color: var(--dl-navy-900); border-color: var(--dl-navy-900); color: #fff; } html[data-theme="light"] .btn.btn-primary:not(.btn-docai-brand):not(.btn-docai-delete-outline):not(.btn-docai-paid):focus { box-shadow: 0 0 0 .2rem rgba(20, 33, 58, .25); } /* „teljesen kifizetve" pozitív státusz-pirula — zöld (InvoiceIn::getPaidCellAttribute). * A btn-primary marad a markupon (false/dark fallback), de a light navy szabály a * :not(.btn-docai-paid) miatt kihagyja, és itt zöldet kap. */ html[data-theme="light"] .btn.btn-docai-paid { background-color: var(--dl-green); border-color: var(--dl-green); color: #fff; } html[data-theme="light"] .btn.btn-docai-paid:hover, html[data-theme="light"] .btn.btn-docai-paid:focus, html[data-theme="light"] .btn.btn-docai-paid:active { background-color: var(--dl-green-hover); border-color: var(--dl-green-hover); color: #fff; } /* Outline-primary → navy outline (pl. kiválasztó toggle inaktív állapota) */ html[data-theme="light"] .btn.btn-outline-primary { color: var(--dl-navy-700); border-color: var(--dl-navy-700); background-color: transparent; } html[data-theme="light"] .btn.btn-outline-primary:hover, html[data-theme="light"] .btn.btn-outline-primary:focus, html[data-theme="light"] .btn.btn-outline-primary:active { color: #fff; background-color: var(--dl-navy-700); border-color: var(--dl-navy-700); } /* ====== WARNING / RESET — mélyebb, olvashatóbb amber (user-kérés) ====== * A warning sárga mélyebb amberre vált (#B7791F = rgb 183,121,31): a HUE (amber = * figyelmeztetés) és a jelentés MARAD, csak olvashatóbb tónus. Az „új keresés" / * kereső-ürítő reset gombok outline-amber megjelenést kapnak (a mellékelt kép * szerint). A reset gombokat a .reset-all / .reset-search JS-hook osztályok * azonosítják (nem state-encoded). A badge-/label-/text-warning NEM változik. */ /* Tömör warning gombok (nem reset): mélyebb amber, fehér szöveg */ html[data-theme="light"] .btn-warning:not(.reset-all):not(.reset-search) { background-color: var(--dl-amber); border-color: var(--dl-amber); color: #fff; } html[data-theme="light"] .btn-warning:not(.reset-all):not(.reset-search):hover, html[data-theme="light"] .btn-warning:not(.reset-all):not(.reset-search):focus, html[data-theme="light"] .btn-warning:not(.reset-all):not(.reset-search):active { background-color: var(--dl-amber-hover); border-color: var(--dl-amber-hover); color: #fff; } /* „új keresés" / kereső-ürítő reset: outline amber */ html[data-theme="light"] .btn-warning.reset-all, html[data-theme="light"] .btn-warning.reset-search { background-color: transparent; border-color: var(--dl-amber); color: var(--dl-amber); } html[data-theme="light"] .btn-warning.reset-all:hover, html[data-theme="light"] .btn-warning.reset-all:focus, html[data-theme="light"] .btn-warning.reset-all:active, html[data-theme="light"] .btn-warning.reset-search:hover, html[data-theme="light"] .btn-warning.reset-search:focus, html[data-theme="light"] .btn-warning.reset-search:active { background-color: var(--dl-amber-soft); border-color: var(--dl-amber-hover); color: var(--dl-amber-hover); } /* ====== INFO CSALÁD: teal → DocAI zöld (user-kérés, #15704A) ====== * A light témában a türkiz/cyan Inspinia `info` szín egységes DocAI zöldre vált. * Érinti: btn-info (pl. „fizetés rögzítése"), label-info (pl. „jóváhag…"/„könyvelt"/ * „átadva"), badge-info (worker badge — soft variáns marad, csak zöld hue), * text-info (pl. a dokumentumlista DocAI-gomb „Doc" felirata). A jelentés-TIER * (info) megmarad, csak a hue zöld. */ /* btn-info — tömör zöld */ html[data-theme="light"] .btn.btn-info { background-color: var(--dl-green); border-color: var(--dl-green); color: #fff; } html[data-theme="light"] .btn.btn-info:hover, html[data-theme="light"] .btn.btn-info:focus, html[data-theme="light"] .btn.btn-info:active { background-color: var(--dl-green-hover); border-color: var(--dl-green-hover); color: #fff; } /* label-info (Inspinia tömör címke) — zöld */ html[data-theme="light"] .label-info { background-color: var(--dl-green); color: #fff; } /* badge-info (worker badge) — soft zöld (a docai-design.css soft cyan-ját váltja) */ html[data-theme="light"] .badge.badge-info { background-color: var(--dl-green-soft); color: var(--dl-green); } /* text-info (pl. DocAI „Doc" wordmark) — zöld (bootstrap !important miatt kell) */ html[data-theme="light"] .text-info { color: var(--dl-green) !important; } /* ====== RÉGI ZÖLD MARADVÁNYOK (#1ab394 / #23c6c8) → új DocAI zöld (#15704A) ====== * A korábbi türkiz brand-zöld a feature-CSS-ekben (style.css, docai-chat.css, * task-tickets.css). Light témában egységesen #15704A. A html[data-theme="light"] * prefix magasabb specificitású, mint a feature-CSS eredeti szabályai → nyer. */ /* Globális: .text-navy (pl. „mentve", strong.text-navy) + .btn-link hover * (Inspinia link-zöld; pl. task-accordion „Részfeladatok" headingTodos mouseover). */ html[data-theme="light"] .text-navy { color: var(--dl-green) !important; } html[data-theme="light"] .btn-link:hover, html[data-theme="light"] .btn-link:focus, html[data-theme="light"] .btn-link:active, html[data-theme="light"] .btn-link.active { color: var(--dl-green); } /* Chat (docai-chat.css): history aktív elem, user buborék, doc/file gombok, canvas. */ html[data-theme="light"] .chat-list-item.active { background: var(--dl-green); } html[data-theme="light"] .chat-message.role-user .message-bubble { background: var(--dl-green); } html[data-theme="light"] .tool-activity { border-left-color: var(--dl-green); } html[data-theme="light"] .doc-ref-btn { color: var(--dl-green); } html[data-theme="light"] .doc-ref-btn:hover { border-color: var(--dl-green); } html[data-theme="light"] .file-card { border-left-color: var(--dl-green); } html[data-theme="light"] .file-card-icon { color: var(--dl-green); } html[data-theme="light"] .file-dl-btn { color: var(--dl-green); } html[data-theme="light"] .file-dl-btn:hover { background: var(--dl-green); border-color: var(--dl-green); } html[data-theme="light"] .doc-inline-btn { color: var(--dl-green); } html[data-theme="light"] .doc-inline-btn:hover { border-color: var(--dl-green); } html[data-theme="light"] .chat-canvas-tab { background: var(--dl-green); } html[data-theme="light"] .canvas-preview.is-streaming .canvas-content::after { color: var(--dl-green); } /* Task-tickets (task-tickets.css): komment/history bal-szegély, priority-1, ticket-count. */ html[data-theme="light"] .comment-item { border-left-color: var(--dl-green); } html[data-theme="light"] .history-item { border-left-color: var(--dl-green); } html[data-theme="light"] .priority-1 { background-color: var(--dl-green); } html[data-theme="light"] .ticket-count { background: var(--dl-green); } /* select2 legördülő — a kiemelt/kiválasztott opció zöldje (Inspinia style.css:4059 * #1ab394) → új DocAI zöld. (A dropdown a body-ra kerül, de a html[data-theme] * scope így is illik rá.) */ html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--dl-green); } /* Toastr success toast („sikeres módosítás") — Inspinia #1ab394 → új zöld. * (A #toast-container > .toast-success csak a pipa background-image-et adja, a * háttér-SZÍNT a .toast-success állítja, azt írjuk felül.) */ html[data-theme="light"] .toast-success { background-color: var(--dl-green); } /* ====== FOOTER ====== */ html[data-theme="light"] .footer { background: #fff; border-top: 1px solid var(--dl-line); color: var(--dl-muted); } /* ====== AUTH / LOGIN (8.5) — navy háttér, fehér kártya ====== * Scope: KIZÁRÓLAG a .docai-auth-screen body-class (auth/login-család), amit az * auth blade-ek @section('body_class','docai-auth-screen')-nel kérnek. Így a * navy login-háttér NEM szivárog a publikus layouts.app oldalakra (task form, * newsletter leiratkozás, share). A submit a képernyő egyetlen, állapot nélküli * fő CTA-ja — kivételesen piros (admin login: btn-primary, worker login: btn-info). */ html[data-theme="light"] body.docai-auth-screen { background: radial-gradient(1200px 600px at 50% -10%, #14213A 0%, #0B1220 55%, #070B14 100%); } html[data-theme="light"] body.docai-auth-screen .card { background: #fff; border: 1px solid var(--dl-line); border-radius: .625rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } /* A fő CTA piros — !important, mert a globális .btn-primary→navy szabály a :not()- * lánc miatt (0,6,1) erősebb, mint ez a selector (0,4,3). Az auth submit MINDIG piros. */ html[data-theme="light"] body.docai-auth-screen .loginscreen button[type="submit"], html[data-theme="light"] body.docai-auth-screen .card button[type="submit"] { background-color: var(--dl-red) !important; border-color: var(--dl-red) !important; color: #fff !important; } html[data-theme="light"] body.docai-auth-screen .loginscreen button[type="submit"]:hover, html[data-theme="light"] body.docai-auth-screen .loginscreen button[type="submit"]:focus, html[data-theme="light"] body.docai-auth-screen .card button[type="submit"]:hover, html[data-theme="light"] body.docai-auth-screen .card button[type="submit"]:focus { background-color: var(--dl-red-hover) !important; border-color: var(--dl-red-hover) !important; color: #fff !important; } /* Login disclaimer / figyelmeztető doboz (pl. NIS2 használati figyelmeztetés) — * navy bal-akcentus, világos felület, navy szöveg (a fehér kártyán). */ html[data-theme="light"] body.docai-auth-screen .loginscreen .alert-info { background-color: var(--dl-surface-2); border: 1px solid var(--dl-line); border-left: 4px solid var(--dl-navy-700); border-radius: .5rem; color: var(--dl-navy-700); } /* „Elfelejtetted a jelszavad?" link — visszafogott slate, navy hover (nem zöld) */ html[data-theme="light"] body.docai-auth-screen .loginscreen .btn-link { color: var(--dl-slate); font-weight: 500; } html[data-theme="light"] body.docai-auth-screen .loginscreen .btn-link:hover, html[data-theme="light"] body.docai-auth-screen .loginscreen .btn-link:focus { color: var(--dl-navy-700); } /* Copyright sor a kártya alatt (navy gradiensen) — visszafogott világos. */ html[data-theme="light"] body.docai-auth-screen .loginscreen > p small { color: rgba(255, 255, 255, .55); } html[data-theme="light"] body.docai-auth-screen > .footer { background: #fff; color: var(--dl-muted); }