/* ============================================================
   MRI DASHBOARD CSS
   ============================================================ */

/* ── LANDING PAGE ── */
.mri-landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px 60px;
}

.mri-landing-hero {
  padding: 48px 0 36px;
  border-bottom: 1px solid #e8eaf0;
  margin-bottom: 36px;
}

.mri-badge-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.mri-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #fef3c7;
  color: #d97706;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 999px;
}

.mri-badge-sub {
  font-size: 12px;
  color: #9aa0b4;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.mri-landing-title {
  font-size: 56px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 12px;
}

.mri-landing-title span { color: #1a6fdb; }



/* ── CONSISTENT NUMBER FONT ── */
.gauge-score,
.gauge-max,
.score-num,
.score-max,
.stage-mini-score,
.stage-score-badge,
.mri-score-number,
.mri-score-max,
.kde-cov-num,
.last-assess-score,
.product-row-score,
.org-list-score,
.stage-modal-score-label,
.score-live-number,
.score-live-max,
.stage-score-chip-value,
.mri-project-score-big .score-num,
.mri-project-score-big .score-max {
  font-family: 'DM Mono', monospace !important;
}

.mri-landing-desc {
  font-size: 14px;
  color: #6b7280;
  max-width: 480px;
  line-height: 1.7;
}

/* ── PROJECTS GRID ── */
.mri-projects-label {
  font-size: 11px;
  font-weight: 700;
  color: #9aa0b4;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.mri-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.mri-project-card {
  background: #f9fafb;
  border: 1.5px solid #e8eaf0;
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mri-project-card:hover {
  border-color: #1a6fdb;
  box-shadow: 0 8px 32px rgba(26,111,219,0.12);
  transform: translateY(-2px);
  background: #fff;
}

.mri-project-card.medium { background: #fffbeb; border-color: #fde68a; }
.mri-project-card.medium:hover { border-color: #f59e0b; box-shadow: 0 8px 32px rgba(245,158,11,0.15); }

.mri-project-card.add-card {
  background: #fff;
  border: 1.5px dashed #d1d5db;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
}

.mri-project-card.add-card:hover {
  border-color: #1a6fdb;
  background: #f0f7ff;
  transform: translateY(-2px);
}

.mri-add-icon {
  font-size: 36px;
  color: #9aa0b4;
  margin-bottom: 8px;
  font-weight: 300;
}

.mri-add-label {
  font-size: 15px;
  font-weight: 700;
  color: #4a4e69;
  margin-bottom: 6px;
}

.mri-add-desc {
  font-size: 12px;
  color: #9aa0b4;
  line-height: 1.6;
}

.mri-project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mri-project-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
}

.mri-project-type {
  font-size: 11px;
  color: #9aa0b4;
  margin-top: 3px;
}

.mri-project-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.mri-project-score-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mri-project-score-badge.transparent { background: #dcfce7; color: #16a34a; }
.mri-project-score-badge.transparent .dot { background: #16a34a; }
.mri-project-score-badge.low { background: #dbeafe; color: #1d4ed8; }
.mri-project-score-badge.low .dot { background: #1d4ed8; }
.mri-project-score-badge.medium { background: #fef3c7; color: #d97706; }
.mri-project-score-badge.medium .dot { background: #d97706; }
.mri-project-score-badge.critical { background: #fee2e2; color: #dc2626; }
.mri-project-score-badge.critical .dot { background: #dc2626; }

.mri-project-score-big {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-num {
  font-family: 'DM Mono', monospace;
  font-size: 36px;
  font-weight: 500;
  color: #1a1a2e;
  line-height: 1;
}

.score-max {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #9aa0b4;
}

.mri-project-orgs-label {
  font-size: 9px;
  font-weight: 700;
  color: #9aa0b4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mri-org-chips { display: flex; flex-direction: column; gap: 6px; }

.mri-org-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4a4e69;
  font-weight: 500;
}

.mri-org-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mri-org-role {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}

.mri-org-role.seller { background: #dcfce7; color: #16a34a; }
.mri-org-role.buyer { background: #dbeafe; color: #1d4ed8; }

.mri-project-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9aa0b4;
}

.mri-project-btn {
  width: 100%;
  padding: 11px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: auto;
}

.mri-project-btn:hover { background: #1a6fdb; }

/* ── INFO STRIP ── */
.mri-info-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8eaf0;
  overflow: hidden;
}

.mri-info-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  flex: 1;
}

.mri-info-strip-icon { font-size: 20px; }

.mri-info-strip-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mri-info-strip-item strong {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.mri-info-strip-item span {
  font-size: 11px;
  color: #9aa0b4;
}

.mri-info-strip-sep {
  width: 1px;
  height: 40px;
  background: #e8eaf0;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD PAGE
══════════════════════════════════════════════════════════ */

.dash-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px 60px;
}

/* ── DASH TOP BAR ── */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 20px;
  gap: 16px;
}

.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.dash-back:hover { color: #1a1a2e; }

.dash-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.dash-breadcrumb-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
}

.dash-edit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: #1a1a2e;
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.dash-edit-btn:hover { background: #1a6fdb; }

/* ── DASH GRID ── */
.dash-grid {
  display: grid;
  grid-template-columns: 300px 1fr 240px;
  grid-template-rows: auto auto auto;
  gap: 16px;
}

/* ── CARDS ── */
.dash-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid #e8eaf0;
}

.dash-card-label {
  font-size: 9px;
  font-weight: 700;
  color: #9aa0b4;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* SCORE CARD */
.dash-card-score {
  grid-column: 1;
  grid-row: 1;
}

.gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}

.gauge-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.gauge-center {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.gauge-score {
  font-family: 'DM Mono', monospace;
  font-size: 32px;
  font-weight: 500;
  color: #1a1a2e;
  line-height: 1;
}

.gauge-max {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #9aa0b4;
  margin-top: 2px;
}

.gauge-status {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a2e;
  margin-top: 6px;
}

.gauge-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #9aa0b4;
  margin-top: -8px;
  padding: 0 12px;
}

/* STAGES CARD */
.dash-card-stages {
  grid-column: 2;
  grid-row: 1;
}

.stages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.stage-mini-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #f0f2f8;
}

.stage-mini-code {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #1a6fdb;
  margin-bottom: 4px;
}

.stage-mini-name {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

.stage-mini-score {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.stage-mini-score span {
  font-size: 11px;
  color: #9aa0b4;
}

.stage-mini-bar {
  height: 4px;
  background: #f0f2f7;
  border-radius: 999px;
  overflow: hidden;
}

.stage-mini-fill {
  height: 100%;
  background: #e63946;
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* ORGS CARD */
.dash-card-orgs {
  grid-column: 3;
  grid-row: 1 / 3;
}

.org-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

.org-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 10px;
}

.org-list-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-list-name { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.org-list-role { font-size: 11px; color: #9aa0b4; }

.org-list-score {
  margin-left: auto;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.org-list-score.transparent { background: #dcfce7; color: #16a34a; }
.org-list-score.low { background: #dbeafe; color: #1d4ed8; }
.org-list-score.medium { background: #fef3c7; color: #d97706; }
.org-list-score.critical { background: #fee2e2; color: #dc2626; }

.threshold-mini-list { display: flex; flex-direction: column; gap: 6px; }

.threshold-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4a4e69;
}

.tdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tdot.transparent { background: #16a34a; }
.tdot.low { background: #1d4ed8; }
.tdot.medium { background: #d97706; }
.tdot.critical { background: #dc2626; }

/* PRODUCTS CARD */
.dash-card-products {
  grid-column: 1 / 3;
  grid-row: 2;
}

.products-empty {
  text-align: center;
  padding: 32px 16px;
  color: #9aa0b4;
  font-size: 13px;
}

.products-empty p { font-weight: 600; color: #4a4e69; margin-bottom: 4px; }
.products-empty span { font-size: 12px; }

.products-table { display: flex; flex-direction: column; gap: 0; }

.product-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f4f6fb;
  gap: 12px;
}

.product-row:last-child { border-bottom: none; }

.product-row-name { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.product-row-brand { font-size: 11px; color: #9aa0b4; margin-top: 2px; }

.product-row-score {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a2e;
}

.product-row-score span { font-size: 11px; color: #9aa0b4; }

/* KDE COVERAGE CARD */
.dash-card-kde {
  grid-column: 1 / 3;
  grid-row: 3;
}

.kde-coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kde-cov-item {
  background: #f9fafb;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.kde-cov-item.green { background: #f0fdf4; }
.kde-cov-item.red { background: #fff5f5; }
.kde-cov-item.grey { background: #f9fafb; }

.kde-cov-num {
  font-family: 'DM Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.kde-cov-item.green .kde-cov-num { color: #16a34a; }
.kde-cov-item.red .kde-cov-num { color: #dc2626; }

.kde-cov-label { font-size: 11px; color: #9aa0b4; }

.kde-cov-bar-wrap { margin-bottom: 8px; }

.kde-cov-bar {
  height: 8px;
  background: #f0f2f7;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  margin-bottom: 8px;
}

.kde-cov-bar-fill {
  height: 100%;
  transition: width 0.6s ease;
}

.kde-cov-bar-fill.green { background: #22c55e; }
.kde-cov-bar-fill.red { background: #e63946; }
.kde-cov-bar-fill.grey { background: #e8eaf0; }

.kde-cov-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
}

.kde-cov-note { font-size: 11px; color: #9aa0b4; }

/* LAST ASSESSMENT CARD */
.dash-card-last {
  grid-column: 3;
  grid-row: 3;
}

.last-assess-empty {
  text-align: center;
  padding: 20px 0;
  color: #9aa0b4;
  font-size: 12px;
}

.last-assess-empty p { font-weight: 600; color: #4a4e69; margin-bottom: 4px; }

.last-assess-date { font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.last-assess-by { font-size: 12px; color: #9aa0b4; margin-bottom: 12px; }

.last-assess-score {
  font-family: 'DM Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  color: #1a1a2e;
}

/* STATUS PILLS (shared) */
.mri-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.mri-status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mri-status-pill.transparent { background: #dcfce7; color: #16a34a; }
.mri-status-pill.transparent .dot { background: #16a34a; }
.mri-status-pill.low { background: #dbeafe; color: #1d4ed8; }
.mri-status-pill.low .dot { background: #1d4ed8; }
.mri-status-pill.medium { background: #fef3c7; color: #d97706; }
.mri-status-pill.medium .dot { background: #d97706; }
.mri-status-pill.critical { background: #fee2e2; color: #dc2626; }
.mri-status-pill.critical .dot { background: #dc2626; }

.hidden { display: none !important; }

/* ══ STAGE MODAL ════════════════════════════════════════════ */
.stage-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 40, 0.6);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.stage-modal-overlay.hidden { display: none; }

.stage-modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
  overflow: hidden;
}

.stage-modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #f0f2f8;
  flex-shrink: 0;
}

.stage-modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stage-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stage-modal-code-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1a1a2e;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stage-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.3px;
}

.stage-modal-subtitle {
  font-size: 12px;
  color: #9aa0b4;
  margin-top: 2px;
}

.stage-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f4f6fb;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  transition: background 0.15s;
  flex-shrink: 0;
}

.stage-modal-close:hover { background: #e8eaf0; }

.stage-modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stage-modal-score-label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.stage-modal-body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
}

.stage-modal-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #9aa0b4;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.stage-modal-kde {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.stage-modal-kde.missing {
  background: #fff5f5;
  border: 1px solid #fecaca;
}

.stage-modal-kde-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.stage-modal-kde-label {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}

.stage-modal-kde-why {
  font-size: 12px;
  color: #4a4e69;
  line-height: 1.65;
  margin: 0;
}

.stage-modal-ok-header {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  margin: 20px 0 10px;
}

.stage-modal-ok-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-modal-ok-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  padding: 6px 0;
  border-bottom: 1px solid #f4f6fb;
}

.stage-modal-ok-item:last-child { border-bottom: none; }

/* Clickable stage cards */
.stage-mini-card {
  transition: all 0.15s;
}

.stage-mini-card:hover {
  background: #eef4fd !important;
  border-color: #c7dcf8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,111,219,0.12);
}

.stage-mini-card::after {
  content: 'View details →';
  display: block;
  font-size: 10px;
  color: #1a6fdb;
  font-weight: 600;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}

.stage-mini-card:hover::after { opacity: 1; }