/* Kaban · design tokens */
:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --fill: #F2F2F7;
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --muted: #6E6E73;
  --line: #E5E5EA;
  --blue: #0071E3;
  --blue-soft: #E8F1FD;

  /* status colors: solid (dots, pins), soft (tints), deep (text, buttons) */
  --prog: #0A84FF;  --prog-soft: #EAF3FF; --prog-deep: #005FCC;
  --inc: #FF9500;   --inc-soft: #FFF3E3;  --inc-deep: #A85500;
  --due: #FF375F;   --due-soft: #FFECEF;  --due-deep: #C0143C;
  --done: #34C759;  --done-soft: #E8F8EC; --done-deep: #1C7A34;
  --hold: #AF52DE;  --hold-soft: #F6ECFC; --hold-deep: #7E2FA8;
  --off: #8E8E93;   --off-soft: #EFEFF4;  --off-deep: #5C5C61;

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -14px rgba(0,0,0,.22);
  --shadow-pop: 0 20px 50px -12px rgba(0,0,0,.28);
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(0,113,227,.4); outline-offset: 2px; }
.ic { flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.pos { color: var(--done-deep); }
.neg { color: var(--due-deep); }
.grow { flex-grow: 1; }
.mt { margin-top: 22px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 236px; flex-shrink: 0; background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid var(--line); padding: 26px 14px 18px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 55%, #AF52DE 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(94,92,230,.7); }
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; text-decoration: none; }
.nav-link:hover { background: rgba(0,0,0,.04); }
.nav-link.active { background: var(--ink); color: #fff; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.scope-pick { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.scope-pick select { height: 40px; border: 0; border-radius: var(--r-sm); background: var(--fill); padding: 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.me { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 10px; }
.me-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { flex-grow: 1; min-width: 0; padding: 30px 36px 56px; display: flex; flex-direction: column; gap: 22px; }

.readonly-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--hold-soft); color: var(--hold-deep); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; }
.readonly-bar a { margin-left: auto; font-weight: 700; color: var(--hold-deep); }
.flash { border-radius: var(--r-md); padding: 12px 16px; font-weight: 700; background: var(--done-soft); color: var(--done-deep); }
.flash-err { background: var(--due-soft); color: var(--due-deep); }

/* ---------- page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.page-head .sub { margin: 6px 0 0; color: var(--muted); font-weight: 500; }
.head-stats { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.stat { font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border-radius: 999px; padding: 6px 12px; }
.stat strong { font-weight: 800; }
.stat-warn { background: var(--due-soft); color: var(--due-deep); }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 10px; width: 300px; height: 44px; padding: 0 16px; background: var(--surface); border-radius: 999px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.search input { border: 0; outline: 0; background: transparent; flex-grow: 1; min-width: 0; font-size: 14.5px; color: var(--ink); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .1s, background .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #3A3A3C; }
.btn-accent { background: var(--blue); color: #fff; }
.btn-accent:hover { background: #0062C4; }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: var(--fill); }
.btn-danger-ghost { background: transparent; color: var(--due-deep); box-shadow: inset 0 0 0 1px #F6C2CC; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.icon-btn { width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: rgba(0,0,0,.1); }

/* ---------- board ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)) minmax(260px, 300px); gap: 18px; align-items: start; }
.col { --c: var(--prog); --c-soft: var(--prog-soft); --c-deep: var(--prog-deep); background: color-mix(in srgb, var(--c-soft) 70%, transparent); border-radius: var(--r-xl); padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: box-shadow .15s, background .15s; }
.col[data-status="incarcata"] { --c: var(--inc); --c-soft: var(--inc-soft); --c-deep: var(--inc-deep); }
.col[data-status="finalizata"] { --c: var(--done); --c-soft: var(--done-soft); --c-deep: var(--done-deep); }
.col[data-status="hold"] { --c: var(--hold); --c-soft: var(--hold-soft); --c-deep: var(--hold-deep); min-height: 150px; }
.col[data-status="anulata"] { --c: var(--off); --c-soft: var(--off-soft); --c-deep: var(--off-deep); min-height: 150px; }
.col.drop-target { box-shadow: inset 0 0 0 2.5px var(--c); background: var(--c-soft); }
.col-head { display: flex; align-items: center; gap: 9px; padding: 6px 8px 2px; }
.col-head .dot { width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.col-name { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; }
.count { font-size: 12.5px; font-weight: 800; color: #fff; background: var(--c-deep); border-radius: 999px; padding: 2px 9px; min-width: 24px; text-align: center; }
.col-body { display: flex; flex-direction: column; gap: 14px; min-height: 40px; }
.col-side { display: flex; flex-direction: column; gap: 18px; }
.empty { display: none; margin: 0; padding: 18px 10px; text-align: center; font-size: 13.5px; font-weight: 500; color: var(--c-deep); opacity: .8; }
.col-body:not(:has(.card)) .empty { display: block; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-programata { background: var(--prog); }
.dot-incarcata { background: var(--inc); }
.dot-finalizata { background: var(--done); }
.dot-hold { background: var(--hold); }
.dot-anulata { background: var(--off); }

/* ---------- trip card ---------- */
.card { --k: var(--prog); --k-soft: var(--prog-soft); --k-deep: var(--prog-deep);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s, box-shadow .15s; }
.card:hover { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 34px -14px rgba(0,0,0,.28); }
.card.s-incarcata { --k: var(--inc); --k-soft: var(--inc-soft); --k-deep: var(--inc-deep); }
.card.s-defacturat { --k: var(--due); --k-soft: var(--due-soft); --k-deep: var(--due-deep); box-shadow: 0 0 0 2px var(--due), var(--shadow-card); }
.card.s-facturata { --k: var(--done); --k-soft: var(--done-soft); --k-deep: var(--done-deep); }
.card.s-hold { --k: var(--hold); --k-soft: var(--hold-soft); --k-deep: var(--hold-deep); }
.card.s-anulata { --k: var(--off); --k-soft: var(--off-soft); --k-deep: var(--off-deep); }
body[data-readonly="1"] .card { cursor: default; }
.card.hidden-by-search { display: none; }
.card.dragging { opacity: .3; }
.card.flash-in { animation: flashIn .7s ease-out; }
@keyframes flashIn { from { transform: scale(.96); box-shadow: 0 0 0 4px var(--k); } to { transform: none; } }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(2.5deg) scale(1.03); box-shadow: var(--shadow-pop) !important; opacity: .97; }

