/**
 * SENVIQ Design System — Button, IconButton, Link, Card/StatCard/Panel,
 * Divider, Badge/StatusBadge, Tabs, Breadcrumbs, Avatar.
 * See SENVIQ_COMPONENT_LIBRARY.md for variants/states/accessibility
 * notes per component; this file is the implementation.
 */

/* ============ Button ============ */

.senviq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--senviq-space-2);
  font-family: inherit;
  font-size: var(--senviq-fs-button);
  font-weight: var(--senviq-fw-semibold);
  line-height: 1;
  border-radius: var(--senviq-radius-md);
  border: 1px solid transparent;
  padding: 0.65rem 1.1rem;
  min-height: 40px; /* keeps touch targets >= 40px even before any content padding grows it */
  cursor: pointer;
  transition: background-color var(--senviq-duration-fast) var(--senviq-easing-standard),
    border-color var(--senviq-duration-fast) var(--senviq-easing-standard),
    color var(--senviq-duration-fast) var(--senviq-easing-standard);
}

.senviq-button--primary {
  background: var(--senviq-blue);
  color: var(--senviq-white);
}
.senviq-button--primary:hover {
  background: var(--senviq-blue-hover);
}
.senviq-button--primary:active {
  background: var(--senviq-blue-hover);
  filter: brightness(0.94);
}

.senviq-button--secondary {
  background: var(--senviq-white);
  border-color: var(--senviq-border-strong);
  color: var(--senviq-navy);
}
.senviq-button--secondary:hover {
  background: var(--senviq-bg);
}

.senviq-button--danger {
  background: var(--senviq-white);
  border-color: var(--senviq-danger-border);
  color: var(--senviq-danger);
}
.senviq-button--danger:hover {
  background: var(--senviq-danger-bg);
}

/* Never rely on a gradient to signal that a button is interactive (Prompt 43's own rule) — solid fill + hover/active state is the whole language. */

.senviq-button:disabled,
.senviq-button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/** Loading state — the button keeps its size (no layout shift) and exposes aria-busy; pair with a visually-hidden "Bezig…" text via aria-live if the action's outcome isn't otherwise announced. */
.senviq-button[aria-busy='true'] .senviq-button__label {
  visibility: hidden;
}
.senviq-button[aria-busy='true'] {
  position: relative;
}
.senviq-button[aria-busy='true']::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: senviq-spin var(--senviq-duration-slow) linear infinite;
}

/* ============ IconButton ============ */

.senviq-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px; /* real 40px touch target regardless of the icon's own visual size */
  border-radius: var(--senviq-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--senviq-muted);
  cursor: pointer;
  transition: background-color var(--senviq-duration-fast) var(--senviq-easing-standard);
}
.senviq-icon-button:hover {
  background: var(--senviq-bg);
  color: var(--senviq-navy);
}
.senviq-icon-button[aria-pressed='true'],
.senviq-icon-button[aria-current='true'] {
  background: var(--senviq-blue-tint);
  color: var(--senviq-blue);
}
.senviq-icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============ Link ============ */

.senviq-link {
  color: var(--senviq-blue);
  text-decoration: none;
  font-weight: var(--senviq-fw-medium);
}
.senviq-link:hover {
  text-decoration: underline;
}

/* ============ Card / StatCard / Panel / Divider ============ */

.senviq-card {
  background: var(--senviq-surface);
  border: 1px solid var(--senviq-border);
  border-radius: var(--senviq-radius-lg);
  padding: var(--senviq-space-6);
  box-shadow: var(--senviq-shadow-sm);
}

/**
 * StatCard — the dashboard summary-tile pattern from the approved
 * reference. Deliberately a MODIFIER on .senviq-card, not a new
 * unrelated shape, and deliberately NOT the default for every piece of
 * information (Prompt 43's own "not every element becomes a rounded
 * card" rule) — reach for this specifically for a small set of
 * headline metrics, not general content grouping.
 */
