/* ============================================================
   Parastatiko — Component styles
   Synced from the Claude Design project. Upstream these classes
   are applied by React primitives; here the same class names are
   written directly into the markup, so no framework is needed.
   Prefix: pk- (parastatiko)
   ============================================================ */

/* ---- Button ------------------------------------------------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-4);
  font: var(--type-label);
  height: var(--control-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-standard);
}
.pk-btn:active { transform: translateY(0.5px); }
.pk-btn:disabled, .pk-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.pk-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-5); font-size: var(--text-xs); }
.pk-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-7); font-size: var(--text-md); }
.pk-btn--block { width: 100%; }

.pk-btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.pk-btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.pk-btn--primary:active:not(:disabled) { background: var(--accent-active); }

.pk-btn--secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.pk-btn--secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.pk-btn--secondary:active:not(:disabled) { background: var(--surface-active); }

.pk-btn--ghost { background: transparent; color: var(--text-body); }
.pk-btn--ghost:hover:not(:disabled) { background: var(--surface-active); }

.pk-btn--danger { background: var(--red-500); color: #fff; border-color: var(--red-500); }
.pk-btn--danger:hover:not(:disabled) { background: var(--red-600); border-color: var(--red-600); }

.pk-btn__icon { display: inline-flex; width: 16px; height: 16px; }
.pk-btn--sm .pk-btn__icon { width: 14px; height: 14px; }

/* ---- Card --------------------------------------------------- */
.pk-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.pk-card--pad { padding: var(--pad-card); }

/* ---- Badge -------------------------------------------------- */
.pk-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 2px var(--space-4);
  border-radius: var(--radius-sm);
  font: var(--type-label); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pk-badge--pill { border-radius: var(--radius-pill); padding: 2px var(--space-5); }
.pk-badge__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pk-badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); border-color: var(--status-neutral-bd); }
.pk-badge--neutral .pk-badge__dot { background: var(--status-neutral-dot); }
.pk-badge--danger { background: var(--status-failed-bg); color: var(--status-failed-fg); border-color: var(--status-failed-bd); }
.pk-badge--danger .pk-badge__dot { background: var(--status-failed-dot); }
.pk-badge--accent { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: var(--azure-100); }
.pk-badge--accent .pk-badge__dot { background: var(--accent); }

/* ---- StatCard ----------------------------------------------- */
.pk-stat {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-7);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.pk-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.pk-stat__label { font: var(--type-label); color: var(--text-muted); }
.pk-stat__icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--accent-soft-bg); color: var(--accent); }
.pk-stat__icon svg { width: 17px; height: 17px; }
.pk-stat__value { font: var(--type-stat); color: var(--text-strong); }
.pk-stat__foot { display: flex; align-items: center; gap: var(--space-4); font: var(--type-caption); color: var(--text-muted); }

/* ---- Input -------------------------------------------------- */
.pk-input-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.pk-input {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-5);
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.pk-input::placeholder { color: var(--text-faint); }
.pk-input:hover:not(:disabled) { border-color: var(--border-strong); }
.pk-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pk-input:disabled { background: var(--surface-sunken); color: var(--text-faint); cursor: not-allowed; }
.pk-input--has-icon { padding-left: 32px; }
.pk-input__icon { position: absolute; left: var(--space-5); display: inline-flex; color: var(--text-faint); pointer-events: none; }
.pk-input__icon svg { width: 16px; height: 16px; }
.pk-input--sm { height: var(--control-height-sm); font-size: var(--text-sm); }

/* ---- Select ------------------------------------------------- */
.pk-select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.pk-select {
  width: 100%; height: var(--control-height);
  padding: 0 32px 0 var(--space-5);
  font: var(--type-body); color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: var(--transition-colors);
}
.pk-select:hover { border-color: var(--border-strong); }
.pk-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pk-select-wrap__caret { position: absolute; right: var(--space-5); pointer-events: none; color: var(--text-muted); display: inline-flex; }
.pk-select-wrap__caret svg { width: 16px; height: 16px; }

/* ---- EmptyState --------------------------------------------- */
.pk-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-11) var(--space-8);
  color: var(--text-muted);
}
.pk-empty--bordered { border: 1px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.pk-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-lg);
  background: var(--surface-active); color: var(--text-faint);
}
.pk-empty__icon svg { width: 20px; height: 20px; }
.pk-empty__title { font: var(--type-label); color: var(--text-body); }
.pk-empty__desc { font: var(--type-body-sm); color: var(--text-muted); max-width: 44ch; }