/* MainTrak widgets: rich text editor, calendar, charts and QR code.
   Load after maintrak.css. Builds on its .rte, .chart and .calendar starter rules and uses only its tokens, so the
   dark theme follows automatically. The chart palette is the one set of new tokens: eight categorical hues validated
   for colour-blind separation and contrast in each theme (see ChartPalette). */

:root {
    --chart-1: #2e8741;
    --chart-2: #1971b5;
    --chart-3: #c45657;
    --chart-4: #7b56a8;
    --chart-5: #c8742e;
    --chart-6: #00908a;
    --chart-7: #a37b2c;
    --chart-8: #b05a8e;
    --chart-other: #8a948e;
    --chart-surface: var(--panel);
}

[data-theme="dark"] {
    --chart-1: #52a860;
    --chart-2: #4091d8;
    --chart-3: #d46565;
    --chart-4: #9c77cc;
    --chart-5: #cf7a35;
    --chart-6: #01a8a1;
    --chart-7: #b8892c;
    --chart-8: #c26a9e;
    --chart-other: #6f7c74;
}

/* ---------- Rich text editor ---------- */
.form-field.rte-field { cursor: default; }
.form-field > .rte { font-weight: 400; }
/* Inside a .form-field the field input rules would otherwise size the toolbar controls like full form inputs. */
.rte .rte-toolbar select.rte-block { width: 104px; min-height: 0; }
.rte .rte-colour-pick input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0; padding: 0; opacity: 0; cursor: pointer; }
.rte textarea.rte-source, .rte textarea.rte-source:focus { min-height: 160px; border: 0; border-radius: 0; padding: 12px 14px; background: var(--field); box-shadow: none; font-size: 12px; }
.rte-prompt input.native-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { width: auto; min-width: 0; min-height: 30px; flex: 1; padding: 4px 8px; font-size: 12px; }
.form-field.invalid .rte { border-color: var(--danger); }
.form-field.invalid .rte:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }
.rte-toolbar { row-gap: 3px; }
.rte-toolbar button:disabled { opacity: .4; }
.rte-toolbar button.text-tool { gap: 5px; }
.rte-toolbar button.text-tool .ui-icon { font-size: 13px; }
.rte-toolbar .rte-block { cursor: pointer; }
.rte-toolbar .rte-block:disabled { cursor: not-allowed; opacity: .55; }
.rte-colour { display: inline-flex; align-items: stretch; border-radius: 4px; }
.rte-toolbar .rte-colour > button { width: 26px; flex-direction: column; gap: 1px; border-radius: 4px 0 0 4px; font-size: 13px; }
.rte-colour-bar { width: 14px; height: 3px; flex: 0 0 auto; border-radius: 1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.rte-colour-pick { position: relative; width: 14px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0 4px 4px 0; color: var(--muted-dark); font-size: 10px; cursor: pointer; }
.rte-colour-pick:hover, .rte-colour-pick:focus-within { color: var(--brand-text); background: var(--brand-soft); }
.rte-colour-pick:has(input:focus-visible) { outline: 3px solid var(--brand-ring); outline-offset: 1px; }
.rte-colour.disabled .rte-colour-pick { opacity: .4; cursor: not-allowed; }
.rte-colour.disabled .rte-colour-pick input { cursor: not-allowed; }
.rte-prompt { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 8px; color: var(--brand); background: var(--panel-alt); font-size: 14px; }
.rte-content { position: relative; }
.rte-content[data-empty]::before { content: attr(data-placeholder); position: absolute; top: 12px; left: 14px; right: 14px; overflow: hidden; color: var(--muted); pointer-events: none; text-overflow: ellipsis; white-space: nowrap; }
.rte-content[contenteditable="false"] { cursor: default; }
.rte.readonly .rte-content { background: var(--panel-alt); }
.rte-content > :last-child { margin-bottom: 0; }
.rte-content h1 { margin: .3em 0 .5em; font-size: 22px; letter-spacing: -.3px; }
.rte-content h2 { margin: .3em 0 .5em; font-size: 18px; }
.rte-content h3 { margin: .3em 0 .5em; font-size: 15px; }
.rte-content ul, .rte-content ol { margin: 0 0 .6em; padding-left: 1.6em; }
.rte-content blockquote { margin: .2em 0 .6em; border-left: 3px solid var(--line-dark); padding: 2px 0 2px 12px; color: var(--muted-dark); }
.rte-content pre { margin: .2em 0 .6em; white-space: pre-wrap; }
.rte-content a { color: var(--brand); text-decoration: underline; }
.rte-source { width: 100%; display: block; max-height: 60vh; line-height: 1.5; tab-size: 2; }

/* ---------- Charts ---------- */
.chart-plot { position: relative; border-radius: var(--radius-sm); outline: 0; }
.chart-plot:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.chart svg text { font-family: var(--font); }
.chart .axis-label { font-variant-numeric: tabular-nums; }
.chart .axis-label.category { fill: var(--muted-dark); }
.chart .grid-line { shape-rendering: crispEdges; }
.chart .chart-baseline { stroke: var(--line-dark); stroke-width: 1; shape-rendering: crispEdges; }
.chart .chart-crosshair { stroke: var(--line-dark); stroke-width: 1; pointer-events: none; }
.chart-bar, .chart-slice { transition: opacity .12s ease; }
.chart-marks.has-active .chart-bar:not(.active), .chart-marks.has-active .chart-slice:not(.active) { opacity: .45; }
.chart-slice { fill-rule: evenodd; stroke: var(--chart-surface); stroke-width: 2; stroke-linejoin: round; cursor: default; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.chart-area { fill-opacity: .1; stroke: none; pointer-events: none; }
.chart-marker { stroke: var(--chart-surface); stroke-width: 2; pointer-events: none; }
.chart-values, .chart-marks .chart-bar { pointer-events: none; }
.chart .value-label { paint-order: stroke; stroke: var(--chart-surface); stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.chart-tooltip { min-width: 72px; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transform: translate(-50%, calc(-100% - 8px)); }
.chart-tooltip.align-start { transform: translate(-14px, calc(-100% - 8px)); }
.chart-tooltip.align-end { transform: translate(calc(-100% + 14px), calc(-100% - 8px)); }
.chart-tooltip-title { font-size: 10px; font-weight: 600; opacity: .72; }
.chart-tooltip-row { display: flex; align-items: center; gap: 6px; }
.chart-tooltip-row i { width: 10px; height: 2px; flex: 0 0 auto; border-radius: 1px; }
.chart-tooltip-row strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-tooltip-row span { font-weight: 500; opacity: .72; }
[data-theme="dark"] .chart-tooltip { border: 1px solid var(--line-dark); color: var(--ink); background: var(--panel-alt); }
.chart-legend strong { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-legend i { flex: 0 0 auto; }
.chart-legend i.line { width: 14px; height: 2px; border-radius: 1px; }
.chart-legend-centred { justify-content: center; }
.chart-donut .chart-plot { margin: 0 auto; }
.chart-donut-center { position: absolute; display: flex; flex-direction: column; align-items: center; color: var(--ink); text-align: center; pointer-events: none; transform: translate(-50%, -50%); }
.chart-donut-center.at-base { justify-content: flex-end; transform: translate(-50%, -100%); }

/* ---------- Calendar ---------- */
.calendar { min-height: 0; }
.calendar-toolbar { flex: 0 0 auto; }
.calendar-nav { min-width: 0; display: flex; align-items: center; gap: 6px; }
.calendar-nav h3 { min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.calendar-body { position: relative; min-height: 0; flex: 1 1 auto; overflow: auto; }
.calendar.slots-inert .calendar-day, .calendar.slots-inert .calendar-slot, .calendar.slots-inert .calendar-allday-cell, .calendar.slots-inert .calendar-planner-cell { cursor: default; }
.calendar.slots-inert .calendar-slot:hover, .calendar.slots-inert .calendar-day:hover { background: inherit; }

/* Month */
.calendar-weekdays { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.calendar-day.today { background: color-mix(in srgb, var(--brand-soft) 55%, var(--panel)); }
.calendar-day-number { flex: 0 0 auto; border: 0; padding: 0; background: transparent; cursor: pointer; }
.calendar-day-number:hover { color: var(--brand-text); background: var(--hover); }
.calendar-day.today .calendar-day-number:hover { color: #fff; background: var(--brand-fill-hover); }
.calendar-event { display: flex; align-items: baseline; gap: 5px; cursor: pointer; }
.calendar-event-time { flex: 0 0 auto; color: var(--muted-dark); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-event-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.all-day { color: var(--ink); background: color-mix(in srgb, var(--event-colour, var(--brand)) 24%, var(--panel)); }
.calendar-event.all-day:hover { background: color-mix(in srgb, var(--event-colour, var(--brand)) 34%, var(--panel)); }
.calendar-event.continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendar-event.continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calendar-more { align-self: flex-start; cursor: pointer; }
.calendar-more:hover { text-decoration: underline; }

/* Day and week */
.calendar-timegrid { min-width: 0; }
.calendar-timegrid-row { display: grid; grid-template-columns: 56px repeat(var(--calendar-days, 7), minmax(0, 1fr)); }
.calendar-timegrid-top { position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--line); background: var(--panel); }
.calendar-corner, .calendar-allday-label { border-right: 1px solid var(--line); }
.calendar-column-head { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; border-right: 1px solid var(--line); padding: 7px 4px 8px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.calendar-column-head:last-child { border-right: 0; }
.calendar-column-head strong { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-soft); font-size: 13px; letter-spacing: 0; }
button.calendar-column-head:hover strong { color: var(--brand-text); background: var(--hover); }
.calendar-column-head.today { color: var(--brand-text); }
.calendar-column-head.today strong, button.calendar-column-head.today:hover strong { color: #fff; background: var(--brand-fill); }
.calendar-allday { border-top: 1px solid var(--line); }
.calendar-allday-label { padding: 7px 6px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.calendar-allday-cell { min-width: 0; min-height: 30px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding: 3px; cursor: pointer; }
.calendar-allday-cell:last-child { border-right: 0; }
.calendar-allday-cell.today { background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.calendar-time-label { font-variant-numeric: tabular-nums; }
.calendar-week-column { min-width: 0; }
.calendar-week-column.today { background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.calendar-week-column:last-child .calendar-slot { border-right: 0; }
.calendar-slot::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); pointer-events: none; }
.calendar-timed-event { right: auto; display: flex; flex-direction: column; gap: 1px; border: 0; box-shadow: 0 0 0 1px var(--panel); line-height: 1.25; text-align: left; }
.calendar-timed-event:hover { z-index: 2; background: color-mix(in srgb, var(--event-colour, var(--brand)) 28%, var(--panel)); }
.calendar-timed-event .calendar-event-time { font-weight: 600; }
.calendar-timed-event .calendar-event-text { overflow: hidden; white-space: normal; }
.calendar-timed-event.short { flex-direction: row; align-items: baseline; gap: 5px; padding-top: 2px; padding-bottom: 0; }
.calendar-timed-event.short .calendar-event-text { order: -1; white-space: nowrap; text-overflow: ellipsis; }
.calendar-timed-event.short .calendar-event-time { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.calendar-now { position: absolute; right: 0; left: 0; z-index: 2; height: 0; border-top: 2px solid var(--danger); pointer-events: none; }
.calendar-now::before { content: ""; position: absolute; top: -5px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* Year */
.calendar-mini-month { min-width: 0; }
.calendar-mini-title { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.calendar-mini-title:hover { color: var(--brand); }
.calendar-mini-grid button { cursor: pointer; font-variant-numeric: tabular-nums; }
.calendar-mini-grid button:hover { color: var(--brand-text); background: var(--hover); }
.calendar-mini-grid button.has-events:hover { background: var(--brand-soft-line); }
.calendar-mini-grid button.today { color: var(--brand-text); font-weight: 800; }

/* Year planner */
.calendar-planner-scroll { overflow-x: auto; }
.calendar-planner { min-width: 920px; display: flex; flex-direction: column; }
.calendar-planner-row { display: grid; grid-template-columns: 64px repeat(31, minmax(24px, 1fr)); border-bottom: 1px solid var(--line); }
.calendar-planner-row:last-child { border-bottom: 0; }
.calendar-planner-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.calendar-planner-number { padding: 7px 0; color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.calendar-planner-month { display: flex; align-items: center; border-right: 1px solid var(--line); padding: 0 8px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.calendar-planner-cell { min-width: 0; min-height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px solid var(--line); padding: 3px 2px; cursor: pointer; }
.calendar-planner-cell:last-child { border-right: 0; }
.calendar-planner-cell.weekend { background: color-mix(in srgb, var(--hover) 70%, var(--panel)); }
.calendar-planner-cell:hover { background: var(--panel-alt); }
.calendar-planner-cell.weekend:hover { background: var(--hover); }
.calendar-planner-cell.blank { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); cursor: default; }
.calendar-planner-cell.today { box-shadow: inset 0 0 0 2px var(--brand); }
.calendar-planner-marker { width: 100%; height: 6px; flex: 0 0 auto; border: 0; border-radius: 2px; padding: 0; background: var(--event-colour, var(--brand)); cursor: pointer; }
.calendar-planner-marker:hover, .calendar-planner-marker:focus-visible { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--ink-soft); }
.calendar-planner-more { color: var(--muted-dark); font-size: 9px; font-weight: 800; line-height: 1; text-align: center; }

/* Year timeline */
.calendar-timeline { --timeline-label: 220px; position: relative; min-width: 640px; }
.calendar-timeline-row { position: relative; z-index: 1; min-height: 34px; display: grid; grid-template-columns: var(--timeline-label) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.calendar-timeline-body > .calendar-timeline-row:hover { background: color-mix(in srgb, var(--hover) 45%, transparent); }
.calendar-timeline-head { position: sticky; top: 0; z-index: 3; min-height: 30px; background: var(--panel); }
.calendar-timeline-label { min-width: 0; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--line); padding: 0 12px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.calendar-timeline-track { position: relative; min-width: 0; }
.calendar-timeline-month { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; border-left: 1px solid var(--line); padding-left: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.calendar-timeline-month:first-child { border-left: 0; }
.calendar-timeline-body { position: relative; }
.calendar-timeline-grid { position: absolute; top: 0; right: 0; bottom: 0; left: var(--timeline-label); z-index: 0; pointer-events: none; }
.calendar-timeline-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.calendar-timeline-today { position: absolute; top: 0; bottom: 0; z-index: 2; border-left: 2px solid var(--danger); }
.calendar-timeline-bar { position: absolute; top: 9px; bottom: 9px; min-width: 4px; border: 0; border-radius: 4px; padding: 0; background: var(--event-colour, var(--brand)); cursor: pointer; }
.calendar-timeline-bar:hover, .calendar-timeline-bar:focus-visible { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--event-colour, var(--brand)); }
.calendar-timeline-bar.clipped-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendar-timeline-bar.clipped-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calendar-timeline-empty { position: relative; z-index: 1; padding: 28px 20px; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 760px) { .calendar-timeline { --timeline-label: 140px; } .calendar-toolbar h3 { min-width: 0; } }

/* ---------- QR code ---------- */
.qr-code { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.qr-code-error { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-dark); padding: 12px; color: var(--muted); font-size: 11px; text-align: center; }