/* ObraOS502 UI Component Library - Phase 3 */
@import "./design-tokens.css";

/* Surfaces and cards */
:where(.surface-card) {
  background: var(--obra-surface-white);
  border: var(--obra-border-subtle);
  border-radius: var(--obra-radius-md);
  box-shadow: var(--obra-shadow-card);
  padding: var(--obra-space-l);
  transition: box-shadow var(--obra-transition-fast), transform var(--obra-transition-fast);
}

:where(.surface-card:hover) {
  box-shadow: var(--obra-shadow-elevated);
  transform: translateY(-2px);
}

:where(.card-metric, .metric-widget) {
  background: var(--obra-surface-white);
  border: var(--obra-border-subtle);
  border-radius: var(--obra-radius-md);
  box-shadow: var(--obra-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--obra-space-xs);
  padding: var(--obra-space-l);
}

:where(.card-metric-header) {
  align-items: center;
  display: flex;
  gap: var(--obra-space-s);
  justify-content: space-between;
}

:where(.card-metric-icon) {
  align-items: center;
  background: var(--obra-color-primary-soft);
  border-radius: var(--obra-radius-sm);
  color: var(--obra-color-primary);
  display: inline-flex;
  flex: 0 0 var(--obra-btn-height);
  height: var(--obra-btn-height);
  justify-content: center;
  width: var(--obra-btn-height);
}

:where(.card-flat) {
  background: var(--obra-surface-white);
  border: var(--obra-border-subtle);
  border-radius: var(--obra-radius-sm);
  box-shadow: var(--obra-shadow-none);
  padding: var(--obra-space-m);
}

/* Buttons and actions */
:where(
  .btn-primary,
  .primary-btn,
  .btn.primary,
  .btn-secondary,
  .secondary-btn,
  .btn.secondary,
  .btn-ghost,
  .btn.ghost,
  .btn-danger,
  .btn.danger,
  .ob-btn
) {
  align-items: center;
  border: var(--obra-border-subtle);
  border-radius: var(--obra-radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--obra-font-button-size);
  font-weight: 600;
  gap: var(--obra-gap-inline);
  height: var(--obra-btn-height);
  justify-content: center;
  line-height: 1;
  min-width: max-content;
  padding: 0 var(--obra-btn-padding-x);
  text-decoration: none;
  transition:
    filter var(--obra-transition-fast),
    transform var(--obra-transition-fast),
    box-shadow var(--obra-transition-fast),
    border-color var(--obra-transition-fast);
}

:where(.btn-primary, .primary-btn, .btn.primary, .ob-btn) {
  background: var(--obra-btn-primary-bg);
  border-color: var(--obra-surface-transparent);
  color: var(--obra-btn-primary-text);
}

:where(.btn-secondary, .secondary-btn, .btn.secondary) {
  background: var(--obra-btn-secondary-bg);
  color: var(--obra-btn-secondary-text);
}

:where(.btn-ghost, .btn.ghost) {
  background: var(--obra-btn-ghost-bg);
  border-color: var(--obra-surface-transparent);
  color: var(--obra-btn-ghost-text);
}

:where(.btn-danger, .btn.danger) {
  background: var(--obra-btn-danger-bg);
  border-color: var(--obra-surface-transparent);
  color: var(--obra-btn-danger-text);
}

:where(
  .btn-primary:hover,
  .primary-btn:hover,
  .btn.primary:hover,
  .btn-secondary:hover,
  .secondary-btn:hover,
  .btn.secondary:hover,
  .btn-ghost:hover,
  .btn.ghost:hover,
  .btn-danger:hover,
  .btn.danger:hover,
  .ob-btn:hover
) {
  filter: var(--obra-filter-hover);
  transform: translateY(-1px);
}

:where(
  .btn-primary:active,
  .primary-btn:active,
  .btn.primary:active,
  .btn-secondary:active,
  .secondary-btn:active,
  .btn.secondary:active,
  .btn-ghost:active,
  .btn.ghost:active,
  .btn-danger:active,
  .btn.danger:active,
  .ob-btn:active
) {
  transform: translateY(1px) scale(0.98);
}

