/* ==========================================================================
   Mecano Harmony — Agatha <-> Hub design-system bridge
   Purpose: align Agatha's legacy tokens and components with the Redegal
   design-system (redegal-ui.css) without renaming 200+ legacy classes or
   touching 213 inline onclicks. Loaded AFTER app.css, AFTER redegal-ui.css
   and AFTER mecano-bc.css so it overrides legacy contrast/weight issues
   while keeping Agatha-specific layouts intact.
   Source of truth: redegal-mecano/frontend/rdg/redegal-ui.css
   ========================================================================== */

:root {
  /* Agatha legacy tokens -> Hub tokens (same look, fixed contrast) */
  --bg:            var(--rdg-bg, #f7f7f7);
  --white:         var(--rdg-white, #ffffff);
  --sidebar-bg:    var(--rdg-white, #ffffff);
  --border:        var(--rdg-border, #e2e8f0);
  --border-light:  var(--rdg-border-light, #f1f5f9);
  --primary:       var(--rdg-primary, #007fff);
  --primary-light: var(--rdg-primary-light, #e6f3ff);
  --primary-hover: var(--rdg-primary-hover, #0066cc);
  --success:       var(--rdg-success, #10b981);
  --success-light: var(--rdg-success-light, #d1fae5);
  --warning:       var(--rdg-warning, #f59e0b);
  --warning-light: var(--rdg-warning-light, #fef3c7);
  --danger:        var(--rdg-danger, #ef4444);
  --danger-light:  var(--rdg-danger-light, #fee2e2);
  --medium:        var(--rdg-info, #3b82f6);
  --medium-light:  var(--rdg-info-light, #dbeafe);
  --text:          var(--rdg-text, #333333);
  /* WCAG AA 5.2:1 on white (was #6b7280 ~4.6:1, #9ca3af ~3.0:1) */
  --text-muted:    var(--rdg-text-muted, #566476);
  --text-dim:      var(--rdg-text-dim, #566476);
  --sidebar-width: var(--rdg-sidebar-w, 220px);
  --surface:       var(--rdg-white, #ffffff);
}

/* ── BODY: enforce Montserrat + Hub antialiasing ── */
body {
  font-family: var(--rdg-font, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ── SIDEBAR logo: 600 weight per brand manual (was 700) ── */
.sidebar-logo { font-weight: 600; }
/* logo-icon keeps 800 — brand logo exception (see DESIGN.md) */
.logo-icon { border-radius: 8px; }

/* ── NAV ITEM active: Hub contrast (#0059b3 on #e6f3ff = 6.1:1 AA) ── */
.nav-item { border-radius: 8px; font-weight: 500; }
.nav-item.active {
  background: var(--rdg-primary-light, #e6f3ff);
  color: #0059b3;
  font-weight: 600;
}
.nav-item.active .nav-icon { color: #0059b3; }

/* ── SIDEBAR section label: 600 (was 600, normalize color) ── */
.sidebar-section-label { color: var(--text-muted); }

/* ── SIDEBAR user: Hub-style ── */
.user-avatar { font-weight: 600; border-radius: 50%; }
.user-name   { font-weight: 600; }

/* ── TOPBAR: Hub height 52px (already), enforce white bg + border ── */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: 52px;
}

/* ── BUTTONS: Hub radius 8px, weight 500, enforce bg colors ── */
.btn, .btn-primary, .btn-indigo, .btn-sm, .btn-accent, .btn-success, .btn-danger, .btn-ghost {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.12s ease;
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-indigo:focus-visible {
  outline: 2px solid var(--rdg-primary, #007fff);
  outline-offset: 2px;
}
.btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary:hover:not(:disabled) { background: #1f2937; }
.btn-indigo  { background: var(--rdg-primary, #007fff); color: #fff; border-color: var(--rdg-primary, #007fff); }
.btn-indigo:hover:not(:disabled) { background: var(--rdg-primary-hover, #0066cc); }

/* ── FORM INPUTS: Hub radius + border weight ── */
.login-input, input[type="text"]:not(.no-rdg), input[type="email"]:not(.no-rdg),
input[type="password"]:not(.no-rdg), input[type="search"]:not(.no-rdg),
select:not(.no-rdg), textarea:not(.no-rdg) {
  border-radius: 8px;
}

/* ── CARDS / KPI / MODAL: Hub radius 12px for surfaces ── */
.kpi-card, .modal-content, .modal, .bu-card, .cd-stat, .card,
.finder-filters, .detail-panel, .pipeline-col, .table-wrap {
  border-radius: 12px;
}
.kpi-value, .bu-card-score, .cd-stat-val {
  /* Hub card-value exception: 28px/800 allowed for big impact numbers */
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* ── BADGES / PILLS: cap to 600 weight (was 700 inline) ── */
[class*="badge"], .tag, .chip, .pipeline-cnt {
  font-weight: 600 !important;
}

/* ── PAGE TITLE: 18px/600 per Hub (was 18px/700) ── */
.page-title {
  font-size: 18px;
  font-weight: 600;
}

/* ── TABLE: header 600 muted (Hub), radius on wrap ── */
.table-wrap table thead th,
.data-table thead th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── SECTION LABELS / UPPERCASE HEADERS: cap 700 -> 600 ── */
.detail-section-title, .cmd-group-label, .pipeline-col-header,
.bu-card-label {
  font-weight: 600 !important;
}

/* ── STEP / NUM INDICATORS: keep 600 (was 700) ── */
.wizard-step-dot, .step-num, .identity-avatar {
  font-weight: 600;
}

/* ── FINDER chip / send: Hub radius ── */
.finder-chip { border-radius: 20px; }
.finder-send { border-radius: 8px; }
.finder-box  { border-radius: 12px; }

/* ── MODAL title: 600 (was 700) ── */
.modal-title { font-weight: 600; }

/* ── LOGIN box: Hub radius 16px ── */
.login-box { border-radius: 16px; }
.login-logo { font-weight: 600; }
.btn-login  { border-radius: 8px; font-weight: 600; }

/* ── LANG SWITCHER active: 600 (was 700) ── */
.lang-switcher .lang-opt.active { font-weight: 600; }

/* ── DETAIL panel name: 600 (was 700) ── */
.detail-name { font-weight: 600; }
.detail-avatar { font-weight: 600; border-radius: 50%; }

/* ── CREDITS sidebar: Hub-aligned ── */
.credits-box { border-radius: 8px; }
.credits-title { font-weight: 600; }

/* ── FOCUS RINGS: Hub standard ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rdg-primary, #007fff);
  outline-offset: 2px;
}

/* ── SCROLLBARS: Hub subtle style (optional quality) ── */
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.content::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── SELECTION (text highlight) ── */
::selection { background: var(--rdg-primary-light, #e6f3ff); color: #0059b3; }

/* ── INPUT-FIELD focus (replaces inline onfocus/onblur handlers removed under CSP strict) ── */
.input-field:focus { border-color: var(--primary); }

/* ── NAV-ICON-BTN (sidebar settings + logout small square buttons) ── */
.nav-icon-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-icon-btn:hover {
  background: var(--rdg-primary-light, #e6f3ff);
  border-color: var(--rdg-primary, #007fff);
  color: var(--rdg-primary, #007fff);
}