/*
 * Shared design tokens for the PHP-rendered surfaces (auth pages,
 * Farm Dashboard, Super Admin Dashboard). Colors mirror the Flutter
 * app's default palette (core/theme/app_colors.dart) so both platforms
 * read as one product. Tenant white-label colors override
 * --brand-primary / --brand-secondary inline per farm once Stage 3+
 * renders authenticated pages with a loaded farm record.
 */

:root {
  --brand-primary: #1565C0;
  --brand-secondary: #2E7D32;
  --brand-bg: #F5F7FA;
  --brand-surface: #FFFFFF;
  --brand-text: #1A1F26;
  --brand-text-muted: #6B7280;
  --brand-danger: #C62828;
  --brand-warning: #F9A825;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.card,
.erp-card {
  background: var(--brand-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0d4a94;
  border-color: #0d4a94;
}

div.dataTables_length select{
    width: 300px !important;
}

.form-control,
.form-select {
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.15);
}

.text-brand-primary { color: var(--brand-primary); }
.text-brand-secondary { color: var(--brand-secondary); }
.bg-brand-primary { background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: var(--brand-secondary); }

.badge-status-active { background-color: var(--brand-secondary); }
.badge-status-pending { background-color: var(--brand-warning); color: #1A1F26; }
.badge-status-suspended,
.badge-status-expired { background-color: var(--brand-danger); }

/* Wider-than-XL modal for dense forms (e.g. purchase request item grid) */
@media (min-width: 1200px) {
  .modal-dialog.modal-xxl {
    max-width: 1400px;
  }
}