.card-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: var(--k-soft); }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--k-deep); margin-right: auto; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.amount { font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.card-head .icon-btn { background: rgba(255,255,255,.7); }

.card-body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.card-client { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.client { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ref { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--fill); border-radius: 6px; padding: 2px 7px; }

.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stop { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; padding-bottom: 12px; }
.stop-end { padding-bottom: 0; }
.stop:not(.stop-end)::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--k) 0 4px, transparent 4px 7px); opacity: .55; }
.pin { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 3px solid var(--k); background: var(--surface); }
.stop-end .pin { background: var(--k); }
.stop-main { display: flex; flex-direction: column; min-width: 0; }
.stop-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.stop-loc { font-size: 13px; color: var(--muted); font-weight: 500; }
.stop-when { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; padding-top: 1px; }
.badge { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 6px; }
.badge-customs { background: #1D1D1F; color: #fff; margin-left: 6px; }
.stop-when .badge-customs { margin-left: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12.5px; font-weight: 700; background: var(--fill); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.truck { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--fill); border-radius: var(--r-sm); font-size: 13px; }
.truck .ic { color: var(--k-deep); }
.truck-txt { display: flex; flex-direction: column; min-width: 0; }
.plate { font-weight: 800; letter-spacing: .02em; }
.carrier { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truck .profit { margin-left: auto; font-weight: 800; font-size: 14px; color: var(--done-deep); background: var(--done-soft); border-radius: 999px; padding: 3px 9px; }
.truck .profit.neg { color: var(--due-deep); background: var(--due-soft); }
.note { margin: 0; font-size: 13px; font-weight: 600; color: var(--k-deep); background: var(--k-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.note-inv { display: flex; align-items: center; gap: 8px; }
.s-anulata .client { text-decoration: line-through; color: var(--muted); }
.owner { margin: 0; font-size: 12px; font-weight: 700; color: var(--blue); }
.card-act { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 999px; background: var(--k-deep); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .1s, filter .15s; }
.card-act:hover { filter: brightness(1.08); }
.card-act:active { transform: scale(.97); }

/* ---------- menu ---------- */
.menu { position: fixed; z-index: 900; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-radius: 18px; box-shadow: var(--shadow-pop), inset 0 0 0 1px rgba(0,0,0,.05); padding: 6px; min-width: 250px; display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: 12px; text-align: left; cursor: pointer; font-weight: 600; }
.menu button:hover, .menu button:focus-visible { background: rgba(0,0,0,.06); }
.menu button[disabled] { opacity: .35; cursor: default; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; }
.menu-label { margin: 6px 12px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------- dialogs & forms ---------- */
dialog.sheet { border: 0; padding: 0; border-radius: var(--r-xl); width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
dialog.sheet-small { width: min(520px, calc(100vw - 32px)); }
dialog.sheet::backdrop { background: rgba(0,0,0,.32); backdrop-filter: blur(4px); }
dialog.sheet form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 10px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.sheet-body { padding: 4px 24px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.fs { background: var(--bg); border-radius: var(--r-lg); padding: 16px; }
.fs h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.grid2, .grid3, .grid4 { display: grid; gap: 12px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs .grid2 + .field, .fs .grid2 + .grid2 { margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea, .input-sm { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; outline: none; transition: box-shadow .12s; }
.settings .field input, .settings .field select, .auth-card .field input, .input-sm { background: var(--fill); box-shadow: none; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input-sm:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.input-sm { height: 36px; width: 150px; font-size: 14px; }
.profit-out { height: 46px; display: flex; align-items: center; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 700; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); }
.customs { margin-top: 10px; }
.customs-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
details.more summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--blue); min-height: 36px; display: flex; align-items: center; }
details.more .grid2 { margin-top: 6px; }
.form-error { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--due-soft); color: var(--due-deep); font-weight: 700; font-size: 14px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* autocomplete */
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-md); box-shadow: var(--shadow-pop), inset 0 0 0 1px rgba(0,0,0,.05); padding: 6px; max-height: 290px; overflow-y: auto; }
.ac-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; text-align: left; cursor: pointer; font-weight: 700; }
.ac-item .ac-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ac-item.on, .ac-item:hover { background: var(--blue-soft); }
.ac-new { font-size: 12.5px; color: var(--muted); padding: 6px 12px 4px; }

/* ---------- period ---------- */
.period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: flex; background: rgba(0,0,0,.06); border-radius: 999px; padding: 3px; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg-opt input:checked + span { background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(0,113,227,.4); }
.period-fields { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.period-fields input[type=month], .period-fields select { height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.month-chips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 760px; }
.mchip input { position: absolute; opacity: 0; pointer-events: none; }
.mchip span { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.mchip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.mchip input:focus-visible + span { outline: 3px solid rgba(0,113,227,.4); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.kpi-value { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-sub a { font-weight: 700; }
.kpi-grad { background: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 55%, #AF52DE 100%); color: #fff; box-shadow: 0 16px 30px -16px rgba(94,92,230,.8); }
.kpi-dark { background: #1D1D1F; color: #fff; }
.kpi-grad .kpi-label, .kpi-grad .kpi-sub, .kpi-dark .kpi-label, .kpi-dark .kpi-sub { color: rgba(255,255,255,.78); }
.kpi-grad .pos, .kpi-dark .pos { color: #fff; }

/* ---------- panels & tables ---------- */
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 0 0 1px rgba(16,24,40,.035); }
.panel.pad { padding: 22px; }
.panel h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 12px 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid #F0F0F3; vertical-align: top; }
.tbl .r { text-align: right; }
.tbl tfoot td { background: var(--fill); border-bottom: 0; padding: 14px 12px; }
.tbl-compact td { padding: 10px 12px; vertical-align: middle; }
.empty-row { text-align: center; color: var(--muted); padding: 44px 12px !important; }

.sheet-panel { overflow: hidden; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.sheet-title { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
table.sheet { font-size: 13px; }
table.sheet th { position: sticky; top: 0; background: #FAFAFC; border-right: 1px solid #EFEFF3; padding: 10px 10px; }
table.sheet td { border-right: 1px solid #F2F2F5; padding: 8px 10px; }
table.sheet tbody tr:hover td { background: #FAFAFD; }
table.sheet td.two .l1, table.sheet td.two .l2 { display: block; white-space: nowrap; }
table.sheet td.two .l2 { color: var(--muted); }
table.sheet td.strong-first .l1 { font-weight: 800; }
table.sheet td.comment { min-width: 160px; color: var(--ink-2); }
table.sheet td .badge-customs { display: inline-block; margin: 3px 0 0; }
table.sheet tr.row-defacturat td:first-child { box-shadow: inset 4px 0 0 var(--due); }
table.sheet tr.row-incarcata td:first-child { box-shadow: inset 4px 0 0 var(--inc); }
table.sheet tr.row-programata td:first-child { box-shadow: inset 4px 0 0 var(--prog); }
table.sheet tr.row-facturata td:first-child { box-shadow: inset 4px 0 0 var(--done); }
table.sheet .icon-btn { width: 32px; height: 32px; }

.pill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pill-programata { background: var(--prog-soft); color: var(--prog-deep); }
.pill-incarcata { background: var(--inc-soft); color: var(--inc-deep); }
.pill-defacturat { background: var(--due-soft); color: var(--due-deep); }
.pill-facturata, .pill-finalizata { background: var(--done-soft); color: var(--done-deep); }
.pill-hold { background: var(--hold-soft); color: var(--hold-deep); }
.pill-anulata { background: var(--off-soft); color: var(--off-deep); }

/* ---------- charts ---------- */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-panel { padding: 20px 20px 16px; }
.chart-panel.wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 270px; }

/* ---------- settings ---------- */
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; min-width: 0; }
.settings h3 { margin: 18px 0 10px; font-size: 15px; font-weight: 800; }
.bands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-width: 520px; }
.band { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; align-items: center; }
.band input { height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--fill); font-weight: 600; }
.band-head span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.calc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 16px; background: linear-gradient(135deg, #EAF3FF, #F6ECFC); border-radius: var(--r-md); }
.calc label { font-weight: 700; font-size: 14px; }
.calc input { height: 40px; width: 140px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; font-weight: 700; }
.calc-out { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }

/* ---------- auth ---------- */
body.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, #DCEBFF 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #F1E2FB 0%, transparent 60%), var(--bg); }
.auth-card { width: min(400px, 100%); background: var(--surface); border-radius: var(--r-xl); padding: 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-pop); }
.auth-wide { width: min(640px, 100%); }
.auth-card h1 { margin: 6px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.auth-card h3 { margin: 8px 0 0; font-size: 15px; font-weight: 800; }
.auth-card .brand { padding: 0; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: rgba(29,29,31,.92); backdrop-filter: blur(12px); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--due-deep); }

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 800; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto; flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--line); gap: 0; }
  .side .brand, .side-foot .me-name { display: none; }
  .nav-links { flex-direction: row; flex-grow: 1; gap: 0; }
  .nav-link { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11px; font-weight: 700; border-radius: 12px; }
  .nav-link.active { background: transparent; color: var(--blue); }
  .side-foot { margin: 0; flex-direction: row; align-items: center; gap: 6px; }
  .scope-pick span { display: none; }
  .scope-pick select { width: 92px; height: 36px; font-size: 12px; }
  .me { padding: 0; }
  .main { padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .page-head h1 { font-size: 32px; }
  .head-actions { width: 100%; }
  .search { flex-grow: 1; width: auto; }
  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 12px; margin: 0 -16px; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; }
  .board > .col, .col-side { flex: 0 0 88%; scroll-snap-align: start; }
  .col-side { display: flex; }
  .kpis, .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi-value { font-size: 25px; }
  .kpi-dark { grid-column: 1 / -1; }
  .charts { grid-template-columns: 1fr; }
  .chart-box { height: 230px; }
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog.sheet, dialog.sheet-small { width: 100vw; max-width: 100vw; max-height: 94vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.sheet form { max-height: 94vh; }
  .sheet-body { padding: 4px 14px 16px; }
  .fs { padding: 14px; }
  .month-chips { max-width: 100%; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .seg-opt span { padding: 0 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.pf-grup { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---------- v4: dates, switches, invoiced rows, import ---------- */
.date-wrap { position: relative; display: flex; }
.date-wrap input[data-date] { padding-right: 48px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.date-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.date-btn:hover { background: var(--blue-soft); color: var(--blue); }
.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.switch { position: relative; display: inline-flex; width: 44px; height: 26px; cursor: pointer; vertical-align: middle; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #D1D1D6; transition: background .18s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .18s; }
.switch input:checked + span { background: #34C759; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid rgba(0,113,227,.4); outline-offset: 2px; }
.switch input:disabled { cursor: default; }
.switch input:disabled + span { opacity: .6; }
.tbl .c { text-align: center; }

/* sent to invoicing: whole row green except the first cell; confirmed: first cell green too */
table.sheet tr.is-inv td:not(:first-child) { background: #D9F5E1; }
table.sheet tr.is-conf td:first-child { background: #D9F5E1; }
table.sheet tr.is-inv:hover td:not(:first-child), table.sheet tr.is-conf:hover td:first-child { background: #CDEFD7; }
table.sheet tr.is-inv td .l2, table.sheet tr.is-conf td .l2 { color: #3F5F48; }

.import-form textarea { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; background: var(--fill); box-shadow: none; }
.import-opts { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.import-opts select { height: 44px; min-width: 180px; }
.form-actions.gap { gap: 10px; }
table.sheet tr.imp-skip td { opacity: .45; }
table.sheet tr.imp-warn td { background: #FFFBEB; }
.imp-notes { min-width: 260px; }
.imp-w { display: block; font-size: 12px; font-weight: 600; color: #8A5300; }
.imp-w + .imp-w { margin-top: 2px; }

/* ---------- v5: search, month close ---------- */
.period-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.month-close { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.month-close.is-closed > span { display: inline-flex; align-items: center; gap: 6px; background: var(--hold-soft); color: var(--hold-deep); border-radius: 999px; padding: 7px 12px; }
.sheet-bar { flex-wrap: wrap; }
.reg-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: auto; margin-left: 12px; }
.seg-sm .seg-opt span { height: 32px; padding: 0 12px; font-size: 13px; }
.search-sm { height: 38px; width: 320px; padding: 0 12px; }
.search-sm input { font-size: 14px; }
.moved { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--hold-deep); background: var(--hold-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
@media (max-width: 900px) {
  .reg-search { margin-left: 0; width: 100%; }
  .search-sm { width: 100%; }
}
table.sheet tr.filter-row th { background: #F2F2F7; padding: 6px 6px; position: static; }
.col-filter { width: 100%; min-width: 64px; height: 30px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 0 8px; font-size: 12.5px; font-weight: 600; }
.col-filter:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.js-col-filters.on { background: var(--ink); color: #fff; box-shadow: none; }

/* ---------- v6: Outlook-style archive of finished trips ---------- */
details.arch { background: rgba(255,255,255,.72); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
details.arch[open] { background: rgba(255,255,255,.45); }
details.arch > summary { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; border-radius: var(--r-md); user-select: none; }
details.arch > summary::-webkit-details-marker { display: none; }
details.arch > summary:hover { background: rgba(255,255,255,.9); }
.arch-chev { width: 8px; height: 8px; border-right: 2px solid var(--done-deep); border-bottom: 2px solid var(--done-deep); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
details.arch[open] > summary .arch-chev { transform: rotate(45deg); }
.arch-label { font-weight: 800; font-size: 14.5px; letter-spacing: -.01em; }
.arch-meta { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.arch-due { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--due-deep); border-radius: 999px; padding: 3px 9px; }
.arch-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 10px; }
.arch-recent > summary .arch-label { color: var(--done-deep); }
.imp-where { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--blue); }
span.imp-where { color: var(--muted); }

/* ---------- v7: month question ---------- */
.month-choices { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--fill); cursor: pointer; }
.choice:has(input:checked) { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.choice input { width: 20px; height: 20px; accent-color: var(--blue); flex-shrink: 0; }
.choice > span { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.choice small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.choice select { height: 40px; border: 0; border-radius: 10px; padding: 0 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; max-width: 240px; }
.customs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.customs-title { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.customs .customs-box { align-self: stretch; }
.customs-box .seg { align-self: flex-start; flex-wrap: wrap; border-radius: 16px; }
.choice[hidden] { display: none !important; }


/* ---------- v8: order button, alerts, order editor, company settings ---------- */
.card-foot { display: flex; gap: 8px; padding: 0 12px 12px; flex-wrap: wrap; }
.card-order { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.card-order:hover { background: var(--line); }
.card-order.has-order { background: var(--blue-soft); color: var(--prog-deep); }
/* "Trimite la șofer" on the card: sent → blue, seen by the driver → green */
.card-send { display: inline-flex; flex: 1 1 100%; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--inc-soft); color: var(--inc-deep); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.card-send:hover { filter: brightness(.97); }
.card-send.is-sent { background: var(--blue-soft); color: var(--prog-deep); }
.card-send.is-seen { background: var(--done-soft); color: var(--done-deep); }
span.card-send { cursor: default; }
.card-send[disabled] { opacity: .6; cursor: progress; }
.note-presets .tok { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.note-alert { display: flex; align-items: center; gap: 8px; background: #FFF4D6; color: #8A4B00; }

.alerts { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.alerts-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; }
.count-pill { font-size: 12px; font-weight: 800; color: #fff; background: #C2410C; border-radius: 999px; padding: 2px 8px; }
.alerts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.alert button { width: 100%; text-align: left; border: 0; cursor: pointer; border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.alert-soon button { background: #FFF4D6; color: #6B3A00; }
.alert-late button { background: var(--due-soft); color: var(--due-deep); }
.alert button small { color: inherit; opacity: .75; font-weight: 600; }
.alert button:hover { filter: brightness(.97); }

.order-form { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.add-stops { display: flex; gap: 8px; flex-wrap: wrap; }
.stops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.stop-card { --k: var(--prog); --k-soft: var(--prog-soft); background: var(--k-soft); border-radius: var(--r-lg); padding: 12px 14px 14px; }
.stop-card.t-vama { --k: var(--hold); --k-soft: var(--hold-soft); }
.stop-card.t-descarcare { --k: var(--done); --k-soft: var(--done-soft); }
.stop-card .field input { background: #fff; }
.stop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stop-type { height: 38px; border: 0; border-radius: 999px; padding: 0 14px; font-weight: 800; background: var(--k); color: #fff; }
.stop-type option { color: var(--ink); background: #fff; }
.goods { display: flex; flex-direction: column; gap: 12px; }
.pack { display: flex; gap: 18px; flex-wrap: wrap; }
.order-form textarea { width: 100%; border: 0; border-radius: var(--r-sm); background: var(--fill); padding: 12px 14px; font: inherit; resize: vertical; }
.order-form select { height: 46px; border: 0; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 0 12px; font-weight: 600; }
.order-form input:disabled, .order-form select:disabled, .order-form textarea:disabled { opacity: .75; }

.logo-row { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.logo-preview { width: 220px; height: 110px; border-radius: var(--r-md); background: var(--fill); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-weight: 600; }
.logo-preview img { max-width: 90%; max-height: 90%; }
.logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.settings textarea { width: 100%; border: 0; border-radius: var(--r-sm); background: var(--fill); padding: 12px 14px; font: inherit; resize: vertical; }
@media (max-width: 900px) {
  .stops-grid { grid-template-columns: 1fr; }
  .card-order, .card-act { flex-basis: 100%; }
}
.stop-main .badge-customs { align-self: flex-start; margin: 4px 0 0; }
.order-form select.stop-type { height: 38px; width: auto; box-shadow: none; border-radius: 999px; padding: 0 14px; font-weight: 800; background: var(--k); color: #fff; }

/* ---------- v10: larger, more formal, rectangular dialogs and order editor ---------- */
dialog.sheet { border-radius: 14px; }
dialog.sheet-wide { width: min(1200px, calc(100vw - 48px)); max-height: calc(100vh - 32px); }
dialog.sheet-wide form { max-height: calc(100vh - 32px); }
dialog.sheet-small { width: min(640px, calc(100vw - 32px)); }
dialog.sheet .sheet-head { padding: 16px 28px; background: #FAFAFB; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
dialog.sheet .sheet-head h2 { font-size: 20px; letter-spacing: -.02em; }
dialog.sheet .sheet-head .icon-btn { border-radius: 8px; }
dialog.sheet .sheet-body { padding: 22px 28px 24px; gap: 16px; background: #F5F5F7; }
dialog.sheet .sheet-foot { padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px)); background: #FAFAFB; border-radius: 0 0 14px 14px; }
dialog.sheet .btn, .order-form ~ * .btn, .page-head .btn { border-radius: 8px; }
dialog.sheet .btn { height: 42px; padding: 0 20px; }

/* trip form: sections side by side, like a desktop application */
#tripForm .sheet-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas:
  "client transport" "inc desc" "marfa bani" "altele altele" "err err"; align-items: start; align-content: start; grid-auto-rows: max-content; }
#tripForm .fs-client { grid-area: client; } #tripForm .fs-transport { grid-area: transport; }
#tripForm .fs-inc { grid-area: inc; } #tripForm .fs-desc { grid-area: desc; }
#tripForm .fs-marfa { grid-area: marfa; } #tripForm .fs-bani { grid-area: bani; }
#tripForm .fs-altele { grid-area: altele; } #tripForm .fs-sofer { grid-area: sofer; } #tripForm .form-error { grid-area: err; }
#tripForm .fs-transport .grid3, #tripForm .fs-bani .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

dialog.sheet .fs, .order-form .panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 18px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
dialog.sheet .fs + .fs { border-top: 1px solid var(--line); padding-top: 0; }
dialog.sheet .fs h3, .order-form .panel h2 { margin: 0 -18px 16px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--ink-2); background: #F7F7F9; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.order-form .panel.pad { padding: 0 18px 18px; }
.order-form .section-head { margin: 0 -18px 16px; padding: 7px 12px 7px 18px; background: #F7F7F9; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.order-form .section-head h2 { margin: 0; padding: 0; background: none; border: 0; }
dialog.sheet .field input, dialog.sheet .field select, dialog.sheet .field textarea,
.order-form .field input, .order-form select, .order-form textarea { height: 40px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #D8D8DE; font-size: 14.5px; }
dialog.sheet .field textarea, .order-form textarea { height: auto; }
dialog.sheet .field input:focus, dialog.sheet .field select:focus, dialog.sheet .field textarea:focus,
.order-form .field input:focus, .order-form select:focus, .order-form textarea:focus { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 3px rgba(0,113,227,.12); }
dialog.sheet .field label, dialog.sheet .field .label, .order-form .field .label { font-size: 12.5px; color: var(--muted); }
dialog.sheet .date-btn, .order-form .date-btn { width: 32px; height: 32px; border-radius: 6px; }
dialog.sheet .seg, .order-form .seg { border-radius: 8px; }
dialog.sheet .seg-opt span { border-radius: 6px; height: 32px; }
dialog.sheet .customs-box { border-radius: 8px; background: #FAFAFB; box-shadow: inset 0 0 0 1px var(--line); }
dialog.sheet .choice { border-radius: 8px; }
.profit-out { height: 40px; }

/* order editor */
.order-form { gap: 14px; }
.order-form .stop-card { border-radius: 8px; padding: 0 14px 14px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--k); }
.order-form .stop-head { margin: 0 -14px 12px; padding: 8px 10px 8px 14px; background: var(--k-soft); border-bottom: 1px solid var(--line); }
.order-form select.stop-type { border-radius: 6px; height: 32px; }
.order-form .stop-card .field input { background: #fff; }
.order-form .icon-btn { border-radius: 6px; }

@media (max-width: 900px) {
  dialog.sheet-wide { width: 100vw; max-height: 96vh; }
  #tripForm .sheet-body { grid-template-columns: 1fr; grid-template-areas: "client" "inc" "desc" "marfa" "bani" "transport" "altele" "err"; padding: 14px; }
  dialog.sheet, dialog.sheet .sheet-head { border-radius: 14px 14px 0 0; }
}
.order-form .btn { border-radius: 8px; }

/* ---------- v12: confirm dialog, danger buttons, agenda, email marks ---------- */
.btn-danger { background: var(--due-deep); color: #fff; }
.btn-danger:hover { background: #A30F31; }
dialog.confirm .sheet-body { background: #fff; }
.confirm-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.menu button.danger { color: var(--due-deep); }
.danger-zone { display: flex; justify-content: flex-end; }
.tabs { display: inline-flex; flex-wrap: wrap; border-radius: 10px; }
.seg-link { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.seg-link.on { background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.cell-input { width: 100%; min-width: 180px; height: 32px; border: 0; border-radius: 6px; padding: 0 8px; background: var(--fill); font: inherit; font-size: 13px; }
.cell-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); background: #fff; }
.sent-mark { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--done-deep); background: var(--done-soft); border-radius: 999px; padding: 2px 8px; }

/* ---------- v13: compact cards (default), expandable one by one ---------- */
.card .js-expand { display: none; }
.board.compact .card .js-expand { display: inline-flex; background: rgba(255,255,255,.7); }
.board.compact .card.open .js-expand svg { transform: rotate(180deg); }
.board.compact .card:not(.open) .card-head { padding: 6px 8px 6px 12px; }
.board.compact .card:not(.open) .state { font-size: 12px; }
.board.compact .card:not(.open) .amount { font-size: 14px; }
.board.compact .card:not(.open) .card-head .icon-btn { width: 28px; height: 28px; }
.board.compact .card:not(.open) .card-body { padding: 8px 12px 8px; gap: 6px; }
.board.compact .card:not(.open) .client { font-size: 15px; }
.board.compact .card:not(.open) .ref { font-size: 11.5px; padding: 1px 6px; }
.board.compact .card:not(.open) .chips,
.board.compact .card:not(.open) .truck,
.board.compact .card:not(.open) .note:not(.note-alert),
.board.compact .card:not(.open) .owner,
.board.compact .card:not(.open) .stop-main .badge-customs,
.board.compact .card:not(.open) .pin { display: none; }
.board.compact .card:not(.open) .stops { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.board.compact .card:not(.open) .stop { display: inline-flex; align-items: baseline; gap: 5px; padding: 0; grid-template-columns: none; }
.board.compact .card:not(.open) .stop::before { display: none; }
.board.compact .card:not(.open) .stop-end::before { display: inline; content: '→'; position: static; width: auto; background: none; color: var(--k); opacity: 1; font-weight: 800; }
.board.compact .card:not(.open) .stop-name { font-size: 13.5px; }
.board.compact .card:not(.open) .stop-when { font-size: 12px; font-weight: 600; color: var(--muted); }
.board.compact .card:not(.open) .note-alert { padding: 5px 9px; font-size: 12px; }
.board.compact .card:not(.open) .card-foot { padding: 0 8px 8px; gap: 6px; }
.board.compact .card:not(.open) .card-order,
.board.compact .card:not(.open) .card-act { height: 34px; font-size: 13px; padding: 0 10px; }
/* compact cards: "Trimite la șofer" is just its icon (the colour says sent / seen) */
.board.compact .card:not(.open) .card-send { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; }
.board.compact .card:not(.open) .card-send span { display: none; }
.board.compact .col-body { gap: 10px; }
.board.compact .card:not(.open) .stop-main:has(.stop-loc) .stop-name { display: none; }
.board.compact .card:not(.open) .stop-loc { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.import-box summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-box[open] summary { margin-bottom: 12px; }
.import-box select { max-width: 100%; }
.board.compact .card:not(.open) .card-foot { flex-wrap: nowrap; }
.board.compact .card:not(.open) .card-order { flex: 0 0 auto; }
.board.compact .card:not(.open) .card-order:not(.has-order) span { display: none; }
.board.compact .card:not(.open) .card-act { flex: 1 1 auto; min-width: 0; }
.order-form .field-break { grid-column: 2 / -1; }
@media (max-width: 900px) { .order-form .field-break { display: none; } }

/* ---------- v15: grid borders in the register, like a spreadsheet ---------- */
table.sheet { border-collapse: collapse; }
table.sheet th, table.sheet td { border: 1px solid #D5D5DC; }
table.sheet thead th { background: #F1F1F5; }
table.sheet tfoot td { border-top: 2px solid #B8B8C2; }
.sheet-panel .table-wrap { border-top: 1px solid #D5D5DC; }

/* ---------- v16: register as a spreadsheet: scroll box, sticky right columns, narrow client, cell editor ---------- */
.sheet-panel .table-wrap { max-height: calc(100vh - 150px); overflow: auto; }
table.sheet th { position: sticky; top: 0; z-index: 2; }
table.sheet .filter-row th { top: 38px; }
table.sheet .sticky-r { position: sticky; z-index: 1; background: #fff; }
table.sheet thead .sticky-r { z-index: 3; background: #F1F1F5; }
table.sheet tbody tr:hover td.sticky-r { background: #FAFAFD; }
table.sheet tr.is-inv td.sticky-r { background: #D9F5E1; }
table.sheet th.sticky-r:first-of-type, table.sheet td.sticky-r { box-shadow: inset 1px 0 0 #D5D5DC; }
table.sheet th.col-client, table.sheet td.col-client { width: 120px; max-width: 130px; }
table.sheet td.col-client .l1, table.sheet td.col-client .l2 { white-space: normal; overflow-wrap: anywhere; }
table.sheet.editable tbody td[data-f] { cursor: cell; }
table.sheet.editable tbody td[data-f]:hover { outline: 2px solid rgba(0,113,227,.35); outline-offset: -2px; }
.cell-editor { position: fixed; z-index: 1500; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 2px var(--blue), 0 12px 30px rgba(0,0,0,.2); }
.cell-editor label { display: flex; flex-direction: column; gap: 2px; }
.cell-editor label span { font-size: 11px; font-weight: 700; color: var(--muted); }
.cell-editor input, .cell-editor textarea { font: inherit; font-size: 13.5px; border: 0; border-radius: 5px; padding: 6px 8px; box-shadow: inset 0 0 0 1px #D8D8DE; outline: none; }
.cell-editor textarea { min-height: 70px; resize: vertical; }
.cell-editor input:focus, .cell-editor textarea:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.cell-editor small { font-size: 11px; color: var(--muted); }
.cell-editor.saving { opacity: .6; pointer-events: none; }
table.sheet#regTable { width: max-content; min-width: 100%; }
table.sheet th.col-client, table.sheet td.col-client { min-width: 125px; width: 125px; max-width: 140px; }
table.sheet td.col-client .l1, table.sheet td.col-client .l2 { overflow-wrap: break-word; word-break: normal; }

/* ---------- v16: order editor as a pop-up ---------- */
body.embed .side, body.embed .readonly-bar { display: none; }
body.embed .main { padding: 16px 20px 40px; }
body.embed .page-head h1 { font-size: 26px; }
dialog.sheet-frame { width: min(1300px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
dialog.sheet-frame:not([open]) { display: none; }
dialog.sheet-frame iframe { flex: 1; width: 100%; border: 0; background: var(--bg); border-radius: 0 0 14px 14px; }
.alert-info button { background: var(--prog-soft); color: var(--prog-deep); }

/* ---------- v16: map page ---------- */
.map-layout { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
.map-side { display: flex; flex-direction: column; gap: 12px; }
.map-side select, .map-side input { width: 100%; height: 42px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 10px; font: inherit; font-size: 14px; background: #fff; }
.map-box { overflow: hidden; min-height: 600px; }
#map { height: calc(100vh - 220px); min-height: 560px; width: 100%; }
.route-result { background: var(--blue-soft); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.route-km { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--prog-deep); }
.sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.batch-log { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); max-height: 220px; overflow: auto; }
.zones { display: flex; flex-direction: column; gap: 16px; }
.zone-frame { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.zone-frame iframe { width: 100%; height: 70vh; border: 0; display: block; }
.zone-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zone-cards p { margin: 0; line-height: 1.6; font-size: 14px; }
.zone-tag { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; color: #fff; font-weight: 800; margin-right: 8px; }
.zone-a .zone-tag { background: #D70015; }
.zone-b .zone-tag { background: #C25400; }
@media (max-width: 900px) { .map-layout, .zone-cards { grid-template-columns: 1fr; } #map { height: 60vh; } }
body.embed .page-head h1 { display: none; }

/* ---------- v17: cards pulse instead of a notifications panel ---------- */
.card.glow { --g: 10,132,255; animation: cardGlow 2.2s ease-in-out infinite; }
.card.glow-soon { --g: 255,149,0; }
.card.glow-late { --g: 255,55,95; }
@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(var(--g), .55), 0 0 10px 2px rgba(var(--g), .25), var(--shadow-card); }
  50% { box-shadow: 0 0 0 2.5px rgba(var(--g), .95), 0 0 24px 8px rgba(var(--g), .45), var(--shadow-card); }
}
@media (prefers-reduced-motion: reduce) { .card.glow { animation: none; box-shadow: 0 0 0 2.5px rgba(var(--g), .9), var(--shadow-card); } }
.chip-km { background: var(--blue-soft); color: var(--prog-deep); }
.board.compact .card:not(.open) .chips { display: flex; }
.board.compact .card:not(.open) .chips .chip:not(.chip-km):not(.km) { display: none; }
.glow-legend { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border-radius: 999px; padding: 7px 14px; }
.glow-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.glow-legend .lg { width: 10px; height: 10px; border-radius: 50%; animation: lgPulse 2.2s ease-in-out infinite; }
.lg-late { background: #FF375F; --g: 255,55,95; }
.lg-soon { background: #FF9500; --g: 255,149,0; }
.lg-info { background: #0A84FF; --g: 10,132,255; }
@keyframes lgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--g), .5); } 50% { box-shadow: 0 0 0 5px rgba(var(--g), 0); } }
@media (max-width: 900px) { .glow-legend { width: 100%; justify-content: center; } }
.card.glow-late .note-alert { background: var(--due-soft); color: var(--due-deep); }
.card.glow-info .note-alert { background: var(--prog-soft); color: var(--prog-deep); }
.zone-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zone-map img { width: 100%; height: auto; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); display: block; cursor: zoom-in; }
.zone-rules { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zone-rules li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.zone-tag.zt-a { background: #7B1FA2; }
.zone-tag.zt-b { background: #0B5345; }
.zone-tag.zt-free { background: #1C7A34; }
.zone-a .zone-tag, .zone-b .zone-tag { flex-shrink: 0; }
.zone-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.zone-info h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 800; }
.zone-mol summary { cursor: pointer; font-weight: 700; color: var(--blue); min-height: 34px; display: flex; align-items: center; }
.zone-mol ul { margin: 6px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.zone-fees { width: 100%; }
@media (max-width: 1000px) { .zone-top { grid-template-columns: 1fr; } }
.zone-rules .zone-tag { flex: 0 0 30px; margin-right: 0; }

/* ---------- v18: register row colors by progress ---------- */
/* programata with truck/driver assigned (solved, not loaded) */
table.sheet tr.is-ready td, table.sheet tr.is-ready td.sticky-r { background: #EEF5FF; }
/* loaded / in progress */
table.sheet tr.row-incarcata td, table.sheet tr.row-incarcata td.sticky-r { background: #FFF4E5; }
/* finished: very light green */
table.sheet tr.row-defacturat td, table.sheet tr.row-defacturat td.sticky-r,
table.sheet tr.row-facturata td, table.sheet tr.row-facturata td.sticky-r { background: #F0FAF2; }
/* sent to invoicing: stronger green on the whole row */
table.sheet tr.is-inv td, table.sheet tr.is-inv td.sticky-r,
table.sheet tr.is-inv td:not(:first-child) { background: #CDEFD7; }
/* invoiced and confirmed: strongest green */
table.sheet tr.is-inv.is-conf td, table.sheet tr.is-inv.is-conf td.sticky-r { background: #A9E2BA; }
/* confirmed only: mark the first cell */
table.sheet tr.is-conf:not(.is-inv) td:first-child { background: #CDEFD7; }
table.sheet tbody tr:hover td { filter: brightness(.98); }
.row-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.row-legend span { display: inline-flex; align-items: center; gap: 5px; }
.row-legend i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- v20: EUR amounts, money fields with currency ---------- */
.money-wrap { display: flex; gap: 6px; }
.money-wrap input { flex: 1; min-width: 0; }
.money-wrap .cur-sel { flex: 0 0 76px; height: 46px; border: 0; border-radius: 10px; background: var(--fill); font: inherit; font-weight: 700; padding: 0 8px; }
.fx-hint { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--prog-deep); }
table.sheet td.is-eur::after { content: '€'; display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 800; color: #fff; background: var(--blue); border-radius: 4px; padding: 0 4px; vertical-align: 1px; }

/* ---------- v20: colors from Settings ---------- */
.card.s-programata .card-head { background: var(--c-card-prog, #E8F2FF); }
.card.s-programata .card-body { background: var(--c-card-prog-body, #fff); }
.card.s-incarcata .card-head { background: var(--c-card-load, #FFF1DE); }
.card.s-incarcata .card-body { background: var(--c-card-load-body, #fff); }
table.sheet tr.is-ready td, table.sheet tr.is-ready td.sticky-r { background: var(--c-reg-ready, #EEF5FF); }
table.sheet tr.row-incarcata td, table.sheet tr.row-incarcata td.sticky-r { background: var(--c-reg-load, #FFF4E5); }
table.sheet tr.row-defacturat td, table.sheet tr.row-defacturat td.sticky-r,
table.sheet tr.row-facturata td, table.sheet tr.row-facturata td.sticky-r { background: var(--c-reg-done, #F0FAF2); }
table.sheet tr.is-inv td, table.sheet tr.is-inv td.sticky-r, table.sheet tr.is-inv td:not(:first-child) { background: var(--c-reg-inv, #CDEFD7); }
table.sheet tr.is-inv.is-conf td, table.sheet tr.is-inv.is-conf td.sticky-r { background: var(--c-reg-conf, #A9E2BA); }
table.sheet tr.is-conf:not(.is-inv) td:first-child { background: var(--c-reg-inv, #CDEFD7); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.theme-item { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: center; background: var(--fill); border-radius: 12px; padding: 12px; }
.theme-item input[type=color] { width: 44px; height: 44px; border: 0; border-radius: 10px; padding: 0; background: none; cursor: pointer; grid-row: span 2; }
.theme-item strong { font-size: 14px; }
.theme-item .range-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.theme-item input[type=range] { flex: 1; accent-color: var(--blue); }
.theme-item .swatch { grid-column: 1 / -1; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.track-box { overflow: hidden; }
.track-box iframe { display: block; width: 100%; height: calc(100vh - 190px); min-height: 520px; border: 0; }

/* ---------- v21: one color per stage, shared by cards and register ---------- */
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.theme-item { display: flex; flex-direction: column; gap: 10px; grid-template-columns: none; }
.theme-top { display: flex; flex-direction: column; gap: 2px; }
.theme-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.preset { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); padding: 0; position: relative; }
.preset.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.preset.custom { width: auto; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; background: #fff; font-size: 12px; font-weight: 700; }
.preset.custom input[type=color] { width: 22px; height: 22px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.theme-item .range-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.theme-preview { display: flex; gap: 10px; align-items: stretch; }
.pv-card { display: flex; flex-direction: column; width: 90px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.pv-card i { display: block; }
.pv-head { height: 14px; }
.pv-body { height: 26px; }
.pv-row { flex: 1; display: grid; grid-template-columns: 1fr 2fr 2fr 2fr; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); min-height: 40px; }
.pv-row i { border-right: 1px solid rgba(0,0,0,.08); background: #fff; }

/* cards */
.card.s-programata .card-head { background: var(--t-prog_none); }
.card.s-programata .card-body { background: var(--t-prog_none-soft); }
.card.s-programata.ready .card-head { background: var(--t-prog_truck); }
.card.s-programata.ready .card-body { background: var(--t-prog_truck-soft); }
.card.s-incarcata .card-head { background: var(--t-loaded); }
.card.s-incarcata .card-body { background: var(--t-loaded-soft); }
.card.s-defacturat .card-head, .card.s-facturata .card-head { background: var(--t-done); }
.card.s-defacturat .card-body, .card.s-facturata .card-body { background: var(--t-done-soft); }

/* register: stage color on the row; invoicing on all but the first cell; confirmation on the first cell */
#regTable tbody tr.row-programata td { background: var(--t-prog_none); }
#regTable tbody tr.row-programata.is-ready td { background: var(--t-prog_truck); }
#regTable tbody tr.row-incarcata td { background: var(--t-loaded); }
#regTable tbody tr.row-defacturat td, #regTable tbody tr.row-facturata td { background: var(--t-done); }
#regTable tbody tr.is-inv td:not(:first-child) { background: var(--t-inv); }
#regTable tbody tr.is-conf td:first-child { background: var(--t-conf); }
#regTable tbody tr td.sticky-r { background-clip: padding-box; }
.cron-box { background: var(--fill); border-radius: 12px; padding: 14px 16px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.cron-box h3 { margin: 0 0 4px; font-size: 15px; }
.cron-box ol { margin: 0 0 6px; padding-left: 18px; line-height: 1.6; }
.copy-line { display: flex; gap: 8px; align-items: center; }
.copy-line code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: #fff; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); }
.theme-item { align-items: stretch; text-align: left; justify-items: stretch; }
.theme-item > * { align-self: stretch; }
.theme-top { align-items: flex-start; }
.theme-presets { justify-content: flex-start; }
.theme-preview { width: 100%; }
.pv-row { flex: 1 1 auto; min-width: 160px; }
.gps-info p { max-width: 760px; line-height: 1.6; }

/* ---------- v21: missing budget / cost stay red until filled ---------- */
#regTable tbody td[data-f="buget"]:empty,
#regTable tbody td[data-f="cost"]:empty { background: #FFD6DC !important; box-shadow: inset 0 0 0 1.5px #FF375F; }
#regTable tbody td[data-f="buget"]:empty::before,
#regTable tbody td[data-f="cost"]:empty::before { content: 'lipsă'; font-size: 11px; font-weight: 700; color: #C0143C; }

/* ---------- v22: extra legs and costs ---------- */
.extras-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; background: var(--fill); border-radius: 12px; padding: 12px; }
.extras-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.extras-list { display: flex; flex-direction: column; gap: 8px; }
.extra-row { display: grid; grid-template-columns: 150px 1fr 1.3fr 1fr 1.4fr 100px 76px 36px; gap: 6px; align-items: center; background: #fff; border-radius: 10px; padding: 8px; }
.extra-row input, .extra-row select { height: 38px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 8px; font: inherit; font-size: 13.5px; min-width: 0; background: #fff; }
.extra-row input:disabled, .extra-row select:disabled { background: var(--fill); color: var(--ink-2); }
.extra-from { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--prog-deep); }
@media (max-width: 900px) { .extra-row { grid-template-columns: 1fr 1fr; } .extra-row .js-extra-del { justify-self: end; } }
.n-orders { display: inline-block; margin-left: 4px; font-size: 11px; background: var(--blue); color: #fff; border-radius: 999px; padding: 0 6px; }
.mini-ref { margin-left: 6px; font-weight: 700; color: var(--blue); text-decoration: none; }
.mini-ref.on { color: var(--ink); text-decoration: underline; }
table.sheet td.has-extra::before { content: '+'; display: inline-block; margin-right: 4px; font-size: 10px; font-weight: 800; color: #fff; background: #AF52DE; border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.bonus-months { margin-bottom: 16px; }

/* ---------- v22: register on phones: no pinned columns, everything scrolls ---------- */
@media (max-width: 900px) {
  #regTable .sticky-r { position: static !important; box-shadow: none !important; }
  .sheet-panel .table-wrap { max-height: none; -webkit-overflow-scrolling: touch; }
  table.sheet#regTable { font-size: 13px; }
  table.sheet#regTable th, table.sheet#regTable td { padding: 8px 8px; }
  table.sheet#regTable th { position: static; }
  .row-legend { display: none; }
}
.extra-row { grid-template-columns: 1.3fr 1fr 1fr 90px 76px 36px; }
.extra-row [data-k=tip] { grid-row: 1; grid-column: 1; }
.extra-row [data-k=descriere] { grid-row: 1; grid-column: 2 / 4; }
.extra-row [data-k=suma] { grid-row: 1; grid-column: 4; }
.extra-row [data-k=moneda] { grid-row: 1; grid-column: 5; }
.extra-row .js-extra-del { grid-row: 1; grid-column: 6; }
.extra-row [data-k=nr_auto] { grid-row: 2; grid-column: 1; }
.extra-row [data-k=transportator] { grid-row: 2; grid-column: 2; }
.extra-row [data-k=sofer] { grid-row: 2; grid-column: 3 / 7; }
.extra-row .extra-from { grid-row: 3; }
@media (max-width: 900px) {
  .extra-row { grid-template-columns: 1fr 1fr; }
  .extra-row > * { grid-row: auto !important; grid-column: auto !important; }
}
table.sheet td.comment { white-space: pre-line; }

/* ===== FIX: animații ușoare (nu mai încarcă placa video / Windows) ===== */
.card.glow { animation: none !important; position: relative; box-shadow: 0 0 0 2px rgba(var(--g), .85), var(--shadow-card) !important; }
.card.glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 3px rgb(var(--g)), inset 0 0 16px rgba(var(--g), .35); opacity: 0; will-change: opacity; animation: kGlowSoft 2.4s ease-in-out infinite; }
@keyframes kGlowSoft { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.glow-legend .lg { animation: kGlowSoft 2.4s ease-in-out infinite !important; box-shadow: none !important; }
table.sheet tbody tr:hover td { filter: none !important; }
@media (prefers-reduced-motion: reduce) { .card.glow::after { animation: none; opacity: 1; } }

/* ---------- platform panel (master admin) ---------- */
body.platform { background: var(--bg); }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; background: var(--surface); box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 5; }
.pl-user { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pl-main { max-width: 1280px; margin: 0 auto; padding: 24px 28px 60px; display: flex; flex-direction: column; gap: 16px; }
.pl-main .inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-main .inline-form select { height: 32px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 8px; font: inherit; font-size: 13px; background: #fff; }

/* ---------- fleet, employees, documents ---------- */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FF375F; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.nav-link { display: flex; align-items: center; }
.tab-count { margin-left: 6px; background: #FF375F; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.doc-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.doc-expired { background: #FFD6DC; color: #B0102F; }
.doc-urgent { background: #FFE4CC; color: #A34700; }
.doc-soon { background: #FFF3C4; color: #7A5A00; }
.doc-ok { background: #DDF5E3; color: #1C7A34; }
.doc-none { background: var(--fill); color: var(--muted); }
.doc-row-expired td:first-child { box-shadow: inset 4px 0 0 #FF375F; }
.doc-row-urgent td:first-child { box-shadow: inset 4px 0 0 #FF9500; }
.kpi-red .kpi-value { color: #D70015; }
.kpi-orange .kpi-value { color: #C25400; }
.detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.detail-head h2 { margin: 0 0 4px; font-size: 24px; }
.detail-head p { margin: 4px 0; }
.hist { margin: 0; padding-left: 18px; line-height: 1.8; }
.assign-form select { height: 46px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; }
dialog.sheet select { min-width: 0; }
.doc-row td.nowrap { white-space: nowrap; }
.doc-row td .inline-form { display: inline-flex; vertical-align: middle; margin: 0; }
.doc-row td .btn-sm { vertical-align: middle; }

/* ---------- extras billed to the client / paid to the carrier ---------- */
.extras-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dir-chip { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; color: #fff; }
.dir-chip.dir-venit { background: #1C7A34; }
.dir-chip.dir-cost { background: #C25400; }
.extra-row { grid-template-columns: 60px 1.3fr 1fr 1fr 90px 76px 36px !important; }
.extra-row .js-dir-chip { grid-row: 1; grid-column: 1; align-self: center; }
.extra-row [data-k=tip] { grid-column: 2 !important; }
.extra-row [data-k=descriere] { grid-column: 3 / 5 !important; }
.extra-row [data-k=suma] { grid-column: 5 !important; }
.extra-row [data-k=moneda] { grid-column: 6 !important; }
.extra-row .js-extra-del { grid-column: 7 !important; }
.extra-row [data-k=nr_auto] { grid-column: 2 !important; }
.extra-row [data-k=transportator] { grid-column: 3 !important; }
.extra-row [data-k=sofer] { grid-column: 4 / 8 !important; }
.extra-row.dir-venit { box-shadow: inset 4px 0 0 #34C759; }
.extra-row.dir-cost { box-shadow: inset 4px 0 0 #FF9500; }
table.sheet td.has-extra-v::before { background: #1C7A34; }
@media (max-width: 900px) { .extra-row { grid-template-columns: 1fr 1fr !important; } }

/* ---------- Flotă / Angajați: sync box, reminder settings, driver days ---------- */
.sync-now { display: flex; align-items: center; gap: 14px; background: #E9F8EE; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.sync-now > div { flex: 1; min-width: 200px; }
.sync-dot { width: 12px; height: 12px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 4px rgba(52,199,89,.2); }
.sync-form select { height: 46px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; width: 100%; }
.notify-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.notify-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--fill); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.notify-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--muted); }
.notify-in input { width: 64px; height: 34px; border: 0; border-radius: 8px; text-align: right; padding: 0 8px; font: inherit; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.trips-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.trips-head input[type=month] { height: 38px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; }
.driver-days th.dd-date { width: 120px; vertical-align: top; text-align: left; white-space: nowrap; }
.driver-days td { vertical-align: top; }
.dd-trip { padding: 6px 0; border-bottom: 1px dashed var(--line); font-weight: 600; }
.dd-trip:last-child { border-bottom: 0; }
.perm-form { display: flex; gap: 8px; flex-wrap: wrap; }
.perm-form select { height: 30px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; font: inherit; font-size: 12.5px; padding: 0 6px; }

/* several trucks / carriers on one trip: one per line, aligned */
table.sheet td.legs { white-space: pre-line; }

/* ===================== Flotă / Angajați: design ===================== */
.table-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.table-tools input[type=search] { flex: 1 1 260px; height: 40px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 14px; font: inherit; }
.table-tools select { height: 40px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; font-size: 14px; }
.table-tools .check { margin: 0; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: '⇅'; margin-left: 5px; opacity: .3; font-size: 11px; }
th.sortable[data-dir=asc]::after { content: '▲'; opacity: .8; }
th.sortable[data-dir=desc]::after { content: '▼'; opacity: .8; }
.fleet-table td, .fleet-table th { white-space: nowrap; }
.doc-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.doc-cell-expired { background: #FFE3E7 !important; color: #B0102F; }
.doc-cell-urgent { background: #FFEBD6 !important; color: #A34700; }
.doc-cell-soon { background: #FFF6D1 !important; color: #7A5A00; }
.doc-cell-ok { color: #1C7A34; }
.warn-ic { display: inline-block; margin-right: 4px; animation: warnPulse 1.6s ease-in-out infinite; }
@keyframes warnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .warn-ic { animation: none; } }
.tag-towed { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #6E6E73; background: var(--fill); border-radius: 6px; padding: 2px 6px; margin-left: 4px; }
.couple-now { background: #EEF4FF; }
.couple-now .sync-dot { background: #0A84FF; box-shadow: 0 0 0 4px rgba(10,132,255,.2); }
/* monthly report: one column per driver / vehicle, one row per day */
.report-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.report-filters .field { margin: 0; }
.report-filters input[type=month] { height: 42px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; }
.report-filters select.multi { min-width: 260px; border: 0; border-radius: 10px; background: var(--fill); padding: 6px; font: inherit; font-size: 13px; }
.report-wrap { overflow: auto; max-height: calc(100vh - 240px); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-card); }
table.report { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
table.report th, table.report td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: top; }
table.report thead th { position: sticky; background: #FDE7EA; z-index: 2; text-align: center; font-size: 14px; font-weight: 800; min-width: 210px; }
table.report thead tr.r-note th { top: 0; background: #FFF59D; font-size: 12px; font-weight: 700; cursor: default; }
table.report thead tr.r-note th.js-col-note { cursor: pointer; }
table.report thead tr.r-name th { top: 30px; }
table.report thead th small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
table.report .r-day { position: sticky; left: 0; z-index: 1; background: #FDE7EA; min-width: 54px; width: 54px; text-align: center; font-weight: 800; font-size: 14px; }
table.report thead .r-day { z-index: 3; }
table.report .r-day small { display: block; font-size: 10px; color: var(--muted); }
table.report tr.we td { background: #FAFAFC; }
table.report tr.today .r-day { background: #0A84FF; color: #fff; }
table.report td.r-cell { min-width: 210px; height: 46px; background: #EDEDED; }
table.report td.js-day { cursor: pointer; }
table.report td.js-day:hover { outline: 2px solid #0A84FF; outline-offset: -2px; }
table.report td.st-lucru { background: #fff; }
table.report td.st-ore { background: #FFF59D; }
table.report td.st-concediu { background: #A5D6A7; }
table.report td.st-liber { background: #B2EBF2; }
table.report td.st-medical { background: #E1BEE7; }
table.report td.st-reparatie, table.report td.st-service { background: #90CAF9; }
table.report td.st-lipsa { background: #EF9A9A; }
.r-st { display: block; font-weight: 800; text-transform: uppercase; font-size: 11px; text-align: center; margin-bottom: 2px; }
.r-trip { display: block; font-weight: 600; line-height: 1.35; }
.r-trip + .r-trip { margin-top: 3px; padding-top: 3px; border-top: 1px dashed rgba(0,0,0,.12); }
.r-nota { display: block; font-style: italic; color: #4A4A4F; margin-top: 2px; }
/* daily alert pop-up */
.fleet-pop { max-width: 620px; }
.pop-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.pop-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fill); font-size: 14px; }
.pop-list li a { color: inherit; text-decoration: none; }
.pop-list li span { font-weight: 700; white-space: nowrap; }
.pop-expired { background: #FFE3E7 !important; } .pop-expired span { color: #B0102F; }
.pop-urgent { background: #FFEBD6 !important; } .pop-urgent span { color: #A34700; }
.pop-soon { background: #FFF6D1 !important; }
@media print {
  .sidebar, .page-head .head-actions, .seg.tabs, .report-head, .bottom-nav { display: none !important; }
  .report-wrap { max-height: none; overflow: visible; box-shadow: none; }
  table.report { font-size: 9px; }
}

/* ===================== Raport șoferi ===================== */
.month-in { height: 40px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; font-weight: 700; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.rp-chip { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: default; }
button.rp-chip { cursor: pointer; }
button.rp-chip.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.rp-wrap { overflow: auto; max-height: calc(100vh - 220px); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); }
table.rp { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
table.rp th, table.rp td { border-right: 1px solid #D9D9DE; border-bottom: 1px solid #D9D9DE; padding: 6px 8px; vertical-align: top; }
table.rp thead th, table.rp thead td { position: sticky; z-index: 2; }
table.rp .rp-day { position: sticky; left: 0; z-index: 1; width: 62px; min-width: 62px; background: #F6D5DA; text-align: center; font-weight: 800; font-size: 14px; color: #3A1F25; }
table.rp thead .rp-day { z-index: 3; }
table.rp .rp-day small { display: block; font-size: 10px; font-weight: 700; color: #8A5A62; }
table.rp .rp-lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-align: left; line-height: 1.25; }
table.rp tr.rp-top td { background: #FFF3A0; font-weight: 800; text-align: center; font-size: 12px; height: 34px; }
table.rp tr.rp-veh th { background: #E7EEFF; color: #1E3A8A; font-weight: 800; font-size: 13px; height: 34px; }
table.rp tr.rp-veh th small, table.rp tr.rp-name th small { display: block; font-size: 10.5px; font-weight: 600; color: #6E6E73; }
table.rp tr.rp-name th { background: #F6D5DA; font-size: 17px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; height: 44px; }
table.rp tr.rp-sub th { background: #FBE9EC; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #5B3A40; height: 34px; }
table.rp .rp-first, table.rp tr.rp-name th, table.rp tr.rp-veh th, table.rp tr.rp-top td, table.rp tfoot td { border-left: 2px solid #B9B9C0; }
table.rp td.rp-c { min-width: 150px; max-width: 320px; background: #fff; white-space: normal; line-height: 1.4; }
table.rp td.rp-c[data-type=jobs] { min-width: 230px; font-weight: 600; }
table.rp td.rp-c[data-type=date] { min-width: 90px; color: var(--muted); }
table.rp td.rp-auto { color: #23305A; }
table.rp td.rp-auto[data-type=jobs] .rp-t::before { content: 'auto'; float: right; font-size: 9px; font-weight: 800; text-transform: uppercase; color: #8E8E93; background: var(--fill); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
table.rp[data-edit="1"] td.rp-c { cursor: text; }
table.rp[data-edit="1"] td.rp-c:hover { box-shadow: inset 0 0 0 2px rgba(10,132,255,.45); }
table.rp td.rp-c.editing { box-shadow: inset 0 0 0 2px #0A84FF; }
table.rp td.rp-saved { animation: rpSaved .9s ease; }
@keyframes rpSaved { 0% { background: #D1F2DB; } 100% { } }
/* weekend: hatched */
table.rp tr.rp-weekend td.rp-c:not([class*="st-"]) { background: repeating-linear-gradient(135deg, #F3F3F6 0 7px, #E6E6EB 7px 14px); }
table.rp tr.rp-weekend .rp-day { background: repeating-linear-gradient(135deg, #F1C6CD 0 7px, #E9B5BE 7px 14px); }
table.rp tr.rp-today .rp-day { background: #0A84FF; color: #fff; }
table.rp tr.rp-today .rp-day small { color: #DCEBFF; }
table.rp .rp-st { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; text-align: center; margin-bottom: 3px; }
table.rp tfoot td { background: #F0F7FF; height: 40px; }
table.rp tfoot th { background: #DCEBFF; }
/* day status colours (also used by the chips) */
.st-lucru { background: #fff !important; }
.st-ore { background: #FFF59D !important; }
.st-concediu { background: #A5D6A7 !important; }
.st-liber { background: #B2EBF2 !important; }
.st-medical { background: #E1BEE7 !important; }
.st-reparatie, .st-service { background: #90CAF9 !important; }
.st-lipsa { background: #EF9A9A !important; }
.rp-we { background: repeating-linear-gradient(135deg, #F3F3F6 0 5px, #E2E2E8 5px 10px) !important; }
/* the floating editor */
.rp-editor { position: fixed; z-index: 50; width: 340px; background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rp-editor[hidden] { display: none; }
.rp-ed-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.rp-ed-status { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rp-ed-status .st-none { background: var(--fill); }
.rp-editor textarea { width: 100%; min-height: 96px; border: 0; border-radius: 10px; background: var(--fill); padding: 10px; font: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.rp-ed-foot { display: flex; align-items: center; gap: 8px; }
/* layout editor */
.lay-sec { margin-bottom: 16px; }
.lay-sec h3 { font-size: 14px; margin: 0 0 8px; }
.lay-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.lay-row { display: flex; gap: 6px; align-items: center; }
.lay-row input { flex: 1; height: 38px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; }
.lay-row select { height: 38px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 8px; font: inherit; font-size: 13px; }
.lay-drivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
@media print {
  .sidebar, .page-head .head-actions, .rp-legend, .bottom-nav, .rp-editor { display: none !important; }
  .rp-wrap { max-height: none; overflow: visible; box-shadow: none; }
  table.rp { font-size: 8.5px; }
  table.rp thead th, table.rp thead td, table.rp .rp-day { position: static; }
}

/* ===================== Alert pop-up (scadențe) ===================== */
dialog.alert-card { width: min(680px, 94vw); padding: 0; border: 2px solid #FF453A; border-radius: 18px; box-shadow: 0 0 0 6px rgba(255,69,58,.12), 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
dialog.alert-card::backdrop { background: rgba(10,12,20,.55); backdrop-filter: blur(6px); }
.al-head { display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: #FFE5E7; border-bottom: 1px solid #FFC9CE; }
.al-head h2 { margin: 0; font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: #1D1D1F; }
.al-head p { margin: 2px 0 0; font-size: 13px; color: #E0525A; }
.al-ic { font-size: 30px; color: #FF3B30; animation: warnPulse 1.4s ease-in-out infinite; }
.al-body { padding: 14px 20px; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.al-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit; background: #FFF4F5; box-shadow: inset 0 0 0 1px #FFD3D7; }
.al-item:hover { box-shadow: inset 0 0 0 2px #FF8A90; }
.al-item strong { display: block; font-size: 15px; }
.al-item span { font-size: 13px; color: #4A4A4F; }
.al-item.al-soon { background: #FFFBEA; box-shadow: inset 0 0 0 1px #F5E3A3; }
.al-badge { font-size: 11px; font-weight: 900; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.al-crit { color: #D70015; background: #FFE1E4; box-shadow: inset 0 0 0 1px #FF9AA3; }
.al-warn { color: #A05A00; background: #FFF0CF; box-shadow: inset 0 0 0 1px #F2C46B; }
.al-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: #F5F5F7; border-top: 1px solid #E5E5EA; flex-wrap: wrap; }
.al-note { font-size: 12px; font-weight: 700; color: #C77C00; }

/* quick edits in the vehicles table */
td.quick-cell.js-q-driver, td.quick-cell.js-q-status { cursor: pointer; }
td.js-q-driver:hover, td.js-q-status:hover { box-shadow: inset 0 0 0 2px rgba(10,132,255,.4); border-radius: 8px; }
.q-link { margin-right: 6px; opacity: .55; font-size: 13px; }
td.js-q-driver:hover .q-link { opacity: 1; }
.st-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.st-pill.st-activ { background: #DDF5E3 !important; color: #1C7A34; }
.st-pill.st-service { background: #DCEBFF !important; color: #0B5BD3; }
.st-pill.st-inactiv { background: #EDEDF0 !important; color: #6E6E73; }
.q-pop { position: fixed; z-index: 60; width: 300px; max-height: 360px; overflow: auto; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 4px; }
.q-title { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); padding: 4px 6px; }
.q-pop input { height: 36px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; margin-bottom: 4px; }
.q-list { display: flex; flex-direction: column; gap: 2px; }
.q-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 7px 10px; font: inherit; cursor: pointer; }
.q-opt:hover:not([disabled]) { background: var(--fill); }
.q-opt.on { background: #EAF2FF; }
.q-opt small { font-size: 11.5px; color: var(--muted); }
.q-opt[disabled] { opacity: .45; cursor: not-allowed; }
.q-unlink { color: #D70015; font-weight: 700; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }

/* ===================== Pontaj & concedii ===================== */
.pj-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pj-chip { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); background: #fff; }
.pj-wrap { overflow: auto; max-height: calc(100vh - 300px); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); }
table.pj { border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.pj th, table.pj td { border-right: 1px solid #DCDCE1; border-bottom: 1px solid #DCDCE1; padding: 5px 4px; text-align: center; }
table.pj thead th { position: sticky; top: 0; z-index: 2; background: #F4F4F7; font-weight: 800; min-width: 34px; }
table.pj thead th small, table.pj .pj-name small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }
table.pj .pj-name { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; min-width: 190px; padding: 6px 10px; font-weight: 800; font-size: 13px; }
table.pj thead .pj-name { z-index: 3; background: #F4F4F7; }
table.pj td.pj-c { min-width: 34px; height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.pj[data-edit="1"] td.pj-c { cursor: cell; }
table.pj[data-edit="1"] td.pj-c:hover { box-shadow: inset 0 0 0 2px rgba(10,132,255,.45); }
table.pj td.src-auto { color: #5A5A60; }
table.pj td.src-manual { color: #0B5BD3; text-decoration: underline dotted; }
table.pj .pj-t { background: #F7F7FA; font-weight: 800; min-width: 58px; }
table.pj thead .pj-t { z-index: 2; }
.pj-in { width: 44px; height: 26px; border: 0; border-radius: 6px; text-align: center; font: inherit; font-weight: 800; box-shadow: 0 0 0 2px #0A84FF; }
.input-xs { width: 64px; height: 32px; border: 0; border-radius: 8px; background: var(--fill); text-align: center; font: inherit; font-weight: 700; }
.co-rest { font-weight: 800; color: #1C7A34; }
.co-rest.low { color: #C25400; }
.co-rest.neg { color: #D70015; }
.abs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.abs-type { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-size: 13px; }
.abs-type input { accent-color: #1D1D1F; }
.abs-type b { min-width: 30px; }
.abs-type:has(input:checked) { box-shadow: 0 0 0 2px #1D1D1F; }
.abs-count { padding: 12px 14px; border-radius: 12px; background: var(--fill); font-size: 14px; }
.abs-count.ok { background: #E9F8EE; }
.abs-count.ok b { font-size: 20px; color: #1C7A34; }
.abs-count span { color: var(--muted); font-size: 12.5px; }
.abs-count.err { background: #FFE3E7; color: #B0102F; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.color-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--fill); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.color-item input[type=color] { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; }
.color-prev { width: 44px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.fd-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fd-row { display: flex; gap: 6px; }
.fd-row input { height: 38px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; }
.fd-row input:first-child { width: 140px; }
.fd-row input:nth-child(2) { flex: 1; }
/* report: selected cell, holiday tag, optional day mark */
table.rp td.rp-c.sel { box-shadow: inset 0 0 0 2px #0A84FF; }
table.rp[data-edit="1"] td.rp-c { cursor: cell; }
table.rp[data-edit="1"] td.rp-c:hover { box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }
.rp-sl { color: #A3263A; font-size: 10px; }
.rp-ed-more { font-size: 12.5px; }
.rp-ed-more summary { cursor: pointer; color: var(--muted); font-weight: 700; padding: 2px 0; }
.rp-ed-more .rp-ed-status { margin-top: 6px; }
table.rp tr.rp-weekend td.rp-c:not([class*="st-"]):not([class*="ab-"]) { background: none; }
@media print { .pj-legend, .report-filters { display: none !important; } .pj-wrap { max-height: none; overflow: visible; } table.pj { font-size: 8px; } }
.q-unsync { margin-left: 8px; border: 0; background: #FFE3E7; color: #D70015; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 900; cursor: pointer; opacity: .65; vertical-align: middle; }
.q-unsync:hover { opacity: 1; }
td.js-doc-cell { cursor: pointer; }
td.js-doc-cell:hover { box-shadow: inset 0 0 0 2px rgba(10,132,255,.45); border-radius: 6px; }

/* 12-month calendar */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cal-month { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 12px 14px 14px; }
.cal-month h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; text-transform: capitalize; }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow span { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; }
.cal-d { position: relative; height: 32px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #F7F7FA; }
.cal-d b { font-size: 8.5px; line-height: 1; letter-spacing: .02em; }
.cal-d.marked { color: #1D1D1F; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cal-d.today { box-shadow: 0 0 0 2px #0A84FF; }
.cal-pad { height: 32px; }
.d-block { display: block; }
.kpi-value.neg { color: #D70015; }
.btn.on { box-shadow: 0 0 0 2px var(--ink); }
@media print { .cal-grid { grid-template-columns: repeat(4, 1fr); } .cal-month { box-shadow: none; border: 1px solid #ddd; } }
.date-wrap-auto { position: relative; display: flex; align-items: center; }
.date-wrap-auto input[data-date] { flex: 1; min-width: 0; padding-right: 38px; }
.date-wrap-auto .date-btn { position: absolute; right: 4px; }

/* modules & rights */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mod-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--fill); cursor: pointer; }
.mod-item input { margin-top: 3px; width: 18px; height: 18px; accent-color: #0A84FF; }
.mod-item strong { display: block; font-size: 14px; }
.mod-item small { display: block; font-size: 12px; color: var(--muted); }
.mod-item:has(input:checked) { background: #EAF2FF; box-shadow: inset 0 0 0 1px #9CC3FF; }
.perm-matrix th { white-space: nowrap; font-size: 12px; }
.perm-matrix select.pm { height: 30px; border: 0; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 6px; }
.pm-none { background: #F2F2F5; color: #8E8E93; }
.pm-view { background: #EAF2FF; color: #0B5BD3; }
.pm-edit { background: #E3F6E8; color: #1C7A34; }

/* ===================== Facturi ===================== */
.soon-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: #0B5BD3; background: #EAF2FF; border-radius: 6px; padding: 2px 7px; }
.inv-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-sm .seg-link { padding: 6px 12px; font-size: 13px; }
.seg-sm .seg-link b { margin-left: 4px; font-size: 11px; background: rgba(0,0,0,.07); border-radius: 999px; padding: 1px 7px; }
.seg-sm .seg-link.warn b { background: #FF375F; color: #fff; }
.inv-table td { vertical-align: middle; }
.inv-table tr.inv-late td { background: #FFF5F6; }
.inv-table tr.inv-paid td { background: #F3FBF5; }
.inv-table td.late { color: #D70015; font-weight: 800; }
.late-pill { font-size: 11.5px; font-weight: 800; color: #D70015; background: #FFE3E7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.inv-sum { text-align: right; font-size: 14px; background: #F7F7FA; padding: 12px 14px !important; }
.inv-sum strong { margin-left: 8px; font-size: 16px; }
.cols-list { display: flex; flex-direction: column; gap: 6px; }

/* ===================== smooth drag & drop on the board ===================== */
.drag-ghost { position: fixed !important; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: 0 !important; will-change: transform; opacity: .98; box-shadow: 0 6px 14px rgba(0,0,0,.12) !important; transition: box-shadow .18s; }
.drag-ghost.lifted { box-shadow: 0 22px 48px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.08) !important; }
.card.dragging { display: none !important; }
.drop-slot { border-radius: 16px; background: rgba(10,132,255,.07); box-shadow: inset 0 0 0 2px rgba(10,132,255,.35); margin-bottom: 10px; animation: slotIn .16s ease; }
@keyframes slotIn { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
.card.landed { animation: landed .38s cubic-bezier(.2,.7,.2,1); }
@keyframes landed { 0% { box-shadow: 0 0 0 3px rgba(10,132,255,.45); } 100% { box-shadow: var(--shadow-card); } }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none !important; }
/* position of each trip in its column: 1st, 2nd, … */
.col[data-status=programata] .col-body, .col[data-status=incarcata] .col-body { counter-reset: pos; }
.col[data-status=programata] .col-body > .card, .col[data-status=incarcata] .col-body > .card { counter-increment: pos; position: relative; }
.col[data-status=programata] .col-body > .card::before, .col[data-status=incarcata] .col-body > .card::before { content: counter(pos); position: absolute; top: 0; left: 0; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0 0 9px 0; background: rgba(29,29,31,.82); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .drop-slot, .card.landed { animation: none; } }
.drag-shell { position: fixed !important; inset: 0 !important; width: 0 !important; height: 0 !important; overflow: visible !important; pointer-events: none; z-index: 1000; display: block !important; padding: 0 !important; margin: 0 !important; }

/* ===================== route planner ===================== */
.wp-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.wp { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: var(--fill); }
.wp-dot { flex: 0 0 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.wp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wp-type { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-in { height: 34px; border: 0; border-radius: 8px; background: #fff; padding: 0 8px; font: inherit; font-size: 13.5px; width: 100%; box-shadow: inset 0 0 0 1px var(--line); }
.wp-btns { display: flex; gap: 2px; }
.wp-btns .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.wp-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.route-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.route-legs > div { background: var(--fill); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.route-legs span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.route-legs b { font-size: 18px; }
.route-legs .main { background: #EAF2FF; } .route-legs .main b { color: #0B5BD3; }
.route-legs .tot { background: #1D1D1F; color: #fff; } .route-legs .tot span { color: #C7C7CC; }
.wp-pin span { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.map-layout .map-box { position: sticky; top: 16px; align-self: start; }
.reg-notes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.reg-notes p { margin: 0; padding: 10px 14px; border-radius: 12px; background: #EAF2FF; color: #1D3A6B; font-size: 13.5px; }
.reg-notes p.warn { background: #FFF4E5; color: #7A4100; }
.reg-notes a { font-weight: 700; }

.date-warn { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: #C25400; }

/* platform messages & subscription notices */
.pl-notice { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; margin: 0 0 12px; background: #EAF2FF; color: #1D3A6B; }
.pl-notice p { margin: 4px 0 0; font-size: 13.5px; }
.pl-important { background: #FFF4E5; color: #7A4100; }
.pl-urgent { background: #FFE3E7; color: #8A0F24; }
.lvl { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #0A84FF; }
.lvl-important { background: #FF9500; } .lvl-urgent { background: #FF3B30; }
.pl-plan select { height: 30px; border: 0; border-radius: 8px; background: var(--fill); font: inherit; font-size: 12.5px; }
.is-saving { opacity: .6; pointer-events: none; }

/* employee file */
.emp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.emp-grid .panel { margin: 0; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); font-weight: 600; }
dl.kv dd { margin: 0; font-weight: 700; }
.big-contact { font-size: 16px; line-height: 1.6; margin: 0; }
.priv-box { background: linear-gradient(180deg, #FBFBFD, #F4F4F8); }
.inc-tag { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; background: var(--fill); white-space: nowrap; }
.inc-amenda { background: #FFF0CF; color: #8A5300; } .inc-accident, .inc-dauna { background: #FFE3E7; color: #B0102F; } .inc-avertisment, .inc-sanctiune { background: #EDE7FF; color: #4B2DB3; }
.tog { border: 0; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 800; background: #F2F2F5; color: #8E8E93; cursor: pointer; }
.tog.on { background: #DDF5E3; color: #1C7A34; }
.inc-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.timeline { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--fill); font-size: 13.5px; }
.tl-date { font-weight: 800; min-width: 84px; font-variant-numeric: tabular-nums; }
.tl-tag { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; background: #fff; white-space: nowrap; }
.tl-functie { color: #0B5BD3; } .tl-contract { color: #1C7A34; } .tl-salariu { color: #8A5300; }
.tl-text { flex: 1; }
.tot-row td { font-weight: 800; background: #F7F7FA; } td.neg { color: #D70015; }
.demo-btn { margin-top: 10px; }
.legal-links { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.legal-links a { color: var(--muted); }
tr.row-pending td { background: #FFFBEA; }
.fuel-val { gap: 6px; flex-wrap: nowrap; }
.drv-box { background: linear-gradient(180deg, #F3F8FF, #fff); }
.chip-fuel { background: #FFF2E0; color: #8A4B00; }
.cons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 8px; }
.cons-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--fill); }
.cons-item small { display: block; font-size: 11.5px; color: var(--muted); }
.cons-ins { display: flex; gap: 4px; }
.cons-item input { width: 74px; height: 34px; border: 0; border-radius: 8px; text-align: right; padding: 0 8px; font: inherit; font-weight: 800; background: #fff; }

/* ===================== phone menu: 4 items + "Mai mult" (all the rest in a sheet) ===================== */
.nav-more { display: none; }
@media (max-width: 900px) {
  .nav-link.nav-extra { display: none; }
  .nav-more { display: flex; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; position: relative; }
  .side-foot { display: none; }
  .nav-link .nav-badge { position: absolute; top: 2px; right: calc(50% - 22px); }
  .nav-link { position: relative; }
  .side.open { top: auto; max-height: 82vh; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.25); background: rgba(255,255,255,.97); animation: navUp .22s cubic-bezier(.2,.7,.2,1); }
  .side.open .nav-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .side.open .nav-link, .side.open .nav-link.nav-extra { display: flex; padding: 12px 4px; background: var(--fill); border-radius: 14px; }
  .side.open .nav-link.active { background: #EAF2FF; }
  .side.open .nav-more { grid-column: 1 / -1; order: 99; background: #1D1D1F; color: #fff; flex-direction: row; justify-content: center; }
  .side.open .side-foot { display: flex; justify-content: space-between; }
  .side.open .scope-pick span { display: inline; }
  .side.open .scope-pick select { width: auto; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 799; background: rgba(10,12,20,.4); backdrop-filter: blur(3px); animation: fadeIn .2s ease; }
}
@keyframes navUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mbars { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding: 6px 2px 2px; min-height: 180px; }
.mbar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.mbar-col { width: 34px; border-radius: 8px 8px 4px 4px; background: #DCE7F8; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.mbar-col span { display: block; width: 100%; background: #34C759; }
.mbar small { font-size: 11px; color: var(--muted); text-transform: capitalize; } .mbar b { font-size: 12px; }
.side.open .nav-more .nav-badge { display: none; }
.stop-ora { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; color: #A35400; background: #FFF1DE; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.use-tag { font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; background: #EAF2FF; color: #0B5BD3; white-space: nowrap; }
.use-tag.use-adm { background: #F1ECFF; color: #5B35C9; }

.sty-sel { height: 30px; border: 0; border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 0 6px; }
.color-item .grow { flex: 1; }

/* ===================== gentle motion in the app (phone and desktop) ===================== */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.main > * { animation: pageIn .35s cubic-bezier(.2,.7,.2,1) both; }
.main > *:nth-child(2) { animation-delay: .04s; } .main > *:nth-child(3) { animation-delay: .08s; } .main > *:nth-child(4) { animation-delay: .12s; } .main > *:nth-child(n+5) { animation-delay: .16s; }
dialog[open] { animation: dlgIn .22s cubic-bezier(.2,.7,.2,1); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { dialog.sheet[open], dialog.sheet-small[open] { animation: sheetUp .28s cubic-bezier(.2,.7,.2,1); } }
@keyframes sheetUp { from { transform: translateY(60px); opacity: .5; } to { transform: none; opacity: 1; } }
.nav-link, .btn, .seg-link { transition: background-color .15s, color .15s, transform .12s, box-shadow .15s; }
.nav-link:active, .btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .main > *, dialog[open] { animation: none !important; } }
#agendaTable td.ag-cell { cursor: text; } #agendaTable td.ag-cell:hover { box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }
.q-title-x { display: flex; justify-content: space-between; align-items: center; position: sticky; top: -8px; background: #fff; z-index: 1; margin: -8px -8px 0; padding: 10px 10px 6px 14px; }
.q-x { border: 0; background: var(--fill); width: 26px; height: 26px; border-radius: 50%; font-size: 12px; cursor: pointer; color: var(--muted); }
.q-x:hover { background: #E5E5EA; color: var(--ink); }
.q-pop input[type=search] { position: sticky; top: 30px; z-index: 1; }
/* accounting */
.acc-tools { align-items: center; } .acc-tools .grow { flex: 1; }
.acc-sel b { color: var(--ink); }
.acc-table td.acc-edit.js-acc-cell { cursor: text; } .acc-table td.acc-edit.js-acc-cell:hover { box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }
.acc-tip { height: 30px; border: 0; border-radius: 8px; background: var(--fill); font: inherit; font-size: 12.5px; font-weight: 700; }
.js-acc-cur.clickable { cursor: pointer; text-decoration: underline dotted; }
tr.inv-cancel td { opacity: .55; }
/* order template editor */
.tpl-layout { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.tpl-side { max-height: calc(100vh - 150px); overflow: auto; }
.tpl-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-card { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--fill); cursor: pointer; font-size: 13px; }
.tpl-card input { display: none; } .tpl-card small { color: var(--muted); font-size: 11.5px; } .tpl-card em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.tpl-card:has(input:checked) { background: #EAF2FF; box-shadow: inset 0 0 0 2px #0A84FF; }
.tpl-shows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tpl-prev { position: sticky; top: 16px; padding: 0; overflow: hidden; } .tpl-prev iframe { width: 100%; height: calc(100vh - 150px); border: 0; display: block; background: #e9e9ee; }
@media (max-width: 1100px) { .tpl-layout { grid-template-columns: 1fr; } .tpl-prev { position: static; } }
.col-chooser { margin-left: auto; white-space: nowrap; }
.col-pop { position: fixed; z-index: 70; width: 340px; min-width: 260px; min-height: 180px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); resize: both; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.24), 0 0 0 1px rgba(15,23,42,.06); display: flex; flex-direction: column; }
.col-pop .check { font-size: 13.5px; } .col-pop .btn { margin-top: 6px; }
.veh-pick { margin: 6px 0 4px; } .hgv-box { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--fill); }
.hgv-avoid { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cat-row { display: flex; gap: 6px; align-items: center; } .cat-row input[data-k=name] { flex: 1; height: 38px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; }
.cat-row select { height: 38px; border: 0; border-radius: 9px; background: var(--fill); font: inherit; } .cat-row input[type=color] { width: 38px; height: 38px; border: 0; background: none; padding: 0; }
.pl-table td.neg-soft { color: #8A4B00; } .pl-table td.pos { color: #1C7A34; } .pl-table td.neg { color: #D70015; }
.nav-edit { display: flex; align-items: center; gap: 8px; margin: 8px 6px 0; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 10px; }
.nav-edit:hover { background: var(--fill); color: var(--ink); }
@media (max-width: 900px) { .nav-edit { display: none; } .side.open .nav-edit { display: flex; grid-column: 1 / -1; justify-content: center; background: var(--fill); padding: 10px; } }

/* ===================== hide amounts (👁): for when someone looks over your shoulder ===================== */
.money-eye { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.money-eye:hover { background: #E5E5EA; } .money-eye svg { width: 18px; height: 18px; }
.money-eye-float { position: fixed; top: 14px; right: 16px; z-index: 40; box-shadow: 0 4px 14px rgba(0,0,0,.08); background: #fff; }
.hide-money .kpi-value, .hide-money .kpi-sub, .hide-money .amount, .hide-money .chip-fuel, .hide-money .tot-row td, .hide-money td.pos, .hide-money td.neg,
.hide-money td.r, .hide-money .r.num, .hide-money .inv-sum, .hide-money .js-acc-sum, .hide-money .acc-sel, .hide-money .js-issue-sum, .hide-money .abs-count.ok,
.hide-money .bonus-months td, .hide-money .pl-table td, .hide-money .mbar-col, .hide-money .profit, .hide-money .col-sum, .hide-money .grp-sum, .hide-money .sum-pill,
.hide-money .card .chip-profit, .hide-money .kpi .bar, .hide-money .chart-wrap svg text, .hide-money [data-money] {
  filter: blur(7px); transition: filter .2s; user-select: none; }
.hide-money td.r:hover, .hide-money .kpi:hover .kpi-value { filter: blur(7px); }

.tok-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tok { border: 0; border-radius: 999px; padding: 5px 11px; background: #EAF2FF; color: #0B5BD3; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tok:hover { background: #D6E7FF; } .tok-sep { background: var(--fill); color: var(--ink); } .tok-reset { background: transparent; color: var(--muted); text-decoration: underline; }
.tok-preview { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #F6F8FB; font-size: 13.5px; }
.acc-set h2.mt, h3.mt { margin-top: 22px; }
.big-check { font-size: 14.5px; }
.acc-cats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.acc-cat { border-radius: 14px; padding: 10px 12px; background: var(--fill); } .acc-cat.off { opacity: .6; }
.acc-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-cat-name { flex: 1; min-width: 160px; height: 36px; border: 0; border-radius: 9px; padding: 0 10px; font: inherit; font-weight: 700; background: #fff; }
.acc-cat-mini { width: 74px; height: 32px; border: 0; border-radius: 8px; padding: 0 8px; font: inherit; background: #fff; }
.acc-cat .field { margin-top: 8px; } .acc-num { margin-top: 4px; flex-wrap: wrap; }
.inv-lines { display: flex; flex-direction: column; gap: 6px; } .inv-line { display: flex; gap: 6px; }
.inv-line input { height: 38px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; } .inv-line .grow { flex: 1; } .inv-line-sum { width: 120px; text-align: right; }

.undo-bar { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 2000; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 16px;
  background: #1D1D1F; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.3); font-weight: 600; font-size: 14px; transition: transform .28s cubic-bezier(.2,.7,.2,1); max-width: calc(100vw - 24px); }
.undo-bar.show { transform: translate(-50%, 0); }
.undo-bar button { border: 0; border-radius: 10px; padding: 8px 14px; background: #FFB547; color: #1D1D1F; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.undo-bar button.x { background: transparent; color: #aaa; padding: 8px; }
@media (max-width: 900px) { .undo-bar { bottom: 92px; } }
.refs { font-size: 11px; color: var(--muted); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
.inv-months { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 10px 0 4px; }
.inv-m { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--fill); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; text-transform: capitalize; }
.inv-m.on { background: #1D1D1F; color: #fff; } .inv-m b { font-size: 11px; opacity: .7; margin-left: 2px; }
.inv-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.inv-sumbox { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 22px; padding: 12px 16px; border-radius: 14px; background: #F6F8FB; align-items: end; }
.inv-sumbox > span { grid-column: 1 / -1; } .inv-sumbox div span { display: block; font-size: 11.5px; color: var(--muted); } .inv-sumbox b { font-size: 17px; }
.inv-sumbox b.pos { color: #1C7A34; } .inv-sumbox b.neg { color: #D70015; }
.hide-money .inv-sumbox b { filter: blur(7px); }

/* support */
.sup-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.sup-ask { width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--fill); padding: 0 14px; font: inherit; }
.sup-answers { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .sup-ans { padding: 10px 12px; border-radius: 12px; background: #F2F7FF; } .sup-ans p { margin: 4px 0 0; font-size: 13.5px; }
.sup-threads { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sup-th { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--fill); text-decoration: none; color: var(--ink); }
.sup-th.on { box-shadow: inset 0 0 0 2px #0A84FF; } .sup-th.unread b { color: #0A60D0; } .sup-th small { color: var(--muted); }
.sup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sup-msgs { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-height: 60vh; overflow: auto; }
.sup-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; background: var(--fill); } .sup-msg.mine { align-self: flex-end; background: #EAF2FF; } .sup-msg.from-team:not(.mine) { background: #FFF6EB; }
.sup-who { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.sup-reply { display: flex; gap: 8px; align-items: flex-end; } .sup-reply textarea, .sup-new textarea { flex: 1; width: 100%; border: 0; border-radius: 12px; background: var(--fill); padding: 10px 12px; font: inherit; }
.sup-plat { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .sup-layout { grid-template-columns: 1fr; } }
.sub-info { display: flex; gap: 28px; flex-wrap: wrap; } .sub-info span { display: block; font-size: 12px; color: var(--muted); } .sub-info b { font-size: 17px; } .sub-info b.neg { color: #D70015; }

.live-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 50vh; overflow: auto; }
.live-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; border: 0; border-radius: 12px; padding: 9px 12px; background: var(--fill); font: inherit; cursor: pointer; }
.live-item span { grid-column: 1; font-size: 12.5px; color: var(--muted); } .live-item small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); }
.arch-bar { gap: 8px; margin-bottom: 10px; align-items: center; }
.inv-import { margin: 6px 0 10px; } .inv-import textarea { width: 100%; border: 0; border-radius: 12px; background: var(--fill); padding: 10px; font: 12px ui-monospace, monospace; }
/* target & bonus seen by a user: plain values, nothing to edit (the admin sets them) */
#bonusForm.is-readonly input[readonly] { background: transparent; border: 0; box-shadow: none; padding-left: 0; font-weight: 800; font-size: 16px; pointer-events: none; height: auto; }
#bonusForm.is-readonly .band { border-bottom: 1px solid var(--line); }
.lock-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--muted); font-size: 12px; font-weight: 700; vertical-align: middle; }
/* order: special conditions with their signs (ADR, lift, temperature) */
.flags { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.flag-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: var(--fill); }
.flag-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.flag-ic { flex: 0 0 auto; }
.flag-more { height: 34px; min-width: 190px; border-radius: 10px; }
.unit-in.flag-more { height: auto; min-width: 0; } .unit-in.flag-more input { height: 34px; min-width: 150px; border-radius: 10px; }
.flag-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
/* text boxes that grow with what is typed (dimensions, mentions) */
textarea.js-autogrow { resize: vertical; min-height: 44px; field-sizing: content; }
#f_dimensiuni { min-height: 128px; }
.uit-wrap { display: flex; gap: 8px; align-items: center; } .uit-wrap input { flex: 1 1 auto; min-width: 0; } .uit-wrap .btn { flex: 0 0 auto; white-space: nowrap; }
/* Suport: the assistant as a conversation */
.asst { display: flex; flex-direction: column; gap: 14px; min-height: 64vh; }
.asst-head { display: flex; align-items: center; gap: 14px; margin: -22px -22px 0; padding: 20px 22px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(120deg, #0B1F3A 0%, #1B3A6B 60%, #2D5AA0 100%); color: #fff; }
.asst-head h2 { margin: 0; font-size: 19px; color: #fff; } .asst-head p { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 7px; }
.asst-logo { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A00, #FFB547); color: #fff; box-shadow: 0 6px 18px rgba(255,138,0,.35); }
.asst-live { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52,199,89,.25); }
.asst-team { margin-left: auto; background: rgba(255,255,255,.12) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) !important; }
.asst-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.asst-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--fill); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; color: var(--ink); }
.asst-topic span { font-size: 20px; } .asst-topic b { font-size: 14px; } .asst-topic small { color: var(--muted); font-size: 12px; }
.asst-topic:hover, .asst-topic.on { background: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 0 0 1.5px var(--blue); transform: translateY(-1px); }
.asst-log { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; max-height: 52vh; min-height: 220px; overflow-y: auto; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, var(--fill), transparent 75%); }
.asst-row { display: flex; gap: 10px; align-items: flex-end; } .asst-row.mine { justify-content: flex-end; }
.asst-av { flex: 0 0 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #0B1F3A; color: #FFB547; }
.asst-msg { max-width: 78%; padding: 12px 15px; border-radius: 16px 16px 16px 4px; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.06); font-size: 14.5px; line-height: 1.55; }
.asst-msg p { margin: 4px 0 8px; } .asst-row.mine .asst-msg { border-radius: 16px 16px 4px 16px; background: #0A6CFF; color: #fff; font-weight: 600; box-shadow: none; }
.asst-ans { border-left: 3px solid #FF8A00; padding-left: 10px; }
.asst-more, .asst-fb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.asst-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.asst-chip:hover { background: var(--blue); color: #fff; }
.asst-dots { display: inline-flex; gap: 4px; padding: 4px 2px; } .asst-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: asstDot 1s infinite ease-in-out; } .asst-dots i:nth-child(2) { animation-delay: .15s; } .asst-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes asstDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.asst-in { display: flex; gap: 8px; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.06); }
.asst-in input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 12px; font: inherit; font-size: 15px; outline: none; }
.asst-send { flex: 0 0 46px; height: 46px; border: 0; border-radius: 14px; background: #0B1F3A; color: #fff; display: grid; place-items: center; cursor: pointer; } .asst-send:hover { background: #0A6CFF; }
.asst-note { margin: -4px 0 0; text-align: center; }
.sup-acts { display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) { .asst-msg { max-width: 92%; } .asst-log { max-height: 50vh; } .asst-head { flex-wrap: wrap; } .asst-team { margin-left: 0; } }
/* Mesaje: conversations on the left, the open one on the right (one at a time on the phone) */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; height: calc(100vh - 120px); min-height: 480px; }
.chat .panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 14px; }
.chat-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .chat-side-head h2 { margin: 0; }
.chat-find { margin: 10px 0; height: 40px; border: 0; border-radius: 12px; background: var(--fill); padding: 0 12px; font: inherit; }
.chat-rooms { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.chat-r:hover { background: var(--fill); } .chat-r.on { background: var(--blue-soft); } .chat-r.unread b { font-weight: 800; }
.chat-av { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inc-soft); color: var(--inc-deep); font-weight: 800; }
.chat-av.grp { background: var(--prog-soft); color: var(--prog-deep); border-radius: 12px; }
.chat-r-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .chat-r-txt b, .chat-r-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-r-txt small { color: var(--muted); }
.chat-r .nav-badge { position: static; font-style: normal; }
.chat-empty { margin: auto; text-align: center; max-width: 360px; }
.chat-room { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-room[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .chat-title b { font-size: 17px; }
.chat-tools { display: flex; gap: 6px; flex-wrap: wrap; } .chat-tools[hidden] { display: none; }
.chat-back { display: none; transform: rotate(180deg); }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.chat-m { max-width: 76%; display: flex; flex-direction: column; align-self: flex-start; }
.chat-m.mine { align-self: flex-end; align-items: flex-end; }
.chat-who { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 2px 10px; }
.chat-b { padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--fill); line-height: 1.45; overflow-wrap: anywhere; }
.chat-m.mine .chat-b { background: var(--ink); color: #fff; border-radius: 16px 16px 4px 16px; } .chat-m.mine .chat-b a { color: #fff; }
.chat-at { font-size: 11px; color: var(--muted); margin: 2px 8px 0; }
.chat-in { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-in textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 160px; border: 0; border-radius: 14px; background: var(--fill); padding: 12px 14px; font: inherit; resize: none; }
.chat-people { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin-bottom: 10px; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .chat.has-room .chat-side { display: none; } .chat:not(.has-room) .chat-main { display: none; }
  .chat-back { display: inline-flex; } .chat-m { max-width: 90%; } .chat-in .btn span { display: none; }
}


body[data-page="mesaje"] .money-eye-float { display: none; }
/* sign in: forgotten password and the company sign-up, clearly visible on every screen */
.auth-forgot { text-align: right; margin: 10px 0 0; font-size: 14px; } .auth-forgot a { color: var(--blue); font-weight: 700; text-decoration: none; }
.auth-signup { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; color: var(--muted); font-size: 14px; }
.form-ok { padding: 10px 12px; border-radius: 12px; background: var(--done-soft); color: var(--done-deep); font-weight: 700; font-size: 14px; }
@media (max-width: 480px) { body.auth { padding: 14px; } .auth-card { width: 100%; max-width: none; padding: 22px 18px; } }
/* the driver's photos of a trip */
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tf { margin: 0; border-radius: 14px; overflow: hidden; background: var(--fill); display: flex; flex-direction: column; }
.tf img { width: 100%; height: 150px; object-fit: cover; display: block; } .tf-doc { display: grid; place-items: center; height: 150px; font-weight: 800; color: var(--muted); text-decoration: none; }
.tf figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .tf figcaption span { color: var(--muted); } .tf-exp { color: var(--inc-deep) !important; font-weight: 700; }
.tf-acts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
/* Tablou de bord above the trips board */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 16px; }
.dash-c { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface, #fff); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); border-left: 4px solid var(--line); min-width: 0; }
a.dash-c:hover { transform: translateY(-1px); }
.dash-t { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dash-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bar { display: block; height: 6px; border-radius: 6px; background: var(--fill); margin-top: 6px; overflow: hidden; } .dash-bar i { display: block; height: 100%; background: var(--prog); border-radius: 6px; }
.dash-c.t-green { border-left-color: var(--done); } .dash-c.t-amber { border-left-color: var(--inc); } .dash-c.t-red { border-left-color: var(--off, #FF3B30); } .dash-c.t-blue { border-left-color: var(--prog); }
.dash-c.t-red .dash-v { color: #C4122F; }
.dash-pick { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dash-v { font-size: 20px; } .dash-c { padding: 10px 12px; } }
/* autentificare în doi pași */
.code-in { font-size: 26px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.setup-steps { padding-left: 20px; margin: 8px 0 12px; font-size: 14.5px; } .setup-steps li { padding: 3px 0; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0; text-align: center; }
.qr-box #qr { padding: 10px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.qr-box .secret { font-size: 15px; letter-spacing: .08em; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; } .backup-codes code { padding: 8px; border-radius: 10px; background: var(--fill); text-align: center; font-size: 15px; letter-spacing: .05em; }
/* Hartă → Mașini acum: the day's route of a driver's phone */
.live-row { display: flex; gap: 6px; align-items: center; } .live-row .live-item { flex: 1 1 auto; min-width: 0; }
.track-day { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .track-day input { height: 36px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; }
.track-info { padding: 10px 12px; border-radius: 12px; background: var(--inc-soft); color: var(--ink); font-size: 13.5px; margin-bottom: 8px; line-height: 1.5; }

/* Planificare șoferi: each driver with the loads to do, in order */
.pl-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pl-check { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; cursor: pointer; }
.pl-opts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 10px; }
.pl-opts select { border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 0 10px; font: inherit; width: auto; }
.pl-help { margin-left: auto; }
.pl-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-chip-warn { background: var(--inc-soft); color: var(--inc-deep); }
.pl-chip-bad { background: var(--due-soft); color: var(--due-deep); }
.pl-fleet { margin-bottom: 14px; } .pl-fleet summary { cursor: pointer; font-size: 16px; }
.pl-vehicles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.pl-veh { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--fill); border-left: 4px solid var(--done); }
.pl-veh span { font-size: 13px; color: var(--ink-2); } .pl-veh small { font-size: 12px; font-weight: 700; color: var(--done-deep); }
.pl-veh.warn { border-color: var(--inc); } .pl-veh.warn small { color: var(--inc-deep); }
.pl-veh.bad { border-color: var(--due); background: var(--due-soft); } .pl-veh.bad small { color: var(--due-deep); }
.pl-free { margin-bottom: 14px; } .pl-free h2 { font-size: 17px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.pl-card { background: var(--surface); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.pl-card.is-bad { box-shadow: inset 0 0 0 2px var(--due); }
.pl-card.drop-on, .pl-free.drop-on { box-shadow: inset 0 0 0 2px var(--blue); }
.pl-card header { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.pl-who { display: flex; flex-direction: column; min-width: 0; } .pl-who b { font-size: 17px; } .pl-who span { font-size: 13px; color: var(--muted); }
.pl-count { flex: 0 0 auto; min-width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.pl-card.is-empty .pl-count { background: var(--fill); color: var(--muted); }
.pl-warn { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.pl-warn.bad { background: var(--due-soft); color: var(--due-deep); } .pl-warn.warn { background: var(--inc-soft); color: var(--inc-deep); }
.pl-gps { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
.pl-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 30px; }
.pl-none { font-size: 13px; color: var(--muted); padding: 10px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.pl-trip { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 10px; border-radius: 12px; background: var(--fill); }
.pl-trip[draggable="true"] { cursor: grab; } .pl-trip.dragging { opacity: .45; }
.pl-trip.s-incarcata { background: var(--inc-soft); }
.pl-trip.is-group { box-shadow: inset 4px 0 0 var(--inc); }
.pl-trip.with-prev { margin-top: -6px; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px dashed var(--inc); }
.pl-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); font-weight: 800; font-size: 14px; }
.pl-list > .pl-trip:first-child .pl-num { background: var(--blue); color: #fff; }
.pl-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pl-body b { font-size: 14.5px; } .pl-body small { font-size: 12.5px; color: var(--ink-2); }
.pl-sent { font-weight: 700; } .pl-sent.ok { color: var(--done-deep) !important; } .pl-sent.warn { color: var(--inc-deep) !important; } .pl-sent.off { color: var(--muted) !important; }
.pl-acts { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pl-btn { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.pl-btn:hover { background: var(--blue-soft); } .pl-btn.on { background: var(--inc-soft); color: var(--inc-deep); box-shadow: none; }
.pl-btn.primary { background: var(--ink); color: #fff; box-shadow: none; }
.pl-dialog { border: 0; border-radius: var(--r-lg); padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); }
.pl-dialog::backdrop { background: rgba(0,0,0,.35); }
.pl-dialog h2 { margin: 0 0 4px; } .pl-dialog label { display: block; font-weight: 700; font-size: 13px; margin: 12px 0 4px; }
.pl-dialog select { width: 100%; height: 42px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 10px; font: inherit; }
.pl-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) { .pl-grid { grid-template-columns: 1fr; } .pl-help { margin-left: 0; } .pl-tools .search-sm { width: 100%; } }
/* Hartă → Mașini acum: the label stays on each truck */
.leaflet-tooltip.live-label { padding: 3px 8px; border: 0; border-radius: 8px; background: rgba(29,29,31,.88); color: #fff; font: 600 12px/1.3 var(--font); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.leaflet-tooltip.live-label b { font-weight: 800; letter-spacing: .02em; }
.leaflet-tooltip-top.live-label::before { border-top-color: rgba(29,29,31,.88); }
.pl-grp { align-self: flex-start; margin: 2px 0; padding: 2px 8px; border-radius: 6px; background: var(--inc-soft); color: var(--inc-deep); font-size: 12px; font-weight: 800; }
/* Planificare → Ordinea punctelor: loadings, customs and unloadings of a group, one per row */
.pl-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pl-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-step small { color: var(--muted); }
.pl-step.done { opacity: .6; }
.pl-step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--inc-soft); color: var(--inc-deep); font-weight: 800; flex: none; }
.pl-step[data-kind="unload"] .pl-step-n { background: var(--done-soft); color: var(--done-deep); }
.pl-step[data-kind="export"] .pl-step-n, .pl-step[data-kind="import"] .pl-step-n { background: var(--due-soft); color: var(--due-deep); }
.pl-step-btns { display: flex; gap: 4px; }
/* RO / EN */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.lang-switch > * { min-width: 30px; height: 26px; display: grid; place-items: center; border-radius: 999px; padding: 0 6px; text-decoration: none; color: var(--muted); }
.lang-switch > b { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lang-switch > a:hover { color: var(--ink); }
.auth-lang { margin-left: auto; }
/* a field with its unit after it (°C) */
.unit-in { display: inline-flex; align-items: center; gap: 6px; }
.unit-in input { flex: 1 1 auto; min-width: 0; }
.unit-in .unit { font-weight: 800; color: var(--ink-2); }
/* order editor: the number and the arrows of each point (the order the driver goes in) */
.stop-order { display: inline-flex; align-items: center; gap: 2px; }
.stop-order .stop-nr { min-width: 22px; text-align: right; margin-right: 4px; font-weight: 800; color: var(--k-deep, var(--ink)); }
.stop-order .icon-btn { width: 30px; height: 30px; font-weight: 800; }
.stop-card.t-tranzit { --k: var(--hold); --k-soft: var(--hold-soft); }
/* Settings: the list of sections on the left (sticky), the sections on the rest of the screen */
.settings-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: start; }
.settings-toc { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); max-height: calc(100vh - 36px); overflow-y: auto; }
.settings-toc .toc-title { padding: 2px 10px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.settings-toc a { padding: 8px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.settings-toc a:hover { background: var(--fill); color: var(--ink); } .settings-toc a.on { background: var(--blue-soft); color: var(--blue); }
.settings > section.panel { scroll-margin-top: 18px; }
@media (max-width: 1100px) { .settings-layout { grid-template-columns: 1fr; } .settings-toc { display: none; } }
/* text read from a driver's photo */
.tf-ocr { grid-column: 1 / -1; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ocr-found { display: flex; flex-direction: column; gap: 6px; } .ocr-found > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ocr-found .muted { min-width: 92px; }
.ocr-text { width: 100%; border: 0; border-radius: 10px; background: var(--fill); padding: 10px; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; resize: vertical; }
/* the company's own columns */
.cf-th { color: var(--blue); } .cf-cell.cf-edit { cursor: cell; } .cf-cell.cf-edit:hover { box-shadow: inset 0 0 0 1px var(--blue-soft); }
.cf-input { width: 100%; min-width: 110px; height: 32px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--blue); padding: 0 8px; font: inherit; }
.cf-add { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr auto; gap: 10px; align-items: end; }
.cf-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cf-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--fill); } .cf-item.is-hidden { opacity: .55; }
.cf-ren { display: flex; gap: 6px; align-items: center; } .cf-ren input { height: 34px; border: 0; border-radius: 8px; background: var(--surface); padding: 0 10px; font: inherit; font-weight: 700; }
@media (max-width: 700px) { .cf-add { grid-template-columns: 1fr; } }
/* alerts of the trips, bottom right */
.ops-stack { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1500; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.ops-card { background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-pop); border-left: 5px solid var(--inc); }
.ops-card.lv-bad { border-left-color: var(--due); } .ops-card.lv-info { border-left-color: var(--blue); }
.ops-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .ops-top b { font-size: 14px; } .ops-top small { color: var(--muted); font-size: 12px; }
.ops-card p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ops-bar { height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; margin-top: 8px; } .ops-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; transition: width .6s; }
.ops-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ops-acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; } .ops-acts button { font: inherit; font-size: 12.5px; font-weight: 700; border: 0; border-radius: 8px; padding: 6px 10px; background: var(--fill); color: var(--ink); cursor: pointer; }
.ops-acts .js-ops-done { background: var(--ink); color: var(--surface); }
.ops-more { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ops-stack { align-items: flex-end; } .ops-stack > .ops-card, .ops-stack > .ops-more { align-self: stretch; }
.ops-bell { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-pop); cursor: pointer; }
.ops-bell b { color: var(--due, #D7263D); }
.ops-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1600; width: min(420px, 100vw); background: var(--surface); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.ops-panel[hidden] { display: none; }
.ops-ph { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.ops-ph button { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink-2); }
.ops-tabs { display: flex; gap: 6px; padding: 10px 16px 0; } .ops-tabs button { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; color: var(--ink-2); }
.ops-tabs button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ops-plist { overflow: auto; padding: 10px 16px 16px; display: grid; gap: 8px; }
.ops-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--inc); }
.ops-row.lv-bad { border-left-color: var(--due); } .ops-row.lv-info { border-left-color: var(--blue); } .ops-row.is-closed { opacity: .72; }
.ops-row p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .ops-stack { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* Planificare: pauza / odihna anunțată de șofer și sfaturile după regulile de odihnă */
.pl-rest { margin: 8px 0 0; display: grid; gap: 6px; }
.pl-rest-now { padding: 8px 10px; border-radius: 8px; background: var(--inc-soft, #EAF2FF); font-size: 13px; }
.pl-rest-now b { font-weight: 800; } .pl-rest-now span { color: var(--muted); }
.pl-rest-bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.pl-rest-bar em { display: block; height: 100%; background: var(--accent, #0A6CFF); }
.pl-rest-hint { margin: 0; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: rgba(10,108,255,.07); }
.pl-rest-hint.warn { background: var(--inc-soft); color: var(--inc-deep); }
/* Setări → Aplicația șoferilor: viața privată (localizare doar în timpul de lucru) */
.gps-priv { flex-basis: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft, rgba(0,0,0,.03)); }
.gps-priv h3 { margin: 0 0 4px; font-size: 15px; }
.gps-priv .chk { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-weight: 600; }
.gps-hours { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px 26px; }
.gps-hours .day input { display: none; } .gps-hours .day span { display: inline-block; min-width: 30px; text-align: center; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line, #DDE3EC); font-weight: 700; cursor: pointer; }
.gps-hours .day input:checked + span { background: var(--accent, #0A6CFF); border-color: var(--accent, #0A6CFF); color: #fff; }
.gps-hours input[type=time] { width: auto; }
.live-off { display: block; color: var(--inc-deep, #A35400); font-weight: 700; }
/* Anunțurile șoferului pe cardul cursei și în Planificare: problemă (roșu), așteptare (portocaliu), pauză / odihnă (albastru) */
.ops-badges { display: grid; gap: 5px; margin: 6px 0 4px; }
.ops-badge { padding: 6px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ops-badge.ob-problem { background: var(--due-soft, #FDE4E7); color: var(--due-deep, #A3122A); }
.ops-badge.ob-problem.ob-bad { box-shadow: inset 3px 0 0 #D7263D; animation: obPulse 2s ease-in-out infinite; }
.ops-badge.ob-wait { background: var(--inc-soft, #FFF1DE); color: var(--inc-deep, #A35400); }
.ops-badge.ob-pause { background: rgba(10,108,255,.09); color: #0B4FB3; }
.ops-badge i { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: rgba(10,108,255,.15); overflow: hidden; }
.ops-badge i em { display: block; height: 100%; background: #0A6CFF; }
@keyframes obPulse { 50% { box-shadow: inset 3px 0 0 #D7263D, 0 0 0 3px rgba(215,38,61,.18); } }
@media (prefers-reduced-motion: reduce) { .ops-badge.ob-problem.ob-bad { animation: none; } }
/* Cardurile formularului de cursă și ale comenzii, aranjate de fiecare utilizator: 12 coloane */
.kb-board { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-template-areas: none !important; grid-auto-rows: max-content; align-items: start; align-content: start; gap: 16px; }
.kb-card { position: relative; }
.kb-board > :not(section) { grid-column: 1 / -1; order: 9999; }
.kb-board > section.kb-h { overflow: auto; }
.kb-handle { cursor: grab; user-select: none; }
.kb-handle::after { content: '⠿'; float: right; color: var(--ink-3, #9aa0a6); font-weight: 400; }
.kb-e { position: absolute; z-index: 3; touch-action: none; }
.kb-e-l, .kb-e-r { top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.kb-e-l { left: -5px; } .kb-e-r { right: -5px; }
.kb-e-b { left: 10px; right: 10px; bottom: -5px; height: 10px; cursor: ns-resize; }
.kb-e-c { right: -5px; bottom: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.kb-e::after { content: ''; position: absolute; border-radius: 3px; background: var(--accent, #0A6CFF); opacity: 0; transition: opacity .12s; }
.kb-e-l::after, .kb-e-r::after { top: 0; bottom: 0; left: 3px; width: 4px; }
.kb-e-b::after { left: 0; right: 0; top: 3px; height: 4px; }
.kb-e-c::after { right: 5px; bottom: 5px; width: 8px; height: 8px; }
.kb-card:hover > .kb-e::after { opacity: .25; }
.kb-e:hover::after, .kb-sizing > .kb-e::after { opacity: .9; }
.kb-moving { opacity: .6; outline: 2px dashed var(--accent, #0A6CFF); outline-offset: 2px; }
.kb-sizing { outline: 2px solid var(--accent, #0A6CFF); outline-offset: 2px; }
body.kb-drag-move, body.kb-drag-move * { cursor: grabbing !important; user-select: none; }
body.kb-drag-l *, body.kb-drag-r * { cursor: ew-resize !important; user-select: none; }
body.kb-drag-b * { cursor: ns-resize !important; user-select: none; }
body.kb-drag-c * { cursor: nwse-resize !important; user-select: none; }
@media (max-width: 900px) { .kb-board { grid-template-columns: 1fr !important; } .kb-board > section { grid-area: auto !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .kb-e { display: none; } .kb-handle::after { content: none; } }

/* Setări → Email-ul meu: alegerea furnizorului (Gmail, Yahoo, al firmei) și pașii pentru parola de aplicație */
.mail-prov { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.mail-prov .mp { margin: 0; cursor: pointer; } .mail-prov .mp input { position: absolute; opacity: 0; pointer-events: none; }
.mail-prov .mp span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #DDE3EC); font-weight: 700; font-size: 14px; }
.mail-prov .mp input:checked + span { background: var(--accent, #0A6CFF); border-color: var(--accent, #0A6CFF); color: #fff; }
.mail-prov .mp input:focus-visible + span { outline: 2px solid var(--accent, #0A6CFF); outline-offset: 2px; }
.mail-help { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--fill, #F2F4F8); font-size: 14px; }
.mail-help ol { margin: 8px 0; padding-left: 20px; } .mail-help li { margin: 4px 0; }

/* Autentificare în doi pași: pașii explicați, butonul care deschide aplicația pe telefon, codurile de rezervă */
.tfa-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin: 14px 0; font-size: 14.5px; }
.tfa-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #0A6CFF); color: #fff; font-weight: 800; font-size: 14px; }
.tfa-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tfa-way { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--fill, #F2F4F8); }
.tfa-way .tfa-h, .tfa-way summary { display: block; margin-bottom: 6px; } .tfa-way summary { cursor: pointer; }
.tfa-way .btn-block { margin-top: 8px; white-space: normal; height: auto; min-height: 46px; line-height: 1.3; }
.tfa-way code { word-break: break-all; }
.tfa-why { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--fill, #F2F4F8); font-size: 14px; }
.tfa-why p { margin: 6px 0 0; }
/* the button that opens the authenticator only makes sense on a phone */
@media (hover: hover) and (pointer: fine) { .tfa-mobile { display: none; } }

/* Hartă → traseul unei curse: pins for loading (blue), unloading (green) and the stop (red) */
.route-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* Km cursă: the stop type (D / Z / X) and a grupaj's cost split */
.km-abc { margin: 0 0 6px; }
.km-stop-tip { display: flex; flex-wrap: wrap; gap: 6px; }
.km-stop-tip label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--fill); font-weight: 700; font-size: 13px; cursor: pointer; }
.km-grp { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); display: grid; gap: 6px; }
.km-grp-rows { display: grid; gap: 4px; }
.km-grp-rows label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.km-grp-rows input { width: 110px; height: 32px; border: 1px solid var(--line); border-radius: 8px; text-align: right; padding: 0 8px; font: inherit; font-weight: 800; }
.km-bord { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 13px; line-height: 1.6; }
.chip-photo { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; background: var(--blue-soft); color: var(--blue); }
.chip-photo:hover { filter: brightness(.95); }
.grp-list { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.grp-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--fill); cursor: pointer; }
.grp-row span { display: flex; flex-direction: column; }
.grp-row small { color: var(--muted); }
.grp-row.same { box-shadow: inset 3px 0 0 var(--blue); }

/* the trip / order form in its own browser window */
body.kb-win[data-page="cursa-win"] .main { padding: 0; }
body.kb-win .win-wait { padding: 24px; }
body.kb-win #tripDlg[open] { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
body.kb-win #tripDlg form { height: 100vh; max-height: none; }
body.kb-win #tripDlg .sheet-head, body.kb-win #tripDlg .sheet-foot { border-radius: 0; }
body.kb-win #tripDlg .sheet-body { flex: 1; }
body.kb-win #tripDlg::backdrop { background: transparent; backdrop-filter: none; }
body.kb-win .js-popout-trip, body.kb-win .js-pop-out { display: none; }
dialog.sheet .sheet-head .js-pop-out { margin-left: auto; }
.route-pin.route-pin-addr span { opacity: .55; outline: 2px dashed #fff; }
/* A− 100% A+ */
.zoom-ctl { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border-radius: 10px; background: var(--fill); font-size: 13px; }
.zoom-ctl button { border: 0; background: transparent; font: inherit; font-weight: 800; min-width: 30px; height: 28px; border-radius: 7px; cursor: pointer; color: var(--ink); }
.zoom-ctl button:hover { background: #fff; }
.zoom-ctl b { min-width: 42px; text-align: center; font-weight: 700; color: var(--ink-2); cursor: default; user-select: none; }
body.kb-win[data-page="cursa-win"] .money-eye-float { display: none; }
/* Hartă: traseul pe mai multe zile, opririle lungi și ce a apăsat șoferul */
.track-span { flex-wrap: wrap; } .track-span input { flex: 1 1 130px; min-width: 0; }
.route-halt { display: grid !important; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #8A6D3B; color: #fff; font: 800 12px/1 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.route-halt.long { background: #5B3E10; }
.route-tl { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto; border-top: 1px solid var(--line); }
.route-tl li button { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 12.5px; padding: 5px 2px; cursor: pointer; color: var(--ink); border-radius: 6px; }
.route-tl li button:hover { background: rgba(0,0,0,.05); }
.route-tl i { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; color: #fff; font: 800 9px/14px system-ui, sans-serif; font-style: normal; text-align: center; }
.track-span { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; margin: 8px 0; }
.track-dt { display: flex; gap: 6px; min-width: 0; }
.track-dt input { height: 36px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 8px; font: inherit; min-width: 0; }
.track-dt input[type=date] { flex: 1 1 auto; } .track-dt input[type=time] { flex: 0 0 96px; }
.route-tl li { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; } .route-tl li > .js-tl { flex: 1 1 0; width: auto; } .route-tl li > .js-excl { flex: 0 0 auto; padding: 2px 8px; min-height: 0; height: 24px; }
.excl-form { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 8px 22px; } .excl-form p { flex: 1 1 100%; margin: 0; }
.excl-form input { height: 32px; border: 0; border-radius: 8px; background: var(--fill); padding: 0 8px; font: inherit; min-width: 0; } .excl-form input[name=km] { width: 80px; } .excl-form input[name=motiv] { flex: 1 1 120px; }
.route-excl { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; font-size: 12.5px; } .route-excl span { display: inline-flex; align-items: center; gap: 2px; }
.route-export { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* ---------- the app's color themes (Setări → Culori, per user: body[data-theme]) ---------- */
.sub-h { font-size: 15px; font-weight: 800; margin: 18px 0 6px; }
.app-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 6px; }
.app-theme { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid transparent; border-radius: 14px; background: var(--fill); cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); text-align: left; }
.app-theme:hover { border-color: var(--line); } .app-theme.on { border-color: var(--blue); }
.at-sample { position: relative; display: block; height: 54px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.at-sample i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; } .at-sample b { position: absolute; right: 10px; bottom: 10px; width: 34%; height: 12px; border-radius: 6px; }
.app-theme-co { grid-column: 1 / -1; }
@media (min-width: 901px) { body[data-theme]:not([data-theme=clasic]) .nav-link.active { background: var(--nav-on, var(--ink)); color: var(--nav-on-ink, #fff); } }
body[data-theme]:not([data-theme=clasic]) .btn-primary { background: var(--btn, var(--ink)); }
body[data-theme]:not([data-theme=clasic]) .btn-primary:hover { filter: brightness(1.12); background: var(--btn, var(--ink)); }
body[data-theme]:not([data-theme=clasic]) .btn-accent:hover { filter: brightness(1.1); background: var(--blue); }
[data-theme=ocean] { --bg: #EEF4FB; --fill: #E6EEF8; --line: #D9E3F0; --ink: #10243E; --ink-2: #2A3D57; --muted: #5F6F84; --blue: #0A6BD8; --blue-soft: #E3EEFC; --nav-on: #0A4FA3; --btn: #0A4FA3; --side: rgba(232,241,252,.85); }
[data-theme=padure] { --bg: #EFF5F0; --fill: #E5EFE7; --line: #D5E3D8; --ink: #14281C; --ink-2: #2B4234; --muted: #5E7466; --blue: #1F8A4C; --blue-soft: #E2F3E8; --nav-on: #1F6B3E; --btn: #1F6B3E; --side: rgba(232,243,235,.85); }
[data-theme=apus] { --bg: #FBF3EC; --fill: #F6E9DE; --line: #EEDCCB; --ink: #2E1C12; --ink-2: #4A3123; --muted: #7D6555; --blue: #D9622B; --blue-soft: #FCEBE0; --nav-on: #B4501F; --btn: #B4501F; --side: rgba(252,238,226,.85); }
[data-theme=lavanda] { --bg: #F4F1FB; --fill: #ECE7F8; --line: #DFD8F0; --ink: #22183A; --ink-2: #3B2F58; --muted: #6C6385; --blue: #7A4FD6; --blue-soft: #EFE8FC; --nav-on: #5E3BB0; --btn: #5E3BB0; --side: rgba(240,234,252,.85); }
[data-theme=nisip] { --bg: #F7F4EE; --fill: #EFEBE2; --line: #E4DED1; --ink: #2B261D; --ink-2: #463E31; --muted: #776D5D; --blue: #8C6428; --blue-soft: #F4ECDD; --nav-on: #6B5332; --btn: #6B5332; --side: rgba(243,238,228,.85); }
[data-theme=grafit] { --bg: #F1F2F4; --fill: #E9EBEE; --line: #DCDFE4; --ink: #1F2329; --ink-2: #3A3F47; --muted: #6A707A; --blue: #3D7BD9; --blue-soft: #E6EEFA; --nav-on: #FFFFFF; --nav-on-ink: #1F2329; --btn: #1F2329; --side: #1F2329; --side-ink: #D7DBE1; }
[data-theme=noapte] { --bg: #EEF1F6; --fill: #E6EAF1; --line: #D8DEE8; --ink: #0F1B2D; --ink-2: #26344A; --muted: #5E6B80; --blue: #2F80ED; --blue-soft: #E5EFFD; --nav-on: #2F80ED; --btn: #0F1B2D; --side: #0F1B2D; --side-ink: #C8D3E3; }
body[data-theme]:not([data-theme=clasic]) .side { background: var(--side, rgba(255,255,255,.72)); }
[data-theme=grafit] .side, [data-theme=noapte] .side { border-right-color: transparent; color: var(--side-ink); }
[data-theme=grafit] .side .nav-link:not(.active), [data-theme=noapte] .side .nav-link:not(.active),
[data-theme=grafit] .side .brand, [data-theme=noapte] .side .brand, [data-theme=grafit] .side-foot, [data-theme=noapte] .side-foot,
[data-theme=grafit] .side a:not(.nav-link):not(.btn), [data-theme=noapte] .side a:not(.nav-link):not(.btn) { color: var(--side-ink); }
[data-theme=grafit] .side .nav-link:not(.active):hover, [data-theme=noapte] .side .nav-link:not(.active):hover { background: rgba(255,255,255,.08); }
[data-theme=grafit] .side select, [data-theme=noapte] .side select { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 900px) { [data-theme=grafit] .side .nav-link.active, [data-theme=noapte] .side .nav-link.active { background: transparent; color: #fff; } }
td.cf-auto { color: var(--ink-2); background-image: linear-gradient(90deg, var(--blue-soft), transparent 70%); }
.js-page-gear { font-size: 18px; min-width: 42px; padding: 0 10px; }
.gear-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; } .gear-body .sub-h:first-child { margin-top: 0; }
.col-pop .col-row { display: flex; align-items: center; gap: 6px; } .col-pop .col-row .check { flex: 1 1 auto; }
.col-mv { display: inline-flex; gap: 2px; } .col-mv button { border: 0; background: var(--fill); border-radius: 6px; width: 24px; height: 22px; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink); } .col-mv button:hover { background: var(--line); }
#regTable td.col-ref { white-space: nowrap; color: var(--ink-2); }
.ord-acts-cell { min-width: 330px; }
.ord-acts { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ord-main { display: flex; flex-wrap: wrap; gap: 4px; }
.ord-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding-left: 6px; border-left: 1px solid var(--line); }
.ord-tools .inline-form { display: contents; } .ord-tools .icon-btn { text-decoration: none; }
/* column widths dragged like in Excel */
table.js-table:not(.sheet) thead tr:first-child > th:not(.sticky-r) { position: relative; }
.col-rs { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 4; touch-action: none; }
.col-rs::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 2px; border-radius: 2px; background: transparent; }
th:hover > .col-rs::after, body.col-resizing .col-rs::after { background: var(--blue); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
/* the columns window: title bar to move it, its corner to resize it, the list scrolls only when it must */
.col-pop .cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; background: linear-gradient(180deg, var(--fill), #fff); }
.col-pop .cp-head b { display: block; font-size: 15px; } .col-pop .cp-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.col-pop .cp-x { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 14px; } .col-pop .cp-x:hover { background: var(--fill); color: var(--ink); }
.col-pop .cp-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 8px; }
.col-pop .col-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; }
.col-pop .col-row:hover { background: var(--fill); }
.col-pop .col-row .check { flex: 1 1 auto; min-width: 0; margin: 0; } .col-pop .col-row .check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-pop .cp-grip { color: #A0A4AE; cursor: grab; font-size: 13px; letter-spacing: -2px; padding: 0 2px; touch-action: none; } .col-pop .cp-grip.off { visibility: hidden; }
.col-pop .col-row.cp-drag { background: var(--blue-soft); box-shadow: 0 6px 16px rgba(0,0,0,.12); } .col-pop .col-row.cp-drag .cp-grip { cursor: grabbing; }
.col-pop .cp-fixed { font-size: 11px; color: var(--muted); background: var(--fill); border-radius: 6px; padding: 2px 6px; }
.col-pop .cp-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); } .col-pop .cp-foot .btn { margin: 0; }
/* ---------- themes with transport drawings, light / dark mode, moving background ---------- */
[data-theme=autostrada] { --bg: #EEF0F3; --fill: #E5E8EC; --line: #D7DBE1; --ink: #1F2937; --ink-2: #374151; --muted: #6B7280; --blue: #B98900; --blue-soft: #FFF4CC; --nav-on: #F2B705; --nav-on-ink: #1F2937; --btn: #1F2937; --side: #1F2937; --side-ink: #E5E7EB; }
[data-theme=port] { --bg: #EAF3F6; --fill: #DCEBF0; --line: #CBDDE4; --ink: #0B2A36; --ink-2: #1E4553; --muted: #557582; --blue: #E0601A; --blue-soft: #FDEBDD; --nav-on: #F26B1D; --btn: #0B3B4C; --side: #0B3B4C; --side-ink: #CFE4EB; }
[data-theme=depozit] { --bg: #F6F1E8; --fill: #EEE6D8; --line: #E2D7C4; --ink: #2E2216; --ink-2: #4A3826; --muted: #7D6A55; --blue: #A75C1A; --blue-soft: #F7E7D4; --nav-on: #B5651D; --btn: #5A3A1A; --side: #5A3A1A; --side-ink: #F0E3CF; }
[data-theme=rute] { --bg: #EFF6EE; --fill: #E3EFE2; --line: #D2E3D0; --ink: #16301E; --ink-2: #2B4A34; --muted: #5E7A65; --blue: #D93025; --blue-soft: #FCE4E2; --nav-on: #2E7D4F; --btn: #2E7D4F; --side: rgba(227,241,225,.88); }
[data-theme=flota] { --bg: #EDF2FA; --fill: #E1E9F6; --line: #D2DDEF; --ink: #10233F; --ink-2: #263B5C; --muted: #5C6E8A; --blue: #1F6FEB; --blue-soft: #E1ECFD; --nav-on: #1F4E99; --btn: #1F4E99; --side: rgba(225,234,248,.88); }
[data-theme=tir] { --bg: #FBF1F1; --fill: #F4E3E3; --line: #EAD3D3; --ink: #2A0F14; --ink-2: #4A1F27; --muted: #7E5A60; --blue: #C8102E; --blue-soft: #FBE0E4; --nav-on: #C8102E; --btn: #3B0D15; --side: #3B0D15; --side-ink: #F3D9DD; }
[data-theme=autostrada] .side, [data-theme=port] .side, [data-theme=depozit] .side, [data-theme=tir] .side { border-right-color: transparent; color: var(--side-ink); }
[data-theme=autostrada] .side .nav-link:not(.active), [data-theme=port] .side .nav-link:not(.active), [data-theme=depozit] .side .nav-link:not(.active), [data-theme=tir] .side .nav-link:not(.active), [data-theme=autostrada] .side .brand, [data-theme=port] .side .brand, [data-theme=depozit] .side .brand, [data-theme=tir] .side .brand, [data-theme=autostrada] .side .side-foot, [data-theme=port] .side .side-foot, [data-theme=depozit] .side .side-foot, [data-theme=tir] .side .side-foot, [data-theme=autostrada] .side a:not(.nav-link):not(.btn), [data-theme=port] .side a:not(.nav-link):not(.btn), [data-theme=depozit] .side a:not(.nav-link):not(.btn), [data-theme=tir] .side a:not(.nav-link):not(.btn) { color: var(--side-ink); }
[data-theme=autostrada] .side .nav-link:not(.active):hover, [data-theme=port] .side .nav-link:not(.active):hover, [data-theme=depozit] .side .nav-link:not(.active):hover, [data-theme=tir] .side .nav-link:not(.active):hover { background: rgba(255,255,255,.08); }
[data-theme=autostrada] .side select, [data-theme=port] .side select, [data-theme=depozit] .side select, [data-theme=tir] .side select { background: rgba(255,255,255,.1); color: #fff; }
body[data-theme]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; background-size: 300px 300px; }
body[data-anim="1"]::before { animation: kb-art-drift 160s linear infinite; }
@keyframes kb-art-drift { from { background-position: 0 0; } to { background-position: 600px 300px; } }
@media (prefers-reduced-motion: reduce) { body[data-anim="1"]::before { animation: none; } }
.at-sample[data-t] { background-size: 90px 90px; background-repeat: repeat; }
.app-mode { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
html[data-mode=dark] { filter: invert(1) hue-rotate(180deg); background: #fff; }
html[data-mode=dark] :is(img, video, iframe, canvas, .leaflet-container, .at-sample, .theme-pv, .no-invert) { filter: invert(1) hue-rotate(180deg); }
html[data-mode=dark] body::before { opacity: .8; }
@media (prefers-color-scheme: dark) { html[data-mode=auto] { filter: invert(1) hue-rotate(180deg); background: #fff; } html[data-mode=auto] :is(img, video, iframe, canvas, .leaflet-container, .at-sample, .theme-pv, .no-invert) { filter: invert(1) hue-rotate(180deg); } }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.theme-btn:hover { background: var(--line); } .theme-btn-float { position: fixed; top: 14px; right: 170px; z-index: 40; box-shadow: 0 4px 14px rgba(0,0,0,.08); background: #fff; }
.theme-pop { position: fixed; z-index: 80; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.24), 0 0 0 1px rgba(15,23,42,.06); padding: 14px; }
.theme-pop h3 { margin: 0 0 10px; font-size: 15px; } .theme-pop .tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-pop .tp-t { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: var(--fill); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); text-align: left; }
.theme-pop .tp-t.on { border-color: var(--blue); } .theme-pop .tp-t .at-sample { height: 44px; }
.theme-pop .tp-modes { display: flex; gap: 4px; margin: 12px 0 8px; padding: 3px; border-radius: 12px; background: var(--fill); }
.theme-pop .tp-modes button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 9px; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--ink-2); } .theme-pop .tp-modes button.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); color: var(--ink); }
.theme-pop .tp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; } .theme-pop .tp-foot a { font-size: 12.5px; }
/* ---------- themes with a real photo: the picture behind everything (veiled so the text reads well), the panels as frosted glass,
   a very slow zoom when "Fundal animat" is on; dark mode keeps the photo as it is and darkens the veil ---------- */
[data-theme=foto_noapte] { --blue: #2F80ED; --blue-soft: #E3EEFD; --nav-on: #2F80ED; --btn: #0E1A2B; --photo: url(bg/drum_noapte.webp); }
.at-sample[data-t=foto_noapte] { background-image: url(bg/t/drum_noapte.webp); background-size: cover; background-position: center; }
[data-theme=foto_apus] { --blue: #E8742C; --blue-soft: #FCE9DC; --nav-on: #E8742C; --btn: #2B1A12; --photo: url(bg/apus.webp); }
.at-sample[data-t=foto_apus] { background-image: url(bg/t/apus.webp); background-size: cover; background-position: center; }
[data-theme=foto_asfintit] { --blue: #C2410C; --blue-soft: #FBE6DA; --nav-on: #C2410C; --btn: #1C1F2B; --photo: url(bg/asfintit.webp); }
.at-sample[data-t=foto_asfintit] { background-image: url(bg/t/asfintit.webp); background-size: cover; background-position: center; }
[data-theme=foto_lumini] { --blue: #E0336C; --blue-soft: #FCE1EA; --nav-on: #E0336C; --btn: #1A1424; --photo: url(bg/lumini.webp); }
.at-sample[data-t=foto_lumini] { background-image: url(bg/t/lumini.webp); background-size: cover; background-position: center; }
[data-theme=foto_aur] { --blue: #D4A017; --blue-soft: #FBF1D4; --nav-on: #D4A017; --btn: #14130F; --photo: url(bg/aur.webp); }
.at-sample[data-t=foto_aur] { background-image: url(bg/t/aur.webp); background-size: cover; background-position: center; }
[data-theme=foto_aerian] { --blue: #2E7D4F; --blue-soft: #E1F1E6; --nav-on: #2E7D4F; --btn: #1E2A22; --photo: url(bg/aerian.webp); }
.at-sample[data-t=foto_aerian] { background-image: url(bg/t/aerian.webp); background-size: cover; background-position: center; }
[data-theme=foto_depozit] { --blue: #2563EB; --blue-soft: #E1EAFD; --nav-on: #2563EB; --btn: #1B2430; --photo: url(bg/depozit.webp); }
.at-sample[data-t=foto_depozit] { background-image: url(bg/t/depozit.webp); background-size: cover; background-position: center; }
[data-theme=foto_hub] { --blue: #D97706; --blue-soft: #FCEFD8; --nav-on: #D97706; --btn: #2A2410; --photo: url(bg/hub.webp); }
.at-sample[data-t=foto_hub] { background-image: url(bg/t/hub.webp); background-size: cover; background-position: center; }
body[data-theme^=foto_]:not(.embed) { --ov: rgba(244,246,250,.36); --glass: rgba(255,255,255,.82); --glass-side: rgba(255,255,255,.70); background: #0f1218; }
body[data-theme^=foto_]:not(.embed)::before { inset: -3%; background-image: linear-gradient(var(--ov), var(--ov)), var(--photo); background-size: cover; background-position: center; }
body[data-theme^=foto_]:not(.embed)[data-anim="1"]::before { animation: kb-photo-zoom 70s ease-in-out infinite alternate; }
@keyframes kb-photo-zoom { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
body[data-theme^=foto_]:not(.embed) .panel, body[data-theme^=foto_]:not(.embed) .card, body[data-theme^=foto_]:not(.embed) .kpi, body[data-theme^=foto_]:not(.embed) .col, body[data-theme^=foto_]:not(.embed) .board-col { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body[data-theme^=foto_]:not(.embed) .side { background: var(--glass-side); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-right-color: rgba(255,255,255,.4); }
body[data-theme^=foto_]:not(.embed) .page-head { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
html[data-mode=dark] body[data-theme^=foto_]:not(.embed)::before { filter: invert(1) hue-rotate(180deg); opacity: 1; --ov: rgba(6,10,18,.55); }
@media (prefers-color-scheme: dark) { html[data-mode=auto] body[data-theme^=foto_]:not(.embed)::before { filter: invert(1) hue-rotate(180deg); --ov: rgba(6,10,18,.55); } }
@media (prefers-reduced-motion: reduce) { body[data-theme^=foto_]:not(.embed)[data-anim="1"]::before { animation: none; } }
.theme-pop .tp-sec { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
/* the background picture is drawn above the page's own background (the page is its own stacking layer), also in dark mode */
body[data-theme] { isolation: isolate; }
/* dark mode also for the windows opened over the page (trip, order, confirmations): the browser draws them apart from
   the page, so they are darkened on their own; their photos / frames are turned back as everywhere */
html[data-mode=dark] dialog { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { html[data-mode=auto] dialog { filter: invert(1) hue-rotate(180deg); } }
/* the UIT code (16+ characters) always fits: the field never gets narrower than ~20 characters, the button goes below when there is no room */
.uit-wrap { flex-wrap: wrap; } .uit-wrap input, input[name=uit] { min-width: 21ch; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .03em; }
.uit-wrap input { flex: 1 1 21ch; }
/* maps: Street View button and the right-click menu */
.kb-sv-btn { width: 34px; height: 34px; border: 2px solid rgba(0,0,0,.2); border-radius: 6px; background: #fff; font-size: 17px; line-height: 1; cursor: pointer; background-clip: padding-box; }
.kb-sv-btn:hover { background: #f4f4f4; } .kb-sv-btn.on { background: #FFD60A; border-color: #E0B400; }
.kb-sv-arm, .kb-sv-arm .leaflet-interactive { cursor: crosshair !important; }
.kb-map-menu { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .kb-map-menu a { font-weight: 700; text-decoration: none; } .kb-map-menu small { color: #888; }
/* ---------- the account, top right (name, role, company; menu with settings, language, sign out) ---------- */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -8px 0 10px; position: relative; z-index: 30; }
body.embed .topbar { display: none; }
.user-menu { position: relative; }
.um-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 5px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.06); }
.um-btn:hover { box-shadow: 0 2px 10px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.08); }
.um-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--blue), #5E5CE6); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.um-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; max-width: 220px; }
.um-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.um-txt small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.um-caret { color: var(--muted); transition: transform .15s; } .um-btn[aria-expanded="true"] .um-caret { transform: rotate(180deg); }
.um-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: var(--surface); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 2px; }
.um-pop[hidden] { display: none; }
.um-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.um-head b { display: block; font-size: 14px; } .um-head small { color: var(--muted); font-size: 12px; }
.um-pop > a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.um-pop > a:hover { background: var(--fill); } .um-pop > a svg { color: var(--muted); }
.um-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-weight: 600; font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 4px; }
.um-pop > a.um-out { color: var(--due-deep); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 2px; } .um-pop > a.um-out svg { color: var(--due-deep); }
@media (max-width: 900px) { .topbar { margin: 0 0 8px; } .um-txt { display: none; } .um-btn { padding: 0 6px 0 5px; } }
/* ---------- messages after a change: centred at the bottom, the same look everywhere, readable on the phone ---------- */
.toast { display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(520px, calc(100vw - 24px)); padding: 12px 18px 12px 14px; border-radius: 14px; background: #1D1D1F; box-shadow: 0 18px 50px rgba(0,0,0,.28); line-height: 1.35; text-align: left; font-weight: 600; }
.toast::before { content: '✓'; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #34C759; color: #fff; font-weight: 900; font-size: 13px; }
.toast.err { background: #2A1215; } .toast.err::before { content: '!'; background: #FF453A; }
.toast:empty { display: none; }
.undo-bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: min(520px, calc(100vw - 24px)); padding: 12px 10px 14px 14px; border-radius: 16px; overflow: hidden; }
.undo-bar .ub-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #34C759; color: #fff; font-weight: 900; font-size: 14px; }
.undo-bar .ub-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.undo-bar .ub-txt b { font-size: 14px; } .undo-bar .ub-txt small { color: #B9B9C0; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.undo-bar .ub-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #FFB547; transform-origin: left; }
.undo-bar.show .ub-time { animation: kb-undo-time 12s linear forwards; }
@keyframes kb-undo-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) {
  .undo-bar { grid-template-columns: auto 1fr auto; gap: 10px; }
  .undo-bar button.x { display: none; }
  .undo-bar .ub-undo { padding: 9px 12px; }
}
.undo-bar { grid-template-columns: auto 1fr auto auto auto; }
.undo-bar .ub-hist { background: transparent; color: #E5E5EA; border: 1px solid rgba(255,255,255,.25); }
.uh-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.uh-list li { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--fill); }
.uh-at { font-weight: 800; font-variant-numeric: tabular-nums; } .uh-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .uh-left { color: var(--muted); font-size: 12px; white-space: nowrap; }
.card-mailed { margin-left: 4px; font-size: 13px; color: var(--done-deep); }
@media (max-width: 600px) { .undo-bar { grid-template-columns: auto 1fr auto auto; } .uh-list li { grid-template-columns: 44px 1fr auto; } .uh-left { display: none; } }
/* the activity journal: what changed, before → after */
.jr-table td { vertical-align: top; } .jr-act { font-weight: 700; }
.jr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 260px; }
.jr-list.jr-long li:nth-child(n+5) { display: none; } .jr-list.jr-open li { display: list-item !important; }
.jr-f { color: var(--muted); font-weight: 600; } .jr-old { text-decoration: line-through; color: var(--due-deep); opacity: .8; } .jr-new { color: var(--done-deep); font-weight: 700; } .jr-arrow { color: var(--muted); }
.jr-only { align-self: end; margin-bottom: 10px; }
/* ⚙ on the page: the columns grouped as in the trip form */
.gear-cols .gear-grp { grid-column: 1 / -1; display: block; margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gear-cols .gear-grp:first-child { margin-top: 0; }
/* the locality type-ahead: saved points first, then the list of localities */
.ac-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
/* top bar: 👁 amounts, 🎨 look, then the account — side by side, never on top of each other */
.topbar .tb-slot { display: inline-flex; align-items: center; gap: 8px; }
.topbar .money-eye { height: 44px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.06); }
.topbar .money-eye:hover { background: var(--surface); box-shadow: 0 2px 10px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.08); }
@media (max-width: 900px) { .topbar .money-eye span { display: none; } .topbar .money-eye { padding: 0 12px; } }
/* dashboard: the small line under the number may take two lines (e.g. „mâine 4 · 06.11: 2 · 3 descărcări azi”) */
.dash-c .dash-s { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
/* ⚙ Coloane (Registru): add any field of the trip as a column */
.cp-add { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.cp-add-t b { display: block; font-size: 13.5px; } .cp-add-t small { color: var(--muted); font-size: 12px; }
.cp-add-list { max-height: 30vh; overflow: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.cp-add-list .gear-grp { margin: 8px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cp-add-list .check { font-size: 13px; }
.cp-add-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
/* ⚙ Coloane (Registru): every column in one list, by category; the order of the shown ones below */
.col-pop .cp-groups { flex: 1 1 auto; overflow: auto; padding: 4px 4px 4px 2px; min-height: 120px; }
.cp-grp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cp-grp .gear-grp { margin: 8px 0 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cp-grp .check { font-size: 13px; }
.cp-order { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.cp-order > summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 4px 2px; }
.cp-order[open] .cp-list { max-height: 34vh; overflow: auto; }
.cp-name { flex: 1; font-size: 13px; }