/* =============================================================================
   OTMS — _loads-detail.css  (PREMIUM REBUILD)
   Command-center podglądu ładunku: hero strip, wstążka trasy, oś czasu,
   kafelki metryk, zbalansowane kolumny, bogate panele. Wszystko na tokenach.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────
   HERO — pasek dowodzenia (pełna szerokość)
   ───────────────────────────────────────────────────────────── */
.ld-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.6fr) minmax(300px, 1fr);
    gap: var(--sp-5);
    align-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dir, #2563eb) 16%, var(--card)) 0%, var(--card) 48%),
        var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-md);
    overflow: visible;
}
.ld-hero::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: var(--r-md) 0 0 var(--r-md);
    background: linear-gradient(180deg, var(--dir, #2563eb), color-mix(in srgb, var(--dir, #2563eb) 50%, transparent));
}

.ld-hero-id { min-width: 0; }
.ld-hero-client { display: flex; flex-direction: column; gap: 3px; }
.ld-hero-client-name {
    font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
}
.ld-hero-nip {
    font-size: 11px; color: var(--text-muted); font-weight: 600;
    background: var(--st-neutral-bg); padding: 1px 7px; border-radius: var(--r-xs); align-self: flex-start;
}
.ld-hero-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-3); }
.ld-hero-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
    background: var(--st-neutral-bg); color: var(--text-soft);
    border: 1px solid var(--border);
}
.ld-hero-chip svg { opacity: .8; }
.ld-hero-chip.company { background: color-mix(in srgb, var(--cc, #2563eb) 13%, var(--card)); color: var(--cc, #2563eb); border-color: color-mix(in srgb, var(--cc, #2563eb) 32%, transparent); }
.ld-hero-chip.sub     { background: color-mix(in srgb, var(--st-customs) 12%, var(--card)); color: var(--st-customs); border-color: color-mix(in srgb, var(--st-customs) 30%, transparent); }
.ld-hero-chip.dir     { background: color-mix(in srgb, var(--c, #2563eb) 14%, var(--card)); color: var(--c, #2563eb); border-color: color-mix(in srgb, var(--c, #2563eb) 35%, transparent); }
.ld-hero-chip.broker  { background: color-mix(in srgb, var(--st-customs) 10%, var(--card)); color: var(--st-customs); }
.ld-hero-chip.muted   { background: transparent; color: var(--text-muted); border-style: dashed; }

/* ── Wstążka trasy: SKĄD → (odprawy) → DOKĄD ── */
.ld-route-ribbon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); }
.ld-rr-node { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ld-rr-node.unload { flex-direction: row-reverse; text-align: right; }
.ld-rr-flag {
    width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ld-rr-node.load   .ld-rr-flag { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-success) 35%, transparent); }
.ld-rr-node.unload .ld-rr-flag { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-info) 35%, transparent); }
.ld-rr-city { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.ld-rr-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.ld-rr-node.unload .ld-rr-date { justify-content: flex-end; }
.ld-rr-fix { background: var(--st-danger); color: #fff; font-size: 9px; font-weight: 800; padding: 0 5px; border-radius: 3px; letter-spacing: .04em; }

.ld-rr-track { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) var(--sp-3) 0; min-width: 80px; }
.ld-rr-line {
    position: absolute; top: 23px; left: 6px; right: 6px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--st-success), var(--st-customs) 50%, var(--st-info));
}
.ld-rr-line::before, .ld-rr-line::after {
    content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%);
}
.ld-rr-line::before { left: -2px; background: var(--st-success); }
.ld-rr-line::after  { right: -2px; background: var(--st-info); }
.ld-rr-truck {
    position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-top: 8px;
    background: var(--card); border: 2px solid var(--brand-blue); color: var(--brand-blue);
    box-shadow: var(--shadow-sm);
}
.ld-rr-customs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.ld-rr-customs-chip {
    display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
    background: var(--st-customs-bg); color: var(--st-customs); border: 1px solid var(--st-customs-border);
}
.ld-rr-customs-chip.done { background: var(--st-success-bg); color: var(--st-success); border-color: var(--st-success-border); }

/* ── Kafelki metryk ── */
.ld-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.ld-metric {
    background: color-mix(in srgb, var(--bg) 60%, var(--card));
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; min-width: 0;
    align-items: center; justify-content: center; text-align: center;
}
.ld-metric-label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.ld-metric-val { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-metric-val.pos { color: var(--fin-margin-pos); }
.ld-metric-val.neg { color: var(--fin-margin-neg); }
.ld-metric-val.ark-weight { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); font-size: 14px; }
.ld-metric-sub { font-size: 10.5px; color: var(--text-muted); }
.ld-metric-progress { height: 6px; background: var(--st-neutral-bg); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.ld-metric-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)); border-radius: 3px; transition: width var(--t); }

/* ─────────────────────────────────────────────────────────────
   GRID 3-strefowy (zbalansowany — środek dostaje oś trasy)
   ───────────────────────────────────────────────────────────── */
.ld-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(330px, 0.92fr);
    gap: var(--sp-4); align-items: start;
}
.ld-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (min-width: 1601px) {
    .ld-col-side { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
}
@media (max-width: 1500px) {
    .ld-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ld-col-side { grid-column: 1 / -1; }
    .ld-col-side { flex-direction: row; flex-wrap: wrap; }
    .ld-col-side > .panel { flex: 1 1 320px; }
}
@media (max-width: 1024px) {
    .ld-hero { grid-template-columns: 1fr; gap: var(--sp-4); }
    .ld-grid { grid-template-columns: 1fr; }
    .ld-col-side { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────
   PANELE — wersja premium (scoped do podglądu, nie rusza innych modułów)
   ───────────────────────────────────────────────────────────── */
.ld-grid .panel, .ld-hero { box-shadow: var(--shadow); }
.ld-grid .panel { border-radius: var(--r-md); transition: box-shadow var(--t); }
.ld-grid .panel:hover { box-shadow: var(--shadow-md); }
.ld-grid .panel-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, var(--card)), var(--card));
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.ld-grid .panel-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.ld-grid .panel-title svg { color: var(--brand-blue); }
.ld-grid .panel-body { padding: var(--sp-4); }
.panel-head-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.panel-title.t-sales   { color: var(--brand-blue); }
.panel-title.t-sales   svg { color: var(--brand-blue); }
.panel-title.t-special { color: var(--st-warning); }
.panel-title.t-special svg { color: var(--st-warning); }
.panel-title.t-income  { color: var(--st-success); }
.panel-title.t-income  svg { color: var(--st-success); }
.panel-header.h-sales  { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-blue) 9%, var(--card)), var(--card)); }
.panel-accent.sales    { border-left-color: var(--brand-blue); }

