/* ATCE Rental – frontend stílusok (sötét "console" redesign).
*
* A class-nevek VÁLTOZATLANOK az eredetihez képest → a frontend.js (kereső,
* oszlopszűrő popover, foglalási form preview) és minden funkció működik tovább.
* A paletta és a betűk a brand.css CSS-változóiból jönnek.
*/
/* A raktár nézet kitör a téma konténeréből (a szélességet a JS számolja). */
.atce-warehouse {
font-size: 14px;
position: relative;
box-sizing: border-box;
font-family: var(--atce-font);
color: var(--atce-text);
}
/* ---- Vezérlősor ---- */
.atce-wh-controls {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
margin-bottom: 16px;
}
.atce-wh-search { display: flex; align-items: stretch; flex: 1; min-width: 280px; }
.atce-wh-search .atce-chip-field { flex: 1; }
/* A dátum-ablak + Update + Add new product a sor jobb szélére kerül, mint a maketten. */
.atce-wh-dates { margin-left: auto; }
/* Operátor pill a keresőmező jobb szélén belül (mint a maketten: „contains ▾"). */
.atce-wh-search .atce-op-select {
border: 0;
background: rgba(255,255,255,.05);
border-radius: 7px;
padding: 4px 8px;
font-size: 11px;
margin-left: 4px;
flex: 0 0 auto;
}
/* Operátor-választó (fő kereső + popover egyaránt) */
.atce-op-select {
background: var(--atce-surface-2);
border: 1px solid var(--atce-line);
color: var(--atce-text);
border-radius: 8px;
padding: 8px 11px;
font-family: var(--atce-mono);
font-size: 12px;
color-scheme: dark;
cursor: pointer;
}
/* Chip-mező (fő kereső és oszlopszűrő) */
.atce-chip-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-width: 280px;
padding: 5px 9px;
border: 1px solid var(--atce-line);
border-radius: 9px;
background: var(--atce-surface-2);
}
.atce-chip-field .atce-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.atce-chip-input {
border: 0;
outline: 0;
flex: 1;
min-width: 120px;
padding: 4px;
background: transparent;
color: var(--atce-text);
font-family: var(--atce-font);
font-size: 13px;
}
.atce-chip-input:disabled { color: var(--atce-faint); }
.atce-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--atce-accent);
color: var(--atce-accent-ink);
border-radius: 13px;
padding: 2px 4px 2px 9px;
font-family: var(--atce-mono);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.atce-chip-x {
border: 0;
background: rgba(0,0,0,.22);
color: var(--atce-accent-ink);
border-radius: 50%;
width: 15px;
height: 15px;
line-height: 14px;
cursor: pointer;
padding: 0;
font-size: 12px;
}
/* Oszlopfejléc + szűrőgomb */
.atce-col-label { margin-right: 6px; }
.atce-col-filter-btn {
border: 1px solid var(--atce-line);
background: transparent;
color: var(--atce-faint);
border-radius: 6px;
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 3px 6px;
}
.atce-col-filter-btn:hover { color: var(--atce-text-dim); }
.atce-col-filter-btn.active {
background: var(--atce-accent);
color: var(--atce-accent-ink);
border-color: var(--atce-accent);
}
/* Oszlopszűrő popover (a JS a -ba teszi, ezért önállóan sötét) */
.atce-col-popover {
position: absolute;
z-index: 1000;
background: var(--atce-surface-2);
border: 1px solid var(--atce-line-strong);
border-radius: 10px;
box-shadow: 0 18px 44px rgba(0,0,0,.55);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 290px;
}
.atce-col-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
.atce-col-pop-title {
font-family: var(--atce-mono);
font-size: 10px;
letter-spacing: .08em;
color: var(--atce-muted);
}
.atce-col-pop-x {
border: 0;
background: transparent;
color: var(--atce-faint);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0 2px;
}
.atce-col-pop-x:hover { color: var(--atce-text); }
.atce-col-popover .atce-op-select { width: 100%; }
/* Szöveges szűrő-mód (operátor + chip-mező) — a JS display:flex/none-nal váltja az
ENUM móddal (lásd lent), max. az egyik látszik egyszerre. */
.atce-col-pop-text { display: flex; flex-direction: column; gap: 10px; }
/* ENUM szűrő-mód (Excel-szerű pipálható érték-lista — Status/Category/Availability). */
.atce-col-pop-enum { display: none; flex-direction: column; gap: 8px; }
.atce-col-enum-actions { display: flex; gap: 8px; }
.atce-col-enum-quick {
border: 1px solid var(--atce-line);
background: rgba(255,255,255,.04);
color: var(--atce-text-dim);
border-radius: 6px;
padding: 3px 9px;
cursor: pointer;
font-family: var(--atce-font);
font-size: 11px;
}
.atce-col-enum-quick:hover { background: rgba(255,255,255,.08); color: var(--atce-text); }
/* Kis, görgethető konténer, hogy sok érték esetén (pl. sok category) se lógjon ki
a popoverből — #2c: kb. 8 sor magasság (item ~24px + 2px gap), a többi görgetéssel
érhető el. */
.atce-col-enum-list {
max-height: 208px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid var(--atce-line);
border-radius: 8px;
padding: 6px;
background: var(--atce-surface-2);
}
.atce-col-enum-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 5px;
font-size: 13px;
cursor: pointer;
}
.atce-col-enum-item:hover { background: rgba(255,255,255,.05); }
.atce-col-enum-item input[type="checkbox"] { cursor: pointer; }
/* justify-content: flex-end + a Clear gomb margin-right:auto helyettesíti a korábbi
space-between-et — így ha a Clear el van rejtve (enum-oszlopoknál, #2b: a duplikált
Clear-fix miatt, lásd frontend.js openPopover), a "Done" magától a jobb szélre kerül,
nem csúszik a bal szélre (ahogy space-between egy elemmel tenné). */
.atce-col-actions { display: flex; justify-content: flex-end; gap: 8px; }
.atce-col-clear { margin-right: auto; }
.atce-col-clear, .atce-col-close {
border: 1px solid var(--atce-line-strong);
background: transparent;
color: var(--atce-text-dim);
border-radius: 7px;
padding: 7px 16px;
cursor: pointer;
font-family: var(--atce-font);
font-size: 12px;
}
.atce-col-close {
background: var(--atce-accent);
color: var(--atce-accent-ink);
border-color: var(--atce-accent);
font-weight: 600;
}
/* Dátum-ablak */
.atce-wh-dates { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.atce-wh-dates label {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--atce-mono);
font-size: 11px;
color: var(--atce-muted);
}
.atce-wh-dates input[type="date"] {
background: var(--atce-surface-2);
border: 1px solid var(--atce-line);
color: var(--atce-text);
border-radius: 8px;
padding: 8px 10px;
font-family: var(--atce-mono);
font-size: 12px;
color-scheme: dark;
}
/* #3: kompakt inline hint a dátum-vezérlők sorában (nem külön blokk a táblázat
* fölött) — csak akkor látszik, ha még nincs dátumszűrés beállítva. Kis, halvány
* szöveg, a mezőkkel egy sorban, keskeny nézetben szabadon tördelődhet. */
.atce-wh-dates .atce-wh-nofilter-hint {
display: inline-block;
margin: 0;
max-width: 220px;
line-height: 1.3;
}
/* Login gate */
.atce-login-gate {
max-width: 480px;
margin: 48px auto;
padding: 28px;
text-align: center;
color: var(--atce-text);
}
.atce-login-gate .atce-btn { display: inline-block; text-decoration: none; }
/* Gombok */
.atce-btn {
padding: 9px 17px;
border: 0;
border-radius: 9px;
background: var(--atce-accent);
color: var(--atce-accent-ink);
cursor: pointer;
font-family: var(--atce-font);
font-size: 13px;
font-weight: 600;
}
.atce-btn:hover { filter: brightness(1.08); }
.atce-btn-primary { font-weight: 600; }
/* Lap-zár (JS teszi rá a -re, ha a warehouse kitölti a képernyőt): a
dokumentum nem görgethető függőlegesen → nincs második görgő az oldalon, és a
sticky dátum-sor nem tekerhető ki. A táblázat a SAJÁT görgető-dobozában görög.
Csak akkor aktív, ha a rács alá jut elég hely (lásd JS fitHeight avail>260),
így kis ablaknál nem szorul semmi elérhetetlenül a viewport alá. */
html.atce-wh-locked,
html.atce-wh-locked body {
overflow: hidden;
}
/* ---- Görgethető rács ---- */
/* Excel-szerű freeze: a rács SAJÁT görgető-doboz mindkét irányban (overflow: auto).
A max-height-ot JS állítja be a viewport aljához igazítva (initWarehouse → fitHeight),
így a függőleges görgetés a dobozon BELÜL történik → a sticky thead (top:0) a doboz
tetejére tapad (a legfelső dátum-sor mindig látszik, akárhány terméket görgetsz le),
a sticky első oszlop pedig a doboz bal szélére. Ha a JS nem futna le, a max-height
hiánya = a régi (csak vízszintes) viselkedés, tehát nem romlik el. */
.atce-wh-scroll {
overflow: auto;
border: 1px solid var(--atce-line);
border-radius: 12px;
background: var(--atce-surface);
}
.atce-wh-table {
border-collapse: separate;
border-spacing: 0;
width: max-content;
min-width: 100%;
/* A kétsoros thead (hónap-sor + napszám-sor) magasság-alapja: a napszám-sor
sticky offsetje erre épül (top: var(--atce-mh-h)), hogy a hónap-sor
(top: 0) alá tapadjon görgetéskor. */
--atce-mh-h: 22px;
/* Egy nap oszlopszélessége — a fejléc th.atce-day EBBŐL kapja a fix
szélességét, a track-sávok pedig ugyanezzel a változóval számolják a
pozíciójukat/szélességüket (calc(i*var(--atce-day-w))), így a kettő
garantáltan pixelre fedi egymást. */
--atce-day-w: 34px;
}
.atce-wh-table th,
.atce-wh-table td {
border-bottom: 1px solid rgba(255,255,255,.05);
padding: 9px 13px;
text-align: left;
white-space: nowrap;
}
.atce-wh-table thead th {
background: var(--atce-surface-2);
position: sticky;
top: 0;
z-index: 2;
font-family: var(--atce-font);
font-size: 11px;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--atce-muted);
border-bottom: 1px solid var(--atce-line);
}
/* Kétsoros thead: az 1. sor (hónap-sor) a tetejére tapad (top: 0, fix
magasság); a 2. sor (napszám-sor) ez alá (top: var(--atce-mh-h)). Csak a
2. sorra írjuk felül a top-ot — az 1. sor a fenti alapszabály top:0-ját
örökli. */
.atce-wh-table thead tr:nth-child(1) th {
height: var(--atce-mh-h);
padding-top: 0;
padding-bottom: 0;
}
.atce-wh-table thead tr:nth-child(2) th {
top: var(--atce-mh-h);
}
/* Hónap-cellák (Jul 2026 stb.) a hónap-sorban. Magas specificitás kell
(.atce-wh-table thead th.atce-month), mert a `.atce-wh-table th` alapszabály
text-align: left-je különben legyőzné a középre igazítást. A "sáv-jelleg"
(surface-2 háttér + alsó szegély + elválasztók) CSAK ezeken a cellákon
marad, a vezető cella (lásd lentebb) egybeolvad a táblaháttérrel. */
.atce-wh-table thead th.atce-month {
text-align: center;
font-size: 10px;
color: var(--atce-text-dim);
border-left: 1px solid var(--atce-line);
white-space: nowrap;
overflow: hidden;
}
/* Hónapnév + évszám külön span-ben — kis térköz közéjük. */
.atce-month-year { margin-left: 7px; }
/* A vezető (üres) cella a hónap-sorban — a sticky viselkedést (left:0, z-index)
az .atce-sticky-col osztály adja (lásd lentebb). Vizuálisan üres térnek kell
tűnnie, hogy a hónap-sáv csak a Gantt-naptár fölött látszódjon: a görgető-
wrapper hátterét kapja (OPAK marad — sticky cella, alácsúszik a tartalom!)
és nincs alsó szegélye. A magasabb specificitás a
`.atce-wh-table thead .atce-sticky-col` surface-2 hátterét is legyőzi. */
.atce-wh-table thead th.atce-mh-lead {
background: var(--atce-surface);
border-bottom: none;
padding-left: 13px;
}
/* Zebra-csíkozás (olvashatóság). Osztály-alapú (.atce-row-alt), NEM nth-child,
mert a lenyíló egység-sorok megzavarnák a páros/páratlan számolást. A ragadós
első oszlop átlátszatlan árnyalatot kap, hogy görgetéskor ne látsszon át a rács.
background-color (NEM background shorthand): a shorthand magasabb
specificitással (0-2-3 vs 0-2-1 a .atce-cell-track szabályon) kinullázná a
track-cellára költöztetett rács/hétvége background-image-et a váltósorokon. */
.atce-wh-table tbody tr.atce-row-alt td { background-color: rgba(255,255,255,.025); }
.atce-wh-table tbody tr.atce-row-alt .atce-sticky-col { background: #131519; }
/* Hover a zebra fölött — ugyanezért background-color itt is. */
.atce-wh-table tbody tr:hover td { background-color: rgba(255,255,255,.05); }
.atce-wh-table tbody tr:hover .atce-sticky-col { background: #171a20; }
/* Ragadós első oszlop (Product) */
.atce-sticky-col {
position: sticky;
left: 0;
z-index: 1;
background: var(--atce-surface);
min-width: 224px;
box-shadow: inset -1px 0 0 var(--atce-line);
}
/* A terméknév + Edit egy sorban, alatta a termékkód (mono, halvány). */
.atce-prod-head { display: flex; align-items: center; gap: 6px; }
.atce-wh-table tbody .atce-sticky-col strong { font-weight: 500; color: #eceef0; }
.atce-prod-code {
display: block;
margin-top: 2px;
font-family: var(--atce-mono);
font-size: 10px;
color: var(--atce-faint);
}
.atce-wh-table thead .atce-sticky-col { z-index: 3; background: var(--atce-surface-2); }
/* Napi fejléc-cellák (kétsoros: szám + rövid nap), KÖZÉPRE zárva.
A `.atce-wh-table th` bal-igazítását magasabb specificitással kell felülírni,
különben a két soros felirat balra lóg. */
.atce-wh-table th.atce-day {
text-align: center;
font-family: var(--atce-mono);
/* Border-boxos FIX szélesség (nem csak min-width) — a track-sávok
pozíciója/szélessége ugyanezt a --atce-day-w értéket használja
calc()-ban, a fejléc-oszlopnak ezért pontosan ennyinek KELL lennie,
különben a sávok elcsúsznak a nap-rácstól görgetés közben. A 2px
oldalpadding (a korábbi 4px helyett) a kétjegyű napszámoknak is elfér
34px-en belül border-boxszal. */
box-sizing: border-box;
width: var(--atce-day-w);
min-width: var(--atce-day-w);
max-width: var(--atce-day-w);
padding: 7px 2px !important;
line-height: 1.25;
}
.atce-day-num { display: block; text-align: center; font-size: 11px; color: var(--atce-text-dim); }
.atce-day-dow { display: block; text-align: center; font-size: 9px; color: var(--atce-faint); }
/* „Ma" oszlop: zöld jelölővonal a bal élén (fejléc + cellák).
border-left-tel (nem box-shadow), hogy ne ütközzön a hétvége-árnyalással. */
.atce-is-today { border-left: 2px solid var(--atce-green); }
/* Hétvégi napok (Szo/Vas) halvány árnyalása a gantt-ban — inset box-shadow,
ami a zebra-háttér FÖLÉ, de a tile (cell-box) ALÁ kerül, így a kocka látszik. */
.atce-day.atce-weekend,
.atce-cell.atce-weekend { box-shadow: inset 0 0 0 999px rgba(125,150,185,.05); }
/* Státusz pöttyök (izzó LED) */
.atce-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.atce-green { background: var(--atce-green); box-shadow: 0 0 7px var(--atce-green); }
.atce-yellow { background: var(--atce-yellow); box-shadow: 0 0 7px var(--atce-yellow); }
.atce-red { background: var(--atce-red); box-shadow: 0 0 7px var(--atce-red); }
/* Gantt cellák — lekerekített, hézagos tile-ok (mint a maketten). */
.atce-cell {
min-width: 34px;
width: 34px;
padding: 4px 3px !important;
text-align: center;
vertical-align: middle;
}
.atce-cell-box {
display: block;
width: 100%;
height: 22px;
border-radius: 5px;
background: rgba(255,255,255,.05);
}
/* Kliens-kérés: buffer = SÁRGA, tényleges foglalás = PIROS (some/all). */
.atce-cell-box.atce-open { background: rgba(255,255,255,.05); }
.atce-cell-box.atce-buffer { background: var(--atce-yellow); opacity: .85; }
.atce-cell-box.atce-booked-partial { background: var(--atce-red); opacity: .5; }
.atce-cell-box.atce-booked-full { background: var(--atce-red); }
/* Régi alias-ok (legenda/visszafelé kompatibilitás). */
.atce-cell-box.atce-partial { background: var(--atce-yellow); }
.atce-cell-box.atce-full { background: var(--atce-red); }
/* Legenda-minták ugyanazzal a tile-stílussal. */
.atce-inline {
display: inline-block;
width: 22px;
height: 12px;
border-radius: 4px;
vertical-align: middle;
}
/* Gantt track-cella (perf, 0.9.0; vizuális fix, 0.9.1) — a régi napi | -sor
HELYETT soronként EGYETLEN | , benne a rács/hétvége CSS-háttérként és a
foglalásokból annyi .atce-bar div, amennyi ténylegesen van. Lásd
atce_wh_render_track() a frontend.php-ban. A td-n NINCS padding, hogy a
track bal széle pontosan az első nap-oszlop bal szélén kezdődjön (a fejléc
th.atce-day-jal azonos --atce-day-w alapon). */
.atce-wh-table td.atce-cell-track {
padding: 0 !important;
/* Az .atce-track abszolút kitöltésének viszonyítási kerete. */
position: relative;
/* A rács/hétvége-háttér a TD-n van, nem a belső 30px-es .atce-track divön —
így a teljes sormagasságot kitölti, és a vonalak/árnyalás soron át
folytonosak maradnak (0.9.0-ban soronként megszakadtak). Csempézett
gradiens (background-size + repeat-x) a repeating-linear-gradient
helyett: a böngésző csempénként kerekít, a törtpixel-hiba nem halmozódik
fel és nem tűnnek el vonalak (pl. Windows 125%-os skálázásnál). 1. réteg:
1px vonal minden nap-csempe bal szélén. 2. réteg: 7 napos csempe, az
5–7. nap (szo+vas) árnyalva, a --atce-dow0-val (az ablak első napjának
hétköznap-indexe) eltolva, hogy a valódi hétvégékkel essen egybe. */
background-image:
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, transparent calc(5*var(--atce-day-w)), rgba(125,150,185,.05) calc(5*var(--atce-day-w)));
background-size: var(--atce-day-w) 100%, calc(7*var(--atce-day-w)) 100%;
background-position-x: 0, calc(-1 * var(--atce-dow0, 0) * var(--atce-day-w));
background-repeat: repeat-x;
}
.atce-track {
/* Csak a sávok/ma-jelölő konténere — a rács/hétvége a szülő TD-n van
(lásd fent), ez a div a teljes cellát kitölti. */
position: absolute;
inset: 0;
}
/* Foglalás-sávok — pozíció/szélesség a napindexből számolva (calc(i*var(--atce-day-w))),
ugyanaz az alap, mint a fejléc oszlopszélessége, így pixelre illeszkednek.
Fix 22px magasság, függőlegesen középre (a sortípustól független, mint a
régi cella-kockák). */
.atce-bar {
position: absolute;
top: 50%;
height: 22px;
margin-top: -11px;
border-radius: 5px;
}
.atce-bar.atce-buffer { background: var(--atce-yellow); opacity: .85; }
.atce-bar.atce-booked-full { background: var(--atce-red); }
/* „Ma" jelölő a track-ben — a fejléc .atce-is-today border-left-jének
folytatása lefelé. Nincs z-index: a sávok fölé a DOM-sorrend emeli
(atce_wh_render_track() a today-divet a bar-divek UTÁN rendereli), a sticky
Product-oszlop (z-index:1) pedig így auto z-index mellett is eltakarja
görgetéskor — emelt z-index esetén átlógna rajta. */
.atce-track-today {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--atce-green);
}
/* Tag (bundle), figyelmeztetés, szabad jelzés */
.atce-tag {
display: inline-block;
font-family: var(--atce-mono);
font-size: 9px;
letter-spacing: .04em;
background: transparent;
color: var(--atce-text-dim);
border: 1px solid var(--atce-line-strong);
padding: 1px 6px;
border-radius: 20px;
margin-left: 6px;
}
/* Státusz pill badge (kerettel, ponttal) — mint a maketten. */
.atce-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border: 1px solid var(--atce-line);
border-radius: 999px;
background: var(--atce-surface-2);
font-family: var(--atce-mono);
font-size: 11px;
color: var(--atce-text-dim);
white-space: nowrap; /* fix címke (pl. „Awaiting return") ne törjön két sorba */
}
.atce-status .atce-dot { margin-right: 0; }
/* Elérhetőség: „free" zöld ponttal / „booked" zászló-ikonnal. */
.atce-avail {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--atce-mono);
font-size: 12px;
}
.atce-avail-free { color: var(--atce-green); }
.atce-avail-booked { color: var(--atce-text-dim); }
.atce-avail .atce-flag { color: var(--atce-accent); font-size: 13px; line-height: 1; }
/* Régi alias-ok megtartva visszafelé kompatibilitásként. */
.atce-warn { color: var(--atce-yellow); font-family: var(--atce-mono); font-size: 12px; }
.atce-free { color: var(--atce-green); font-family: var(--atce-mono); font-size: 12px; }
/* Kezelői Edit-link a termék-oszlopban + Add sáv.
A makett szerint az „+ Add new product" jobbra igazított, másodlagos (kerethű)
gomb — az accent kitöltött gomb a fő művelet (Update). */
/* „+ Add new product" — másodlagos (kerethű) gomb a vezérlősor jobb szélén,
az accent kitöltött „Update" a fő művelet. */
.atce-wh-add {
background: transparent;
border: 1px solid var(--atce-line-strong);
color: var(--atce-text);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.atce-wh-add:hover { background: rgba(255,255,255,.05); filter: none; }
.atce-mgr-edit {
display: inline-block;
margin-left: auto;
font-family: var(--atce-mono);
font-size: 10px;
padding: 1px 8px;
border: 1px solid var(--atce-line-strong);
border-radius: 6px;
text-decoration: none;
color: var(--atce-accent);
}
.atce-mgr-edit:hover { background: rgba(255,255,255,.06); }
/* Egységek lenyitó gombja a terméknév előtt. Nagyobb nyíl + nagyobb kattintható
terület (min. ~28x28px — a user visszajelzése alapján túl kicsi volt). */
.atce-units-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 28px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--atce-faint);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 2px;
transition: transform .15s, color .15s, background .15s;
}
.atce-units-toggle:hover { color: var(--atce-text); background: rgba(255,255,255,.06); }
.atce-units-toggle.open { transform: rotate(90deg); color: var(--atce-accent); }
/* „Home-tól távol" jelölő ikon (lokáció-info, nem a fő szemafor-szín). */
.atce-away { color: var(--atce-yellow); font-size: 12px; line-height: 1; cursor: help; }
/* Kép-ikon gomb a terméknév mellett (Task 2) — csak akkor renderelődik, ha a
terméknek van feltöltött képe; kattintásra az .atce-lightbox nyílik. A méret/
stílus az .atce-units-toggle mintáját követi, hogy a sor-magasság ne nőjön és
a sticky Product-oszlop layoutja ne törjön (lásd fitWarehouse a frontend.js-ben). */
.atce-img-view {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--atce-faint);
cursor: pointer;
line-height: 1;
padding: 2px;
border-radius: 5px;
flex: 0 0 auto;
}
.atce-img-view svg { display: block; }
.atce-img-view:hover { color: var(--atce-accent); background: rgba(255,255,255,.07); }
/* ---- Kép-lightbox (Task 2) — a warehouse kép-ikonjának nagyítója ---- */
.atce-lightbox[hidden] { display: none; }
.atce-lightbox {
position: fixed;
inset: 0;
z-index: 10200;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
}
.atce-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.8);
}
.atce-lightbox-box {
position: relative;
z-index: 1;
display: flex;
max-width: 100%;
max-height: 100%;
}
.atce-lightbox-img {
display: block;
max-width: 80vw;
max-height: 80vh;
object-fit: contain;
border-radius: 10px;
background: var(--atce-surface);
box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
/* A vezérlők a kép FÖLÉ vannak pozicionálva (nem a doboz szélén kívül), hogy a
dobozon kívüli negatív offset sose lógjon ki/vágódjon le a viewport szélén. */
.atce-lightbox-close,
.atce-lightbox-prev,
.atce-lightbox-next {
position: absolute;
border: 1px solid var(--atce-line-strong);
background: rgba(10,11,14,.72);
color: var(--atce-text);
cursor: pointer;
line-height: 1;
}
.atce-lightbox-close:hover,
.atce-lightbox-prev:hover,
.atce-lightbox-next:hover { color: var(--atce-accent); }
.atce-lightbox-close {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 19px;
}
.atce-lightbox-prev,
.atce-lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 22px;
}
.atce-lightbox-prev { left: 10px; }
.atce-lightbox-next { right: 10px; }
.atce-lightbox-counter {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 4px 11px;
border-radius: 999px;
background: rgba(10,11,14,.72);
font-family: var(--atce-mono);
font-size: 12px;
color: var(--atce-text-dim);
}
/* ----- Lenyíló per-darab nézet (VALÓDI külső sorok, a Gantt-hoz igazítva) ----- */
/* Lokáció-csoport fejléc-sor (teljes szélességű elválasztó). */
.atce-uloc-row .atce-uloc-head {
padding: 8px 13px 5px !important;
border-bottom: 1px solid rgba(255,255,255,.10);
background: var(--atce-surface);
font-family: var(--atce-mono);
font-size: 10px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--atce-faint);
box-shadow: inset 2px 0 0 var(--atce-accent);
}
.atce-uloc-row .atce-uloc-head strong { color: var(--atce-accent); }
/* A lokáció-fejléc (és a not_rentable fejléc) teljes szélességű colspan-cella,
ezért a felirat-tartalmat egy BELSŐ sticky span ragasztja a görgető-doboz bal
széléhez — a cellára tett left:0 önmagában nem pinneli a szöveget. A left érték
a cella 13px bal-paddingjével esik egybe, hogy a címke a per-egység sorok
ident-oszlopával egy vonalban maradjon vízszintes görgetéskor. */
.atce-uloc-pin {
position: sticky;
left: 13px;
display: inline-block;
}
/* not_rentable csoport elválasztó sora (H6) — a lokáció-fejléchez hasonló, de
semleges/halvány színnel + 🔧 ikonnal, hogy elkülönüljön a kiadható daraboktól. */
.atce-uloc-nr-row .atce-uloc-nr-head {
padding: 9px 13px 5px !important;
border-top: 1px solid rgba(255,255,255,.06);
background: var(--atce-surface);
font-family: var(--atce-mono);
font-size: 10px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--atce-muted);
box-shadow: inset 2px 0 0 var(--atce-line-strong);
}
.atce-uloc-nr-head .atce-nr-icon { filter: grayscale(1) opacity(.7); margin-right: 4px; }
/* Per-darab sor — kompaktabb, mint a típus-sor; az accent bal-él jelzi a csoportot. */
.atce-unit-line td {
padding-top: 5px !important;
padding-bottom: 5px !important;
font-family: var(--atce-mono);
font-size: 11px;
}
.atce-unit-line .atce-unit-ident { box-shadow: inset 2px 0 0 var(--atce-accent), inset -1px 0 0 var(--atce-line); }
/* #7: termék-név a szemafor-pötty és a sorszám között a lenyíló egyed-sorban. */
.atce-unit-name { color: var(--atce-text-dim); margin-right: 6px; }
/* Bundle lenyíló elem-sor — a per-darab sor stílusát örökli, de a bal-él
halványabb (nincs KONKRÉT egyed mögötte, csak egy elem-típus aggregáltan). */
.atce-bundle-item-line .atce-unit-ident { box-shadow: inset 2px 0 0 var(--atce-line-strong), inset -1px 0 0 var(--atce-line); }
.atce-unit-cell-status { color: var(--atce-text-dim); }
.atce-unit-cell-comment { color: var(--atce-muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.atce-unit-nocomment { color: var(--atce-faint); }
/* Kattintható utolsó-komment (a teljes naplót modal nyitja) — link-szerű, nem gomb-doboz. */
.atce-comment-open {
border: 0;
background: transparent;
padding: 0;
margin: 0;
max-width: 100%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
text-align: left;
cursor: pointer;
color: var(--atce-muted);
font-family: var(--atce-mono);
font-size: 11px;
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.atce-comment-open:hover { color: var(--atce-text-dim); }
.atce-unit-range { color: var(--atce-text-dim); font-variant-numeric: tabular-nums; }
.atce-unit-range .atce-ubk + .atce-ubk { margin-left: 0; }
/* Per-darab státusz-felirat — a szín a felső szemaforral EGYEZIK:
piros=checked out, sárga=booked later, zöld=available; a not_rentable semleges. */
.atce-ustat { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.atce-ustat.ok { color: var(--atce-green); }
.atce-ustat.later { color: var(--atce-yellow); }
.atce-ustat.booked { color: var(--atce-red); }
.atce-ustat.nr { color: var(--atce-muted); }
/* not_rentable: semleges pötty (nem a foglalás-sárga) + 🔧 jelölő. */
.atce-dot.atce-nr { background: var(--atce-muted); box-shadow: none; }
.atce-nr-mark { font-size: 11px; line-height: 1; cursor: help; filter: grayscale(1) opacity(.7); }
.atce-legend {
margin-top: 12px;
font-family: var(--atce-mono);
font-size: 11px;
color: var(--atce-muted);
}
/* ---- Foglalási form ---- */
/* A makett szerint az űrlap egy keretes, lekerekített sötét kártya. */
.atce-booking-form {
max-width: 600px;
margin: 0 auto;
color: var(--atce-text);
background: var(--atce-surface);
border: 1px solid var(--atce-line);
border-radius: 14px;
padding: 26px;
}
.atce-booking-form > p:last-child { margin-bottom: 0; }
.atce-booking-form label {
display: block;
font-family: var(--atce-mono);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--atce-muted);
margin-bottom: 7px;
font-weight: 500;
}
.atce-booking-form input,
.atce-booking-form select,
.atce-booking-form textarea {
width: 100%;
background: var(--atce-surface-2);
border: 1px solid var(--atce-line);
color: var(--atce-text);
border-radius: 9px;
padding: 11px 13px;
font-family: var(--atce-font);
font-size: 14px;
box-sizing: border-box;
color-scheme: dark;
}
.atce-booking-form p { margin: 0 0 18px; }
.atce-bf-row { display: flex; gap: 14px; flex-wrap: wrap; }
.atce-bf-row label { flex: 1; }
/* #7: mező-szintű validációs hiba — piros keret + üzenet a mező alatt. Az adatok
megmaradnak (piszkozat), csak a hibás mező kap kiemelést. */
.atce-booking-form .atce-field-error,
.atce-booking-form .atce-field-error:focus {
border-color: var(--atce-red) !important;
box-shadow: 0 0 0 1px var(--atce-red);
}
.atce-booking-form .atce-bf-locations.atce-field-error {
border: 1px solid var(--atce-red);
border-radius: 11px;
padding: 14px 16px;
box-shadow: 0 0 0 1px var(--atce-red);
}
.atce-field-error-msg {
display: block;
width: 100%;
margin-top: 6px;
color: var(--atce-red);
font-size: 12.5px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
font-family: var(--atce-font);
}
.atce-bundle-items {
border: 1px solid var(--atce-line);
border-radius: 11px;
padding: 14px 16px;
margin: 0 0 18px;
background: var(--atce-surface);
}
/* A bundle-elem sor "rendes" (nem uppercase-label) megjelenése */
.atce-bundle-item {
display: flex !important;
align-items: center;
gap: 9px;
font-weight: normal !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: var(--atce-font) !important;
font-size: 14px !important;
color: var(--atce-text) !important;
margin-bottom: 8px;
}
.atce-bundle-item input { width: auto !important; accent-color: var(--atce-accent); }
.atce-bf-effective,
.atce-bf-price {
background: var(--atce-surface-2);
border: 1px solid var(--atce-line);
padding: 12px 14px;
border-radius: 10px;
font-family: var(--atce-mono);
font-size: 13px;
color: var(--atce-text);
}
/* Per-lokáció pickup-választó (kaszkád-allokáció) */
.atce-bf-locations {
border: 1px solid var(--atce-line);
border-radius: 11px;
padding: 14px 16px;
margin: 0 0 18px;
background: var(--atce-surface);
}
.atce-bf-locations > p:first-child {
margin: 0 0 12px;
font-size: 13px;
color: var(--atce-text-dim);
}
.atce-bf-loc-list { display: flex; flex-direction: column; gap: 7px; }
.atce-bf-loc-wrap { display: flex; flex-direction: column; gap: 3px; }
.atce-bf-loc {
display: flex !important;
align-items: center;
gap: 10px;
font-weight: normal !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: var(--atce-font) !important;
font-size: 14px !important;
color: var(--atce-text) !important;
margin: 0;
padding: 7px 10px;
border: 1px solid var(--atce-line);
border-radius: 9px;
background: var(--atce-surface-2);
}
.atce-bf-loc input { width: auto !important; accent-color: var(--atce-accent); margin: 0; }
.atce-bf-loc.is-own { border-color: var(--atce-green); }
.atce-bf-loc.is-empty { opacity: .5; }
.atce-bf-loc-label { flex: 1; }
.atce-bf-loc.is-own .atce-bf-loc-label { color: var(--atce-green); }
.atce-bf-loc-free {
font-family: var(--atce-mono);
font-size: 12px;
color: var(--atce-muted);
}
.atce-bf-heldat {
font-family: var(--atce-mono);
font-size: 11px;
color: var(--atce-faint);
padding: 0 10px 0 30px;
}
.atce-bf-alloc {
margin: 12px 0 0 !important;
font-family: var(--atce-mono);
font-size: 12px;
color: var(--atce-text-dim);
}
.atce-bf-alloc.atce-alloc-ok { color: var(--atce-green); }
.atce-bf-alloc.atce-alloc-short { color: var(--atce-yellow); }
.atce-hint { font-size: 12px; color: var(--atce-faint); font-family: var(--atce-mono); }
/* #20: kereshető combobox a termék-select fölött. A natív |