/**
 * Component styles that use design tokens only.
 * Overrides / extensions for Bootstrap and custom components so they consume tokens.
 * Load after design-tokens.css and Bootstrap.
 */

/* ========== Alert (inline page alerts) ========== */
.alert.alert-success {
  --bs-alert-bg: var(--color-success-subtle);
  --bs-alert-border-color: var(--color-success);
  --bs-alert-color: var(--success-800);
  border-radius: var(--alert-radius);
  box-shadow: var(--alert-shadow);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  gap: var(--alert-gap);
}

.alert.alert-danger {
  --bs-alert-bg: var(--color-danger-subtle);
  --bs-alert-border-color: var(--color-danger);
  --bs-alert-color: var(--danger-800);
  border-radius: var(--alert-radius);
  box-shadow: var(--alert-shadow);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  gap: var(--alert-gap);
}

.alert.alert-warning {
  --bs-alert-bg: var(--color-warning-subtle);
  --bs-alert-border-color: var(--color-warning);
  --bs-alert-color: var(--warning-800);
  border-radius: var(--alert-radius);
  box-shadow: var(--alert-shadow);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  gap: var(--alert-gap);
}

.alert.alert-info {
  --bs-alert-bg: var(--color-info-subtle);
  --bs-alert-border-color: var(--color-info);
  --bs-alert-color: var(--info-800);
  border-radius: var(--alert-radius);
  box-shadow: var(--alert-shadow);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  gap: var(--alert-gap);
}

/* ========== Buttons (token-driven variants) ========== */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
}

.btn-success {
  background-color: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-success-color);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
}

.btn-success:hover {
  background-color: var(--btn-success-hover-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-success-color);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-color);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
}

.btn-danger:hover {
  background-color: var(--btn-danger-hover-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-color);
}

.btn-outline-primary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
}

.btn-outline-primary:hover {
  background-color: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}

.btn-outline-secondary,
.btn-outline-danger {
  border-radius: var(--btn-radius);
}

/* ========== Form controls (inputs) ========== */
.form-control,
.form-select {
  border: var(--input-border);
  background-color: var(--input-bg);
  color: var(--input-color);
  border-radius: var(--input-radius);
  font-size: var(--input-font-size);
}

.form-control:focus,
.form-select:focus {
  border: var(--input-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.form-control::placeholder {
  color: var(--input-placeholder-color);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border: var(--input-invalid-border);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-color);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ========== Empty state & loading (token-based; no inline styles) ========== */
.empty-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.empty-state-icon-wrap {
  width: var(--size-80, 5rem);
  height: var(--size-80, 5rem);
  font-size: var(--size-40, 2.5rem);
  flex-shrink: 0;
}
.empty-state-block .empty-state-icon {
  font-size: inherit;
}

.loading-spinner-token {
  width: var(--space-20);
  height: var(--space-20);
}

/* ========== UI state blocks (error, empty, no-permission, skeleton, updating) ========== */
.state-error-icon-wrap,
.state-no-permission-icon-wrap {
  width: var(--size-80, 5rem);
  height: var(--size-80, 5rem);
  font-size: var(--size-40, 2.5rem);
}

.state-error-icon,
.state-no-permission-icon {
  font-size: 2.5rem;
}

/* Skeleton placeholder lines – use design token for background */
.skeleton-line {
  display: inline-block;
  height: 1rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--neutral-200, #e9ecef);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.skeleton-line-sm {
  height: 0.75rem;
}

.skeleton-w-40 { width: 40%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-90 { width: 90%; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.state-updating-spinner {
  width: var(--space-16, 1rem);
  height: var(--space-16, 1rem);
}

.page-alert-icon {
  min-width: var(--alert-icon-size);
  font-size: var(--alert-icon-size);
}

/* ========== Radius utilities (token-based) ========== */
.radius-4 {
  border-radius: var(--radius-sm);
}

.radius-8 {
  border-radius: var(--radius-md);
}

.radius-12 {
  border-radius: var(--radius-lg);
}

/* ========== Modal (centralized) ========== */
.modal-header.modal-header-primary {
  background: linear-gradient(135deg, var(--color-info-subtle, #e0f2fe) 0%, var(--primary-50, #eff6ff) 100%);
  border-bottom-color: var(--neutral-200);
}

.modal-content.modal-content-standard {
  border-radius: var(--radius-lg);
  border: 0;
  box-shadow: var(--shadow-modal);
}

/* ========== Stat card icons (no hardcoded gradients) ========== */
.stat-card-icon-primary { background-color: var(--primary-600); color: #fff; }
.stat-card-icon-success { background-color: var(--success-600); color: #fff; }
.stat-card-icon-warning { background-color: var(--warning-600, #d97706); color: #fff; }
.stat-card-icon-info { background-color: var(--info-600, #0284c7); color: #fff; }
.stat-card-icon-purple { background-color: var(--purple-600, #7c3aed); color: #fff; }

/* ========== Typography & layout utilities (replace inline font-size/width) ========== */
.text-10 { font-size: 10px; }
.text-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-40 { font-size: 40px; }
.text-48 { font-size: 48px; }
.cursor-pointer { cursor: pointer; }
.table-col-checkbox { width: 40px; min-width: 40px; }
.table-col-actions { width: 13.75%; }
.max-h-scroll-150 { max-height: 150px; overflow-y: auto; }
.max-h-scroll-200 { max-height: 200px; overflow-y: auto; }
.progress-thin { height: 4px; }
.state-empty-icon { font-size: 2.5rem; }
.d-none-js { display: none !important; }
.d-flex-js { display: flex !important; }
.w-45 { width: 45%; }
.icon-16 { width: 16px; height: 16px; }