/*
 * Noor Al-Iraq design system (website). Same values as the app: ui/theme/DesignTokens.kt
 * Use these classes in new or refactored pages so every page looks the same.
 *   Buttons:  .noor-btn .noor-btn-primary | .noor-btn-secondary | .noor-btn-danger
 *   Cards:    .noor-card      Titles: .noor-title      Inputs: .noor-input
 *   Badges:   .noor-badge + .noor-badge-success | -warning | -danger | -info
 *   States:   .noor-empty  (empty list)   .noor-error (error box)
 */
:root {
  --noor-navy-dark: #060F1E;
  --noor-navy: #0F172A;
  --noor-navy-medium: #1E293B;
  --noor-orange: #EA580C;
  --noor-orange-hover: #C2410C;
  --noor-amber: #F59E0B;
  --noor-orange-soft: #FFF7ED;
  --noor-green: #059669;
  --noor-green-soft: #ECFDF5;
  --noor-red: #DC2626;
  --noor-red-soft: #FEF2F2;
  --noor-blue: #0284C7;
  --noor-blue-soft: #F0F9FF;
  --noor-surface: #FFFFFF;
  --noor-bg: #F8FAFC;
  --noor-border: #E2E8F0;
  --noor-text: #0F172A;
  --noor-text-2: #64748B;
  --noor-text-3: #94A3B8;
  --noor-radius-sm: 8px;
  --noor-radius-md: 12px;
  --noor-radius-lg: 16px;
  --noor-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
}

.noor-card { background: var(--noor-surface); border: 1px solid var(--noor-border); border-radius: var(--noor-radius-lg); padding: 14px; box-shadow: var(--noor-shadow); }
.noor-title { font-weight: 900; font-size: 15px; color: var(--noor-text); }

.noor-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border-radius: var(--noor-radius-md); font-weight: 900; font-size: 14px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s; text-decoration: none; }
.noor-btn:disabled, .noor-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.noor-btn-primary { background: var(--noor-orange); color: #fff; }
.noor-btn-primary:hover { background: var(--noor-orange-hover); }
.noor-btn-secondary { background: #fff; color: var(--noor-orange); border-color: var(--noor-border); }
.noor-btn-secondary:hover { border-color: var(--noor-orange); }
.noor-btn-danger { background: var(--noor-red); color: #fff; }

.noor-input { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--noor-bg); border: 1px solid var(--noor-border);
  border-radius: var(--noor-radius-md); font-size: 14px; color: var(--noor-text); }
.noor-input:focus { outline: none; border-color: var(--noor-orange); background: #fff; }

.noor-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.noor-badge-success { background: var(--noor-green-soft); color: var(--noor-green); }
.noor-badge-warning { background: var(--noor-orange-soft); color: var(--noor-orange); }
.noor-badge-danger  { background: var(--noor-red-soft); color: var(--noor-red); }
.noor-badge-info    { background: var(--noor-blue-soft); color: var(--noor-blue); }

.noor-empty { text-align: center; padding: 32px 16px; color: var(--noor-text-2); font-weight: 700; }
.noor-error { background: var(--noor-red-soft); border: 1px solid #FECACA; color: #991B1B; border-radius: var(--noor-radius-md); padding: 12px; font-weight: 700; }