/* ============================================================
   Lawyers — shared components
   ============================================================ */

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--scale-sm);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.btn-primary { background: var(--ink-950); color: #fff; }
.btn-primary:hover { background: var(--ink-800); }
.btn-brass { background: var(--brass-500); color: var(--text-on-accent); }
.btn-brass:hover { background: var(--brass-700); }
.btn-ghost { background: transparent; color: var(--ink-950); border-color: var(--line-300); }
.btn-ghost:hover { background: var(--paper-100); }
.btn-danger { background: var(--status-disbarred-fg); color: #fff8f8; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--scale-xs); }

/* ---- card ---- */
.card {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: var(--space-5); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--line-200);
}
.card-header h3 { margin: 0; }

/* ---- stat tile ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.stat-tile {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}
.stat-tile .label { font-size: var(--scale-xs); color: var(--text-secondary); font-weight: 600; letter-spacing: 0.02em; }
.stat-tile .value { font-family: var(--font-display); font-size: var(--scale-2xl); font-weight: 700; margin-top: var(--space-1); }
.stat-tile .delta { font-size: var(--scale-xs); margin-top: var(--space-1); display: flex; align-items: center; gap: 4px; }
.stat-tile.accent-brass { border-inline-start: 3px solid var(--brass-500); }
.stat-tile.accent-warn { border-inline-start: 3px solid var(--status-suspended-fg); }
.stat-tile.accent-danger { border-inline-start: 3px solid var(--status-disbarred-fg); }
.stat-tile.accent-ok { border-inline-start: 3px solid var(--status-senior-fg); }

/* ---- badges / pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--scale-xs);
  font-weight: 700;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-senior { background: var(--status-senior-bg); color: var(--status-senior-fg); }
.badge-trainee { background: var(--status-trainee-bg); color: var(--status-trainee-fg); }
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge-suspended { background: var(--status-suspended-bg); color: var(--status-suspended-fg); }
.badge-disbarred { background: var(--status-disbarred-bg); color: var(--status-disbarred-fg); }
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-secret { background: var(--secret-bg); color: var(--secret-fg); }
.badge-secret::before { display: none; }

/* ---- row status stripe (registry table) ---- */
.status-stripe { border-inline-start: 4px solid transparent; }
.status-stripe.s-senior { border-inline-start-color: var(--status-senior-fg); }
.status-stripe.s-trainee { border-inline-start-color: var(--status-trainee-fg); }
.status-stripe.s-pending { border-inline-start-color: var(--status-pending-fg); }
.status-stripe.s-suspended { border-inline-start-color: var(--status-suspended-fg); }
.status-stripe.s-disbarred { border-inline-start-color: var(--status-disbarred-fg); }
.status-stripe.s-neutral { border-inline-start-color: var(--status-neutral-fg); }

/* ---- table ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: var(--paper-0); }
table.registry { min-width: 720px; }
table.registry th {
  text-align: start;
  font-size: var(--scale-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-50);
  border-block-end: 1px solid var(--line-200);
  position: sticky; top: 0;
}
table.registry td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--line-200);
  font-size: var(--scale-sm);
  vertical-align: middle;
}
table.registry tbody tr:hover { background: var(--paper-50); }
table.registry tbody tr:last-child td { border-block-end: none; }
.name-cell { display: flex; flex-direction: column; }
.name-cell .ar-name { font-family: var(--font-display); font-weight: 600; font-size: var(--scale-md); }
.name-cell .meta { font-size: var(--scale-xs); color: var(--text-secondary); }

/* ---- toolbar / filters ---- */
.toolbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.search-field {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--paper-0); border: 1px solid var(--line-300);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  flex: 1; min-width: 220px;
}
.search-field input { border: none; background: transparent; width: 100%; font-size: var(--scale-sm); outline: none; }
.search-field .ic { width: 16px; height: 16px; color: var(--text-secondary); flex: none; }
.select-field select {
  border: 1px solid var(--line-300); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); background: var(--paper-0); font-size: var(--scale-sm);
}

/* ---- tabs ---- */
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line-200); }
.tab-btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--scale-sm); font-weight: 600; color: var(--text-secondary);
  background: none; border: none; border-block-end: 2px solid transparent;
  cursor: pointer; margin-block-end: -1px;
}
.tab-btn.active { color: var(--ink-950); border-block-end-color: var(--brass-500); }
.tab-panel { display: none; padding-block-start: var(--space-5); }
.tab-panel.active { display: block; }

