/* =====================================================================
   MISSION CONTROL — VNG redesign layer (Pro)
   Nâng cấp look "command center": typography có sức nặng, surface tĩnh-lặng
   kiểu Linear/Stripe, accent cam VNG, chat dock phải, motion có chủ đích.
   Load SAU styles.css + friendly.css. CHỈ CSS — không đụng app.js / element ID.
   ===================================================================== */

:root{
  --mc-ease: cubic-bezier(.16, 1, .3, 1);
  --mc-radius: 16px;
  --mc-radius-sm: 11px;
  --mc-elev: 0 1px 0 rgba(26,23,20,.03), 0 14px 32px -22px rgba(40,20,10,.22);
  --mc-elev-soft: 0 1px 2px rgba(40,20,10,.05);
}

/* ---- Nền ấm có chiều sâu nhẹ (1 vầng cam tiết chế, không mesh) ---- */
body.ui-mode-pro{
  background:
    radial-gradient(1100px 460px at 100% -8%, rgba(240,90,34,.055), transparent 62%),
    radial-gradient(900px 500px at -5% 0%, rgba(26,23,20,.025), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Tiêu điểm a11y: focus ring cam thống nhất ---- */
body.ui-mode-pro :focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Phản hồi vật lý cho nút (motion có chủ đích) ---- */
body.ui-mode-pro button{
  transition: transform .12s var(--mc-ease), background .18s var(--mc-ease),
              border-color .18s var(--mc-ease), color .18s var(--mc-ease);
}
body.ui-mode-pro button:active{ transform: translateY(1px); }

/* =====================================================================
   1. TOPBAR — command bar dính, kính mờ, brand mark
   ===================================================================== */
/* Không scope mode → topbar GIỐNG NHAU ở cả Pro lẫn Friendly */
.topbar{
  position: sticky; top: 0; z-index: 30;
  min-height: 70px;
  padding: 13px 30px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--vng-line);
}
.topbar h1{
  position: relative;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;
  padding-left: 16px;
}
.topbar h1::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 1.05em; border-radius: 3px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #f05a22, #c2431a);
}
.topbar .eyebrow{
  padding-left: 16px;
  letter-spacing: .16em;
  color: var(--ink-muted);
}

/* =====================================================================
   2. APP SHELL — nhịp rộng hơn, board kiểu nav tĩnh-lặng
   ===================================================================== */
body.ui-mode-pro .app-shell{ gap: 22px; padding-top: 26px; }

/* Board: bỏ khung viền ở CẢ 2 mode cho giống nhau */
.launch-board{
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 4px;
  top: 86px;
}
.launch-board .board-head{ padding-left: 8px; }
.launch-board .launch-card{
  border: 1px solid transparent;
  border-radius: var(--mc-radius-sm);
  transition: background .16s var(--mc-ease), border-color .16s var(--mc-ease),
              transform .16s var(--mc-ease);
}
.launch-board .launch-card:hover{
  background: var(--surface);
  border-color: var(--vng-line);
  transform: translateX(2px);
}
.launch-board .launch-card.active{
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--mc-elev-soft);
}

/* =====================================================================
   3. DETAIL HERO — cockpit: tiêu đề lớn, metric đậm, bớt button-soup
   ===================================================================== */
/* Áp CẢ 2 mode cho gọn gàng đồng nhất (.detail-hero là DOM chung) */
.detail-shell{
  border: 0; background: transparent; box-shadow: none; padding: 0;
}
.detail-hero{
  padding: 22px 26px;
  border: 1px solid var(--vng-line);
  border-radius: var(--mc-radius);
  background: var(--surface);
  box-shadow: var(--mc-elev);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title   metrics"
    "actions actions";
  row-gap: 16px;
  column-gap: 28px;
  align-items: center;
}
/* Bố cục: title trái-trên · nút function phải-trên · metrics trái-dưới.
   Selector cùng spec friendly.css nhưng load sau → thắng cả 2 mode.
   Thêm padding để Friendly không bị sát viền (friendly.css ép padding:12px 0). */
body.ui-mode-pro .detail-hero,
body.ui-mode-friendly .detail-hero{
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "title metrics actions";
  align-items: center;
  column-gap: 24px;
  row-gap: 14px;
  padding: 22px 26px;
  min-height: 0;
}
.detail-hero .detail-title-block{ min-height: 0; align-self: center; }
.detail-hero .detail-title-block h2{
  font-size: 22px;          /* nhỏ gọn, bằng Friendly */
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin-top: 4px;
}

/* Stat cluster: gộp readiness + lịch sử thành 1 pill gọn, chia hairline,
   cao bằng nhau; readiness đánh dấu bằng vạch màu trái thay vì ô màu rời */
