/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Token design mới (design/esg-giao-dien.html) — KHÔI PHỤC: khối :root này
   từng bị script dọn CSS tenant-shell xóa nhầm, làm mọi var(--dz-*) vô hiệu
   (nút primary trắng, ô tích mất màu). */
:root {
  --dz-navy: #071d33;
  --dz-navy2: #0b2a47;
  --dz-green: #079766;
  --dz-green-soft: #e9fbf4;
  --dz-green-border: #b8ead4;
  --dz-border: #d9e4f2;
  --dz-text: #10233f;
  --dz-muted: #52677e;
  --dz-bg: #f6f9fd;
  --dz-e: #16a34a;
  --dz-s: #2563eb;
  --dz-g: #7c3aed;
  --dz-high: #ef4444;
  --dz-mid: #f59e0b;
  --dz-low: #3b82f6;
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e6e8eb;
  --text: #1a1d21;
  --muted: #6b7280;
  --primary: #15803d;
  --primary-soft: #ecfdf3;
  --primary-fg: #ffffff;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --jr-bg: #f0f5f2;
  --jr-text: #0f1f17;
  --jr-muted: #52756a;
  --jr-border: rgba(22, 101, 52, 0.12);
  --jr-sidebar: #0d2b1e;
  --jr-green: #009966;
  --jr-bright: #00bc7d;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 600; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: 13.5px; font-weight: 500; transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: #f3f4f6; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover { background: #166534; }
.btn-danger { color: var(--danger); border-color: #f3c4c4; background: var(--surface); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #f3f4f6; }

/* ---- inputs ---- */
input, select {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; width: 100%; background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
label { font-size: 12.5px; color: var(--muted); font-weight: 500; display: block; margin-bottom: 5px; }

/* checkbox/radio: bỏ style ô input chung để render đúng kiểu native */
input[type="checkbox"], input[type="radio"] {
  -moz-appearance: auto;
       appearance: auto; -webkit-appearance: auto;
  width: auto; height: auto; min-width: 16px; padding: 0; margin: 0;
  border: none; background: none; border-radius: 0;
  accent-color: var(--primary); cursor: pointer; flex: none;
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; outline: auto; }

/* input with a trailing icon button (e.g. show/hide password) */
.input-affix { position: relative; }
.input-affix > input { padding-right: 42px; }
.input-affix-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.input-affix-btn:hover { background: #f3f4f6; color: var(--text); }

/* ---- layout helpers ---- */
.row { display: flex; gap: 8px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: 13.5px; }
.wrap { flex-wrap: wrap; }

/* ---- card ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }

/* ---- badge ---- */
.badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
  background: #f1f3f5; color: var(--muted);
}
.badge-green { background: var(--primary-soft); color: var(--primary); }
.badge-red { background: var(--danger-soft); color: var(--danger); }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-gray { background: #f3f4f6; color: #6b7280; }

/* ---- dashboard (M9) ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 14px; gap: 14px; }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 14px 16px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.kpi-val { font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.kpi-delta { font-size: 12.5px; margin-top: 4px; }
.delta-up { color: var(--primary); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.progress { height: 10px; border-radius: 999px; background: #eef0f2; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---- table ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--border); }
thead th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: #fafbfc; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
.table-wrap { overflow: hidden; }

/* ---- app shell ---- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px;
  position: -webkit-sticky;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.brand-name { font-weight: 650; font-size: 15px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  color: var(--muted); font-weight: 500; font-size: 14px;
}
.nav a:hover { background: #f3f4f6; color: var(--text); }
.nav a.active { background: var(--primary-soft); color: var(--primary); }
.nav a.active svg { color: var(--primary); }

/* ---- section tabs (sub-nav trong từng nhóm) ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none;
}
.user-email { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* language switcher */
.lang-switch { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-switch button {
  border: none; background: var(--surface); padding: 5px 12px; cursor: pointer; font-size: 12.5px;
  font-weight: 600; color: var(--muted);
}
.lang-switch button.active { background: var(--primary); color: #fff; }
.lang-switch button:not(.active):hover { background: #f3f4f6; }

/* ---- content ---- */
.content { padding: 28px 36px; width: 100%; min-width: 0; }
.page-head { margin-bottom: 22px; }

/* ---- biểu tượng chuông (dùng ở system topbar) ---- */
.tenant-alert {
  position: relative;
  width: 25.25px;
  height: 25.25px;
  border-radius: 5.5px;
}
.tenant-alert::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.7px solid var(--jr-muted);
  border-radius: 50%;
}
.tenant-alert::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5.625px;
  height: 5.625px;
  border-radius: 999px;
  background: #fb2c36;
}

/* ---- system admin tenant overview (Figma 2004:2) ---- */
.system-shell {
  min-height: 100vh;
  background: var(--jr-bg);
  color: var(--jr-text);
  font-size: 11.25px;
}
.system-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 61.25px;
  padding: 0 22.5px;
  background: #fff;
  border-bottom: 1px solid var(--jr-border);
}
.system-brand {
  display: flex;
  align-items: center;
  gap: 11.25px;
}
.system-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7.5px;
  background: var(--jr-green);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.system-brand-name {
  color: var(--jr-text);
  font-size: 13.125px;
  font-weight: 700;
  line-height: 18.75px;
}
.system-brand-sub {
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.system-user {
  display: flex;
  align-items: center;
  gap: 11.25px;
}
.system-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--jr-green);
  color: #fff;
  font-size: 11.25px;
  font-weight: 700;
}
.system-content {
  width: min(1080px, calc(100vw - 45px));
  margin: 0 auto;
  padding: 22.5px;
}
.system-shell .page-head {
  display: none;
}
.system-shell .card {
  border-color: var(--jr-border);
  border-radius: 11.5px;
  box-shadow: none;
}
.system-shell .card-pad {
  padding: 16px;
}
.system-shell .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}
.system-shell .kpi {
  min-height: 99.5px;
  padding: 16px;
}
.system-shell .kpi-label {
  color: var(--jr-muted);
  font-size: 11.25px;
  font-weight: 400;
  letter-spacing: 0;
}
.system-shell .kpi-val {
  margin-top: 0;
  color: var(--jr-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22.5px;
  line-height: 30px;
}
.system-shell .kpi-delta {
  margin-top: 2px;
  color: var(--jr-muted);
  font-size: 11.25px;
}
.system-shell .btn {
  min-height: 28.25px;
  padding: 5.625px 11.25px;
  border-color: var(--jr-border);
  border-radius: 7.5px;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.system-shell .btn-primary {
  background: var(--jr-green);
  border-color: var(--jr-green);
  color: #fff;
}
.system-shell input,
.system-shell select {
  min-height: 28.25px;
  padding: 6px 10px;
  border-color: var(--jr-border);
  border-radius: 7.5px;
  background: rgba(232, 240, 235, 0.3);
  color: var(--jr-text);
  font-size: 11.25px;
}
.system-shell label {
  margin-bottom: 5.625px;
  color: var(--jr-text);
  font-size: 11.25px;
  font-weight: 500;
}
.system-shell th,
.system-shell td {
  padding: 11.25px 15px;
  border-bottom: 1px solid rgba(22, 101, 52, 0.06);
  color: var(--jr-text);
  font-size: 11.25px;
  line-height: 15px;
}
.system-shell th {
  background: #f8faf9;
  color: var(--jr-muted);
  font-weight: 500;
}
.system-shell tr:last-child td {
  border-bottom: 0;
}
.system-shell .badge {
  padding: 1.875px 7.5px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 15px;
}
.system-shell .progress {
  height: 5.625px;
  background: #e8f0eb;
}
.system-shell .progress > span {
  background: var(--jr-bright);
}
.sys-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18.75px 16px;
  border-bottom: 1px solid var(--jr-border);
}
.sys-card-head h2 {
  margin: 0;
  color: var(--jr-text);
  font-size: 13.125px;
  line-height: 18.75px;
}
.sys-card-head p {
  margin: 0;
  color: var(--jr-muted);
  font-size: 11.25px;
}
.sys-actions {
  display: flex;
  align-items: center;
  gap: 7.5px;
}
.sys-search {
  position: relative;
}
.sys-search input {
  width: 180px;
  padding-left: 31px;
}
.sys-search::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--jr-muted);
  border-radius: 999px;
}
.sys-search::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 6px;
  height: 1.5px;
  background: var(--jr-muted);
  transform: rotate(45deg);
  transform-origin: left center;
}
.sys-tenant-cell {
  display: flex;
  align-items: center;
  gap: 9.375px;
}
.sys-tenant-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 7.5px;
  background: #d0fae5;
  color: #007a55;
  flex: none;
  font-size: 11.25px;
  font-weight: 700;
}
.sys-tenant-name {
  color: var(--jr-text);
  font-size: 13.125px;
  font-weight: 600;
}
.sys-tenant-sub {
  display: block;
  color: var(--jr-muted);
  font-size: 11px;
  line-height: 16.5px;
}
.sys-enter {
  color: var(--jr-green);
  font-weight: 600;
  white-space: nowrap;
}
.system-shell .modal {
  width: 480px;
  padding: 22.5px;
  border-radius: 15px;
}
@media (max-width: 900px) {
  .system-content {
    width: 100%;
    padding: 15px;
  }
  .system-shell .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sys-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .sys-actions,
  .sys-search input {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .system-shell .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- roles master-detail ---- */
.roles-layout { display: grid; grid-template-columns: 320px 1fr; grid-gap: 18px; gap: 18px; height: calc(100vh - 132px); }
.roles-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.roles-list-scroll { flex: 1 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.role-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; background: transparent;
  transition: background .1s, border-color .1s;
}
.role-item:hover { background: #fafbfc; }
.role-item.active { background: var(--primary-soft); border-color: #c7ebd5; }
.role-item-name { font-weight: 600; font-size: 14px; color: var(--text); }
.role-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.roles-list-foot { padding: 12px; border-top: 1px solid var(--border); }

.roles-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; }
.roles-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.perm-search { padding: 14px 18px 6px; }
.perm-search input { background: #fafbfc; }
.perm-groups { flex: 1 1; overflow: auto; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.perm-group { flex: none; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.perm-group-head { background: #fafbfc; padding: 10px 14px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 4px 12px; gap: 4px 12px; padding: 12px 14px; }
.perm-check { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.perm-check:hover { background: #fafbfc; }
.perm-check input { width: auto; flex: none; cursor: pointer; }
.perm-check:has(input:disabled) { cursor: default; color: var(--muted); }
.perm-check input:disabled { cursor: default; }
.perm-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
}
.roles-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .roles-layout { grid-template-columns: 1fr; height: auto; }
  .roles-panel { max-height: 60vh; }
  .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 14px; padding: 22px; width: 460px; max-width: 100%; box-shadow: 0 20px 40px rgba(16,24,40,.2); }
.check-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.check-row:hover { background: #fafbfc; }
.check-row input { width: auto; }

/* ---- auth ---- */
.auth-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(1200px 600px at 50% -10%, #e7f6ec, var(--bg)); }
.auth-page-lang { position: absolute; top: 20px; right: 26px; }
.auth-card { width: 400px; max-width: 100%; }
.auth-card > .card { padding: 26px 26px 28px; box-shadow: 0 10px 30px rgba(16, 24, 40, .08), var(--shadow); }
.auth-card .stack { gap: 16px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }

/* language switcher — text variant ("Tiếng Việt / English") */
.lang-text { display: inline-flex; align-items: center; gap: 8px; }
.lang-text button {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.lang-text button:hover { color: var(--text); }
.lang-text button.active { color: var(--primary); font-weight: 600; }
.lang-text-sep { color: var(--border); }

/* ---- Lộ trình ESG (journey M0–M8) ---- */
.jr-projbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 18px;
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 5;
}
.jr-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700;
  color: var(--primary); background: var(--primary-soft); border: 1px solid #c7ebd5;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.jr-gate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700;
  color: #b91c1c; background: #fef2f2; border: 1px solid #f3c4c4; padding: 2px 6px; border-radius: 6px;
}
.jr-card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }

/* Strip thông tin: phần mềm làm gì ở màn này (đã bỏ cột offline) */
.jr-info { background: #f3fbf5; border: 1px solid #c7ebd5; border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 10px 14px; }
.jr-info-h { font-size: 12.5px; font-weight: 700; color: #166534; margin-bottom: 4px; }
.jr-info ul { margin: 0; padding-left: 18px; }
.jr-info li { font-size: 12.5px; color: var(--text); margin: 3px 0; }
/* tab con trong màn journey (master-detail / sub-tabs) */
.jr-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

/* Cây Framework → Chuẩn → Disclosure → Chỉ tiêu (M2 ⑤) */
.jr-tree { font-size: 13px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; max-height: 540px; overflow: auto; }
.jr-tree-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 4px 6px; border-radius: 6px; line-height: 1.45; }
.jr-tree-toggle { background: transparent; border: none; cursor: pointer; color: var(--text); font: inherit; }
.jr-tree-toggle:hover { background: #f3f4f6; }
.jr-tw { display: inline-block; width: 14px; text-align: center; color: var(--muted); flex: none; }
.jr-tree-metric { color: var(--muted); }

/* Checklist (M0 hồ sơ tối thiểu, M8 cấu phần báo cáo) */
.jr-checklist { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6px 18px; gap: 6px 18px; }
@media (max-width: 700px) { .jr-checklist { grid-template-columns: 1fr; } }
.jr-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.jr-check.done { color: var(--text); }
.jr-check-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; font-size: 11px; flex: none; background: #f1f3f5; color: var(--muted);
}
.jr-check.done .jr-check-mark { background: var(--primary-soft); color: var(--primary); }

/* Hồ sơ dạng nhãn–giá trị (M1) */
.jr-fields { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12px 24px; gap: 12px 24px; }
@media (max-width: 700px) { .jr-fields { grid-template-columns: 1fr; } }
.jr-field-l { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.jr-field-v { font-size: 14px; font-weight: 500; }

/* Màn review mới theo docs/editFollo.md */
.jr-filter-grid,
.jr-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.jr-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .jr-filter-grid,
  .jr-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .jr-filter-grid,
  .jr-flow-grid { grid-template-columns: 1fr; }
}
.jr-review-list { display: flex; flex-direction: column; gap: 8px; }
.jr-review-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.jr-review-dot,
.jr-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  background: #f1f3f5; color: var(--muted); font-size: 11px; font-weight: 700;
}
.jr-top-list { display: flex; flex-direction: column; gap: 8px; }
.jr-top-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.jr-top-row > span:nth-child(2) { flex: 1 1; min-width: 0; }
.jr-flow-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; margin-bottom: 12px; }
.jr-flow-path span {
  display: flex; align-items: center; min-height: 46px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; font-size: 13px;
}
@media (max-width: 800px) { .jr-flow-path { grid-template-columns: 1fr; } }
.jr-screen-title {
  margin: 0;
  color: var(--jr-text);
  font-size: 11.25px;
  font-weight: 700;
  line-height: 15px;
}
.jr-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 15px;
  gap: 15px;
}
.jr-dashboard-grid .card {
  min-height: 202.5px;
}
.jr-bars {
  display: flex;
  flex-direction: column;
  gap: 11.25px;
}
.jr-bar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 38px;
  align-items: center;
  grid-gap: 9.375px;
  gap: 9.375px;
  color: var(--jr-muted);
  font-size: 11.25px;
}
.jr-compare-list,
.jr-priority-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jr-compare-row,
.jr-priority-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.25px;
}
.jr-priority-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-donut-wrap {
  display: flex;
  min-height: 202.5px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.jr-donut-label {
  color: var(--jr-text);
  font-size: 11.25px;
  font-weight: 700;
}
.jr-donut {
  display: grid;
  width: 110px;
  height: 110px;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(var(--jr-green) 0 var(--jr-donut-deg), #e8f0eb var(--jr-donut-deg) 360deg);
}
.jr-donut-core {
  display: flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 999px;
  background: #fff;
}
.jr-donut-core b {
  color: var(--jr-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  line-height: 30px;
}
.jr-donut-core span,
.jr-donut-sub {
  color: var(--jr-muted);
  font-size: 10px;
}
.jr-chart {
  position: relative;
  min-height: 180px;
}
.jr-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.jr-chart-grid {
  stroke: #e8f0eb;
  stroke-width: 1;
}
.jr-chart-axis {
  fill: var(--jr-muted);
  font-size: 30px;
}
.jr-chart-legend {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 12px;
  color: var(--jr-muted);
  font-size: 10px;
}
.jr-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.jr-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.jr-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  grid-gap: 9.375px;
  gap: 9.375px;
  align-items: end;
}
.jr-toolbar .jr-search {
  position: relative;
}
.jr-toolbar .jr-search input {
  padding-left: 30px;
}
.jr-toolbar .jr-search::before {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--jr-muted);
  border-radius: 999px;
}
.jr-toolbar .jr-search::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 8px;
  width: 6px;
  height: 1.5px;
  background: var(--jr-muted);
  transform: rotate(45deg);
  transform-origin: left center;
}
.jr-segmented {
  display: inline-flex;
  align-items: center;
  gap: 3.75px;
  padding: 3.75px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #f8faf9;
}
.jr-segmented button {
  min-width: 34px;
  min-height: 22.5px;
  border: 0;
  border-radius: 5.5px;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
}
.jr-segmented button.active {
  background: #fff;
  color: var(--jr-green);
  box-shadow: 0 1px 2px rgba(13, 43, 30, .08);
}
.jr-industry-grid {
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}
.jr-industry-note {
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 16px;
}
.jr-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 15px;
  gap: 15px;
}
.jr-cert-card {
  display: flex;
  min-height: 126px;
  padding: 18.75px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.jr-cert-card.active {
  border-color: var(--jr-green);
  box-shadow: inset 0 0 0 1px var(--jr-green);
}
.jr-cert-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.jr-cert-title b {
  color: var(--jr-text);
  font-size: 13.125px;
}
.jr-cert-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 7.5px;
  gap: 7.5px;
  color: var(--jr-muted);
  font-size: 10px;
}
.jr-cert-meta b {
  display: block;
  color: var(--jr-text);
  font-size: 11.25px;
}
.jr-goal-shell {
  max-width: 720px;
  margin: 0 auto;
}
.jr-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 7.5px;
  gap: 7.5px;
}
.jr-step {
  display: flex;
  min-height: 52.5px;
  align-items: center;
  gap: 9px;
  padding: 11.25px;
  border: 1px solid var(--jr-border);
  border-radius: 9px;
  background: #fff;
  color: var(--jr-muted);
  font-size: 10px;
}
.jr-step i {
  display: inline-flex;
  width: 22.5px;
  height: 22.5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f0eb;
  color: var(--jr-green);
  font-style: normal;
  font-weight: 700;
}
.jr-step.active {
  border-color: var(--jr-green);
  color: var(--jr-text);
}
.jr-step.done i {
  background: var(--jr-green);
  color: #fff;
}
.jr-solution-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22.5px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
}
.jr-solution-card h2 {
  margin: 0;
  color: var(--jr-text);
  font-size: 18px;
  line-height: 24px;
}
.jr-solution-card p {
  margin: 0;
  color: var(--jr-muted);
  font-size: 12px;
  line-height: 18px;
}
.jr-next-step {
  display: flex;
  gap: 11.25px;
  padding: 15px;
  border: 1px solid #bbf7d0;
  border-radius: 11.5px;
  background: #ecfdf5;
  color: #166534;
  font-size: 11.25px;
}
.jr-next-step b {
  display: block;
  color: #14532d;
  font-size: 12px;
}
.jr-page-tabs {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 3.75px;
  padding: 3.75px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #f8faf9;
}
.jr-page-tabs button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 5.5px;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11.25px;
  font-weight: 700;
}
.jr-page-tabs button.active {
  background: #fff;
  color: var(--jr-green);
  box-shadow: 0 1px 2px rgba(13, 43, 30, .08);
}
.jr-page-tabs span {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e8f0eb;
  color: var(--jr-green);
  font-size: 10px;
}
.jr-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #fde68a;
  border-radius: 11.5px;
  background: #fffbeb;
  color: #92400e;
  font-size: 11.5px;
}
.jr-alert b {
  color: #78350f;
}
.jr-goal-list,
.jr-score-stack,
.jr-kpi-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jr-goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  grid-gap: 15px;
  gap: 15px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
}
.jr-goal-row h3,
.jr-action-card h3 {
  margin: 8px 0 4px;
  color: var(--jr-text);
  font-size: 13px;
  line-height: 18px;
}
.jr-goal-row p,
.jr-action-card p {
  margin: 0;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 16px;
}
.jr-matrix {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 12px;
  background:
    linear-gradient(to right, rgba(13, 43, 30, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 43, 30, .05) 1px, transparent 1px),
    linear-gradient(135deg, #f8faf9 0%, #f8faf9 44%, #ecfdf5 100%);
  background-size: 25% 25%, 25% 25%, 100% 100%;
}
.jr-matrix::before,
.jr-matrix::after {
  content: "";
  position: absolute;
  background: rgba(13, 43, 30, .16);
}
.jr-matrix::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}
.jr-matrix::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.jr-matrix-axis {
  position: absolute;
  z-index: 1;
  color: var(--jr-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.jr-matrix-y {
  left: 12px;
  top: 12px;
}
.jr-matrix-x {
  right: 12px;
  bottom: 12px;
}
.jr-matrix-dot {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d1d5db;
  color: #374151;
  box-shadow: 0 8px 20px rgba(13, 43, 30, .16);
  font-size: 10px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}
.jr-matrix-dot.selected {
  background: var(--jr-green);
  color: #fff;
}
.jr-score-stack > div {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--jr-border);
  border-radius: 9px;
  background: #fff;
  color: var(--jr-muted);
  font-size: 11.25px;
}
.jr-score-stack b {
  color: var(--jr-text);
}
.jr-solution-card.compact {
  padding: 15px;
}
.jr-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.jr-action-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
}
.jr-action-card .progress {
  margin-top: auto;
}
.jr-kpi-bars > div {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}
.jr-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jr-initials {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f0eb;
  color: var(--jr-green);
  flex: none;
  font-size: 10px;
  font-weight: 800;
}
.jr-team-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.jr-team-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
}
.jr-team-card-head,
.jr-team-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jr-team-card-head .badge {
  max-width: 150px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-team-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.jr-team-meta span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--jr-border);
  border-radius: 9px;
  background: #f8faf9;
}
.jr-team-meta b {
  display: block;
  overflow: hidden;
  color: var(--jr-text);
  font-size: 11.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-team-meta small {
  display: block;
  margin-top: 3px;
  color: var(--jr-muted);
  font-size: 9.75px;
}
.jr-team-metrics {
  display: flex;
  min-height: 31px;
  flex-wrap: wrap;
  gap: 6px;
}
.jr-team-metrics span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f0eb;
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 700;
}
.jr-team-metrics em {
  color: var(--jr-muted);
  font-size: 11px;
  font-style: normal;
}
@media (max-width: 1100px) {
  .jr-dashboard-grid,
.jr-cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jr-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .tenant-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;
  }
  .tenant-main,
  .tenant-brand,
  .tenant-header,
  .tenant-content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .tenant-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 15px 12px;
    width: 100%;
    min-width: 0;
  }
  .tenant-nav a {
    flex: 0 0 auto;
  }
  .tenant-sidebar-foot {
    display: none;
  }
  .tenant-header {
    position: static;
    gap: 12px;
  }
  .tenant-header h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tenant-user {
    flex: none;
  }
  .tenant-user > span:last-child {
    display: none;
  }
  .tenant-content {
    padding: 15px;
  }
  .jr-dashboard-grid,
.jr-cert-grid,
.jr-action-grid,
.jr-team-card-list,
.jr-toolbar,
.jr-stepper,
.jr-industry-grid {
    grid-template-columns: 1fr;
  }
  .jr-goal-row {
    grid-template-columns: 1fr;
  }
  .jr-alert {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- Hành trình ESG — Bối cảnh ngành (Figma 16-2) ---- */
.esg-issue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.esg-issue {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--jr-border);
}
.esg-issue:last-child {
  border-bottom: 0;
}
.esg-issue-icon {
  font-size: 18px;
  line-height: 20px;
  flex: none;
}
.esg-issue b {
  display: block;
  color: var(--jr-text);
  font-size: 12px;
}
.esg-issue .muted {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 16px;
}
.esg-case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esg-case {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
}
.esg-case b {
  color: var(--jr-text);
  font-size: 12.5px;
}
.esg-case-result {
  margin-top: 2px;
  color: var(--jr-green);
  font-size: 11px;
  font-weight: 600;
}
.esg-adv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.esg-adv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #f8faf9;
}
.esg-adv-title {
  color: var(--jr-green);
  font-size: 11.5px;
  font-weight: 600;
}
.esg-adv-value {
  color: var(--jr-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  line-height: 22px;
}
.esg-adv .muted {
  font-size: 10.5px;
  line-height: 15px;
}
@media (max-width: 1100px) {
  .esg-adv-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Hành trình ESG — Mục tiêu & Trọng yếu wizard (Figma 16-1381 → 16-1845) ---- */
.esg-wizard {
  max-width: 680px;
}
.esg-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 4px;
}
.esg-stepper-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--jr-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.esg-stepper-step.active {
  background: var(--primary-soft);
  color: var(--jr-green);
  font-weight: 600;
}
.esg-stepper-num {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f0eb;
  color: var(--jr-green);
  font-size: 11px;
  font-weight: 700;
}
.esg-stepper-step.active .esg-stepper-num,
.esg-stepper-step.done .esg-stepper-num {
  background: var(--jr-green);
  color: #fff;
}
.esg-stepper-sep {
  width: 22px;
  height: 1px;
  background: var(--jr-border);
}
.esg-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.esg-goal-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.esg-goal-card:hover {
  border-color: var(--jr-green);
}
.esg-goal-card.selected {
  border-color: var(--jr-green);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--jr-green);
}
.esg-goal-emoji {
  font-size: 26px;
  line-height: 30px;
}
.esg-goal-card b {
  color: var(--jr-text);
  font-size: 14px;
}
.esg-goal-card .muted {
  font-size: 12px;
  line-height: 16px;
}
.esg-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esg-check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--jr-text);
}
.esg-check-row.selected {
  border-color: var(--jr-green);
  background: var(--primary-soft);
}
.esg-check-row input[type='checkbox'] {
  width: auto;
  margin-top: 2px;
}
.esg-check-row b {
  display: block;
  font-size: 13px;
}
.esg-check-row .muted {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 16px;
}
.esg-solution-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 11px;
  background: #fff;
}
.esg-sol-emoji {
  font-size: 26px;
  line-height: 30px;
  flex: none;
}
.esg-solution-row b {
  color: var(--jr-text);
  font-size: 14px;
}
.esg-sol-meta {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  color: var(--jr-muted);
  font-size: 11.5px;
}
.esg-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .esg-goal-grid {
    grid-template-columns: 1fr;
  }
  .esg-solution-row {
    flex-wrap: wrap;
  }
}

/* ── Tích hợp hệ thống (/integrations) — port từ source Figma Make ── */
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.intg-apikey {
  flex: 1 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg, #f0f5f2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intg-cat-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.intg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.intg-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.intg-card:hover {
  border-color: var(--jr-green, #009966);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.intg-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.intg-icon {
  font-size: 24px;
  line-height: 28px;
  flex: none;
}
.intg-name {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.intg-desc {
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
  line-height: 1.45;
}
.intg-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 980px) {
  .intg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .intg-grid { grid-template-columns: 1fr; }
}

/* ── Thông báo & nhắc nhở (/notifications) — port từ source Figma Make ── */
.toggle {
  width: 40px;
  height: 22px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.toggle.on { background: var(--jr-green, #009966); }
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s;
}
.toggle.on .toggle-knob { transform: translateX(18px); }
.notif-card-title { margin: 0 0 14px; font-size: 14px; }
.notif-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 12px;
  background: var(--primary-soft, #ecfdf3);
  border-radius: 8px;
}
.notif-row-sm { background: transparent; padding: 7px 8px; }
.notif-row-sm:hover { background: #f6f7f9; }
.notif-event { display: block; font-size: 13px; color: var(--text); font-weight: 500; }
.notif-recipients { display: block; font-size: 11.5px; margin-top: 2px; }
.notif-sched-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.notif-sched {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: #f6f7f9;
  border-radius: 8px;
}
.notif-sched-label { font-size: 11.5px; }
.notif-sched-value { font-size: 15px; color: var(--text); }
.notif-sched-desc { font-size: 11px; }
@media (max-width: 640px) {
  .notif-sched-grid { grid-template-columns: 1fr; }
}

/* ── Lộ trình ESG (/esg/roadmap) — port từ source Figma Make ── */
.rm-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 6px 18px;
  gap: 6px 18px;
  padding: 20px 22px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(90deg, #047857, #10b981);
}
.rm-banner-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.rm-banner-title { margin: 0 0 2px; font-size: 20px; font-weight: 700; }
.rm-banner-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .9); }
.rm-banner-score { text-align: right; line-height: 1.25; }
.rm-banner-score b { display: block; font-size: 34px; font-weight: 700; }
.rm-banner-score span { display: block; font-size: 11px; color: rgba(255, 255, 255, .85); }
.rm-banner-bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); margin-top: 8px; overflow: hidden; }
.rm-banner-bar-fill { height: 100%; border-radius: 999px; background: #fff; }
.rm-banner-range { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255, 255, 255, .85); }

.rm-phase { display: flex; align-items: flex-start; gap: 16px; border-width: 2px; }
.rm-phase-active { border-color: #34d399; }
.rm-phase-done { border-color: #a7f3d0; }
.rm-phase-upcoming { border-color: var(--border); }
.rm-phase-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 12px;
  background: var(--primary-soft, #ecfdf3);
}
.rm-phase-main { flex: 1 1; min-width: 0; }
.rm-phase-name { display: block; font-size: 14px; color: var(--text); margin-top: 2px; }
.rm-phase-tasks { flex: 1 1; min-width: 0; max-width: 280px; }
.rm-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rm-tasks li { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text); }
.rm-task-mark { flex: none; line-height: 1.4; }
.rm-task-done { color: #10b981; }
.rm-task-wip { color: #d97706; }
.rm-task-todo { color: var(--muted); }
.rm-result { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 10.5px; }

.rm-ms-list { display: flex; flex-direction: column; gap: 12px; }
.rm-ms { display: flex; align-items: flex-start; gap: 12px; }
.rm-ms-dot {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
}
.rm-ms-done { background: #10b981; }
.rm-ms-current { background: #fbbf24; box-shadow: 0 0 0 3px #fef3c7; }
.rm-ms-label { margin: 0; font-size: 12px; font-weight: 500; color: var(--text); }
.rm-ms-label-done { color: var(--muted); text-decoration: line-through; }
.rm-ms-label-current { color: #b45309; }

.rm-rec { padding: 14px 16px; border: 1px solid; border-radius: 12px; }
.rm-rec-red { border-color: #fca5a5; background: #fef2f2; }
.rm-rec-amber { border-color: #fcd34d; background: #fffbeb; }
.rm-rec-blue { border-color: #93c5fd; background: #eff6ff; }
.rm-rec-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-rec-list li { position: relative; padding-left: 16px; font-size: 11.5px; color: var(--text); }
.rm-rec-list li::before { content: '→'; position: absolute; left: 0; color: var(--muted); }
@media (max-width: 820px) {
  .rm-banner { grid-template-columns: 1fr; }
  .rm-banner-score { text-align: left; }
  .rm-phase { flex-wrap: wrap; }
  .rm-phase-tasks { max-width: none; }
}

/* ---- ESG industry context overview ---- */
.idc-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.idc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.idc-kpi-card,
.idc-card {
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.idc-kpi-card {
  display: flex;
  min-height: 98px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 16px;
}
.idc-kpi-label {
  color: #496f64;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
}
.idc-kpi-value {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--jr-text);
}
.idc-kpi-value--default {
  color: var(--jr-text);
}
.idc-kpi-value--green {
  color: var(--jr-green);
}
.idc-kpi-value--red {
  color: #ff3347;
}
.idc-kpi-value--blue {
  color: #2563eb;
}
.idc-kpi-value--missing {
  color: #94a3b8;
}
.idc-kpi-sub {
  margin-top: 3px;
  color: #52756a;
  font-size: 10.5px;
  line-height: 15px;
}
.idc-kpi-sub--missing {
  color: #8ba49c;
}
.idc-card {
  padding: 20px 19px;
}
.idc-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.idc-card-title h2 {
  margin: 0;
  color: var(--jr-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
}
.idc-title-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.idc-title-mark--danger {
  border: 1px solid #ff4d5f;
  color: #ff3347;
}
.idc-title-mark--energy {
  color: #f59e0b;
}
.idc-issue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.idc-issue-card {
  display: flex;
  min-height: 76px;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 18px;
  border-radius: 8px;
  background: #f8faf9;
}
.idc-issue-icon {
  width: 18px;
  flex: none;
  color: var(--jr-green);
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}
.idc-issue-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.idc-issue-copy b {
  color: var(--jr-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
}
.idc-issue-copy span {
  color: #52756a;
  font-size: 11px;
  line-height: 16px;
}
.idc-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.idc-adv-card {
  display: flex;
  min-height: 80px;
  flex-direction: column;
  gap: 2px;
  padding: 13px 12px;
  border-radius: 8px;
  background: #f0fbf6;
}
.idc-adv-title {
  color: var(--jr-text);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
}
.idc-adv-card b {
  color: var(--jr-green);
  font-size: 17px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: 0;
}
.idc-adv-card span:last-child {
  color: #52756a;
  font-size: 10.5px;
  line-height: 15px;
}
.idc-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.idc-source-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
}
@media (max-width: 1120px) {
  .idc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .idc-adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .idc-kpi-grid,
  .idc-issue-grid,
  .idc-adv-grid {
    grid-template-columns: 1fr;
  }
  .idc-card {
    padding: 16px;
  }
}

/* ---- Tenant collect metrics (/esg/metrics) ---- */
.tenant-content:has(> .tc-page-shell) {
  padding: 0 22.5px 18.75px;
}
.tenant-content:has(> .tc-page-shell) > .jr-projbar {
  display: none;
}
.tc-page-shell {
  min-width: 0;
}
.tc-page-shell > .tabs {
  display: flex;
  height: 40px;
  align-items: flex-end;
  gap: 2px;
  margin: 0 -22.5px 18.75px !important;
  padding: 0 22.5px;
  border-bottom: 1px solid var(--jr-border);
  background: #fff;
}
.tc-page-shell > .tabs a {
  display: inline-flex;
  height: 40px;
  align-items: center;
  padding: 0 18px;
  border-bottom-width: 2px;
  color: var(--jr-muted);
  font-size: 11.25px;
  font-weight: 500;
  line-height: 15px;
}
.tc-page-shell > .tabs a.active {
  color: var(--jr-green);
}
.tc-page-shell > .stack {
  gap: 0;
}
.tc-page {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 15px;
}
.tc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12.5px;
  gap: 12.5px;
}
.tc-kpi {
  min-height: 80px;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
}
.tc-kpi span {
  display: block;
  color: var(--jr-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}
.tc-kpi strong {
  display: block;
  margin-top: 3px;
  color: var(--jr-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
}
.tc-kpi .tc-kpi-green {
  color: var(--jr-green);
}
.tc-kpi .tc-kpi-red {
  color: #ff3347;
}
.tc-kpi .tc-kpi-blue {
  color: #2563eb;
}
.tc-toolbar {
  display: grid;
  min-height: 53px;
  grid-template-columns: minmax(300px, 1fr) 137px 166px 122px 218px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 11px 15px;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
}
.tc-search {
  position: relative;
  min-width: 0;
}
.tc-search::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--jr-muted);
  border-radius: 999px;
  transform: translateY(-58%);
  pointer-events: none;
}
.tc-search::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 20px;
  width: 6px;
  height: 1.5px;
  background: var(--jr-muted);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}
.tc-segmented {
  display: inline-flex;
  height: 30px;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid #d9e8e1;
  border-radius: 6px;
  background: #f8fbfa;
}
.tc-segmented button {
  display: inline-flex;
  height: 22px;
  min-width: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}
.tc-segmented button.active {
  background: var(--jr-green);
  color: #fff;
}
.tc-mode-filter button {
  flex: 1 1;
  padding: 0 6px;
  font-size: 9.75px;
}
.tc-table-card {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 10px;
  background: #fff;
}
.tc-table-wrap {
  max-height: 630px;
  overflow: auto;
}
.tc-col-metric {
  width: 220px;
}
.tc-col-standard {
  width: 84px;
}
.tc-col-pillar {
  width: 56px;
}
.tc-col-dept {
  width: 170px;
}
.tc-col-data {
  width: 255px;
}
.tc-col-evidence {
  width: 180px;
}
.tc-col-assign {
  width: 100px;
}
.tc-col-status {
  width: 115px;
}
.tc-metric-cell {
  overflow: hidden;
}
.tc-metric-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 7px;
}
.tc-expand-btn,
.tc-expand-spacer {
  flex: 0 0 16px;
  width: 16px;
  height: 18px;
}
.tc-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #355f54;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.tc-expand-btn:hover {
  color: var(--jr-green);
}
.tc-metric-tags {
  display: flex;
  min-height: 18px;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  padding-left: 23px;
}
.tc-tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
}
/* Chip "loại câu trả lời" — xám trung tính cho mọi loại (khớp design; chỉ Công thức mới tím). */
.tc-tag-gray {
  background: #eef1f4;
  color: #64748b;
}
.tc-tag-formula {
  background: #eee7ff;
  color: #6d28d9;
}
.tc-required {
  color: #ff6400;
  font-size: 9.75px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}
.tc-standard {
  color: #355f54 !important;
  font-size: 10px !important;
  font-weight: 600;
}
.tc-pillar {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
}
.tc-pillar-e {
  background: #d9fbe8;
  color: #009966;
}
.tc-pillar-s {
  background: #dbeafe;
  color: #2563eb;
}
.tc-pillar-g {
  background: #ede9fe;
  color: #7c3aed;
}
.tc-pillar-default {
  background: #edf3f0;
  color: var(--jr-muted);
}
.tc-dept {
  display: inline-block;
  max-width: 158px;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e8f0eb;
  color: #52756a;
  font-size: 10.25px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.tc-data-cell {
  overflow: visible;
}
.tc-value-control,
.tc-file-mode,
.tc-data-static {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.tc-value-select {
  max-width: 112px;
}
.tc-choice-select {
  max-width: 155px;
}
.tc-text-input {
  max-width: 175px;
}
.tc-number-input {
  max-width: 100px;
}
.tc-scale-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tc-scale-control button {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d9e8e1;
  border-radius: 999px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.tc-scale-control button.active,
.tc-scale-control button:hover:not(:disabled) {
  border-color: var(--jr-bright);
  background: var(--jr-bright);
  color: #fff;
}
.tc-scale-control button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.tc-saved-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d9fbe8;
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 800;
}
/* Nhiều lựa chọn (multi_choice) — dropdown checkbox theo design tenant-collect. */
.tc-multi-dd {
  position: relative;
  width: 168px;
}
.tc-multi-dd-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #d9e8e1;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 10.75px;
  line-height: 14px;
}
.tc-multi-dd-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.tc-multi-dd-label {
  flex: 1 1;
  overflow: hidden;
  color: var(--jr-text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-multi-dd-placeholder {
  color: var(--jr-muted);
}
.tc-multi-dd-caret {
  color: var(--jr-muted);
  font-size: 9px;
  transition: transform .15s ease;
}
.tc-multi-dd-caret.tc-open {
  transform: rotate(180deg);
}
.tc-multi-dd-overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
}
.tc-multi-dd-panel {
  position: absolute;
  z-index: 31;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 200px;
  max-height: 208px;
  padding: 4px 0;
  border: 1px solid #d9e8e1;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 61, 46, .14);
  overflow-y: auto;
}
.tc-multi-dd-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 10px;
  color: var(--jr-text);
  cursor: pointer;
  font-size: 10.75px;
  line-height: 14px;
}
.tc-multi-dd-panel label:hover {
  background: #f2f8f5;
}
.tc-value-text {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  color: var(--jr-text);
  font-size: 11.25px;
  font-weight: 700;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-row-error {
  margin-top: 4px;
  font-size: 10px;
  line-height: 13px;
}
.tc-evidence-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Ô click-to-edit (design tenant-collect): hiện giá trị + bút chì, bấm mới mở input. */
.tc-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.tc-inline-edit:disabled {
  cursor: default;
}
.tc-inline-value {
  max-width: 148px;
  overflow: hidden;
  color: var(--jr-text);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-inline-value.tc-inline-multiline {
  display: -webkit-box;
  max-width: 220px;
  font-weight: 400;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tc-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.tc-inline-placeholder {
  color: var(--jr-muted);
  font-size: 11px;
  font-style: italic;
}
.tc-inline-edit .tc-inline-pencil {
  flex-shrink: 0;
  color: var(--jr-muted);
  opacity: .45;
}
.tc-inline-edit:hover:not(:disabled) .tc-inline-pencil {
  color: var(--jr-green);
  opacity: 1;
}
.tc-inline-edit:disabled .tc-inline-pencil {
  display: none;
}
.tc-inline-check {
  flex-shrink: 0;
  color: var(--jr-green);
}
.tc-inline-busy {
  color: var(--jr-muted);
  font-size: 11px;
}
.tc-inline-input {
  max-width: 108px;
  padding: 4px 7px;
  border: 1px solid var(--jr-bright, #10b981);
  border-radius: 6px;
  font-size: 11.5px;
  outline: none;
}
.tc-inline-input.tc-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.tc-inline-textarea {
  width: 240px;
  max-width: 240px;
  font-family: inherit;
  resize: vertical;
}
/* Cột bằng chứng — chip xem / nút upload dạng chữ (design). */
.tc-evidence-chip,
.tc-evidence-upload,
.tc-period-upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: none;
  font-size: 11px;
  cursor: pointer;
}
.tc-evidence-chip {
  border: 1px solid var(--jr-border);
  color: var(--jr-text);
  font-weight: 600;
}
.tc-evidence-chip:hover {
  border-color: var(--jr-green);
  color: var(--jr-green);
}
.tc-evidence-upload {
  border: none;
  color: var(--jr-muted);
}
.tc-evidence-upload:hover {
  color: var(--jr-green);
}
.tc-period-upload {
  border: 1px dashed var(--jr-border);
  color: var(--jr-muted);
}
.tc-period-upload:hover {
  border-color: var(--jr-green);
  color: var(--jr-green);
}
/* Phân công — pill tên người / nút phân công (design). */
.tc-assignee-btn {
  padding: 2px 9px;
  border: none;
  border-radius: 999px;
  background: var(--primary-soft, #d9fbe8);
  color: var(--jr-green, #0a7f56);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.tc-assignee-btn:hover {
  filter: brightness(.97);
}
.tc-assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border: none;
  background: none;
  color: var(--jr-muted);
  font-size: 11px;
  cursor: pointer;
}
.tc-assign-btn:hover {
  color: var(--jr-green);
}
/* Xóa lọc — hàng riêng để không phá grid toolbar. */
.tc-clear-filters {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: start;
  gap: 4px;
  border: none;
  background: none;
  color: var(--danger, #dc2626);
  font-size: 11px;
  cursor: pointer;
}
/* Footer đếm + chú thích dưới bảng (design). */
.tc-table-foot {
  padding: 9px 15px;
  border-top: 1px solid var(--jr-border);
  background: #f8faf9;
  color: var(--jr-muted);
  font-size: 10.5px;
}
.tc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 2px;
  color: var(--jr-muted);
  font-size: 10.5px;
}
.tc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tc-legend-item b {
  color: var(--jr-text);
  font-weight: 600;
}
.tc-period-row td {
  padding: 0 !important;
  background: #f8faf9;
}
@media (max-width: 1250px) {
  .tc-toolbar {
    grid-template-columns: minmax(260px, 1fr) 137px 166px;
  }
  .tc-cert-filter,
  .tc-dept-filter {
    grid-column: span 1;
  }
}
@media (max-width: 900px) {
  .tenant-content:has(> .tc-page-shell) {
    padding-right: 15px;
    padding-left: 15px;
  }
  .tc-page-shell > .tabs {
    margin-right: -15px !important;
    margin-left: -15px !important;
    padding-right: 15px;
    padding-left: 15px;
  }
  .tc-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tc-toolbar {
    grid-template-columns: 1fr;
  }
  .tc-pillar-filter,
  .tc-mode-filter,
  .tc-cert-filter,
  .tc-dept-filter {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .tc-kpis {
    grid-template-columns: 1fr;
  }
  .tc-page-shell > .tabs a {
    padding: 0 12px;
  }
}

/* ---- Metric dictionary detail (/metrics/[id]) ---- */
.tenant-main:has(.mdd-topbar-title) .tenant-header h1 {
  visibility: hidden;
}
.tenant-content:has(> .mdd-page) {
  padding: 18.75px 22.5px 28px;
}
.mdd-topbar-title {
  position: fixed;
  z-index: 20;
  top: 13px;
  left: 213.75px;
  max-width: calc(100vw - 440px);
  overflow: hidden;
  color: var(--jr-text);
  font-size: 13.125px;
  font-weight: 650;
  line-height: 18.75px;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdd-page {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  color: var(--jr-text);
}
.mdd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mdd-head-copy {
  display: flex;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
  gap: 8px;
}
.mdd-back {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  color: var(--jr-muted);
  font-size: 11.25px;
  font-weight: 500;
  line-height: 15px;
}
.mdd-back::before {
  content: "←";
  margin-right: 6px;
}
.mdd-back:hover {
  color: var(--jr-green);
}
.mdd-title {
  margin: 0;
  color: #0c1510;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 23px;
}
.mdd-layout {
  display: grid;
  align-items: start;
  grid-gap: 16px;
  gap: 16px;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
}
.mdd-aside,
.mdd-main-col,
.mdd-text-stack,
.mdd-workflows {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}
.mdd-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.mdd-card-head,
.mdd-table-head,
.mdd-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mdd-card-head {
  margin-bottom: 14px;
}
.mdd-card-head h2,
.mdd-table-head h2 {
  margin: 0;
  color: #0c1510;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 17px;
}
.mdd-card-title-with-icon {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.mdd-card-meta {
  flex: none;
  color: var(--jr-muted);
  font-size: 11px;
  line-height: 15px;
}
.mdd-section-title {
  margin: 0 0 13px;
  color: #3a645b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 15px;
  text-transform: uppercase;
}
.mdd-minor-title {
  margin: 0 0 5px;
  color: #0c1510;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 15px;
}
.mdd-copy,
.mdd-empty {
  margin: 0;
  color: #0c1510;
  font-size: 11.5px;
  line-height: 18px;
  white-space: pre-wrap;
}
.mdd-empty {
  color: var(--jr-muted);
}
.mdd-props {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}
.mdd-prop {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: 150px minmax(0, 1fr);
}
.mdd-prop dt {
  color: var(--jr-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}
.mdd-prop dd {
  min-width: 0;
  margin: 0;
  color: #0c1510;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.mdd-prop dd small {
  display: block;
  margin-top: 3px;
  color: var(--jr-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}
.mdd-prop-strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.mdd-chip-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}
.mdd-chip {
  display: inline-flex;
  min-height: 22px;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdd-chip-primary {
  background: #d9fbe8;
  color: #00845b;
}
.mdd-chip-green {
  background: #dcfce7;
  color: #008236;
}
.mdd-chip-red {
  background: #ffe2e2;
  color: #e7000b;
}
.mdd-chip-amber {
  background: #fef3c7;
  color: #c2410c;
}
.mdd-chip-blue {
  background: #dbeafe;
  color: #155dfc;
}
.mdd-chip-neutral {
  background: #f0f7f4;
  color: #067857;
}
.mdd-btn {
  flex: none;
  background: rgba(255, 255, 255, .72);
}
.mdd-formula-box {
  min-height: 48px;
  padding: 11px 12px;
  border-radius: 7.5px;
  background: #f5f7f6;
  color: #12231b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: pre-wrap;
}
.mdd-formula-empty {
  color: var(--jr-muted);
  font-family: inherit;
  font-weight: 500;
}
.mdd-tiny-bars {
  position: relative;
  width: 12px;
  height: 12px;
}
.mdd-tiny-bars::before,
.mdd-tiny-bars::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 2px;
  border-radius: 2px;
  background: var(--jr-green);
}
.mdd-tiny-bars::before {
  left: 2px;
  height: 7px;
}
.mdd-tiny-bars::after {
  left: 7px;
  height: 11px;
}
.mdd-check-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #2b7fff;
  border-radius: 3px;
}
.mdd-check-icon::after {
  content: "";
  width: 6px;
  height: 3px;
  border-bottom: 1.5px solid #2b7fff;
  border-left: 1.5px solid #2b7fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.mdd-compare-kpis {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-bottom: 15px;
}
.mdd-compare-kpi {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 7.5px;
  text-align: center;
}
.mdd-compare-kpi span {
  display: block;
  overflow: hidden;
  color: var(--jr-muted);
  font-size: 10px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdd-compare-kpi b {
  display: block;
  margin-top: 3px;
  color: #0c1510;
  font-size: 13px;
  font-weight: 900;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.mdd-compare-kpi-company {
  background: #e9fbf4;
}
.mdd-compare-kpi-average {
  background: #eef9fb;
}
.mdd-compare-kpi-best {
  background: #fff7df;
}
.mdd-compare-kpi-benchmark {
  background: #f6f8f7;
}
.mdd-scale-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mdd-scale-row {
  display: grid;
  align-items: center;
  grid-gap: 5px 12px;
  gap: 5px 12px;
  grid-template-columns: 118px minmax(0, 1fr) minmax(108px, auto);
}
.mdd-scale-label {
  color: var(--jr-muted);
  font-size: 11px;
  line-height: 15px;
}
.mdd-scale-track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0eb;
}
.mdd-scale-fill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
}
.mdd-scale-fill-company {
  background: #10b981;
}
.mdd-scale-fill-average {
  background: #94a3b8;
}
.mdd-scale-fill-best {
  background: #f59e0b;
}
.mdd-scale-fill-benchmark {
  background: #22c55e;
}
.mdd-scale-value {
  color: #0c1510;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  overflow-wrap: anywhere;
}
.mdd-scale-sub {
  grid-column: 2 / 4;
  color: var(--jr-muted);
  font-size: 10.5px;
  line-height: 14px;
}
.mdd-text-benchmarks {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}
.mdd-text-benchmarks div {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f8faf9;
  color: var(--jr-muted);
  font-size: 11px;
  line-height: 15px;
}
.mdd-text-benchmarks b {
  color: #0c1510;
}
.mdd-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mdd-rule {
  display: grid;
  align-items: start;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  padding: 11px 12px;
  border: 1px solid;
  border-radius: 7.5px;
}
.mdd-rule-error {
  border-color: #ffa2a2;
  background: #fff1f2;
}
.mdd-rule-warning {
  border-color: #facc15;
  background: #fff8e1;
}
.mdd-rule-mark {
  display: inline-flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1.4px solid currentColor;
  border-radius: 999px;
  color: #ff6900;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}
.mdd-rule-error .mdd-rule-mark {
  color: #fb2c36;
}
.mdd-rule-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.mdd-rule-copy b {
  color: #0c1510;
  font-size: 11.5px;
  line-height: 15px;
  overflow-wrap: anywhere;
}
.mdd-rule-copy span {
  color: var(--jr-muted);
  font-size: 11px;
  line-height: 15px;
  overflow-wrap: anywhere;
}
.mdd-severity {
  align-self: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mdd-severity-error {
  background: #ffe2e2;
  color: #e7000b;
}
.mdd-severity-warning {
  background: #fef3c7;
  color: #f54900;
}
.mdd-rule-delete {
  min-width: 24px;
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}
.mdd-add-rule {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.4fr) 130px auto auto;
}
.mdd-workflow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mdd-workflow + .mdd-workflow {
  padding-top: 12px;
  border-top: 1px solid var(--jr-border);
}
.mdd-workflow-head b {
  color: #0c1510;
  font-size: 12px;
  line-height: 16px;
}
.mdd-step-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mdd-step {
  display: grid;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: 28px minmax(104px, .38fr) minmax(0, 1fr) minmax(100px, .32fr);
  padding: 8px 10px;
  border: 1px solid rgba(22, 101, 52, .09);
  border-radius: 7.5px;
  background: #f8faf9;
}
.mdd-step-order {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e9fbf4;
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 900;
}
.mdd-step-role,
.mdd-step-task,
.mdd-step-deadline {
  min-width: 0;
  font-size: 11px;
  line-height: 15px;
  overflow-wrap: anywhere;
}
.mdd-step-role {
  color: #0c1510;
  font-weight: 800;
}
.mdd-step-task {
  color: #0c1510;
}
.mdd-step-deadline {
  color: var(--jr-muted);
}
.mdd-table-card {
  overflow: hidden;
  padding: 0;
}
.mdd-table-head {
  padding: 16px 16px 12px;
}
.mdd-table-wrap {
  overflow-x: auto;
}
.mdd-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}
.mdd-benchmark-table {
  min-width: 980px;
}
.mdd-table th,
.mdd-table td {
  padding: 10.5px 16px;
  border-bottom: 1px solid var(--jr-border);
  color: #0c1510;
  font-size: 11.25px;
  line-height: 15px;
  vertical-align: middle;
}
.mdd-table th {
  background: #f8faf9;
  color: #3a645b;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mdd-table tr:last-child td {
  border-bottom: 0;
}
.mdd-table code {
  color: #067857;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  font-weight: 800;
}
.mdd-table-empty {
  padding: 0 16px 16px;
}
@media (max-width: 1120px) {
  .mdd-layout {
    grid-template-columns: 1fr;
  }
  .mdd-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .tenant-main:has(.mdd-topbar-title) .tenant-header h1 {
    visibility: visible;
  }
  .mdd-topbar-title {
    display: none;
  }
  .tenant-content:has(> .mdd-page) {
    padding: 15px;
  }
  .mdd-head {
    flex-direction: column;
  }
  .mdd-head .mdd-btn {
    width: 100%;
    justify-content: center;
  }
  .mdd-aside {
    display: flex;
  }
  .mdd-prop {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .mdd-scale-row {
    grid-template-columns: 1fr;
  }
  .mdd-scale-sub {
    grid-column: auto;
  }
  .mdd-add-rule {
    grid-template-columns: 1fr;
  }
  .mdd-step {
    grid-template-columns: 28px 1fr;
  }
  .mdd-step-task,
  .mdd-step-deadline {
    grid-column: 2;
  }
}

/* ---- roles table refresh (design 2026-07-06) ---- */
.rl-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rl-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.rl-subtitle {
  margin: 0;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.rl-card {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.rl-btn {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5.5px 11px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11.25px;
  font-weight: 650;
  line-height: 15px;
  transition: background .12s, border-color .12s, color .12s;
}
.rl-btn:hover {
  background: #f7faf8;
  border-color: rgba(0, 153, 102, .26);
  color: var(--jr-green);
}
.rl-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.rl-btn-primary {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: #fff;
}
.rl-btn-primary:hover {
  background: #00845d;
  border-color: #00845d;
  color: #fff;
}
.rl-btn-danger {
  border-color: rgba(220, 38, 38, .24);
  color: #dc2626;
}
.rl-btn-danger:hover {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, .35);
  color: #b91c1c;
}
.rl-btn-sm {
  min-height: 24px;
  padding: 3.5px 9px;
  border-radius: 6px;
  font-size: 10.75px;
}
.rl-table-card {
  padding: 0;
}
.rl-table-wrap {
  overflow-x: auto;
}
.rl-table {
  width: 100%;
  min-width: 1010px;
  border-collapse: separate;
  border-spacing: 0;
}
.rl-table th,
.rl-table td {
  border-bottom: 1px solid rgba(22, 101, 52, .09);
  vertical-align: middle;
}
.rl-table th {
  padding: 11.5px 14px;
  background: #fff;
  color: #3a645b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 14px;
  text-transform: uppercase;
}
.rl-table td {
  padding: 14px;
  color: #07150f;
  font-size: 11.25px;
  line-height: 15px;
}
.rl-table tbody tr:last-child td {
  border-bottom: 0;
}
.rl-table tbody tr:hover {
  background: #f8faf9;
}
.rl-table tbody tr.is-active {
  background: #f0fbf6;
}
.rl-col-name {
  width: 170px;
}
.rl-col-desc {
  width: 310px;
}
.rl-col-users {
  width: 118px;
}
.rl-col-perm,
.rl-perm-cell {
  width: 86px;
  text-align: center;
}
.rl-col-action,
.rl-action-cell {
  width: 128px;
  text-align: right;
}
.rl-role-link {
  display: inline-flex;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.rl-role-link:hover .rl-role-title {
  color: var(--jr-green);
}
.rl-role-title {
  color: #07150f;
  font-size: 13.25px;
  font-weight: 850;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.rl-role-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jr-muted);
  font-size: 10.75px;
  line-height: 14px;
}
.rl-role-desc {
  max-width: 330px;
  color: #3b6c61;
  font-size: 11.25px;
  line-height: 15px;
  overflow-wrap: anywhere;
}
.rl-user-count {
  color: #07150f;
  font-weight: 800;
}
.rl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: #eef3f1;
  color: #5b7480;
  font-size: 9.75px;
  font-weight: 750;
  line-height: 13px;
  white-space: nowrap;
}
.rl-badge-amber {
  background: #fef3c7;
  color: #b45309;
}
.rl-permission-dot {
  display: inline-flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.rl-permission-dot::before {
  content: "\00d7";
}
.rl-permission-dot.is-on {
  border: 1px solid rgba(0, 188, 125, .38);
  background: #d9faea;
  color: var(--jr-bright);
}
.rl-permission-dot.is-on::before {
  content: "\2713";
}
.rl-permission-dot.is-off {
  background: #f1f3f5;
  color: #9aa3ad;
}
.rl-row-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--jr-bright);
  border-radius: 7.5px;
  background: #fff;
  color: var(--jr-green);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  line-height: 15px;
  white-space: nowrap;
}
.rl-row-action:hover {
  background: #eafff5;
}
.rl-row-action-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.4px solid currentColor;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.rl-table-empty,
.rl-empty {
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
  text-align: center;
}
.rl-empty {
  padding: 24px;
}
.rl-detail-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
}
.rl-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--jr-border);
}
.rl-detail-title {
  color: #07150f;
  font-size: 16px;
  font-weight: 850;
  line-height: 20px;
}
.rl-detail-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.rl-detail-meta code {
  color: #067857;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10.75px;
  font-weight: 800;
}
.rl-perm-search {
  padding: 14px 18px 6px;
}
.rl-perm-search input {
  min-height: 30px;
  border-color: var(--jr-border);
  border-radius: 7.5px;
  background: rgba(232, 240, 235, .3);
  color: var(--jr-text);
  font-size: 11.25px;
}
.rl-perm-groups {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 14px;
  padding: 12px 18px 18px;
}
.rl-perm-group {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 8px;
  background: #fff;
}
.rl-perm-group-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--jr-border);
  background: #f8faf9;
  color: #07150f;
  font-size: 13px;
  font-weight: 800;
  line-height: 17px;
}
.rl-perm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 4px 12px;
  gap: 4px 12px;
  padding: 12px 14px;
}
.rl-perm-check {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 7.5px;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11.75px;
  line-height: 16px;
}
.rl-perm-check:hover {
  background: #f8faf9;
  color: #07150f;
}
.rl-perm-check input {
  width: auto;
  flex: none;
  cursor: pointer;
}
.rl-perm-check:has(input:checked) {
  color: #07150f;
  font-weight: 650;
}
.rl-perm-check:has(input:disabled) {
  color: var(--jr-muted);
  cursor: default;
}
.rl-perm-check input:disabled {
  cursor: default;
}
.rl-perm-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 11.25px;
  line-height: 15px;
}
.rl-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--jr-border);
}
.rl-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ===== Quy trình làm việc theo vai trò (design màn Quản lý vai trò) ===== */
.rl-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.rl-row-invite {
  color: var(--jr-bright);
}
.rl-flow-section {
  padding: 20px 22px 22px;
}
.rl-flow-title {
  margin: 0;
  color: var(--jr-text);
  font-size: 14px;
  font-weight: 700;
}
.rl-flow-subtitle {
  margin: 3px 0 20px;
  color: var(--jr-muted);
  font-size: 11.5px;
}
.rl-flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rl-flow-card {
  width: 264px;
  padding: 11px 14px;
  border: 1px solid var(--rl-flow-border, #d9e8e1);
  border-radius: 11px;
  background: var(--rl-flow-bg, #f8faf9);
}
.rl-flow-card-title {
  color: var(--rl-flow-ink, var(--jr-text));
  font-size: 12px;
  font-weight: 700;
}
.rl-flow-card-sub {
  margin-top: 2px;
  color: var(--jr-muted);
  font-size: 10.5px;
  line-height: 14px;
}
.rl-flow-role {
  display: inline-flex;
  margin-top: 7px;
  padding: 2px 7px;
  border: 1px solid var(--rl-flow-border, #d9e8e1);
  border-radius: 5px;
  background: #fff;
  color: var(--rl-flow-ink, var(--jr-text));
  font-size: 9.5px;
  font-weight: 700;
}
.rl-tone-green { --rl-flow-bg: #ecfdf5; --rl-flow-border: #a7f3d0; --rl-flow-ink: #047857; }
.rl-tone-blue { --rl-flow-bg: #eff6ff; --rl-flow-border: #bfdbfe; --rl-flow-ink: #1d4ed8; }
.rl-tone-amber { --rl-flow-bg: #fffbeb; --rl-flow-border: #fde68a; --rl-flow-ink: #b45309; }
.rl-tone-teal { --rl-flow-bg: #f0fdfa; --rl-flow-border: #99f6e4; --rl-flow-ink: #0f766e; }
.rl-tone-violet { --rl-flow-bg: #f5f3ff; --rl-flow-border: #ddd6fe; --rl-flow-ink: #6d28d9; }
.rl-tone-red { --rl-flow-bg: #fef2f2; --rl-flow-border: #fecaca; --rl-flow-ink: #b91c1c; }
.rl-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3px 0;
}
.rl-flow-arrow-line {
  width: 1px;
  height: 12px;
  background: #cbd5d1;
}
.rl-flow-arrow-head {
  margin-top: -5px;
  color: #9ca8a3;
  font-size: 12px;
  line-height: 10px;
}
.rl-flow-loop {
  position: relative;
  padding-left: 46px;
}
.rl-flow-loop::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 34px;
  left: 8px;
  width: 38px;
  border: 2px dashed #f87171;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  pointer-events: none;
}
.rl-flow-loop-badge {
  position: absolute;
  bottom: 20px;
  left: -26px;
  padding: 2px 8px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}
.rl-flow-loop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rl-flow-pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
.rl-flow-pass-badge {
  margin-top: 3px;
  padding: 2px 8px;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 9.5px;
  font-weight: 700;
}
.rl-flow-participants {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #e4ede8;
}
.rl-flow-participants-title {
  margin: 0 0 10px;
  color: var(--jr-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rl-flow-participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.rl-flow-participant {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rl-flow-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--rl-flow-ink, var(--jr-green));
}
.rl-flow-participant-name {
  margin: 0;
  color: var(--jr-text);
  font-size: 11.5px;
  font-weight: 700;
}
.rl-flow-participant-step {
  margin: 1px 0 0;
  color: var(--jr-muted);
  font-size: 10.5px;
}
.rl-invite-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rl-invite-chip {
  padding: 2px 9px;
  border-radius: 999px;
  background: #f1f5f3;
  color: #9ca8a3;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: line-through;
}
.rl-invite-chip.is-on {
  background: #d9fbe8;
  color: #047857;
  text-decoration: none;
}
/* Mời nhân sự = chọn từ danh sách /employees (picker có search + chip đã chọn). */
.rl-emp-picker {
  margin-top: 6px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid rgba(22, 101, 52, .14);
  border-radius: 8px;
  background: #fff;
}
.rl-emp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid rgba(22, 101, 52, .08);
  background: #fff;
  color: #07150f;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.rl-emp-row:last-child {
  border-bottom: none;
}
.rl-emp-row:hover:not(:disabled) {
  background: #f6faf8;
}
.rl-emp-row.is-on {
  background: #ecfdf5;
}
.rl-emp-row:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.rl-emp-check {
  flex-shrink: 0;
  width: 16px;
  color: #047857;
  font-weight: 800;
}
.rl-emp-name {
  font-weight: 650;
  font-size: 12.5px;
}
.rl-emp-meta {
  margin-left: auto;
  max-width: 55%;
  overflow: hidden;
  color: var(--jr-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-chip-x {
  margin-left: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
@media (max-width: 920px) {
  .rl-page-intro,
  .rl-detail-head,
  .rl-detail-foot,
  .rl-perm-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .rl-page-intro .rl-btn,
  .rl-detail-head .rl-btn,
  .rl-detail-foot .rl-btn {
    width: 100%;
  }
  .rl-perm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .rl-perm-grid {
    grid-template-columns: 1fr;
  }
  .rl-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- users team screen (design 2026-07-06) ---- */
.us-page {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.us-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.us-kpi-card {
  min-height: 79px;
  padding: 15px 15px 13px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.us-kpi-label {
  color: var(--jr-muted);
  font-size: 11.25px;
  font-weight: 500;
  line-height: 15px;
}
.us-kpi-value {
  margin-top: 3px;
  font-size: 22px;
  font-weight: 850;
  line-height: 28px;
}
.us-kpi-value.is-dark {
  color: #07150f;
}
.us-kpi-value.is-green {
  color: var(--jr-green);
}
.us-kpi-value.is-red {
  color: #fb2c36;
}
.us-kpi-value.is-blue {
  color: #155dfc;
}
.us-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.us-filter-group {
  display: grid;
  flex: 1 1;
  grid-template-columns: minmax(230px, 1.1fr) minmax(170px, .82fr) minmax(150px, .72fr) auto;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
}
.us-toolbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.us-field,
.us-search {
  min-width: 0;
  margin: 0;
}
.us-search {
  position: relative;
}
.us-search > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  color: #6b8a81;
  pointer-events: none;
  transform: translateY(-50%);
}
.us-input,
.us-select {
  width: 100%;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #fff;
  color: #07150f;
  font-size: 11.25px;
  line-height: 15px;
  box-shadow: none;
}
.us-search-input {
  padding-left: 32px;
}
.us-input::placeholder {
  color: #7a928b;
}
.us-input:focus,
.us-select:focus {
  border-color: rgba(0, 153, 102, .45);
  box-shadow: 0 0 0 3px rgba(0, 188, 125, .11);
}
.us-btn {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11.25px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.us-btn:hover {
  border-color: rgba(0, 153, 102, .26);
  background: #f7faf8;
  color: var(--jr-green);
}
.us-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.us-btn svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.us-btn-primary {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: #fff;
}
.us-btn-primary:hover {
  border-color: #00845d;
  background: #00845d;
  color: #fff;
}
.us-btn-secondary {
  color: var(--jr-green);
}
.us-btn-muted {
  color: #52756a;
}
.us-btn-danger {
  min-height: 24px;
  padding: 4px 9px;
  border-color: rgba(220, 38, 38, .24);
  color: #dc2626;
  font-size: 10.75px;
}
.us-btn-danger:hover {
  border-color: rgba(220, 38, 38, .35);
  background: #fef2f2;
  color: #b91c1c;
}
.us-card {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.us-table-wrap {
  overflow-x: auto;
}
.us-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: separate;
  border-spacing: 0;
}
.us-table th,
.us-table td {
  border-bottom: 1px solid rgba(22, 101, 52, .09);
  vertical-align: middle;
}
.us-table th {
  padding: 11.5px 14px;
  background: #fff;
  color: #3a645b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 14px;
  text-transform: uppercase;
}
.us-table td {
  height: 53.5px;
  padding: 10px 14px;
  color: #07150f;
  font-size: 11.25px;
  line-height: 15px;
}
.us-table tbody tr:hover {
  background: #f8faf9;
}
.us-table tbody tr:last-child td {
  border-bottom: 0;
}
.us-col-user {
  width: 210px;
}
.us-col-email {
  width: 235px;
}
.us-col-department {
  width: 230px;
}
.us-col-role {
  width: 170px;
}
.us-col-login {
  width: 170px;
}
.us-col-status {
  width: 130px;
}
.us-col-actions {
  width: 120px;
  text-align: right;
}
.us-user-cell {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 10px;
}
.us-avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #c9f9df;
  color: var(--jr-green);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}
.us-user-name {
  min-width: 0;
  color: #07150f;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.us-email,
.us-muted {
  color: #3b6c61;
}
.us-badge-list {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 5px;
}
.us-dept-badge,
.us-role-badge,
.us-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1.5px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 650;
  line-height: 13px;
  white-space: nowrap;
}
.us-dept-badge {
  background: #eaf2ef;
  color: #4e756b;
}
.us-role-badge {
  border-radius: 999px;
}
.us-role-badge.is-tone-0 {
  background: #eee8ff;
  color: #6d28d9;
}
.us-role-badge.is-tone-1 {
  background: #dbeafe;
  color: #155dfc;
}
.us-role-badge.is-tone-2 {
  background: #cff8e3;
  color: #00845d;
}
.us-role-badge.is-tone-3 {
  background: #fef0c7;
  color: #b45309;
}
.us-status-badge {
  border-radius: 999px;
  font-weight: 700;
}
.us-status-badge.is-active {
  background: #d9faea;
  color: var(--jr-green);
}
.us-status-badge.is-locked {
  background: #f1f3f5;
  color: #818b98;
}
.us-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.us-icon-btn {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #52756a;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.us-icon-btn:hover {
  background: #eaf2ef;
  color: var(--jr-green);
}
.us-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.us-icon-btn svg {
  width: 14px;
  height: 14px;
}
.us-icon-btn.is-danger {
  color: #fb2c36;
}
.us-icon-btn.is-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.us-empty {
  height: 80px;
  color: var(--jr-muted);
  text-align: center;
}
.us-table-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(22, 101, 52, .09);
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.us-invite-card {
  margin-top: 1px;
}
.us-invite-head {
  padding: 13px 14px 0;
}
.us-invite-head h2 {
  margin: 0;
  color: #07150f;
  font-size: 13.25px;
  font-weight: 850;
  line-height: 17px;
}
.us-invite-table {
  min-width: 720px;
}
.us-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1120px) {
  .us-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .us-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .us-toolbar-actions {
    justify-content: flex-end;
  }
}
@media (max-width: 760px) {
  .us-filter-group {
    grid-template-columns: 1fr;
  }
  .us-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .us-toolbar-actions .us-btn {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .us-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- organization configuration (.oc-) ---- */
.oc-page {
  color: var(--jr-text);
}
.oc-page-head {
  margin: 5px 0 19px;
}
.oc-page-head h1 {
  margin: 0;
  color: #07150f;
  font-size: 20px;
  font-weight: 850;
  line-height: 26px;
}
.oc-page-head p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 16px;
}
.oc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.oc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  padding: 10px 14px;
  border: 1px solid rgba(22, 101, 52, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .82);
}
.oc-stat-label {
  color: var(--jr-muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.oc-stat-value {
  color: #07150f;
  font-size: 20px;
  font-weight: 850;
  line-height: 26px;
}
.oc-toolbar-left {
  display: flex;
  flex: 1 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.oc-search-input {
  flex: 1 1;
  min-height: 27px;
  max-width: 260px;
  padding: 4px 10px;
  border: 1px solid rgba(22, 101, 52, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .82);
  color: #07150f;
  font-size: 11.5px;
}
.oc-search-input::placeholder {
  color: var(--jr-muted);
}
.oc-toolbar-actions {
  display: flex;
  gap: 8px;
}
.oc-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid rgba(22, 101, 52, .12);
}
.oc-tab {
  min-width: 178px;
  padding: 0 14px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  text-align: left;
}
.oc-tab:hover {
  color: #07150f;
}
.oc-tab.is-active {
  border-bottom-color: var(--jr-green);
  color: var(--jr-green);
}
.oc-company-panel {
  max-width: 680px;
  padding-top: 22px;
}
.oc-company-panel > .stack {
  gap: 0;
}
.oc-company-panel .page-head {
  display: none;
}
.oc-company-panel .card {
  max-width: 640px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.oc-company-panel .row {
  align-items: flex-start;
}
.oc-company-panel label {
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.oc-company-panel input,
.oc-company-panel select {
  min-height: 32px;
  border-color: rgba(22, 101, 52, .13);
  background: rgba(255, 255, 255, .78);
  color: #07150f;
  font-size: 12px;
}
.oc-company-panel input:disabled,
.oc-company-panel select:disabled {
  color: #07150f;
  opacity: 1;
}
.oc-structure-panel {
  padding-top: 16px;
}
.oc-structure-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.oc-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(22, 101, 52, .12);
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
}
.oc-view-switch button {
  min-height: 24px;
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}
.oc-view-switch button.is-active {
  background: #fff;
  color: var(--jr-green);
  box-shadow: 0 1px 2px rgba(13, 43, 30, .08);
}
.oc-btn {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(22, 101, 52, .14);
  border-radius: 6px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  line-height: 15px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.oc-btn:hover {
  border-color: rgba(0, 153, 102, .26);
  background: #f8faf9;
  color: var(--jr-green);
}
.oc-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.oc-btn-primary {
  border-color: rgba(0, 153, 102, .28);
  background: var(--jr-green);
  color: #fff;
}
.oc-btn-primary:hover {
  border-color: var(--jr-green);
  background: #00845d;
  color: #fff;
}
.oc-btn-secondary {
  background: #fff;
}
.oc-btn-danger {
  border-color: rgba(220, 38, 38, .18);
  color: #dc2626;
}
.oc-btn-danger:hover {
  border-color: rgba(220, 38, 38, .28);
  background: #fef2f2;
  color: #b91c1c;
}
.oc-empty {
  margin: 16px 0;
  color: var(--jr-muted);
  font-size: 11.25px;
}
.oc-list-card,
.oc-chart-card {
  border: 1px solid rgba(22, 101, 52, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.oc-list-card {
  padding: 16px 20px 20px;
}
.oc-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(22, 101, 52, .12);
}
.oc-tree-main {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #52756a;
  font-size: 11.25px;
  line-height: 16px;
}
.oc-tree-main b {
  color: #07150f;
  font-weight: 850;
}
.oc-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eaf2ef;
  color: #3b6c61;
  font-size: 10px;
  font-weight: 650;
  line-height: 14px;
}
.oc-badge-muted {
  background: #f1f3f5;
  color: #818b98;
}
.oc-tree-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.oc-chart-card {
  padding: 24px 22px 30px;
}
.oc-chart-viewport {
  overflow-x: auto;
  padding: 2px 2px 6px;
}
.oc-chart-forest {
  display: flex;
  min-width: max-content;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
}
.oc-chart-node {
  --oc-branch: var(--jr-green);
  --oc-branch-soft: rgba(0, 153, 102, .2);
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.oc-tone-0 {
  --oc-branch: #009966;
  --oc-branch-soft: rgba(0, 153, 102, .2);
}
.oc-tone-1 {
  --oc-branch: #155dfc;
  --oc-branch-soft: rgba(21, 93, 252, .18);
}
.oc-tone-2 {
  --oc-branch: #d97706;
  --oc-branch-soft: rgba(217, 119, 6, .2);
}
.oc-tone-3 {
  --oc-branch: #7c3aed;
  --oc-branch-soft: rgba(124, 58, 237, .18);
}
.oc-tone-4 {
  --oc-branch: #0d9488;
  --oc-branch-soft: rgba(13, 148, 136, .2);
}
.oc-tone-5 {
  --oc-branch: #db2777;
  --oc-branch-soft: rgba(219, 39, 119, .18);
}
.oc-chart-box-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.oc-chart-node.has-children > .oc-chart-box-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 18px;
  background: var(--oc-branch-soft);
}
.oc-chart-box {
  display: block;
  width: 214px;
  min-height: 112px;
  padding: 12px 13px;
  border: 1px solid rgba(22, 101, 52, .13);
  border-top: 3px solid var(--oc-branch);
  border-radius: 8px;
  background: #fff;
  color: #07150f;
  font: inherit;
  text-align: left;
  box-shadow: 0 5px 16px rgba(13, 43, 30, .06);
}
button.oc-chart-box {
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
button.oc-chart-box:hover {
  border-color: var(--oc-branch);
  box-shadow: 0 8px 22px rgba(13, 43, 30, .1);
  transform: translateY(-1px);
}
.oc-chart-box.is-inactive {
  opacity: .55;
}
.oc-chart-title {
  color: #07150f;
  font-size: 13px;
  font-weight: 850;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.oc-chart-code {
  margin-top: 2px;
  color: var(--jr-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  overflow-wrap: anywhere;
}
.oc-chart-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 9px;
  color: var(--jr-muted);
  font-size: 10.5px;
  line-height: 14px;
}
.oc-chart-meta strong {
  color: #07150f;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.oc-chart-children {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 36px;
}
.oc-chart-children::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 107px;
  right: 107px;
  height: 1px;
  background: var(--oc-branch-soft);
}
.oc-chart-child {
  position: relative;
}
.oc-chart-child::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 1px;
  height: 18px;
  background: var(--oc-branch-soft);
}
/* Đơn vị con trong 1 cột khối — danh sách dọc theo design tab "Cơ cấu tổ chức". */
.oc-chart-unitlist {
  display: flex;
  flex-direction: column;
  width: 214px;
  margin-top: 10px;
  gap: 6px;
}
.oc-chart-unit {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(22, 101, 52, .11);
  border-radius: 7px;
  background: #fbfdfc;
  color: #07150f;
  cursor: default;
  font: inherit;
  font-size: 10.75px;
  line-height: 14px;
  text-align: left;
}
button.oc-chart-unit {
  cursor: pointer;
}
button.oc-chart-unit:hover {
  border-color: var(--oc-branch);
  background: #fff;
}
.oc-chart-unit.is-inactive {
  opacity: .55;
}
.oc-chart-unit-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--oc-branch);
}
.oc-chart-unit-name {
  flex: 1 1;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-chart-unit-meta {
  flex-shrink: 0;
  color: var(--jr-muted);
  font-size: 9.5px;
}
@media (max-width: 900px) {
  .oc-structure-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .oc-view-switch {
    align-self: flex-start;
  }
  .oc-chart-card {
    padding: 18px 14px 22px;
  }
  .oc-chart-forest {
    justify-content: flex-start;
  }
}
@media (max-width: 680px) {
  .oc-tabs {
    overflow-x: auto;
  }
  .oc-tab {
    min-width: 154px;
  }
  .oc-company-panel .row {
    flex-direction: column;
  }
  .oc-company-panel .row > div {
    width: 100%;
  }
  .oc-tree-row {
    grid-template-columns: 1fr;
  }
  .oc-tree-actions {
    justify-content: flex-start;
  }
}

/* ---- frameworks screen (design 2026-07-06) ---- */
.fw-page {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 15px;
}
.fw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.fw-kpi-card {
  min-height: 79px;
  padding: 15px 15px 13px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.fw-kpi-label {
  display: block;
  color: var(--jr-muted);
  font-size: 11.25px;
  font-weight: 500;
  line-height: 15px;
}
.fw-kpi-value {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  font-weight: 850;
  line-height: 28px;
  letter-spacing: 0;
}
.fw-kpi-value.is-dark {
  color: #07150f;
}
.fw-kpi-value.is-blue {
  color: #155dfc;
}
.fw-kpi-value.is-purple {
  color: #7c3aed;
}
.fw-kpi-value.is-green {
  color: var(--jr-green);
}
.fw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fw-intro {
  margin: 0;
  color: #3b6c61;
  font-size: 11.25px;
  line-height: 15px;
}
.fw-btn {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--jr-border);
  border-radius: 7.5px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11.25px;
  font-weight: 750;
  line-height: 15px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.fw-btn:hover {
  border-color: rgba(0, 153, 102, .26);
  background: #f7faf8;
  color: var(--jr-green);
}
.fw-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.fw-btn svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.fw-btn-primary {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: #fff;
}
.fw-btn-primary:hover {
  border-color: #00845d;
  background: #00845d;
  color: #fff;
}
.fw-table-card {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.fw-table-wrap {
  overflow-x: auto;
}
.fw-col-framework {
  width: 36%;
}
.fw-col-category {
  width: 125px;
}
.fw-col-count {
  width: 115px;
}
.fw-col-progress {
  width: 210px;
}
.fw-col-follow {
  width: 180px;
}
.fw-col-actions {
  width: 135px;
}
.fw-framework-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.fw-framework-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.fw-framework-desc {
  display: -webkit-box;
  overflow: hidden;
  max-width: 430px;
  color: #3b6c61;
  font-size: 10.75px;
  line-height: 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.fw-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 9.75px;
  font-weight: 750;
  line-height: 13px;
  white-space: nowrap;
}
.fw-badge-blue {
  background: #dbeafe;
  color: #155dfc;
}
.fw-badge-purple {
  background: #f3e8ff;
  color: #7c3aed;
}
.fw-count-cell {
  font-weight: 750;
}
.fw-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #52756a;
  font-size: 10.75px;
  line-height: 14px;
}
.fw-progress-track {
  width: 70px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0eb;
}
.fw-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jr-bright);
}
.fw-progress-value {
  min-width: 32px;
}
.fw-follow-btn {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: #f3f5f6;
  color: #667985;
  cursor: pointer;
  font-size: 10.25px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
  transition: background .12s, color .12s, opacity .12s;
}
.fw-follow-btn:hover {
  background: #e8f0eb;
  color: var(--jr-green);
}
.fw-follow-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.fw-follow-btn svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.fw-follow-btn.is-on {
  background: #d9faea;
  color: var(--jr-green);
}
.fw-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: 100%;
}
.fw-icon-btn {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #52756a;
  cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
}
.fw-icon-btn:hover {
  background: #edf5f1;
  color: var(--jr-green);
}
.fw-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.fw-icon-btn svg {
  width: 13px;
  height: 13px;
}
.fw-icon-danger {
  color: #ff3347;
}
.fw-icon-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.fw-empty {
  color: var(--jr-muted);
  text-align: center;
}
@media (max-width: 900px) {
  .fw-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fw-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .fw-toolbar .fw-btn {
    align-self: flex-start;
  }
}
@media (max-width: 560px) {
  .fw-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- metrics list refresh (design 2026-07-06) ---- */
.ml-page {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ml-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 26px;
}
.ml-head p {
  margin: 0;
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.ml-btn {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--jr-border);
  border-radius: 6px;
  background: #fff;
  color: var(--jr-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  line-height: 15px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ml-btn:hover {
  border-color: rgba(0, 153, 102, .28);
  background: #f7faf8;
  color: var(--jr-green);
}
.ml-btn-primary {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: #fff;
}
.ml-btn-primary:hover {
  border-color: #00845d;
  background: #00845d;
  color: #fff;
}
.ml-btn-plus {
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.ml-filter-card {
  display: grid;
  min-height: 70px;
  grid-template-columns: minmax(300px, 1fr) minmax(160px, .3fr) minmax(170px, .32fr);
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 19px;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.ml-search-field,
.ml-field {
  min-width: 0;
  margin: 0;
}
.ml-search-field {
  position: relative;
}
.ml-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #6b8a81;
  border-radius: 999px;
  pointer-events: none;
  transform: translateY(-58%);
}
.ml-search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: #6b8a81;
  transform: rotate(45deg);
  transform-origin: left center;
}
.ml-table-card {
  overflow: hidden;
  border: 1px solid var(--jr-border);
  border-radius: 11.5px;
  background: #fff;
  box-shadow: none;
}
.ml-table-wrap {
  overflow-x: auto;
}
.ml-col-code {
  width: 125px;
}
.ml-col-name {
  width: 270px;
}
.ml-col-answer {
  width: 105px;
}
.ml-col-esg {
  width: 60px;
}
.ml-col-standards {
  width: 195px;
}
.ml-col-department {
  width: 175px;
}
.ml-col-frequency {
  width: 110px;
}
.ml-col-actions {
  width: 140px;
}
.ml-click-row {
  cursor: pointer;
}
.ml-click-row:focus {
  outline: none;
}
.ml-click-row:focus-visible td {
  box-shadow: inset 0 0 0 2px rgba(0, 188, 125, .22);
}
.ml-code {
  display: inline-flex;
  max-width: 100%;
  min-height: 18px;
  align-items: center;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #d9faea;
  color: #007a55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 850;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-name-link {
  display: -webkit-box;
  overflow: hidden;
  color: #07150f;
  font-size: 11.25px;
  font-weight: 850;
  line-height: 15px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ml-name-link:hover {
  color: var(--jr-green);
}
.ml-department {
  color: #2f675d;
  overflow-wrap: anywhere;
}
.ml-muted {
  color: #83958f;
}
.ml-badge,
.ml-standard-badge,
.ml-frequency-badge,
.ml-system-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 9.75px;
  font-weight: 750;
  line-height: 13px;
  white-space: nowrap;
}
.ml-answer-badge,
.ml-frequency-badge,
.ml-system-badge {
  background: #f1f3f5;
  color: #6b7886;
}
.ml-esg-badge {
  min-width: 20px;
  padding-right: 6px;
  padding-left: 6px;
}
.ml-esg-e {
  background: #c9f9df;
  color: #00845d;
}
.ml-esg-s {
  background: #dbeafe;
  color: #155dfc;
}
.ml-esg-g {
  background: #e8f0eb;
  color: #3b6c61;
}
.ml-badge-list {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
}
.ml-standard-badge {
  max-width: 110px;
  overflow: hidden;
  border-radius: 4px;
  background: #eaf2ef;
  color: #3b6c61;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
}
.ml-more {
  color: #3b6c61;
  font-size: 10px;
  font-weight: 750;
  line-height: 18px;
  white-space: nowrap;
}
.ml-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.ml-action-btn {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--jr-border);
  border-radius: 6px;
  background: #fff;
  color: #52756a;
  cursor: pointer;
  font-size: 10.75px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}
.ml-action-btn:hover {
  border-color: rgba(0, 153, 102, .3);
  background: #f7faf8;
  color: var(--jr-green);
}
.ml-action-danger {
  border-color: rgba(220, 38, 38, .24);
  color: #dc2626;
}
.ml-action-danger:hover {
  border-color: rgba(220, 38, 38, .35);
  background: #fef2f2;
  color: #b91c1c;
}
.ml-table-footer {
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid rgba(22, 101, 52, .09);
  color: var(--jr-muted);
  font-size: 11.25px;
  line-height: 15px;
}
.ml-empty {
  height: 78px;
  color: var(--jr-muted);
  text-align: center;
}
.ml-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1080px) {
  .ml-filter-card {
    grid-template-columns: 1fr;
  }
  .ml-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- System Admin /tenants design match ---- */
.system-shell:has(.sa-page) {
  background: #f0f5f2;
  color: #0f1f17;
  font-size: 11.25px;
}

.system-shell:has(.sa-page) .system-topbar {
  height: 56px;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid rgba(22, 101, 52, 0.1);
}

.system-shell:has(.sa-page) .system-brand {
  gap: 10px;
}

.system-shell:has(.sa-page) .system-brand-mark {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #009966;
  color: transparent;
  font-size: 0;
}

.system-shell:has(.sa-page) .system-brand-mark::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 11px;
  height: 8px;
  border: 1.6px solid #fff;
  border-left-color: transparent;
  border-radius: 999px 999px 999px 2px;
  transform: rotate(-35deg);
}

.system-shell:has(.sa-page) .system-brand-mark::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 13px;
  width: 7px;
  height: 1.5px;
  border-radius: 999px;
  background: #fff;
  transform: rotate(-35deg);
}

.system-shell:has(.sa-page) .system-brand-name {
  color: #0f1f17;
  font-size: 13px;
  font-weight: 750;
  line-height: 17px;
}

.system-shell:has(.sa-page) .system-brand-sub {
  color: #52756a;
  font-size: 10.5px;
  line-height: 14px;
}

.system-shell:has(.sa-page) .system-user {
  gap: 0;
}

.system-shell:has(.sa-page) .system-user .tenant-alert,
.system-shell:has(.sa-page) .system-user .btn {
  display: none;
}

.system-shell:has(.sa-page) .system-avatar {
  width: 26px;
  height: 26px;
  background: #009966;
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
}

.system-shell:has(.sa-page) .system-content {
  width: min(915px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 21px 0 48px;
}

.sa-page {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.sa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.sa-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(22, 101, 52, 0.11);
  border-radius: 10px;
  box-shadow: none;
}

.sa-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: #d0fae5;
  color: #009966;
}

.sa-kpi-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.sa-kpi-label {
  color: #52756a;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 15px;
}

.sa-kpi-value {
  margin-top: 1px;
  color: #0f1f17;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 750;
  line-height: 26px;
  letter-spacing: 0;
}

.sa-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 101, 52, 0.11);
  border-radius: 11px;
  box-shadow: none;
}

.sa-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 53px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(22, 101, 52, 0.1);
}

.sa-card-head h2 {
  margin: 0;
  color: #0f1f17;
  font-size: 13px;
  font-weight: 750;
  line-height: 19px;
}

.sa-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-create-btn {
  min-height: 27px;
  padding: 6px 11px;
  border-color: #009966;
  border-radius: 6px;
  background: #009966;
  color: #fff;
  font-size: 11.25px;
  font-weight: 700;
  line-height: 15px;
}

.sa-create-btn:hover {
  background: #00845d;
  border-color: #00845d;
}

.sa-create-btn span {
  font-size: 14px;
  line-height: 10px;
}

.sa-search {
  position: relative;
}

.sa-search input {
  width: 180px;
  min-height: 28px;
  padding: 6px 10px 6px 31px;
  border: 1px solid rgba(22, 101, 52, 0.15);
  border-radius: 7px;
  background: rgba(248, 250, 249, 0.95);
  color: #0f1f17;
  font-size: 11.25px;
  line-height: 15px;
}

.sa-search input::placeholder {
  color: #7a9188;
}

.sa-search::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 1.5px solid #52756a;
  border-radius: 999px;
  pointer-events: none;
}

.sa-search::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 6px;
  height: 1.5px;
  background: #52756a;
  border-radius: 999px;
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}

.sa-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sa-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
}

.sa-col-company { width: 150px; }
.sa-col-tax { width: 100px; }
.sa-col-industry { width: 135px; }
.sa-col-contact { width: 200px; }
.sa-col-status { width: 95px; }
.sa-col-progress { width: 140px; }
.sa-col-action { width: 95px; }

.sa-table th,
.sa-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22, 101, 52, 0.055);
  color: #0f1f17;
  font-size: 11.25px;
  line-height: 15px;
  vertical-align: middle;
}

.sa-table th {
  height: 49px;
  background: #f8faf9;
  color: #52756a;
  font-size: 10.25px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sa-table th:nth-child(5),
.sa-table th:nth-child(6) {
  white-space: normal;
}

.sa-table tbody tr {
  min-height: 68px;
}

.sa-table tbody tr:hover {
  background: #fbfdfc;
}

.sa-table tbody tr:last-child td {
  border-bottom: 0;
}

.sa-tenant-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sa-tenant-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: #c9f7df;
  color: #009966;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
}

.sa-tenant-name {
  display: block;
  color: #0f1f17;
  font-size: 11.75px;
  font-weight: 750;
  line-height: 14.5px;
}

.sa-tenant-sub {
  display: block;
  margin-top: 1px;
  color: #52756a;
  font-size: 10.25px;
  line-height: 14px;
}

.sa-table .muted {
  color: #52756a;
}

.sa-table .badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.25px;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap;
}

.sa-table .badge-green {
  background: #dcfce8;
  color: #009966;
}

.sa-table .badge-amber {
  background: #fff1cc;
  color: #f59e0b;
}

.sa-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-progress {
  position: relative;
  width: 64px;
  height: 5px;
  flex: 0 0 64px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eee9;
}

.sa-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #00bc7d;
}

.sa-progress-value {
  color: #52756a;
  font-size: 10.25px;
  line-height: 15px;
  white-space: nowrap;
}

.sa-enter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #009966;
  cursor: pointer;
  font: inherit;
  font-size: 11.25px;
  font-weight: 750;
  line-height: 15px;
  white-space: nowrap;
}

.sa-enter:hover {
  color: #007a55;
}

.sa-enter:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 980px) {
  .system-shell:has(.sa-page) .system-content {
    width: calc(100vw - 30px);
    padding-top: 18px;
  }

  .sa-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sa-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .sa-actions {
    justify-content: space-between;
  }

  .sa-search {
    flex: 1 1;
  }

  .sa-search input {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .system-shell:has(.sa-page) .system-topbar {
    padding: 0 14px;
  }

  .system-shell:has(.sa-page) .system-content {
    width: calc(100vw - 24px);
    padding-top: 14px;
  }

  .sa-kpi-grid {
    grid-template-columns: 1fr;
  }

  .sa-actions {
    flex-direction: column;
  }

  .sa-create-btn,
  .sa-search,
  .sa-search input {
    width: 100%;
  }
}

.fc-formula-trigger {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  background: #faf7ff;
  color: #26183f;
  cursor: pointer;
  font: inherit;
}

.fc-formula-trigger:hover {
  border-color: #c4b5fd;
  background: #f3edff;
}

.fc-formula-trigger strong {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-formula-trigger span {
  display: inline-flex;
  flex: none;
  padding: 2px 6px;
  border-radius: 5px;
  background: #eee7ff;
  color: #6d28d9;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 12px;
  white-space: nowrap;
}

.fc-period-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.fc-period-summary strong {
  overflow: hidden;
  color: var(--jr-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 850;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-period-summary span {
  color: var(--jr-muted);
  font-size: 10.5px;
  line-height: 14px;
}

.fc-modal-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
}

.fc-formula-modal {
  display: flex;
  width: min(480px, calc(100vw - 32px));
  max-height: min(828px, calc(100vh - 48px));
  overflow: hidden;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}

.fc-formula-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e3eee8;
}

.fc-formula-head h3 {
  margin: 4px 0 3px;
  color: #18251f;
  font-size: 13.25px;
  font-weight: 850;
  line-height: 18px;
}

.fc-eyebrow {
  display: block;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 14px;
}

.fc-period-picker {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: #52756a;
  font-size: 11px;
  line-height: 15px;
}

.fc-period-picker select {
  min-height: 24px;
  padding: 2px 22px 2px 7px;
  border: 1px solid #d9e8e1;
  border-radius: 6px;
  background: #f8fbfa;
  color: #355f54;
  font-size: 10.5px;
}

.fc-close {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #52756a;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.fc-close:hover {
  background: #f0f7f4;
  color: #18392f;
}

.fc-formula-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding: 18px 22px 22px;
}

.fc-formula-box {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid #c8b7ff;
  border-radius: 10px;
  background: #f4f0ff;
}

.fc-formula-box b,
.fc-section h4,
.fc-result-box > span {
  margin: 0;
  color: #6d28d9;
  font-size: 10.25px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 14px;
}

.fc-formula-box code {
  color: #4c1d95;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 18px;
  white-space: pre-wrap;
}

.fc-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-section h4 {
  color: #18392f;
}

.fc-upload-box {
  display: flex;
  min-height: 64px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed #cfe1d8;
  border-radius: 8px;
  background: #fbfdfc;
  color: #355f54;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.fc-upload-box:hover {
  border-color: #99f6cb;
  background: #f0fdf7;
}

.fc-upload-box:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.fc-upload-box strong {
  color: #18392f;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
}

.fc-upload-box span {
  color: #52756a;
  font-size: 10.5px;
  line-height: 14px;
}

.fc-variable-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fc-variable-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 13px 12px;
  border: 1px solid #d9e8e1;
  border-radius: 10px;
  background: #fbfdfc;
}

.fc-variable-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fc-variable-top strong {
  color: #18392f;
  font-size: 11.25px;
  font-weight: 850;
  line-height: 15px;
}

.fc-badge-green,
.fc-badge-blue {
  display: inline-flex;
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 13px;
  white-space: nowrap;
}

.fc-badge-green {
  background: #d9fbe8;
  color: #009966;
}

.fc-badge-blue {
  background: #dbeafe;
  color: #2563eb;
}

.fc-variable-source {
  color: #52756a;
  font-size: 10.5px;
  line-height: 14px;
}

.fc-input-unit,
.fc-period-input {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.fc-input-unit input,
.fc-period-input input {
  min-width: 0;
  height: 36px;
  flex: 1 1 auto;
  padding: 7px 10px;
  border: 1px solid #d9e8e1;
  border-radius: 8px;
  background: #fff;
  color: #18392f;
  font-size: 12px;
  line-height: 16px;
}

.fc-input-unit span,
.fc-period-input span {
  flex: none;
  color: #52756a;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

.fc-result-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 10px;
  background: #1e2a3d;
  color: #e5edf7;
}

.fc-result-box > span {
  color: #9aa7bb;
}

.fc-result-box code {
  color: #dbe6f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 17px;
  white-space: pre-wrap;
}

.fc-result-box strong {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 900;
  line-height: 26px;
}

.fc-result-box em {
  color: #9aa7bb;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.fc-final-input {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.fc-final-input > span {
  color: #52756a;
  font-size: 10.75px;
  line-height: 14px;
}

.fc-formula-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid #e3eee8;
  background: #fff;
}

.fc-period-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px 42px;
  background: #fbfdfc;
}

.fc-period-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fc-period-line {
  display: grid;
  grid-template-columns: 140px minmax(160px, 1fr) 72px 115px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  min-height: 36px;
}

.fc-period-name {
  color: #18392f;
  font-size: 11.25px;
  font-weight: 700;
  line-height: 15px;
}

.fc-period-input input {
  height: 30px;
  max-width: 150px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
}

.fc-period-error {
  margin: 0;
  font-size: 10.5px;
  line-height: 14px;
}

.fc-show-more {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #009966;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
}

.fc-show-more:hover {
  color: #007a55;
}

@media (max-width: 720px) {
  .fc-modal-backdrop {
    padding: 12px;
  }

  .fc-formula-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .fc-formula-head,
  .fc-formula-body,
  .fc-formula-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .fc-formula-footer {
    flex-wrap: wrap;
  }

  .fc-period-panel {
    padding-left: 14px;
  }

  .fc-period-line {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
    padding: 8px 0;
  }
}

.fc-choice-stack {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.fc-scale-chips,
.fc-boolean-chips {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.fc-round-chip {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d9e8e1;
  border-radius: 999px;
  background: #fff;
  color: #52756a;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.fc-round-chip:hover:not(:disabled),
.fc-round-chip.fc-active {
  border-color: #007a55;
  background: #007a55;
  color: #fff;
}

.fc-round-chip:disabled,
.fc-boolean-chip:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.fc-selected-label {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: #52756a;
  font-size: 10.5px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-boolean-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #d9e8e1;
  border-radius: 999px;
  background: #fff;
  color: #52756a;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 14px;
  white-space: nowrap;
}

.fc-boolean-chip:hover:not(:disabled) {
  border-color: #009966;
  color: #007a55;
}

.fc-boolean-chip.fc-yes.fc-active {
  border-color: #009966;
  background: #009966;
  color: #fff;
}

.fc-boolean-chip.fc-no.fc-active {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b91c1c;
}

.fc-saved-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d9fbe8;
  color: #009966;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

/* ---- Shell ---- */
.dz-shell { display: flex; min-height: 100vh; background: var(--dz-bg); color: var(--dz-text); font-family: Inter, 'Segoe UI', Arial, sans-serif; }
.dz-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; background: #ffffff; border-right: 1px solid #e5eaf2; }
.dz-brand { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid #e5eaf2; }
.dz-brand-mark { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #e9fbf4 0%, #b8ead4 100%); }
.dz-brand-name { font-size: 14px; font-weight: 800; line-height: 1.2; color: #0f1f35; }
.dz-brand-sub { font-size: 12px; margin-top: 2px; color: #8fa3b8; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-nav { flex: 1 1; padding: 12px; overflow-y: auto; }
.dz-nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: none; background: transparent; color: #4b6280; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: background .12s, color .12s; margin-bottom: 2px; }
.dz-nav-item:hover { background: #f4f8fc; }
.dz-nav-item.active { background: #f0faf6; color: var(--dz-green); }
.dz-nav-item .dz-nav-ic { display: inline-flex; color: #8fa3b8; flex-shrink: 0; }
.dz-nav-item.active .dz-nav-ic { color: var(--dz-green); }
.dz-nav-item .dz-nav-chev { margin-left: auto; color: #8fa3b8; transition: transform .2s; }
.dz-nav-item .dz-nav-chev.closed { transform: rotate(-90deg); }
.dz-substeps { margin: 4px 0 8px 16px; padding-left: 16px; border-left: 2px solid #d9eee6; }
.dz-substep { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 4px; border: none; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.dz-substep.active { background: #e9f7f0; }
.dz-substep-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: #d1e4f0; color: #6b87a0; }
.dz-substep.active .dz-substep-num, .dz-substep.done .dz-substep-num { background: var(--dz-green); color: #fff; }
.dz-substep-label { font-size: 12px; line-height: 1.35; color: #7a96ad; font-weight: 500; }
.dz-substep.active .dz-substep-label { color: var(--dz-green); font-weight: 700; }
.dz-substep.done .dz-substep-label { color: #4b6280; }
.dz-nav-subitem { display: block; padding: 8px 12px 8px 40px; border-radius: 10px; font-size: 13px; color: #4b6280; margin-bottom: 1px; }
.dz-nav-subitem:hover { background: #f4f8fc; }
.dz-nav-subitem.active { background: #f0faf6; color: var(--dz-green); font-weight: 600; }
.dz-nav-grouphead { padding: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8fa3b8; }
.dz-promo { margin: 0 12px 12px; border-radius: 16px; padding: 16px; text-align: center; background: linear-gradient(160deg, #e6f9f1 0%, #c8f0df 100%); border: 1px solid #a8e5c8; }
.dz-promo-ic { display: flex; justify-content: center; margin-bottom: 10px; }
.dz-promo-ic > span { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(7, 151, 102, 0.12); }
.dz-promo-text { font-size: 12px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: #0f4a30; }
.dz-promo-more { font-size: 12px; font-weight: 600; color: var(--dz-green); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.dz-sidefoot { padding: 0 12px 16px; }
.dz-sidefoot-user { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; }
.dz-sidefoot-email { font-size: 12px; color: #4b6280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-sidefoot-role { font-size: 11px; color: #8fa3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--dz-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.dz-logout { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; color: #8fa3b8; font-size: 14px; font-weight: 600; cursor: pointer; }
.dz-logout:hover { background: #fef2f2; color: #dc2626; }
.dz-sidefoot-link { display: block; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #4b6280; border-radius: 10px; }
.dz-sidefoot-link:hover { background: #f4f8fc; }

/* ---- Main + topbar ---- */
.dz-main { flex: 1 1; display: flex; flex-direction: column; min-width: 0; }
.dz-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 28px; background: #fff; border-bottom: 1px solid var(--dz-border); }
.dz-topbar h1 { margin: 0; font-size: 20px; font-weight: 900; color: var(--dz-text); }
.dz-topbar-sub { margin: 2px 0 0; font-size: 12px; color: #45617f; }
.dz-topbar-right { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-shrink: 0; }
.dz-period { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid var(--dz-border); border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--dz-text); }
.dz-period select { border: none; padding: 0; width: auto; max-width: 220px; font-size: 12px; font-weight: 700; color: var(--dz-text); background: transparent; }
.dz-period select:focus { box-shadow: none; }
.dz-status-badge { padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; background: #fff3dc; color: #bf6a00; white-space: nowrap; }
.dz-status-badge.approved { background: var(--dz-green-soft); color: #0b815b; }
.dz-iconbtn { width: 32px; height: 32px; border-radius: 12px; border: 1px solid var(--dz-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #6b7f94; cursor: pointer; }
.dz-iconbtn:hover { background: #f0f6ff; }
.dz-content { flex: 1 1; padding: 20px 28px; overflow: auto; }

/* ---- Blocks dùng chung (card/nút/badge/bảng theo design) ---- */
.dz-card { background: #fff; border: 1px solid var(--dz-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dz-card-pad { padding: 20px; }
.dz-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; border: 1px solid var(--dz-border); background: #fff; color: #1d4ed8; font-size: 13px; font-weight: 700; cursor: pointer; }
.dz-btn:hover { background: #eff6ff; }
.dz-btn:disabled { opacity: .5; cursor: not-allowed; }
.dz-btn-primary { background: var(--dz-green); border-color: var(--dz-green); color: #fff; }
.dz-btn-primary:hover { background: #06855a; }
.dz-btn-sm { padding: 8px 12px; font-size: 12px; border-radius: 10px; }
.dz-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.dz-badge-high { background: #fee2e2; color: #b91c1c; }
.dz-badge-mid { background: #fef3c7; color: #b45309; }
.dz-badge-low { background: #dbeafe; color: #1d4ed8; }
.dz-pill-e { background: #dcfce7; color: var(--dz-e); }
.dz-pill-s { background: #dbeafe; color: var(--dz-s); }
.dz-pill-g { background: #ede9fe; color: var(--dz-g); }
.dz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dz-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 12px; background: #f7faff; border-bottom: 1px solid var(--dz-border); color: #47627d; font-weight: 600; }
.dz-table td { padding: 13px 12px; border-bottom: 1px solid var(--dz-border); vertical-align: middle; }
.dz-table tr:hover td { background: #f9fbfe; }
.dz-stat { display: flex; align-items: center; gap: 12px; padding: 16px; }
.dz-stat-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.dz-stat-label { font-size: 12px; font-weight: 600; color: var(--dz-muted); }
.dz-stat-value { font-size: 20px; font-weight: 900; color: var(--dz-text); line-height: 1.2; }
.dz-stat-sub { font-size: 11.5px; color: var(--dz-muted); }
.dz-progressbar { height: 10px; border-radius: 999px; background: #f0f4f8; overflow: hidden; }
.dz-progressbar > span { display: block; height: 100%; border-radius: 999px; background: var(--dz-green); transition: width .2s; }
.dz-suggest { background: var(--dz-green-soft); border: 1px solid var(--dz-green-border); border-radius: 12px; padding: 14px; }
.dz-suggest-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; margin-bottom: 8px; color: var(--dz-text); }
.dz-suggest ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.55; color: var(--dz-text); }
.dz-suggest li { margin-bottom: 6px; }

/* ---- Step progress ngang (wizard) ---- */
.dz-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
.dz-steps-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dz-steps-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid #aebed0; background: #fff; color: #53697f; }
.dz-steps-item.active .dz-steps-num, .dz-steps-item.done .dz-steps-num { background: var(--dz-green); border-color: var(--dz-green); color: #fff; }
.dz-steps-label { font-size: 12px; font-weight: 600; white-space: nowrap; color: #4a5f79; }
.dz-steps-item.active .dz-steps-label { color: var(--dz-green); }
.dz-steps-item.done .dz-steps-label { color: var(--dz-text); }
.dz-steps-chev { color: #bcc8d6; flex-shrink: 0; }

/* ---- Layout helpers ---- */
.dz-row { display: flex; gap: 20px; align-items: flex-start; }
.dz-col-main { flex: 1 1; min-width: 0; }
.dz-aside { flex-shrink: 0; }
.dz-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; gap: 16px; }
.dz-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; gap: 14px; }

/* ---- Wizard B1: goal cards ---- */
.dz-goalcard { position: relative; min-height: 130px; border: 1px solid var(--dz-border); border-radius: 12px; padding: 16px 16px 16px 70px; cursor: pointer; transition: border-color .12s, background .12s; background: #fff; }
.dz-goalcard:hover { border-color: #55c79c; }
.dz-goalcard.selected { border-color: #55c79c; background: linear-gradient(180deg, #f3fff9 0%, #ffffff 100%); }
.dz-goalcard-check { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border: 2px solid #cbd7e4; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #fff; color: #fff; }
.dz-goalcard.selected .dz-goalcard-check { background: var(--dz-green); border-color: var(--dz-green); }
.dz-goalcard-ic { position: absolute; left: 14px; top: 16px; width: 44px; height: 44px; border-radius: 12px; background: #eef8f3; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.dz-goalcard h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--dz-text); }
.dz-goalcard p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dz-muted); }
.dz-selbanner { margin-top: 16px; background: #f3f7ff; color: #1156b3; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; }
.dz-selbanner button { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: inherit; font-size: 12px; }
.dz-selbanner button:hover { color: #dc2626; }

/* ---- Checkbox vuông xanh dùng trong bảng B3 ---- */
.dz-check { width: 20px; height: 20px; border: 2px solid #cbd7e4; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; color: #fff; flex-shrink: 0; transition: background .12s, border-color .12s; }
.dz-check.on { background: var(--dz-green); border-color: var(--dz-green); }

/* ---- B3 filter sidebar ---- */
.dz-filter { width: 200px; flex-shrink: 0; }
.dz-filter-head { font-size: 11.5px; font-weight: 700; color: var(--dz-muted); margin: 0 0 10px; }
.dz-filter-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: none; border-radius: 12px; margin-bottom: 6px; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; }
.dz-filter-btn:hover { background: #f0f6ff; }
.dz-filter-count { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #f0f4f8; color: #374151; }
.dz-filter-btn.on .dz-filter-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ---- B2: SDG grid + bảng hành động ---- */
.dz-sdg { height: 76px; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; color: #fff; font-size: 10px; font-weight: 900; line-height: 1.15; }
.dz-sdg b { font-size: 17px; line-height: 1; display: block; margin-bottom: 2px; }
.dz-act { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 7px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--dz-border); background: #fff; color: #1d4ed8; }
.dz-act-accept { border-color: #bfe6d5; background: #f5fffa; color: #0b815b; }
.dz-act-reject { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.dz-frame-tag { display: inline-block; background: var(--dz-green-soft); color: #0b815b; border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 600; margin: 1px 3px 1px 0; }

/* ---- textarea + search wizard ---- */
.dz-textarea { width: 100%; border: 1px solid var(--dz-border); border-radius: 12px; padding: 10px 12px; font-size: 13px; resize: none; font-family: inherit; color: var(--dz-text); }
.dz-textarea:focus { outline: none; border-color: var(--dz-green); box-shadow: none; }
.dz-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--dz-border); border-radius: 12px; padding: 8px 12px; background: #fff; }
.dz-search input { border: none; padding: 0; font-size: 12.5px; width: 140px; background: transparent; }
.dz-search input:focus { box-shadow: none; outline: none; }

/* ---- Bảng nhóm theo pillar (B3) ---- */
.dz-groupchip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.dz-tablewrap { border: 1px solid var(--dz-border); border-radius: 12px; overflow: hidden; }

/* ---- Responsive tối thiểu cho shell/wizard mới ---- */
@media (max-width: 1200px) {
  .dz-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .dz-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dz-row { flex-wrap: wrap; }
  .dz-aside { width: 100% !important; }
  .dz-filter { width: 100%; }
}
@media (max-width: 820px) {
  html,
  body { max-width: 100%; overflow-x: hidden; }
  .dz-shell { width: 100%; min-width: 0; flex-direction: column; overflow-x: hidden; }
  .dz-sidebar {
    width: 100%;
    max-width: 100vw;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid #e5eaf2;
    scrollbar-width: none;
  }
  .dz-sidebar::-webkit-scrollbar { display: none; }
  .dz-brand { flex: 0 0 auto; border-bottom: none; padding: 12px 16px; }
  .dz-nav {
    display: flex;
    width: max-content;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 8px;
    overflow: visible;
  }
  .dz-nav > div { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
  .dz-nav-item { width: auto; flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }
  .dz-nav-subitem { flex: 0 0 auto; padding: 10px 12px; white-space: nowrap; }
  .dz-nav-grouphead { display: none; }
  .dz-substeps, .dz-promo, .dz-sidefoot { display: none; }
  .dz-main { width: 100%; min-width: 0; }
  .dz-grid-4, .dz-grid-3 { grid-template-columns: 1fr; }
  .dz-topbar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px;
  }
  .dz-topbar-right {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-gap: 8px;
    gap: 8px;
    margin-top: 0;
  }
  .dz-period { width: 100%; min-width: 0; grid-column: 1 / -1; border-radius: 8px; }
  .dz-period select { min-width: 0; max-width: none; flex: 1 1; }
  .dz-status-badge { align-self: center; justify-self: start; border-radius: 8px; }
  .dz-iconbtn { border-radius: 8px; }
  .dz-content { padding: 14px 16px; }
}

/* ========================================================================== */
/* Metric assignments / RACI                                                  */
/* ========================================================================== */

.ma-page {
  display: flex;
  width: 100%;
  max-width: 1680px;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
  color: #10233f;
}

.ma-page button,
.ma-page input,
.ma-page select,
.ma-picker-dialog button,
.ma-picker-dialog input {
  font-family: inherit;
  letter-spacing: 0;
}

.ma-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.ma-page-title {
  min-width: 0;
}

.ma-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: #667b91;
  font-size: 11.5px;
  font-weight: 600;
}

.ma-breadcrumb span {
  color: #a7b5c4;
}

.ma-page-title h1 {
  margin: 0;
  color: #10233f;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
}

.ma-page-title p {
  margin: 4px 0 0;
  color: #61768c;
  font-size: 12.5px;
}

.ma-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  background: #fff;
  color: #24405e;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.ma-btn:hover:not(:disabled) {
  border-color: #9eb5cb;
  background: #f7faff;
}

.ma-btn:focus-visible,
.ma-icon-btn:focus-visible,
.ma-add-person:focus-visible,
.ma-assignee-chip button:focus-visible,
.ma-scope-switch button:focus-visible,
.ma-person-row:focus-visible {
  outline: 2px solid #079766;
  outline-offset: 2px;
}

.ma-btn:disabled,
.ma-icon-btn:disabled,
.ma-add-person:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.ma-btn-primary {
  border-color: #087b58;
  background: #087b58;
  color: #fff;
}

.ma-btn-primary:hover:not(:disabled) {
  border-color: #066b4c;
  background: #066b4c;
}

.ma-btn-secondary {
  background: #fff;
  color: #17375a;
}

.ma-wizard-link {
  flex: 0 0 auto;
  color: #075e49;
}

.ma-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #bde3d4;
  border-radius: 7px;
  background: #f1faf6;
  color: #126148;
}

.ma-info-banner > svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.ma-info-banner div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ma-info-banner strong {
  font-size: 12.5px;
}

.ma-info-banner span {
  color: #3f715f;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.ma-filter-band {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) minmax(170px, 1fr) minmax(140px, .75fr) minmax(170px, .9fr) minmax(220px, 1.35fr) auto;
  align-items: end;
  grid-gap: 10px;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  background: #fff;
}

.ma-filter-field {
  min-width: 0;
}

.ma-filter-field label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  color: #597087;
  font-size: 11px;
  font-weight: 650;
}

.ma-filter-field select {
  height: 36px;
  min-width: 0;
  padding: 7px 30px 7px 10px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  background-color: #fff;
  color: #183652;
  font-size: 12px;
  text-overflow: ellipsis;
}

.ma-filter-field select:focus,
.ma-table-search:focus-within,
.ma-search-field:focus-within {
  border-color: #079766;
  box-shadow: 0 0 0 3px rgba(7, 151, 102, .1);
  outline: none;
}

.ma-table-search,
.ma-search-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  background: #fff;
  color: #75899e;
}

.ma-table-search {
  height: 36px;
  margin: 0;
  padding: 0 9px;
}

.ma-table-search input,
.ma-search-field input {
  min-width: 0;
  flex: 1 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #173653;
  font-size: 12px;
  box-shadow: none;
}

.ma-table-search input:focus,
.ma-search-field input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.ma-table-search > button,
.ma-search-field > button,
.ma-action-error > button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #71869b;
  cursor: pointer;
}

.ma-table-search > button:hover,
.ma-search-field > button:hover {
  background: #eef3f8;
  color: #173653;
}

.ma-btn-clear {
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: #b42318;
  white-space: nowrap;
}

.ma-btn-clear:hover:not(:disabled) {
  border-color: #fecaca;
  background: #fff5f5;
}

.ma-action-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff5f5;
  color: #b42318;
  font-size: 12px;
}

.ma-action-error span {
  min-width: 0;
  flex: 1 1;
  overflow-wrap: anywhere;
}

.ma-query-state {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  background: #fff;
  color: #5f758b;
}

.ma-query-state.is-error {
  border-color: #fecaca;
  color: #b42318;
}

.ma-query-state div {
  display: flex;
  flex-direction: column;
}

.ma-query-state strong {
  color: #173653;
  font-size: 13px;
}

.ma-query-state span {
  font-size: 12px;
}

.ma-query-state .ma-btn {
  margin-left: 10px;
}

.ma-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  grid-gap: 14px;
  gap: 14px;
}

.ma-assignment-panel,
.ma-summary-panel {
  min-width: 0;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 35, 63, .035);
}

.ma-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #e4ebf3;
}

.ma-panel-head h2,
.ma-summary-panel h2 {
  margin: 0;
  color: #10233f;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0;
}

.ma-panel-head p {
  margin: 2px 0 0;
  color: #6a7f94;
  font-size: 11px;
}

.ma-panel-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 5px;
  background: #edf8f3;
  color: #087b58;
  font-size: 10.5px;
  font-weight: 700;
}

.ma-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ma-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  table-layout: fixed;
}

.ma-table th,
.ma-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #e8eef5;
  text-align: left;
  vertical-align: top;
}

.ma-table th {
  height: 38px;
  background: #f8fafc;
  color: #526980;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.ma-table tbody tr:last-child td {
  border-bottom: 0;
}

.ma-table tbody tr:hover td {
  background: #fbfdfc;
}

.ma-col-metric { width: 200px; }
.ma-col-category { width: 54px; }
.ma-col-type { width: 75px; }
.ma-col-responsible { width: 210px; }
.ma-col-accountable { width: 185px; }
.ma-col-note { width: 105px; }
.ma-col-state { width: 115px; }

.ma-metric-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ma-metric-cell code,
.ma-picker-metric code {
  width: -moz-fit-content;
  width: fit-content;
  color: #075e49;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 750;
}

.ma-metric-cell strong {
  display: -webkit-box;
  overflow: hidden;
  color: #122d48;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ma-metric-cell > span {
  display: block;
  overflow: hidden;
  color: #7a8da0;
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-category-badge,
.ma-type-label,
.ma-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.ma-category-badge.is-e { background: #dcfce7; color: #16743e; }
.ma-category-badge.is-s { background: #dbeafe; color: #1d4ed8; }
.ma-category-badge.is-g { background: #ede9fe; color: #6d28d9; }
.ma-category-badge.is-none { background: #eef2f6; color: #66788c; }
.ma-type-label { background: #f0f4f8; color: #526980; }

.ma-state-badge.is-complete { background: #e6f8ef; color: #087b58; }
.ma-state-badge.is-warning { background: #fff4d8; color: #9a5b00; }
.ma-state-badge.is-empty { background: #f0f3f6; color: #66788c; }

.ma-assignee-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ma-assignee-chip {
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: 26px minmax(0, 1fr) 24px;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  padding: 4px 4px 4px 5px;
  border: 1px solid #cfe6dc;
  border-radius: 7px;
  background: #f3faf7;
}

.ma-assignee-chip.is-accountable {
  border-color: #d8d8ef;
  background: #f7f6fc;
}

.ma-chip-avatar,
.ma-workload-avatar,
.ma-person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 750;
  line-height: 1;
}

.ma-chip-avatar {
  width: 26px;
  height: 26px;
  background: #087b58;
  color: #fff;
  font-size: 9px;
}

.ma-assignee-chip.is-accountable .ma-chip-avatar {
  background: #6557a8;
}

.ma-chip-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ma-chip-copy strong,
.ma-chip-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-chip-copy strong {
  color: #173653;
  font-size: 11px;
}

.ma-chip-copy small {
  color: #6f8295;
  font-size: 9.5px;
}

.ma-assignee-chip > button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #7a8da0;
  cursor: pointer;
}

.ma-assignee-chip > button:hover:not(:disabled) {
  background: #fee2e2;
  color: #b42318;
}

.ma-assignee-chip > button:disabled {
  cursor: wait;
  opacity: .45;
}

.ma-add-person {
  display: inline-flex;
  min-height: 28px;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px dashed #9bcdb8;
  border-radius: 6px;
  background: #fff;
  color: #087b58;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.ma-add-person.is-owner {
  border-color: #bdb6db;
  color: #594c92;
}

.ma-add-person:hover:not(:disabled) {
  border-style: solid;
  background: #f1faf6;
}

.ma-add-person.is-owner:hover:not(:disabled) {
  background: #f7f6fc;
}

.ma-note {
  display: -webkit-box;
  overflow: hidden;
  color: #546a80;
  font-size: 10.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ma-note.is-empty {
  color: #9aa9b8;
  font-style: italic;
}

.ma-table-foot {
  padding: 9px 13px;
  border-top: 1px solid #e4ebf3;
  color: #667b91;
  font-size: 11px;
}

.ma-table-foot .btn {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10.5px;
}

.ma-empty-state,
.ma-table-loading {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #8192a4;
  text-align: center;
}

.ma-empty-state strong {
  color: #38536d;
  font-size: 12px;
}

.ma-empty-state span,
.ma-table-loading span {
  font-size: 10.5px;
}

.ma-summary-panel {
  position: -webkit-sticky;
  position: sticky;
  top: 14px;
  overflow: hidden;
}

.ma-summary-panel > header {
  padding: 14px 15px 11px;
  border-bottom: 1px solid #e4ebf3;
}

.ma-summary-panel > header span {
  display: block;
  margin-top: 2px;
  color: #75899e;
  font-size: 10.5px;
}

.ma-context-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  padding: 12px 15px;
  border-bottom: 1px solid #e8eef5;
}

.ma-context-list div {
  min-width: 0;
}

.ma-context-list dt {
  color: #7b8ea1;
  font-size: 10px;
}

.ma-context-list dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: #173653;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ma-coverage {
  padding: 13px 15px 10px;
}

.ma-coverage > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: #49637d;
  font-size: 11px;
  font-weight: 650;
}

.ma-coverage > div:first-child strong {
  color: #087b58;
  font-size: 18px;
}

.ma-coverage p {
  margin: 5px 0 0;
  color: #71869b;
  font-size: 10px;
}

.ma-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef3;
}

.ma-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #087b58;
  transition: width .2s ease;
}

.ma-progress.is-e > span { background: #16824a; }
.ma-progress.is-s > span { background: #2563eb; }
.ma-progress.is-g > span { background: #7c3aed; }

.ma-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e8eef5;
  border-bottom: 1px solid #e8eef5;
}

.ma-summary-stats div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  text-align: center;
}

.ma-summary-stats div + div {
  border-left: 1px solid #e8eef5;
}

.ma-summary-stats strong {
  color: #10233f;
  font-size: 15px;
}

.ma-summary-stats span {
  color: #71869b;
  font-size: 9.5px;
  line-height: 1.3;
}

.ma-summary-section {
  padding: 12px 15px;
  border-bottom: 1px solid #e8eef5;
}

.ma-summary-section h3 {
  margin: 0 0 9px;
  color: #294761;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0;
}

.ma-category-distribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-distribution-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  color: #536b82;
  font-size: 10px;
}

.ma-distribution-label > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.ma-distribution-label i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 2px;
  background: #94a3b8;
}

.ma-distribution-label i.is-e { background: #16824a; }
.ma-distribution-label i.is-s { background: #2563eb; }
.ma-distribution-label i.is-g { background: #7c3aed; }

.ma-distribution-label strong {
  flex: 0 0 auto;
  color: #294761;
  font-size: 10px;
}

.ma-distribution-label small {
  margin-left: 2px;
  color: #8394a5;
  font-size: 9px;
  font-weight: 500;
}

.ma-workload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-workload-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 20px;
  align-items: center;
  grid-gap: 7px;
  gap: 7px;
}

.ma-workload-avatar {
  width: 25px;
  height: 25px;
  background: #e6f8ef;
  color: #087b58;
  font-size: 8.5px;
}

.ma-workload-row > div {
  min-width: 0;
}

.ma-workload-row strong {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  color: #2d4963;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-workload-row > span:last-child {
  color: #4c657d;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.ma-summary-empty {
  margin: 0;
  color: #8293a4;
  font-size: 10.5px;
}

.ma-summary-tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px;
  padding: 9px 10px;
  border: 1px solid #cce6da;
  border-radius: 6px;
  background: #f3faf7;
  color: #4b7564;
  font-size: 10px;
  line-height: 1.45;
}

.ma-summary-tip svg {
  flex: 0 0 auto;
}

/* Personnel picker */
.ma-picker-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 24, 42, .48);
}

.ma-picker-dialog {
  display: flex;
  width: min(900px, 100%);
  max-height: calc(100vh - 36px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(9, 24, 42, .22);
  color: #10233f;
}

.ma-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid #e4ebf3;
}

.ma-picker-head > div {
  min-width: 0;
}

.ma-picker-kicker {
  margin-bottom: 2px;
  color: #087b58;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.ma-picker-head h2 {
  margin: 0;
  color: #10233f;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 0;
}

.ma-picker-head p {
  margin: 3px 0 0;
  color: #6a7f94;
  font-size: 11.5px;
}

.ma-picker-metric {
  display: flex;
  max-width: 700px;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #087b58;
  background: #f3faf7;
}

.ma-picker-metric span {
  min-width: 0;
  overflow: hidden;
  color: #294761;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-icon-btn {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  background: #fff;
  color: #62798f;
  cursor: pointer;
}

.ma-icon-btn:hover:not(:disabled) {
  background: #f2f6fa;
  color: #173653;
}

.ma-picker-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid #e8eef5;
  background: #fbfcfe;
}

.ma-search-field {
  min-height: 36px;
  flex: 1 1;
  margin: 0;
  padding: 0 10px;
}

.ma-scope-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  background: #fff;
}

.ma-scope-switch button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #61778d;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}

.ma-scope-switch button.is-active {
  background: #e8f7f0;
  color: #087b58;
}

.ma-scope-switch button span {
  display: inline-flex;
  min-width: 18px;
  height: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(80, 105, 128, .1);
  font-size: 8.5px;
}

.ma-picker-list {
  min-height: 250px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ma-person-row {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 38px minmax(0, 1fr) minmax(150px, 205px) 24px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 9px 16px;
  border: 0;
  border-bottom: 1px solid #e8eef5;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .1s, box-shadow .1s;
}

.ma-person-row:hover:not(.is-disabled) {
  background: #f7fbf9;
}

.ma-person-row.is-selected {
  background: #eff9f4;
  box-shadow: inset 3px 0 0 #087b58;
}

.ma-person-row.is-disabled {
  cursor: not-allowed;
  opacity: .62;
}

.ma-person-avatar {
  width: 38px;
  height: 38px;
  background: #dff4ea;
  color: #087b58;
  font-size: 11px;
}

.ma-person-row.is-disabled .ma-person-avatar {
  background: #edf1f5;
  color: #75899e;
}

.ma-person-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ma-person-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.ma-person-name-line strong {
  min-width: 0;
  overflow: hidden;
  color: #16334f;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-person-title {
  overflow: hidden;
  color: #647a90;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-person-contact {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 2px;
  color: #7b8ea1;
  font-size: 9.5px;
}

.ma-person-contact > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow-wrap: anywhere;
}

.ma-person-contact svg {
  flex: 0 0 auto;
}

.ma-person-statuses {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.ma-badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 20px;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ma-badge-org { background: #e7f8f0; color: #087b58; }
.ma-badge-company { background: #edf2f7; color: #586f85; }
.ma-badge-ready { background: #e7f8f0; color: #087b58; }
.ma-badge-pending { background: #fff4d8; color: #945700; }
.ma-badge-danger { background: #feecec; color: #b42318; }
.ma-badge-muted { background: #edf1f5; color: #66798c; }
.ma-badge-role { background: #e9f2ff; color: #1d4ed8; }
.ma-badge-owner { background: #f0edfc; color: #6557a8; }

.ma-person-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cedae6;
  border-radius: 50%;
  color: transparent;
}

.ma-person-row.is-selected .ma-person-check {
  border-color: #087b58;
  background: #087b58;
  color: #fff;
}

.ma-picker-state {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  color: #75899e;
  font-size: 11.5px;
  text-align: center;
}

.ma-picker-state.is-error {
  color: #b42318;
}

.ma-picker-more {
  display: flex;
  justify-content: center;
  padding: 12px;
  border-bottom: 1px solid #e8eef5;
  background: #fbfcfe;
}

.ma-picker-more button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #cddbe8;
  border-radius: 6px;
  background: #fff;
  color: #35536f;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 650;
}

.ma-picker-more button:hover {
  border-color: #8eb8a6;
  background: #f2faf6;
  color: #087b58;
}

.ma-picker-more button span {
  color: #7a8da0;
  font-size: 9.5px;
  font-weight: 550;
}

.ma-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  border-top: 1px solid #dfe8f1;
  background: #fbfcfe;
}

.ma-picker-selection {
  display: flex;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
  gap: 1px;
}

.ma-picker-selection strong {
  overflow: hidden;
  color: #173653;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-picker-selection > span {
  color: #6c8196;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.ma-picker-selection .ma-inline-error {
  margin-top: 2px;
  color: #b42318;
  font-size: 10.5px;
}

.ma-picker-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.ma-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #cdd9e5;
  border-top-color: #087b58;
  border-radius: 50%;
  animation: ma-spin .7s linear infinite;
}

.ma-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ma-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ma-spinner { animation-duration: 1.6s; }
  .ma-progress > span { transition: none; }
}

@media (max-width: 1360px) {
  .ma-filter-band {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .ma-table-search {
    grid-column: span 3;
  }

  .ma-btn-clear {
    justify-self: end;
  }
}

@media (max-width: 1120px) {
  .ma-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .ma-summary-panel {
    position: static;
  }

  .ma-summary-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ma-summary-panel > header,
  .ma-context-list,
  .ma-summary-tip {
    grid-column: 1 / -1;
  }

  .ma-summary-stats {
    grid-column: 1 / -1;
  }

  .ma-coverage,
  .ma-summary-section {
    border-bottom: 1px solid #e8eef5;
  }
}

@media (max-width: 820px) {
  .ma-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ma-wizard-link {
    align-self: stretch;
  }

  .ma-filter-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ma-table-search {
    grid-column: 1 / -1;
  }

  .ma-btn-clear {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ma-picker-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .ma-scope-switch {
    align-self: flex-start;
  }

  .ma-person-row {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
  }

  .ma-person-statuses {
    grid-column: 2 / -1;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ma-person-check {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  .ma-page-title h1 {
    font-size: 19px;
  }

  .ma-filter-band,
  .ma-summary-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .ma-table-search,
  .ma-btn-clear,
  .ma-summary-panel > header,
  .ma-context-list,
  .ma-summary-stats,
  .ma-summary-tip {
    grid-column: 1;
  }

  .ma-info-banner {
    padding: 10px;
  }

  .ma-query-state {
    align-items: flex-start;
    flex-direction: column;
  }

  .ma-query-state .ma-btn {
    width: 100%;
    margin-left: 0;
  }

  .ma-context-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ma-picker-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .ma-picker-dialog {
    width: 100%;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .ma-picker-head {
    padding: 14px;
  }

  .ma-picker-tools,
  .ma-picker-foot {
    padding-right: 12px;
    padding-left: 12px;
  }

  .ma-scope-switch {
    width: 100%;
  }

  .ma-scope-switch button {
    flex: 1 1;
    justify-content: center;
  }

  .ma-person-row {
    min-height: 82px;
    padding: 10px 12px;
  }

  .ma-person-name-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .ma-picker-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .ma-picker-actions {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
  }

  .ma-picker-actions .ma-btn {
    width: 100%;
  }
}