/* [cc 16.10] site26 · sx-panou.css: scena „Panou Încărcări/Descărcări/Rezervări” + „Panou Rapid de Comenzi” (parts/panou.ro.php), totul sub .sx-panou, doar px.
   Ce imită programul (fereastra v35, sertarul Panou Comenzi, bara de sus) rămâne luminos și pe tema închisă, ca fereastra din „Scanarea comenzilor cu AI”
   (culorile din css/load.unload.v2.css și css/main.css:1081-1163 ale programului); ceasul, legenda și firul urmează tema paginii (--sx-*). */
.sx-panou {
  --pn-n050: #f5f7fa; --pn-n100: #e4e7eb; --pn-n200: #cbd2d9; --pn-n300: #9aa5b1; --pn-n400: #7b8794;
  --pn-n500: #616e7c; --pn-n600: #52606d; --pn-n700: #3e4c59; --pn-n800: #323f4b; --pn-n900: #1f2933;
  --pn-sh1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  --pn-sh2: 0 3px 6px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .12);
  --pn-blue: #428bca; --pn-red: #e02424; --pn-ban: #cc6060; --pn-badge: #e06a6a;
  --pn-ease: cubic-bezier(.2, .8, .2, 1);
  --pn-th: 28px;
}
.sx-panou .sx-panou-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-panou .sx-panou-i { display: inline-block; flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.sx-panou [hidden] { display: none !important; }
.sx-panou .sx-panou-head { max-width: 680px; }

/* ---------- scena: ceasul sus, fereastra în stânga, sertarul în dreapta ---------- */
.sx-panou .sx-panou-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sx-panou .sx-panou-clock { margin-bottom: 32px; }
.sx-panou .sx-panou-bar { margin-bottom: 14px; }
.sx-panou .sx-panou-cap { margin: 44px 0 12px; }
@media (min-width: 900px) {
  .sx-panou .sx-panou-stage { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "clock clock" "bar cap" "win pc" "win key"; column-gap: 36px; }
  .sx-panou .sx-panou-clock { grid-area: clock; margin-bottom: 44px; }
  .sx-panou .sx-panou-bar { grid-area: bar; align-self: end; }
  .sx-panou .sx-panou-win { grid-area: win; }
  .sx-panou .sx-panou-cap { grid-area: cap; align-self: end; margin: 0 0 14px; }
  .sx-panou .sx-panou-pc { grid-area: pc; }
  .sx-panou .sx-panou-key { grid-area: key; }
}
@media (min-width: 1080px) {
  .sx-panou .sx-panou-stage { grid-template-columns: minmax(0, 1fr) 356px; column-gap: 56px; }
}

/* ---------- ceasul (tema paginii) ---------- */
.sx-panou .sx-panou-clock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "now track replay"; align-items: center; column-gap: clamp(24px, 3.4vw, 52px); padding: 22px 0 20px; border-top: 1px solid var(--sx-hair); border-bottom: 1px solid var(--sx-hair); }
.sx-panou .sx-panou-now { grid-area: now; display: flex; align-items: center; gap: 16px; }
.sx-panou .sx-panou-dial { width: 60px; height: 60px; flex: none; overflow: visible; }
.sx-panou .sx-panou-dial-o { fill: none; stroke: var(--sx-hair-strong); stroke-width: 1.5; }
.sx-panou .sx-panou-dial-t { fill: none; stroke: var(--sx-ink3); stroke-width: 1.4; stroke-linecap: round; }
.sx-panou .sx-panou-hh, .sx-panou .sx-panou-mh { stroke: var(--sx-ink); stroke-linecap: round; transform-box: view-box; transform-origin: 24px 24px; transition: transform .22s var(--pn-ease); }
.sx-panou .sx-panou-hh { stroke-width: 3; }
.sx-panou .sx-panou-mh { stroke-width: 1.8; }
.sx-panou .sx-panou-dial-c { fill: var(--sx-ink); }
.sx-panou .sx-panou-now-t { display: grid; justify-items: start; min-width: 0; }
.sx-panou .sx-panou-now-l { font-family: var(--sx-f-sans); font-size: 12.5px; font-weight: 500; line-height: 20px; letter-spacing: .12em; word-spacing: 0; text-transform: uppercase; color: var(--sx-ink3); }
.sx-panou .sx-panou-now-v { display: block; margin: 0 0 6px; font-family: var(--sx-f-sans); font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sx-ink); }
.sx-panou .sx-panou-now-d { font-size: 14px; line-height: 1.4; color: var(--sx-ink2); white-space: nowrap; }
.sx-panou .sx-panou-now-x { font-size: 13px; line-height: 1.4; color: var(--sx-ink3); white-space: nowrap; }
.sx-panou .sx-panou-track { grid-area: track; position: relative; height: 64px; min-width: 0; }
.sx-panou .sx-panou-rail, .sx-panou .sx-panou-fill { position: absolute; top: 24px; left: 0; height: 2px; border-radius: 2px; pointer-events: none; }
.sx-panou .sx-panou-rail { right: 0; background: var(--sx-hair-strong); }
.sx-panou .sx-panou-fill { width: calc(var(--pn-th) / 2 + var(--pn-p, 0) * (100% - var(--pn-th))); background: var(--sx-ink); }
.sx-panou .sx-panou-tick { position: absolute; top: 17px; left: calc(var(--pn-th) / 2 + var(--x) * (100% - var(--pn-th))); width: 1px; height: 6px; margin-left: -.5px; background: var(--sx-ink3); opacity: .55; pointer-events: none; }
.sx-panou .sx-panou-tick.is-h { top: 13px; height: 10px; opacity: .9; }
.sx-panou .sx-panou-hl { position: absolute; top: 38px; left: calc(var(--pn-th) / 2 + var(--x) * (100% - var(--pn-th))); transform: translateX(-50%); font-size: 12px; line-height: 16px; color: var(--sx-ink3); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
/* semnele de pe riglă: fiecare punct al filei, la ora lui planificată; forma = starea lui acum (semnele R001 din sx.css) */
.sx-panou .sx-panou-mk { position: absolute; top: 25px; left: calc(var(--pn-th) / 2 + var(--x) * (100% - var(--pn-th))); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sx-bg0); box-shadow: inset 0 0 0 1.5px var(--sx-mk-info); pointer-events: none; transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.sx-panou .sx-panou-mk[data-kind="late"] { background: var(--sx-mk-danger); box-shadow: 0 0 0 2px var(--sx-bg0); }
.sx-panou .sx-panou-mk[data-kind="wait"] { background: conic-gradient(var(--sx-mk-warn) 0 180deg, var(--sx-bg0) 0); box-shadow: inset 0 0 0 1.5px var(--sx-mk-warn), 0 0 0 2px var(--sx-bg0); }
.sx-panou .sx-panou-mk[data-kind="done"] { background: var(--sx-ink3); box-shadow: 0 0 0 2px var(--sx-bg0); opacity: .45; }
.sx-panou .sx-panou-stage[data-tab="load"] .sx-panou-mk[data-tab="unload"], .sx-panou .sx-panou-stage[data-tab="unload"] .sx-panou-mk[data-tab="load"], .sx-panou .sx-panou-stage[data-tab="rz"] .sx-panou-mk:not([data-rz]) { display: none; }
.sx-panou .sx-panou-range { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: grab; background: transparent; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.sx-panou .sx-panou-range:active { cursor: grabbing; }
.sx-panou .sx-panou-range:disabled { cursor: default; }
.sx-panou .sx-panou-range::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sx-panou .sx-panou-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--pn-th); height: 100%; border: 0; background: transparent; }
.sx-panou .sx-panou-range::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sx-panou .sx-panou-range::-moz-range-thumb { width: var(--pn-th); height: 64px; border: 0; border-radius: 0; background: transparent; }
.sx-panou .sx-panou-knob { position: absolute; z-index: 1; top: 25px; left: calc(var(--pn-th) / 2 + var(--pn-p, 0) * (100% - var(--pn-th))); width: var(--pn-th); height: var(--pn-th); margin: calc(var(--pn-th) / -2) 0 0 calc(var(--pn-th) / -2); display: grid; place-items: center; border-radius: 50%; background: var(--sx-bg0); border: 2px solid var(--sx-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); pointer-events: none; transition: transform .2s var(--pn-ease); }
.sx-panou .sx-panou-knob i { display: block; width: 8px; height: 10px; border-left: 2px solid var(--sx-ink3); border-right: 2px solid var(--sx-ink3); }
.sx-panou .sx-panou-range:focus-visible ~ .sx-panou-knob { outline: 2px solid var(--sx-focus); outline-offset: 3px; }
.sx-panou .sx-panou-range:active ~ .sx-panou-knob { transform: scale(1.12); }
.sx-panou .sx-panou-stage.is-playing .sx-panou-knob { transition: left .09s linear, transform .2s var(--pn-ease); }
.sx-panou .sx-panou-stage.is-playing .sx-panou-fill { transition: width .09s linear; }
.sx-panou .sx-panou-replay { grid-area: replay; justify-self: end; padding: 2px 8px 2px 2px; gap: 10px; border: 0; background: none; border-radius: var(--sx-r-pill); min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--sx-ink2); }
.sx-panou .sx-panou-replay-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--sx-hair-strong); background: var(--sx-panel); color: var(--sx-ink); transition: border-color var(--sx-t-fast) ease, color var(--sx-t-fast) ease, transform .4s var(--pn-ease); }
.sx-panou .sx-panou-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-panou .sx-panou-replay:hover { color: var(--sx-accent-text); }
.sx-panou .sx-panou-replay:hover .sx-panou-replay-i { border-color: var(--sx-accent); color: var(--sx-accent); transform: rotate(-40deg); }
.sx-panou .sx-panou-replay:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 3px; border-radius: var(--sx-r-pill); }
@media (max-width: 759px) {
  .sx-panou .sx-panou-clock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now replay" "track track"; row-gap: 14px; padding: 18px 0 14px; }
  .sx-panou .sx-panou-dial { width: 50px; height: 50px; }
  .sx-panou .sx-panou-now { gap: 14px; }
  .sx-panou .sx-panou-now-v { font-size: 36px; }
  .sx-panou .sx-panou-replay { padding-right: 0; font-size: 13.5px; gap: 8px; }
}
@media (max-width: 559px) {
  .sx-panou .sx-panou-hl.is-odd { display: none; }
  .sx-panou .sx-panou-now-x { white-space: normal; }
}
@media (max-width: 379px) {
  .sx-panou .sx-panou-replay { font-size: 0; gap: 0; padding: 2px; }
}

