/*
 * Zgłoszenia szkód (26.10.2026). Jeden plik dla obu paneli:
 *   .ncl-*  wspólne (statusy, pasek postępu, kafelki zdjęć, lightbox, porównanie)  - claims_shared.js
 *   .dcc-*  panel klienta (moje-konto, zakładka #claims)                           - claims_client.js
 *   .dca-*  panel admina (#view-damage-claims + okno boczne)                        - claims_admin.js
 * Zasady wyglądu paneli: ramki delikatne (#e2e8f0 z przezroczystością), bez border-left jako akcentu,
 * wartości font-weight 400, drobno na telefonie.
 */

/* ---------- wspólne ---------- */
.ncl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; line-height: 18px; font-weight: 500; white-space: nowrap; background: #f1f5f9; color: #475569; }
.ncl-pill i { font-size: 11px; }
.ncl-pill.t-blue { background: #eff6ff; color: #1d4ed8; }
.ncl-pill.t-violet { background: #f5f3ff; color: #6d28d9; }
.ncl-pill.t-amber { background: #fffbeb; color: #b45309; }
.ncl-pill.t-green { background: #ecfdf5; color: #047857; }
.ncl-pill.t-red { background: #fef2f2; color: #b91c1c; }
.ncl-pill.t-grey { background: #f1f5f9; color: #64748b; }

.ncl-steps { display: flex; align-items: flex-start; gap: 0; width: 100%; max-width: 520px; }
.ncl-steps.is-off { color: #94a3b8; font-size: 12px; }
.ncl-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; width: 66px; text-align: center; }
.ncl-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; box-sizing: border-box; line-height: 1; padding: 0; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 12px; border: 1px solid #e2e8f0a0; }
/* Ikona dokładnie na środku kółka: bootstrap-icons domyślnie obniża glif (vertical-align: -.125em)
   i dziedziczy wysokość linii strony, przez co symbol siedział przesunięty. */
.ncl-step-dot > i { display: block; width: 1em; height: 1em; line-height: 1; font-size: inherit; }
.ncl-step-dot > i::before { display: block; vertical-align: 0; line-height: 1; width: 1em; height: 1em; text-align: center; }
.ncl-step-t { font-size: 10.5px; color: #94a3b8; line-height: 1.2; }
.ncl-step-line { flex: 1 1 auto; height: 2px; background: #e2e8f0; margin-top: 12px; min-width: 8px; border-radius: 2px; }
.ncl-step.done .ncl-step-dot { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.ncl-step.done .ncl-step-t { color: #047857; }
.ncl-step.now .ncl-step-dot { background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: 0 0 0 4px #dbeafe; }
.ncl-step.now .ncl-step-t { color: #1e3a8a; font-weight: 500; }
.ncl-step.warn .ncl-step-dot { background: #f59e0b; color: #fff; border-color: #f59e0b; box-shadow: 0 0 0 4px #fef3c7; }
.ncl-step.warn .ncl-step-t { color: #b45309; font-weight: 500; }
.ncl-step.bad .ncl-step-dot { background: #ef4444; color: #fff; border-color: #ef4444; box-shadow: 0 0 0 4px #fee2e2; }
.ncl-step.bad .ncl-step-t { color: #b91c1c; font-weight: 500; }
.ncl-step.off { opacity: .45; }
.ncl-step.done + .ncl-step-line { background: #a7f3d0; }

.ncl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ncl-grid-sm { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 6px; }
.ncl-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #f1f5f9; cursor: zoom-in; border: 1px solid #e2e8f0a0; }
.ncl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ncl-tile:hover img { transform: scale(1.04); }
.ncl-tile.is-broken img { visibility: hidden; }
.ncl-tile.is-broken::after { content: "\F428"; font-family: bootstrap-icons; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 20px; }
.ncl-tile-file { cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
.ncl-tile-file i { font-size: 22px; color: #64748b; }
.ncl-tile-file span { font-size: 10px; color: #475569; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncl-tile-tag { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(15, 23, 42, .66); color: #fff; font-size: 9.5px; line-height: 14px; padding: 1px 5px; border-radius: 3px; pointer-events: none; }
.ncl-tile-tag.t-amber { background: #f59e0b; }
.ncl-tile-tag.t-green { background: #059669; }
.ncl-tile-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, .7); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ncl-tile-x:hover { background: #dc2626; }
.ncl-tile-add { cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; border: 1px dashed #cbd5e1; color: #2563eb; font-size: 12px; }
.ncl-tile-add i { font-size: 18px; }
.ncl-tile-add input { display: none; }
.ncl-tile-add:hover { background: #eff6ff; border-color: #93c5fd; }
.ncl-pick { cursor: pointer; }
.ncl-pick::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 0 #2563eb; transition: box-shadow .12s; pointer-events: none; }
.ncl-pick.is-on::after { box-shadow: inset 0 0 0 3px #2563eb; }
.ncl-pick-ok { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 1px solid #cbd5e1; color: transparent; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.ncl-pick.is-on .ncl-pick-ok { background: #2563eb; border-color: #2563eb; color: #fff; }
.ncl-pick.is-in { opacity: .55; cursor: default; }
.ncl-tile-zoom { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 4px; border: 0; background: rgba(15, 23, 42, .6); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: zoom-in; padding: 0; opacity: 0; transition: opacity .15s; }
.ncl-tile:hover .ncl-tile-zoom { opacity: 1; }
@media (hover: none) { .ncl-tile-zoom { opacity: 1; } }

.ncl-progress { height: 6px; border-radius: 4px; background: #e2e8f0; overflow: hidden; margin-top: 8px; }
.ncl-progress span { display: block; height: 100%; width: 0; background: #2563eb; transition: width .25s; }

/* Fancybox (podgląd zdjęć jak w karcie zamówienia) musi być nad oknami paneli: okna klienta mają z-index 9999,
   okno boczne admina 1010, okna decyzji 1600 - domyślne 1050 Fancyboxa chowało się pod nimi. */
.fancybox__container { z-index: 2147483000 !important; }

/* zapasowy lightbox + widok porównania przed/po (tło jak Fancybox) */
html.ncl-lb-lock, html.ncl-lb-lock body { overflow: hidden !important; }
.ncl-lb { position: fixed; inset: 0; z-index: 2147483000; background: rgba(24, 24, 27, .98); display: none; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.ncl-lb.show { display: flex; }
.ncl-lb-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); color: #e2e8f0; font-size: 12.5px; }
.ncl-lb-cap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncl-lb-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; text-decoration: none; }
.ncl-lb-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.ncl-lb-stage { flex: 1 1 auto; display: flex; min-height: 0; padding: 0 10px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); gap: 10px; }
.ncl-lb-pane { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.ncl-lb-pane img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.ncl-lb-ptitle { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(15, 23, 42, .75); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 20px; z-index: 2; white-space: nowrap; }
.ncl-lb-pn { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); background: rgba(15, 23, 42, .75); color: #cbd5e1; font-size: 11.5px; padding: 3px 10px; border-radius: 20px; }
.ncl-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ncl-lb-nav:hover { background: rgba(255, 255, 255, .25); }
.ncl-lb-nav.prev { left: 6px; }
.ncl-lb-nav.next { right: 6px; }
.ncl-lb-stage.is-compare .ncl-lb-pane { background: rgba(255, 255, 255, .03); border-radius: 6px; }
@media (max-width: 767px) {
    .ncl-lb-stage.is-compare { flex-direction: column; }
    .ncl-lb-nav { width: 36px; height: 36px; font-size: 15px; }
}

/* ---------- panel klienta ---------- */
#claims .dcc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
#claims .dcc-header h2 { margin-bottom: 2px; }
#claims .dcc-header p { margin: 0; font-size: 12px; color: var(--text-light); }
.dcc-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.dcc-how > div { background: #fff; border: 1px solid #e2e8f052; border-radius: var(--radius, 6px); padding: 10px 12px; display: grid; grid-template-columns: 26px 1fr; column-gap: 9px; align-items: center; }
.dcc-how span { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.dcc-how b { font-size: 12.5px; font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-how em { font-style: normal; font-size: 11px; color: var(--text-light, #64748b); }

.dcc-list { display: flex; flex-direction: column; gap: 10px; }
.dcc-card { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #fff; border: 1px solid #e2e8f080; border-radius: var(--radius, 6px); padding: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dcc-card:hover { border-color: #bfdbfe; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }
.dcc-card.is-unread { border-color: #93c5fd; box-shadow: 0 0 0 3px #eff6ff; }
.dcc-card.is-draft { background: #fffdf7; border-style: dashed; border-color: #fcd34d; }
.dcc-card-img { width: 110px; height: 78px; border-radius: 5px; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 26px; }
.dcc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.dcc-card-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dcc-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dcc-card-no { font-size: 11.5px; color: var(--text-light, #64748b); font-variant-numeric: tabular-nums; }
.dcc-card-car { font-size: 14px; color: var(--text-main, #1e293b); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcc-card-sub { font-size: 11.5px; color: var(--text-light, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcc-card-next { font-size: 12px; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.dcc-card-next.t-amber { color: #b45309; } .dcc-card-next.t-blue { color: #1d4ed8; } .dcc-card-next.t-violet { color: #6d28d9; }
.dcc-card-next.t-green { color: #047857; } .dcc-card-next.t-red { color: #b91c1c; }
.dcc-new { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #fff; background: #2563eb; padding: 1px 8px; border-radius: 20px; }
.dcc-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 330px; }
.dcc-card-side .ncl-steps { max-width: 340px; }
.dcc-card-side .ncl-step { width: 58px; }
.dcc-card-side .ncl-step-dot { width: 22px; height: 22px; font-size: 10px; }
.dcc-card-side .ncl-step-line { margin-top: 10px; }
.dcc-card-side .ncl-step-t { font-size: 10px; }
.dcc-card-meta { display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--text-light, #64748b); flex-wrap: wrap; justify-content: flex-end; }
.dcc-card-meta i { color: #94a3b8; }
.dcc-card-upd { color: var(--text-faint, #94a3b8); }
.dcc-card-btn { pointer-events: none; background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }

.dcc-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: var(--radius, 6px); padding: 34px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dcc-empty > i { font-size: 30px; color: #93c5fd; }
.dcc-empty b { font-size: 14px; font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-empty span { font-size: 12.5px; color: var(--text-light, #64748b); max-width: 520px; line-height: 1.5; }
.dcc-empty .btn { margin-top: 6px; }
.dcc-loading { padding: 30px; text-align: center; color: #94a3b8; font-size: 12.5px; }

/* okna klienta (szkielet .modal-overlay/.modal-content z panelu - na telefonie pełny ekran) */
.dcc-modal .modal-content.dcc-detail { width: 980px; max-height: 92vh; }
.dcc-modal .modal-content.dcc-wizard { width: 820px; max-height: 92vh; }
.dcc-modal .modal-body { padding: 18px 20px; overflow-y: auto; }
.dcc-modal .modal-header { padding: 8px 6px 8px 18px; }
.dcc-modal .modal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border, #e2e8f0); }
.dcc-modal .modal-footer:has(> :only-child) { justify-content: flex-end; }

.dcc-d-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dcc-d-car { display: flex; gap: 12px; align-items: center; min-width: 0; }
.dcc-d-car > img, .dcc-d-car > i { width: 92px; height: 64px; border-radius: 5px; object-fit: cover; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 24px; flex-shrink: 0; }
.dcc-d-car > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.dcc-d-car b { font-size: 14px; font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-d-car span { font-size: 11.5px; color: var(--text-light, #64748b); }

.dcc-box { display: flex; gap: 10px; padding: 11px 13px; border-radius: 6px; margin-bottom: 12px; border: 1px solid; font-size: 12.5px; line-height: 1.5; }
.dcc-box > i { font-size: 17px; line-height: 1.2; flex-shrink: 0; }
.dcc-box b { display: block; font-weight: 500; font-size: 13px; }
.dcc-box p { margin: 3px 0 0; }
.dcc-box .btn { margin-top: 8px; }
.dcc-box.t-blue { background: #eff6ff; border-color: #dbeafe; color: #1e3a8a; }
.dcc-box.t-violet { background: #f5f3ff; border-color: #ede9fe; color: #4c1d95; }
.dcc-box.t-amber { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.dcc-box.t-green { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.dcc-box.t-red { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

.dcc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dcc-kpi { border: 1px solid #e2e8f052 !important; padding: 12px 14px !important; align-items: flex-start !important; justify-content: space-between !important; }
.dcc-kpi-txt { display: flex; flex-direction: column; min-width: 0; }
.dcc-kpi-l { font-size: 11px; color: var(--text-light, #64748b); }
.dcc-kpi-v { font-size: 17px; color: var(--text-main, #1e293b); margin: 2px 0; font-weight: 500; }
.dcc-kpi-s { font-size: 10.5px; color: var(--text-faint, #94a3b8); line-height: 1.4; }
.dcc-kpi .stat-icon { width: 32px; height: 32px; font-size: 15px; }

.dcc-sec-title { font-size: 12px; color: var(--text-light, #64748b); text-transform: uppercase; letter-spacing: .4px; margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.dcc-link { border: 0; background: none; color: #2563eb; font-size: 12px; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 5px; }
.dcc-link:hover { text-decoration: underline; }
.dcc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dcc-photos-one { grid-template-columns: 1fr; margin-top: 12px; }
.dcc-photos-col { border: 1px solid #e2e8f080; border-radius: 6px; padding: 10px; background: #fff; position: relative; }
.dcc-photos-col.is-busy { opacity: .55; pointer-events: none; }
.dcc-photos-col.is-busy::after { content: "Wysyłam..."; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #1e3a8a; }
.dcc-photos-head { font-size: 12.5px; color: var(--text-main, #1e293b); display: flex; align-items: center; gap: 6px; }
.dcc-photos-head i { color: #64748b; }
.dcc-photos-hint { font-size: 11px; color: var(--text-faint, #94a3b8); margin: 2px 0 8px; }
.dcc-count { font-size: 10.5px; background: #f1f5f9; color: #475569; border-radius: 10px; padding: 0 7px; line-height: 17px; }
.dcc-none { font-size: 11.5px; color: #94a3b8; padding: 6px 0; grid-column: 1 / -1; }

.dcc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #e2e8f070; border: 1px solid #e2e8f070; border-radius: 6px; overflow: hidden; }
.dcc-facts > div { background: #fff; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcc-facts span { font-size: 10.5px; color: var(--text-light, #64748b); }
.dcc-facts b { font-size: 12.5px; font-weight: 400; color: var(--text-main, #1e293b); overflow-wrap: anywhere; }
.dcc-facts p { margin: 0; font-size: 12.5px; color: var(--text-main, #1e293b); line-height: 1.55; overflow-wrap: anywhere; }
.dcc-facts-wide { grid-column: 1 / -1; }

.dcc-tl { display: flex; flex-direction: column; gap: 8px; }
.dcc-ev { max-width: 82%; padding: 8px 11px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f080; font-size: 12.5px; }
.dcc-ev.me { align-self: flex-end; background: #eff6ff; border-color: #dbeafe; }
.dcc-ev.them { align-self: flex-start; }
.dcc-ev.sys { align-self: center; background: transparent; border-style: dashed; max-width: 100%; }
.dcc-ev.is-internal { background: #fffbeb; border-color: #fde68a; }
.dcc-ev-head { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-light, #64748b); margin-bottom: 3px; }
.dcc-ev-head b { font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-ev-head > span:last-child { margin-left: auto; }
.dcc-ev-title { margin: 2px 0; font-size: 12px; color: #334155; }
.dcc-ev-msg { color: #1e293b; line-height: 1.5; overflow-wrap: anywhere; }
.dcc-final-note { margin-top: 12px; font-size: 12px; color: #64748b; display: flex; gap: 6px; align-items: center; }

.dcc-reply { margin-top: 12px; border: 1px solid #e2e8f0a0; border-radius: 6px; padding: 10px; background: #fff; }
.dcc-reply textarea { resize: vertical; min-height: 64px; }
.dcc-reply-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-top: 6px; }
.dcc-reply-files:empty { display: none; }
.dcc-reply-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.dcc-reply-bar label.btn { cursor: pointer; margin: 0; }
.dcc-reply-bar .btn-primary { margin-left: auto; }
.dcc-reply-sec { width: auto !important; padding-top: 5px !important; padding-bottom: 5px !important; font-size: 12px !important; }

/* kreator */
.dcc-wsteps { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--border, #e2e8f0); background: #f8fafc; overflow-x: auto; scrollbar-width: none; }
.dcc-wstep { flex: 1 1 0; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: #94a3b8; }
.dcc-wstep span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2e8f0; font-size: 12px; flex-shrink: 0; }
.dcc-wstep em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcc-wstep.done { color: #047857; cursor: pointer; }
.dcc-wstep.done span { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.dcc-wstep.now { color: #1e3a8a; font-weight: 500; }
.dcc-wstep.now span { background: #2563eb; border-color: #2563eb; color: #fff; }
.dcc-w-lead { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.dcc-w-lead b { font-size: 14px; font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-w-lead span { font-size: 12px; color: var(--text-light, #64748b); line-height: 1.5; }
.dcc-w-lead span b { font-size: 12px; }
.dcc-w-lead2 { margin-top: 18px; }
.dcc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.dcc-hint { font-size: 11px; color: var(--text-faint, #94a3b8); margin-top: 4px; }
.dcc-narrow { max-width: 300px; }
.dcc-money-inp { position: relative; }
.dcc-money-inp input { padding-right: 34px !important; }
.dcc-money-inp span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #94a3b8; pointer-events: none; }

.dcc-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.dcc-order { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px 28px 8px 8px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s; margin: 0; }
.dcc-order:hover { border-color: #93c5fd; }
.dcc-order.is-on { border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
.dcc-order input { position: absolute; opacity: 0; pointer-events: none; }
.dcc-order-img { width: 70px; height: 50px; border-radius: 4px; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 20px; flex-shrink: 0; }
.dcc-order-img img { width: 100%; height: 100%; object-fit: cover; }
.dcc-order-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcc-order-txt b { font-size: 12.5px; font-weight: 500; color: var(--text-main, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcc-order-txt span { font-size: 10.5px; color: var(--text-light, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcc-order-ok { position: absolute; top: 6px; right: 7px; color: #2563eb; font-size: 14px; opacity: 0; }
.dcc-order.is-on .dcc-order-ok { opacity: 1; }
.dcc-order-other .dcc-order-img { font-size: 18px; color: #94a3b8; }

.dcc-seg { display: inline-flex; border: 1px solid #dde3ea; border-radius: 5px; overflow: hidden; }
.dcc-seg button { border: 0; background: #fff; padding: 7px 16px; font-size: 12.5px; color: #334155; cursor: pointer; }
.dcc-seg button + button { border-left: 1px solid #dde3ea; }
.dcc-seg button.is-on { background: #2563eb; color: #fff; }
.dcc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dcc-chips button { border: 1px solid #dde3ea; background: #fff; border-radius: 20px; padding: 5px 12px; font-size: 12px; color: #334155; cursor: pointer; }
.dcc-chips button:hover { border-color: #93c5fd; }
.dcc-chips button.is-on { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.dcc-chips button.is-on::before { content: "\F26E"; font-family: bootstrap-icons; margin-right: 4px; font-size: 11px; }

.dcc-picked-info { font-size: 12px; color: #1d4ed8; background: #eff6ff; border-radius: 5px; padding: 6px 10px; margin-bottom: 10px; display: flex; gap: 6px; align-items: center; }
.dcc-gal { margin-bottom: 12px; }
.dcc-gal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.dcc-gal-head b { font-weight: 500; color: #334155; }
.dcc-gal-head span { color: #94a3b8; font-size: 11px; }
.dcc-gal-head .dcc-link { margin-left: auto; }
.dcc-note { font-size: 12px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f080; border-radius: 6px; padding: 9px 11px; display: flex; gap: 8px; line-height: 1.5; margin-bottom: 8px; }

.dcc-drop { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px; background: #fcfdff; transition: background .12s, border-color .12s; }
.dcc-drop.is-over { background: #eff6ff; border-color: #2563eb; }
.dcc-drop-btn { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 10px; border-radius: 6px; color: #2563eb; margin: 0; flex-wrap: wrap; }
.dcc-drop-btn:hover { background: #eff6ff; }
.dcc-drop-btn input { display: none; }
.dcc-drop-btn i { font-size: 20px; }
.dcc-drop-btn b { font-weight: 500; font-size: 13px; }
.dcc-drop-btn span { font-size: 11.5px; color: #94a3b8; }
.dcc-drop .ncl-grid { margin-top: 10px; }
.dcc-tips { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.dcc-tips li { font-size: 12px; color: #475569; display: flex; gap: 7px; align-items: center; }
.dcc-tips i { color: #2563eb; }

.dcc-sum { display: flex; flex-direction: column; gap: 8px; }
.dcc-sum-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e2e8f0a0; border-radius: 6px; padding: 10px 12px; cursor: pointer; background: #fff; }
.dcc-sum-row:hover { border-color: #93c5fd; }
.dcc-sum-row > i:first-child { font-size: 17px; color: #64748b; margin-top: 2px; }
.dcc-sum-row > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dcc-sum-row span { font-size: 10.5px; color: var(--text-light, #64748b); }
.dcc-sum-row b { font-size: 12.5px; font-weight: 500; color: var(--text-main, #1e293b); }
.dcc-sum-row em { font-style: normal; font-size: 11.5px; color: var(--text-light, #64748b); overflow-wrap: anywhere; }
.dcc-sum-row.is-warn { border-color: #fde68a; background: #fffbeb; }
.dcc-sum-row.is-warn em { color: #b45309; }
.dcc-sum-edit { color: #94a3b8; font-size: 13px; }
.dcc-sending { margin-top: 14px; padding: 12px; border-radius: 6px; background: #eff6ff; border: 1px solid #dbeafe; }
.dcc-sending-t { font-size: 12.5px; color: #1e3a8a; }

@media (max-width: 1199px) {
    .dcc-card { grid-template-columns: 96px minmax(0, 1fr); }
    .dcc-card-img { width: 96px; height: 70px; }
    .dcc-card-side { grid-column: 1 / -1; align-items: stretch; min-width: 0; }
    .dcc-card-side .ncl-steps { max-width: none; }
    .dcc-card-meta { justify-content: flex-start; }
}
@media (max-width: 767px) {
    #claims .dcc-header { flex-direction: column; gap: 10px; }
    #claims .dcc-header .btn { width: 100%; min-height: 36px; }
    .dcc-how { grid-template-columns: 1fr 1fr; gap: 6px; }
    .dcc-how > div { padding: 8px; }
    .dcc-how b { font-size: 11.5px; }
    .dcc-how em { font-size: 10.5px; }
    .dcc-card { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px; }
    .dcc-card-img { width: 72px; height: 54px; }
    .dcc-card-car { font-size: 13px; }
    .dcc-card-side .ncl-step { width: auto; flex: 0 0 auto; }
    .dcc-card-side .ncl-step-t { display: none; }
    .dcc-card-btn { align-self: stretch; }
    .ncl-step { width: 52px; }
    .ncl-step-t { font-size: 9.5px; }
    .dcc-d-top .ncl-steps { max-width: none; }
    .dcc-modal .modal-body { padding: 12px; }
    .dcc-photos { grid-template-columns: 1fr; gap: 8px; }
    .dcc-money { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dcc-kpi { padding: 9px 10px !important; }
    .dcc-kpi .stat-icon { display: none; }
    .dcc-kpi-v { font-size: 15px; }
    .ncl-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
    .dcc-facts { grid-template-columns: 1fr 1fr; }
    .dcc-ev { max-width: 94%; }
    .dcc-grid2 { grid-template-columns: 1fr; }
    .dcc-wsteps { padding: 8px 10px; gap: 2px; }
    .dcc-wstep em { display: none; }
    .dcc-wstep.now em { display: inline; }
    .dcc-wstep { flex: 0 0 auto; }
    .dcc-wstep.now { flex: 1 1 auto; }
    .dcc-orders { grid-template-columns: 1fr; }
    .dcc-tips { grid-template-columns: 1fr; }
    .dcc-narrow { max-width: none; }
    .dcc-seg { display: flex; }
    .dcc-seg button { flex: 1 1 0; padding: 7px 6px; }
    .dcc-reply-sec { flex: 1 1 140px; }
}

/* ---------- panel admina ---------- */
.dca-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.dca-tile { cursor: pointer; }
.dca-tile.is-on { border-color: #93c5fd !important; box-shadow: 0 0 0 2px #dbeafe; }
.dca-controls { flex-wrap: wrap; gap: 10px; }
.dca-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dca-chip-n { font-size: 10.5px; background: #f1f5f9; color: #64748b; border-radius: 10px; padding: 0 6px; margin-left: 3px; }
.afv-tab.is-on .dca-chip-n { background: #dbeafe; color: #1d4ed8; }
.dca-right { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.dca-right .search-wrapper { width: 300px; }
.dca-row { cursor: pointer; }
.dca-row:hover td { background: #f8fafc; }
.dca-row.is-new td, .dca-row.is-unread td { background: #f7faff; }
.dca-no { display: block; font-weight: 500; color: #0f172a; font-variant-numeric: tabular-nums; }
.dca-row .adh-tag { margin: 3px 4px 0 0; display: inline-block; }
.dca-ph { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #475569; margin-right: 8px; white-space: nowrap; }
.dca-ph i { color: #94a3b8; }

html.dca-lock, html.dca-lock body { overflow: hidden !important; }
.dca-drawer { position: fixed; inset: 0; z-index: 1010; background: rgba(15, 23, 42, .45); display: none; justify-content: flex-end; }
.dca-drawer.show { display: flex; animation: dcaFade .15s ease-out; }
@keyframes dcaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dcaSlide { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.dca-dr-panel { width: min(1280px, 96vw); height: 100%; background: #f8fafc; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(15, 23, 42, .15); animation: dcaSlide .2s ease-out; }
.dca-dr-loading { padding: 40px; text-align: center; color: #64748b; font-size: 13px; }
.dca-dr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; font-size: 14px; color: #0f172a; }
.dca-dr-head > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dca-x { width: 34px; height: 34px; border-radius: 6px; border: 0; background: transparent; color: #64748b; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dca-x:hover { background: #f1f5f9; color: #0f172a; }
.dca-dr-steps { padding: 10px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: center; }
.dca-dr-steps .ncl-steps { max-width: 620px; }
.dca-dr-body { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 14px 16px 30px; align-items: start; }
.dca-main, .dca-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dca-side { position: sticky; top: 0; }
.dca-card { background: #fff; border: 1px solid #e2e8f080; border-radius: 6px; padding: 12px 14px; }
.dca-card-h { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dca-card-h .btn { text-transform: none; letter-spacing: 0; }
.dca-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.dca-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dca-who .afv-sub { max-width: none; white-space: normal; }
.dca-lbl { display: block; font-size: 11px; color: #64748b; margin-bottom: 3px; }
.dca-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dca-pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dca-pcol { border: 1px solid #e2e8f080; border-radius: 6px; padding: 10px; }
.dca-pcol-h { font-size: 12.5px; color: #0f172a; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dca-pcol-h i { color: #64748b; }
.dca-mini { margin: 0 0 0 auto; width: 26px; height: 26px; border-radius: 5px; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #2563eb; }
.dca-mini:hover { background: #eff6ff; }
.dca-tilewrap { display: flex; flex-direction: column; gap: 3px; }
.dca-move { font-size: 10.5px; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 3px; color: #64748b; background: #fff; width: 100%; }
.dca-gal { margin-top: 4px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.dca-gal summary { cursor: pointer; font-size: 12.5px; color: #2563eb; list-style: none; display: flex; align-items: center; gap: 6px; }
.dca-gal summary::-webkit-details-marker { display: none; }
.dca-gal[open] summary { margin-bottom: 10px; }
.dca-gal-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; padding-top: 8px; font-size: 12px; color: #475569; }
.dca-gal-bar select { font-size: 12px; border: 1px solid #dde3ea; border-radius: 4px; padding: 4px 6px; }
.dca-gal-bar .btn { margin-left: auto; }

.dca-composer { margin-top: 12px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; background: #fff; }
.dca-composer.is-internal { background: #fffbeb; border-color: #fde68a; }
.dca-comp-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.dca-comp-tabs button { border: 1px solid #e2e8f0; background: #fff; border-radius: 5px; padding: 4px 10px; font-size: 12px; color: #475569; cursor: pointer; }
.dca-comp-tabs button.is-on { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.dca-composer.is-internal .dca-comp-tabs button.is-on { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.dca-composer textarea { resize: vertical; min-height: 70px; font-size: 13px; }
.dca-comp-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.dca-comp-bar label.btn { margin: 0; cursor: pointer; }
.dca-comp-bar .btn-primary { margin-left: auto; }
.dca-sel-sm { width: auto !important; font-size: 12px !important; padding: 4px 8px !important; height: auto !important; margin: 0 !important; }
.dca-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; margin: 6px 0 0; cursor: pointer; font-weight: 400; }
.dca-chk input { margin: 0; }
.dca-mt { margin-top: 8px; }
.dca-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dca-save { margin-top: 10px; width: 100%; }
.dca-side .form-control { font-size: 13px; }

.dca-next { background: #fff; border: 1px solid #e2e8f080; border-radius: 6px; padding: 12px 14px; }
.dca-next p { font-size: 12.5px; color: #475569; margin: 8px 0 10px; line-height: 1.5; }
.dca-acts { display: flex; flex-direction: column; gap: 6px; }
.dca-act { display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; background: #fff; border-radius: 5px; padding: 8px 12px; font-size: 13px; color: #334155; cursor: pointer; text-align: left; }
.dca-act:hover { border-color: #93c5fd; background: #f8fafc; }
.dca-act.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.dca-act.primary:hover { background: #1d4ed8; }
.dca-act.ok { color: #047857; border-color: #a7f3d0; }
.dca-act.ok:hover { background: #ecfdf5; }
.dca-act.bad { color: #b91c1c; border-color: #fecaca; }
.dca-act.bad:hover { background: #fef2f2; }
.dca-manual { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: 8px; }
.dca-manual label { font-size: 11px; color: #94a3b8; margin: 0; white-space: nowrap; }
.dca-manual select { flex: 1 1 auto; font-size: 12px; border: 1px solid #e2e8f0; border-radius: 4px; padding: 3px 6px; color: #475569; background: #fff; min-width: 0; }
.dca-note { margin: 0; }
.dca-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dca-meta div { display: flex; flex-direction: column; gap: 1px; }
.dca-meta span { font-size: 10.5px; color: #94a3b8; }
.dca-meta b { font-size: 12px; font-weight: 400; color: #334155; }

.dca-am { position: fixed; inset: 0; z-index: 1600; background: rgba(15, 23, 42, .5); display: none; align-items: center; justify-content: center; padding: 16px; }
.dca-am.show { display: flex; animation: dcaFade .12s ease-out; }
.dca-am-box { width: 520px; max-width: 100%; max-height: 92vh; background: #fff; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 40px rgba(15, 23, 42, .25); }
.dca-am-wide { width: 640px; }
.dca-am-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.dca-am-h b { font-weight: 500; }
.dca-am-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.dca-am-body .dca-lbl { margin-top: 8px; }
.dca-am-body textarea { resize: vertical; font-size: 13px; }
.dca-am-p { font-size: 12.5px; color: #475569; margin: 0 0 4px; line-height: 1.5; }
.dca-am-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid #e2e8f0; }
.dca-am-ok { color: #fff !important; background: #2563eb; border-color: #2563eb; }
.dca-am-box.t-green .dca-am-ok { background: #059669; border-color: #059669; }
.dca-am-box.t-red .dca-am-ok { background: #dc2626; border-color: #dc2626; }
.dca-am-box.t-amber .dca-am-ok { background: #d97706; border-color: #d97706; }
.dca-am-box.t-violet .dca-am-ok { background: #7c3aed; border-color: #7c3aed; }
.dca-stage-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.dca-stage-chips button { border: 1px solid #dde3ea; background: #fff; border-radius: 20px; padding: 3px 10px; font-size: 11.5px; color: #334155; cursor: pointer; }
.dca-stage-chips button.is-on, .dca-stage-chips button:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.dca-new-res { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; margin: 4px 0; }
.dca-new-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 8px; padding: 6px 9px; border: 1px solid #e2e8f0; border-radius: 5px; cursor: pointer; font-size: 12px; align-items: center; }
.dca-new-row b { font-weight: 500; }
.dca-new-row span { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dca-new-row:hover { border-color: #93c5fd; }
.dca-new-row.is-on { border-color: #2563eb; background: #eff6ff; }
.dca-new-areas { margin-bottom: 4px; }

.dca-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 2147483001; background: #0f172a; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 6px; opacity: 0; transition: opacity .2s, transform .2s; display: flex; gap: 8px; align-items: center; }
.dca-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dca-toast i { color: #34d399; }

@media (max-width: 1400px) { .dca-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) {
    .dca-dr-body { grid-template-columns: 1fr; }
    .dca-side { position: static; order: -1; }
    .dca-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .dca-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dca-right { margin-left: 0; width: 100%; }
    .dca-right .search-wrapper { width: 100%; flex: 1 1 100%; }
    .dca-right .btn { flex: 1 1 auto; }
    .dca-controls > .dca-right { flex-direction: row !important; }
    .dca-dr-panel { width: 100vw; }
    .dca-dr-head { padding: 8px 10px; font-size: 13px; }
    .dca-dr-steps { padding: 8px 6px; }
    .dca-dr-steps .ncl-step { width: 52px; }
    .dca-dr-steps .ncl-step-t { font-size: 9.5px; }
    .dca-dr-body { padding: 10px; gap: 10px; }
    .dca-cols, .dca-pcols { grid-template-columns: 1fr; }
    .dca-am { padding: 0; align-items: flex-end; }
    .dca-am-box, .dca-am-wide { width: 100%; max-height: 94dvh; border-radius: 10px 10px 0 0; }
    .dca-am-f .btn { flex: 1 1 0; min-height: 40px; }
    .dca-new-row { grid-template-columns: 1fr; gap: 1px; }
}