/* ── Key-value grid (klient i zamówienie) ── */
.kv-grid { display: flex; flex-direction: column; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: none; }
.kv-k { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.kv-v { font-size: 12.5px; color: var(--text); text-align: right; }

/* ─────────────────────────────────────────────────────────────
   OŚ CZASU TRASY (timeline)
   ───────────────────────────────────────────────────────────── */
.ld-timeline { display: flex; flex-direction: column; }
.ld-tl-item { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-2); }
.ld-tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.ld-tl-node {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; z-index: 1;
    display: flex; align-items: center; justify-content: center; margin-top: 6px;
    background: var(--card); color: var(--node, var(--brand-blue));
    border: 2px solid var(--node, var(--brand-blue));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--node, #2563eb) 10%, transparent);
}
.ld-tl-item.done .ld-tl-node { background: var(--node); color: #fff; }
.ld-tl-connector { flex: 1; width: 2px; background: linear-gradient(180deg, var(--node, #2563eb), var(--border)); margin: 2px 0; min-height: 14px; }
.ld-tl-item .point-card { margin-bottom: var(--sp-3); }
.ld-tl-item:last-child .point-card { margin-bottom: 0; }
.ld-tl-kind {
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c, var(--text-muted)); margin-right: 4px;
}
.ld-tl-title { font-size: 13px; }
.point-head-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.pt-place { margin-top: 4px; }
.pt-place .place { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   FINANSE — crescendo
   ───────────────────────────────────────────────────────────── */
.fin-list { display: flex; flex-direction: column; }
.fin-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; font-size: 13px; }
.fin-line .fin-label { color: var(--text-soft); min-width: 0; }
.fin-line .fin-amt { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-line.is-base { font-weight: 700; font-size: 14px; }
.fin-line.is-base .fin-label { color: var(--text); }
.fin-line.is-cost .fin-amt { color: var(--fin-cost); }
.fin-line.is-income .fin-amt { color: var(--fin-income); }
.fin-sub-head { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin: var(--sp-3) 0 var(--sp-1); }
.fin-divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-3) 0; }
.fin-summary { display: flex; flex-direction: column; gap: 3px; }
.fin-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 13px; }
.fin-row .fin-amt { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-row.income .fin-amt { color: var(--fin-income); }
.fin-row.cost .fin-amt { color: var(--fin-cost); }
.fin-margin {
    margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.fin-margin.pos { background: var(--fin-margin-pos); background: color-mix(in srgb, var(--st-success) 12%, var(--card)); }
.fin-margin.neg { background: color-mix(in srgb, var(--st-danger) 12%, var(--card)); }
.fin-margin-label { font-weight: 800; font-size: 14px; }
.fin-margin-amt { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.fin-margin.pos .fin-margin-amt { color: var(--fin-margin-pos); }
.fin-margin.neg .fin-margin-amt { color: var(--fin-margin-neg); }

/* ── Pozostałe ── */
.ld-sales-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.special-terms-panel { border-left-color: var(--st-warning); }
.special-terms-content { font-size: 12.5px; line-height: 1.55; color: var(--text-soft); background: color-mix(in srgb, var(--st-warning) 6%, var(--card)); border-radius: var(--r-sm); padding: var(--sp-3); white-space: pre-wrap; }
.cargo-detail-icon { color: var(--text-dim); margin-left: 5px; }
.cargo-details { display: flex; flex-direction: column; gap: 5px; font-size: 12px; padding: var(--sp-2) 0; }
.cargo-details .adr-badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-xs); background: var(--st-danger); color: #fff; font-weight: 700; font-size: 10.5px; }
.status-changer { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.status-changer-hint { color: var(--text-dim); font-size: 10px; transition: var(--t-fast); display: inline-flex; }
.status-changer:hover .status-changer-hint { color: var(--brand-blue); }
.ld-muted-note { color: var(--text-muted); font-size: 12.5px; }
.ld-inline-flash { position: static; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.panel-body.pb-tight { padding: 6px; }
.panel-body.pb-cards { padding: var(--sp-2); display: flex; flex-direction: column; gap: 6px; }
.mt-1 { margin-top: var(--sp-1); }

/* ─────────────────────────────────────────────────────────────
   BLOK FIRMY/MIEJSCA + KONTAKTY (format premium wg specyfikacji)
   ───────────────────────────────────────────────────────────── */
.ld-place { display: flex; flex-direction: column; gap: 1px; line-height: 1.45; }
.ld-place-name { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.ld-place-street { font-size: 12.5px; color: var(--text-soft); }
.ld-place-city { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ld-place-city .mono { font-family: var(--font-mono); font-weight: 600; }
.ld-place-vat { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.ld-place-vat .mono { font-family: var(--font-mono); }

/* Pojedynczy kontakt */
.ld-contact { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.ld-contact:last-child { border-bottom: none; }
.ld-contact-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ld-contact-role { font-size: 10.5px; color: var(--text-muted); font-style: italic; letter-spacing: .01em; }
.ld-contact-line { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.ld-contact-line .lbl { color: var(--text-muted); }
.ld-contact-line a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.ld-contact-line a:hover { text-decoration: underline; }
.ld-contact-line svg { opacity: .75; }
.ld-contact-wa { color: #16a34a !important; }

/* Zwijana belka kontaktów (natywny <details>) */
.ld-contacts { margin-top: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--bg) 50%, var(--card)); }
.ld-contacts > summary {
    list-style: none; cursor: pointer; padding: 7px 10px;
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft);
    user-select: none;
}
.ld-contacts > summary::-webkit-details-marker { display: none; }
.ld-contacts > summary .ld-contacts-chev { margin-left: auto; transition: transform var(--t-fast); display: inline-flex; color: var(--text-muted); }
.ld-contacts[open] > summary .ld-contacts-chev { transform: rotate(180deg); }
.ld-contacts > summary:hover { background: var(--card-hover); }
.ld-contacts-body { padding: 4px 12px 8px; }
.ld-contacts-count { background: var(--brand-blue); color: #fff; border-radius: 99px; font-size: 10px; padding: 0 6px; font-weight: 800; }
/* Kontakt główny (primary/zaznaczony) zawsze widoczny nad belką */
.ld-contact-lead { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, var(--border)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand-blue) 6%, var(--card)); margin-top: var(--sp-2); }

/* Flash pigułki statusu po automatycznej zmianie (reguły statusu) */
@keyframes ldPillFlash { 0%{transform:scale(1)} 30%{transform:scale(1.12)} 100%{transform:scale(1)} }
.pill.ld-pill-flash { animation: ldPillFlash .55s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #2563eb) 22%, transparent); }

/* ─────────────────────────────────────────────────────────────
   AKCJE W NAGŁÓWKACH PANELI + CRUD (dodawanie/usuwanie)
   ───────────────────────────────────────────────────────────── */
.ld-head-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-xs { font-size: 11px; padding: 3px 8px; border-radius: var(--r-xs); line-height: 1.2; display: inline-flex; align-items: center; gap: 4px; }
.point-action-btn.danger:hover { color: var(--st-danger); background: var(--st-danger-bg); }
.fin-line { position: relative; }
.fin-del {
    border: none; background: transparent; cursor: pointer; color: var(--text-dim);
    padding: 2px; border-radius: var(--r-xs); display: inline-flex; margin-left: 4px;
    opacity: 0; transition: var(--t-fast);
}
.fin-line:hover .fin-del { opacity: 1; }
.fin-del:hover { color: var(--st-danger); background: var(--st-danger-bg); }
.fin-conv { display: block; font-size: 10.5px; color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); margin-top: 1px; }

/* Formularze w modalach (dodaj punkt/odprawę/koszt) */
.ld-form-grid { display: flex; flex-direction: column; gap: 10px; }
.ld-form-grid .form-group { margin: 0; }
.ld-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ld-form-row .form-group { margin: 0; }
@media (max-width: 520px) { .ld-form-row { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   PASEK AKCJI ŁADUNKU (premium toolbar + dropdown „Więcej")
   ───────────────────────────────────────────────────────────── */
.ld-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ld-tb-spacer { flex: 1 1 auto; }
.ld-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; }
.ld-tb-back { color: var(--text-muted); }
.ld-tb-sell { background: var(--card); border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, var(--border)); color: var(--brand-blue-dark); }
.ld-tb-sell:hover { background: color-mix(in srgb, var(--brand-blue) 8%, var(--card)); }
.ld-tb-edit { background: var(--card); border: 1px solid var(--border); font-weight: 600; }
.ld-tb-edit:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.ld-tb-pdf { box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-blue) 35%, transparent); font-weight: 700; }

.ld-more { position: relative; }
.ld-more-btn { padding: 0; width: 36px; height: 36px; justify-content: center; border: 1px solid var(--border); background: var(--card); }
.ld-more-btn:hover, .ld-more-btn[aria-expanded="true"] { background: var(--card-hover); border-color: var(--brand-blue); color: var(--brand-blue); }
.ld-more-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 268px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(15,23,42,.16));
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
    animation: ldMoreIn .14s ease;
}
@keyframes ldMoreIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ld-more-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: none; background: transparent; cursor: pointer;
    border-radius: var(--r-sm); text-align: left; text-decoration: none; color: var(--text);
    transition: background var(--t-fast);
}
.ld-more-item:hover { background: var(--card-hover); }
.ld-more-item.danger:hover { background: var(--st-danger-bg); }
.ld-more-item span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.ld-more-item strong { font-size: 13px; font-weight: 600; }
.ld-more-item small { font-size: 11px; color: var(--text-muted); }
.ld-more-item.danger:hover strong { color: var(--st-danger); }
.ld-mi-ic {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, #64748b) 12%, var(--card)); color: var(--c, #64748b);
}
.ld-more-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ── Towar: usuwanie + wiersz Razem ── */
.cargo-del { border: none; background: transparent; color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: var(--r-xs); display: inline-flex; opacity: 0; transition: var(--t-fast); }
.cargo-row:hover .cargo-del { opacity: 1; }
.cargo-del:hover { color: var(--st-danger); background: var(--st-danger-bg); }
.cargo-total-row td { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 50%, var(--card)); padding-top: 7px; }
.cargo-total-row .text-bold { color: var(--text); }

/* ── Finanse: pasek przychód/koszt + % marży + ikony ── */
.fin-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 0 0 var(--sp-3); background: var(--st-neutral-bg); }
.fin-bar-income { background: var(--fin-income, #16a34a); }
.fin-bar-cost { background: var(--fin-cost, #dc2626); opacity: .85; }
.fin-row span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.fin-row.income svg { color: var(--fin-income); }
.fin-row.cost svg { color: var(--fin-cost); }
.fin-margin-pct { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 6px; background: color-mix(in srgb, currentColor 14%, transparent); }

/* ── Plik w modalu uploadu ── */
.ld-att-file { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; background: var(--st-neutral-bg); border-radius: var(--r-sm); font-size: 13px; }
.ld-att-file span { font-weight: 600; word-break: break-all; }
.ld-att-file small { color: var(--text-muted); }

/* ── Towar: edycja inline ── */
.cargo-actions { white-space: nowrap; }
.cargo-edit { border: none; background: transparent; color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: var(--r-xs); display: inline-flex; opacity: 0; transition: var(--t-fast); margin-right: 2px; }
.cargo-row:hover .cargo-edit { opacity: 1; }
.cargo-edit:hover { color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   DOPIESZCZENIE: waluta-flaga, numer-pigułka, kolory semantyczne
   ═══════════════════════════════════════════════════════════════ */

/* ── Waluta: czytelny znacznik (symbol + kod); symbol kolorowany per waluta, by łatwo je odróżnić ── */
.currency-chip { display: inline-flex; align-items: baseline; gap: 3px; vertical-align: baseline; white-space: nowrap; }
.currency-chip .cur-sym { font-weight: 800; color: var(--text-soft); font-size: .95em; }
.currency-chip .cur-code { font-size: .72em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); font-family: var(--font-mono); align-self: center; }
/* kolor symbolu zależny od waluty — szybkie rozróżnienie EUR vs GBP vs PLN ... */
.currency-chip.cur-eur .cur-sym { color: #2563eb; }
.currency-chip.cur-pln .cur-sym { color: #059669; }
.currency-chip.cur-gbp .cur-sym { color: #7c3aed; }
.currency-chip.cur-usd .cur-sym { color: #0891b2; }
.currency-chip.cur-chf .cur-sym { color: #d97706; }
.currency-chip.cur-czk .cur-sym { color: #db2777; }
.currency-chip.cur-nok .cur-sym, .currency-chip.cur-sek .cur-sym, .currency-chip.cur-dkk .cur-sym { color: #0d9488; }

/* ── Numer ładunku jako spójna kolorowa pigułka ── */
.num-blocks { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.22); font-weight: 800; vertical-align: middle; }
.num-block { display: inline-flex; align-items: center; justify-content: center; min-width: 24px;
    padding: 3px 9px; color: #fff; font-size: 14px; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.num-rest { display: inline-flex; align-items: center; padding: 3px 11px; background: #0f172a; color: #fff;
    font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; font-size: 13px; }
body.theme-dark .num-rest { background: #020617; }

/* ── Przyciski semantyczne: przychód=zielony, koszt=czerwony ── */
.btn-income { background: var(--st-success-bg); color: var(--st-success); border: 1px solid var(--st-success-border); font-weight: 600; }
.btn-income:hover { background: color-mix(in srgb, var(--st-success) 20%, var(--card)); }
.btn-cost { background: var(--st-danger-bg); color: var(--st-danger); border: 1px solid var(--st-danger-border); font-weight: 600; }
.btn-cost:hover { background: color-mix(in srgb, var(--st-danger) 20%, var(--card)); }

/* ── Kolorowe ikony akcji na kartach punktów ── */
.point-action-btn[data-edit-point] { color: var(--brand-blue); }
.point-action-btn[data-edit-point]:hover { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); }
.point-action-btn[data-toggle-point-problem] { color: var(--st-warning); }
.point-action-btn[data-toggle-point-problem]:hover { background: var(--st-warning-bg); }
.point-action-btn.danger { color: var(--st-danger); }
.point-action-btn.danger:hover { background: var(--st-danger-bg); }

/* ── Kolory dat punktu ── */
.pt-date-chip.pt-date-fix { color: var(--st-danger); background: var(--st-danger-bg); border-color: var(--st-danger-border); font-weight: 700; }
.pt-date-chip.pt-date-done { color: var(--st-success); background: var(--st-success-bg); }

/* ── Ramka FIX na karcie punktu ── */
.point-card.point-fix { box-shadow: inset 4px 0 0 var(--st-danger); border-color: color-mix(in srgb, var(--st-danger) 35%, var(--border)); }

/* ── Pigułki trybu w modalu szybkiej edycji ── */
.ld-form-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted); margin: 10px 0 2px; }
.ld-mode-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px;
    border: 1.5px solid var(--border); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: var(--t-fast); user-select: none; }
.ld-mode-pill input { display: none; }
.ld-mode-pill:hover { border-color: var(--c); }
.ld-mode-pill.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }

/* ── Szybkie dodanie osoby ── */
.section-label-row { display: flex; align-items: center; justify-content: space-between; }
.ld-quick-add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--brand-blue);
    color: var(--brand-blue); background: transparent; border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.ld-quick-add:hover { background: color-mix(in srgb, var(--brand-blue) 10%, transparent); }

/* ── Wyraźne panele w podglądzie (kolorowy pasek + tint nagłówka) ── */
.ld-grid .panel { border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.ld-grid .panel.panel-accent { border-left: 4px solid var(--st-neutral); }
.ld-grid .panel.panel-accent.info    { border-left-color: var(--st-info); }
.ld-grid .panel.panel-accent.success { border-left-color: var(--st-success); }
.ld-grid .panel.panel-accent.warning { border-left-color: var(--st-warning); }
.ld-grid .panel-header { border-bottom: 1px solid var(--border-strong); background: var(--st-neutral-bg); }
.ld-grid .panel.panel-accent.info .panel-header    { background: var(--st-info-bg); }
.ld-grid .panel.panel-accent.success .panel-header { background: var(--st-success-bg); }
.ld-grid .panel.panel-accent.warning .panel-header { background: var(--st-warning-bg); }

/* Przyciski w nagłówkach paneli — wyraźne na tincie (nie ruszamy kolorowych) */
.ld-grid .panel-header .btn:not(.btn-primary):not(.btn-income):not(.btn-cost):not(.btn-colored) {
    background: var(--card); border: 1px solid var(--border-strong); color: var(--text);
    box-shadow: var(--shadow-sm); font-weight: 600;
}
.ld-grid .panel-header .btn:not(.btn-primary):not(.btn-income):not(.btn-cost):not(.btn-colored):hover {
    border-color: var(--brand-blue); color: var(--brand-blue);
}

/* ── Czytelne pola formularzy w modalach ── */
.ld-form-grid .form-input, .ld-form-grid .form-select, .ld-form-grid .form-textarea,
.modal-body .form-input, .modal-body .form-select, .modal-body .form-textarea {
    border: 1.5px solid var(--border-strong); background: var(--bg);
}
.ld-form-grid .form-input:focus, .modal-body .form-input:focus,
.ld-form-grid .form-select:focus, .modal-body .form-select:focus,
.ld-form-grid .form-textarea:focus, .modal-body .form-textarea:focus {
    background: var(--card); border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.ld-form-grid .form-label, .modal-body .form-label { font-weight: 600; color: var(--text-soft); font-size: 12px; }

/* ── Widoczny checkbox (FIX, oddzielna faktura itp.) ── */
.ld-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px;
    font-weight: 600; padding: 9px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--bg); user-select: none; transition: var(--t-fast); }
.ld-check input { width: 18px; height: 18px; accent-color: var(--brand-blue); cursor: pointer; margin: 0; }
.ld-check:hover { border-color: var(--brand-blue); }
.ld-check:has(input:checked) { border-color: var(--brand-blue); color: var(--brand-blue-dark);
    background: color-mix(in srgb, var(--brand-blue) 9%, var(--card)); }

/* ── Karta punktu: blok daty (kolory deadlineLevel) + adres ── */
.pt-when { display: inline-flex; align-items: center; gap: 8px; margin: 3px 0 7px; font-size: 12.5px; font-weight: 700; }
.pt-when > svg { color: var(--dc, var(--text-muted)); }
.pt-when-date { color: var(--dc, var(--text-soft)); letter-spacing: .01em; }
.pt-when-time { color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pt-when-fix { padding: 3px 11px; border: 1.5px solid var(--st-danger); border-radius: 8px;
    background: color-mix(in srgb, var(--st-danger) 10%, transparent); }
.pt-place-name { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.pt-place-street { color: var(--text-soft); font-size: 12.5px; }
.pt-place-city { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); margin-top: 1px; }

/* ── Znacznik oddzielnego fakturowania ── */
.fin-sep-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--st-customs); background: var(--st-customs-bg);
    border: 1px solid var(--st-customs-border); padding: 1px 6px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }

/* ── Wybór wyświetlanych kontaktów ── */
.ld-contacts-pick { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 5px; }
.ld-contacts-pick-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.ld-contact-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; padding: 3px 4px; border-radius: var(--r-xs); }
.ld-contact-check:hover { background: var(--card-hover); }
.ld-contact-check input { accent-color: var(--brand-blue); width: 15px; height: 15px; }
.ld-contact-check small { color: var(--text-muted); }
.ld-contacts-save { align-self: flex-start; margin-top: 4px; }

/* ── Znacznik „już dodany" w pickerze dokumentów ── */
.add-doc-dup { font-size: 9.5px; font-weight: 700; color: var(--st-warning); text-transform: uppercase; letter-spacing: .03em; }
.add-doc-card.is-dup { border-style: dashed; }

/* ── Kolorowe przyciski dodawania ── */
.btn-add-green { background: var(--st-success-bg); border: 1px solid var(--st-success-border); color: var(--st-success); font-weight: 700; }
.btn-add-green:hover { background: var(--st-success); border-color: var(--st-success); color: #fff; }
.ld-add-loading   { background: var(--st-success-bg); border: 1px solid var(--st-success-border); color: var(--st-success); font-weight: 700; }
.ld-add-loading:hover   { background: var(--st-success); border-color: var(--st-success); color: #fff; }
.ld-add-unloading { background: var(--st-info-bg); border: 1px solid var(--st-info-border); color: var(--st-info); font-weight: 700; }
.ld-add-unloading:hover { background: var(--st-info); border-color: var(--st-info); color: #fff; }
.ld-add-customs   { background: color-mix(in srgb, #7c3aed 12%, var(--card)); border: 1px solid color-mix(in srgb, #7c3aed 32%, transparent); color: #7c3aed; font-weight: 700; }
.ld-add-customs:hover   { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ── Czerwony „x" przy towarze: zawsze widoczny ── */
.cargo-del { opacity: 1; color: var(--st-danger); }
.cargo-del:hover { background: var(--st-danger-bg); }
.cargo-edit { opacity: .55; }
.cargo-row:hover .cargo-edit { opacity: 1; }

/* ── Waga: tylko kolor czcionki (bez chipa/tła) ── */
.ld-grid .ark-weight, .ld-metric .ark-weight {
    background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; font-weight: 800;
}
.ld-grid .ark-weight.wl-green, .ld-metric .ark-weight.wl-green   { color: #15803d; }
.ld-grid .ark-weight.wl-yellow, .ld-metric .ark-weight.wl-yellow { color: #a16207; }
.ld-grid .ark-weight.wl-red, .ld-metric .ark-weight.wl-red       { color: #b91c1c; }

/* ── Ref na punkcie: widoczny, czerwony ── */
.pt-ref { color: var(--st-danger); font-weight: 700; font-size: 12px; }

/* ── Hero: tryb załadunku przy dacie + EX obok samochodziku ── */
.ld-rr-mode { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.ld-rr-track { display: flex; align-items: center; gap: 8px; }
.ld-rr-customs { position: static !important; display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ── Większe ikony akcji (punkty trasy, towar) ── */
.point-action-btn { width: 27px; height: 27px; }
.point-action-btn svg { width: 15px; height: 15px; }
.cargo-edit, .cargo-del { padding: 4px; }
.cargo-edit svg, .cargo-del svg { width: 16px; height: 16px; }

/* ── Podsumowanie towaru: LDM (lekkie tło) + waga (kolor czcionki) ── */
.ld-cargo-sum { display: inline-flex; align-items: center; gap: 8px; }
.ld-ldm-chip { font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--st-neutral-bg);
    border: 1px solid var(--border); padding: 2px 9px; border-radius: 7px; }
.ld-metric-val .ld-ldm-chip { margin-right: 7px; }
.ld-metric-val .ark-weight { font-size: 17px; }

/* ── Marża brokera + fakturowanie osobne ── */
.fin-extra-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 3px 0; }
.fin-extra-row.broker { color: var(--st-customs); font-weight: 700; border-top: 1px dashed var(--border); padding-top: 7px; margin-top: 5px; }
.fin-extra-pct { font-weight: 600; opacity: .85; }
.fin-sep-block { margin-top: 9px; padding: 9px 11px; border: 1px dashed var(--st-customs-border); border-radius: var(--r-sm); background: var(--st-customs-bg); }
.fin-sep-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--st-customs); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.fin-extra-amt.pos { color: var(--st-success); }
.fin-extra-amt.neg { color: var(--st-danger); }
.fin-extra-row.total { font-weight: 700; border-top: 1px solid var(--border); padding-top: 5px; margin-top: 3px; }
.fin-extra-row.grand { font-weight: 800; font-size: 13.5px; border-top: 2px solid var(--st-customs-border); padding-top: 6px; margin-top: 4px; }

/* ── Nr klienta wyróżniony w hero ── */
.ld-hero-chip.muted .mono { color: var(--brand-blue); font-weight: 700; }

/* ── Link „są komentarze" w pasku zakładek ── */
.ld-comments-flag { display: none; align-items: center; gap: 6px; cursor: pointer; margin-left: auto;
    font-size: 12.5px; font-weight: 700; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent); padding: 4px 11px; border-radius: 99px; transition: var(--t-fast); }
.ld-comments-flag.is-on { display: inline-flex; }
.ld-comments-flag:hover { background: color-mix(in srgb, var(--brand-blue) 18%, transparent); }

/* ── Historia: ludzkie, kolorowe wpisy ── */
.history-verb { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; color: #fff; padding: 2px 9px; border-radius: 99px; }
.history-entry-entity { font-weight: 600; color: var(--text-soft); }
.history-entry-name { font-weight: 700; color: var(--text); }
.history-entry-field { color: var(--text-muted); font-size: 12.5px; }
.history-entry-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.history-entry { border-left: 3px solid var(--c, var(--border)); }
.history-entry-diff { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12.5px; }
.history-diff-old { color: var(--st-danger); text-decoration: line-through; opacity: .8; }
.history-diff-new { color: var(--st-success); font-weight: 600; }
.history-diff-arrow { color: var(--text-muted); display: inline-flex; }

/* ── Załączniki: kategoria / rodzaj / numer ── */
.att-cat-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--st-info); background: var(--st-info-bg); border: 1px solid var(--st-info-border); padding: 1px 7px; border-radius: 99px; margin-right: 4px; }
.att-kind-badge { font-size: 9.5px; font-weight: 700; color: var(--text-soft); background: var(--st-neutral-bg);
    border: 1px solid var(--border); padding: 1px 7px; border-radius: 99px; margin-right: 4px; }
.att-ref-badge { font-size: 10px; font-weight: 700; color: var(--st-customs); margin-right: 4px; }
.kv-action .kv-v { display: flex; justify-content: flex-end; }

/* ── Ostrzeżenie: brak zlecenia brokera ── */
.fin-broker-warn { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 600;
    color: var(--st-warning); background: var(--st-warning-bg); border: 1px dashed var(--st-warning-border);
    padding: 5px 9px; border-radius: var(--r-sm); }

/* ── Szybka edycja punktu: wyszukiwarka adresów z książki ── */
.ep-addr-search-wrap { position: relative; }
.ep-addr-results { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 2px;
    background: var(--surface, #fff); border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-md, 8px);
    box-shadow: 0 12px 28px rgba(15,23,42,.16); max-height: 260px; overflow-y: auto; }
.ep-addr-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    padding: 7px 11px; background: none; border: none; border-bottom: 1px solid var(--border, #e2e8f0); cursor: pointer; }
.ep-addr-item:last-child { border-bottom: none; }
.ep-addr-item:hover { background: var(--st-info-bg, #eff6ff); }
.ep-addr-item strong { font-size: 12.5px; color: var(--text, #0f172a); }
.ep-addr-item small { font-size: 11px; color: var(--text-soft, #64748b); }
.ep-addr-empty { padding: 9px 11px; font-size: 12px; color: var(--text-soft, #64748b); }

/* ── Upload: wybór pliku w oknie ── */
.ld-att-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ld-att-pick #att-pick-name { font-size: 12px; color: var(--text-soft, #64748b); }
.ld-att-pick #att-pick-name.has-file { color: var(--st-success, #16a34a); font-weight: 600; }

/* ── Inteligentne podpowiadanie adresów (na polach) ── */
.otms-addr-ac { position: absolute; z-index: 99999; background: var(--surface, #fff);
    border: 1px solid var(--border-strong, #cbd5e1); border-radius: var(--r-md, 8px);
    box-shadow: 0 14px 34px rgba(15,23,42,.20); max-height: 280px; overflow-y: auto; padding: 3px; }
.otms-addr-ac-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
    border-radius: var(--r-sm, 6px); cursor: pointer; }
.otms-addr-ac-item:hover, .otms-addr-ac-item.is-hi { background: var(--st-info-bg, #eff6ff); }
.otms-addr-ac-item strong { font-size: 12.5px; color: var(--text, #0f172a); line-height: 1.25; }
.otms-addr-ac-item span { font-size: 11.5px; color: var(--text-soft, #64748b); line-height: 1.25; }
.otms-addr-ac-item .otms-addr-ac-loc { font-weight: 600; color: var(--text, #334155); }
.otms-addr-ac-empty { padding: 9px 11px; font-size: 12px; color: var(--text-soft, #64748b); }
.pt-when-dash { color: var(--text-muted, #94a3b8); font-weight: 600; }
/* Ostrzeżenie duplikatu numeru w oknie uploadu */
.att-dup-warn { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 600;
    color: var(--st-warning, #b45309); background: var(--st-warning-bg, #fffbeb);
    border: 1px dashed var(--st-warning-border, #fcd34d); padding: 5px 9px; border-radius: var(--r-sm, 6px); }

/* ── Checklist wymaganych dokumentów wg kierunku ── */
.doc-req-strip { border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 8px);
    background: var(--surface-2, #f8fafc); padding: 8px 10px; margin-bottom: 10px; }
.doc-req-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11.5px; color: var(--text-soft, #64748b); margin-bottom: 7px; }
.doc-req-strip-head strong { color: var(--text, #0f172a); }
.doc-req-missing-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 10.5px;
    color: var(--st-warning, #b45309); background: var(--st-warning-bg, #fffbeb);
    border: 1px solid var(--st-warning-border, #fcd34d); padding: 1px 7px; border-radius: 99px; }
.doc-req-ok-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 10.5px;
    color: var(--st-success, #16a34a); background: var(--st-success-bg, #f0fdf4);
    border: 1px solid var(--st-success-border, #bbf7d0); padding: 1px 7px; border-radius: 99px; }
.doc-req-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.doc-req-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 99px; border: 1px solid; letter-spacing: .02em; }
.doc-req-chip small { font-weight: 600; opacity: .8; margin-left: 2px; }
.doc-req-chip.ok      { color: var(--st-success, #16a34a); background: var(--st-success-bg, #f0fdf4); border-color: var(--st-success-border, #bbf7d0); }
.doc-req-chip.missing { color: var(--st-warning, #b45309); background: var(--st-warning-bg, #fffbeb); border-color: var(--st-warning-border, #fcd34d); border-style: dashed; }
.doc-req-chip.opt     { color: var(--text-dim, #94a3b8); background: transparent; border-color: var(--border, #e2e8f0); border-style: dashed; opacity: .8; }
.doc-req-chip.opt-ok  { color: var(--text-soft, #64748b); background: var(--surface, #fff); border-color: var(--border-strong, #cbd5e1); }

/* ── Kompaktowe kontakty obok adresu (mniejsza czcionka) ── */
.ld-contacts-mini { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.ld-contact-mini { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; font-size: 11.5px; line-height: 1.3;
    padding: 3px 8px; background: var(--surface-2, #f8fafc); border-radius: var(--r-sm, 6px); border-left: 2px solid var(--st-info, #2563eb); }
.ld-cm-name { font-weight: 700; color: var(--text, #0f172a); display: inline-flex; align-items: center; gap: 3px; }
.ld-cm-role { font-size: 10.5px; color: var(--text-soft, #64748b); font-style: italic; }
.ld-cm-contacts { font-size: 10.5px; color: var(--text-soft, #64748b); display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.ld-cm-contacts a { color: var(--st-info, #2563eb); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.ld-cm-contacts a:hover { text-decoration: underline; }

/* ── Klikalne linki w podglądzie ── */
.ld-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(100,116,139,.5); transition: color .12s; }
.ld-link:hover { color: var(--accent, #2563eb); border-bottom-color: currentColor; }

/* ── Badge „czyj ładunek" (inicjały) ── */
.ld-owner-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px;
    padding: 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .03em; border-radius: 99px; cursor: pointer;
    vertical-align: middle; color: #fff; background: var(--oc, #64748b); border: none; box-shadow: 0 1px 2px rgba(15,23,42,.18); }
.ld-owner-badge[disabled] { cursor: default; opacity: .9; }
.ld-owner-badge:not([disabled]):hover { filter: brightness(1.09); }

/* ── Uwagi do trybu w karcie punktu ── */
.pt-mode-notes { font-size: 11.5px; color: var(--text-soft, #64748b); margin-top: 3px; font-style: italic;
    display: inline-flex; align-items: center; gap: 4px; }

/* ── Komentarze: akcent koloru autora + premium ── */
.comment-item { border-left: 3px solid var(--uc, #e2e8f0); }
.comment-flag-int { color: #dc2626; font-weight: 700; }
.comment-role { font-weight: 700; }

/* ── Historia: badge autora (kolor użytkownika) + pełna szerokość ── */
.history-user { display: inline-flex; align-items: center; gap: 5px; }
.history-user-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
    padding: 0 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #fff; border-radius: 99px;
    box-shadow: 0 1px 1px rgba(15,23,42,.15); }
.history-list, .history-entries { width: 100%; }
.history-entry-diff { flex-wrap: wrap; }

/* ── Załączniki jako lista ── */
.att-list { display: flex; flex-direction: column; gap: 8px; }
.att-row { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; align-items: center; gap: 12px;
    padding: 11px 14px 11px 17px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); overflow: hidden; }
.att-row::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ic, #64748b); opacity: .92; }
.att-row.dragging { opacity: .5; }
.att-row.drag-over { box-shadow: inset 0 2px 0 var(--brand-blue); }
.att-row-drag { display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: grab; }
.att-row-drag:active { cursor: grabbing; }
.att-row:hover { border-color: color-mix(in srgb, var(--ic, #64748b) 42%, var(--border)); transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ic, #64748b) 16%, transparent); }
.att-row.is-deleted { opacity: .55; }
.att-row-icon { position: relative; width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center;
    justify-content: center; color: var(--ic, #64748b); background: color-mix(in srgb, var(--ic, #64748b) 13%, var(--card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #64748b) 22%, transparent); }
.att-row-ext { position: absolute; bottom: -5px; right: -5px; font-size: 7.5px; font-weight: 800;
    background: var(--ic, #64748b); color: #fff; border: 2px solid var(--card);
    border-radius: 5px; padding: 0 4px; line-height: 1.7; letter-spacing: .03em; }
.att-row-main { min-width: 0; }
.att-row-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--text); }
.att-row-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.att-row-size { font-size: 10.5px; color: var(--text-soft); font-weight: 600; }
.att-row-when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10.5px;
    color: var(--text-soft); white-space: nowrap; }
.att-row-by { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-soft); }
.att-by-chip { width: 19px; height: 19px; border-radius: 6px; background: var(--brand-blue); color: #fff; font-size: 8px;
    font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.att-row-date { font-size: 10px; color: var(--text-dim); }
.att-row-actions { display: flex; gap: 5px; }
.att-row-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--card); color: var(--text-soft);
    cursor: pointer; text-decoration: none; transition: all var(--t-fast); }
.att-row-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 8%, var(--card)); }
.att-row-btn-dl:hover { background: var(--brand-blue); color: #fff; }

/* ── Modal „Dodaj dokument" — ładniejsze kafelki z listy ── */
.add-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; padding: 2px; max-height: 360px; overflow-y: auto; }
.add-doc-card { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
    padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card); cursor: pointer; overflow: hidden; font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast); }
.add-doc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dc, var(--brand-blue)); }
.add-doc-card:hover { border-color: var(--dc, var(--brand-blue)); transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dc, #2563eb) 20%, transparent); }
.add-doc-card-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .03em;
    color: var(--dc, var(--brand-blue)); background: color-mix(in srgb, var(--dc, #2563eb) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--dc, #2563eb) 30%, transparent); padding: 2px 9px; border-radius: 99px; }
.add-doc-card-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.add-doc-card-state { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--dc, var(--brand-blue)); margin-top: auto; }
.add-doc-card-state.is-dup { color: var(--st-success); }
/* już dodany: zielona przerywana ramka, bez paska z boku */
.add-doc-card.is-dup { border: 1.5px dashed color-mix(in srgb, var(--st-success) 45%, var(--border)); background: color-mix(in srgb, var(--st-success) 6%, var(--card)); }
.add-doc-card.is-dup::before { display: none; }
.add-doc-card.is-dup .add-doc-card-tag { color: var(--st-success); background: color-mix(in srgb, var(--st-success) 13%, transparent); border-color: color-mix(in srgb, var(--st-success) 32%, transparent); }
.add-doc-card.is-dup:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--st-success) 18%, transparent); }

/* ── Historia — czytelny dziennik aktywności ── */
.hist-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: start;
    padding: 10px 12px; border-bottom: 1px solid var(--border, #eef2f6); transition: background .12s; }
.hist-row:last-child { border-bottom: none; }
.hist-row:hover { background: var(--surface-2, #f8fafc); }
.hist-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.hist-main { min-width: 0; }
.hist-line { font-size: 13px; line-height: 1.4; color: var(--text, #0f172a); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.hist-verb { font-weight: 700; }
.hist-obj { color: var(--text-soft, #475569); }
.hist-obj-name { color: var(--text, #0f172a); font-weight: 600; }
.hist-field { color: var(--text-dim, #94a3b8); font-size: 12px; }
.hist-diff { margin-top: 5px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; flex-wrap: wrap; }
.hist-diff-old { text-decoration: line-through; color: #b91c1c; background: #fef2f2; padding: 1px 7px; border-radius: 5px; }
.hist-diff-new { color: #15803d; background: #f0fdf4; padding: 1px 7px; border-radius: 5px; font-weight: 600; }
.hist-diff-arrow { color: var(--text-dim, #94a3b8); display: inline-flex; }
.hist-comment { margin-top: 5px; font-size: 12px; color: var(--text-soft, #475569); font-style: italic; display: flex; align-items: center; gap: 5px; }
.hist-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.hist-user { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-soft, #475569); font-weight: 500; }
.hist-user-chip { width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hist-time { font-size: 10.5px; color: var(--text-dim, #94a3b8); }

/* ── Ustalenia specjalne — przełącznik + sygnał wizualny ── */
.special-mark-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    padding: 12px 16px; border: 2px dashed #f59e0b; border-radius: var(--r-md, 10px); background: #fffbeb;
    color: #b45309; cursor: pointer; transition: all .14s ease; text-align: left; }
.special-mark-btn:hover { background: #fef3c7; border-style: solid; box-shadow: 0 4px 14px rgba(245,158,11,.18); }
.special-mark-btn > span { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.special-mark-btn small { font-size: 11.5px; color: #92744a; }
.special-terms-panel { border: 1.5px solid #f59e0b !important; background: linear-gradient(180deg, #fffbeb, var(--surface, #fff));
    box-shadow: 0 2px 12px rgba(245,158,11,.12); }
.special-terms-content { font-size: 13px; line-height: 1.55; color: #78350f; }
.ld-hero.load-is-special { position: relative; border: 2px solid #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 8px 24px rgba(245,158,11,.14); }
.ld-special-flag { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px;
    background: #f59e0b; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(245,158,11,.4); z-index: 2; }

/* ── Numery zamówień z przyciskiem „Wgraj" ── */
.kv-order .kv-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-upload-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
    padding: 3px 9px; border: 1px solid var(--accent, #2563eb); color: var(--accent, #2563eb);
    background: var(--surface, #fff); border-radius: 6px; cursor: pointer; transition: all .12s; white-space: nowrap; }
.kv-upload-btn:hover { background: var(--accent, #2563eb); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.2); }

/* ── Badge podkategorii załącznika (zlecenie: klient/broker/podwykonawca) ── */
.att-sub-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
    padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--sb, #64748b); text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════
   PODGLĄD ŁADUNKU — szlify 2026 (hero / towar / finanse / picker)
   Dodane na końcu → wygrywają kaskadę tam, gdzie trzeba. Tylko tokeny.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wstążka trasy: segmenty (kolumny przystanków) — załadunki | odprawy | rozładunki ── */
/* Oś środkowa: wszystko wyrównane do środka w pionie i rozchodzi się symetrycznie od linii łącznika. */
.ld-route-ribbon { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.rr-seg { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; min-width: 0; flex: 0 1 auto; }
.rr-stop { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.rr-date { display: inline-flex; align-items: center; align-content: center; justify-content: center; gap: 6px; flex-wrap: wrap; max-width: 100%; min-height: 34px; }
.rr-place { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; }
.rr-via { flex: 1 1 auto; min-width: 34px; position: relative; min-height: 24px; align-self: center; }

.rr-flag { position: relative; width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.rr-flag svg, .rr-flag img { width: 17px; height: auto; border-radius: 3px; }
.rr-from .rr-flag { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-success) 50%, transparent), var(--shadow-sm); }
.rr-to   .rr-flag { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-info) 50%, transparent), var(--shadow-sm); }
.rr-flag.cust { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-customs) 50%, transparent), var(--shadow-sm); }
.rr-city { font-size: 14px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: var(--text);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.rr-city-empty { color: var(--text-dim); font-weight: 600; font-size: 12px; }
.ld-rr-mode { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 0 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--st-customs) 14%, var(--card)); color: var(--st-customs); flex: none; line-height: 1.5; }

/* odprawa jako przystanek w środku (flaga + kod + miejscowość) */
.rr-stop-customs .rr-cust-type { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--st-customs); }
.rr-stop-customs .rr-city { font-size: 12.5px; font-weight: 800; color: var(--st-customs); }
.rr-stop-customs.done .rr-cust-type, .rr-stop-customs.done .rr-city { color: var(--st-success); }
.rr-stop-customs.done .rr-flag.cust { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-success) 50%, transparent), var(--shadow-sm); }

/* data — drobny druk nad miastem */
.ld-rr-date { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.ld-rr-date > svg { color: var(--text-dim); flex: none; }
.ld-rr-d { font-weight: 800; letter-spacing: .01em; color: var(--dc, var(--text-soft)); }
.ld-rr-dash { color: var(--text-dim); font-weight: 700; margin: 0 1px; }
.ld-rr-time { color: var(--text-dim); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; font-size: 10px; white-space: nowrap; }
.ld-rr-fix { font-size: 8.5px; font-weight: 900; letter-spacing: .04em; color: #fff; background: var(--st-danger); padding: 0 4px; border-radius: 4px; line-height: 1.5; }
.ld-rr-nodate { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }

/* łącznik: rozciągliwa linia z kropkami na końcach (w osi miast) */
.rr-via-line { position: absolute; top: 50%; left: 2px; right: 2px; height: 2.5px; transform: translateY(-50%); border-radius: 2px;
    background: linear-gradient(90deg, var(--st-success), var(--st-customs) 50%, var(--st-info)); }
.rr-via-line::before, .rr-via-line::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); }
.rr-via-line::before { left: -1px; background: var(--st-success); }
.rr-via-line::after  { right: -1px; background: var(--st-info); }

/* ── Kafelki metryk: LDM/Waga + Fracht (wyśrodkowane) ── */
.ld-metric-cargo, .ld-metric-fracht { gap: 3px; }
.ld-metric-ldm { display: block; text-align: left; font-family: var(--font-mono); font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.18; font-variant-numeric: tabular-nums; }
.ld-metric-weight { display: block; text-align: left; width: auto; padding: 0 !important; background: transparent !important; border-radius: 0 !important;
    font-family: var(--font-mono); font-size: 14.5px; font-weight: 800; line-height: 1.18; } /* waga bezpośrednio pod LDM */
.ld-metric-fr { font-family: var(--font-mono); font-size: 16px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.ld-metric-fr.base-only { color: var(--brand-blue); }
.ld-metric-fr.has-extras { color: var(--st-success); }
.ld-cur { font-size: .64em; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; margin-left: 1px; }
/* jednostki tuż przy liczbie */
.ld-metric .u { font-size: .68em; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.ld-metric-weight .u { color: inherit; opacity: .72; }
.ark-weight .u, .ld-cargo-wt .u, .ld-cargo-ldm .u { font-size: .72em; font-weight: 700; margin-left: 2px; }
.ld-cargo-ldm .u { color: var(--text-muted); }
.ld-cargo-wt .u { color: inherit; opacity: .72; }

/* ── Towar: rozwijana lista (opis + ldm + waga w wierszu, reszta po rozwinięciu) ── */
.ld-cargo { display: flex; flex-direction: column; gap: 6px; }
.ld-cargo-item { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ld-cargo-item:hover { border-color: var(--border-strong); }
.ld-cargo-item.is-open { border-color: color-mix(in srgb, var(--st-warning) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.ld-cargo-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; user-select: none; }
.ld-cargo-chev { color: var(--text-muted); flex: none; display: inline-flex; transition: transform var(--t-fast); }
.ld-cargo-item.is-open .ld-cargo-chev { transform: rotate(90deg); color: var(--st-warning); }
.ld-cargo-desc { font-weight: 700; font-size: 13px; color: var(--text); flex: 1; min-width: 0; line-height: 1.25; }
.ld-cargo-nums { display: inline-flex; align-items: baseline; gap: 12px; flex: none; }
.ld-cargo-ldm { display: inline-block; text-align: right; min-width: 72px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.ld-cargo-ldm b { color: var(--text); font-weight: 800; }
.ld-cargo-wt { display: inline-block; text-align: right; min-width: 60px; font-family: var(--font-mono); font-size: 13px; font-weight: 800; white-space: nowrap; } /* kolor stosunku z .ld-grid .ark-weight.wl-* */
.ld-cargo-act { display: inline-flex; gap: 2px; flex: none; margin-left: 2px; }
.ld-cargo-item:hover .cargo-edit { opacity: 1; }
.ld-cargo-extra { padding: 8px 12px 11px 32px; display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--card)); }
.ld-cargo-kv { display: flex; gap: 8px; font-size: 12px; }
.ld-cargo-kv .k { color: var(--text-muted); font-weight: 700; min-width: 80px; }
.ld-cargo-kv .v { color: var(--text); }
.ld-cargo-note { font-size: 12px; color: var(--text-soft); display: flex; gap: 6px; align-items: flex-start; }
.ld-cargo-note svg { color: var(--text-muted); flex: none; margin-top: 2px; }
.ld-cargo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; margin-top: 2px;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, var(--card)); border-radius: var(--r-sm); }
.ld-cargo-foot-lbl { font-size: 12px; font-weight: 800; color: var(--text); }

/* ── Finanse: blok brokera na górze (fiolet) ── */
.fin-broker { border: 1px solid var(--st-customs-border); background: var(--st-customs-bg); border-radius: var(--r-sm);
    padding: 9px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.fin-broker-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.fin-broker-lbl { color: var(--st-customs); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.fin-broker-lbl svg { color: var(--st-customs); flex: none; }
.fin-broker-lbl small { color: var(--text-muted); font-weight: 600; }
.fin-broker-amt { font-family: var(--font-mono); font-weight: 800; color: var(--st-customs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-broker-row.is-margin { padding-top: 5px; border-top: 1px dashed color-mix(in srgb, var(--st-customs) 30%, transparent); }
.fin-broker-amt.pos { color: var(--st-success); }
.fin-broker-amt.neg { color: var(--st-danger); }
.fin-broker-warn { font-size: 11px; color: var(--st-warning); font-weight: 700; display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* ── Finanse: kwota + waluta w wyrównanych kolumnach (kwoty pod kwotami, waluta pod walutą) ── */
.fin-line { gap: var(--sp-2); }
.fin-line .fin-label { flex: 1 1 auto; }
.fin-amt { display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.fin-num { font-family: var(--font-mono); font-weight: 700; text-align: right; min-width: 84px; font-variant-numeric: tabular-nums; }
.fin-cur-col { display: inline-block; min-width: 50px; text-align: left; }
.fin-line.is-cost .fin-num { color: var(--fin-cost); }
.fin-line.is-income .fin-num { color: var(--fin-income); }
.fin-line.is-base .fin-num { color: var(--text); font-weight: 800; }

/* ── Finanse: FRACHT — główna, najbardziej widoczna kwota (bez OF) ── */
.fin-fracht { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0;
    padding: 11px 13px; border-radius: var(--r-sm); border: 1.5px solid; }
.fin-fracht-lbl { font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.fin-fracht-lbl small { font-weight: 600; font-size: 10.5px; opacity: .82; }
.fin-fracht .fin-amt { font-size: 15px; flex: none; }
.fin-fracht .fin-num { font-weight: 800; font-size: 20px; min-width: 0; }
.fin-fracht .fin-cur-col { min-width: 0; }
.fin-fracht .fin-cur-col .cur-sym, .fin-fracht .fin-cur-col .cur-code { color: inherit; }
.fin-fracht.base-only { background: color-mix(in srgb, var(--brand-blue) 9%, var(--card)); border-color: color-mix(in srgb, var(--brand-blue) 40%, transparent); }
.fin-fracht.base-only, .fin-fracht.base-only .fin-num, .fin-fracht.base-only .fin-fracht-lbl, .fin-fracht.base-only svg { color: var(--brand-blue-dark); }
.fin-fracht.has-extras { background: color-mix(in srgb, var(--st-success) 11%, var(--card)); border-color: color-mix(in srgb, var(--st-success) 42%, transparent); }
.fin-fracht.has-extras, .fin-fracht.has-extras .fin-num, .fin-fracht.has-extras .fin-fracht-lbl, .fin-fracht.has-extras svg { color: var(--st-success); }

/* ── Finanse: Oddzielne faktury (OF) — wyraźnie oddzielone, poza frachtem ── */
.fin-of { margin: 10px 0; padding: 8px 11px; border: 1px dashed var(--st-info-border); border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--st-info) 6%, var(--card)); }
.fin-of-head { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--st-info);
    display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.fin-of-head svg { color: var(--st-info); flex: none; }
.fin-of-head small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.fin-of .fin-line { padding: 3px 0; }
.fin-costs .fin-sub-head { color: var(--fin-cost); }

/* ── Finanse: informacyjnie (przychody / koszty / saldo) — mniej widoczne ── */
.fin-info { margin-top: 10px; }
.fin-info .fin-bar { margin: 0 0 8px; }
.fin-info-grid { display: flex; flex-direction: column; gap: 3px; }
.fin-info-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.fin-info-cell .fic-l { display: inline-flex; align-items: center; gap: 5px; }
.fin-info-cell .fic-l svg { color: var(--text-dim); }
.fin-info-cell .fic-l small { font-weight: 600; opacity: .8; }
.fin-info-cell b { font-family: var(--font-mono); font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.fin-info-cell.income b { color: var(--fin-income); }
.fin-info-cell.cost b { color: var(--fin-cost); }
.fin-info-cell .ld-cur { font-size: .8em; }
.fin-info-cell.saldo { font-size: 12.5px; color: var(--text-soft); padding-top: 5px; margin-top: 2px; border-top: 1px solid var(--border); }
.fin-info-cell.saldo b { font-weight: 800; font-size: 13px; }
.fin-info-cell.saldo.pos b { color: var(--fin-margin-pos); }
.fin-info-cell.saldo.neg b { color: var(--fin-margin-neg); }

/* ── Finanse: małe, dyskretne podsumowanie na dole ── */
.fin-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
    font-size: 11px; color: var(--text-muted); }
.fin-mini span { display: inline-flex; align-items: center; gap: 5px; }
.fin-mini svg { color: var(--text-dim); flex: none; }
.fin-mini b { color: var(--text-soft); font-weight: 800; }

/* ── Okienko przychód/koszt: zielony / czerwony motyw + alert waluty ── */
.fin-modal-banner { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
    padding: 8px 12px; border-radius: var(--r-sm); margin-bottom: 12px; }
.modal-fin-income .fin-modal-banner { color: var(--st-success); background: var(--st-success-bg); border: 1px solid var(--st-success-border); }
.modal-fin-cost   .fin-modal-banner { color: var(--st-danger);  background: var(--st-danger-bg);  border: 1px solid var(--st-danger-border); }
.modal-fin-income .modal-header { box-shadow: inset 4px 0 0 var(--st-success); }
.modal-fin-cost   .modal-header { box-shadow: inset 4px 0 0 var(--st-danger); }
.modal-fin-income .modal-footer .btn-primary { background: var(--st-success); background-image: none; border-color: var(--st-success); }
.modal-fin-income .modal-footer .btn-primary:hover { background: color-mix(in srgb, var(--st-success) 86%, #000); }
.modal-fin-cost   .modal-footer .btn-primary { background: var(--st-danger); background-image: none; border-color: var(--st-danger); }
.modal-fin-cost   .modal-footer .btn-primary:hover { background: color-mix(in srgb, var(--st-danger) 86%, #000); }
.fin-cur-warn { font-size: 11.5px; line-height: 1.4; color: var(--st-warning); background: var(--st-warning-bg);
    border: 1px solid var(--st-warning-border); border-radius: var(--r-sm); padding: 7px 10px; margin: 8px 0 0; }
.fin-cur-warn b { font-weight: 800; }

/* ── Picker właściciela: lista osób ── */
.ld-owner-list { display: flex; flex-direction: column; gap: 6px; }
.ld-owner-pick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 8px 11px; transition: var(--t-fast); font-family: inherit; }
.ld-owner-pick:hover { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 7%, var(--card)); }
.ld-owner-pick.is-sel { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 10%, var(--card)); }
.ld-owner-av { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; color: #fff; background: var(--oc, #64748b); letter-spacing: .02em; }
.ld-owner-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-owner-ini { font-size: 12px; font-weight: 800; color: var(--text-muted); font-family: var(--font-mono); flex: none; }
.ld-owner-cur { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-blue); flex: none;
    background: color-mix(in srgb, var(--brand-blue) 14%, transparent); border-radius: 99px; padding: 2px 8px; }
.ld-owner-custom { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); }
.ld-owner-custom-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: block; margin-bottom: 6px; }
.ld-owner-custom-row { display: flex; gap: 8px; }
.ld-owner-custom-row input { text-transform: uppercase; font-weight: 800; text-align: center; letter-spacing: .08em; max-width: 120px; }

/* ── Drobna meta w nagłówku (kto prowadzi) ── */
.ld-head-meta { display: inline-flex; align-items: center; gap: 6px; }
.ld-head-meta svg { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   PODGLĄD ŁADUNKU — runda 4 (kompaktowe osoby, pełne dane firmy, link zlecenia)
   ═══════════════════════════════════════════════════════════════ */

/* Osoby kontaktowe — kompaktowa karta (spójnie: klient + punkty + odprawy + rozładunki) */
.ld-contacts-mini { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.ld-contact { padding: 6px 0; gap: 0; }
.ld-contact-name { font-size: 12.5px; font-weight: 800; }
.ld-contact-tid { font-family: var(--font-mono); font-weight: 700; font-size: .82em; color: var(--brand-blue); }
.ld-contact-role { font-size: 10.5px; }
.ld-contact-line { font-size: 11.5px; margin-top: 1px; gap: 4px; }
.ld-contact-line .lbl { font-weight: 700; min-width: 30px; color: var(--text-muted); }
.ld-contact-line svg { flex: none; }

/* Pełne dane firmy: telefon / e-mail */
.ld-place-line { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.ld-place-line .lbl { color: var(--text-muted); font-weight: 700; min-width: 30px; }
.ld-place-line a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.ld-place-line a:hover { text-decoration: underline; }
.ld-place-line .ld-contact-wa { color: #16a34a; }
.ld-place-line svg { opacity: .75; flex: none; }

/* Nr zamówienia: gdy plik wgrany → zielony, klikalny (podgląd) */
.ld-order-link { color: var(--st-success); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.ld-order-link:hover { text-decoration: underline; }
.ld-order-link svg { flex: none; }

/* ═══════════════════════════════════════════════════════════════
   PODGLĄD ŁADUNKU — runda 5 (klient: 2 kolumny, licznik-picker w nagłówku)
   ═══════════════════════════════════════════════════════════════ */

/* Klient: firma (lewo) | osoby kontaktowe (prawo) */
.ld-client-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; }
.ld-client-company { min-width: 0; }
.ld-client-contacts { min-width: 0; border-left: 1px dashed var(--border); padding-left: 14px; }

/* Nagłówek osób: tytuł (lewo) + licznik-picker + „+osoba" (prawo) */
.ld-contacts-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-contacts-title { flex: 1 1 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ld-contacts-title svg { color: var(--text-muted); flex: none; }
.ld-contacts-head .ld-quick-add { flex: none; }
.ld-contacts-countbadge { flex: none; font-size: 10px; font-weight: 800; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); border-radius: 99px; padding: 0 7px; line-height: 17px; }

/* licznik-picker (klikalny) — zastępuje dawny pasek „zmień wyświetlane osoby" */
.ld-contacts-pickwrap { position: relative; flex: none; }
.ld-contacts-countbtn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 800; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, transparent); border-radius: 99px; padding: 1px 8px; }
.ld-contacts-countbtn::-webkit-details-marker { display: none; }
.ld-contacts-countbtn:hover { background: color-mix(in srgb, var(--brand-blue) 18%, transparent); }
.ld-contacts-countbtn svg { transition: transform var(--t-fast); }
.ld-contacts-pickwrap[open] .ld-contacts-countbtn svg { transform: rotate(180deg); }
.ld-contacts-pickbox { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; left: auto; min-width: 210px;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(15,23,42,.16); padding: 8px; }

/* Karty kontaktów: jeszcze bardziej kompaktowo */
.ld-contacts-mini { gap: 0; margin-top: 5px; }
.ld-contact { padding: 5px 0; gap: 0; }
.ld-contact-name { font-size: 12px; font-weight: 800; line-height: 1.25; }
.ld-contact-role { font-size: 10px; line-height: 1.2; }
.ld-contact-line { font-size: 11px; margin-top: 0; line-height: 1.4; gap: 4px; }

/* wąsko → kolumny w pionie */
@media (max-width: 560px) {
    .ld-client-top { grid-template-columns: 1fr; }
    .ld-client-contacts { border-left: 0; padding-left: 0; border-top: 1px dashed var(--border); padding-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   PODGLĄD ŁADUNKU — runda 6 (mały „+", podtekst płatności)
   ═══════════════════════════════════════════════════════════════ */

/* „+osoba" → mały kwadratowy plusik obok licznika */
.ld-add-mini { width: 22px; height: 22px; min-width: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent);
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); cursor: pointer; flex: none;
    transition: background var(--t-fast), border-color var(--t-fast); }
.ld-add-mini:hover { background: color-mix(in srgb, var(--brand-blue) 18%, transparent); border-color: var(--brand-blue); }
.ld-add-mini svg { width: 13px; height: 13px; }

/* Termin płatności: dopisek „· od rozładunku" */
.kv-sub { color: var(--text-muted); font-weight: 600; font-size: .88em; }

/* ═══════════════════════════════════════════════════════════════
   PODGLĄD ŁADUNKU — runda 7
   (LDM inline · kierunek+typ w wierszu · kontakty w 2 kolumnach · odprawy)
   ═══════════════════════════════════════════════════════════════ */

/* LDM / Waga jako jedna linia: „13,60 ldm | 12,00 T" */
.ld-metric-cargo-inline { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-mono);
    font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.2; flex-wrap: nowrap; white-space: nowrap; }
.ld-mci-ldm, .ld-mci-wt { white-space: nowrap; }
.ld-mci-ldm { color: var(--text); }
.ld-mci-ldm b { font-weight: 800; }
.ld-mci-sep { color: var(--border-strong); font-weight: 400; }
.ld-mci-wt.ark-weight { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-weight: 800; }

/* Kierunek + Typ ładunku w jednym wierszu */
.kv.kv-split { display: flex; gap: var(--sp-4); align-items: center; }
.kv-half { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kv-half .kv-k { flex: none; }
.kv-half .kv-v { text-align: right; min-width: 0; }

/* Załadunek/Rozładunek: adres | kontakty (2 kolumny, jak w panelu klienta) */
.pt-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px var(--sp-4); align-items: start; }
.pt-split:not(:has(.pt-split-side)) { grid-template-columns: 1fr; }
.pt-split-main, .pt-split-side { min-width: 0; }
.pt-split-side { padding-left: var(--sp-3); border-left: 1px dashed var(--border); }
.pt-split-side .ld-contacts-head { margin-top: 0; }

/* Odprawa: GDZIE (urząd) | KTO (agencja) */
.pt-cust { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px var(--sp-4); align-items: start; margin-top: 4px; }
.pt-cust:not(:has(.agency)) { grid-template-columns: 1fr; }
.pt-cust-block { min-width: 0; }
.pt-cust-block.agency { padding-left: var(--sp-3); border-left: 1px dashed var(--border); }
.pt-cust-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.pt-cust-block.where  .pt-cust-lbl { color: var(--st-customs); }
.pt-cust-block.agency .pt-cust-lbl { color: var(--brand-blue); }
.pt-cust-contactline { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; font-size: 12px; }
.pt-cust-contactline a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-blue); font-weight: 600; }
.pt-cust-contactline a svg { opacity: .7; flex: none; }

/* Osoby z agencji — rozwijane */
.ld-agency-contacts { margin-top: 5px; }
.ld-agency-csum { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
    font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 2px 0; }
.ld-agency-csum::-webkit-details-marker { display: none; }
.ld-agency-csum .ld-cc-num { background: color-mix(in srgb, var(--brand-blue) 14%, var(--card)); color: var(--brand-blue);
    border-radius: 999px; padding: 0 6px; font-size: 10px; font-weight: 800; }
.ld-agency-csum svg:last-child { transition: transform var(--t-fast); }
.ld-agency-contacts[open] .ld-agency-csum svg:last-child { transform: rotate(180deg); }
.ld-agency-contacts .ld-contacts-mini { margin-top: 5px; }

/* ── Runda 8: numery zamówień (szybka edycja + link po uploadzie + kolor brokera) ── */
.ld-order-link.broker { color: var(--st-customs); }           /* broker: klikalny w fiolecie (inny niż zielony klient) */
.ld-order-num[data-order-edit] { cursor: text; border-bottom: 1px dashed color-mix(in srgb, currentColor 40%, transparent); }
.ld-order-num[data-order-edit]:hover { border-bottom-color: currentColor; }
.ld-order-fill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--brand-blue);
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--brand-blue) 40%, transparent);
    border-radius: 7px; padding: 2px 9px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.ld-order-fill:hover { background: color-mix(in srgb, var(--brand-blue) 16%, transparent); border-style: solid; }
.ld-order-fill svg { flex: none; }
.kv-upload-btn.optional { opacity: .7; }
.kv-upload-btn.optional:hover { opacity: 1; }

/* ── Runda 9: pasek Nr klienta/Broker, kolor chipu typu, tooltip frachtu ── */
/* górny pasek z numerami zamówień (nad nazwą firmy) */
.ld-hero-orders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 5px; }
.ld-hero-ord { font-size: 11px; font-weight: 700; color: var(--text-soft); display: inline-flex; align-items: center; gap: 5px; }
.ld-hero-ord .lbl { color: var(--text-dim); font-weight: 600; }
.ld-hero-ord .mono { color: var(--brand-blue); font-weight: 800; }
.ld-hero-ord.broker .mono { color: var(--st-customs); }
.ld-hero-ord-brak { font-size: 10px; font-weight: 800; letter-spacing: .03em; color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); padding: 0 6px; border-radius: 999px; }

/* chip typu ładunku — kolor ze słownika (jak kierunek) */
.ld-hero-chip.type { background: color-mix(in srgb, var(--c, #64748b) 14%, var(--card)); color: var(--c, #64748b); border-color: color-mix(in srgb, var(--c, #64748b) 32%, transparent); }

/* FRACHT — tylko kwota, rozbicie po najechaniu */
.ld-metric-fracht.has-pop { position: relative; }
.ld-metric-fracht.has-pop .ld-metric-fr { cursor: help; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); }
.ld-fracht-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 230px; max-width: 300px;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 10px 12px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.ld-metric-fracht.has-pop:hover .ld-fracht-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.ld-fracht-pop::before { content: ''; position: absolute; bottom: 100%; right: 22px; border: 6px solid transparent; border-bottom-color: var(--border-strong); }
.ld-fracht-pop::after  { content: ''; position: absolute; bottom: 100%; right: 22px; border: 6px solid transparent; border-bottom-color: var(--card); margin-bottom: -1px; }
.lfp-head { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--st-success); display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.lfp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12px; padding: 2px 0; }
.lfp-l { color: var(--text-soft); }
.lfp-v { font-weight: 700; color: var(--text); white-space: nowrap; }
.lfp-orig { color: var(--text-dim); font-weight: 600; font-size: 10.5px; }
.lfp-total { margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line); }
.lfp-total .lfp-l { font-weight: 800; color: var(--text); }
.lfp-total .lfp-v { color: var(--st-success); font-weight: 800; }

/* ── Runda 10: łańcuch (zleceniodawca → firma → podwykonawca) w jednym wierszu, numery nad strzałkami ── */
.ld-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; min-width: 0; padding-top: 17px; }
.ld-chain-node { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.ld-chain-node.client { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.015em; min-width: 0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.ld-chain-node.client a { color: var(--text); text-decoration: none; }
.ld-chain-node.client a:hover { color: var(--brand-blue); }
.ld-chain-node.own, .ld-chain-node.sub { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; }
.ld-chain-node.own { background: color-mix(in srgb, var(--cc,#2563eb) 12%, var(--card)); color: var(--cc,#2563eb); border-color: color-mix(in srgb, var(--cc,#2563eb) 28%, transparent); }
.ld-chain-node.sub { background: color-mix(in srgb, var(--sc, var(--st-customs)) 12%, var(--card)); color: var(--sc, var(--st-customs)); border-color: color-mix(in srgb, var(--sc, var(--st-customs)) 28%, transparent); }
.ld-chain-node svg { opacity: .85; flex: none; }
/* łącznik = sama strzałka (wąsko); numer PŁYWA wyraźnie NAD wierszem, nie rozpycha firm i nie nachodzi nazw */
.ld-chain-conn { align-self: stretch; position: relative; display: inline-flex; align-items: center; }
.ld-chain-arr { color: var(--border-strong); display: inline-flex; }
.ld-chain-ord { position: absolute; bottom: 100%; margin-bottom: 3px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 800; font-family: var(--font-mono); color: var(--brand-blue); line-height: 1.2; white-space: nowrap; letter-spacing: .01em; }
.ld-chain-ord.broker { color: var(--st-customs); }
.ld-chain-ord.is-brak { color: var(--text-dim); font-weight: 700; font-family: inherit; font-size: 8.5px; letter-spacing: .04em; }
.ld-chain-tags { display: inline-flex; gap: 5px; align-items: center; margin-left: 3px; }

/* realizacja — węższy kafelek */
.ld-metrics { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,0.72fr); }
.ld-metric-real .ld-metric-val { font-size: 17px; }

/* ── Zmiana kolejności przystanków (▲▼) ── */
.point-move { display: inline-flex; align-items: center; gap: 1px; margin-right: 3px; padding-right: 4px; border-right: 1px solid var(--line); }
.point-move-btn { padding: 2px 3px; }
.point-action-btn:disabled, .point-move-btn:disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }

/* ── Załączniki: grupowanie po rodzaju dokumentu + klikalny wiersz ── */
.att-group { margin-bottom: 16px; }
.att-group:last-child { margin-bottom: 0; }
.att-group-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 9px; }
.att-group-ic { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 8px;
    color: var(--gc, #64748b); background: color-mix(in srgb, var(--gc,#64748b) 14%, var(--card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc,#64748b) 24%, transparent); flex: none; }
.att-group-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gc, #475569); white-space: nowrap; }
.att-group-count { font-size: 10px; font-weight: 800; color: var(--gc, #64748b); background: color-mix(in srgb, var(--gc,#64748b) 13%, transparent);
    min-width: 19px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.att-group-head::after { content: ''; flex: 1 1 auto; height: 1px; margin-left: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gc,#64748b) 22%, transparent), transparent); }
.att-row-clickable { cursor: pointer; }
.att-row-clickable:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.att-row-clickable:hover .att-row-name-text { color: var(--brand-blue); }

/* ── Wstążka: znacznik wykonania (✓) jako zielona nakładka na fladze ── */
.rr-tick { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--st-success) 86%, transparent); color: #fff; }
.rr-tick svg { width: 13px; height: 13px; }
.rr-stop.done .rr-tick, .rr-stop-customs.done .rr-tick { display: inline-flex; }
.rr-stop.done .rr-city { color: var(--st-success); }
.rr-stop.done .rr-flag { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-success) 55%, transparent), var(--shadow-sm); }
.rr-stop-customs .rr-cust-type { min-height: 34px; align-content: center; }

/* Tryby (sposób) jako klikalna grupa — zachowaj odstępy plakietek jak w nagłówku */
.pt-modes { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pt-modes:hover { outline: 2px dashed color-mix(in srgb, var(--brand-blue) 40%, transparent); outline-offset: 3px; border-radius: 6px; }
.rr-modes { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Menu prawego przycisku (PPM) na widoku ładunku */
.ld-ctx { position: fixed; z-index: 9998; min-width: 184px; padding: 5px; display: none;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); }
.ld-ctx.open { display: block; animation: ldCtxIn .09s ease-out; }
@keyframes ldCtxIn { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }
.ld-ctx-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; user-select: none; }
.ld-ctx-item:hover { background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); }
.ld-ctx-item svg { color: var(--text-muted); flex: none; }
.ld-ctx-item:hover svg { color: var(--brand-blue); }
.ld-ctx-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* Szybka edycja kwot — afordancja hover */
.ld-money { border-radius: 7px; transition: background .12s, outline-color .12s; }
.ld-money:hover { background: color-mix(in srgb, var(--brand-blue) 7%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--brand-blue) 32%, transparent); outline-offset: 2px; }
.ld-contacts-head:hover .ld-contacts-title { color: var(--brand-blue); }

/* Wstążka — wiele adresów na jednej stronie: oryginalny układ pionowy
   (data nad adresem) dla każdego punktu, ale wyrównany DO LEWEJ — flagi
   zaczynają się w tym samym miejscu, daty/godziny w jednej pionowej kolumnie. */
.rr-seg.rr-multi { align-items: flex-start; justify-content: flex-start; gap: 12px; }
.rr-seg.rr-multi .rr-stop { align-items: flex-start; }
.rr-seg.rr-multi .rr-date,
.rr-seg.rr-multi .rr-stop-customs .rr-cust-type { justify-content: flex-start; }
.rr-seg.rr-multi .rr-place { justify-content: flex-start; }
/* część z datą jako blok stałej szerokości → godziny w jednej pionowej kolumnie */
.ld-rr-dwrap { display: inline-flex; align-items: center; gap: 3px; }
.rr-seg.rr-multi .ld-rr-dwrap { min-width: 150px; }

/* Klikalna osoba kontaktowa + edytowalna pozycja frachtu */
.ld-contact-editable { cursor: pointer; border-radius: 8px; transition: background .12s; }
.ld-contact-editable:hover { background: color-mix(in srgb, var(--brand-blue) 6%, transparent); }
.ld-price { cursor: pointer; border-radius: 6px; transition: background .12s; }
.ld-price:hover { background: color-mix(in srgb, var(--brand-blue) 7%, transparent); }

/* Klikalny klient / nr zamówienia + edytowalna notatka punktu */
.ld-clickable { cursor: pointer; }
.ld-chain-node.client.ld-clickable:hover { color: var(--brand-blue); }
.ld-chain-ord.ld-clickable:hover { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent); }
.point-notes { cursor: pointer; }
.point-notes:hover { outline: 1px dashed color-mix(in srgb, var(--brand-blue) 30%, transparent); outline-offset: 2px; border-radius: 5px; }

/* Edytowalne pola panelu „Klient i zamówienie" */
.ld-qedit { cursor: pointer; border-radius: 6px; transition: background .12s; }
.ld-qedit:hover { background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--brand-blue) 30%, transparent); outline-offset: 2px; }
.ld-client-company.ld-clickable { border-radius: 8px; transition: background .12s; }
.ld-client-company.ld-clickable:hover { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.ld-client-company.ld-clickable:hover .ld-place-name { color: var(--brand-blue); }