/* ---------- bara de sus a programului: iconița cu număr + bula ei ---------- */
.sx-panou .sx-panou-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.sx-panou .sx-panou-scs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(23, 32, 43, .12), 0 8px 18px -8px rgba(23, 32, 43, .3); color-scheme: light; }
.sx-panou .sx-panou-sc { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--pn-n600); }
.sx-panou .sx-panou-sc svg { width: 21px; height: 21px; fill: currentColor; }
.sx-panou .sx-panou-sc--lu { color: #2f6ea3; background: #eaf2f9; }
.sx-panou .sx-panou-badge { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: var(--pn-badge); color: #fff; font-family: var(--sx-f-sans); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sx-panou .sx-panou-tip { position: relative; flex: 1 1 280px; min-width: 0; max-width: 620px; margin-left: 4px; padding: 7px 11px 8px; border-radius: 6px; background: var(--pn-n800); color: #fff; font-family: var(--sx-f-sans); font-size: 12.5px; line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.sx-panou .sx-panou-tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.sx-panou .sx-panou-tip-b { font-weight: 600; }
.sx-panou .sx-panou-tip-a { color: #d6dce3; }
@media (max-width: 559px) {
  .sx-panou .sx-panou-tip { flex-basis: 100%; margin-left: 0; }
  .sx-panou .sx-panou-tip::before { left: 52px; top: -5px; margin-top: 0; }
}

/* ---------- fereastra Încărcări/Descărcări (programul, v35) ---------- */
.sx-panou .sx-panou-win { container: sxpanouwin / inline-size; position: relative; z-index: 1; min-width: 0; overflow-anchor: none; border-radius: 12px; background: var(--pn-n050); box-shadow: var(--sx-shadow-win); overflow: hidden; color: var(--pn-n900); font-family: var(--sx-f-sans); font-size: 14px; line-height: 1.3; letter-spacing: -.012em; word-spacing: 0; color-scheme: light; }
.sx-panou .sx-panou-w-head { display: flex; align-items: center; padding: 14px 22px 2px; background: #fff; }
.sx-panou .sx-panou-w-title { font-size: 15px; font-weight: 400; color: var(--pn-n600); }
.sx-panou .sx-panou-w-x { margin-left: auto; font-size: 22px; line-height: 1; color: var(--pn-n600); }
.sx-panou .sx-panou-w-tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 22px 14px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sx-panou .sx-panou-tabs { display: flex; gap: 0; padding: 4px; border-radius: 8px; background: var(--pn-n100); }
.sx-panou .sx-panou-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font-family: var(--sx-f-sans); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--pn-n600); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.sx-panou .sx-panou-tabs button:hover { color: var(--pn-n900); }
.sx-panou .sx-panou-tabs button[aria-pressed="true"] { background: #fff; color: var(--pn-n900); box-shadow: var(--pn-sh1); cursor: default; }
.sx-panou .sx-panou-tabs button:focus-visible { outline: 2px solid var(--pn-blue); outline-offset: 2px; }
.sx-panou .sx-panou-tabs .sx-panou-i { width: 14px; height: 14px; stroke-width: 2; }
.sx-panou .sx-panou-tc { display: inline-block; margin-left: 1px; font-weight: 400; color: var(--pn-n500); font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-tabs button[aria-pressed="true"] .sx-panou-tc { color: var(--pn-n600); }
.sx-panou .sx-panou-azi { display: inline-flex; align-items: center; height: 32px; margin-left: 6px; padding: 0 12px; border-radius: 6px; background: var(--pn-n800); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.sx-panou .sx-panou-date { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 6px; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--pn-n200); font-size: 14px; color: var(--pn-n900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-date .sx-panou-i { color: var(--pn-n600); }
.sx-panou .sx-panou-w-body { position: relative; min-height: 356px; padding: 18px 22px 22px; }
.sx-panou .sx-panou-lu { display: grid; row-gap: 20px; }
.sx-panou .sx-panou-gh { margin: 0 0 8px; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--pn-n600); font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-g[data-g="late"] .sx-panou-gh { color: var(--pn-n900); }
.sx-panou .sx-panou-gb--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sx-panou .sx-panou-gb--rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.sx-panou .sx-panou-lu[data-tab="load"] .sx-panou-it[data-tab="unload"], .sx-panou .sx-panou-lu[data-tab="unload"] .sx-panou-it[data-tab="load"] { display: none; }
.sx-panou .sx-panou-empty { margin: 0; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--pn-n600); }

/* un punct: card („întârziate”, „așteaptă”) sau rând („urmează”, „Finalizate azi”, rezervări) — același element, ca să se poată muta */
.sx-panou .sx-panou-it { position: relative; min-width: 0; border-radius: 6px; cursor: default; transition: opacity .2s ease, box-shadow .2s ease, background-color .25s ease; }
.sx-panou .sx-panou-it > * { display: none; min-width: 0; }
.sx-panou .sx-panou-it .sx-panou-chev { width: 14px; height: 14px; color: var(--pn-n500); }
.sx-panou .sx-panou-lb { color: var(--pn-n500); font-size: 12px; }
.sx-panou .sx-panou-cc { margin-left: 4px; }
.sx-panou .sx-panou-it[data-kind="late"], .sx-panou .sx-panou-it[data-kind="wait"] { display: grid; grid-template-columns: auto minmax(0, 1fr) 14px; grid-template-areas: "big tr ch" "big wh ch"; align-items: center; column-gap: 14px; row-gap: 1px; min-height: 56px; padding: 8px 12px 8px 14px; }
.sx-panou .sx-panou-it[data-kind="late"] { background: var(--pn-n800); color: #fff; box-shadow: var(--pn-sh2); }
.sx-panou .sx-panou-it[data-kind="wait"] { background: #fff; color: var(--pn-n900); box-shadow: var(--pn-sh1); }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-it-big, .sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-it-big { display: block; grid-area: big; min-width: 76px; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-it-tr, .sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-it-tr { display: block; grid-area: tr; font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-it-wh, .sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-it-wh { display: flex; grid-area: wh; font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-it-wh { color: var(--pn-n200); }
.sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-it-wh { color: var(--pn-n600); }
.sx-panou .sx-panou-it-cp { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-panou .sx-panou-it-ct { display: block; flex: none; white-space: pre; }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-chev, .sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-chev { display: block; grid-area: ch; }
.sx-panou .sx-panou-it[data-kind="late"] .sx-panou-chev { color: var(--pn-n200); }
.sx-panou .sx-panou-it[data-kind="next"], .sx-panou .sx-panou-it[data-kind="done"], .sx-panou .sx-panou-it[data-kind="rz"] { display: grid; grid-template-columns: 50px minmax(0, 1.15fr) 96px minmax(0, 1fr) 76px 14px; grid-template-areas: "t oc tr wh st ch"; align-items: center; column-gap: 14px; min-height: 40px; padding: 0 12px; }
.sx-panou .sx-panou-it[data-kind="done"] { grid-template-columns: 50px minmax(0, 1fr) 96px minmax(0, .8fr) 184px 14px; }
.sx-panou .sx-panou-it[data-kind="rz"] { grid-template-columns: 50px minmax(0, 1.1fr) 96px minmax(0, .8fr) minmax(0, 1.25fr) 14px; grid-template-areas: "t oc tr wh rv ch"; }
.sx-panou .sx-panou-it.is-z:not([data-kind="late"]):not([data-kind="wait"]) { background: #fff; }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-t, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-t, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-t { display: block; grid-area: t; font-size: 15px; color: var(--pn-n900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-oc, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-oc, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-oc { display: block; grid-area: oc; font-size: 13px; color: var(--pn-n600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-tr, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-tr, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-tr { display: block; grid-area: tr; font-size: 15px; color: var(--pn-n900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-wh, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-wh, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-wh { display: flex; grid-area: wh; font-size: 13px; color: var(--pn-n500); white-space: nowrap; overflow: hidden; }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-st, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-st { display: block; grid-area: st; justify-self: end; font-size: 13px; color: var(--pn-n500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-rv { display: block; grid-area: rv; font-size: 13px; color: var(--pn-n600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-panou .sx-panou-it-ti { display: inline-flex; width: 16px; margin-right: 6px; color: var(--pn-n500); }
.sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-chev, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-chev, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-chev { display: block; grid-area: ch; }
.sx-panou .sx-panou-it.is-soon > .sx-panou-it-st { color: var(--pn-n900); font-weight: 500; }
.sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-t, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-tr { color: var(--pn-n600); }
.sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-oc { color: var(--pn-n500); }
/* punctul abia mutat: un inel care se stinge */
.sx-panou .sx-panou-it.is-new::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: sx-panou-ring 1s ease-out both; }
@keyframes sx-panou-ring { 0% { box-shadow: 0 0 0 0 rgba(66, 139, 202, .6); } 100% { box-shadow: 0 0 0 10px rgba(66, 139, 202, 0); } }
/* camionul ales: punctul lui iese în față, restul se estompează */
.sx-panou .sx-panou-stage.has-hot .sx-panou-it[data-truck]:not(.is-hot) { opacity: .4; }
.sx-panou .sx-panou-it.is-hot { box-shadow: 0 0 0 2px var(--pn-blue), var(--pn-sh1); }
/* „Finalizate azi · N”: rândul care deschide lista */
.sx-panou .sx-panou-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 28px; margin: 0; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; font-family: var(--sx-f-sans); font-size: 14px; font-weight: 500; line-height: 1; color: var(--pn-n600); cursor: pointer; font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-more:hover { background: var(--pn-n100); color: var(--pn-n900); }
.sx-panou .sx-panou-more:focus-visible { outline: 2px solid var(--pn-blue); outline-offset: 2px; }
.sx-panou .sx-panou-more .sx-panou-i { color: var(--pn-n500); transition: transform .2s ease; }
.sx-panou .sx-panou-more[aria-expanded="true"] .sx-panou-i { transform: rotate(180deg); }
.sx-panou .sx-panou-g[data-g="done"] .sx-panou-gb { display: none; margin-top: 8px; }
.sx-panou .sx-panou-g[data-g="done"].is-all .sx-panou-gb { display: grid; }
.sx-panou .sx-panou-tc.is-bump, .sx-panou .sx-panou-badge.is-bump { animation: sx-panou-bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sx-panou-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@container sxpanouwin (max-width: 759px) {
  .sx-panou .sx-panou-date { display: none; }
}
@container sxpanouwin (max-width: 699px) {
  .sx-panou .sx-panou-gb--cards { grid-template-columns: minmax(0, 1fr); }
  .sx-panou .sx-panou-w-body { min-height: 420px; }
}
@container sxpanouwin (max-width: 559px) {
  .sx-panou .sx-panou-w-head { padding: 12px 14px 0; }
  .sx-panou .sx-panou-w-tools { padding: 10px 14px 12px; }
  .sx-panou .sx-panou-tabs { flex: 1 1 auto; min-width: 0; }
  .sx-panou .sx-panou-tabs button { flex: 1 1 0; min-width: 0; gap: 3px; padding: 0 4px; font-size: 13.5px; }
  .sx-panou .sx-panou-azi { display: none; }
  .sx-panou .sx-panou-w-body { min-height: 424px; padding: 14px 12px 16px; }
  .sx-panou .sx-panou-lu { row-gap: 16px; }
  .sx-panou .sx-panou-gb--cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-panou .sx-panou-it[data-kind="late"], .sx-panou .sx-panou-it[data-kind="wait"] { min-height: 52px; column-gap: 12px; padding: 8px 12px; }
  .sx-panou .sx-panou-it[data-kind="late"] .sx-panou-it-big, .sx-panou .sx-panou-it[data-kind="wait"] .sx-panou-it-big { min-width: 66px; font-size: 20px; }
  .sx-panou .sx-panou-it[data-kind="next"], .sx-panou .sx-panou-it[data-kind="done"], .sx-panou .sx-panou-it[data-kind="rz"] { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "t tr st" "t wh st"; row-gap: 1px; column-gap: 10px; min-height: 0; padding: 8px 10px; }
  .sx-panou .sx-panou-it[data-kind="done"], .sx-panou .sx-panou-it[data-kind="rz"] { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "t tr" "t wh" "t st"; }
  .sx-panou .sx-panou-it[data-kind="rz"] { grid-template-areas: "t tr" "t wh" "t rv"; }
  .sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-it-oc, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-oc, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-it-oc,
  .sx-panou .sx-panou-it[data-kind="next"] > .sx-panou-chev, .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-chev, .sx-panou .sx-panou-it[data-kind="rz"] > .sx-panou-chev { display: none; }
  .sx-panou .sx-panou-it[data-kind="done"] > .sx-panou-it-st { justify-self: start; }
}

/* ---------- Panou Comenzi: sertarul din dreapta (programul, v34) ---------- */
.sx-panou .sx-panou-cap { font-family: var(--sx-f-sans); font-size: 12.5px; font-weight: 500; line-height: 20px; letter-spacing: .12em; word-spacing: 0; text-transform: uppercase; color: var(--sx-ink3); }
.sx-panou .sx-panou-pc { position: relative; min-width: 0; border: 1px solid rgba(23, 24, 26, .15); border-radius: 10px; background: #e6e9ee; box-shadow: 0 2px 9px 2px rgba(0, 0, 0, .14); color: #1a1a1a; font-family: var(--sx-f-sans); letter-spacing: -.005em; color-scheme: light; }
.sx-panou .sx-panou-pc-h { margin: 0; height: 28px; border-radius: 9px 9px 0 0; border-bottom: 1px solid rgba(23, 24, 26, .15); background: #d9d9d9; font-size: 14px; font-weight: 700; line-height: 28px; text-align: center; color: #000; letter-spacing: 0; }
.sx-panou .sx-panou-pc-l { list-style: none; margin: 0; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.sx-panou .sx-panou-pc-l > li { list-style: none; position: relative; margin: 0; padding: 0; }
.sx-panou .sx-panou-tk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "plate ic pl" "loc loc loc"; align-items: center; column-gap: 7px; row-gap: 2px; width: 100%; margin: 0; padding: 7px 11px 7px 8px; border: 0; border-left: 3px solid transparent; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); font-family: var(--sx-f-sans); font-size: 14px; line-height: 1.35; color: #1a1a1a; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s ease, border-color .15s ease, background-color .25s ease, opacity .2s ease; }
.sx-panou .sx-panou-tk:hover, .sx-panou .sx-panou-tk.is-hot { box-shadow: 0 3px 10px rgba(0, 0, 0, .13); border-left-color: var(--pn-blue); }
.sx-panou .sx-panou-tk[aria-pressed="true"] { background: #fff7cc; border-left-color: var(--pn-blue); }
.sx-panou .sx-panou-tk:focus-visible { outline: 2px solid var(--pn-blue); outline-offset: 2px; }
.sx-panou .sx-panou-stage.has-hot .sx-panou-tk[data-truck]:not(.is-hot) { opacity: .55; }
.sx-panou .sx-panou-tk-plate { grid-area: plate; font-weight: 500; white-space: nowrap; }
.sx-panou .sx-panou-tk-plate b { font-weight: 700; color: #1a1a1a; }
.sx-panou .sx-panou-tk-ic { grid-area: ic; display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: #333; }
.sx-panou .sx-panou-tk .sx-panou-i { width: 15px; height: 15px; stroke-width: 1.8; vertical-align: 0; }
.sx-panou .sx-panou-tk-w { display: none; color: var(--pn-red); }
.sx-panou .sx-panou-tk.is-late .sx-panou-tk-w { display: inline-flex; }
.sx-panou .sx-panou-tk-s { display: inline-flex; align-items: center; gap: 2px; }
.sx-panou .sx-panou-tk-pl { grid-area: pl; font-size: 11.5px; color: #6f757d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-panou .sx-panou-tk-loc { grid-area: loc; min-width: 0; font-size: 12px; color: #5a5f66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-panou .sx-panou-tk-loc b { font-weight: 700; color: #3c4046; }
.sx-panou .sx-panou-tk-ar { margin: 0 2px; font-weight: 700; color: var(--pn-blue); }
.sx-panou .sx-panou-tk-tip { display: none; position: absolute; z-index: 5; left: 10px; bottom: calc(100% + 8px); padding: 5px 9px; border-radius: 4px; background: #000; color: #fff; font-size: 12px; line-height: 1.45; white-space: nowrap; text-align: left; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.sx-panou .sx-panou-tk-tip::after { content: ""; position: absolute; left: 18px; top: 100%; border: 5px solid transparent; border-top-color: #000; }
.sx-panou .sx-panou-tk.is-hot .sx-panou-tk-tip { display: block; }
.sx-panou .sx-panou-tk.is-flash { animation: sx-panou-flash 1.1s ease-out; }
@keyframes sx-panou-flash { 0% { background-color: #fff1a8; } 100% { background-color: #fff; } }
.sx-panou .sx-panou-tk--free { display: flex; align-items: center; cursor: default; }
.sx-panou .sx-panou-tk-f { display: inline-flex; margin-right: 5px; color: var(--pn-ban); vertical-align: -2px; }

/* legenda iconițelor din sertar (tema paginii; iconițele pe alb, ca în program) */
.sx-panou .sx-panou-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.sx-panou .sx-panou-key > li { list-style: none; display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--sx-ink2); }
.sx-panou .sx-panou-key-i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: #fff; color: #333; box-shadow: 0 0 0 1px rgba(23, 32, 43, .1); }
.sx-panou .sx-panou-key-i .sx-panou-i { width: 15px; height: 15px; vertical-align: 0; }
.sx-panou .sx-panou-key-i--w { color: var(--pn-red); }
.sx-panou .sx-panou-key-i--f { color: var(--pn-ban); }

/* firul dintre camionul ales și punctul lui (doar cu două coloane) */
.sx-panou .sx-panou-wire { z-index: 3; opacity: 0; transition: opacity .2s ease; }
.sx-panou .sx-panou-wire.is-on { opacity: 1; }
.sx-panou .sx-panou-wire path { stroke-width: 1.5; stroke-dasharray: 6 7; }
@media (max-width: 899px) { .sx-panou .sx-panou-wire { display: none; } }

/* tema închisă: ce imită programul rămâne alb, cu gradul ferestrei de pe pagina 1 */
html[data-theme="dark"] .sx-panou .sx-panou-win, html[data-theme="dark"] .sx-panou .sx-panou-pc, html[data-theme="dark"] .sx-panou .sx-panou-scs, html[data-theme="dark"] .sx-panou .sx-panou-key-i { filter: brightness(.92) contrast(1.06); }
html[data-theme="dark"] .sx-panou .sx-panou-win { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .sx-panou .sx-panou-pc { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .sx-panou .sx-panou-tip { background: #2b3540; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-theme="dark"] .sx-panou .sx-panou-knob { box-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

@media (prefers-reduced-motion: reduce) {
  .sx-panou .sx-panou-it, .sx-panou .sx-panou-tk, .sx-panou .sx-panou-knob, .sx-panou .sx-panou-fill, .sx-panou .sx-panou-hh, .sx-panou .sx-panou-mh, .sx-panou .sx-panou-wire, .sx-panou .sx-panou-tabs button, .sx-panou .sx-panou-more .sx-panou-i, .sx-panou .sx-panou-replay-i { transition: none; }
  .sx-panou .sx-panou-tc.is-bump, .sx-panou .sx-panou-badge.is-bump, .sx-panou .sx-panou-tk.is-flash, .sx-panou .sx-panou-it.is-new::after { animation: none; }
}