:where(
  .btn-primary:focus-visible,
  .primary-btn:focus-visible,
  .btn.primary:focus-visible,
  .btn-secondary:focus-visible,
  .secondary-btn:focus-visible,
  .btn.secondary:focus-visible,
  .btn-ghost:focus-visible,
  .btn.ghost:focus-visible,
  .btn-danger:focus-visible,
  .btn.danger:focus-visible,
  .ob-btn:focus-visible
) {
  box-shadow: var(--obra-focus-ring);
  outline: none;
}

:where(
  .btn-primary:disabled,
  .primary-btn:disabled,
  .btn.primary:disabled,
  .btn-secondary:disabled,
  .secondary-btn:disabled,
  .btn.secondary:disabled,
  .btn-ghost:disabled,
  .btn.ghost:disabled,
  .btn-danger:disabled,
  .btn.danger:disabled,
  .ob-btn:disabled
) {
  cursor: not-allowed;
  opacity: var(--obra-disabled-opacity);
}

:where(.btn-icon-only) {
  flex: 0 0 var(--obra-btn-height);
  padding: 0;
  width: var(--obra-btn-height);
}

:where(.btn-with-icon) {
  gap: var(--obra-gap-inline);
}

:where(.small-btn, .btn.small, .small-btn) {
  min-width: 0;
}

/* Inputs and forms */
:where(.input-solid, .input-outline, .select-modern, .ob-input) {
  border: var(--obra-border-subtle);
  border-radius: var(--obra-radius-sm);
  color: var(--obra-color-body);
  font-family: inherit;
  font-size: var(--obra-font-input-size);
  height: var(--obra-btn-height);
  padding: 0 var(--obra-space-s);
  transition:
    border-color var(--obra-transition-fast),
    box-shadow var(--obra-transition-fast),
    background var(--obra-transition-fast);
  width: 100%;
}

:where(.input-solid, .select-modern, .ob-input) {
  background: var(--obra-input-bg);
}

:where(.input-outline) {
  background: var(--obra-surface-transparent);
}

:where(.input-solid::placeholder, .input-outline::placeholder, .ob-input::placeholder) {
  color: var(--obra-input-placeholder);
}

:where(.input-solid:focus, .input-outline:focus, .select-modern:focus, .ob-input:focus) {
  border-color: var(--obra-color-primary);
  box-shadow: var(--obra-focus-ring);
  outline: none;
}

:where(.select-modern) {
  appearance: auto;
  cursor: pointer;
}

:where(.field-group) {
  display: flex;
  flex-direction: column;
  gap: var(--obra-space-xs);
  margin-bottom: var(--obra-space-m);
}

:where(.label-sm) {
  color: var(--obra-color-muted);
  font: var(--obra-font-meta);
}

/* Data display and tables */
:where(.table-scroll, .table-wrap) {
  border-radius: var(--obra-radius-md);
  max-width: 100%;
  overflow: auto;
}

:where(.table-modern) {
  background: var(--obra-surface-white);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--obra-radius-md);
  box-shadow: var(--obra-shadow-card);
  overflow: hidden;
  width: 100%;
}

:where(.table-modern th, .table-modern td) {
  border-bottom: var(--obra-table-divider);
  padding: var(--obra-space-s) var(--obra-space-m);
  text-align: left;
  vertical-align: top;
}

:where(.table-modern th) {
  background: var(--obra-table-header-bg);
  color: var(--obra-color-muted);
  font: var(--obra-font-meta);
  position: sticky;
  top: 0;
  z-index: 1;
}

:where(.table-modern tbody tr:nth-child(2n)) {
  background: var(--obra-table-row-alt-bg);
}

:where(.table-modern tbody tr:hover) {
  background: var(--obra-table-row-hover);
}

:where(.table-modern tr:last-child td) {
  border-bottom: 0;
}

:where(.badge, .badge-role, .badge-status) {
  align-items: center;
  border-radius: var(--obra-radius-pill);
  display: inline-flex;
  font-size: var(--obra-font-badge-size);
  font-weight: 700;
  gap: var(--obra-space-2xs);
  letter-spacing: var(--obra-letter-spacing-badge);
  line-height: 1;
  padding: var(--obra-space-2xs) var(--obra-space-s);
}

:where(.badge-status) {
  background: var(--obra-badge-status-bg);
  color: var(--obra-badge-status-text);
}

