/* ===================================================================== Pepper House - Élő napi forgalom (live.php) Kiegészítő stíluslap a style.css mellé - ugyanazokat a CSS változókat használja (--bg, --bg-2, --bg-3, --line, --red, ...), így vizuálisan egy termék marad az index.php dashboarddal. ===================================================================== */ /* ===================================================================== TÉMA (sötét / világos) --------------------------------------------------------------------- A style.css :root változóit írjuk felül a alapján. A fejléc (.topbar) MINDIG sötét marad - a logó fehér szöveg átlátszó háttéren, világos sávon olvashatatlan lenne -, ezért saját, fixen sötét változókészletet kap lentebb. ===================================================================== */ :root, :root[data-theme="dark"] { --bg: #0d0d10; --bg-2: #16161a; --bg-3: #1f1f24; --line: #2a2a30; --line-2: #3a3a42; --text: #f0f0f0; --text-dim: #a8a8b0; --text-mute: #6d6d78; --red: #e11d2a; --red-2: #ff3a48; --red-soft: rgba(225, 29, 42, .12); --green: #55d48e; --shadow: 0 6px 24px rgba(0, 0, 0, .45); } :root[data-theme="light"] { --bg: #f4f4f6; --bg-2: #ffffff; --bg-3: #f0f0f3; --line: #dcdce2; --line-2: #c4c4cc; --text: #16161a; --text-dim: #55555f; --text-mute: #85858f; --red: #e11d2a; /* a márkaszín mindkét témában azonos */ --red-2: #b81420; --red-soft: rgba(225, 29, 42, .09); --green: #16874f; /* fehér háttéren olvasható zöld */ --shadow: 0 4px 16px rgba(20, 20, 35, .10); } /* --- A fejléc mindig sötét: saját változókészlet ------------------- */ .topbar { --bg-2: #16161a; --bg-3: #1f1f24; --line: #2a2a30; --line-2: #3a3a42; --text: #f0f0f0; --text-dim: #a8a8b0; --text-mute: #6d6d78; background: linear-gradient(180deg, #141418 0%, #0d0d10 100%); border-bottom-color: #2a2a30; color: #f0f0f0; } /* --- Téma váltó gomb (a fejlécben, tehát mindig sötét stílusú) ----- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: #1f1f24; color: #a8a8b0; border: 1px solid #3a3a42; border-radius: 8px; cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: #fff; border-color: #e11d2a; background: rgba(225, 29, 42, .14); } .theme-toggle svg { display: block; } /* Sötét témában a holdat, világosban a napot mutatjuk */ .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: block; } :root[data-theme="light"] .theme-toggle .ic-sun { display: block; } :root[data-theme="light"] .theme-toggle .ic-moon { display: none; } /* --- Világos témás korrekciók ------------------------------------- */ /* Helyszín fülek sávja (a style.css-ben fixen sötét gradiens) */ :root[data-theme="light"] .loc-tabs { background: linear-gradient(180deg, #ececef 0%, #e3e3e8 100%); } :root[data-theme="light"] .loc-tab:hover { color: var(--red); background: rgba(225, 29, 42, .07); } /* Fehéren fehér szöveg helyett piros hover */ :root[data-theme="light"] .period-tab:hover, :root[data-theme="light"] a.nav-arrow:hover, :root[data-theme="light"] a.nav-now:hover { color: var(--red); } :root[data-theme="light"] .period-tab.active { color: #fff; } /* Piros figyelmeztetések: világos háttéren sötétebb piros szöveg */ :root[data-theme="light"] .notice, :root[data-theme="light"] .refresh-pill.warn { color: #97121b; } :root[data-theme="light"] .refresh-pill.warn strong, :root[data-theme="light"] .notice strong { color: #7a0d15; } /* --- Fizetési mód színek (mindkét témában jól olvashatók) --------- */ :root { --pay-1: #e8763a; --pay-2: #2aa198; --pay-3: #e8c33a; --pay-4: #e11d2a; --pay-5: #9b59b6; } /* --- VIP kártyarendszer színe -------------------------------------- */ /* A kintlévő keret KÖTELEZETTSÉG, nem bevétel, ezért nem kapja meg a forgalom pirosát - borostyán akcentussal jelöljük, hogy senki ne olvassa bevételnek. Világos témában sötétebb árnyalat kell, hogy fehér háttéren is olvasható maradjon. */ :root, :root[data-theme="dark"] { --vip: #e0a233; --vip-soft: rgba(224, 162, 51, .12); } :root[data-theme="light"] { --vip: #96690c; --vip-soft: rgba(224, 162, 51, .16); } /* --- Dátum + frissítés sáv ---------------------------------------- */ .live-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding: 16px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); } .live-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* A felirat + dátum + kiegészítő hármas egy alapvonalra igazítva, a léptető nyilak viszont függőlegesen középre - ezért a külön doboz. */ .live-date-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } .live-date-label { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; } .live-date-value { font-size: 21px; font-weight: 700; color: var(--red); letter-spacing: .3px; font-variant-numeric: tabular-nums; white-space: nowrap; } .live-date-day { color: var(--text-dim); font-size: 13.5px; } .live-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* --- Nap / hét / hónap léptető nyilak ------------------------------ */ /* Napi nézetben a nyilak a szomszédos NYITVA tartott napra ugranak, a zárva tartott napok kimaradnak; ha nincs ilyen irányban adat, a nyíl nem link, hanem halvány, nem kattintható jel. */ .nav-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text-dim); font-size: 19px; line-height: 1; text-decoration: none; user-select: none; -webkit-user-select: none; transition: color .15s, border-color .15s, background .15s; } a.nav-arrow:hover { color: #fff; border-color: var(--red); background: var(--red-soft); } .nav-arrow.disabled { color: var(--text-mute); border-color: var(--line); background: transparent; opacity: .45; cursor: default; } /* A három léptető gomb fix csoportban, a dátum ELŐTT. Ha a nyilak a dátumot fognák közre, a változó szélességű dátumszöveg minden váltásnál odébb tolná őket - így viszont mindig ugyanott vannak. */ .nav-group { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-right: 14px; } /* Középső gomb: ugrás a legfrissebb napra. Akkor is kirajzoljuk, ha már ott állunk (letiltva), hogy a csoport szélessége soha ne ugráljon. */ .nav-now { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text-dim); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: color .15s, border-color .15s, background .15s; } a.nav-now:hover { color: #fff; border-color: var(--red); background: var(--red-soft); } .nav-now.disabled { color: var(--text-mute); border-color: var(--line); background: transparent; opacity: .45; cursor: default; } /* Napi / heti / havi / egyedi váltó (a .period-tabs mintát használja) */ .view-tabs { flex-shrink: 0; } /* --- Egyedi tartomány választó ------------------------------------- */ /* Csak az "Egyedi" nézetben jelenik meg, a dátumfelirat mellett. GET űrlap, tehát a beküldés után a tartomány a címsorban marad - így az automatikus frissítés és a megosztott link is ugyanazt hozza vissza. A magasságok (32px) szándékosan egyeznek a léptető nyilakéval, hogy a sáv egy vonalban maradjon. */ .range-picker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line); } .rp-field { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .rp-label { color: var(--text-mute); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.1px; } .range-picker input[type="date"] { height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1; /* A natív dátumválasztó (naptár ikon, felugró panel) a color-scheme alapján színez - enélkül sötét témában világos naptárt kapnánk. */ color-scheme: dark; } :root[data-theme="light"] .range-picker input[type="date"] { color-scheme: light; } .range-picker input[type="date"]:hover { border-color: var(--line-2); } .range-picker input[type="date"]:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .rp-go { height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .rp-go:hover { color: #fff; border-color: var(--red); background: var(--red); } .rp-go:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } /* Frissítve jelző */ .refresh-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; white-space: nowrap; } .refresh-pill strong { color: var(--text); font-weight: 700; } .refresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(85, 212, 142, .18); flex-shrink: 0; } .refresh-pill.warn { border-color: rgba(225, 29, 42, .45); background: var(--red-soft); color: #ffb3bb; } .refresh-pill.warn strong { color: #ffd6da; } .refresh-pill.warn .refresh-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(225, 29, 42, .22); } /* --- POS terminál kártyák ----------------------------------------- */ .pos-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 32px; } .pos-card { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 16px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .pos-card:hover { border-color: var(--line-2); transform: translateY(-1px); } .pos-card-label { color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: .6px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pos-card-label .pos-num { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; } .pos-card-value { font-size: 27px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; } /* Pontozott elválasztó a kártya alsó adatsora fölött */ .pos-card-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--line-2); display: flex; justify-content: space-between; gap: 10px; color: var(--text-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; } .pos-card-foot span:last-child { color: var(--text-dim); } /* --- Kétoszlopos panelsor ----------------------------------------- */ .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; margin-bottom: 22px; align-items: start; } @media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } } .panel + .panel { margin-top: 22px; } .panel-note { color: var(--text-mute); font-size: 12.5px; } /* --- Fizetési mód eloszlás (vízszintes halmozott sáv) ------------- */ .paybar { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); margin-bottom: 20px; } .payseg { height: 100%; min-width: 2px; transition: filter .15s; } .payseg:hover { filter: brightness(1.2); } .paylegend { display: flex; flex-direction: column; gap: 2px; } .payleg { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; } .payleg:last-child { border-bottom: none; } .payleg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .payleg-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payleg-name .cnt { color: var(--text-mute); font-size: 12.5px; margin-left: 6px; } .payleg-amt { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .payleg-pct { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; white-space: nowrap; } .payleg-total { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--line-2); display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); } .payleg-total strong { color: var(--red); font-variant-numeric: tabular-nums; } /* --- Órabontás grafikon ------------------------------------------- */ .hour-chart-wrap { position: relative; width: 100%; height: 300px; } @media (max-width: 640px) { .hour-chart-wrap { height: 240px; } } /* Előző napi összehasonlító sor a grafikon alatt */ .hour-compare { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--line-2); font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; } .hc-label { text-transform: uppercase; letter-spacing: 1.1px; } .hc-value { color: var(--text-dim); font-weight: 700; font-size: 13.5px; } .hc-value.neutral { color: var(--text-mute); font-weight: 400; font-style: italic; } .hc-delta { font-weight: 700; font-size: 13px; } .hc-delta.up { color: var(--green); } .hc-delta.down { color: var(--red); } .hc-delta.neutral { color: var(--text-mute); } /* --- Flotta-nézet: gépek állapota (2a) ----------------------------- */ .agent-fresh { color: var(--green); font-variant-numeric: tabular-nums; } .agent-stale { color: var(--red); font-variant-numeric: tabular-nums; } .agent-old { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(245, 158, 11, .16); color: #b45309; font-size: 11px; font-weight: 700; } :root[data-theme="dark"] .agent-old, :root:not([data-theme="light"]) .agent-old { color: #f59e0b; } /* --- Passkey (biometrikus belépés) --------------------------------- */ .login-sep { display: flex; align-items: center; text-align: center; color: var(--text-mute); font-size: 12px; margin: 16px 0 12px; } .login-sep::before, .login-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .login-sep span { padding: 0 12px; } .pk-btn { width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-3); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .pk-btn:hover { border-color: var(--red); color: var(--red); } .pk-btn:disabled { opacity: .6; cursor: default; } .passkey-panel .pk-help { color: var(--text-mute); font-size: 13px; line-height: 1.6; margin: 0 0 14px; } .pk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .pk-row input[type="text"] { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-3); color: var(--text); font: inherit; } .pk-row .pk-btn { width: auto; flex: 0 0 auto; } .pk-msg { margin-top: 12px; font-size: 13px; font-weight: 600; } .pk-msg.ok { color: var(--green); } .pk-msg.err { color: var(--red); } .pk-list-wrap { margin-top: 20px; } .pk-list-title { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .pk-admin { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(225, 29, 42, .14); color: var(--red); font-size: 11px; font-weight: 700; } .pk-del { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--text-mute); font: inherit; font-size: 12.5px; cursor: pointer; } .pk-del:hover { border-color: var(--red); color: var(--red); } /* --- Menümérnökség: kategória-jelvények (C3) ----------------------- */ /* A négy Kasavana-Smith kategória színkódolva: sztár = zöld (tartsd), rejtvény = borostyán (reklámozd), igásló = kék (álistázd), kutya = szürke (megfontolandó a levétele). */ .cat-col { text-align: center; } table.data th.cat-col { text-align: center; } .menu-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .menu-badge-empty { color: var(--text-mute); } .menu-star { background: rgba(22, 163, 74, .16); color: #16a34a; } .menu-puzzle { background: rgba(245, 158, 11, .16); color: #b45309; } .menu-plow { background: rgba(59, 130, 246, .16); color: #2563eb; } .menu-dog { background: rgba(120, 120, 130, .16); color: var(--text-mute); } :root[data-theme="dark"] .menu-puzzle { color: #f59e0b; } :root:not([data-theme="light"]) .menu-puzzle { color: #f59e0b; } :root[data-theme="dark"] .menu-plow { color: #60a5fa; } :root:not([data-theme="light"]) .menu-plow { color: #60a5fa; } /* Magyarázó sor a tábla alatt */ .menu-eng-note { padding: 14px 20px 16px; border-top: 1px dotted var(--line-2); color: var(--text-mute); font-size: 12.5px; line-height: 2; } .menu-eng-note .menu-badge { margin: 0 2px 0 6px; } /* --- Egységek teljesítménye (D) ------------------------------------ */ /* "Összes" nézetben, a tranzakció-eloszlás alatt: egységenkénti forgalom, forgalmi részesedés sáv, és az előző időszakhoz mért változás. Két oszlopba tördel, ha van hely; keskeny kijelzőn egy oszlop. */ .unit-perf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } @media (max-width: 640px) { .unit-perf { grid-template-columns: 1fr; gap: 14px; } } .unit-row { min-width: 0; } .unit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .unit-name { color: var(--text); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unit-rev { color: var(--text); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } .unit-bar { height: 8px; border-radius: 5px; background: var(--bg-3); overflow: hidden; } .unit-bar-fill { height: 100%; border-radius: 5px; background: var(--red); } .unit-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; } .unit-share { color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; } .unit-delta { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .unit-delta.up { color: var(--green); } .unit-delta.down { color: var(--red); } .unit-delta.neutral { color: var(--text-mute); font-weight: 400; } /* --- Grafikon metrika-váltó (Forgalom / ELÁBÉ / Fedezet) ----------- */ /* A .period-tabs mintát követi, de a három gomb aktív színe a metrikáé: forgalom = piros, ELÁBÉ = narancs, fedezet = zöld - ugyanaz a szín, amivel a grafikon is rajzol, hogy első pillantásra egyértelmű legyen. */ .chart-metric { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; } .chart-metric[hidden] { display: none; } .cm-btn { padding: 5px 13px; border: 0; border-radius: 6px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s; } .cm-btn:hover { color: var(--text); } .cm-btn.active { color: #fff; } .cm-btn[data-metric="revenue"].active { background: var(--red); } .cm-btn[data-metric="cost"].active { background: #f59e0b; } .cm-btn[data-metric="margin"].active { background: #16a34a; } .cm-btn[data-metric="ratio"].active { background: #06b6d4; } /* --- Top termékek: rendezés váltó ---------------------------------- */ .psort-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .psort-tabs .period-tab { cursor: pointer; white-space: nowrap; } /* Kattintható fejléc-cellák ugyanarra a rendezésre */ table.data th a { color: inherit; text-decoration: none; } table.data th a:hover { color: var(--red); } table.data th.sorted, table.data th.sorted a { color: var(--red); } /* --- Top termékek táblázata mobilon -------------------------------- */ /* A table.data alapból nowrap - ez az összes többi táblázatnál jó, mert ott rövid feliratok vannak. A terméknevek viszont hosszúak ("Császárzsemle RÁNTOTT CSIRKE***"), így a táblázat szélesebb lett, mint a telefon képernyője: a két számoszlop kicsúszott a látóterből, és oldalra kellett húzogatni. Mobilon ezért a NÉVOSZLOP törhet, a két számoszlop marad egy sorban, jobbra igazítva - így minden termék összege és darabszáma egyszerre látszik, görgetés nélkül. A szöveg kisebb, a belső margó szorosabb. */ @media (max-width: 640px) { .psort-tools { width: 100%; justify-content: space-between; } table.data.products { font-size: 13px; } table.data.products td { padding: 9px 8px; } table.data.products th { padding: 9px 8px; font-size: 11px; letter-spacing: .4px; } table.data.products .name { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; } /* A számoszlopok csak annyit foglaljanak, amennyi a tartalmuk - a maradék hely a névé. */ table.data.products .num { width: 1%; } /* Ha nincs mit görgetni, ne is lehessen: a vízszintes görgetés ilyenkor csak véletlen elhúzásokat okozna. */ .table-wrap-products { overflow-x: hidden; } /* Fedezet-nézetben 6 oszlop: itt engedjük a vízszintes görgetést, különben levágnánk az oszlopokat. */ .table-wrap-products.wide { overflow-x: auto; } } /* "Fordítsd fekvőbe" jelzés - alapból rejtve, csak álló tájolású, keskeny kijelzőn jelenik meg, és csak a fedezet-nézetben van a DOM-ban. */ .rotate-hint { display: none; margin: 0 16px 10px; padding: 7px 12px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--text-mute); font-size: 12px; text-align: center; } @media (max-width: 640px) and (orientation: portrait) { .rotate-hint { display: block; } } /* Nagyon keskeny telefonokon (iPhone SE, 320-390 px) még egy fokkal kisebb, hogy a "123 456 Ft" is elférjen törés nélkül. */ @media (max-width: 400px) { table.data.products { font-size: 12px; } table.data.products td, table.data.products th { padding: 8px 6px; } } /* --- VIP kártyarendszer panel -------------------------------------- */ /* A csempesor a .period-totals / .ptotal mintát használja (index.php), csak az alsó margót vesszük le, mert alatta a panel saját táblázata következik. */ .vip-totals { margin-bottom: 0; } .ptotal-sub { margin-top: 6px; color: var(--text-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* Kintlévő keret: kötelezettség, nem bevétel */ .ptotal.vip-liability { background: var(--vip-soft); border-color: var(--vip); } .ptotal.vip-liability .ptotal-value { color: var(--vip); } /* Egyenleg / keret időbeli alakulása (B) */ .vip-chart-block { margin-top: 18px; padding-top: 16px; border-top: 1px dotted var(--line-2); } .vip-chart-title { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .vip-chart-wrap { position: relative; width: 100%; height: 220px; } @media (max-width: 640px) { .vip-chart-wrap { height: 190px; } } /* Személyzeti fogyasztás névsor (A) - lenyíló a VIP panelen belül */ .staff-names { margin-top: 18px; padding-top: 4px; border-top: 1px dotted var(--line-2); } .staff-names > summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none; } .staff-names > summary::-webkit-details-marker { display: none; } .staff-names-title { color: var(--text); font-weight: 700; font-size: 13.5px; } .staff-names-note { color: var(--text-mute); font-size: 12px; } .staff-names .collapse-chevron { margin-left: auto; color: var(--text-mute); transition: transform .15s; } .staff-names[open] .collapse-chevron { transform: rotate(90deg); } .staff-names-table { margin-top: 4px; } .staff-names-foot { padding: 12px 4px 4px; color: var(--text-mute); font-size: 12px; line-height: 1.6; } .ptotal-hint { color: var(--text-dim); font-size: 11.5px; font-weight: 600; } /* Magyarázó lábjegyzet a panel alján */ .vip-note { padding: 14px 20px 16px; border-top: 1px dotted var(--line-2); color: var(--text-mute); font-size: 12.5px; line-height: 1.6; } /* --- Üres állapot -------------------------------------------------- */ .empty-state { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 44px 28px; text-align: center; box-shadow: var(--shadow); } .empty-state .es-mark { font-size: 34px; color: var(--red); line-height: 1; margin-bottom: 14px; } .empty-state h2 { margin: 0 0 10px; font-size: 19px; font-weight: 700; } .empty-state p { margin: 0 auto; max-width: 520px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; } .empty-state p + p { margin-top: 10px; } /* --- KPI kártyák: kompakt statisztika-sáv --------------------------- */ /* A style.css alap méretei ezen az oldalon túl nagyok voltak: a felső sáv elnyomta az alatta lévő paneleket. Kisebb csempék, kisebb számok, szorosabb belső margó - a forgalom kártya továbbra is hangsúlyos, csak arányosan kisebb. */ .cards { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: 24px; } .card { padding: 13px 16px 12px; } .card::before { height: 2px; } .card-label { font-size: 11px; letter-spacing: 1.1px; margin-bottom: 6px; } .card-value { font-size: 22px; } .card.primary .card-value { font-size: 26px; } /* --- Apró kiegészítők --------------------------------------------- */ .card .card-sub { margin-top: 5px; color: var(--text-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .live-bar { padding: 14px; } .live-date-value { font-size: 18px; } .pos-card-value { font-size: 23px; } .live-tools { width: 100%; justify-content: space-between; } .live-date { width: 100%; } .live-date-main { flex: 1; } /* Külön sorba törve a bal oldali elválasztó és a behúzás félrevezető lenne - ott már nem a dátum "mellett" van, hanem alatta. */ .range-picker { width: 100%; margin-left: 0; padding-left: 0; border-left: none; padding-top: 12px; border-top: 1px dotted var(--line-2); justify-content: space-between; } .range-picker input[type="date"] { min-width: 0; } /* A style.css mobil szabálya visszanövesztené a csempéket, ezért itt (a később betöltött lapon) újra leszorítjuk őket. */ .cards { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); } .card-value { font-size: 20px; } .card.primary .card-value { font-size: 23px; } } /* --- Lenyíló panel (VIP kártyarendszer) ---------------------------- */ /* A
/ natív elemet használjuk JS helyett: így az automatikus, 60 másodperces frissítés után is kiszámíthatóan csukva nyílik meg, és billentyűzettel is működik. */ .panel-collapsible .panel-head { cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; } /* A böngészők alapértelmezett háromszögének elrejtése */ .panel-collapsible summary::-webkit-details-marker { display: none; } .panel-collapsible summary::marker { content: ""; } .panel-collapsible .panel-head:hover h2 { color: var(--red); } /* Saját chevron, ami lenyitáskor lefelé fordul */ .collapse-chevron { margin-left: auto; padding-left: 12px; color: var(--text-mute); font-size: 18px; line-height: 1; transition: transform .18s ease, color .15s; transform: rotate(90deg); } .panel-collapsible details[open] .collapse-chevron { transform: rotate(-90deg); color: var(--red); } .panel-collapsible .panel-head:hover .collapse-chevron { color: var(--red); } /* Csukott állapotban a fejléc alsó szegélye felesleges */ .panel-collapsible details:not([open]) .panel-head { border-bottom: none; } /* --- KPI csempék: desktopon MINDIG négy egy sorban ----------------- */ /* A style.css auto-fit rácsa változó számú oszlopot ad; itt viszont a négy fő mutató mindig egy sorban kell legyen, hogy egy pillantással összehasonlítható maradjon. Csak szűk képernyőn törik két oszlopra. */ .cards.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 860px) { .cards.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .cards.cards-4 { grid-template-columns: 1fr; } } /* Másodlagos csempék (sztornó, borravaló) - külön, keskenyebb soron, hogy ne törjék meg a fenti négyes rácsot */ .cards.cards-aux { grid-template-columns: repeat(auto-fit, minmax(168px, 220px)); margin-top: -10px; margin-bottom: 22px; } /* --- Lenyíló Profit csempe ---------------------------------------- */ /* A cards-aux rács egy cellája; lenyitva a három részletet mutatja. */ .profit-details { grid-column: 1 / -1; } .profit-details > summary { list-style: none; cursor: pointer; max-width: 220px; } .profit-details > summary::-webkit-details-marker { display: none; } .profit-details > summary::marker { content: ""; } .card-profit .collapse-chevron { display: inline-block; margin-left: 6px; padding-left: 0; font-size: 15px; vertical-align: middle; } .profit-details[open] .card-profit .collapse-chevron { transform: rotate(-90deg); color: var(--red); } .card-profit:hover .card-label { color: var(--red); } .profit-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 220px)); gap: 14px; margin-top: 12px; } /* Desktopon a lenyitott részlet a csempe MELLÉ, jobbra kerül - kitölti a cards-aux sor egyébként üres jobb oldalát -, nem alá. Mobilon (keskeny képernyőn) marad az alatta-elrendezés. */ @media (min-width: 861px) { .profit-details[open] { display: flex; align-items: flex-start; gap: 14px; } .profit-details[open] > summary { flex: 0 0 220px; } .profit-details[open] > .profit-breakdown { flex: 1; margin-top: 0; /* Egy vízszintes sor, a három kártya egymás mellett - nem tördel. A kártyák egyenlően osztoznak a maradék helyen. */ display: flex; flex-wrap: nowrap; } .profit-details[open] > .profit-breakdown > .card { flex: 1 1 0; min-width: 0; } } /* --- Százalékos eltérés az előző időszakhoz ----------------------- */ .card-sub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; min-height: 17px; /* fix magasság: a csempék akkor sem ugrálnak, ha valamelyiknél nincs összehasonlító adat */ } .card-delta { font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .card-delta.up { color: var(--green); } .card-delta.down { color: var(--red); } .card-delta.flat { color: var(--text-mute); } .card-note { font-size: 12px; color: var(--text-mute); } /* A kártyák alatti magyarázó sor: mihez képest van a százalék */ .cards-note { margin: -8px 0 22px; color: var(--text-mute); font-size: 12.5px; } /* POS kártya sztornó sora - halványabb, mint a tranzakciószám, mert kivételes esemény, nem napi rutin adat */ .pos-card-void { color: var(--text-mute); } .pos-card-void span:last-child { color: var(--red); font-weight: 600; } /* --- Naptárválasztó a dátumon ------------------------------------- */ /* A látható elem gomb, hogy billentyűzettel is elérhető legyen, de pontosan úgy nézzen ki, mint korábban a sima szöveg. */ button.live-date-value.date-pick { padding: 0; border: none; background: none; font-family: inherit; cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .15s, color .15s; } button.live-date-value.date-pick:hover, button.live-date-value.date-pick:focus-visible { border-bottom-color: var(--red); outline: none; } /* A rejtett dátummező. Nem display:none, mert azon a showPicker() és a fókusz sem működik - ehelyett kivesszük a folyamból és átlátszóvá tesszük. A .visible osztály a tartalék útvonalon hozza vissza. */ .date-pick-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; } .date-pick-input.visible { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; margin-left: 8px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text); font-size: 13px; }