/* RAK People Hub — Legacy → Design System bridge (UI v2 only).
   Loaded AFTER assets/css/styles.css. Remaps the old CSS variables to DS
   tokens and restyles the legacy component classes, so pages that have not
   yet been individually rewritten still adopt the new design system.
   Scoped to body.ui-v2 so the legacy experience is untouched. */

/* ---- Variable remap (semantic tokens flip automatically in dark mode) ---- */
body.ui-v2 {
  --gold: var(--color-brand-gold-500);
  --gold-light: var(--color-brand-gold-400);
  --gold-dark: var(--color-brand-gold-600);
  --charcoal: var(--color-brand-navy-900);
  --charcoal-light: var(--color-brand-navy-700);
  --charcoal-dark: var(--color-brand-navy-1000);
  --stone: var(--color-surface-stone);
  --silver: var(--color-surface-sunken);

  --bg: var(--color-surface-page);
  --card-bg: var(--color-surface-raised);
  --text-main: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --border-color: var(--color-border-default);
  --primary: var(--color-text-heading);
  --secondary: var(--color-brand-gold-500);

  --shadow-sm: var(--shadow-low);
  --shadow-md: var(--shadow-medium);
  --shadow-lg: var(--shadow-high);
  --glass-bg: var(--color-surface-raised);
  --glass-border: 1px solid var(--color-border-default);
  --backdrop-blur: none;

  --font-family: var(--font-family-latin);
  --border-radius: var(--radius-card);

  background: var(--color-surface-page);
  color: var(--color-text-primary);
}
body.ui-v2[dir="rtl"], .ui-v2 [lang="ar"] { font-family: var(--font-family-arabic); }

/* ---- Buttons ---- */
.ui-v2 .btn,
.ui-v2 .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--min-hit-target);
  padding: 12px 22px;
  background: var(--color-action-primary) !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  background-image: none !important;
  font-weight: var(--font-weight-semibold);
  box-shadow: none !important;
  transition: background var(--motion-base);
}
.ui-v2 .btn:hover,
.ui-v2 .btn-primary:hover { background: var(--color-action-primary-hover) !important; color: #fff !important; transform: none !important; }
.ui-v2 .btn-outline {
  background: transparent !important; background-image: none !important;
  border: 1.5px solid var(--color-text-heading) !important;
  color: var(--color-text-heading) !important; border-radius: var(--radius-sm) !important;
}
.ui-v2 .btn-outline:hover { background: var(--color-brand-navy-900) !important; color: #fff !important; }
.ui-v2 .btn-secondary {
  background: var(--color-brand-navy-900) !important; background-image: none !important;
  color: #fff !important; border-radius: var(--radius-sm) !important;
}
.ui-v2 .btn-danger { background: var(--color-feedback-error) !important; color: #fff !important; border-radius: var(--radius-sm) !important; }
.ui-v2 .btn-sm { min-height: 36px; padding: 8px 14px; font-size: var(--type-body-sm-size); }

/* ---- Cards ---- */
.ui-v2 .card,
.ui-v2 .profile-card,
.ui-v2 .filter-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-low);
}
.ui-v2 .card::before { display: none !important; } /* remove legacy gold hover bar */
.ui-v2 .card:hover { box-shadow: var(--shadow-high); transform: none; border-color: var(--color-border-default); }
.ui-v2 .card-grid { gap: var(--spacing-24); }

/* ---- Forms ---- */
.ui-v2 .form-control,
.ui-v2 input[type="text"], .ui-v2 input[type="email"], .ui-v2 input[type="tel"],
.ui-v2 input[type="password"], .ui-v2 input[type="number"], .ui-v2 input[type="search"],
.ui-v2 input[type="url"], .ui-v2 input[type="date"], .ui-v2 select, .ui-v2 textarea {
  background: var(--color-field-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
}
/* Readonly / inline-lightened fields (e.g. estimated cost) must still flip in dark */
.ui-v2 input[readonly] { background: var(--color-field-surface) !important; color: var(--color-text-primary); }
/* Native dropdown option lists follow the field surface in dark mode */
[data-theme="dark"] .ui-v2 select option { background: var(--color-brand-navy-900); color: #fff; }
.ui-v2 .form-control:focus,
.ui-v2 input:focus, .ui-v2 select:focus, .ui-v2 textarea:focus {
  border-color: var(--color-accent-blue-500);
  box-shadow: 0 0 0 3px rgba(38,132,255,0.18);
  outline: none;
}

/* ---- Badges (used on public pages, previously only styled in admin.css) ---- */
.ui-v2 .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: var(--type-caption-size); font-weight: var(--font-weight-medium);
  background: var(--color-surface-sunken); color: var(--color-brand-navy-700);
}
.ui-v2 .badge-success { background: rgba(18,112,79,.12); color: var(--color-feedback-success); }
.ui-v2 .badge-warning { background: rgba(138,90,0,.12); color: var(--color-feedback-warning); }
.ui-v2 .badge-danger, .ui-v2 .badge-error { background: rgba(194,45,34,.12); color: var(--color-feedback-error); }
.ui-v2 .badge-primary, .ui-v2 .badge-info { background: rgba(22,104,214,.12); color: var(--color-feedback-info); }

/* ---- Alerts ---- */
.ui-v2 .alert { border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); border-inline-start: 3px solid var(--color-feedback-info); background: var(--color-surface-raised); color: var(--color-text-primary); }
.ui-v2 .alert-success { border-inline-start-color: var(--color-feedback-success); }
.ui-v2 .alert-danger, .ui-v2 .alert-error { border-inline-start-color: var(--color-feedback-error); }
.ui-v2 .alert-warning { border-inline-start-color: var(--color-feedback-warning); }

/* ---- Utilities / sections ---- */
.ui-v2 .text-gold { color: var(--color-brand-gold-500) !important; }
.ui-v2 .bg-light-alt { background: var(--color-surface-sunken) !important; }
.ui-v2 .partners-section, .ui-v2 .sponsors-section { background: var(--color-surface-page) !important; border-top: 1px solid var(--color-border-default); }
.ui-v2 section { background-color: var(--color-surface-page); }

/* ---- Modal ---- */
.ui-v2 .modal-content { background: var(--color-surface-raised); border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); }