.senviq-stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--senviq-space-4);
}
.senviq-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--senviq-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Tint modifiers — decorative categorical accents only (see tokens.css's own note); the VALUE and its trend arrow/text carry the actual meaning, never the tint alone. */
.senviq-stat-card__icon--mail {
  background: var(--senviq-accent-mail-bg);
  color: var(--senviq-accent-mail);
}
.senviq-stat-card__icon--sign {
  background: var(--senviq-accent-sign-bg);
  color: var(--senviq-accent-sign);
}
.senviq-stat-card__icon--tertiary {
  background: var(--senviq-accent-tertiary-bg);
  color: var(--senviq-accent-tertiary);
}
.senviq-stat-card__icon--attention {
  background: var(--senviq-danger-bg);
  color: var(--senviq-danger);
}

.senviq-panel {
  background: var(--senviq-surface);
  border: 1px solid var(--senviq-border);
  border-radius: var(--senviq-radius-md);
}
.senviq-panel__header {
  padding: var(--senviq-space-4) var(--senviq-space-5);
  border-bottom: 1px solid var(--senviq-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.senviq-panel__body {
  padding: var(--senviq-space-5);
}

.senviq-divider {
  border: none;
  border-top: 1px solid var(--senviq-border);
  margin: var(--senviq-space-4) 0;
}

/* ============ Badge / StatusBadge ============ */

.senviq-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--senviq-space-1);
  font-size: var(--senviq-fs-caption);
  font-weight: var(--senviq-fw-semibold);
  padding: 0.2rem 0.6rem;
  border-radius: var(--senviq-radius-pill);
  border: 1px solid transparent;
  line-height: var(--senviq-lh-normal);
}

/**
 * StatusBadge tone modifiers. IMPORTANT: these classes style a badge
 * whose TEXT CONTENT must already be a human-language label from
 * `packages/design-system`'s status-mapping module — never a raw enum
 * value (Prompt 43's own central rule; see status.ts and
 * SENVIQ_COMPONENT_LIBRARY.md's StatusBadge section). Color is never
 * the only signal: every tone also gets a distinct built-in bullet
 * character via ::before so the state is legible without color too.
 */
.senviq-badge--neutral {
  background: var(--senviq-bg);
  border-color: var(--senviq-border);
  color: var(--senviq-muted);
}
.senviq-badge--info {
  background: var(--senviq-info-bg);
  border-color: var(--senviq-info-border);
  color: var(--senviq-info);
}
.senviq-badge--success {
  background: var(--senviq-success-bg);
  border-color: var(--senviq-success-border);
  color: var(--senviq-success);
}
.senviq-badge--warning {
  background: var(--senviq-warning-bg);
  border-color: var(--senviq-warning-border);
  color: var(--senviq-warning);
}
.senviq-badge--danger {
  background: var(--senviq-danger-bg);
  border-color: var(--senviq-danger-border);
  color: var(--senviq-danger);
}
.senviq-badge--info::before { content: 'ℹ'; }
.senviq-badge--success::before { content: '✓'; }
.senviq-badge--warning::before { content: '!'; }
.senviq-badge--danger::before { content: '✕'; }
.senviq-badge--neutral::before { content: '•'; }

/**
 * Prompt 45 — a genuinely missing primitive from Prompt 43's own set:
 * an inline banner for a page/form-level message (e.g. a login
 * failure) — distinct from StatusBadge (a single-word state label) and
 * from Toast (transient, auto-dismissing). Same tone-token reuse as
 * .senviq-badge above, so a "warning" always means the same color
 * everywhere in the product.
 */
.senviq-banner {
  padding: var(--senviq-space-3) var(--senviq-space-4);
  border-radius: var(--senviq-radius-md);
  border: 1px solid transparent;
  font-size: var(--senviq-fs-small);
  margin: var(--senviq-space-3) 0;
}
.senviq-banner--info {
  background: var(--senviq-info-bg);
  border-color: var(--senviq-info-border);
  color: var(--senviq-info);
}
.senviq-banner--warning {
  background: var(--senviq-warning-bg);
  border-color: var(--senviq-warning-border);
  color: var(--senviq-warning);
}
.senviq-banner--danger {
  background: var(--senviq-danger-bg);
  border-color: var(--senviq-danger-border);
  color: var(--senviq-danger);
}
.senviq-banner--success {
  background: var(--senviq-success-bg);
  border-color: var(--senviq-success-border);
  color: var(--senviq-success);
}

/* ============ Tabs ============ */

.senviq-tabs {
  display: flex;
  gap: var(--senviq-space-2);
  border-bottom: 1px solid var(--senviq-border);
}
.senviq-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--senviq-space-3) var(--senviq-space-1);
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--senviq-fs-body);
  font-weight: var(--senviq-fw-medium);
  color: var(--senviq-muted);
  cursor: pointer;
}
.senviq-tab[aria-selected='true'] {
  color: var(--senviq-blue);
  border-bottom-color: var(--senviq-blue);
  font-weight: var(--senviq-fw-semibold);
}
.senviq-tab:hover:not([aria-selected='true']) {
  color: var(--senviq-navy);
}

/* ============ Breadcrumbs ============ */

.senviq-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-2);
  font-size: var(--senviq-fs-small);
  color: var(--senviq-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}
.senviq-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--senviq-space-2);
}
.senviq-breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: var(--senviq-border-strong);
}
.senviq-breadcrumbs a {
  color: var(--senviq-muted);
  text-decoration: none;
}
.senviq-breadcrumbs a:hover {
  color: var(--senviq-blue);
  text-decoration: underline;
}
.senviq-breadcrumbs [aria-current='page'] {
  color: var(--senviq-navy);
  font-weight: var(--senviq-fw-medium);
}

/* ============ Avatar ============ */

.senviq-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--senviq-navy);
  color: var(--senviq-white);
  font-size: var(--senviq-fs-small);
  font-weight: var(--senviq-fw-semibold);
  flex-shrink: 0;
}

@keyframes senviq-spin {
  to {
    transform: rotate(360deg);
  }
}