/* NGU Global UI unification – safe, low-specificity overrides using brand tokens */

/* Base */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ngu-bg, #F8F9FB);
  color: var(--ngu-text, #212529);
  font-family: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Links */
a {
  color: var(--ngu-primary, #2453FF);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Buttons (generic) */
button,
.btn {
  border-radius: 12px;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.btn-primary,
button.btn-primary {
  background-color: var(--ngu-primary, #2453FF);
  color: #fff;
}
.btn-primary:hover { background-color: var(--ngu-primary-dark, #1A3EDC); }

/* Focus visibility globally */
:where(a, button, input, select, textarea, .btn):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ngu-primary, #2453FF) 60%, white 40%);
  outline-offset: 2px;
}

/* Forms */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"],
select, textarea {
  border-radius: 10px;
  border: 1.5px solid var(--ngu-gray-300, #cbd5e1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ngu-primary, #2453FF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ngu-primary, #2453FF) 20%, transparent);
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
thead th {
  background: var(--ngu-gray-100, #f1f5f9);
  color: var(--ngu-text, #1f2937);
}
tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--ngu-gray-50, #f8fafc) 80%, white 20%); }
td, th { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ngu-gray-200, #e2e8f0); }

/* Alerts */
.alert-success { background: color-mix(in srgb, var(--ngu-success, #28C76F) 14%, white 86%); color: #065f46; }
.alert-warning { background: color-mix(in srgb, var(--ngu-warning, #FFA800) 18%, white 82%); color: #92400e; }
.alert-danger  { background: color-mix(in srgb, var(--ngu-danger, #EA5455) 14%, white 86%); color: #7f1d1d; }
.alert-info    { background: color-mix(in srgb, #0ea5e9 14%, white 86%); color: #0c4a6e; }

/* Cards (generic) */
.card { border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* Safe hit areas on mobile */
@media (max-width: 768px) {
  :where(a, button, .btn) { min-height: 44px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* RTL logical spacing helpers (low specificity) */
.space-block { padding-block: 1rem; }
.space-inline { padding-inline: 1rem; }