/* ============================================================ Ügyfélkezelő – arculat a weboldal színeivel ============================================================ */ :root { --brand: #1e3a5f; /* mély kék – menü, fejléc, szöveg */ --ink: #1e3a5f; --accent: #d97706; /* borostyán – gombok, kiemelés */ --accent-ink: #92400e; --accent-hover: #b45309; --bg: #faf8f4; /* meleg krém háttér */ --surface: #ffffff; --text: #2b2b2b; --muted: #6b6b6b; --line: #e7e2d8; /* halvány bézs vonal */ --footer: #0f2730; /* Szemantikus jelzőszínek (befizetés-pipa, nem-kész sor, állapot-címke). Témánként felülírhatók, ezért a nézetekben NE legyen beégetett hex. */ --ok-bg: #dcfce7; /* zöld: kész / aktív */ --ok-ink: #166534; --semleges-bg: #f1eee8; /* szürke-bézs: nincs bejelölve */ --semleges-ink: #b8b0a0; --figyelem-bg: #fdecec; /* halvány piros: nem kész sor */ --figyelem-bg-hover: #f8dede; --sarga-bg: #fef3c7; /* címke: készpénz, közelgő lejárat */ --sarga-ink: #92400e; --kek-bg: #e0e7ff; /* címke: átutalás */ --kek-ink: #3730a3; --piros-bg: #fee2e2; /* címke: lejárt; hibaszöveg */ --piros-ink: #b91c1c; --sidebar-bg: #1e3a5f; /* oldalsáv: világos témán a --brand navy */ --sav-bg: #f5f1ea; /* betét-panel, előnézet-doboz, táblázat-fejléc sáv */ --tooltip-bg: #1e293b; /* lebegő buboréksúgó (mindig sötét) */ --tooltip-ink: #ffffff; --tooltip-figyelem: #f0b8b8; --piros-vonal: #f3c9c9; /* halvány piros keret: "Veszélyes zóna" */ } /* ---- Választható világos témák (data-tema a -n) ---- */ /* Az "alap" a fenti :root. A többi téma csak a színváltozókat írja felül, minden komponens automatikusan átveszi (a rendszer CSS-változókra épül). */ [data-tema="palako"] { --brand: #44403c; --ink: #44403c; --accent: #78716c; --accent-ink: #57534e; --accent-hover: #57534e; --bg: #f7f6f4; --line: #e3e0db; --footer: #292524; } [data-tema="erdo"] { --brand: #1f4d3a; --ink: #1f4d3a; --accent: #16a34a; --accent-ink: #166534; --accent-hover: #15803d; --bg: #f5f9f5; --line: #dce8dc; --footer: #143528; } [data-tema="szilva"] { --brand: #4a2545; --ink: #4a2545; --accent: #a21caf; --accent-ink: #86198f; --accent-hover: #9333a8; --bg: #fbf5fa; --line: #ecd9e8; --footer: #331830; } [data-tema="grafit"] { --brand: #334155; --ink: #334155; --accent: #2563eb; --accent-ink: #1e40af; --accent-hover: #1d4ed8; --bg: #f6f7f9; --line: #dfe3e8; --footer: #1e293b; } [data-tema="levendula"] { --brand: #4c3a6b; --ink: #4c3a6b; --accent: #9333ea; --accent-ink: #6b21a8; --accent-hover: #7e22ce; --bg: #f7f5fb; --line: #e4ddf0; --footer: #352748; } [data-tema="naplemente"] { --brand: #9a3412; --ink: #9a3412; --accent: #ea580c; --accent-ink: #9a3412; --accent-hover: #c2410c; --bg: #fdf6f1; --line: #f0ddd0; --footer: #6b230c; } [data-tema="menta"] { --brand: #0f5257; --ink: #0f5257; --accent: #14b8a6; --accent-ink: #0f766e; --accent-hover: #0d9488; --bg: #f2f9f8; --line: #d5e8e5; --footer: #0a3a3d; } [data-tema="homok"] { --brand: #5c4a32; --ink: #5c4a32; --accent: #b8860b; --accent-ink: #856404; --accent-hover: #9a7209; --bg: #faf7f0; --line: #e8ddc8; --footer: #40331f; } [data-tema="rozsakvarc"] { --brand: #831843; --ink: #831843; --accent: #db2777; --accent-ink: #9d174d; --accent-hover: #be185d; --bg: #fdf4f8; --line: #f2d9e4; --footer: #5c1030; } /* ---- Sötét mód ---- */ /* A felületek, háttér, szöveg és vonalak sötétre fordulnak; a sidebar eleve sötét marad. Az accent (borostyán) élénk kiemelésnek megmarad. A beégetett fehér HÁTTEREK korábban var(--surface)-re lettek cserélve, a fő szövegszín var(--text)-re, így itt elég a változókat átállítani. */ [data-tema="sotet"] { --brand: #2a3a4f; /* kicsit világosabb kék a sötét felülethez */ --ink: #e2e8f0; /* világos "tinta" (címsorok, linkek) */ --accent: #f59e0b; /* élénk borostyán kiemelés */ --accent-ink: #fbbf24; --accent-hover: #d97706; --bg: #171a20; /* legmélyebb háttér */ --surface: #232833; /* kártyák, dobozok, inputok felülete */ --text: #dbe1ea; /* fő szövegszín */ --muted: #9aa4b2; /* halvány szöveg */ --line: #3a4150; /* vonalak, keretek */ --footer: #0f1319; --sidebar-bg: #101319; /* semleges, egy fokkal a --bg alatt */ } [data-tema="ejkek"] { --brand: #1e293b; --ink: #e2e8f0; --accent: #38bdf8; --accent-ink: #7dd3fc; --accent-hover: #0ea5e9; --bg: #0f172a; --surface: #1e293b; --text: #dbe4f0; --muted: #94a3b8; --line: #334155; --footer: #0a0f1c; --sidebar-bg: #0a1020; /* mélyebb navy, a téma saját árnyalatában */ } [data-tema="ejzold"] { --brand: #1a2e1f; --ink: #d1fae5; --accent: #4ade80; --accent-ink: #86efac; --accent-hover: #22c55e; --bg: #0f1a12; --surface: #1a2e1f; --text: #d4ecd9; --muted: #8ba894; --line: #2a4230; --footer: #08130b; --sidebar-bg: #0a120c; /* mélyebb zöld, a téma saját árnyalatában */ } /* Sötét módban a világos felületre szánt apró finomítások. FIGYELEM: a témákat :is(...)-be KELL fogni. A sima felsorolás ([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"] .sidebar) három ÖNÁLLÓ szelektort jelent, ahol a leszármazott rész csak az UTOLSÓ témára kötődik — a másik kettő stílus nélkül marad, a body pedig megkapja az összes deklarációt. */ :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .ikon-gomb-fo { background: var(--surface); color: var(--ink); border-color: var(--line); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) input, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) textarea, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) select { background: var(--surface); color: var(--text); border-color: var(--line); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) input::placeholder, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) textarea::placeholder { color: var(--muted); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .topbar-kereso input { background: var(--surface); color: var(--text); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) table.list th { background: #2a3140; color: var(--ink); } /* Statisztika oldal sötét módban (!important, mert a .dash-kartya-kiemelt/.dash-fig .dash-szam szabályok később jönnek a fájlban és felülírnák) */ :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .dash-szam { color: var(--ink) !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-magas { background: #3a2323 !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-magas .kockazat-szam, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-magas .kockazat-nev { color: #f87171 !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-kozepes { background: #3a3020 !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-kozepes .kockazat-szam, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-kozepes .kockazat-nev { color: #fbbf24 !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-alacsony { background: #23332a !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-alacsony .kockazat-szam, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .kockazat-alacsony .kockazat-nev { color: #6ee7a0 !important; } /* Kiemelt (élő, aktuális havi) statisztika sor. Korábban inline background:#fdf8f1 volt, és egy tr[style*="fdf8f1"] szelektorral kellett sötét módban felülírni — most osztály. */ tr.stat-elo td { background: var(--sav-bg); } /* Sötét mód: a maradék beégetett világos-bézs hátterek sötétre */ :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .import-sav { background: #2a3140; border-color: var(--line); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .dropzone.dragover { background: #2f2a20; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .uj-mezo-sor input { background: var(--surface); } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .dash-kartya-kiemelt .dash-ikon, :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .dash-fig .dash-ikon { background: #2f2a20; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .havi-dij-sor { background: #2f2a20 !important; color: var(--text) !important; } :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) .havi-dij-sor .dij-elvalaszto { color: var(--muted); } /* Buboréksúgó: a "nem olvasott" sor kiemelése (a JS csak osztályt ad, színt nem) */ .uz-tip-float .uz-nemolv { color: var(--tooltip-figyelem); } /* Szemantikus jelzőszínek sötét változata */ :is([data-tema="sotet"],[data-tema="ejkek"],[data-tema="ejzold"]) { --ok-bg: #1e3a2a; --ok-ink: #6ee7a0; --semleges-bg: #2a3140; --semleges-ink: #8b93a1; --figyelem-bg: #3a2323; --figyelem-bg-hover: #4a2c2c; --sarga-bg: #3a3020; --sarga-ink: #fbbf24; --kek-bg: #232c4a; --kek-ink: #a5b4fc; --piros-bg: #3a2323; --piros-ink: #f87171; --sav-bg: #2a3140; --piros-vonal: #5a3535; --tooltip-bg: #39414f; /* sötét témán világosabb, hogy elváljon a felülettől */ } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.6; } a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Belépés ---- */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { background: var(--surface); padding: 32px; border-radius: 12px; box-shadow: 0 8px 24px rgba(30,58,95,.12); width: 320px; border: 1px solid var(--line); } .login-box h1 { font-size: 20px; margin: 0 0 20px; text-align: center; color: var(--ink); } .login-logo { display: block; max-width: 100%; height: auto; margin: 0 auto 24px; } .login-box label { display: block; margin-bottom: 14px; font-weight: 600; color: var(--ink); } .login-box input { width: 100%; margin-top: 4px; } .login-box button { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; } .login-box button:hover { background: var(--accent-hover); } .alert { background: #fee2e2; color: #991b1b; padding: 10px; border-radius: 6px; margin-bottom: 14px; } /* ---- Layout ---- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 230px; background: var(--sidebar-bg); color: #cbd5e1; flex-shrink: 0; display: flex; flex-direction: column; transition: margin-left .2s ease; } .sidebar-toggled .sidebar { margin-left: -230px; } .brand { padding: 18px 20px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; } .sidebar nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; } .sidebar nav a { color: #cbd5e1; padding: 10px 20px; font-size: 13px; } .sidebar nav a:hover { background: var(--accent); color: #fff; text-decoration: none; } .menu-group { padding: 14px 20px 6px; font-size: 11px; text-transform: uppercase; color: #8aa0b8; letter-spacing: .5px; } /* Lenyíló menücsoportok (JS toggle) */ .nav-fo { display: flex; align-items: center; font-weight: 600; } .sidebar nav a.nav-fo { color: #fff; } .nav-ikon { width: 17px; height: 17px; margin-right: 11px; flex-shrink: 0; opacity: .85; } /* A csoport-fejléc nyila jobbra marad; az ikon+szöveg balra csoportosul */ .nav-group-fej .nav-ikon { margin-right: 11px; } .nav-group { display: flex; flex-direction: column; } .nav-group-fej { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: #fff; font-weight: 600; padding: 11px 20px; font-size: 13px; display: flex; align-items: center; font-family: inherit; } .nav-group-fej::after { content: "▸"; font-size: 11px; color: #8aa0b8; transition: transform .15s; margin-left: auto; } .nav-group.open .nav-group-fej::after { transform: rotate(90deg); } .nav-group-fej:hover { background: rgba(255,255,255,.06); } .nav-group-tartalom { display: none; flex-direction: column; } .nav-group.open .nav-group-tartalom { display: flex; } .nav-group-tartalom a { display: block; padding: 9px 20px 9px 36px; font-size: 13px; color: #cbd5e1; } .nav-group-tartalom a:hover { background: var(--accent); color: #fff; text-decoration: none; } /* A `min-width: 0` nélkül a flex-elem nem tud a tartalma alá zsugorodni (az alapértelmezés `min-width: auto`), ezért egy széles táblázat az EGÉSZ oldalt kitolja a képernyőn túlra vízszintes görgetősávval. Ezzel a `.main` szűkül, és a benne lévő táblázat kapja a görgetést, nem a lap. */ /* `container-type`: a konténer-lekérdezések alapja. A média-lekérdezés a KÉPERNYŐT méri, a tartalom viszont 230 pixellel szűkebb a bal menü miatt — fél képernyőn ezért nem sültek el a töréspontok, és a hasábok olvashatatlanul szűkek lettek. */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; } .topbar { background: var(--surface); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 900; } .topbar .user { font-size: 13px; color: var(--muted); } .topbar-kereso { display: flex; gap: 8px; align-items: center; } .topbar-kereso input { width: 160px; max-width: 20vw; } .topbar-jobb { display: flex; gap: 10px; align-items: center; } /* Kör alakú ikon-gombok a topbarban */ .ikon-gomb { width: 40px; height: 40px; flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; cursor: pointer; padding: 0; text-decoration: none; transition: background .15s, color .15s; } .ikon-gomb svg { width: 20px; height: 20px; } .ikon-gomb-narancs { background: var(--brand); color: #fff; } .ikon-gomb-narancs:hover { background: var(--accent); } .ikon-gomb-fo { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); } .ikon-gomb-fo:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .nav-kilepes { margin-top: auto; } .hamburger { display: block; background: none; border: 0; cursor: pointer; padding: 4px; color: var(--ink); line-height: 0; } .hamburger svg { width: 24px; height: 24px; } .sidebar-overlay { display: none; } .content { padding: 24px; min-width: 0; } /* Ha egy táblázat így sem fér ki, a KÁRTYA görgessen vízszintesen, ne a lap. */ .card { overflow-x: auto; } /* ---- Közös UI elemek ---- */ .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .page-head h2 { margin: 0; font-size: 20px; color: var(--ink); } .btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 0; font-size: 13px; cursor: pointer; text-decoration: none; background: var(--accent); color: #fff; font-weight: 600; transition: background .15s; } .btn:hover { background: var(--accent-hover); text-decoration: none; } .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn-secondary:hover { background: #f1ede5; } .btn-danger { background: var(--brand); } .btn-danger:hover { background: #16293f; } .btn-torol { background: #dc2626; } .btn-torol:hover { background: #b91c1c; } .btn-sm { padding: 4px 12px; font-size: 12px; } table.list { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(30,58,95,.06); border: 1px solid var(--line); } table.list th, table.list td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; } table.list th { background: #f5f1ea; font-weight: 600; color: var(--ink); } table.list tr:last-child td { border-bottom: 0; } table.list .actions { text-align: right; white-space: nowrap; } /* Ügyféllista: tömörebb, rendezhető */ table.list-ugyfel th, table.list-ugyfel td { padding: 7px 14px; } table.list-ugyfel .szinkod-cella { width: 32px; padding-right: 0; } table.list-ugyfel .dash-statusz-szin { width: 26px; height: 16px; } .page-head .filter-bar { margin-bottom: 0; } .page-head:has(.filter-bar) { margin-bottom: 10px; } table.list-ugyfel th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } table.list-ugyfel th.sortable::after { content: ' ▲▼'; color: #b9b2a4; font-size: 9px; } table.list-ugyfel th.sort-asc::after { content: ' ▲'; color: var(--accent); font-size: 9px; } table.list-ugyfel th.sort-desc::after { content: ' ▼'; color: var(--accent); font-size: 9px; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; } .badge-on { background: #dcfce7; color: #166534; } .badge-off { background: #fee2e2; color: #991b1b; } .badge-admin { background: color-mix(in srgb, var(--accent) 18%, white); color: var(--accent-ink); } .badge-staff { background: #eef2f6; color: var(--brand); } .card { background: var(--surface); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(30,58,95,.06); border: 1px solid var(--line); max-width: 560px; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13px; color: var(--ink); } /* ---- EGYSÉGES MEZŐMEGJELENÉS ---- Referencia a topbar keresője: 8px 12px párna, 8px sarok, 1px --line szegély, 14px betű. Korábban nyolcféle változat volt szétszórva (6px és 8px sarok, 4-9px párna), és a beállítólapok mezői inline stílust kaptak, mert a `.urlap-sor` konténerhez egyáltalán nem tartozott szabály. A `.mezo` osztály azoknak való, amik nem esnek egyik konténer alá sem — így nem kell inline párnát írni, és egy helyen módosítható az egész. */ /* A magasság FIX, nem a párnából jön: így az input, a select és a dátummező pontosan ugyanolyan magas (a select belső magassága böngészőnként más). A `box-sizing: border-box` globálisan be van állítva, tehát a 34px a szegéllyel együtt értendő. Két magasság van a rendszerben: 34px normál, 28px sűrű. */ .form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .urlap-sor input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .urlap-sor select, .login-box input, .filter-bar input[type="text"], .filter-bar select, .dash-kereso input, .topbar-kereso input, .mezo { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; } /* ---- Tartalomhoz igazodó textarea ---- A szélesség FIX (a konténer adja), a magasságot JS állítja a tartalom szerint (footer.php). A `resize: vertical` szándékosan marad: ha valaki kézzel nagyobbra húzza, azt a JS csak akkor írja felül, ha a tartalom TÖBB helyet kér — kisebbre nem rántja vissza. `overflow-y: hidden`, mert a görgetősáv beleszámít a `scrollHeight`-be, és a mező minden leütésre néhány pixelt nőne. */ textarea.auto-magas { resize: vertical; overflow-y: hidden; min-height: 76px; /* kb. 3 sor: enélkül egy üres mező összeugrana */ max-height: 420px; /* efölött inkább görgessen, mint hogy szétnyomja a lapot */ } textarea.auto-magas.tul-hosszu { overflow-y: auto; } /* A textarea nem kaphat fix magasságot, ott a párna adja a belső teret. */ .form-row textarea, .urlap-sor textarea, textarea.mezo { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; } /* A SZÉLESSÉG szándékosan NEM a `.mezo` része: táblázatcellában vagy sorban a 100% kinyomná a mellette lévő gombot (ez élesben elő is fordult). A konténer vagy a helyszíni `width` dönti el. */ .form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .form-row textarea, .urlap-sor input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .urlap-sor select, .urlap-sor textarea { width: 100%; } .form-actions { margin-top: 20px; display: flex; gap: 10px; } .flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; } .flash-ok { background: #dcfce7; color: #166534; } .flash-err { background: #fee2e2; color: #991b1b; } /* Középső popup (modal) a flash üzenetekhez */ .flash-modal-hatter { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(30, 58, 95, 0.35); display: flex; align-items: center; justify-content: center; animation: flash-fade 0.15s ease-out; } .flash-modal { background: var(--surface); border-radius: 14px; padding: 28px 32px; max-width: 420px; width: calc(100% - 40px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); text-align: center; animation: flash-pop 0.18s ease-out; border-top: 5px solid; } .flash-modal.flash-ok { background: var(--surface); border-top-color: #16a34a; } .flash-modal.flash-err { background: var(--surface); border-top-color: #dc2626; } .flash-modal-ikon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; } .flash-modal.flash-ok .flash-modal-ikon { background: #16a34a; } .flash-modal.flash-err .flash-modal-ikon { background: #dc2626; } .flash-modal-szoveg { font-size: 15px; color: var(--ink); margin-bottom: 18px; line-height: 1.4; } .flash-modal-ok { min-width: 90px; } @keyframes flash-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes flash-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .hint { color: var(--muted); font-size: 12px; margin-top: 4px; } /* Checkbox sor */ .check-row { display: flex; align-items: center; gap: 8px; } .check-row input[type="checkbox"] { width: auto; margin: 0; } .check-row label { margin: 0; font-weight: 600; } /* Mezők fókusz állapota */ .form-row input:focus, .form-row select:focus, .form-row textarea:focus, .login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } /* ---- E-mail sablon szerkesztő (Quill + HTML váltás) ---- */ .editor-tabs { display: flex; gap: 4px; margin-bottom: 0; } .editor-tab { padding: 6px 14px; border: 1px solid #d1d5db; border-bottom: 0; background: #f1f5f9; color: #475569; cursor: pointer; font-size: 12px; border-radius: 6px 6px 0 0; } .editor-tab.active { background: var(--surface); color: var(--ink); font-weight: 600; } #quill-editor { height: 280px; background: var(--surface); } .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: #d1d5db; } .html-source { width: 100%; min-height: 280px; padding: 10px; border: 1px solid #d1d5db; border-radius: 0 6px 6px 6px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.5; } code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; } .group-title { font-size: 14px; color: var(--ink); margin: 18px 0 8px; font-weight: 700; padding-bottom: 4px; border-bottom: 2px solid var(--accent); } /* ---- Quill bővített eszköztár: olvasható font/méret nevek ---- */ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: 'Arial'; font-family: Arial; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: 'Georgia'; font-family: Georgia; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before { content: 'Times New Roman'; font-family: 'Times New Roman'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before { content: 'Courier New'; font-family: 'Courier New'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { content: 'Verdana'; font-family: Verdana; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before { content: 'Tahoma'; font-family: Tahoma; } /* A választott betűtípusok tényleges alkalmazása a szerkesztőben */ .ql-font-arial { font-family: Arial; } .ql-font-georgia { font-family: Georgia; } .ql-font-times-new-roman { font-family: 'Times New Roman'; } .ql-font-courier-new { font-family: 'Courier New'; } .ql-font-verdana { font-family: Verdana; } .ql-font-tahoma { font-family: Tahoma; } /* Méret választó olvasható címkék */ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32'; } /* ============================================================ Ügyfél modul ============================================================ */ .filter-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; } .filter-bar input[type="text"] { flex: 1; min-width: 220px; } .filter-bar select { min-width: 160px; } /* Blokkok (szerkesztő és adatlap) */ .block { max-width: 760px; margin-bottom: 18px; } .block-title { margin: 0 0 16px; font-size: 15px; color: var(--ink); font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--brand); } /* Rácsok */ .grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 16px; } .kockazat-check-sor { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .kockazat-check-sor > .form-row { flex: 0 0 auto; min-width: 220px; } .kockazat-check-sor .check-csoport { display: flex; gap: 20px; align-items: center; padding-bottom: 9px; } .kockazat-check-sor .check-csoport .check-row { white-space: nowrap; } .grid-3 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 0 16px; } /* A kártyán belüli rácsok is a tartalom szélességéből dolgoznak: keskeny nézetben a „Telefonszámok | E-mail címek" két hasábja 160 pixelesre szorult. */ @container (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* Tartalék azoknak a böngészőknek, amik a konténer-lekérdezést nem ismerik. */ @media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* Adatlap sorok */ .data-row { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f3efe7; font-size: 13px; } .data-row:last-child { border-bottom: 0; } .data-label { flex: 0 0 260px; max-width: 260px; color: var(--muted); font-weight: 600; line-height: 1.4; white-space: nowrap; } .data-value { flex: 1; min-width: 0; color: var(--text); line-height: 1.4; word-break: break-word; } .muted { color: #aaa; } /* Fülek */ .tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 2px solid var(--line); } .tab { padding: 9px 18px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; } .tab.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); } .tab.disabled { color: #c4bdb0; cursor: not-allowed; } /* ---- Ügyfél dinamikus blokkok (2b) ---- */ .elerhetoseg-blokk { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); } .mini-title { font-size: 13px; color: var(--ink); margin: 0 0 8px; } .elerhetoseg-sor { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; } .link-danger { background: none; border: 0; color: #dc2626; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; } .add-inline { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .elerhetoseg-uj-sor { margin-top: 6px; } .elerhetoseg-uj-sor input { flex: 1; } .import-sav { background: #fdf8f1; border-color: #e8d9bf; } /* ---- FÁJLVÁLASZTÓ ---- A böngésző alapból az operációs rendszer gombját rajzolja ki, ami sehogy nem illeszkedik a többi elemhez. A `::file-selector-button` pszeudo-elemmel a natív viselkedés és a billentyűzet-kezelés megmarad, csak a megjelenés igazodik — ezért nem rejtett input + label kombinációt használunk. A rejtett (dropzone) fájlmezőket ez nem érinti, mert azok nem jelennek meg. */ input[type="file"]:not([hidden]) { /* A `:not([hidden])` NEM óvatoskodás: a `display: inline-flex` erősebb, mint a böngésző `[hidden] { display: none }` szabálya, ezért enélkül a dropzone-ok REJTETT fájlmezői is megjelentek — minden dokumentum-kártyán feltűnt egy fájlválasztó, ami sosem tartozott oda. */ height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--muted); background: var(--surface); display: inline-flex; align-items: center; } input[type="file"]::file-selector-button { height: 28px; margin: 0 10px 0 0; padding: 0 14px; border: 0; border-right: 1px solid var(--line); border-radius: 7px 0 0 7px; background: var(--sav-bg); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: #f1ede5; } input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* SŰRŰ mezők: táblázatsorba és soron belüli felvitelbe illeszkednek, ezért alacsonyabbak — de EGYMÁSSAL egységesek. */ .add-inline input[type="text"], .add-inline input[type="email"], .osszevon-select, .osszevon-cel, .szolg-ar-input, .megsz-mini, .megsz-mappa { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; } .add-inline input[type="text"], .add-inline input[type="email"] { flex: 1; } .add-inline input[type="file"] { font-size: 12px; } /* ---- Tulajdonos / meghatalmazott sorok (lenyíló szerkesztővel) ---- */ .item-row { border-bottom: 1px solid #f3efe7; } .item-row:last-of-type { border-bottom: 0; } .item-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 13px; } .item-summary::-webkit-details-marker { display: none; } .item-summary:hover .item-actions .btn { background: var(--accent-hover); } .item-info { flex: 1; } .item-actions { flex-shrink: 0; } .item-edit { padding: 16px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .edit-form { max-width: 100%; } .add-details { margin-top: 14px; } .add-details summary { display: inline-block; list-style: none; cursor: pointer; } .add-details summary::-webkit-details-marker { display: none; } /* ---- Drag & drop feltöltő ---- */ .dropzone-form { margin-top: 12px; } /* MINDEN dropzone egyforma: egy hely, egy kinézet. Korábban a fejlécbe került feltöltő külön szabályt kapott, és a másik három (meghatalmazott, Egyéb dokumentumok) a régi kinézetet őrizte — négy változat lett belőle. A méret eltérhet helyenként, a KINÉZET nem. */ .dropzone { border: 1px dashed #9aa39c; border-radius: 8px; padding: 6px 12px; text-align: center; color: var(--ink); font-size: 11px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; } /* Feltöltő a meghatalmazott sorában, a `

` alatt teljes szélességben — így nem kell kinyitni a szerkesztőt egy fájl feltöltéséhez, és ugyanaz a dropzone, mint a kötelező dokumentumoknál. Korábban egy szűk pirula volt („📎 fájl"), ami nem viselkedett behúzási felületként. */ /* A meghatalmazott sorában a dropzone a Szerkeszt gomb BALJÁN, egy sorban a névvel — nem alatta, mert így a sor egy magasságban marad. */ .megh-dropzone-form { flex: 0 1 300px; min-width: 0; margin: 0; } /* Kurzorra és fájl fölé húzáskor is visszajelzést adunk, de KÜLÖNBÖZŐT: a hover csak jelzi, hogy kattintható, a dragover azt, hogy MOST elengedhető a fájl — ezért ott a keret szaggatottról folytonosra vált, és háttér is jön. */ .dropzone:hover, .dropzone:focus { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; outline: none; } .dropzone.dragover { border-color: var(--accent); border-style: solid; background: #fdf3e7; color: var(--accent-ink); font-weight: 600; } .dropzone-text { font-style: italic; } /* Feltöltés-nyíl a felirat előtt. */ .dropzone-text::before { content: '\2191'; margin-right: 4px; font-style: normal; } /* Szerződés státusz színminta */ .szin-minta { display: inline-block; width: 28px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; } /* ---- Szerződés blokk ---- */ .block-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); } .szerz-statusz-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; color: #1a1a1a; font-size: 12px; font-weight: 600; } .szolg-lista { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; } .szolg-sor { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f3efe7; font-size: 13px; } .szolg-sor:last-child { border-bottom: 0; } /* min-width:0 nélkül a hosszú szolgáltatásnév kitolja az ár-mezőt a képernyőn túlra. */ .szolg-nev { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; min-width: 0; overflow-wrap: anywhere; } .szolg-ar { display: flex; align-items: center; gap: 6px; color: var(--muted); flex-shrink: 0; } .szolg-ar-input { width: 100px; text-align: right; } /* A gomb balra, az összegek jobbra: a `justify-content` helyett a gomb utáni `margin-left: auto` tolja szét őket — így ha a gomb nem látszik (olvasó jog, vagy még nincs szerződés), az összegek maradnak a jobb szélen. */ .havi-dij-sor { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fdf3e7; border-radius: 8px; margin-bottom: 16px; font-size: 14px; flex-wrap: wrap; color: var(--brand); } .havi-dij-ertekek { margin-left: auto; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .havi-dij-sor strong { font-size: 18px; color: var(--accent-ink); } .dij-elvalaszto { color: var(--brand); } /* ---- Ügyfél adatlap kétoszlopos elrendezés ---- */ /* minmax(0, 1fr) és nem 1fr: a grid-oszlop alapból sem zsugorodik a tartalma alá, ezért egy széles blokk kitolná az oldalt a képernyőn túlra. */ .adatlap-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; } .adatlap-2col .block { max-width: 100%; } /* A tartalom SZÉLESSÉGÉRE reagál, nem a képernyőre. 1000 pixel alatt a két hasáb már 480 alá esne, ott a címek és az űrlapmezők tördelni kezdenek. `auto-fit`-tel nem megoldható: az széles kijelzőn HÁROM hasábot csinálna, pedig ez a nézet szándékosan kétosztatú (adatok | szerződés). */ @container (max-width: 1000px) { .adatlap-2col { grid-template-columns: 1fr; } } /* Új tulajdonos / meghatalmazott lenyíló űrlap (cím melletti gombbal) */ .uj-wrap { display: none; margin-top: 12px; } .uj-wrap.open { display: block; } /* ---- Fül panelek ---- */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* ---- Dokumentumok ---- */ .dok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .dok-doboz { border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; } .dok-doboz-cim { font-weight: 600; font-size: 13px; padding: 10px 12px; border-top: 4px solid var(--line); } .dok-kesz .dok-doboz-cim { border-top-color: #16a34a; } /* zöld = van fájl */ .dok-hianyzik .dok-doboz-cim { border-top-color: #dc2626; } /* piros = kötelező, hiányzik */ .dok-doboz .dropzone-form, .dok-doboz .dok-fajl, .dok-doboz .dok-muvelet, .dok-doboz .hint { padding: 0 12px 12px; } .dok-doboz .dropzone-form { margin-top: 0; } .dok-fajl { font-size: 12px; word-break: break-word; padding-top: 4px; } .dok-muvelet { display: flex; gap: 8px; flex-wrap: wrap; } .dok-csere { margin: 0; } /* ---- Kötelező dokumentumok: sávos elrendezés ---- */ /* ---- Nem számlázott befizetések ---- Egyetlen táblában a hónapok elválasztó SORként jelennek meg, nem külön kártyaként — így egy egytételes hónap nem visz el száz pixelt. A hónap-sornak NINCS háttere: a beige csak a táblafejléc marad, különben a kettő egybefolyik (élesben pont ez történt). Az elválasztást a fölötte lévő erős vonal és a félkövér hónap adja. */ tr.nsz-honap td { background: var(--surface); font-size: 12px; padding: 6px 10px; /* A `--line` túl halvány ehhez: a `currentColor` a szövegszínből származik, tehát világos és sötét témában is olvasható marad. */ border-top: 2px solid; border-top-color: color-mix(in srgb, currentColor 40%, transparent); } tr.nsz-honap:first-child td { border-top: 0; } /* Az összesítő egy sorban, nem három hasábban. */ .nsz-osszesito { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; padding: 9px 14px; font-size: 13px; } .nsz-osszesito strong { font-size: 15px; } .nsz-osszesito .hint { display: inline; margin: 0; } /* ---- KÖTELEZŐ DOKUMENTUMOK: önálló blokk kategóriánként ---- Két korábbi változat esett ki. A kétoszlopos kártyarács csipkés lett, mert a kártya magassága a fájlok számától függ (egy kategóriához több fájl is tartozhat). Az egysoros, három hasábos elrendezés egybefolyt, és a névnek sem hagyott elég helyet. Itt minden kategória külön keretet és SZÍNES fejlécsávot kap: az állapot a sávból látszik, a tartalom pedig alatta teljes szélességben. */ .dok-savok { display: grid; gap: 10px; margin-top: 10px; } .dok-sav { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; } /* A fejléc magassága FIX, nem párnából adódik: így minden blokk pontosan egyforma, akkor is, ha a betűméret vagy a benne lévő feltöltő változik. Ugyanaz az elv, mint a mezőknél (52.2). */ .dok-sav-fej { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-left: 3px solid transparent; } /* Halvány tónus a felületen, telített szín az ÉLÉN. A korábbi #dcfce7 / #fee2e2 túl harsány volt hat blokknál egymás alatt. */ .dok-kesz > .dok-sav-fej { background: #f2faf5; border-left-color: #16a34a; } .dok-hianyzik > .dok-sav-fej { background: #fdf3f3; border-left-color: #dc2626; } .dok-sav-nev { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; } .dok-kesz .dok-sav-nev, .dok-kesz .dok-sav-ikon { color: #166534; } .dok-hianyzik .dok-sav-nev, .dok-hianyzik .dok-sav-ikon { color: #991b1b; } .dok-sav-ikon { flex-shrink: 0; font-size: 13px; font-weight: 600; } /* Az állapot a színes sávból látszik, de a felolvasóknak ki kell mondani. */ .dok-sav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* A FELTÖLTŐ A FEJLÉCBEN van, a név és az állapotikon között: nem visz külön sort, és a keskeny sáv adja a magasságát. A színes háttéren fehér, egy pixeles szaggatott keret olvasható — a két pixeles túl hangsúlyos lenne. */ /* A `padding: 0` NEM felesleges: a közös `.dropzone-form` szabály 12 pixel alsó párnát ad, amitől az űrlap 36 pixel magas lenne a 32-es sávban — az `overflow: hidden` levágja az alját, és a feltöltő lecsúszottnak látszik. */ .dok-sav-fej .dropzone-form { flex: 0 0 155px; margin: 0; padding: 0; } /* A fejlécben csak a MÉRET tér el, a kinézetet az alap `.dropzone` adja. */ .dok-sav-fej .dropzone { height: 24px; padding: 0 8px; line-height: 22px; } /* Hiányzó dokumentumnál a keret és a szöveg a piros családból — így a feltöltő is odavezet, ahol dolog van. */ .dok-hianyzik .dok-sav-fej .dropzone { border-color: #c98d8d; color: #991b1b; } /* A hiányzó dokumentum piros kerete NE nyomja el a kurzor- és a húzás-jelzést: a `.dok-hianyzik ... .dropzone` azonos erősségű az alap `:hover`-rel, ezért ezek a sorok utána következnek. */ .dok-hianyzik .dok-sav-fej .dropzone:hover, .dok-hianyzik .dok-sav-fej .dropzone:focus, .dok-hianyzik .dok-sav-fej .dropzone.dragover { border-color: var(--accent); color: var(--accent-ink); } .dok-sav-tartalom { flex: 1 1 100%; min-width: 0; padding: 6px 12px; } /* A fájlsor négy eleme egy alapvonalon: ikon, név, VEZETŐVONAL, dátum. Az aláhúzás helyett a vonal köti össze a nevet a dátummal — az aláhúzás egy hosszú fájlnévnél az egész sort átszelte, és a linkségen kívül semmit nem jelzett. */ .dok-sor { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 13px; } .dok-sor-ikon { flex-shrink: 0; } /* A hosszú fájlnév egy sorba szorul; a teljes név a `title`-ből, hoveren. */ .dok-fnev { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .dok-fnev:hover { text-decoration: underline; } /* Az `a[data-elonezet]` szabály pontozott aláhúzást ad (előnézet-jelző), ami itt a vezetővonallal együtt zavaros: a név alatt pontok, utána folytonos vonal. A szelektor erősebb, mint a `.dok-fnev`, ezért kifejezetten felül kell írni. */ a.dok-fnev[data-elonezet] { border-bottom: 0; } /* A vonal CSAK a maradék helyet foglalja el: hosszú névnél nullára zsugorodik, tehát nem tolja el a dátumot. A -3px a betű alapvonalához igazítja. */ .dok-vezeto { flex: 1; min-width: 10px; border-bottom: 1px solid var(--line); transform: translateY(-3px); } .dok-datum { flex-shrink: 0; font-size: 11px; color: var(--muted); white-space: nowrap; } /* Szűk kijelzőn a fejléc két sorba tördel: a feltöltő a név alá kerül. */ @media (max-width: 700px) { .dok-sav-fej { flex-wrap: wrap; } .dok-sav-fej .dropzone-form { flex: 1 1 100%; margin-top: 6px; } } .szabad-dok-sor { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3efe7; font-size: 13px; } .szabad-dok-sor:last-of-type { border-bottom: 0; } .szabad-dok-info { flex: 1; min-width: 0; } .szabad-dok-info a { word-break: break-word; } .dok-datum { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ---- Állapot napló ---- */ .naplo-sor { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3efe7; font-size: 13px; } .naplo-sor:last-of-type { border-bottom: 0; } .naplo-allapot { font-weight: 600; padding: 2px 10px; border-radius: 10px; font-size: 12px; } .naplo-aktiv { background: #dcfce7; color: #166534; } .naplo-megszunt { background: #fde2e2; color: #991b1b; } .naplo-statusz-nev { color: var(--ink); font-weight: 500; } .naplo-datum { color: var(--muted); margin-left: auto; } /* Felmondás dátum + hint */ .felmondas-datum { color: var(--brand); font-weight: 600; } .felmondas-hint { margin: 10px 0 18px; } /* ---- Dashboard ---- */ .dash-kereso { display: flex; gap: 8px; margin-bottom: 20px; max-width: 560px; } .dash-kereso input { flex: 1; } .dash-kartyak { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; } .dash-kartya { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; border-top: 4px solid var(--brand); display: flex; align-items: center; gap: 14px; } .dash-ikon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #eef2f6; color: var(--brand); } .dash-ikon svg { width: 22px; height: 22px; } .dash-kartya-szov { min-width: 0; } .dash-kartya-kiemelt { border-top-color: var(--accent); } .dash-kartya-kiemelt .dash-ikon { background: #fdf3e7; color: var(--accent-ink); } .dash-fig { border-top-color: #d97706; } .dash-fig .dash-ikon { background: #fdf3e7; color: #d97706; } .dash-veszely { border-top-color: #dc2626; } .dash-veszely .dash-ikon { background: #fde2e2; color: #dc2626; } .dash-szam { font-size: 24px; font-weight: 700; color: var(--brand); line-height: 1.1; } .tipus-reszlet { margin-top: 10px; font-size: 13px; line-height: 1.7; } .tipus-reszlet strong { color: var(--ink); } /* Statisztika: soronként egységes, sorok közt eltérő kártya-szín (felső szegély) */ .stat-kartya { border-top: 4px solid var(--line); } .stat-sor-tipus .stat-kartya { border-top-color: #2c5580; } /* típusbontás – kék */ .stat-sor-ossz .stat-kartya { border-top-color: #d97706; } /* összesen – narancs */ .stat-sor-extra .stat-kartya { border-top-color: #4b7f52; } /* lejáró/várható/compliance – zöld */ .stat-osszesen-cimke { display: flex; align-items: center; gap: 16px; margin: 24px 0 10px; font-weight: 700; color: var(--ink); font-size: 18px; } .stat-osszesen-cimke::after { content: ""; flex: 1; height: 1px; background: var(--line); } .stat-felirat { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; text-transform: none; letter-spacing: 0; } /* Statisztika kártyák: oszlopos tartalom, feleakkora felső térköz */ .stat-kartya { flex-direction: column; align-items: stretch; padding-top: 9px; } .stat-kartya .dash-kartya-szov { width: 100%; } /* Egységes szám-méret a statisztika kártyákon */ .stat-kartya .dash-szam { font-size: 20px; } /* Kártya-fejléc feliratok (típus, lejáró, kockázat) – az eredeti kinézet */ .stat-blokk-cim { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; } /* Ügyfélkockázat: külföldi sor + három színes jelvény */ .kockazat-kulf { font-size: 13px; color: var(--muted); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .kockazat-kulf strong { color: var(--ink); } .kockazat-jelvenyek { display: flex; gap: 6px; } .kockazat-jelveny { flex: 1; border-radius: 8px; padding: 8px 6px; text-align: center; } .kockazat-szam { font-size: 18px; font-weight: 700; line-height: 1.1; } .kockazat-nev { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; } .kockazat-magas { background: #fdeaea; } .kockazat-magas .kockazat-szam, .kockazat-magas .kockazat-nev { color: #dc2626; } .kockazat-kozepes { background: #fdf3e2; } .kockazat-kozepes .kockazat-szam, .kockazat-kozepes .kockazat-nev { color: #b45309; } .kockazat-alacsony { background: #eaf3ec; } .kockazat-alacsony .kockazat-szam, .kockazat-alacsony .kockazat-nev { color: #3f6f47; } /* Kezdőlap: 2 oszlop, a kártya a lista fejléce (egybefüggő doboz) */ .kezdo-2col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-top: 8px; } .kezdo-fejkartya { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid #d97706; border-radius: 12px 12px 0 0; padding: 12px 18px; display: flex; align-items: center; gap: 12px; } .kezdo-fejcimke { font-size: 16px; font-weight: 600; color: #2c5580; } .kezdo-fejszam { margin-left: auto; font-size: 22px; font-weight: 700; color: #d97706; white-space: nowrap; } .kezdo-veszely { border-top-color: #dc2626; } .kezdo-veszely .kezdo-fejszam { color: #dc2626; } .kezdo-listadoboz { background: var(--surface); border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; padding: 6px 18px 14px; } @media (max-width: 860px) { .kezdo-2col { grid-template-columns: 1fr; } } .dash-kartya-kiemelt .dash-szam { color: var(--accent-ink); } .dash-fig .dash-szam { color: #d97706; } .dash-veszely .dash-szam { color: #dc2626; } .dash-cimke { font-size: 11px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .03em; } .dash-lista-sor { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f3efe7; font-size: 13px; } .dash-lista-sor:last-of-type { border-bottom: 0; } .dash-datum { color: var(--muted); white-space: nowrap; } .dash-datum-lejart { color: #dc2626; font-weight: 600; white-space: nowrap; } .dash-statusz-szin { display: inline-block; width: 44px; height: 20px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); } .dash-tabla { table-layout: fixed; width: 100%; } .dash-tabla th { font-size: 12px; vertical-align: bottom; } .dash-tabla td { font-size: 13px; vertical-align: middle; } .dash-tabla th, .dash-tabla td { padding-left: 5px; padding-right: 5px; } /* 1. Szerződés státusz: minimális, középre, a fejléc törhet két sorba */ .dash-tabla th:nth-child(1), .dash-tabla td:nth-child(1) { width: 82px; text-align: center; white-space: normal; } /* 2. Lejárat napja: minimális, középre, egy sorban */ .dash-tabla th:nth-child(2), .dash-tabla td:nth-child(2) { width: 92px; text-align: center; white-space: nowrap; } /* 3. Ügyfél neve: a maradék hely, lehetőleg ne törjön */ .dash-tabla th:nth-child(3), .dash-tabla td:nth-child(3) { width: auto; overflow-wrap: break-word; } /* 4. Fizetendő: minimális, középre, egy sorban */ .dash-tabla th:nth-child(4), .dash-tabla td:nth-child(4) { width: 84px; text-align: center; white-space: nowrap; } .dash-tabla td:nth-child(1) .dash-statusz-szin { width: 34px; height: 16px; } /* Figyelmeztető sáv */ .flash-warn { background: #fef6e7; border: 1px solid #f5d58a; color: #92400e; padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } /* ---- Üzenetek ---- */ .uzenet-sor { padding: 10px 0; border-bottom: 1px solid #f3efe7; font-size: 13px; } .uzenet-sor:last-of-type { border-bottom: 0; } .uzenet-fej { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .uzenet-datum { color: var(--muted); font-size: 12px; } .uzenet-targy { font-weight: 600; } /* ---- Üzenet űrlap (címke balra, mező jobbra) ---- */ .uzenet-urlap .urlap-sor { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .uzenet-urlap .urlap-sor > label { flex: 0 0 200px; max-width: 200px; font-size: 13px; color: var(--ink); font-weight: 500; } .uzenet-urlap .urlap-sor > select, .uzenet-urlap .urlap-sor > input[type="text"], .uzenet-urlap .urlap-sor > input[type="file"] { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; } .uzenet-urlap .urlap-sor > select { text-overflow: ellipsis; } .uzenet-urlap .urlap-sor > div { flex: 1; } .kotelezo { color: #dc2626; } .uj-mezo-sor input { background: #fdf3e7; } @media (max-width: 700px) { .uzenet-urlap .urlap-sor { flex-direction: column; align-items: stretch; gap: 4px; } .uzenet-urlap .urlap-sor > label { flex: none; max-width: none; } } /* ---- Üzenet lenyíló szekciók (adatlap) ---- */ .uzenet-szekcio { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; border-top: 3px solid var(--brand); margin-bottom: 14px; overflow: hidden; } .uzenet-szekcio > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; } .uzenet-szekcio > summary::-webkit-details-marker { display: none; } .uzenet-szekcio > summary::after { content: "▾"; color: var(--muted); transition: transform .15s; } .uzenet-szekcio[open] > summary::after { transform: rotate(180deg); } .uzenet-szekcio-tartalom { padding: 0 18px 16px; } .uzenet-ikonok { white-space: nowrap; line-height: 1; } .uz-ikon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 10px; padding: 0; background: none; border: 0; cursor: pointer; vertical-align: middle; color: var(--accent); text-decoration: none; } .uz-ikon svg { width: 20px; height: 20px; display: block; } .uz-ikon-gomb:hover, .uzenet-ikonok a.uz-ikon:hover { color: var(--brand); } .uz-ikon-inaktiv { color: #b8c0c9; cursor: default; } .uz-olvasott { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); white-space: nowrap; } .uz-olvasott svg { width: 16px; height: 16px; flex: none; color: var(--accent); } .uz-ikon-torles { color: var(--accent); } .uz-ikon-torles:hover { color: var(--brand); } /* A táblázat sora ne nőjön az ikonok miatt */ .uzenet-ikonok { height: 1em; } .uz-lapozo { margin-top: 10px; display: flex; gap: 4px; flex-wrap: wrap; } .uz-lap { display: inline-block; min-width: 30px; text-align: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); font-size: 13px; } .uz-lap:hover { background: var(--bg); } .uz-lap.aktiv { background: var(--brand); color: #fff; border-color: var(--brand); cursor: default; } .uz-hezag { padding: 4px 2px; color: var(--muted); font-size: 13px; } .uz-lap-info { margin-left: auto; align-self: center; color: var(--muted); font-size: 12.5px; } /* ---- Riportok ---- */ .riport-tipusok { display: flex; gap: 18px; flex-wrap: wrap; } .riport-racs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; max-width: 1000px; } .riport-racs .block { max-width: 100%; margin-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; } .riport-racs .block .hint { flex: 1 0 auto; } .riport-racs .block > .block-title, .riport-racs .block > .hint, .riport-racs .block > form { align-self: stretch; width: 100%; } .riport-gombsor { display: flex; gap: 8px; flex-wrap: wrap; } .riport-racs .riport-szeles { grid-column: 1 / -1; } /* A rácson kívül álló széles blokkok (szankciós, automatikus riportok) */ .block.riport-szeles { max-width: 1000px; margin-bottom: 18px; } .riport-racs { margin-bottom: 18px; } @media (max-width: 720px) { .riport-racs { grid-template-columns: 1fr; } } /* Törzsadat összevonás (feladó/megjegyzés) */ .osszevon-urlap { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; } .osszevon-select { width: 360px; max-width: 360px; } /* ---- Összecsukható sidebar (szűk képernyő) ---- */ @media (max-width: 1000px) { .topbar { position: sticky; top: 0; z-index: 900; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; margin-left: 0; transform: translateX(-100%); transition: transform .2s ease; } .sidebar-toggled .sidebar { margin-left: 0; transform: translateX(0); } .sidebar-toggled .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.4); } } /* ---- MFA (kétlépcsős azonosítás) ---- */ .mfa-qr { display:flex; justify-content:center; margin:18px 0; } .mfa-qr img, .mfa-qr canvas { border:8px solid #fff; border-radius:8px; } .mfa-kodok { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; max-width:360px; } .mfa-kod { font-family:monospace; font-size:16px; letter-spacing:1px; background:#f4f4f7; padding:8px 12px; border-radius:6px; text-align:center; } .login-alt { margin-top:16px; font-size:13px; text-align:center; } .login-alt a { color:var(--accent); } /* Törölt (megőrzési idő lejárt) melléklet ikonja */ .uz-ikon-torolt { color: #b9b2a4; cursor: help; opacity: .7; } /* Automatikus riportok tábla: az első három oszlop egy sorban, a leírás keskenyebb */ .auto-riport-tabla { table-layout: fixed; } .auto-riport-tabla th, .auto-riport-tabla td { overflow-wrap: break-word; word-break: normal; } .auto-riport-tabla th:nth-child(1), .auto-riport-tabla td:nth-child(1) { width: 17%; } .auto-riport-tabla th:nth-child(2), .auto-riport-tabla td:nth-child(2) { width: 14%; } .auto-riport-tabla th:nth-child(3), .auto-riport-tabla td:nth-child(3) { width: 22%; } .auto-riport-tabla th:nth-child(4), .auto-riport-tabla td:nth-child(4) { width: 47%; } /* Kivétel: ez a cella törhet, ne lógjon ki (hosszú "Mikor fut" szöveg) */ .auto-riport-tabla td.nowrap-nem { white-space: normal; } /* Teendő-jelző ikon az ügyfélnév mellett (listák, keresés) */ .teendo-jel { display:inline-flex; vertical-align:middle; color:#d97706; margin-left:6px; } .teendo-jel svg { width:16px; height:16px; } /* Teendők tábla: teljes szélesség, ügyfél/típus egy sorban, teendő kapja a helyet */ .teendo-tabla { width: 100%; } .teendo-tabla th:nth-child(1), .teendo-tabla td:nth-child(1), .teendo-tabla th:nth-child(2), .teendo-tabla td:nth-child(2) { white-space: nowrap; } .teendo-tabla th:nth-child(3), .teendo-tabla td:nth-child(3) { width: 100%; } .teendo-tabla td:nth-child(1) { vertical-align: middle; } /* Teljes szélességű kártya (felülírja a .card 560px korlátját) */ .card-szeles { max-width: none; } /* Helyesbítő értesítő gomb (téves küldemény) */ .uz-ikon-helyesbites { color: #d97706; } .uz-ikon-helyesbites:hover { color: #b45309; } /* Témaválasztó oldal */ .tema-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .tema-kartya { display: flex; flex-direction: column; gap: 8px; cursor: pointer; border: 2px solid var(--line); border-radius: 10px; padding: 10px; transition: border-color .15s, box-shadow .15s; } .tema-kartya:hover { border-color: var(--accent); } .tema-kartya.valasztott, .tema-kartya:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .tema-kartya input { position: absolute; opacity: 0; pointer-events: none; } .tema-elonezet { position: relative; display: block; height: 62px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); overflow: hidden; } .tema-sav { position: absolute; top: 0; left: 0; right: 0; height: 20px; } .tema-gomb { position: absolute; bottom: 10px; left: 10px; width: 34px; height: 16px; border-radius: 4px; } .tema-nev { font-weight: 600; font-size: 14px; text-align: center; color: var(--ink); } /* Témaválasztó csoportcím (világos/sötét) */ .tema-csoport-cim { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 10px; } /* ============================================================ Egységes betűtípus MINDEN űrlapelemen és gombon. A böngésző a form-elemeknél alapból nem örökli az oldal betűjét, ezért kell ez a globális szabály (különben a gombok/legördülők eltérő betűvel jelennek meg). ============================================================ */ button, input, select, textarea, optgroup { font-family: inherit; } .btn, .btn-secondary, .btn-danger, .btn-torol, .btn-sm { font-family: inherit; } /* ---- Dokumentum-előnézet (egérrávitelre) ---- */ /* Lebegő panel, amiben PDF/kép jelenik meg letöltés nélkül. A pozíciót JS állítja. */ .dok-elonezet { position: fixed; z-index: 1200; width: 520px; height: 620px; display: none; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.22); } .dok-elonezet.open { display: flex; } .dok-elonezet-fej { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dok-elonezet-test { flex: 1; min-height: 0; background: var(--semleges-bg); } .dok-elonezet-test iframe { width: 100%; height: 100%; border: 0; display: block; } .dok-elonezet-test img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Jelzés, hogy a hivatkozásnak van előnézete. */ a[data-elonezet] { border-bottom: 1px dotted currentColor; } @media (max-width: 900px) { /* Kis képernyőn nincs egérrávitel, a panel se kell. */ .dok-elonezet { display: none !important; } } /* ---- Hónapléptető (Befizetések szűrő) ---- */ /* A nyilak a listán léptetnek, nem naptári hónapot számolnak — a végeken kikapcsolnak, így nem lehet üres hónapra jutni. */ .ho-leptet { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; } .ho-nyil { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; font-size: 20px; line-height: 1; user-select: none; font-weight: 700; } .ho-nyil:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } /* A végeken nincs hova lépni: halvány, nem kattintható. */ .ho-nyil.tiltott { background: var(--semleges-bg); border-color: var(--line); color: var(--semleges-ink); cursor: default; } /* ---- Statisztika: havi bontás + havi alakulás egy sorban ---- */ /* A táblázat van elöl, a diagram utána. Ha nem férnek el egymás mellett, automatikusan egymás alá kerülnek (nincs fix breakpoint, a tartalom dönt). */ .stat-parban { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 18px; } .stat-parban > .stat-panel { flex: 1 1 520px; min-width: 0; max-width: none; margin: 0; } /* ---- Compliance: OpenSanctions + NAV kártya egy sorban ---- */ /* Csak akkor kerülnek egymás alá, ha nem férnek el — a tartalom dönt, nincs fix töréspont. */ .compliance-parban { /* stretch: a két kártya EGYENLŐ magas legyen, ne a tartalom szabja meg. A margin-bottom adja a térközt a Frissítési napló felé. */ display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; margin-bottom: 18px; } .compliance-parban > .compliance-panel { flex: 1 1 420px; min-width: 0; max-width: none; margin: 0; } /* ---- Megszűnés blokk lábrésze (állapot + visszavonás) ---- */ .megsz-labrisz { display: flex; justify-content: space-between; align-items: center; gap: 12px; /* Alatta közvetlenül űrlap-címke jön, ezért bőven kell alsó térköz. */ margin-top: 16px; margin-bottom: 28px; padding-top: 14px; border-top: 1px dashed var(--line); } /* Ugyanaz a pill-forma, mint a kártya jobb felső állapotjelzőjén (.szerz-statusz-badge), hogy a két jelzés egy nyelvet beszéljen. */ /* Akkora, mint a mellette lévő gomb — a két jelzés egyenrangú. */ /* Jól látható állapotjelző: ez a legfontosabb információ a blokk alján. */ .allapot-pill { display: inline-block; padding: 10px 22px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.2; letter-spacing: .02em; } .allapot-pill.pill-lezart { background: var(--ok-bg); color: var(--ok-ink); } .allapot-pill.pill-folyamat { background: var(--sarga-bg); color: var(--sarga-ink); } .allapot-pill.pill-folyamat:hover { background: var(--accent); color: #fff; }