.detail-hero .hero-metrics{
  grid-area: metrics;
  display: flex;
  gap: 0;
  align-self: start;
  justify-self: start;
  max-width: none;
  border: 1px solid var(--vng-line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.detail-hero .hero-metrics .metric{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 11px 18px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--vng-line);
  background: transparent;
}
.detail-hero .hero-metrics .metric:last-child{ border-right: 0; }
.detail-hero .hero-metrics .score-metric{ box-shadow: inset 4px 0 0 var(--muted-2); }
.detail-hero .hero-metrics .score-metric.green{ box-shadow: inset 4px 0 0 var(--green); }
.detail-hero .hero-metrics .score-metric.yellow{ box-shadow: inset 4px 0 0 var(--yellow); }
.detail-hero .hero-metrics .score-metric.red{ box-shadow: inset 4px 0 0 var(--red); }
.detail-hero .hero-metrics .metric strong{ font-size: 16px; }
.detail-hero #scoreValue{ font-size: 26px; line-height: 1.05; margin: 2px 0; }
/* Ép cụm metrics sang TRÁI ở cả 2 mode (thắng justify-self:end của friendly.css) */
body.ui-mode-pro .detail-hero .hero-metrics,
body.ui-mode-friendly .detail-hero .hero-metrics{
  justify-self: start;
  align-self: center;
  max-width: none;
}

/* Nút function = hàng ngang ở GÓC PHẢI-TRÊN, cùng dòng với tiêu đề */
body.ui-mode-pro .detail-hero .detail-actions,
body.ui-mode-friendly .detail-hero .detail-actions{
  grid-area: actions;
  width: auto;
  justify-self: end;
  align-self: center;
  align-items: flex-end;
  border-top: 0;
  padding-top: 0;
}
.detail-hero .action-button-row{
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* Phân cấp nút: phụ = ghost yên, chính = cam nổi */
body.ui-mode-pro .action-button-row button{
  background: transparent;
  border-color: var(--vng-line);
  color: var(--ink);
  font-weight: 600;
}
body.ui-mode-pro .action-button-row button:hover{
  background: var(--surface-soft);
  border-color: var(--line-strong);
}
body.ui-mode-pro .action-button-row button.primary{
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
  font-weight: 700;
}
body.ui-mode-pro .action-button-row button.primary:hover{ background: #9a3514; }
body.ui-mode-pro .action-button-row .danger-button{ color: var(--red); border-color: transparent; }

/* =====================================================================
   4. TABS — segmented control mượt + chuyển view có animation
   ===================================================================== */
body.ui-mode-pro .tabs{
  height: 52px; min-height: 52px; max-height: 52px;
  border-color: var(--vng-line);
  border-radius: 13px;
  background: var(--bg-alt, #f4f2ee);
}
body.ui-mode-pro .tab{ font-weight: 600; transition: color .18s var(--mc-ease); }
body.ui-mode-pro .tab:hover{ color: var(--ink); }
body.ui-mode-pro .tab.active{
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(40,20,10,.12), 0 0 0 1px rgba(240,90,34,.12);
}
body.ui-mode-pro .view.active{ animation: mc-view-in .42s var(--mc-ease) both; }
@keyframes mc-view-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

/* =====================================================================
   5. SURFACES — card tĩnh-lặng, bo mềm, shadow ấm
   ===================================================================== */
body.ui-mode-pro .content-card,
body.ui-mode-pro .decision-card,
body.ui-mode-pro .next-action-card{
  border-color: var(--vng-line);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-elev);
}
/* Kết luận = tuyên bố lớn, dial là tâm điểm */
body.ui-mode-pro #redTeam .decision-card{ padding: 26px; }
body.ui-mode-pro #redTeam #decisionTitle{
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -.02em;
  line-height: 1.06;
}
body.ui-mode-pro .score-dial{ width: 138px; }
body.ui-mode-pro .score-dial strong{ font-size: 28px; }

/* =====================================================================
   6. MOTION — reveal so le cho nội dung app.js render (thuần CSS)
   ===================================================================== */
body.ui-mode-pro #redTeamCards > *,
body.ui-mode-pro #topRisks > li,
body.ui-mode-pro #checklistRows > *,
body.ui-mode-pro #friendlyVizRiskBars > *{
  animation: mc-rise .5s var(--mc-ease) both;
}
body.ui-mode-pro #redTeamCards > *:nth-child(2){ animation-delay: .06s; }
body.ui-mode-pro #redTeamCards > *:nth-child(3){ animation-delay: .12s; }
body.ui-mode-pro #redTeamCards > *:nth-child(4){ animation-delay: .18s; }
body.ui-mode-pro #redTeamCards > *:nth-child(5){ animation-delay: .24s; }
body.ui-mode-pro #redTeamCards > *:nth-child(6){ animation-delay: .30s; }
body.ui-mode-pro #topRisks > li:nth-child(2){ animation-delay: .07s; }
body.ui-mode-pro #topRisks > li:nth-child(3){ animation-delay: .14s; }
@keyframes mc-rise{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: none; }
}

/* =====================================================================
   7. CHAT — dock thành rail phải full-height, launcher cam
   ===================================================================== */
.assistant-launcher{
  border-color: var(--accent-strong) !important;
  background: var(--accent-strong) !important;
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--mc-elev);
}
.assistant-launcher:hover{ background: #9a3514 !important; }
.assistant-panel{
  right: 0; bottom: 0; top: 0;
  width: min(420px, 100vw);
  max-height: 100vh;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--vng-line);
  box-shadow: -28px 0 56px -28px rgba(40,20,10,.22);
}
.assistant-panel.open{ grid-template-rows: auto minmax(0, 1fr) auto; }
.assistant-head{ background: var(--surface-soft); }

/* =====================================================================
   8. Reduced motion — tôn trọng người dùng
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  body.ui-mode-pro .view.active,
  body.ui-mode-pro #redTeamCards > *,
  body.ui-mode-pro #topRisks > li,
  body.ui-mode-pro #checklistRows > *,
  body.ui-mode-pro #friendlyVizRiskBars > *{
    animation: none !important;
  }
  body.ui-mode-pro .launch-board .launch-card:hover{ transform: none; }
}