/* ---- Cookie banner (legacy chrome, restyled to brand) ---- */
.ui-v2 #cookie-banner { background: var(--color-brand-navy-900); color: var(--color-surface-ivory); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ui-v2 #cookie-banner p { color: rgba(255,255,255,.85); }

/* ---- Dark mode: neutralise hardcoded light INLINE backgrounds on legacy pages ----
   Author !important beats inline styles. Scoped to background declarations only so
   text colours are untouched. Covers the slate/white palette used across legacy pages. */
[data-theme="dark"] .ui-v2 [style*="background:#fff"],
[data-theme="dark"] .ui-v2 [style*="background: #fff"],
[data-theme="dark"] .ui-v2 [style*="background:#f8fafc"],
[data-theme="dark"] .ui-v2 [style*="background: #f8fafc"],
[data-theme="dark"] .ui-v2 [style*="background:#f1f5f9"],
[data-theme="dark"] .ui-v2 [style*="background: #f1f5f9"],
[data-theme="dark"] .ui-v2 [style*="background:#f9f9f9"],
[data-theme="dark"] .ui-v2 [style*="background: #f9f9f9"],
[data-theme="dark"] .ui-v2 [style*="background:#f5f6f8"],
[data-theme="dark"] .ui-v2 [style*="background: #f5f6f8"],
[data-theme="dark"] .ui-v2 [style*="background:white"],
[data-theme="dark"] .ui-v2 [style*="background: white"],
[data-theme="dark"] .ui-v2 [style*="background-color:#fff"],
[data-theme="dark"] .ui-v2 [style*="background-color: #fff"],
[data-theme="dark"] .ui-v2 [style*="background-color:#f8fafc"],
[data-theme="dark"] .ui-v2 [style*="background-color: #f8fafc"],
[data-theme="dark"] .ui-v2 [style*="background-color:#f1f5f9"],
[data-theme="dark"] .ui-v2 [style*="background-color: #f1f5f9"] {
  background-color: var(--color-surface-raised) !important;
}
/* Hardcoded slate/graphite text that would go dark-on-dark → readable */
[data-theme="dark"] .ui-v2 [style*="color:#1e293b"],
[data-theme="dark"] .ui-v2 [style*="color: #1e293b"],
[data-theme="dark"] .ui-v2 [style*="color:#0f172a"],
[data-theme="dark"] .ui-v2 [style*="color: #0f172a"],
[data-theme="dark"] .ui-v2 [style*="color:#1f2937"],
[data-theme="dark"] .ui-v2 [style*="color: #1f2937"],
[data-theme="dark"] .ui-v2 [style*="color:#334155"],
[data-theme="dark"] .ui-v2 [style*="color: #334155"],
[data-theme="dark"] .ui-v2 [style*="color:#2c2c2c"],
[data-theme="dark"] .ui-v2 [style*="color: #2c2c2c"],
[data-theme="dark"] .ui-v2 [style*="color:#333"],
[data-theme="dark"] .ui-v2 [style*="color: #333"] {
  color: var(--color-text-primary) !important;
}