/* juribooks-charts-v3.css — JuriBooksCharts (lib/juribooks-charts-v3.js) visual
   layer. Loaded LAST alongside the JS file. Presentation only: geometry lives
   in the JS (computed cx/cy/r/angles/label positions written as inline
   attributes on the SVG this file styles), colour/type/spacing lives here.

   No ledger, billing, VAT/WHT, payroll, trust, budget, cash-flow, WIP or
   receivables calculation is touched by this file — it draws whatever
   {label,value} rows its caller already computed. */

:root{
  --chart-1:#714B67; --chart-2:#8F6B84; --chart-3:#AD8EA5; --chart-4:#4F6F8F;
  --chart-5:#7292AE; --chart-6:#96AFC3; --chart-7:#6F7782; --chart-8:#A5ABB3;
  --chart-success:#2E7D5B; --chart-warning:#D58A1F; --chart-danger:#C64B55;
  --chart-grid:#E6E8EC; --chart-ink:#252933; --chart-muted:#687180;
  --chart-card-bg:#FFFFFF; --chart-card-border:#D9DDE3; --chart-label-bg:#FFFFFF;
  /* Chart display settings (lib/juribooks-charts-v3.js JuriBooksCharts.setConfig,
     surfaced in Settings → Appearance & formatting → Charts). Set on
     documentElement at runtime; these defaults reproduce the engine's
     original fixed values so nothing changes until a user picks a setting. */
  --jb-chart-max:100%; --jb-label-scale:1; --jb-label-maxw:150px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chart-card-bg:#1B1E26; --chart-card-border:#343B47; --chart-label-bg:#232733;
    --chart-ink:#E7E9EE; --chart-muted:#9AA3B2; --chart-grid:#333A46;
  }
}
:root[data-theme="dark"]{
  --chart-card-bg:#1B1E26; --chart-card-border:#343B47; --chart-label-bg:#232733;
  --chart-ink:#E7E9EE; --chart-muted:#9AA3B2; --chart-grid:#333A46;
}

.jb-chart{
  background:var(--chart-card-bg); border:1px solid var(--chart-card-border);
  border-radius:6px; box-shadow:none; padding:20px 22px; color:var(--chart-ink);
  break-inside:avoid;
}
.jb-chart-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.jb-chart-title{font-family:var(--fsans,'Inter Tight',sans-serif);font-size:20px;font-weight:600;color:var(--chart-ink);text-align:left;line-height:1.25}
.jb-chart-subtitle{font-family:var(--fsans,'Inter Tight',sans-serif);font-size:12px;font-weight:400;color:var(--chart-muted)}