/* ---- alert banner ---- */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-md);
  font-size: var(--scale-sm);
}
.banner-secret { background: var(--secret-bg); color: var(--secret-fg); }
.banner-secret .ic { color: var(--secret-fg); }
.banner-warn { background: var(--status-suspended-bg); color: var(--status-suspended-fg); }
.banner-info { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.banner strong { display: block; margin-bottom: 2px; }
.banner .ic { width: 20px; height: 20px; flex: none; }

/* ---- timeline ---- */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: var(--space-4); padding-block-end: var(--space-5); position: relative; }
.timeline-item::before {
  content: ""; position: absolute; inset-inline-start: 5px; top: 22px; bottom: 0;
  width: 1px; background: var(--line-300);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brass-500); margin-top: 5px; flex: none; }
.timeline-item.is-flag .timeline-dot { background: var(--status-disbarred-fg); }
.timeline-body .date { font-size: var(--scale-xs); color: var(--text-secondary); }
.timeline-body .title { font-weight: 700; margin: 2px 0; }
.timeline-body .basis { font-size: var(--scale-xs); color: var(--brass-700); }

/* ---- notes / alerts panel ---- */
.note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-200); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); background: var(--paper-0);
}
.note-meta { display: flex; justify-content: space-between; font-size: var(--scale-xs); color: var(--text-secondary); margin-bottom: var(--space-1); }
.note-visibility { font-weight: 700; }

.alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-200); border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.alert-row .due { font-size: var(--scale-xs); color: var(--status-suspended-fg); font-weight: 700; }

/* ---- modal / dialog ---- */
dialog.modal {
  border: none; border-radius: var(--radius-lg);
  padding: 0; width: min(560px, 92vw);
  box-shadow: var(--shadow-modal);
  background: var(--paper-0); color: var(--text-primary);
}
dialog.modal::backdrop { background: rgba(10, 16, 28, 0.55); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); border-block-end: 1px solid var(--line-200);
}
.modal-body { padding: var(--space-5); max-height: 60vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5); border-block-start: 1px solid var(--line-200); }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 1.1rem; line-height: 1; padding: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-size: var(--scale-xs); font-weight: 700; color: var(--text-secondary); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-300); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); font-size: var(--scale-sm); background: var(--paper-0); color: var(--text-primary);
}
.field-hint { font-size: var(--scale-xs); color: var(--text-secondary); }
.checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--scale-sm); }

.stepper { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.stepper .step {
  flex: 1; text-align: center; font-size: var(--scale-xs); font-weight: 700; color: var(--text-secondary);
  padding-block-end: var(--space-2); border-block-end: 3px solid var(--line-200);
}
.stepper .step.active { color: var(--ink-950); border-block-end-color: var(--brass-500); }
.stepper .step.done { color: var(--status-senior-fg); border-block-end-color: var(--status-senior-fg); }

/* ---- role simulator ---- */
.role-simulator {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-100); border: 1px dashed var(--line-300); border-radius: var(--radius-md);
  margin-bottom: var(--space-5); flex-wrap: wrap;
}
.role-simulator select { border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--paper-0); font-weight: 600; }
.redacted-block {
  padding: var(--space-5); text-align: center; border: 1px dashed var(--line-300);
  border-radius: var(--radius-md); color: var(--text-secondary); background: repeating-linear-gradient(135deg, var(--paper-100), var(--paper-100) 8px, var(--paper-50) 8px, var(--paper-50) 16px);
}
.redacted-block .ic { width: 26px; height: 26px; margin: 0 auto var(--space-2); color: var(--text-secondary); }

/* ---- empty / footnote ---- */
.footnote, .footnote:visited { font-size: var(--scale-xs); color: var(--text-secondary); margin-top: var(--space-3); }
.footnote a, .footnote a:visited { color: var(--brass-700); font-weight: 600; }
.legal-ref, .legal-ref:visited { color: var(--brass-700); font-weight: 600; }

/* ---- pattern divider (mashrabiya-inspired hairline motif, restrained) ---- */
.pattern-divider {
  height: 10px;
  background-image: repeating-linear-gradient(135deg, var(--brass-300) 0 2px, transparent 2px 10px),
                     repeating-linear-gradient(45deg, var(--brass-300) 0 2px, transparent 2px 10px);
  opacity: 0.35;
}