/* AkseleraSync Leadership Charts · 2026-08-15
   ---------------------------------------------------------------------
   Skala spacing, radius, tipografi, elevasi, dan gerak berasal dari
   assets/css/tokens.css yang dimuat lebih dulu. Tidak ada font-size di
   bawah --fs-caption (12px) di berkas ini — kontrak audit visual. */
[data-active-portal="pimpinan"] .lchart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-6);
  text-align: left;
}
[data-active-portal="pimpinan"] .lchart-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(31, 58, 107, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(39, 117, 227, 0.055), transparent 38%),
    linear-gradient(150deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 14px 38px rgba(22, 37, 77, 0.085);
  isolation: isolate;
  /* Kartu ini dipakai di banyak grid berbeda lebar (1, 2, atau 6 kolom
     tergantung route) — container query membuatnya bereaksi ke lebar
     KARTU SENDIRI, bukan viewport. Ditambahkan karena sidebar Pimpinan
     (bagian 23, portal-leadership.css) membuat grid 2-kolom pada Radar
     KPI beranda turun sampai ~238px pada viewport desktop 1280px —
     lebih sempit dari breakpoint 760px di bawah, yang hanya membaca
     lebar VIEWPORT, sehingga label "MAKNA KEPUTUSAN" (nowrap) di
     .lchart-insight memaksa kolom kalimatnya jadi ~24px dan meluber. */
  container-type: inline-size;
}
[data-active-portal="pimpinan"] .lchart-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #d99a18, rgba(217, 154, 24, 0));
  opacity: 0.72;
}
[data-active-portal="pimpinan"] .lchart-card--wide { grid-column: 1 / -1; }
[data-active-portal="pimpinan"] .lchart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  margin-bottom: 10px;
}
[data-active-portal="pimpinan"] .lchart-head > div { min-width: 0; }
[data-active-portal="pimpinan"] .lchart-head p {
  margin: 0 0 var(--sp-1);
  color: #8a6410;
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .lchart-head h3 {
  margin: 0;
  color: #152343;
  font-size: clamp(var(--fs-subhead), 2vw, var(--fs-heading));
  font-weight: 820;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
[data-active-portal="pimpinan"] .lchart-head small {
  display: block;
  max-width: 58ch;
  margin-top: var(--sp-1);
  color: #54637c;
  font-size: var(--fs-caption);
  font-weight: 520;
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .lchart-delta {
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  background: #e9f8f2;
  color: #086049;
  font-size: var(--fs-caption);
  font-weight: 800;
  white-space: nowrap;
}
[data-active-portal="pimpinan"] .lchart-delta--warn { background: #fff4da; color: #7c5300; }
[data-active-portal="pimpinan"] .lchart-delta--danger { background: #fff0ef; color: #96302d; }
[data-active-portal="pimpinan"] .lchart-stage {
  position: relative;
  width: 100%;
  height: var(--chart-height, 260px);
  min-height: 88px;
}
[data-active-portal="pimpinan"] .lchart-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  outline: none;
}
[data-active-portal="pimpinan"] .lchart-stage canvas:focus-visible {
  box-shadow: 0 0 0 3px rgba(39, 117, 227, 0.22);
}
[data-active-portal="pimpinan"] .lchart-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 122px;
  max-width: 180px;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(18, 31, 65, 0.94);
  box-shadow: 0 10px 26px rgba(13, 24, 51, 0.24);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  backdrop-filter: blur(10px);
}
[data-active-portal="pimpinan"] .lchart-tooltip.is-visible { opacity: 1; transform: translateY(0); }
[data-active-portal="pimpinan"] .lchart-tooltip span { display: flex; align-items: center; gap: 6px; color: #cdd6eb; }
[data-active-portal="pimpinan"] .lchart-tooltip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tip); }
[data-active-portal="pimpinan"] .lchart-tooltip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-active-portal="pimpinan"] .lchart-tooltip b { color: #f8c65e; font-size: 13px; }
[data-active-portal="pimpinan"] .lchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0 2px;
  color: #54637c;
  font-size: var(--fs-caption);
  font-weight: 650;
}
[data-active-portal="pimpinan"] .lchart-legend > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
[data-active-portal="pimpinan"] .lchart-legend i {
  position: relative;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--legend);
  box-shadow: inset 0 0 0 1px rgba(21, 35, 67, .12);
}
/* Bentuk dan tekstur swatch — legenda tetap terbaca tanpa membedakan warna. */
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="circle"] { border-radius: var(--r-pill); }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="triangle"] { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="diamond"] { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="cross"] { border-radius: 0; clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); box-shadow: none; }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="ring"] { border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--legend); }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="hollow"] { border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 2px var(--legend); }
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="diagonal"] {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .85) 0 1.5px, transparent 1.5px 4px);
}
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="vertical"] {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 1.5px, transparent 1.5px 4px);
}
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="crosshatch"] {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .85) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .85) 0 1.5px, transparent 1.5px 4px);
}
[data-active-portal="pimpinan"] .lchart-legend i[data-legend-shape="dots"] {
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.2px);
  background-size: 4px 4px;
}
[data-active-portal="pimpinan"] .lchart-legend strong { margin-left: 2px; color: #253656; font-size: var(--fs-caption); }
[data-active-portal="pimpinan"] .lchart-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  /* Pada layar sempit ini menjadi kolom tunggal (lihat @media di bawah),
     jadi gap ini berlaku sebagai jarak VERTIKAL antara label pil dan
     kalimat maknanya — bukan cuma jarak antar kolom di desktop. 9px
     mentah terukur di bawah ambang kartu-ke-teks (8px); --sp-3 aman. */
  gap: var(--sp-3);
  margin-top: 15px;
  padding: 11px 12px;
  border: 1px solid rgba(217, 154, 24, 0.17);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(255, 246, 222, .84), rgba(255, 251, 240, .52));
}
[data-active-portal="pimpinan"] .lchart-insight span {
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: #152343;
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-active-portal="pimpinan"] .lchart-insight strong {
  color: #4c3a16;
  font-size: var(--fs-caption);
  font-weight: 680;
  line-height: var(--lh-relaxed);
}
/* Sama seperti @media (max-width:760px) di bawah, tapi bereaksi ke lebar
   KARTU (lihat container-type di .lchart-card), bukan viewport — kartu
   pada grid 2 kolom bisa jadi sesempit ini walau viewport-nya desktop.
   Tanpa ini label nowrap "MAKNA KEPUTUSAN" memaksa kolom kalimatnya
   turun ke ~24px dan meluber keluar kotaknya sendiri. */
@container (max-width: 300px) {
  [data-active-portal="pimpinan"] .lchart-insight { grid-template-columns: 1fr; }
  [data-active-portal="pimpinan"] .lchart-insight span { width: fit-content; }
}
[data-active-portal="pimpinan"] .lchart-card > footer {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(31,58,107,.09);
  color: #5c6b84;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .lchart-card > footer time { text-align: right; }
[data-active-portal="pimpinan"] .lchart-data { margin-top: 6px; color: #65748e; font-size: 12px; }
[data-active-portal="pimpinan"] .lchart-data summary {
  width: fit-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #36598f;
  font-weight: 750;
  outline: none;
}
[data-active-portal="pimpinan"] .lchart-data summary:focus-visible { border-radius: 6px; box-shadow: 0 0 0 3px rgba(39,117,227,.2); }
[data-active-portal="pimpinan"] .lchart-data__scroll { overflow-x: auto; margin-top: 5px; border: 1px solid rgba(31,58,107,.11); border-radius: 12px; }
[data-active-portal="pimpinan"] .lchart-data table { width: 100%; min-width: 420px; border-collapse: collapse; background: #fff; }
[data-active-portal="pimpinan"] .lchart-data caption { padding: 10px 12px; color: #16254d; font-weight: 800; text-align: left; }
[data-active-portal="pimpinan"] .lchart-data th,
[data-active-portal="pimpinan"] .lchart-data td { padding: 8px 10px; border-top: 1px solid rgba(31,58,107,.08); text-align: right; white-space: nowrap; }
[data-active-portal="pimpinan"] .lchart-data th:first-child { color: #253656; text-align: left; }
[data-active-portal="pimpinan"] .lchart-data thead th { background: #f4f7fb; color: #4b5a75; font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; }
[data-active-portal="pimpinan"] .lchart-card--sparkline { padding: 14px; }
[data-active-portal="pimpinan"] .lchart-card--sparkline .lchart-head { min-height: 48px; }
[data-active-portal="pimpinan"] .lchart-card--sparkline .lchart-insight,
[data-active-portal="pimpinan"] .lchart-card--sparkline .lchart-legend { display: none; }

@media (max-width: 760px) {
  [data-active-portal="pimpinan"] .lchart-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 16px 0 20px; }
  [data-active-portal="pimpinan"] .lchart-card,
  [data-active-portal="pimpinan"] .lchart-card--wide { grid-column: auto; padding: 16px; border-radius: 18px; }
  [data-active-portal="pimpinan"] .lchart-head { min-height: 58px; }
  [data-active-portal="pimpinan"] .lchart-stage { height: min(var(--chart-height, 250px), 250px); }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="funnel"] .lchart-stage { height: 290px; }
  /* Bullet tumbuh mengikuti jumlah indikator; timeline berpindah ke sumbu
     vertikal dan risk matrix tetap butuh empat baris kuadran yang terbaca. */
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="bullet"] .lchart-stage { height: var(--chart-height, 220px); }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="timeline"] .lchart-stage { height: 320px; }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="riskmatrix"] .lchart-stage { height: 340px; }
  [data-active-portal="pimpinan"] .lchart-insight { grid-template-columns: 1fr; }
  [data-active-portal="pimpinan"] .lchart-insight span { width: fit-content; }
}
@media (max-width: 430px) {
  [data-active-portal="pimpinan"] .lchart-card { padding: 14px 12px; border-radius: 16px; }
  [data-active-portal="pimpinan"] .lchart-head { gap: 8px; }
  [data-active-portal="pimpinan"] .lchart-head h3 { font-size: var(--fs-body); }
  [data-active-portal="pimpinan"] .lchart-delta { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); }
  [data-active-portal="pimpinan"] .lchart-card > footer { display: grid; gap: 3px; }
  [data-active-portal="pimpinan"] .lchart-card > footer time { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  [data-active-portal="pimpinan"] .lchart-tooltip { transition: none; }
}
@media print {
  [data-active-portal="pimpinan"] .lchart-card { break-inside: avoid; box-shadow: none; }
  [data-active-portal="pimpinan"] .lchart-data { display: block; }
  [data-active-portal="pimpinan"] .lchart-data > summary { display: none; }
  [data-active-portal="pimpinan"] .lchart-data__scroll { display: block; }
}

[data-active-portal="pimpinan"] .lchart-compact-curve { margin: 10px 0; }
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-card {
  padding: 13px 15px;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(22, 37, 77, .07);
}
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-head { min-height: 44px; margin-bottom: 4px; }
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-head h3 { font-size: var(--fs-body); }
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-stage { height: 96px; }
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-insight { margin-top: 8px; padding: 8px 10px; }
[data-active-portal="pimpinan"] .lchart-compact-curve .lchart-card > footer { margin-top: 7px; padding-top: 7px; }

@media (min-width: 761px) and (max-width: 980px) {
  [data-active-portal="pimpinan"] .lchart-grid { gap: 15px; }
  [data-active-portal="pimpinan"] .lchart-card { padding: 17px; }
  [data-active-portal="pimpinan"] .lchart-head h3 { font-size: var(--fs-subhead); }
}

@media (max-width: 430px) {
  [data-active-portal="pimpinan"] .lchart-card { padding: 12px; }
  [data-active-portal="pimpinan"] .lchart-head { min-height: 0; margin-bottom: 6px; }
  [data-active-portal="pimpinan"] .lchart-stage { height: min(var(--chart-height, 200px), 200px); }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="funnel"] .lchart-stage { height: 250px; }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="bullet"] .lchart-stage { height: var(--chart-height, 220px); }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="timeline"] .lchart-stage { height: 300px; }
  [data-active-portal="pimpinan"] .lchart-card[data-chart-type="riskmatrix"] .lchart-stage { height: 320px; }
  /* gap dulu 6px mentah: pada layar sempit (di mana kartu bertumpuk satu
     kolom) itu jadi jarak vertikal antara label "MAKNA KEPUTUSAN" dan
     kalimat di bawahnya, dan terukur di bawah ambang kartu-ke-teks 8px.
     Naik ke token --sp-3 (dipakai juga di aturan dasar .lchart-insight
     agar satu sumber, bukan angka mentah per breakpoint). */
  [data-active-portal="pimpinan"] .lchart-insight { gap: var(--sp-3); margin-top: 9px; padding: 8px 9px; }
  [data-active-portal="pimpinan"] .lchart-card > footer { margin-top: 8px; padding-top: 7px; }
  [data-active-portal="pimpinan"] .lchart-data summary { min-height: 32px; }
}


/* Final accessibility floor: every leadership chart title remains legible. */
html[data-active-portal="pimpinan"] body #screen [data-lchart-card] .lchart-head h3,
html[data-active-portal="pimpinan"] body #screen [data-lchart-compact-curve] [data-lchart-card] .lchart-head h3,
html[data-active-portal="pimpinan"] body #screen [data-finance-microchart] [data-lchart-card] .lchart-head h3 {
  font-size: max(12px, 0.75rem) !important;
}