/* EVBro — Car documents in the car sheet (purchase invoice, insurance policy, others). */

.vdoc-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vdoc-block-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.vdoc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vdoc-empty { font-size: 0.82rem; color: var(--text-muted); }

.vdoc-item { display: flex; align-items: stretch; gap: 6px; min-width: 0; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-glass-inset); }
.vdoc-open { flex: 1 1 auto; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 12px; color: var(--text-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vdoc-open > svg { flex: none; color: var(--tone, var(--accent-bright)); }
.vdoc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vdoc-name { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdoc-meta { font-size: 0.74rem; line-height: 1.3; color: var(--text-muted); overflow-wrap: anywhere; }
.vdoc-del { flex: none; width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 4px; padding: 0; border: none; border-radius: 10px; background: none; color: var(--text-secondary); cursor: pointer; }
.vdoc-del:hover, .vdoc-del:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.vdoc-form { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.vdoc-add { width: 100%; min-height: 44px; }
.vdoc-add:disabled { opacity: 0.6; cursor: progress; }
.vdoc-storage { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vdoc-storage.is-full { color: var(--danger); }

@media (min-width: 600px) {
  .vdoc-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .vdoc-form .vdoc-add { grid-column: 1 / -1; }
}