/* APT Legal — component extensions (all colors via CSS variables) */

/* ── Dropzone ── */
.dz { border: 2px dashed var(--slate-300); border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.dz:hover, .dz.over { border-color: var(--blue); background: var(--blue-light); }
.dz-icon { font-size: 28px; color: var(--slate-400); margin-bottom: 8px; }
.dz-title { font-size: 15px; font-weight: 600; color: var(--slate-700); margin-bottom: 4px; }
.dz-sub { font-size: 13px; color: var(--slate-500); margin-bottom: 14px; }

/* ── Import queue ── */
.q-list { display: flex; flex-direction: column; gap: 8px; }
.q-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: var(--white); }
.q-ico { width: 40px; height: 40px; border-radius: var(--radius); background: var(--slate-100); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--slate-500); flex-shrink: 0; }
.q-name { font-weight: 600; font-size: 13.5px; color: var(--slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--slate-200); flex-shrink: 0; }

/* ── Filter chips ── */
.fc { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--transition); border: 1px solid var(--slate-200); outline: none; background: var(--white); color: var(--slate-500); }
.fc:hover { background: var(--slate-50); border-color: var(--slate-300); }
.fc.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
.fc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Bulk action bar ── */
.bulk-bar { display: none; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 8px; border-radius: var(--radius); background: var(--blue-light); border: 1px solid rgba(37, 99, 235, 0.12); }

/* ── Links notice ── */
.links-notice { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--slate-400); }
.links-notice a { color: var(--slate-400); text-decoration: underline; }
.links-notice b { color: var(--slate-600); }

/* ── Danger section ── */
.danger-section { border: 1px solid var(--red-light); border-radius: var(--radius-lg); padding: 16px 20px; background: #fff5f5; }
.danger-title { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.danger-item { margin-bottom: 16px; }
.danger-item:last-child { margin-bottom: 0; }
.danger-item p { font-size: 12.5px; color: var(--slate-500); margin: 4px 0 0; line-height: 1.5; }

/* ── Signature badge ── */
.sig-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.sig-badge.has { background: var(--green-light); color: #15803d; }
.sig-badge.no { background: var(--slate-100); color: var(--slate-400); }

/* ── Monitoring badge (client list) ── */
.mon-badge { display: inline-flex; align-items: center; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; font-weight: 500; }
.mon-ok { background: var(--green-light); color: #15803d; }
.mon-warn { background: var(--amber-light); color: #92400e; }

/* ── Progress card ── */
.progress-card { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 16px 20px; margin-top: 12px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-done .progress-bar-fill { background: var(--green) !important; }
.progress-cancelled .progress-bar-fill { background: var(--amber) !important; }
.progress-error .progress-bar-fill { background: var(--red) !important; }

/* ── Photo preview ── */
.photo-preview { text-align: center; background: var(--surface); border-radius: var(--radius-lg); padding: 12px; border: 1px solid var(--slate-200); margin-bottom: 16px; }
.photo-preview img { max-width: 100%; max-height: 320px; border-radius: var(--radius); object-fit: contain; }
.photo-preview-error { padding: 20px; color: var(--slate-400); font-size: 13px; }

/* ── Section headers ── */
.section-label { font-size: 11px; font-weight: 600; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

/* ── Upload area (signature, etc.) ── */
.upload-compact { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--slate-300); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition); }
.upload-compact:hover { border-color: var(--blue); }
.upload-compact input[type="file"] { display: none; }

/* ── Folder reading overlay ── */
.folder-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.97); color: var(--slate-700); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); border: 1px solid var(--slate-200); z-index: 5; }

/* ── Nav icon (Tabler) ── */
.nav-icon i { font-size: 18px; vertical-align: -2px; }

/* ── Utility ── */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--slate-500); }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-4 { padding: 16px 20px; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }