/* ==========================================================================
   NQ57 METHODOLOGY EXPLORER — COMPONENT STYLES FOR NEW SCREENS
   Government Executive / Analytical: sáng, sạch, mật độ vừa-cao, không gradient
   ========================================================================== */

/* ---------- Generic blocks ---------- */
.m-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.m-card.axis1 { border-top: 3px solid var(--axis1); }
.m-card.axis2 { border-top: 3px solid var(--axis2); }
.m-card.od { border-left: 4px solid var(--od-border); background: var(--od-bg); }
.m-card.conflict { border: 1px solid var(--conflict-border); background: var(--conflict-bg); }
.m-card.proposal { border-left: 4px solid var(--proposal-border); }
.m-card-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-card-title.axis1 { color: var(--axis1); }
.m-card-title.axis2 { color: var(--axis2); }
.m-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.m-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .m-grid-3, .m-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .m-grid-2, .m-grid-3, .m-grid-4 { grid-template-columns: 1fr; } }
.m-muted { color: var(--text-muted); font-size: 12px; }
.m-small { font-size: 11.5px; }
.m-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-left: 3px solid var(--border-color);
  padding: 8px 10px;
  border-radius: 3px;
  margin-top: 8px;
}
.m-note.warn { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.m-note.crit { border-left-color: var(--critical); background: var(--critical-bg); color: var(--critical); }
.m-note.ok { border-left-color: var(--success); background: var(--success-bg); color: var(--success); }
.m-note.info { border-left-color: var(--info); background: var(--info-bg); color: var(--info); }
.m-note.od { border-left-color: var(--od-border); background: var(--od-bg); color: var(--od); }
.m-note.conflict { border-left-color: var(--conflict); background: var(--conflict-bg); color: var(--conflict); }
.m-kv { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; font-size: 12.5px; }
.m-kv dt { color: var(--text-muted); font-weight: 600; }
.m-kv dd { margin: 0; }
.m-kv dd.empty { color: var(--text-muted); font-style: italic; }

/* ---------- Tags / badges ---------- */
.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-demo { background: var(--demo-bg); color: var(--demo); border-color: var(--pending-border); }
.tag-legacy { background: var(--legacy-bg); color: var(--legacy); border-color: var(--legacy-border); }
.tag-proposal { background: var(--proposal-bg); color: var(--proposal); border-color: var(--proposal-border); }
.tag-source { background: var(--source-bg); color: var(--source); border-color: var(--source-border); }
.tag-od { background: var(--od-bg); color: var(--od); border-color: var(--od-border); cursor: pointer; }
.tag-od:hover { background: #fde68a; }
.tag-conflict { background: var(--conflict-bg); color: var(--conflict); border-color: var(--conflict-border); }
.tag-axis1 { background: var(--axis1-bg); color: var(--axis1); border-color: var(--axis1-border); }
.tag-axis2 { background: var(--axis2-bg); color: var(--axis2); border-color: var(--axis2-border); }
.tag-canon { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.tag-rule { background: #f1f5f9; color: #334155; border-color: #cbd5e1; font-family: monospace; }
.tag-crit { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border); }
.tag-ok { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.tag-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.tag-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.tag-pending { background: var(--pending-bg); color: var(--pending); border-color: var(--pending-border); }

/* ---------- Buttons ---------- */
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.m-btn:hover { background: var(--bg-subtle); }
.m-btn.primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.m-btn.primary:hover { background: #1e40af; }
.m-btn.danger { border-color: var(--critical-border); color: var(--critical); background: var(--critical-bg); }
.m-btn.warn { border-color: var(--od-border); color: var(--od); background: var(--od-bg); }
.m-btn.sm { font-size: 11px; padding: 3px 8px; }
.m-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.m-btn.active { background: #0f2744; color: #fff; border-color: #0f2744; }

/* ---------- Tabs ---------- */
.m-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.m-tabs button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.m-tabs button.active { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.m-tabs button .tab-note { font-size: 10px; font-weight: 600; color: var(--proposal); margin-left: 4px; }

/* ---------- Forms (labs) ---------- */
.m-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.m-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.m-field input, .m-field select, .m-field textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary);
}
.m-field input:focus, .m-field select:focus { outline: 2px solid #bfdbfe; border-color: #1d4ed8; }
.m-field .hint { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.m-field.od label::after { content: " ⚑"; color: var(--od); }

/* ---------- Tables ---------- */
.m-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.m-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  padding: 7px 8px;
}
.m-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.m-table tr.clickable { cursor: pointer; }
.m-table tr.clickable:hover { background: #f8fafc; }
.m-table tr.selected { background: #eff6ff; }
.m-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.m-table .col-src { background: #fff7ed; }
.m-table .col-std { background: #eff6ff; }
.m-table .col-con { background: #f0fdf4; }
.m-table-wrap { overflow-x: auto; max-width: 100%; }
.m-grid-2 > *, .m-grid-3 > *, .m-grid-4 > * { min-width: 0; }
.m-table td { overflow-wrap: anywhere; }
.m-table td code, .m-table .issue-type-badge, .m-table .badge-status, .m-table .tag { white-space: nowrap; overflow-wrap: normal; }

/* ---------- Flow diagram (Overview) ---------- */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 0;
}
.flow-row { display: flex; align-items: stretch; gap: 14px; justify-content: center; }
.flow-node {
  min-width: 220px;
  max-width: 300px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.flow-node:hover, .flow-node.active { border-color: #1d4ed8; box-shadow: 0 0 0 3px #dbeafe; }
.flow-node .fn-title { font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px; }
.flow-node .fn-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.flow-node .fn-ent { font-size: 10px; font-family: monospace; color: #1e40af; margin-top: 4px; }
.flow-node.axis1 { border-color: var(--axis1); background: var(--axis1-bg); }
.flow-node.axis2 { border-color: var(--axis2); background: var(--axis2-bg); }
.flow-arrow { font-size: 18px; color: var(--text-muted); line-height: 1; padding: 4px 0; }
.flow-plus { align-self: center; font-size: 18px; font-weight: 800; color: var(--text-muted); }
.flow-detail { margin-top: 14px; }

/* ---------- Axes / quadrant ---------- */
.axis-col { border-radius: 6px; padding: 14px 16px; border: 1px solid; }
.axis-col.a1 { border-color: var(--axis1-border); background: #f0f9ff; }
.axis-col.a2 { border-color: var(--axis2-border); background: #ecfdf5; }
.axis-col h3 { font-size: 15px; font-weight: 800; }
.axis-col.a1 h3 { color: var(--axis1); }
.axis-col.a2 h3 { color: var(--axis2); }
.axis-col .axis-q { font-size: 13px; font-style: italic; margin: 4px 0 10px; color: var(--text-secondary); }
.axis-col ul { margin: 0 0 0 16px; font-size: 12.5px; line-height: 1.7; }
.quadrant { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quad-cell {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
}
.quad-cell:hover, .quad-cell.active { border-color: #1d4ed8; box-shadow: 0 0 0 3px #dbeafe; }
.quad-cell .q-key { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.quad-cell .q-title { font-size: 13px; font-weight: 800; margin: 3px 0; }
.quad-cell .q-sum { font-size: 11.5px; color: var(--text-secondary); }
.no-sum-box {
  border: 2px dashed var(--critical-border);
  background: var(--critical-bg);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
}

/* ---------- Mechanism explorers ---------- */
.stage-detail { border: 1px solid var(--axis1-border); background: #f0f9ff; border-radius: 6px; padding: 12px 14px; }
.stage-step-card.clickable { cursor: pointer; }
.stage-step-card.clickable:hover { box-shadow: 0 0 0 3px #bae6fd; }
.stage-step-card.na { opacity: 0.55; border-style: dashed; }
.mech-compare th, .mech-compare td { font-size: 12px; }
.variant-banner {
  border: 1px solid var(--proposal-border);
  background: var(--proposal-bg);
  color: var(--proposal);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* ---------- KPI architecture ---------- */
.def-panel, .meas-panel { border-radius: 6px; padding: 12px 14px; border: 1px solid; }
.def-panel { border-color: #c4b5fd; background: #faf5ff; }
.meas-panel { border-color: var(--axis2-border); background: #ecfdf5; }
.def-panel h3 { color: #6d28d9; font-size: 14px; font-weight: 800; }
.meas-panel h3 { color: var(--axis2); font-size: 14px; font-weight: 800; }
.attr-list { display: grid; grid-template-columns: 24px 1fr; gap: 3px 8px; font-size: 12px; margin-top: 8px; }
.attr-list .n { color: var(--text-muted); font-weight: 700; text-align: right; }
.attr-list .v { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.attr-list .val { color: var(--text-primary); font-weight: 600; }
.attr-list .lbl { color: var(--text-muted); }
.attr-list .tier { font-size: 9px; font-family: monospace; color: #1e40af; }
.merge-table td.bad { background: var(--critical-bg); color: var(--critical); font-weight: 700; }
.merge-table td.ok { background: var(--success-bg); }
.formula-box {
  font-family: monospace;
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  border-radius: 4px;
}
.formula-box.active { border-color: #1d4ed8; background: #eff6ff; }
.formula-box.inactive { opacity: 0.6; }

/* ---------- KPI matrix ---------- */
.kpi-matrix { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.kpi-matrix th, .kpi-matrix td { border: 1px solid var(--border-light); padding: 6px; text-align: center; }
.kpi-matrix th { background: var(--bg-subtle); font-size: 10.5px; }
.kpi-matrix td.has { background: #eff6ff; font-weight: 800; color: #1e40af; cursor: pointer; }
.kpi-matrix td.gap { background: #fff7ed; color: #9a3412; }

/* ---------- Evidence flow ---------- */
.ev-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ev-step {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 9px 10px;
  background: #fff;
  cursor: pointer;
}
.ev-step:hover, .ev-step.active { border-color: #1d4ed8; box-shadow: 0 0 0 3px #dbeafe; }
.ev-step .es-n { font-size: 10px; font-weight: 800; color: var(--text-muted); }
.ev-step .es-t { font-size: 12.5px; font-weight: 800; }
.ev-step .es-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ev-step .es-gate { font-size: 10px; font-weight: 800; color: #1e40af; margin-top: 4px; }
.ev-step .es-nogate { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 4px; }
.ev-arrow { align-self: center; color: var(--text-muted); font-size: 16px; }
.conflict-box {
  border: 2px solid var(--conflict-border);
  background: var(--conflict-bg);
  border-radius: 6px;
  padding: 12px 14px;
}
.conflict-src { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding: 4px 0; }

/* ---------- Leadership ---------- */
.lm-chain { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lm-node { flex: 1; min-width: 150px; border: 1px solid var(--border-color); border-radius: 6px; padding: 9px 10px; background: #fff; }
.lm-node .ln-t { font-size: 12.5px; font-weight: 800; }
.lm-node .ln-s { font-size: 11px; color: var(--text-muted); }
.lm-node.hot { border-color: var(--critical-border); background: var(--critical-bg); }
.trigger-list { list-style: none; margin: 0; padding: 0; }
.trigger-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--border-light); font-size: 12.5px; }
.trigger-list li .tk { font-family: monospace; font-size: 10.5px; color: #1e40af; min-width: 26px; }
.trigger-list li.hit { background: var(--warning-bg); }

/* ---------- Dashboard logic ---------- */
.proj-matrix { border-collapse: collapse; width: 100%; font-size: 11px; }
.proj-matrix th, .proj-matrix td { border: 1px solid var(--border-light); padding: 5px 6px; text-align: center; }
.proj-matrix th { background: var(--bg-subtle); }
.proj-matrix td.y { background: #ecfdf5; color: var(--success); font-weight: 800; }
.trace-chain { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.trace-chain .tc { border: 1px solid var(--border-color); background: #fff; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 11px; }
.trace-chain .tc.root { border-color: var(--axis2-border); background: var(--axis2-bg); }

/* ---------- Open decisions ---------- */
.od-card { border: 1px solid var(--border-color); border-left: 4px solid var(--od-border); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.od-card.active { box-shadow: 0 0 0 3px #fde68a; }
.od-card .od-code { font-family: monospace; font-weight: 800; color: var(--od); }
.od-card .od-title { font-weight: 700; font-size: 13px; }
.od-card .od-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.od-card .od-nohard { font-size: 11.5px; color: var(--critical); margin-top: 4px; }
.od-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------- Rules ---------- */
.rule-item { border: 1px solid var(--border-color); border-radius: 6px; padding: 9px 12px; margin-bottom: 6px; background: #fff; display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: start; }
.rule-item .rn { font-family: monospace; font-weight: 800; font-size: 12px; color: #1e40af; }
.rule-item .rt { font-size: 12.5px; font-weight: 700; }
.rule-item .rs { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rule-item.core { border-left: 4px solid #1d4ed8; }
.violation-box { border: 2px solid var(--critical-border); background: var(--critical-bg); border-radius: 6px; padding: 12px 14px; margin-top: 10px; }
.violation-box h4 { color: var(--critical); font-size: 13px; font-weight: 800; margin-bottom: 6px; }

/* ---------- Sandbox ---------- */
.sb-out { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1200px) { .sb-out { grid-template-columns: repeat(2, 1fr); } }
.sb-cell { border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; background: #fff; min-height: 120px; font-size: 12px; }
.sb-cell h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; }
.sb-cell.a1 { border-top: 3px solid var(--axis1); }
.sb-cell.a2 { border-top: 3px solid var(--axis2); }
.sb-cell.rule { border-top: 3px solid var(--critical); }
.sb-cell.od { border-top: 3px solid var(--od-border); }
.sb-cell ul { margin: 0 0 0 14px; }
.preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------- Task catalog ---------- */
.tc-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin-bottom: 10px; }
.tc-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-stat { border: 1px solid var(--border-light); background: #fff; border-radius: 4px; padding: 5px 10px; font-size: 11.5px; cursor: pointer; }
.tc-stat:hover { border-color: #1d4ed8; }
.tc-stat b { font-size: 14px; margin-right: 4px; }
.tc-stat.active { background: #eff6ff; border-color: #1d4ed8; }
.tc-name { font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.tc-sub { font-size: 11px; color: var(--text-muted); }
.pager { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.source-notice { border: 1px solid var(--source-border); background: var(--source-bg); color: var(--source); border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }
.unnorm-block { border: 1px dashed var(--border-color); border-radius: 6px; padding: 12px 14px; background: #fff; margin-bottom: 12px; }
.unnorm-block .ub-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.unnorm-block.a1 .ub-title { color: var(--axis1); }
.unnorm-block.a2 .ub-title { color: var(--axis2); }
.unnorm-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* ---------- KPI state lab ---------- */
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin-bottom: 12px; }
.state-btn { border: 1px solid var(--border-color); background: #fff; border-radius: 4px; padding: 6px 8px; text-align: left; cursor: pointer; font-size: 11.5px; }
.state-btn:hover { border-color: #1d4ed8; }
.state-btn.active { background: #eff6ff; border-color: #1d4ed8; }
.state-btn .sc { font-family: monospace; font-size: 10px; color: #1e40af; display: block; }
.state-btn .sl { font-weight: 600; }
.state-card-wrap .kpi-card { max-width: 480px; }
.kpi-cards-grid.single { grid-template-columns: 1fr; }

.iframe-wrap { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background: #fff; height: calc(100vh - 190px); }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }