/* ============================================================================
Jax Auto Shipping – sistemos išvaizda 2026 (bendra klientų ir ofiso langams).
Įkeliama po style.css / styleover.css ir jas perrašo. HTML, id ir class NEKEIČIAMI –
tik CSS, kad visos funkcijos (filtrai, datos, galerija, įkėlimas) veiktų kaip veikę.
Spalvos ir šriftas – kaip svetainėje www.jaxautoshipping.com (globals.css).
============================================================================ */
:root {
--jx-dark: #0b1b1a; --jx-dark-2: #0c221b; --jx-dark-3: #10291f; --jx-dark-btn: #16321d;
--jx-lime: #9bd122; --jx-lime-hover: #aedd36; --jx-lime-text: #557a1a; --jx-lime-soft: #eef7d9;
--jx-light: #f6f7f4; --jx-white: #ffffff;
--jx-ink: #0f1a16; --jx-ink-2: #2f3b35; --jx-muted: #5f6b65;
--jx-line: #e2e5e1; --jx-line-2: #cfd6d1;
--jx-red: #c0392b; --jx-red-soft: #fdecea;
--jx-font: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
--jx-radius: 10px;
--jx-ease: cubic-bezier(.2, .7, .2, 1);
--jx-shadow: 0 1px 2px rgba(11, 27, 26, .05), 0 6px 20px rgba(11, 27, 26, .06);
}
/* ---------- Pagrindas ---------- */
html, body {
background: var(--jx-light) !important;
font-family: var(--jx-font) !important;
font-size: 13px !important;
color: var(--jx-ink);
-webkit-font-smoothing: antialiased;
}
body { margin: 0; }
div#container {
width: auto !important; min-width: 0 !important; max-width: 1900px;
margin: 0 auto !important; padding: 0 20px 24px !important; box-sizing: border-box;
}
h1, h2, h3, h4 { font-family: var(--jx-font); color: var(--jx-ink); letter-spacing: -.01em; }
h1 { font-size: 18px !important; font-weight: 700; padding-bottom: 12px !important; }
h2 { font-size: 15px !important; font-weight: 700; padding-bottom: 10px !important; }
h3 { font-size: 13px !important; font-weight: 600; }
a, a:visited { color: var(--jx-lime-text); }
a:hover { color: var(--jx-dark); }
/* ---------- Antraštė: viena tamsiai žalia juosta – logotipas, meniu, paskyra ---------- */
div#header {
height: auto !important; overflow: visible !important;
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
margin: 16px 0 16px; padding: 12px 20px;
background: linear-gradient(135deg, var(--jx-dark) 0%, var(--jx-dark-3) 100%);
border-radius: 14px; box-shadow: var(--jx-shadow);
}
div#logo { float: none !important; height: auto !important; width: auto !important; padding: 0 !important; order: 1; position: relative; }
div#logo h1 { margin: 0; padding: 0 !important; line-height: 0; }
div#logo img { height: 48px; width: auto; display: block; position: relative; z-index: 1; }
/* Vieta sezoninei puošmenai aplink logotipą (Kalėdos ir pan.) – tuščia, kol neturi klasės jx-season-… */
.jx-season { position: absolute; inset: -10px -16px; pointer-events: none; z-index: 0; }
.jx-season:empty { display: none; }
div#admin { float: none !important; height: auto !important; width: auto !important; padding: 0 !important; order: 3; }
/* Laikrodžio langelis (klientui): Savanos laikas, ofiso valandos, kliento laikas (iš naršyklės laiko juostos, be leidimų) */
.jx-clock { order: 2; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; color: #fff; font-size: 11.5px; white-space: nowrap; min-height: 34px; justify-content: center; padding-right: 6px; }
.jx-clock:empty { display: none; }
.jx-clock b { font-size: 15px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.jx-clock span { color: #b9c4bd; }
.jx-clock .jx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8a9690; margin: 0 5px 0 2px; vertical-align: 1px; }
.jx-clock .jx-dot.is-open { background: var(--jx-lime); box-shadow: 0 0 0 3px rgba(155, 209, 34, .25); }
.jx-clock .jx-clock-you { color: #e8ede9; }
/* Orų langelis (ofisui): orai aikštelėje + laikrodis su data, vienoje eilutėje, atskirti plonu brūkšniu */
.jx-clock.jx-clock-office { flex-direction: row; align-items: center; gap: 14px; padding-right: 2px; }
.jx-clock-office .jx-wx { display: none; align-items: center; gap: 9px; }
.jx-clock-office .jx-wx.is-on { display: flex; animation: jxFadeUp .5s var(--jx-ease) both; }
.jx-clock-office .jx-wx-ico { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; }
.jx-clock-office .jx-wx-svg { width: 32px; height: 32px; overflow: visible; }
.jx-clock-office .jx-wx-text, .jx-clock-office .jx-time { display: flex; flex-direction: column; line-height: 1.2; }
.jx-clock-office .jx-time { align-items: flex-end; }
.jx-clock-office b { font-size: 17px; }
.jx-clock-office .jx-hdr-sep { width: 1px; height: 30px; background: rgba(255, 255, 255, .16); }
.jx-clock-office .jx-wx:not(.is-on) + .jx-hdr-sep { display: none; }
/* Orų ikonų judesys (kaip telefono orų programėlėje, tik ramiau) */
.jx-wx-sun { transform-origin: 16px 16px; animation: jxWxSpin 40s linear infinite; }
.jx-wx-sun-sm { transform-origin: 11px 10px; }
.jx-wx-cloud { animation: jxWxFloat 6s ease-in-out infinite; }
.jx-wx-drops path, .jx-wx-drops circle { animation: jxWxDrop 1.6s ease-in infinite; }
.jx-wx-drops path:nth-child(2), .jx-wx-drops circle:nth-child(2) { animation-delay: .5s; }
.jx-wx-drops path:nth-child(3), .jx-wx-drops circle:nth-child(3) { animation-delay: 1s; }
.jx-wx-bolt { animation: jxWxBolt 3.2s ease-in-out infinite; }
.jx-wx-fog { animation: jxWxFog 5s ease-in-out infinite; }
.jx-wx-wind { stroke-dasharray: 60; animation: jxWxWind 3s linear infinite; }
@keyframes jxWxSpin { to { transform: rotate(360deg); } }
@keyframes jxWxFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.2px); } }
@keyframes jxWxDrop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes jxWxBolt { 0%, 72%, 100% { opacity: 1; } 76% { opacity: .2; } 80% { opacity: 1; } 84% { opacity: .3; } 88% { opacity: 1; } }
@keyframes jxWxFog { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(1.5px); } }
@keyframes jxWxWind { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .jx-wx-svg * { animation: none !important; } }
/* Meniu juostoje: VISADA antra eilutė po logotipu (pirmoje – logotipas, paieška, orai/laikrodis, paskyra).
Anksčiau ≥ 2100 px buvo viena eilutė – Tomo iMac (≈ 2240 px) su paieškos lauku netilpo, orai ir paskyra krisdavo žemyn (2026-11-05). */
div#header div#meniu { order: 4; flex: 1 1 100%; margin: 0 !important; padding: 10px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; background: transparent !important; }
/* Paskyros langelis – pasirinktas variantas D „Išskleidžiamas meniu“ (2026-11-05): inicialai + vardas + rodyklė;
paspaudus (jax2026-ui.js) – vardas ir „Office/Client · vartotojo vardas“, My account, Change password, Log out */
div#admin { position: relative; z-index: 20; }
.jx-user { display: flex; align-items: center; gap: 10px; }
.jx-acc { position: relative; }
.jx-acc-btn { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; transition: background .18s, border-color .18s; }
.jx-acc-btn:hover, .jx-acc.is-open .jx-acc-btn { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .32); }
.jx-acc-btn .jx-user-ava { width: 30px; height: 30px; flex-basis: 30px; }
.jx-acc-car { width: 12px; height: 12px; color: #b9c4bd; flex: 0 0 12px; transition: transform .22s var(--jx-ease); }
.jx-acc.is-open .jx-acc-car { transform: rotate(180deg); }
.jx-acc-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: #fff; color: var(--jx-ink); border-radius: 12px; box-shadow: 0 14px 40px rgba(11, 27, 26, .22), 0 2px 6px rgba(11, 27, 26, .08); padding: 6px; font-family: var(--jx-font); font-size: 13px; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .17s var(--jx-ease), transform .17s var(--jx-ease), visibility 0s .17s; }
.jx-acc.is-open .jx-acc-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .17s var(--jx-ease), transform .17s var(--jx-ease); }
.jx-acc-menu::before { content: ''; position: absolute; right: 18px; top: -5px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.jx-acc-head { padding: 8px 10px 9px; border-bottom: 1px solid var(--jx-line); margin-bottom: 4px; line-height: 1.25; }
.jx-acc-head b { display: block; font-size: 13px; color: var(--jx-ink); }
.jx-acc-head small { font-size: 11px; color: var(--jx-muted); }
.jx-acc-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--jx-ink) !important; text-decoration: none; font-weight: 500; transition: background .12s; }
.jx-acc-menu a svg { width: 15px; height: 15px; color: var(--jx-muted); flex: 0 0 15px; }
.jx-acc-menu a:hover, .jx-acc-menu a:focus { background: var(--jx-lime-soft); color: var(--jx-lime-text) !important; outline: 0; }
.jx-acc-menu a:hover svg, .jx-acc-menu a:focus svg { color: var(--jx-lime-text); }
.jx-acc-menu a.is-current { font-weight: 700; }
.jx-acc-menu a.jx-acc-out { color: var(--jx-red) !important; border-top: 1px solid var(--jx-line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; }
.jx-acc-menu a.jx-acc-out svg { color: var(--jx-red); }
.jx-acc-menu a.jx-acc-out:hover, .jx-acc-menu a.jx-acc-out:focus { background: rgba(190, 50, 50, .08); color: var(--jx-red) !important; }
.jx-acc-menu a.jx-acc-out.jx-acc-only { border-top: 0; margin-top: 0; padding-top: 8px; border-radius: 8px; } /* kai meniu tik Log out (be „selfedit“ teisės) */
/* Paskyros puslapis: „Change password“ atveda prie slaptažodžio eilutės ir ją trumpam pažymi */
@keyframes jxRowFlash { 0%, 60% { background: var(--jx-lime-soft); } 100% { background: transparent; } }
tr.jx-row-flash td { animation: jxRowFlash 1.8s var(--jx-ease) both; }
.jx-user-link { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff !important; text-decoration: none; transition: background .18s, border-color .18s; }
.jx-user-link:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .32); }
.jx-user-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--jx-lime); color: var(--jx-dark); display: flex; align-items: center; justify-content: center; flex: 0 0 34px; box-shadow: 0 0 0 3px rgba(155, 209, 34, .22); }
.jx-user-ava svg { width: 18px; height: 18px; }
.jx-user-ini { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; font-family: var(--jx-font); }
.jx-user-text { display: flex; flex-direction: column; line-height: 1.15; }
.jx-user-text b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.jx-user-text small { font-size: 11px; color: #b9c4bd; white-space: nowrap; }
.jx-logout { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-weight: 600; font-size: 12.5px; text-decoration: none; white-space: nowrap; transition: background .18s var(--jx-ease), color .18s, border-color .18s, transform .18s var(--jx-ease), box-shadow .18s; }
.jx-logout svg { width: 15px; height: 15px; }
.jx-logout:hover { background: var(--jx-lime); border-color: var(--jx-lime); color: var(--jx-dark) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(155, 209, 34, .35); }
/* ---------- Viršutinis meniu – „meniu piliulės“, pasirinktas variantas V2 „Segmentai“ (iOS stiliaus jungiklis, 2026-11-05):
vienas jungtinis bėgelis, atidarytas punktas – balta plytelė, kuri paspaudus sklandžiai nuslysta į pasirinktą punktą
(.jx-seg-thumb piešia jax2026-ui.js; be JS – tiesiog baltas .is-active). Punktai ir jų vietos – tie patys. ---------- */
div#meniu { margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
div#meniu ul { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 !important; padding: 4px !important; list-style: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
div#meniu ul li { float: none !important; margin: 0 !important; padding: 0 !important; position: relative; z-index: 1; }
div#meniu ul li a {
display: inline-block; background: transparent !important; color: #d9e0dc !important;
border: 1px solid transparent; border-radius: 999px; padding: 7px 13px !important;
font-size: 13px !important; font-weight: 600; text-decoration: none; line-height: 1.2; white-space: nowrap;
transition: background .18s var(--jx-ease), color .18s, transform .18s var(--jx-ease);
}
div#meniu ul li a:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
div#meniu ul li a:active { transform: scale(.97); }
div#meniu ul li a.is-active, div#meniu ul li a.is-active:hover { background: #fff !important; color: var(--jx-dark) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
/* Slystanti balta plytelė (kai veikia JS): pati .is-active tampa permatoma, baltą piešia .jx-seg-thumb */
div#meniu ul.jx-seg li a.is-active, div#meniu ul.jx-seg li a.is-active:hover { background: transparent !important; box-shadow: none; }
.jx-seg-thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; will-change: transform, width; transition: transform .32s cubic-bezier(.2, .8, .2, 1), width .32s cubic-bezier(.2, .8, .2, 1), height .32s, opacity .2s; }
.jx-seg-thumb.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .jx-seg-thumb { transition: none; } }
/* ---------- Turinys: balta kortelė, šoninis meniu kairėje ---------- */
div#main { display: flex; gap: 18px; align-items: flex-start; margin: 0 !important; padding: 0 0 16px !important; }
div#leftmeniu {
float: none !important; width: 210px !important; flex: 0 0 210px; box-sizing: border-box;
background: #fff; border: 1px solid var(--jx-line); border-radius: var(--jx-radius); padding: 12px; box-shadow: var(--jx-shadow);
}
div#leftmeniu:not(:has(*)) { display: none; }
div#leftmeniu ul { list-style: none; margin: 0 0 10px; padding: 0 !important; }
div#leftmeniu li { margin: 0; padding: 0; }
div#leftmeniu li a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--jx-ink-2); text-decoration: none; transition: background .15s, color .15s; }
div#leftmeniu li a:hover { background: var(--jx-lime-soft); color: var(--jx-lime-text); }
div#leftmeniu b, div#leftmeniu strong, div#leftmeniu h3 { display: block; padding: 8px 10px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--jx-muted); }
div#content {
float: none !important; width: auto !important; flex: 1 1 auto; min-width: 0; box-sizing: border-box;
background: #fff; border: 1px solid var(--jx-line); border-radius: var(--jx-radius);
padding: 18px 20px 20px !important; box-shadow: var(--jx-shadow); overflow-x: auto;
}
/* ---------- Lentelės ---------- */
table.lentele, .lentele {
border: 1px solid var(--jx-line) !important; border-collapse: separate; border-spacing: 0;
border-radius: 10px; overflow: hidden; max-width: none !important; width: 100%;
font-family: var(--jx-font) !important; font-size: 13.5px; background: #fff;
}
table.lentele th, .lentele th {
background: var(--jx-dark-3) !important; color: #fff !important; font-weight: 600; text-align: left !important;
padding: 10px 10px !important; border: 0 !important; border-bottom: 1px solid var(--jx-line) !important; font-size: 12.5px;
letter-spacing: .01em;
}
table.lentele th a, .lentele th a { color: #fff !important; }
table.lentele td, .lentele td { padding: 9px 10px !important; border-color: var(--jx-line) !important; vertical-align: top; line-height: 1.45 !important; }
table.lentele tr:nth-child(even) { background: #fafbf8; }
table.lentele tr:hover { background: var(--jx-lime-soft) !important; }
table.lentele tr.no-hover-row:hover { background: #fff !important; }
.lentele td a { color: var(--jx-lime-text); }
.lentele td a:hover { color: var(--jx-dark); }
tr.green-row td { background-color: var(--jx-lime-soft) !important; }
td.grey-bg-single, table.lentele-show tr td.grey-bg, .grey-bg { background-color: #f3f5f2 !important; }
.lentele td.red-td { background-color: var(--jx-red-soft) !important; color: var(--jx-red); font-weight: 600; }
.lentele td.red-td a { color: var(--jx-red) !important; }
/* Išskleidžiami laukai ir įvestys lentelių langeliuose – kompaktiški, kad nenukirptų „Yes/No/Unpaid“ */
table.lentele td select, .lentele td select { padding: 4px 20px 4px 6px !important; font-size: 12px !important; min-width: 64px; background-position: right 6px center; background-size: 10px 7px; }
table.lentele td input[type=text], .lentele td input[type=text] { padding: 4px 7px !important; font-size: 12px !important; }
table.lentele td input[type=submit], .lentele td input[type=submit], .lentele td input[type=button] { padding: 5px 10px !important; font-size: 12px !important; }
.danger-text, .error-h2 { color: var(--jx-red) !important; }
table.lentele-show { border: 1px solid var(--jx-line) !important; border-radius: 10px; overflow: hidden; }
table.lentele-show tr td { padding: 6px 10px !important; border-color: var(--jx-line) !important; }
table.lentele-show tr td.right_border { border-right: 1px solid var(--jx-line) !important; }
table.lentele-show tr td.bottom_border { border-bottom: 1px solid var(--jx-line) !important; }
fieldset { border: 1px solid var(--jx-line); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
legend { font-weight: 600; padding: 0 6px; color: var(--jx-ink); }
.navigator a { display: inline-block; padding: 4px 9px; border: 1px solid var(--jx-line); border-radius: 6px; margin: 0 2px; text-decoration: none; transition: background .15s; }
.navigator a:hover { background: var(--jx-lime-soft); }
.navigator .current { display: inline-block; padding: 4px 9px; border-radius: 6px; background: var(--jx-lime); color: var(--jx-dark); }
/* ---------- Formos laukai ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input:not([type]),
select, textarea, .txt-input, .select-input {
font-family: var(--jx-font) !important; font-size: 13px !important; color: var(--jx-ink);
background-color: #fff; border: 1px solid var(--jx-line-2) !important; border-radius: 8px;
padding: 6px 9px !important; line-height: 1.3; box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 70px; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input:not([type]):focus,
select:focus, textarea:focus { outline: none; border-color: var(--jx-lime) !important; box-shadow: 0 0 0 3px rgba(155, 209, 34, .3); }
select { padding-right: 26px !important; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 9px center; }
input[type=checkbox], input[type=radio] { accent-color: var(--jx-lime-text); width: 15px; height: 15px; vertical-align: -2px; }
input[type=file] { font-family: var(--jx-font); }
label { cursor: pointer; }
/* ---------- Mygtukai: salotiniai su švelnia animacija ---------- */
input[type=submit], input[type=button], button,
input.default-button, input.update-button, .update-button, .default-button {
font-family: var(--jx-font) !important; font-size: 13px !important; font-weight: 600;
color: var(--jx-dark) !important; background: var(--jx-lime) !important;
border: 1px solid transparent !important; border-radius: 8px; padding: 7px 14px !important;
cursor: pointer; line-height: 1.2; box-sizing: border-box; text-shadow: none;
transition: background .18s var(--jx-ease), transform .18s var(--jx-ease), box-shadow .18s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover,
input.default-button:hover, input.update-button:hover, .update-button:hover, .default-button:hover {
background: var(--jx-lime-hover) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(155, 209, 34, .35);
}
input[type=submit]:active, input[type=button]:active, button:active,
input.update-button:active, .update-button:active, .default-button:active { transform: translateY(0) scale(.98); box-shadow: none; }
input.cancel-button, .cancel-button { background: #fff !important; color: var(--jx-ink-2) !important; border-color: var(--jx-line-2) !important; }
input.cancel-button:hover, .cancel-button:hover { background: var(--jx-light) !important; }
input[type=submit]:disabled, button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* ---------- Nuotraukos ---------- */
.thumb-edit { border: 1px solid var(--jx-line) !important; border-radius: 10px; overflow: hidden; background: #fff; transition: transform .2s var(--jx-ease), box-shadow .2s; }
.thumb-edit:hover { transform: translateY(-2px); box-shadow: var(--jx-shadow); }
.thumb-pic img { border: 0 !important; border-radius: 6px; }
/* ---------- Poraštė ---------- */
div#footer, #footer { background: transparent !important; border: 0 !important; height: auto !important; padding: 14px 4px !important; color: var(--jx-muted); font-size: 12px; }
#footer a { color: var(--jx-muted); }
#footer .creator { float: none; }
/* ---------- Prisijungimo puslapis: kiemo nuotrauka, balta kortelė ---------- */
body:has(#container.no-left-column) {
background: var(--jx-dark) url(../images/general/login-bg.jpg) center / cover no-repeat fixed !important;
min-height: 100vh;
}
#container.no-left-column {
max-width: none; min-height: 100vh; padding: 24px 16px !important;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; position: relative;
}
#container.no-left-column:before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(11, 27, 26, .62), rgba(11, 27, 26, .86)); z-index: 0; }
.jax-login-logo { position: relative; z-index: 1; }
.jax-login-logo img { height: 64px; width: auto; display: block; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
#container.no-left-column #bodcont { position: relative; z-index: 1; padding: 0 !important; width: min(420px, 100%); }
#container.no-left-column #middcont { float: none !important; width: auto !important; overflow: visible !important; }
#container.no-left-column #mainartcont { background: #fff; border-radius: 16px; padding: 28px 28px 24px !important; min-height: 0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
#container.no-left-column h1 { font-size: 20px !important; margin: 0; padding-bottom: 6px !important; }
#container.no-left-column form table { width: 100%; border-collapse: collapse; }
#container.no-left-column form td { display: block; padding: 4px 0 !important; font-size: 12px; color: var(--jx-muted); font-weight: 500; }
#container.no-left-column form td input[type=text], #container.no-left-column form td input[type=password] { width: 100%; padding: 10px 12px !important; font-size: 14px !important; margin-top: 2px; }
#container.no-left-column form td input[type=submit] { width: 100%; padding: 11px !important; font-size: 14px !important; margin-top: 8px; }
#container.no-left-column .error-h2 { background: var(--jx-red-soft); padding: 8px 10px; border-radius: 8px; font-size: 13px !important; margin: 0 0 8px; }
#container.no-left-column .ui-widget { position: relative; z-index: 1; }
/* Vieši puslapiai (remote išdėstymas, #container su inline pločiu): šablonų tušti
viršuje nereikalingi */
div#container[style] div#content > br { display: none; }
input[type=file] { border: 1px dashed var(--jx-line-2); border-radius: 8px; padding: 6px 8px; background: #fff; max-width: 100%; }
/* ============================================================================
Sąrašai (Vehicle list / My vehicles): aiškesni stulpeliai, ženkliukai,
„Table / Cards“ režimas, nuotraukų juosta, išskleidžiamų sąrašų meniu.
============================================================================ */
/* ---------- Filtrų juosta virš sąrašo ---------- */
form[name=SearchForm] > table { border-collapse: separate; border-spacing: 0; margin: 0 0 4px; }
form[name=SearchForm] > table td { padding: 2px 14px 2px 0 !important; vertical-align: bottom; }
form[name=SearchForm] > table tr:first-child td { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jx-muted); padding-bottom: 0 !important; }
form[name=SearchForm] > table tr:first-child td label { font-weight: 600; }
form[name=SearchForm] > table tr:first-child td input[type=text] { font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 0 !important; }
form[name=SearchForm] select.select-input { min-width: 150px; }
form[name=SearchForm] input[type=submit] { margin-left: 2px; }
div#content > br { display: none; }
div#content h2 + form[name=SearchForm] { margin-top: 4px; }
/* ---------- Įrankių juosta virš lentelės: kiekis ir „Table / Cards“ ---------- */
.jx-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; }
.jx-list-tools .jx-list-hint { color: var(--jx-muted); font-size: 12.5px; }
.jx-view-toggle { display: inline-flex; background: var(--jx-light); border: 1px solid var(--jx-line); border-radius: 999px; padding: 3px; gap: 2px; }
.jx-view-toggle button {
background: transparent !important; color: var(--jx-ink-2) !important; border: 0 !important; border-radius: 999px;
padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 600; cursor: pointer; line-height: 1.2;
display: inline-flex; align-items: center; gap: 7px; box-shadow: none !important; transform: none !important;
transition: background .18s var(--jx-ease), color .18s;
}
.jx-view-toggle button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jx-view-toggle button:hover { background: #fff !important; }
.jx-view-toggle button.is-active { background: var(--jx-dark-3) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(11, 27, 26, .18) !important; }
/* ---------- Lentelės stulpeliai: didesnės, aiškesnės raidės, aukštesnės eilutės ---------- */
/* Plati lentelė: jei netelpa (1366 px langas) – slenkama horizontaliai pačiame sąraše, stulpeliai nenukerpami */
.jx-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jx-list .lentele { font-size: 14px; }
.jx-list .lentele th { font-size: 13px; padding: 11px 6px !important; }
.jx-list .lentele td { padding: 10px 6px !important; vertical-align: middle; }
.jx-list .lentele td a { text-decoration: none; }
.jx-list .lentele td a:hover { text-decoration: underline; }
.jx-list .lentele td.jx-c-id { white-space: normal; }
.jx-list .lentele td.jx-c-id a { font-weight: 700; font-size: 15px; color: var(--jx-dark); letter-spacing: .01em; }
.jx-list .lentele td.jx-c-id img { display: none; }
.jx-list .lentele td.jx-c-id .danger-text { display: block; width: max-content; margin-top: 4px; font-size: 12px; background: var(--jx-red-soft); padding: 1px 6px; border-radius: 6px; }
.jx-list .lentele td.jx-c-date { white-space: nowrap; }
.jx-list .lentele td.jx-c-date a { font-weight: 600; color: var(--jx-ink); font-size: 14px; }
.jx-list .lentele td.jx-c-days { white-space: nowrap; font-weight: 600; }
.jx-list .lentele td.jx-c-desc { min-width: 160px; }
.jx-list .lentele td.jx-c-desc a { font-weight: 700; font-size: 15px; color: var(--jx-dark); line-height: 1.3; }
/* VIN – ryškus, tamsus, paskutiniai 6 ženklai (pagal juos ofisas atpažįsta mašiną) paryškinti laimo fonu (vartotojas 2026-11-05) */
.jx-list .lentele td.jx-c-vin a { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: var(--jx-dark); white-space: nowrap; }
.jx-list .lentele td.jx-c-vin a b { font-weight: 800; background: var(--jx-lime-soft); color: var(--jx-lime-text); padding: 1px 4px; border-radius: 5px; margin-left: 1px; }
.jx-cards .lentele td.jx-c-vin a { font-size: 15px; }
.jx-list .lentele td.jx-c-buyer a { font-weight: 600; }
.jx-list .lentele td.jx-c-client { min-width: 130px; }
.jx-list .lentele td.jx-c-client a { color: var(--jx-ink-2); }
.jx-list .lentele td.jx-c-notes, .jx-list .lentele td.jx-c-unotes { white-space: normal !important; min-width: 110px; max-width: 200px; color: var(--jx-ink-2); font-size: 13px; line-height: 1.4 !important; }
.jx-list .lentele td.jx-c-notes a, .jx-list .lentele td.jx-c-unotes a { color: var(--jx-ink-2); display: block; }
.jx-list .lentele td.jx-c-unotes textarea.notes-item { width: 170px !important; min-height: 46px; height: auto !important; font-size: 12.5px !important; resize: vertical; }
.jx-list .lentele td.jx-c-terminal { white-space: normal; min-width: 96px; }
.jx-list .lentele td.jx-c-terminal a { color: var(--jx-ink-2); }
.jx-list .lentele td.jx-c-price { white-space: nowrap; }
.jx-list .lentele td.jx-c-price a { font-weight: 600; color: var(--jx-ink); display: inline-block; margin-bottom: 4px; }
.jx-list .lentele td.jx-c-del a { cursor: pointer; display: inline-block; padding: 4px; border-radius: 6px; opacity: .55; transition: opacity .15s, background .15s; }
.jx-list .lentele td.jx-c-del a:hover { opacity: 1; background: var(--jx-red-soft); }
/* Statusas – ženkliukas pagal reikšmę (klasė jx-st-) */
.jx-list .lentele td.jx-c-status { white-space: nowrap; }
.jx-list .lentele td.jx-c-status a {
display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.2;
background: #eef0ed; color: var(--jx-ink-2); border: 1px solid transparent; text-decoration: none !important;
}
.jx-list .lentele td.jx-st-5 a { background: #fff; color: var(--jx-ink-2); border-color: var(--jx-line-2); } /* New */
.jx-list .lentele td.jx-st-6 a { background: var(--jx-lime-soft); color: var(--jx-lime-text); } /* At Terminal */
.jx-list .lentele td.jx-st-7 a { background: #fff6d6; color: #7a5a00; } /* Booked */
.jx-list .lentele td.jx-st-8 a { background: var(--jx-lime); color: var(--jx-dark); } /* Loaded */
.jx-list .lentele td.jx-st-10 a { background: var(--jx-dark-3); color: #fff; } /* Shipped */
.jx-list .lentele td.jx-st-11 a { background: var(--jx-dark); color: var(--jx-lime); } /* Delivered */
.jx-list .lentele td.jx-st-12 a { background: #e9ece8; color: var(--jx-muted); } /* Released to Client */
/* Title / Keys – aiškūs „Yes / No“ */
.jx-list .lentele td.jx-c-keys, .jx-list .lentele td.jx-c-title { text-align: center; white-space: nowrap; }
.jx-list .lentele td.jx-c-keys a, .jx-list .lentele td.jx-c-title > a { display: inline-block; min-width: 36px; padding: 4px 9px; border-radius: 6px; font-weight: 700; font-size: 13px; background: var(--jx-lime-soft); color: var(--jx-lime-text); text-decoration: none !important; }
.jx-list .lentele td.red-td { background-color: var(--jx-red-soft) !important; }
.jx-list .lentele td.red-td a { background: var(--jx-red) !important; color: #fff !important; }
.jx-list .lentele td.jx-c-title select, .jx-list .lentele td.jx-c-price select { font-weight: 600; }
.jx-list .lentele td.red-td select { border-color: var(--jx-red) !important; color: var(--jx-red); }
/* Eilučių spalvos pagal statusą (buvo gelsvos) – švelniai salotinės, raudoni langeliai lieka raudoni */
table.lentele tr.status_car_10 td, table.lentele tr.status_car_11 td, table.lentele tr.status_car_8 td, table.lentele tr.status_id_4 td { background-color: #f4fae6 !important; }
table.lentele tr.status_car_10 td.red-td, table.lentele tr.status_car_11 td.red-td, table.lentele tr.status_car_8 td.red-td { background-color: var(--jx-red-soft) !important; }
table.lentele tr.vehicle_tr:hover td { background-color: var(--jx-lime-soft) !important; }
table.lentele tr.vehicle_tr:hover td.red-td { background-color: #fbd9d5 !important; }
/* ---------- Nuotraukos sąraše (lentelės režimas: viena miniatiūra 100×70 + skaičius) ---------- */
.jx-list .lentele td.jx-c-photos { width: 1%; white-space: nowrap; padding: 8px 10px !important; }
.jx-ph { position: relative; display: inline-block; vertical-align: top; }
.jx-ph-strip { display: flex; gap: 4px; overflow: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.jx-ph-strip::-webkit-scrollbar { display: none; }
.jx-ph-strip img { width: 100px; height: 70px; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in; background: #e9ece8; flex: 0 0 auto; transition: transform .18s var(--jx-ease), box-shadow .18s; }
.jx-ph-strip img:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(11, 27, 26, .25); }
.jx-ph-n { position: absolute; right: 4px; bottom: 4px; background: rgba(11, 27, 26, .78); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; pointer-events: none; }
.jx-ph-prev, .jx-ph-next { display: none; }
.jx-ph-none { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 70px; border-radius: 8px; background: var(--jx-light); border: 1px dashed var(--jx-line-2); color: var(--jx-muted); font-size: 11px; text-decoration: none; }
.jx-list:not(.jx-cards) .jx-ph-strip { width: 100px; }
/* ---------- Kortelių režimas: ta pati lentelė, tik išdėstyta kortelėmis ---------- */
.jx-cards .lentele { display: block; border: 0 !important; background: transparent; overflow: visible; border-radius: 0; }
.jx-cards .lentele tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.jx-cards .lentele tr:first-child { display: none; } /* antraščių eilutė */
.jx-cards .lentele tr.vehicle_tr {
display: flex; flex-direction: column; background: #fff !important; border: 1px solid var(--jx-line); border-radius: 14px;
overflow: hidden; box-shadow: var(--jx-shadow); transition: transform .2s var(--jx-ease), box-shadow .2s var(--jx-ease);
padding-bottom: 10px;
}
.jx-cards .lentele tr.vehicle_tr:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 27, 26, .12); }
.jx-cards .lentele tr.vehicle_tr td { display: flex; align-items: baseline; gap: 10px; padding: 4px 16px !important; border: 0 !important; background: transparent !important; white-space: normal !important; width: auto !important; }
.jx-cards .lentele tr.vehicle_tr td:before { content: attr(data-label); flex: 0 0 92px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jx-muted); padding-top: 2px; }
.jx-cards .lentele tr.vehicle_tr td:empty { display: none; }
.jx-cards .lentele tr.vehicle_tr td:not(.jx-c-del):has(> a:empty) { display: none; } /* tušti laukai kortelėje nerodomi */
.jx-cards .lentele tr.vehicle_tr td.jx-c-photos { order: -3; padding: 0 !important; display: block; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-photos:before { display: none; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-desc { order: -2; padding: 12px 16px 2px !important; display: block; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-desc:before { display: none; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-desc a { font-size: 16px; line-height: 1.25; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-id, .jx-cards .lentele tr.vehicle_tr td.jx-c-vin { order: -1; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-status a { font-size: 12.5px; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-keys, .jx-cards .lentele tr.vehicle_tr td.jx-c-title { text-align: left; }
.jx-cards .lentele tr.vehicle_tr td.red-td { background: transparent !important; }
.jx-cards .lentele tr.vehicle_tr td.red-td:before { color: var(--jx-red); }
.jx-cards .lentele tr.vehicle_tr td.jx-c-notes, .jx-cards .lentele tr.vehicle_tr td.jx-c-unotes { max-width: none; align-items: flex-start; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-unotes textarea.notes-item { width: 100% !important; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-del { justify-content: flex-end; padding-top: 6px !important; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-del:before { display: none; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-del a { opacity: .7; }
.jx-cards .lentele tr.vehicle_tr td.jx-c-del a:after { content: "Delete"; font-size: 12px; margin-left: 4px; vertical-align: 2px; color: var(--jx-red); }
.jx-cards .lentele tr.vehicle_tr td.jx-c-empty { display: none; }
/* Kortelės spalva pagal statusą: kairysis kraštas */
.jx-cards .lentele tr.status_car_6 { border-left: 4px solid var(--jx-lime); }
.jx-cards .lentele tr.status_car_7 { border-left: 4px solid #e9c46a; }
.jx-cards .lentele tr.status_car_8 { border-left: 4px solid var(--jx-lime-text); }
.jx-cards .lentele tr.status_car_10, .jx-cards .lentele tr.status_car_11 { border-left: 4px solid var(--jx-dark-3); }
/* Nuotrauka kortelėje: viena per visą plotį, rodyklės ← → užvedus pelę, skaitiklis „3 / 22“ */
.jx-cards .jx-ph { display: block; background: var(--jx-dark); }
.jx-cards .jx-ph-strip { width: auto; height: 210px; gap: 0; padding: 0; background: var(--jx-dark); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
.jx-cards .jx-ph-strip img { width: 100%; min-width: 100%; height: 210px; flex: 0 0 100%; object-fit: cover; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; transition: filter .18s; }
.jx-cards .jx-ph-strip img:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.jx-cards .jx-ph-n { right: 8px; bottom: 8px; font-size: 11.5px; padding: 2px 9px; }
.jx-cards .jx-ph-prev, .jx-cards .jx-ph-next {
display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 50%; border: 0 !important; background: rgba(255, 255, 255, .92) !important; color: var(--jx-dark) !important;
font-size: 22px; line-height: 1; padding: 0 0 2px !important; cursor: pointer; opacity: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
transition: opacity .18s, background .18s !important;
}
.jx-cards .jx-ph-prev { left: 8px; }
.jx-cards .jx-ph-next { right: 8px; }
.jx-cards .jx-ph:hover .jx-ph-prev, .jx-cards .jx-ph:hover .jx-ph-next { opacity: 1; }
.jx-cards .jx-ph-prev:hover, .jx-cards .jx-ph-next:hover { background: var(--jx-lime) !important; transform: translateY(-50%); }
.jx-cards .jx-ph-none { display: flex; width: auto; height: 210px; border: 0; border-radius: 0; background: var(--jx-dark-3); color: #9aa89f; font-size: 12.5px; }
.jx-cards .navigator { margin-top: 16px; }
/* ---------- Išskleidžiamų sąrašų meniu (jxSelect) ---------- */
select.jx-dd-open { border-color: var(--jx-lime) !important; box-shadow: 0 0 0 3px rgba(155, 209, 34, .3); }
.jx-dd {
position: fixed; z-index: 10000; display: flex; flex-direction: column; box-sizing: border-box;
background: #fff; border: 1px solid var(--jx-line-2); border-radius: 10px; box-shadow: 0 14px 40px rgba(11, 27, 26, .18), 0 2px 6px rgba(11, 27, 26, .08);
max-height: 320px; overflow: hidden; font-family: var(--jx-font); font-size: 13px; color: var(--jx-ink);
opacity: 0; transform: translateY(-8px) scaleY(.96); transform-origin: top center;
transition: opacity .17s var(--jx-ease), transform .17s var(--jx-ease);
}
.jx-dd.is-up { transform-origin: bottom center; transform: translateY(8px) scaleY(.96); }
.jx-dd.is-open { opacity: 1; transform: translateY(0) scaleY(1); }
.jx-dd.is-closing { opacity: 0; transform: translateY(-4px) scaleY(.98); pointer-events: none; }
.jx-dd.is-up.is-closing { transform: translateY(4px) scaleY(.98); }
.jx-dd-search { margin: 8px 8px 4px !important; padding: 7px 10px !important; font-size: 13px !important; border-radius: 8px; flex: 0 0 auto; }
.jx-dd-list { overflow-y: auto; padding: 6px; flex: 1 1 auto; overscroll-behavior: contain; }
.jx-dd-opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; transition: background .08s; }
.jx-dd-opt.is-active { background: var(--jx-lime-soft); color: var(--jx-dark); }
.jx-dd-opt.is-selected { font-weight: 700; color: var(--jx-lime-text); }
.jx-dd-opt.is-selected:after { content: "\2713"; float: right; margin-left: 10px; }
.jx-dd-opt.is-selected.is-active { background: var(--jx-lime); color: var(--jx-dark); }
.jx-dd-group { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jx-muted); }
.jx-dd-empty { padding: 10px; color: var(--jx-muted); font-style: italic; }
/* ---------- Nuotraukų peržiūra per visą ekraną ---------- */
body.jx-lb-open { overflow: hidden; }
.jx-lb { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s var(--jx-ease), visibility 0s .2s; touch-action: none; }
.jx-lb.is-open { opacity: 1; visibility: visible; transition: opacity .2s var(--jx-ease); }
.jx-lb-bg { position: absolute; inset: 0; background: rgba(11, 27, 26, .92); }
/* 2026-11-13: nuotraukos laukas – per visą langą (priartinta ar pasukta nuotrauka neišlenda už krašto), užrašas ir įrankiai – virš jo */
.jx-lb-fig { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: scale(.96); transition: transform .2s var(--jx-ease); }
.jx-lb.is-open .jx-lb-fig { transform: scale(1); }
.jx-lb-fig img { max-width: 92vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #111; transition: transform .2s var(--jx-ease), filter .2s; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
.jx-lb-fig img.is-preview { filter: blur(4px); }
.jx-lb.is-zoomed .jx-lb-fig img { cursor: grab; border-radius: 0; }
.jx-lb.is-drag .jx-lb-fig img { cursor: grabbing; }
.jx-lb-fig figcaption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; max-width: 94vw; box-sizing: border-box; padding: 8px 16px; border-radius: 999px; background: rgba(11, 27, 26, .78); color: #fff; font-size: 13px; display: flex; gap: 16px; align-items: center; white-space: nowrap; }
.jx-lb-fig figcaption .jx-lb-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.jx-lb-fig figcaption .jx-lb-n { color: var(--jx-lime); font-weight: 700; }
.jx-lb-fig figcaption .jx-lb-dl { color: #cfd6d1; text-decoration: underline; }
.jx-lb-spin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--jx-lime); animation: jx-lb-spin .8s linear infinite; opacity: 0; pointer-events: none; z-index: 2; }
.jx-lb.is-loading .jx-lb-spin { opacity: 1; transition: opacity .2s .12s; }
@keyframes jx-lb-spin { to { transform: rotate(360deg); } }
/* Įrankiai viršuje per vidurį: nutolinti · mastelis (paspaudus – grąžinti) · priartinti · pasukti kairėn / dešinėn */
.jx-lb-tools { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(11, 27, 26, .78); }
.jx-lb-tools button {
border: 0 !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; width: 40px; height: 40px; min-width: 0; border-radius: 50% !important;
padding: 0 !important; margin: 0 !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important;
font-size: 13px; font-weight: 700; line-height: 1; transition: background .15s, color .15s, transform .15s !important;
}
.jx-lb-tools button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.jx-lb-tools button.jx-lb-reset { width: auto; min-width: 60px; padding: 0 12px !important; border-radius: 999px !important; font-variant-numeric: tabular-nums; }
.jx-lb-tools button:hover:not(:disabled) { background: var(--jx-lime) !important; color: var(--jx-dark) !important; }
.jx-lb-tools button:active:not(:disabled) { transform: scale(.94); }
.jx-lb-tools button:disabled { opacity: .35; cursor: default; }
.jx-lb-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .22); margin: 0 4px; }
.jx-lb-close, .jx-lb-prev, .jx-lb-next {
position: absolute; z-index: 2; border: 0 !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important;
width: 46px; height: 46px; border-radius: 50% !important; font-size: 30px; line-height: 1; padding: 0 0 3px !important; cursor: pointer;
display: flex; align-items: center; justify-content: center; box-shadow: none !important; transition: background .15s, transform .15s !important;
}
.jx-lb-close { top: 18px; right: 18px; font-size: 32px; }
.jx-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.jx-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.jx-lb-close:hover, .jx-lb-prev:hover, .jx-lb-next:hover { background: var(--jx-lime) !important; color: var(--jx-dark) !important; }
.jx-lb-prev:hover, .jx-lb-next:hover { transform: translateY(-50%) scale(1.06); }
/* ============================================================================
Statistikos skydelis (ofisas): laikotarpio pasirinkimas, skaičių kortelės, grafikai, lentelės
============================================================================ */
.jx-stats { max-width: 100%; }
.jx-stats-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.jx-stats-range { color: var(--jx-muted); font-size: 13px; margin-top: 4px; }
.jx-stats-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.jx-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.jx-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--jx-line); background: #fff; color: var(--jx-ink-2); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, transform .15s var(--jx-ease); }
.jx-chip:hover { background: var(--jx-lime-soft); color: var(--jx-dark); transform: translateY(-1px); }
.jx-chip.is-active { background: var(--jx-dark-3); border-color: var(--jx-dark-3); color: #fff; }
.jx-stats-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--jx-muted); font-weight: 600; }
.jx-stats-custom label { display: inline-flex; align-items: center; gap: 6px; }
.jx-stats-custom input[type=date] { font-family: var(--jx-font); font-size: 13px; border: 1px solid var(--jx-line-2); border-radius: 8px; padding: 5px 8px; color: var(--jx-ink); }
.jx-stats-custom select { min-width: 150px; }
.jx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.jx-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--jx-line); border-radius: 12px; box-shadow: var(--jx-shadow); text-decoration: none !important; color: var(--jx-ink); transition: transform .18s var(--jx-ease), box-shadow .18s; }
a.jx-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 27, 26, .12); }
.jx-kpi-n { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--jx-dark); }
.jx-kpi-l { font-size: 12.5px; font-weight: 700; color: var(--jx-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.jx-kpi-s { font-size: 12px; color: var(--jx-muted); line-height: 1.35; }
.jx-kpi-accent { background: linear-gradient(135deg, var(--jx-dark) 0%, var(--jx-dark-3) 100%); border-color: var(--jx-dark-3); }
.jx-kpi-accent .jx-kpi-n { color: var(--jx-lime); }
.jx-kpi-accent .jx-kpi-l { color: #fff; }
.jx-kpi-accent .jx-kpi-s { color: #b9c4bd; }
.jx-kpi-now { border-color: var(--jx-lime); background: var(--jx-lime-soft); }
.jx-warn { color: var(--jx-red); }
.jx-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; }
.jx-chart-box, .jx-stats-card { background: #fff; border: 1px solid var(--jx-line); border-radius: 12px; padding: 14px 16px 12px; box-shadow: var(--jx-shadow); margin-bottom: 14px; min-width: 0; }
.jx-charts .jx-chart-box { margin-bottom: 0; }
.jx-chart-title { font-size: 14px; font-weight: 700; color: var(--jx-dark); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jx-chart-title span { font-size: 12px; font-weight: 500; color: var(--jx-muted); }
.jx-chart { width: 100%; min-height: 120px; }
.jx-svg { display: block; font-family: var(--jx-font); }
.jx-svg .jx-grid { stroke: var(--jx-line); stroke-width: 1; }
.jx-svg .jx-axis { font-size: 11px; fill: var(--jx-muted); }
.jx-svg .jx-val { font-size: 10.5px; font-weight: 700; fill: var(--jx-ink-2); }
.jx-svg .jx-legend-t { font-size: 11.5px; fill: var(--jx-ink-2); font-weight: 600; }
.jx-svg .jx-bar-rect { transition: y .6s var(--jx-ease), height .6s var(--jx-ease), opacity .15s; }
.jx-svg .jx-bar-g:hover .jx-bar-rect { opacity: .75; }
.jx-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.jx-donut-seg { transition: stroke-dasharray .9s var(--jx-ease), opacity .15s; }
.jx-donut-seg:hover { opacity: .8; }
.jx-muted-num small { color: var(--jx-muted); font-weight: 500; }
@keyframes jxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jx-kpi { animation: jxFadeUp .45s var(--jx-ease) both; }
.jx-kpi:nth-child(2) { animation-delay: .05s; } .jx-kpi:nth-child(3) { animation-delay: .1s; } .jx-kpi:nth-child(4) { animation-delay: .15s; } .jx-kpi:nth-child(5) { animation-delay: .2s; } .jx-kpi:nth-child(6) { animation-delay: .25s; }
.jx-chart-box, .jx-stats-card { animation: jxFadeUp .5s var(--jx-ease) both; animation-delay: .2s; }
.jx-bar[data-w] { width: 0; }
.jx-donut-total { font-size: 20px; font-weight: 700; fill: var(--jx-dark); font-family: var(--jx-font); }
.jx-donut-legend { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.jx-donut-legend div { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; }
.jx-donut-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.jx-donut-legend b { font-weight: 700; }
.jx-donut-legend em { font-style: normal; color: var(--jx-muted); min-width: 34px; text-align: right; }
.jx-stats-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.jx-stats-grid .jx-stats-card { margin-bottom: 0; }
.jx-stats-table { font-size: 13px; }
.jx-stats-table th.num, .jx-stats-table td.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jx-stats-table td.num { font-weight: 600; }
.jx-stats-table th.bar, .jx-stats-table td.bar { width: 28%; }
.jx-stats-table td.bar { vertical-align: middle; }
.jx-stats-table td { padding: 7px 10px !important; }
.jx-bar { display: block; height: 7px; border-radius: 4px; margin: 2px 0; min-width: 2px; transition: width .5s var(--jx-ease); }
.jx-bar-r { background: var(--jx-lime); }
.jx-bar-l { background: var(--jx-dark-3); }
.jx-legend { display: flex; gap: 14px; font-size: 12px; color: var(--jx-muted); margin-top: 8px; }
.jx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.jx-muted { color: var(--jx-muted); font-size: 12.5px; }
.jx-zero { color: var(--jx-line-2); font-weight: 400; }
.jx-daily tr.jx-weekend td { background: #f6f7f4 !important; }
.jx-daily tr.jx-empty-day td { color: var(--jx-muted); }
.jx-daily tr.jx-total td { font-weight: 700; background: var(--jx-lime-soft) !important; }
.jx-cst { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #eef0ed; color: var(--jx-ink-2); }
.jx-cst-2 { background: var(--jx-lime); color: var(--jx-dark); }
.jx-cst-3 { background: var(--jx-dark-3); color: #fff; }
.jx-cst-4 { background: var(--jx-dark); color: var(--jx-lime); }
.jx-stats-legacy { margin: 6px 0 0; }
div#leftmeniu ul#navlist ul { margin: 0 0 4px; }
div#leftmeniu ul#navlist ul li a { font-size: 12px; padding: 4px 10px; color: var(--jx-muted); }
/* ---------- Telefonai ir siauri langai ---------- */
@media (max-width: 900px) {
.jx-stats-grid { grid-template-columns: 1fr; }
.jx-stats-form { align-items: stretch; }
.jx-chips { justify-content: flex-start; }
div#container { padding: 0 12px 16px !important; }
div#header { flex-wrap: wrap; padding: 12px 14px; }
div#logo img { height: 42px; }
div#main { flex-direction: column; align-items: stretch; }
div#leftmeniu { width: 100% !important; flex: none; }
div#content { width: 100% !important; padding: 14px !important; }
div#content form table { max-width: 100%; }
form[name=SearchForm] > table, form[name=SearchForm] > table tbody, form[name=SearchForm] > table tr { display: block; }
form[name=SearchForm] > table tr:first-child { display: none; }
form[name=SearchForm] > table td { display: block; padding: 4px 0 !important; }
form[name=SearchForm] select.select-input, form[name=SearchForm] input[type=text] { width: 100% !important; }
.jx-cards .lentele tbody { grid-template-columns: 1fr; }
.jx-lb-prev, .jx-lb-next { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ---------- Pranešimai „Saved ✓“ ir patvirtinimo langai (D18, 2026-11-05) ---------- */
.jx-toast { position: fixed; right: 20px; bottom: 20px; z-index: 10002; display: flex; align-items: center; gap: 9px; padding: 10px 16px 10px 11px; border-radius: 999px; background: var(--jx-dark); color: #fff; font: 600 13px/1.2 var(--jx-font); box-shadow: 0 10px 30px rgba(11, 27, 26, .3); opacity: 0; transform: translateY(12px); transition: opacity .2s var(--jx-ease), transform .2s var(--jx-ease); pointer-events: none; }
.jx-toast.is-on { opacity: 1; transform: none; }
.jx-toast-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--jx-lime); color: var(--jx-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.jx-toast.is-error { background: #7a1f1f; }
.jx-toast.is-error .jx-toast-ico { background: #fff; color: #7a1f1f; }
.jx-modal { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s var(--jx-ease); }
.jx-modal.is-on { opacity: 1; }
.jx-modal-bg { position: absolute; inset: 0; background: rgba(11, 27, 26, .55); }
.jx-modal-box { position: relative; background: #fff; border-radius: 14px; padding: 22px 24px 18px; width: min(420px, 92vw); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); font-family: var(--jx-font); transform: scale(.96) translateY(6px); transition: transform .18s var(--jx-ease); }
.jx-modal.is-on .jx-modal-box { transform: none; }
.jx-modal-title { font-size: 17px; font-weight: 700; color: var(--jx-dark); margin-bottom: 6px; }
.jx-modal-text { font-size: 13.5px; color: var(--jx-ink-2); line-height: 1.45; }
.jx-modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.jx-modal-btns button { font: 600 13px var(--jx-font); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--jx-line-2); background: #fff; color: var(--jx-ink); cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.jx-modal-btns button:hover { background: var(--jx-light); }
.jx-modal-btns .jx-modal-ok { background: var(--jx-lime); border-color: var(--jx-lime); color: var(--jx-dark); }
.jx-modal-btns .jx-modal-ok.is-danger { background: var(--jx-red); border-color: var(--jx-red); color: #fff; }
.jx-modal-btns .jx-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 27, 26, .2); }
/* ---------- Greiti filtrai Vehicle list (A6) ---------- */
.jx-quick { justify-content: flex-start; margin: 14px 0 0; }
.jx-quick .jx-chip { display: inline-flex; align-items: center; gap: 7px; }
.jx-chip-n { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--jx-light); color: var(--jx-ink-2); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-style: normal; }
.jx-chip.is-active .jx-chip-n { background: rgba(255, 255, 255, .18); color: #fff; }
.jx-chip.is-warn .jx-chip-n { background: var(--jx-red-soft); color: var(--jx-red); }
.jx-chip.is-active.is-warn .jx-chip-n { background: var(--jx-red); color: #fff; }
/* ---------- Container list: lentelė ir kortelės (D21) ---------- */
.jx-list-containers .lentele td.jx-c-number { white-space: nowrap; }
.jx-list-containers .lentele td.jx-c-number a { text-decoration: none; color: var(--jx-ink-2); font-size: 12.5px; line-height: 1.5; display: block; }
.jx-list-containers .lentele td.jx-c-number .jx-cno { display: block; font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--jx-dark); margin-bottom: 2px; }
.jx-list-containers .lentele td.jx-c-number .jx-cno.is-empty { color: var(--jx-muted); font-family: var(--jx-font); font-weight: 600; font-size: 12.5px; }
.jx-list-containers .lentele td.jx-c-details { white-space: normal !important; min-width: 260px; }
.jx-list-containers .lentele td.jx-c-details a { text-decoration: none; }
.jx-list-containers .lentele td.jx-c-details ul { margin: 0 0 4px !important; padding: 0 !important; list-style: none; }
.jx-list-containers .lentele td.jx-c-details ul ul { margin: 2px 0 0 10px !important; }
.jx-list-containers .lentele td.jx-c-details li { line-height: 1.45; font-size: 13px; }
.jx-list-containers .lentele td.jx-c-details li li a { color: var(--jx-ink-2); }
.jx-list-containers .lentele td.jx-c-details li li a:hover { color: var(--jx-dark); text-decoration: underline; }
.jx-list-containers .lentele td.jx-c-details .jx-cnt { display: inline-block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; color: var(--jx-muted); letter-spacing: .04em; text-transform: uppercase; }
.jx-list-containers .lentele td.jx-c-line { white-space: nowrap; font-weight: 600; }
.jx-list-containers .lentele td.jx-c-dates { white-space: nowrap; font-size: 13px; line-height: 1.5; }
.jx-list-containers .lentele td.jx-c-dates a { color: var(--jx-ink-2); text-decoration: none; }
.jx-list-containers .lentele td.jx-c-dates b { color: var(--jx-ink); font-weight: 600; }
.jx-list-containers .lentele td.jx-c-cstatus a { text-decoration: none; }
.jx-list-containers .lentele td.jx-c-mail { text-align: center; }
.jx-list-containers .lentele td.jx-c-mail a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--jx-line); color: var(--jx-ink-2); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.jx-list-containers .lentele td.jx-c-mail a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jx-list-containers .lentele td.jx-c-mail a:hover { background: var(--jx-lime); border-color: var(--jx-lime); color: var(--jx-dark); }
.jx-list-containers .lentele tr.green-row td { background: var(--jx-lime-soft) !important; }
.jx-list-containers .lentele td.jx-c-check { width: 1%; }
/* Kortelės */
.jx-list-containers.jx-cards .lentele tbody { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.jx-list-containers.jx-cards .lentele tr.container_tr { display: flex; flex-direction: column; background: #fff !important; border: 1px solid var(--jx-line); border-radius: 14px; overflow: hidden; box-shadow: var(--jx-shadow); transition: transform .2s var(--jx-ease), box-shadow .2s var(--jx-ease); padding-bottom: 10px; }
.jx-list-containers.jx-cards .lentele tr.container_tr:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 27, 26, .12); }
.jx-list-containers.jx-cards .lentele tr.container_tr td { display: flex; align-items: baseline; gap: 10px; padding: 4px 16px !important; border: 0 !important; background: transparent !important; white-space: normal !important; width: auto !important; }
.jx-list-containers.jx-cards .lentele tr.container_tr td:before { content: attr(data-label); flex: 0 0 92px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jx-muted); padding-top: 2px; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-photos { order: -3; padding: 0 !important; display: block; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-photos:before { display: none; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-number { order: -2; padding: 12px 16px 4px !important; display: block; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-number:before { display: none; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-number .jx-cno { font-size: 18px; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-cstatus { order: -1; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-check { order: 5; padding-top: 8px !important; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-details { align-items: flex-start; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-details ul ul { margin-left: 0 !important; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-mail, .jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-del { order: 6; justify-content: flex-end; padding-top: 6px !important; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-mail:before, .jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-del:before { display: none; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-mail a { width: auto; height: auto; padding: 6px 12px; border-radius: 999px; gap: 6px; font-size: 12.5px; font-weight: 600; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-mail a:after { content: "Send e-mail"; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-del a { opacity: .7; cursor: pointer; }
.jx-list-containers.jx-cards .lentele tr.container_tr td.jx-c-del a:after { content: "Delete"; font-size: 12px; margin-left: 4px; vertical-align: 2px; color: var(--jx-red); }
.jx-list-containers.jx-cards .lentele tr.green-row td { background: transparent !important; }
.jx-list-containers.jx-cards .lentele tr.status_id_1 { border-left: 4px solid #e9c46a; }
.jx-list-containers.jx-cards .lentele tr.status_id_2 { border-left: 4px solid var(--jx-lime); }
.jx-list-containers.jx-cards .lentele tr.status_id_3 { border-left: 4px solid var(--jx-dark-3); }
.jx-list-containers.jx-cards .lentele tr.status_id_4 { border-left: 4px solid var(--jx-dark); }
.jx-list-containers.jx-cards .jx-ph-none { width: 100%; height: 150px; border-radius: 0; border: 0; background: var(--jx-dark-3); color: #9aa89f; font-size: 12.5px; }
/* ---------- Greita paieška tamsiojoje juostoje (A2) ---------- */
/* Laukas – pirmoje juostos eilutėje po logotipo (order 1 = kaip logotipas, DOM tvarka po jo); orų langelis su margin-left:auto lieka dešinėje */
.jx-qs { position: relative; order: 1; flex: 0 1 380px; min-width: 220px; margin-left: 14px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .18s, box-shadow .18s, background .18s; }
.jx-qs:focus-within { background: rgba(255, 255, 255, .12); border-color: var(--jx-lime); box-shadow: 0 0 0 3px rgba(155, 209, 34, .22); }
.jx-qs-ico { width: 16px; height: 16px; color: #b9c4bd; flex: 0 0 16px; }
.jx-qs:focus-within .jx-qs-ico { color: var(--jx-lime); }
.jx-qs.is-busy .jx-qs-ico { animation: jxQsPulse .8s ease-in-out infinite; }
@keyframes jxQsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.jx-qs input { flex: 1 1 auto; width: 100%; min-width: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; margin: 0 !important; height: auto !important; color: #fff !important; font: 500 13px/1.2 var(--jx-font) !important; }
.jx-qs input::placeholder { color: #9aa89f; }
.jx-qs input::-webkit-search-cancel-button { display: none; }
.jx-qs-key { font: 600 11px/1 var(--jx-font); color: #b9c4bd; border: 1px solid rgba(255, 255, 255, .22); border-radius: 5px; padding: 3px 6px; flex: 0 0 auto; }
.jx-qs:focus-within .jx-qs-key { display: none; }
.jx-qs-dd { position: absolute; left: 0; top: calc(100% + 8px); width: 560px; max-width: 94vw; background: #fff; color: var(--jx-ink); border-radius: 12px; box-shadow: 0 14px 40px rgba(11, 27, 26, .25), 0 2px 6px rgba(11, 27, 26, .08); padding: 6px; max-height: 70vh; overflow-y: auto; z-index: 40; font-family: var(--jx-font); font-size: 13px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .17s var(--jx-ease), transform .17s var(--jx-ease), visibility 0s .17s; }
.jx-qs-dd.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .17s var(--jx-ease), transform .17s var(--jx-ease); }
.jx-qs-dd { transform-origin: top left; }
.jx-qs-g { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jx-muted); }
.jx-qs-it { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--jx-ink) !important; transition: background .1s; }
.jx-qs-it.is-active, .jx-qs-it:hover { background: var(--jx-lime-soft); }
.jx-qs-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.jx-qs-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-qs-t b { font-family: ui-monospace, Consolas, 'Courier New', monospace; letter-spacing: .04em; }
.jx-qs-s { font-size: 12px; color: var(--jx-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--jx-font); }
.jx-qs-s b { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-weight: 800; background: var(--jx-lime-soft); color: var(--jx-lime-text); padding: 0 3px; border-radius: 4px; }
.jx-qs-it.is-active .jx-qs-s b, .jx-qs-it:hover .jx-qs-s b { background: #fff; }
.jx-qs-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.jx-qs-r small { font-size: 11px; color: var(--jx-muted); white-space: nowrap; }
.jx-qs-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eef0ed; color: var(--jx-ink-2); white-space: nowrap; }
.jx-qs-st.jx-st-6 { background: var(--jx-lime-soft); color: var(--jx-lime-text); }
.jx-qs-st.jx-st-7 { background: #fff6d6; color: #7a5a00; }
.jx-qs-st.jx-st-8 { background: var(--jx-lime); color: var(--jx-dark); }
.jx-qs-st.jx-st-10 { background: var(--jx-dark-3); color: #fff; }
.jx-qs-st.jx-st-11 { background: var(--jx-dark); color: var(--jx-lime); }
.jx-qs-empty { padding: 12px 10px; color: var(--jx-muted); font-size: 13px; }
@media (max-width: 1180px) { .jx-qs { order: 4; flex: 1 1 100%; margin-left: 0; } } /* siaurame lange – atskira eilutė virš meniu */
/* ---------- Dokumentų ženkliukai prie mašinų konteineryje / krovimo lentoje: „no title“ (raudonas), „no keys“ (geltonas); dispatch sheet nebežymimas (Dainora 2026-11-06) ---------- */
.jx-ready { display: inline-block; margin: 4px 0 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; font-family: var(--jx-font); vertical-align: middle; }
.jx-ready.is-ok { background: var(--jx-lime-soft); color: var(--jx-lime-text); }
.jx-ready.is-no { background: var(--jx-red-soft); color: var(--jx-red); }
.jx-ready.is-info { background: #fff6d6; color: #7a5a00; }
.jx-docs-miss { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--jx-red-soft); color: var(--jx-red); font-size: 11px; font-weight: 700; white-space: nowrap; }
.row-car .jx-ready { margin: 2px 6px 6px 0; }
/* ---------- Nuorodų mygtukai sąrašų įrankiuose (Export CSV, Loading board) ---------- */
.jx-list-right { display: flex; align-items: center; gap: 10px; }
.jx-btn-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--jx-line); background: #fff; color: var(--jx-dark) !important; font: 600 12.5px var(--jx-font); text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s var(--jx-ease); }
.jx-btn-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jx-btn-link:hover { background: var(--jx-lime-soft); border-color: var(--jx-lime); transform: translateY(-1px); }
td .jx-btn-link { margin-left: 8px; vertical-align: middle; }
/* ---------- Konteinerių užpildymo lenta (C16) ---------- */
.jx-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jx-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 18px; }
.jx-board-card { background: #fff; border: 1px solid var(--jx-line); border-radius: 14px; padding: 14px 16px 12px; box-shadow: var(--jx-shadow); display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--jx-line-2); }
.jx-board-card.is-soon { border-left-color: #e9c46a; }
.jx-board-card.is-urgent { border-left-color: var(--jx-red); }
.jx-board-card.is-past { border-left-color: var(--jx-muted); opacity: .85; }
.jx-board-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jx-board-no { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--jx-dark) !important; text-decoration: none !important; }
.jx-board-size { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--jx-dark-3); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.jx-board-meta { font-size: 13px; color: var(--jx-ink-2); }
.jx-board-dates { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--jx-ink-2); margin-top: 2px; }
.jx-board-date b { color: var(--jx-ink); font-weight: 600; }
.jx-board-date i { font-style: normal; font-weight: 700; color: var(--jx-lime-text); margin-left: 3px; }
.jx-board-date.is-soon i { color: #7a5a00; }
.jx-board-date.is-urgent i { color: var(--jx-red); }
.jx-board-date.is-past i { color: var(--jx-muted); }
.jx-slots { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.jx-slot { width: 26px; height: 16px; border-radius: 4px; border: 1.5px dashed var(--jx-line-2); background: #fff; }
.jx-slot.is-filled { background: var(--jx-lime); border: 1.5px solid var(--jx-lime); }
.jx-slot.is-over { background: var(--jx-red); border: 1.5px solid var(--jx-red); }
.jx-slots-text { font-size: 12.5px; color: var(--jx-ink-2); margin-left: 4px; }
.jx-slots-text b { color: var(--jx-lime-text); }
.jx-board-cars { list-style: none; margin: 4px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; }
.jx-board-cars li { font-size: 13px; line-height: 1.4; }
.jx-board-cars li a { color: var(--jx-ink); font-weight: 600; text-decoration: none; }
.jx-board-cars li a:hover { text-decoration: underline; }
.jx-board-cars .jx-ready { margin: 0 0 0 2px; }
.jx-board-vin { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 12px; font-weight: 800; background: var(--jx-lime-soft); color: var(--jx-lime-text); padding: 0 4px; border-radius: 4px; }
.jx-board-buyers { font-size: 12px; color: var(--jx-muted); margin-top: 4px; }
.jx-board-actions { margin-top: auto; padding-top: 8px; display: flex; justify-content: flex-end; }
@media (max-width: 1100px) { .jx-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Kalbos jungiklis EN / LT / RU (B13, klientų langas) ---------- */
.jx-lang { order: 3; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); margin-left: 6px; }
.jx-lang-a { display: inline-block; padding: 5px 9px; border-radius: 999px; color: #c9d2cd !important; font: 700 11.5px/1 var(--jx-font); letter-spacing: .04em; text-decoration: none !important; transition: background .15s, color .15s; }
.jx-lang-a:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.jx-lang-a.is-on { background: #fff; color: var(--jx-dark) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.jx-lang-login { display: flex; justify-content: center; margin: 10px 0 0; }
.jx-lang-login .jx-lang { margin: 0; background: rgba(11, 27, 26, .55); border-color: rgba(255, 255, 255, .18); }
/* ---------- Nuotraukų galerija mašinos puslapyje (ofisas: editvehicle, klientas: viewvehicle) ---------- */
.jx-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.jx-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 10px 0 14px; clear: both; }
.jx-g-item { position: relative; margin: 0 !important; background: #fff; border: 1px solid var(--jx-line); border-radius: 12px; overflow: hidden; box-shadow: var(--jx-shadow); display: flex; flex-direction: column; transition: transform .18s var(--jx-ease), box-shadow .18s var(--jx-ease); }
.jx-g-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 27, 26, .14); }
.jx-g-item img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: #e9ece8; cursor: zoom-in; }
.jx-g-item.is-loading { border-color: var(--jx-lime); }
.jx-g-type { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(11, 27, 26, .78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; pointer-events: none; }
.jx-g-type-load { left: auto; right: 8px; background: var(--jx-lime); color: var(--jx-dark); }
.jx-g-video { display: flex; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 3; background: var(--jx-dark-3); color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 13px; }
.jx-g-video svg { width: 28px; height: 28px; fill: var(--jx-lime); }
.jx-g-item figcaption { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 10px; min-height: 36px; font-size: 12.5px; color: var(--jx-ink-2); }
.jx-g-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-g-title i { color: var(--jx-muted); font-style: italic; }
.jx-g-editbox { display: none; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; }
.jx-g-input { flex: 1 1 auto; min-width: 0; padding: 5px 8px !important; font-size: 12.5px !important; border: 1px solid var(--jx-lime) !important; border-radius: 7px !important; height: auto !important; }
.jx-g-save { padding: 5px 10px; border-radius: 999px; border: 0; background: var(--jx-lime); color: var(--jx-dark); font: 700 12px var(--jx-font); cursor: pointer; }
.jx-g-status { display: none; }
.jx-g-actions { display: flex; gap: 2px; flex: 0 0 auto; }
/* !important – temos bendras mygtukų stilius (laimo fonas, paraštės) čia netinka */
.jx-g-actions button { width: 28px !important; height: 28px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--jx-muted) !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; font-size: 0 !important; transition: background .15s, color .15s; }
.jx-g-actions button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.jx-g-actions button:hover { background: var(--jx-light) !important; color: var(--jx-dark) !important; transform: none !important; }
.jx-g-actions .jx-g-del:hover { background: var(--jx-red-soft) !important; color: var(--jx-red) !important; }
.jx-g-save { padding: 5px 10px !important; min-width: 0 !important; margin: 0 !important; height: auto !important; line-height: 1.2 !important; border-radius: 999px !important; border: 0 !important; background: var(--jx-lime) !important; color: var(--jx-dark) !important; font: 700 12px var(--jx-font) !important; box-shadow: none !important; }
.jx-g-item.is-editing .jx-g-title { display: none; } /* pieštukas lieka – spustelėjus dar kartą, redagavimas atšaukiamas */
.jx-g-item.is-editing .jx-g-edit { background: var(--jx-lime-soft) !important; color: var(--jx-lime-text) !important; }
.jx-g-item.is-editing .jx-g-editbox { display: flex; }
.jx-gallery-client .jx-g-item figcaption { padding: 6px 10px; }
#chooseFileLegend, fieldset#chooseFileLegend { width: auto !important; max-width: 100%; }
@media (max-width: 700px) {
.jx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jx-g-item figcaption { padding: 6px 6px 6px 8px; font-size: 12px; }
}
/* ============================================================================
Mašinos ir konteinerio formos (table.edit-form, ofisas): stulpeliai arti
vienas kito, kaip senoje sistemoje – lentelė pagal turinį, ne per visą
ekraną (HTML width="25%" perrašomas CSS), laukai 210 px, žemesnės eilutės.
============================================================================ */
div#content form > table.edit-form { width: auto !important; max-width: 100%; border-collapse: separate; border-spacing: 0; }
table.edit-form > tbody > tr > td { width: auto !important; padding: 0 30px 4px 0 !important; vertical-align: top; }
table.edit-form > tbody > tr > td:last-child { padding-right: 0 !important; }
table.edit-form > tbody > tr > td[rowspan="10"][width="20%"]:not([nowrap]) { padding: 0 !important; } /* konteinerio formos tušti tarpiniai stulpeliai */
table.edit-form h2 { font-size: 15px !important; margin: 0 0 4px !important; padding: 0 !important; white-space: nowrap; }
table.edit-form label { display: block; padding: 2px 0 1px; margin: 0; font-size: 12px; font-weight: 500; color: var(--jx-muted); line-height: 1.25; }
table.edit-form label strong { color: var(--jx-ink); font-weight: 700; }
table.edit-form input[type=text], table.edit-form select, table.edit-form textarea { width: 210px !important; }
table.edit-form input[type=text], table.edit-form select { padding: 3px 8px !important; font-size: 12.5px !important; }
table.edit-form select { padding-right: 24px !important; }
table.edit-form textarea { min-height: 64px; padding: 5px 8px !important; font-size: 12.5px !important; }
table.edit-form input.radio { margin: 0 1px 0 0; vertical-align: -2px; }
table.edit-form .jx-ready { display: inline-block; margin: 2px 0 2px 6px; }
table.edit-form .jx-vin-status, table.edit-form .jx-vin-dup, table.edit-form .jx-vin-suggest { max-width: 320px; }
table.edit-form table.lentele td, table.edit-form table.lentele th { padding: 5px 8px !important; }
@media (max-width: 700px) {
table.edit-form > tbody > tr > td { padding-right: 12px !important; }
table.edit-form input[type=text], table.edit-form select, table.edit-form textarea { width: 160px !important; }
}
/* ============================================================================
Vartotojo pastabos 2026-11-05: forma centre, įkėlimo dėžutė vietoj
„Choose Files“, seni mygtukai ir png ikonos naujo stiliaus.
============================================================================ */
/* Mašinos / konteinerio forma: stulpelis tokio pločio kaip lentelė ir per vidurį (Chrome 105+ :has) */
div#content > form:has(> table.edit-form) { display: block; width: fit-content; max-width: 100%; margin: 0 auto; } /* senas CSS: form { display: inline } */
/* Įkėlimo dėžutė: spustelėkite arba nutempkite; nematomas dengia visą dėžutę */
.jx-upload { position: relative; display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 14px 18px; border: 2px dashed var(--jx-line-2); border-radius: 14px; background: #fff; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s, box-shadow .15s; }
.jx-upload:hover, .jx-upload.is-drag { border-color: var(--jx-lime); background: var(--jx-lime-soft); }
.jx-upload.is-drag { box-shadow: 0 0 0 4px rgba(155, 209, 34, .25); }
.jx-upload-ico { width: 34px; height: 34px; flex: 0 0 auto; fill: none; stroke: var(--jx-lime-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jx-upload-t { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--jx-muted); line-height: 1.3; }
.jx-upload-t b { font-size: 14px; color: var(--jx-dark); }
.jx-upload input[type=file] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0 !important; padding: 0 !important; margin: 0; font-size: 0; }
.jx-upload-p { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none; }
.jx-upload-p i { display: block; height: 100%; width: 0; background: var(--jx-lime); transition: width .2s; }
.jx-upload.is-busy { border-style: solid; border-color: var(--jx-lime); }
/* Senos „abutton“ nuorodos (Dock receipt, Letter) – kaip kiti nuorodų mygtukai */
a.abutton, .abutton { display: inline-flex !important; align-items: center; gap: 6px; margin: 3px 6px 3px 0 !important; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid var(--jx-line) !important; background: #fff !important; color: var(--jx-dark) !important; font: 600 12.5px var(--jx-font) !important; text-decoration: none !important; transition: background .15s, border-color .15s, transform .15s var(--jx-ease); }
a.abutton:hover, .abutton:hover { background: var(--jx-lime-soft) !important; border-color: var(--jx-lime) !important; transform: translateY(-1px); }
/* Senos png ikonos (delete.png / add.png / page_edit.png) sąrašuose ir administravimo puslapiuose → SVG per CSS (šablonai neliesti),
apvalus fonas užvedus. Turinys pakeičiamas tik Chrome/Edge/Safari/Firefox 113+; senesnės naršyklės rodo png. */
img[src$="/icons/delete.png"], img[src$="/icons/add.png"], img[src$="/icons/page_edit.png"] { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; vertical-align: middle; cursor: pointer; transition: background .15s; }
img[src$="/icons/delete.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
img[src$="/icons/add.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
img[src$="/icons/page_edit.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310291f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E"); }
a:hover > img[src$="/icons/delete.png"], img[src$="/icons/delete.png"]:hover { background: var(--jx-red-soft); }
a:hover > img[src$="/icons/add.png"], img[src$="/icons/add.png"]:hover, a:hover > img[src$="/icons/page_edit.png"], img[src$="/icons/page_edit.png"]:hover { background: var(--jx-lime-soft); }
/* Peržiūra telefone: didesni mygtukai, nuotrauka per visą plotį, užrašas apačioje */
@media (max-width: 700px) {
.jx-lb-fig img { max-width: 100vw; max-height: 74vh; border-radius: 0; }
.jx-lb-fig figcaption { bottom: 10px; gap: 10px; padding: 7px 12px; font-size: 12px; }
.jx-lb-tools { top: 10px; left: 10px; transform: none; gap: 4px; padding: 5px; }
.jx-lb-tools button { width: 38px; height: 38px; }
.jx-lb-tools button.jx-lb-reset { min-width: 52px; padding: 0 8px !important; }
.jx-lb-prev, .jx-lb-next { width: 52px; height: 52px; font-size: 34px; opacity: .85; }
.jx-lb-close { width: 48px; height: 48px; font-size: 30px; }
}
/* ---------- Vartotojų sąrašas su paieška – Sys. configuration → Users (Dainora 2026-11-06) ---------- */
.jx-users-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.jx-users-top h2 { margin: 0; }
.jx-users-total { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--jx-lime-soft); color: var(--jx-lime-text); font-size: 12px; font-weight: 700; vertical-align: middle; }
.jx-users-search { display: flex; align-items: center; gap: 8px; flex: 1 1 420px; max-width: 640px; margin: 0; }
.jx-users-field { position: relative; flex: 1 1 auto; min-width: 220px; }
.jx-users-field svg { position: absolute; left: 14px; top: 50%; margin-top: -8px; width: 16px; height: 16px; fill: none; stroke: var(--jx-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; z-index: 1; }
.jx-users-search input[type="search"], #content .jx-users-search input[type="search"] { display: block; width: 100%; height: 40px !important; padding: 0 40px 0 40px !important; border: 1px solid var(--jx-line-2) !important; border-radius: 999px !important; font: 500 14px/38px var(--jx-font) !important; color: var(--jx-ink); background: var(--jx-light) !important; box-sizing: border-box; box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.jx-users-search input[type="search"]::placeholder { color: var(--jx-muted); font-weight: 400; }
.jx-users-search input[type="search"]:focus { outline: none; background: #fff !important; border-color: var(--jx-lime) !important; box-shadow: 0 0 0 3px var(--jx-lime-soft); }
.jx-users-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-right: 2px; cursor: pointer; background: var(--jx-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.jx-users-search .update-button { height: 40px; padding: 0 20px; border-radius: 999px; flex: 0 0 auto; }
.jx-users-search .jx-btn-link { height: 40px; box-sizing: border-box; }
.jx-users-new { margin-left: auto; }
.jx-users-info { margin: 0 0 10px; color: var(--jx-muted); font-size: 13px; }
.jx-users-table mark { background: #fff3a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.jx-users-login { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--jx-line-2); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none !important; }
.jx-users-login:hover { background: var(--jx-lime-soft); border-color: var(--jx-lime); }
.jx-users-none td { color: var(--jx-muted); text-align: center; padding: 18px; }
/* ---------- Dock receipt siuntimas klientui – dialogas (Dainora 2026-11-06) ---------- */
.jx-dock-send label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
.jx-dock-send label.jx-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 10px; }
.jx-dock-send input[type="text"], .jx-dock-send textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--jx-line-2); border-radius: 8px; font: 14px var(--jx-font); }
.jx-dock-send textarea { resize: vertical; }
.jx-dock-send small { display: block; color: var(--jx-muted); font-size: 12px; margin-top: 4px; }
.jx-dock-att { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--jx-lime-soft); font-size: 13px; word-break: break-all; }
.jx-dock-via { margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: var(--jx-light); color: var(--jx-ink-2); font-size: 12px; line-height: 1.4; }
/* „Loading pictures“ antraštė su įrankiais: ZIP ir siuntimas el. paštu (Dainora 2026-11-11) */
.jx-gal-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.jx-gal-head h2 { margin: 0; }
.jx-gal-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.jx-dock-att span { color: var(--jx-muted); }
.jx-dock-hist { margin-top: 12px; font-size: 12.5px; color: var(--jx-ink-2); }
.jx-dock-hist ul { margin: 4px 0 0; padding-left: 18px; }
.jx-dock-actions { margin-top: 14px; display: flex; gap: 8px; }
.jx-dock-errors { margin: 0 0 8px; padding: 8px 10px 8px 26px; border-radius: 8px; background: var(--jx-red-soft); color: var(--jx-red); font-size: 13px; }
.jx-c-mail { white-space: nowrap; }
.jx-c-mail a + a { margin-left: 8px; }
/* senas jQuery UI dialogas (Send e-mail, Send dock receipt): tamsi antraštė, apvalus „ד vietoj paveikslėlio, kurio nėra */
.ui-dialog { border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .28); font-family: var(--jx-font); overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { position: relative; background: var(--jx-dark); color: #fff; padding: 11px 48px 11px 16px; font-weight: 700; }
/* uždarymo mygtukas ofise –