/* Bridge styles to make legacy .form-control inputs match the new UI
   Applies generous padding, border, and focus states. */

/* Base inputs */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 2.5rem; /* consistent tap target */
  padding: 0.625rem 0.875rem; /* py-2.5 px-3.5 */
  border: 1px solid #E2E8F0; /* border-light */
  border-radius: 0.5rem;      /* rounded-lg */
  background: #FFFFFF;        /* card-light */
  color: #2D3748;             /* text-light */
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: #4A90E2; /* primary */
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.35); /* focus ring */
}

/* Placeholder colors */
.form-control::placeholder { color: #A0AEC0; }
.dark .form-control::placeholder { color: #718096; }

/* Textarea */
textarea.form-control { min-height: 6rem; resize: vertical; }

/* Sizes */
.form-control.form-control-sm { min-height: 2.25rem; padding: 0.5rem 0.75rem; }
.form-control.form-control-lg { min-height: 2.875rem; padding: 0.75rem 1rem; }

/* Dark mode */
.dark .form-control,
.dark .form-select,
.dark input.form-control,
.dark select.form-control,
.dark textarea.form-control {
  background: #2D3748; /* card-dark */
  color: #E2E8F0;      /* text-dark */
  border-color: #4A5568; /* border-dark */
}

.dark .form-control:focus,
.dark .form-select:focus {
  border-color: #4A90E2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.45);
}

/* Input groups often remove radii; keep padding generous */
.input-group .form-control { padding-top: 0.625rem; padding-bottom: 0.625rem; }

/* =============================
   Minimal tokens (fallbacks)
   ============================= */
:root {
  --color-primary: #3B82F6;
  --color-primary-600: #2563EB;
  --color-bg: #F7F9FB;
  --color-card: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #1F2937;
  --radius-md: 0.5rem;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
}
.dark {
  --color-bg: #0F172A;
  --color-card: #1F2937;
  --color-border: #4A5568;
  --color-text: #E2E8F0;
}

/* =============================
   Buttons
   ============================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; line-height: 1.25; cursor: pointer; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }
.btn-primary { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); }
.btn-secondary { color: var(--color-text); background-color: var(--color-card); border-color: var(--color-border); }
.btn-secondary:hover { background-color: #F3F4F6; }
.btn-ghost { color: var(--color-text); background-color: transparent; border-color: transparent; }
.btn-ghost:hover { background-color: rgba(148,163,184,0.15); }
.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
.btn-lg { padding: 0.625rem 1rem; font-size: 1rem; }
.btn[disabled], .btn.disabled { opacity: .6; cursor: not-allowed; }

/* =============================
   Focus ring utility
   ============================= */
.focus-ring { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.35); }

/* =============================
   Table enhancements
   ============================= */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th { position: sticky; top: 0; background: var(--color-card); z-index: 1; }
.table thead th, .table tbody td { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.table-zebra tbody tr:nth-child(odd) { background-color: rgba(148,163,184,0.07); }
.dark .table-zebra tbody tr:nth-child(odd) { background-color: rgba(148,163,184,0.12); }
.table-compact thead th, .table-compact tbody td { padding: 0.625rem 0.75rem; }
.table-number { text-align: right; }

/* =============================
   Badge chips
   ============================= */
.chip { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.chip-neutral { background: #F1F5F9; color: #334155; }
.dark .chip-neutral { background: #1F2937; color: #E5E7EB; border-color: #374151; }
.chip-success { background: #DCFCE7; color: #166534; }
.dark .chip-success { background: rgba(16,185,129,0.15); color: #34D399; }
.chip-warning { background: #FEF3C7; color: #92400E; }
.dark .chip-warning { background: rgba(245,158,11,0.15); color: #F59E0B; }
.chip-danger { background: #FEE2E2; color: #991B1B; }
.dark .chip-danger { background: rgba(239,68,68,0.15); color: #F87171; }

/* =============================
   Cards & helpers
   ============================= */
.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.page-bg { background: var(--color-bg); }