/* ==========================================================================
   Admin Panel Styles
   ========================================================================== */

/* Admin sidebar variant */
.admin-sidebar .sidebar-logo-icon {
  background: var(--color-purple);
}

/* Flash Messages */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-4);
  font-size: var(--font-size-sm);
}

.flash-notice {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.flash-alert {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* Detail list for show pages */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.detail-row dd {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Form Styles */
.form-errors {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-error);
}

.form-errors h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.form-errors ul {
  font-size: var(--font-size-sm);
  padding-left: var(--space-5);
  margin: 0;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-6);
}

/* Badge variants */
.badge-purple {
  background: var(--color-purple-light);
  color: var(--color-purple);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-blue);
}

/* Stat display */
.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Spacing helpers */
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.ml-2 { margin-left: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.gap-8 { gap: var(--space-8); }

/* Text helpers */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-base); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* Flex helpers */
.flex { display: flex; }
.items-end { align-items: flex-end; }
.gap-4 { gap: var(--space-4); }

/* Space utility */
.space-y-2 > * + * {
  margin-top: var(--space-2);
}