.jb-chart-body{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.jb-chart-svg-wrap{position:relative;width:100%;aspect-ratio:1;max-width:min(100%,var(--jb-chart-max,100%));margin:0 auto}
.jb-chart-svg{width:100%;height:100%;display:block;overflow:visible}

.jb-chart-segment{cursor:pointer;transition:opacity .12s ease}
.jb-chart-segment:hover,.jb-chart-segment:focus-visible{opacity:.86}
.jb-chart-segment:focus-visible{outline:2px solid var(--navy,#20365e);outline-offset:2px}
.jb-chart-segment[data-muted="1"]{opacity:.35}

.jb-chart-center-label{text-anchor:middle;font-family:var(--fsans,'Inter Tight',sans-serif);fill:var(--chart-ink)}
.jb-chart-center-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;fill:var(--chart-muted)}
.jb-chart-center-value{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.jb-chart-center-period{font-size:var(--text-xs);font-weight:400;fill:var(--chart-muted)}

.jb-chart-leader{fill:none;stroke-width:1.25px}
[data-jb-leaders="0"] .jb-chart-leader{display:none}

.jb-chart-label{
  position:absolute;transform:translate(-50%,-50%);
  background:var(--chart-label-bg);border:1px solid var(--chart-card-border);
  border-radius:5px;padding:6px 9px 6px 10px;font-family:var(--fsans,'Inter Tight',sans-serif);
  line-height:1.3;white-space:nowrap;pointer-events:auto;cursor:pointer;
}
.jb-chart-label[data-side="left"]{transform:translate(-100%,-50%)}
.jb-chart-label[data-side="right"]{transform:translate(0,-50%)}
.jb-chart-label-marker{display:inline-block;width:3px;align-self:stretch;margin-right:7px;border-radius:2px;vertical-align:middle}
.jb-chart-label-name{font-size:calc(var(--text-xs) * var(--jb-label-scale,1));font-weight:600;color:var(--chart-ink);display:block;max-width:var(--jb-label-maxw,150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-chart-label-value{font-size:calc(var(--text-sm) * var(--jb-label-scale,1));font-weight:600;color:var(--chart-ink);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.jb-chart-label-percent{font-size:calc(var(--text-xs) * var(--jb-label-scale,1));font-weight:400;color:var(--chart-muted);margin-left:5px}
.jb-chart-label:hover,.jb-chart-label:focus-within{border-color:var(--chart-1)}

.jb-chart-legend{display:flex;flex-direction:column;gap:7px;min-width:170px;max-width:230px}
.jb-chart-legend-item{display:flex;align-items:center;gap:8px;font-family:var(--fsans,'Inter Tight',sans-serif);font-size:11px;font-weight:500;cursor:pointer;background:none;border:none;padding:2px 0;text-align:left;color:var(--chart-ink)}
.jb-chart-legend-item:hover,.jb-chart-legend-item:focus-visible{opacity:.8}
.jb-chart-legend-item:focus-visible{outline:2px solid var(--navy,#20365e);outline-offset:2px}
.jb-chart-legend-swatch{width:11px;height:11px;border-radius:2px;flex:none}
.jb-chart-legend-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-chart-legend-pct{font-variant-numeric:tabular-nums lining-nums;color:var(--chart-muted);font-weight:600;font-size:var(--text-xs)}

.jb-chart-foot{margin-top:12px;font-size:11px;color:var(--chart-muted);font-family:var(--fsans,'Inter Tight',sans-serif)}

.jb-chart-table{width:100%;border-collapse:collapse;margin-top:14px;font-family:var(--fsans,'Inter Tight',sans-serif);font-size:12px}
.jb-chart-table caption{text-align:left;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--chart-muted);margin-bottom:6px}
.jb-chart-table th,.jb-chart-table td{padding:6px 10px;border-bottom:1px solid var(--chart-grid);text-align:left}
.jb-chart-table th{font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--chart-muted)}
.jb-chart-table td.r,.jb-chart-table th.r{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.jb-chart-table tr.jb-chart-total td{font-weight:700;border-top:1.5px solid var(--chart-card-border);border-bottom:none}
.jb-chart-table-toggle{background:none;border:none;color:var(--chart-1);font-size:11px;font-weight:600;cursor:pointer;padding:4px 0;font-family:var(--fsans,'Inter Tight',sans-serif)}

.jb-chart-empty{padding:36px 20px;text-align:center;color:var(--chart-muted);font-family:var(--fsans,'Inter Tight',sans-serif);font-size:13px}

.jb-chart-tooltip{
  position:fixed;z-index:2000;pointer-events:none;background:var(--chart-ink);color:#fff;
  font-family:var(--fsans,'Inter Tight',sans-serif);font-size:var(--text-sm);line-height:1.5;
  border-radius:6px;padding:8px 11px;box-shadow:0 8px 20px rgba(0,0,0,.22);
  max-width:220px;opacity:0;transition:opacity .1s ease;
}
.jb-chart-tooltip.jb-on{opacity:1}
.jb-chart-tooltip b{font-variant-numeric:tabular-nums lining-nums}

/* ---- responsive ---- */
@media (max-width:1199px){
  .jb-chart-body{grid-template-columns:1fr}
  .jb-chart-legend{flex-direction:row;flex-wrap:wrap;max-width:none;gap:10px 16px}
}
@media (max-width:767px){
  .jb-chart{padding:16px 16px}
  .jb-chart-title{font-size:17px}
  .jb-chart-body{display:block}
  .jb-chart-svg-wrap{max-width:280px;margin:0 auto;min-width:240px}
  .jb-chart-label{position:static;transform:none;display:none}
  /* The HTML labels hide above, but the SVG leader lines pointing to them
     are separate elements the label rule never touched — confirmed live: a
     mobile donut showed leader lines radiating outward toward nothing,
     more broken-looking than no lines at all. */
  .jb-chart-leader{display:none}
  .jb-chart-legend{flex-direction:column;max-width:none;margin-top:14px}
  /* Outside labels hide at this width (spec: "hide outside callouts if
     necessary"), but a chart under the legend threshold (<=6 segments)
     never rendered a legend either — nothing was left carrying the
     percentages the spec requires stay visible ("show percentages in the
     legend/table"). Confirmed live: a 6-segment chart at 375px showed a
     bare ring with zero visible labels, zero legend rows. Forcing the
     always-present accessible table open here is the fix — no new markup,
     just showing what already exists instead of a second legend
     implementation. */
  .jb-chart-table{display:table !important;margin-top:14px}
  .jb-chart-table-toggle{display:none}
}

/* ---- print / PDF ---- */
@media print{
  .jb-chart{
    border:1px solid #ccc;box-shadow:none;background:#fff;color:#000;break-inside:avoid;
    print-color-adjust:exact;-webkit-print-color-adjust:exact;
  }
  .jb-chart-title,.jb-chart-label-name,.jb-chart-label-value,.jb-chart-center-value{color:#000}
  .jb-chart-subtitle,.jb-chart-muted,.jb-chart-label-percent,.jb-chart-legend-pct{color:#444}
  .jb-chart-label{position:static !important;transform:none !important;display:inline-flex !important;margin:3px 6px 3px 0;border-color:#ccc}
  .jb-chart-leader{display:none}
  .jb-chart-table-toggle{display:none}
  .jb-chart-table{display:table !important}
  .jb-chart-tooltip{display:none !important}
}