:where(.badge-role) {
  background: var(--obra-badge-role-bg);
  color: var(--obra-badge-role-text);
}

:where(.badge-success, .badge.active) {
  background: var(--obra-badge-success-bg);
  color: var(--obra-badge-success-text);
}

:where(.badge-danger, .badge.queued) {
  background: var(--obra-badge-danger-bg);
  color: var(--obra-badge-danger-text);
}

:where(.badge-warning, .badge.paused, .badge.planning) {
  background: var(--obra-badge-warning-bg);
  color: var(--obra-badge-warning-text);
}

:where(.trend-indicator, .metric-trend) {
  align-items: center;
  display: inline-flex;
  font: var(--obra-font-meta);
  gap: var(--obra-space-2xs);
}

:where(.trend-up) {
  color: var(--obra-trend-up);
}

:where(.trend-down) {
  color: var(--obra-trend-down);
}

:where(.trend-flat) {
  color: var(--obra-trend-flat);
}

/* Micro-chart hooks */
:where(.sparkline-wrap) {
  align-items: center;
  background: var(--obra-surface-transparent);
  display: flex;
  height: var(--obra-sparkline-height);
  justify-content: center;
  width: 100%;
}

:where(.ring-progress) {
  align-items: center;
  background: var(--obra-surface-transparent);
  border: var(--obra-ring-border);
  border-radius: var(--obra-radius-pill);
  display: flex;
  font: var(--obra-font-meta);
  height: var(--obra-ring-size);
  justify-content: center;
  position: relative;
  width: var(--obra-ring-size);
}

/* Typography and layout utilities */
:where(.text-display, .metric-value) {
  color: var(--obra-color-ink);
  font: var(--obra-font-display);
}

:where(.text-ui, .metric-title) {
  color: var(--obra-color-ink);
  font: var(--obra-font-ui);
}

:where(.text-section) {
  color: var(--obra-color-ink);
  font: var(--obra-font-section);
}

:where(.text-body) {
  color: var(--obra-color-body);
  font: var(--obra-font-body);
}

:where(.text-meta) {
  color: var(--obra-color-muted);
  font: var(--obra-font-meta);
}

:where(.flex-row) {
  align-items: center;
  display: flex;
  gap: var(--obra-space-xs);
}

:where(.flex-col) {
  display: flex;
  flex-direction: column;
  gap: var(--obra-space-xs);
}

:where(.gap-xs) {
  gap: var(--obra-space-xs);
}

:where(.gap-s) {
  gap: var(--obra-space-s);
}

:where(.gap-m) {
  gap: var(--obra-space-m);
}

:where(.gap-l) {
  gap: var(--obra-space-l);
}

:where(.main-content-area) {
  display: flex;
  flex-direction: column;
  gap: var(--obra-space-m);
}

:where(.mt-s) {
  margin-top: var(--obra-space-s);
}

:where(.mt-m) {
  margin-top: var(--obra-space-m);
}

:where(.mt-l, .mt-lg) {
  margin-top: var(--obra-space-l);
}

:where(.mb-s) {
  margin-bottom: var(--obra-space-s);
}

:where(.mb-m) {
  margin-bottom: var(--obra-space-m);
}

:where(.mb-l, .mb-lg) {
  margin-bottom: var(--obra-space-l);
}

:where(.pt-s) {
  padding-top: var(--obra-space-s);
}

:where(.pb-l) {
  padding-bottom: var(--obra-space-l);
}

:where(.shrink-0) {
  flex-shrink: 0;
}

:where(.sparkline-svg) {
  filter: drop-shadow(var(--obra-shadow-micro-chart, 0 1px 1px color-mix(in srgb, var(--obra-color-primary) 18%, transparent)));
}

:where(.fn-amount) {
  color: var(--obra-color-ink);
  font-weight: var(--obra-font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

:where(.masked-financial) {
  color: var(--obra-color-muted);
  letter-spacing: var(--obra-letter-spacing-mask, 0.12em);
  opacity: var(--obra-opacity-muted, 0.4);
  user-select: none;
}

:where(.ring-progress svg) {
  display: block;
}

:where(.ring-progress-label) {
  inset: 0;
  display: grid;
  place-items: center;
  position: absolute;
  transform: none;
}