/* Visual components only. Existing controllers own events, focus and state. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text-primary); background: var(--color-background); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
:where(h1, h2, h3, .ds-metric-value) { font-family: var(--font-display); }
:where(.ds-button, .primary, .secondary, .primary-button, .secondary-button, .primary-action, .status-action, .whatsapp-action, .submit-button, .connection-primary, .connection-danger, .edit-button, .file-action, .card-actions button, .error-state button, .empty-state button, .load-error button, #save-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: var(--space-2) var(--space-4);
  border: var(--border-default); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-primary); font-size: var(--text-md); font-weight: 700;
  line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast); box-shadow: none;
}
:where(.ds-button, .secondary, .secondary-button, .status-action, .edit-button, .file-action, .card-actions button):hover:not(:disabled) { background: var(--color-background); border-color: var(--color-border-hover); }
:where(.ds-button--primary, .primary, .primary-button, .primary-action, .submit-button, .connection-primary, .error-state button, #save-button) { background: var(--color-primary); border-color: var(--color-primary); color: white; }
:where(.ds-button--primary, .primary, .primary-button, .primary-action, .submit-button, .connection-primary, .error-state button, #save-button):hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: none; box-shadow: none; }
:where(.ds-button--danger, .connection-danger, .status-action[data-status="Lost"]) { background: var(--color-danger); border-color: var(--color-danger); color: white; }
:where(.ds-button--danger, .connection-danger, .status-action[data-status="Lost"]):hover:not(:disabled) { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.ds-button--ghost { background: transparent; border-color: transparent; }
:where(.ds-button--compact, .edit-button, .card-actions button) { min-height: var(--control-compact); font-size: var(--text-sm); padding: 6px var(--space-3); }
:where(button, input, select, textarea):disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
:where(.ds-button--danger, .connection-danger, .status-action[data-status="Lost"]):disabled { background: var(--color-neutral-soft); color: var(--color-text-secondary); border-color: var(--color-border); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .readonly-value) {
  width: 100%; min-width: 0; height: var(--control-height); padding: 0 var(--space-3);
  border: var(--border-default); border-radius: var(--radius-control); background: var(--color-surface);
  color: var(--color-text-primary); font-size: var(--text-md); line-height: 1.5;
}
textarea { height: auto; min-height: 88px; padding-block: var(--space-3); resize: vertical; }
:where(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--color-border-hover); }
:where(input, select, textarea):focus-visible { border-color: var(--color-primary); outline: 3px solid var(--color-focus); outline-offset: 1px; box-shadow: none; }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); }
:where(input[readonly], .readonly-value) { background: var(--color-neutral-soft); color: var(--color-text-secondary); }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-primary); }
.password-control input { padding-right: 50px; }
.password-control .password-toggle { top: 2px; }
:where(.ds-card, .settings-card, .profile-card, .vehicle-card, .lead-card, .team-surface) { border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
:where(.ds-card, .settings-card, .profile-card) { padding: var(--space-6); }
:where(.ds-section-header, .settings-card .card-heading, .profile-card .card-heading) { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: var(--border-default); }
:where(.ds-section-header, .card-heading) h2 { margin: 0; font-size: var(--text-base); font-weight: 800; }
:where(.ds-badge, .qualification-badge, .status-badge, .availability, .status, .admin-badge, .connection-status) { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-neutral-soft); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 700; line-height: 1.4; text-transform: none; }
:where(.ds-badge--success, .availability.active, .status.active, .admin-badge, .status-badge[data-status="Won"]) { background: var(--color-success-soft); color: var(--color-success); }
:where(.ds-badge--priority, .qualification-badge[data-qualification="Hot"], .status-badge[data-status="New"]) { background: var(--color-danger-soft); color: var(--color-priority-text); }
:where(.ds-badge--warning, .status-badge[data-status="Negotiating"]) { background: var(--color-warning-soft); color: var(--color-warning); }
:where(.ds-badge--info, .status-badge[data-status="Assigned"]) { background: var(--color-info-soft); color: var(--color-info); }
.connection-badge { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-neutral-soft); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: normal; text-transform: none; }
.connection-badge.is-connected { background: var(--color-success-soft); color: var(--color-success); }
.connection-badge.is-progress { background: var(--color-warning-soft); color: var(--color-warning); }
.connection-badge.is-error { background: var(--color-danger-soft); color: var(--color-priority-text); }
:where(.ds-avatar, .profile-photo, .responsible-photo) { border-radius: 50%; }
.ds-avatar { display: inline-grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; background: var(--color-success-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: 800; }
.ds-person { display: flex; align-items: center; gap: var(--space-3); }
:where(.ds-modal, dialog, .dialog) { border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-overlay); }
:where(dialog, .ds-modal)::backdrop { background: var(--color-overlay); }
:where(.dialog-backdrop, .panel-overlay) { background: var(--color-overlay); }
:where(.ds-drawer, .lead-panel) { background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.ds-drawer { position: fixed; inset: 0 0 0 auto; width: min(100%, 540px); height: 100dvh; overflow-y: auto; }
.ds-table-region { overflow: auto; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); text-align: left; }
.ds-table th { padding: var(--space-3) var(--space-4); background: var(--color-background); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ds-table td { padding: var(--space-4); border-top: var(--border-default); vertical-align: middle; }
.ds-table tbody tr:hover { background: var(--color-background); }
.ds-table .ds-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table .ds-row-actions { text-align: right; white-space: nowrap; }
.ds-table--compact td { padding-block: var(--space-2); }
:where(.ds-empty, .empty-state, .state-message, .inventory-message) { padding: var(--space-12) var(--space-5); color: var(--color-text-secondary); text-align: center; }
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
:where(.ds-feedback, .form-error, .load-error, .error-state) { padding: var(--space-4); border: 1px solid #f3c6b5; border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-priority-text); font-size: var(--text-md); line-height: 1.5; }
.ds-feedback--success { background: var(--color-success-soft); border-color: var(--color-success-soft); color: var(--color-success); }
.ds-feedback--warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft); color: var(--color-warning); }
:where(.ds-skeleton, .vehicle-skeleton) { min-height: 12px; border: var(--border-default); border-radius: var(--radius-control); background: linear-gradient(90deg, var(--color-neutral-soft) 25%, var(--color-border) 50%, var(--color-neutral-soft) 75%); background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite; }
.ds-skeleton--row { height: 44px; margin-top: var(--space-3); }
@keyframes ds-shimmer { to { background-position: -100% 0; } }
/* Future visual primitives: no product controls, data, charts or dashboard mounted. */
.ds-metric-label { color: var(--color-text-secondary); font-size: var(--text-md); }
.ds-metric-value { margin-block: var(--space-2); font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-metric--secondary .ds-metric-value { font-size: var(--text-xl); }
.ds-data-panel { min-width: 0; padding: var(--space-6); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.ds-view-toggle { display: inline-flex; padding: 3px; border: var(--border-default); border-radius: var(--radius-control); background: var(--color-surface); }
.ds-view-toggle [aria-pressed="true"] { background: var(--color-brand); color: white; }
@media (max-width: 640px) {
  :where(.ds-card, .settings-card, .profile-card) { padding: var(--space-5) var(--space-4); }
  :where(.ds-section-header, .settings-card .card-heading, .profile-card .card-heading) { flex-direction: column; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }