/* widget_shapes.css — kontrak bentuk widget (Tahap 1 design system).
 *
 * Satu pengaturan bentuk memengaruhi semua elemen: kartu, batang, chip,
 * kontrol, dan titik. Nilai mengalir lewat CSS variable sehingga ganti
 * bentuk cukup mengubah SATU atribut data, tanpa menyentuh komponen.
 *
 * Cascade: :root (netral) → atribut dashboard (resolved penuh dari
 * StyleResolver: tema + style dashboard) → atribut paksa di kartu.
 * Satu-satunya sumber default tema adalah StyleResolver (Ruby).
 * Kelas .rounded-* adalah nama spek (plain CSS, bukan Tailwind) agar tak
 * butuh rebuild pipeline.
 */

/* --- Nilai dasar netral (= soft / outlined / normal) --- */
:root {
  --s-card: 12px; --s-bar: 4px; --s-chip: 6px; --s-ctl: 10px; --s-point: 50%;
  --w-border: var(--bd, #e2e8f0); --w-shadow: none;
  --w-pad: 14px; --w-gap: 8px; --w-row: 34px;
}

/* --- Preset bentuk (dashboard dan kartu memakai atribut yang sama) --- */
[data-shape="soft"], [data-shape="inherit"] {
  --s-card: 12px; --s-bar: 4px; --s-chip: 6px; --s-ctl: 10px; --s-point: 50%;
}
[data-shape="square"] {
  --s-card: 2px; --s-bar: 0px; --s-chip: 2px; --s-ctl: 2px; --s-point: 0%;
}
[data-shape="round"] {
  --s-card: 20px; --s-bar: 8px; --s-chip: 10px; --s-ctl: 14px; --s-point: 50%;
}
[data-shape="pill"] {
  --s-card: 24px; --s-bar: 999px; --s-chip: 999px; --s-ctl: 999px; --s-point: 50%;
}

/* --- Gaya bingkai kartu --- */
[data-card="flat"]     { --w-border: transparent; --w-shadow: none; }
[data-card="outlined"] { --w-border: var(--bd, #e2e8f0); --w-shadow: none; }
[data-card="elevated"] {
  --w-border: var(--bd, #e2e8f0);
  --w-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .06);
}

/* --- Kerapatan --- */
[data-density="compact"] { --w-pad: 10px; --w-gap: 6px;  --w-row: 28px; }
[data-density="normal"]  { --w-pad: 14px; --w-gap: 8px;  --w-row: 34px; }
[data-density="roomy"]   { --w-pad: 20px; --w-gap: 12px; --w-row: 42px; }

/* --- Utilitas radius spek (nama tetap, nilai dari variable) --- */
.rounded-card { border-radius: var(--s-card); }
.rounded-bar  { border-radius: var(--s-bar); }
.rounded-chip { border-radius: var(--s-chip); }
.rounded-ctl  { border-radius: var(--s-ctl); }

/* --- Chart viewport (native horizontal scroll) ---
 * Kontrak: OUTER hanya menggeser; HOST di dalamnya adalah parent Chart.js
 * yang lebar/tingginya dikunci dalam px oleh controller. Chart.js tidak
 * pernah menjadi pemilik ukuran host, sehingga tidak bisa "menimpa" grafik.
 * Tanpa !important agar mudah ditimpa tema/kartu bila perlu.
 */
.chart-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chart-scroll::-webkit-scrollbar { height: 8px; }
.chart-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mu, #94a3b8) 35%, transparent);
  border-radius: 999px;
}
.chart-scroll::-webkit-scrollbar-track { background: transparent; }
.chart-scroll:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ac, #0f766e) 35%, transparent);
  outline-offset: 2px;
}

/* Horizontal bar dengan banyak baris: scroll ke bawah, bukan ke samping. */
.chart-scroll--y {
  overflow-x: hidden;
  overflow-y: auto;
}
.chart-scroll--y::-webkit-scrollbar { width: 8px; height: 0; }

/* Parent langsung <canvas>; ukuran px diisi inline oleh controller. */
.chart-canvas-host {
  position: relative;
  min-height: 120px;
}
.chart-canvas-host > canvas { display: block; }