/*
 * Smart.Blazor -> IATS Token Remapping
 * MUST load AFTER smart.default.css to override its :root declarations.
 * All Smart components automatically inherit IATS theme colors via these mappings.
 */
:root {
    /* === Core === */
    --smart-primary: var(--iats-brand-primary);
    --smart-primary-color: var(--iats-btn-primary-text);
    --smart-background: var(--iats-input-bg);
    --smart-background-color: var(--iats-input-text);
    --smart-surface: var(--iats-bg-surface-raised);
    --smart-surface-color: var(--iats-text-primary);
    --smart-error: var(--iats-input-invalid);
    --smart-border: var(--iats-input-border);

    /* === Font === */
    --smart-font-family: var(--iats-font-family);
    --smart-font-size: var(--iats-font-size-sm);

    /* === Border geometry === */
    --smart-border-radius: var(--iats-radius-sm);
    --smart-outline: var(--iats-input-focus-border);

    /* === Hover === */
    --smart-ui-state-hover: var(--iats-accent-primary-light);
    --smart-ui-state-color-hover: var(--iats-text-primary);
    --smart-ui-state-border-hover: var(--iats-accent-primary-light);

    /* === Focus === */
    --smart-ui-state-focus: var(--iats-accent-primary-light);
    --smart-ui-state-color-focus: var(--iats-text-primary);
    --smart-ui-state-border-focus: var(--iats-input-focus-border);

    /* === Active (pressed) === */
    --smart-ui-state-active: var(--iats-accent-primary);
    --smart-ui-state-color-active: var(--iats-text-inverse);
    --smart-ui-state-border-active: var(--iats-accent-primary);

    /* === Selected === */
    --smart-ui-state-selected: var(--iats-accent-primary-light);
    --smart-ui-state-color-selected: var(--iats-accent-primary);
    --smart-ui-state-border-selected: var(--iats-accent-primary-light);

    /* === Disabled === */
    --smart-disabled: var(--iats-bg-surface-raised);
    --smart-disabled-color: var(--iats-text-tertiary);

    /* === Dropdown popup shadow === */
    --smart-elevation-8: var(--iats-shadow-md);

    /* === Scrollbar === */
    --smart-scroll-bar-thumb-background: var(--iats-scrollbar-thumb);
    --smart-scroll-bar-track-background: var(--iats-scrollbar-track);
    --smart-scroll-bar-background: var(--iats-scrollbar-track);
    --smart-scroll-bar-border: var(--iats-scrollbar-track);
    --smart-scroll-bar-thumb-border: var(--iats-scrollbar-thumb);
}

/* Smart.Blazor's smart.default.css hardcodes `.form-control { color: #495057 }`,
   clobbering Bootstrap's `color: var(--bs-body-color)` and our --iats-input-text
   remap from app.css. This file loads after smart.default.css, so re-asserting
   the variable read here wins the cascade. .form-select is unaffected — Smart
   doesn't override it. */
.form-control {
    color: var(--bs-body-color);
}

/* Smart.Blazor also resets .form-control font-size to var(--smart-font-size)
   (= --iats-font-size-sm / 0.875rem) but leaves .form-select at Bootstrap's
   1rem default, which makes <select>s render taller than sibling <input>s in
   the same form row. Apply the same size to .form-select so the controls
   line up. */
.form-select {
    font-size: var(--smart-font-size);
}

/* TodaysScheduledWorkWidget donut slice colors.
   Smart renders the donut as bare <svg> <path> elements with no per-slice
   class and sets `fill` as a presentation attribute, so it can't read
   --iats-* tokens and a scoped .razor.css can't reach it (the JS-built SVG
   never gets the b-* scope attribute). A normal global rule here wins over
   the presentation attribute. The two slices render in data order — completed
   first, then missing — and inherit --metric-complete / --metric-missing from
   the .todays-work-metric--* section modifier, so each donut picks up its own
   themed pair automatically. */
/* Slice 1 is the missing segment, slice 2 the completed segment — the order
   matches BuildChartData (missing first, completed second). */
.todays-work-metric smart-chart path:nth-of-type(1) {
    fill: var(--metric-missing);
}

.todays-work-metric smart-chart path:nth-of-type(2) {
    fill: var(--metric-complete);
}

/* Drop the per-slice outline Smart strokes around each arc (it derives a line
   colour per slice). The slices are the only <path>s, so this clears the
   borders and lets adjacent arcs sit flush. */
.todays-work-metric smart-chart path {
    stroke: none;
}

/* Keep the donut's open space transparent in every theme so the card surface
   shows through. Two layers paint a background and both must be cleared:
     1. the Smart host element — .smart-element sets background: var(--smart-background)
        (remapped to --iats-input-bg), which is the off-card square in dark mode;
     2. the chart's own drawn <rect>, whose fill is a hardcoded theme colour
        (#FFFFFF light / #2E2E2E dark), not an --iats-* token, so Chart.BackgroundColor
        can't theme it.
   A donut's only <rect> is this background (slices are <path>, the tooltip is
   HTML), so neither rule affects the data or tooltips. */
.todays-work-metric smart-chart {
    background: transparent;
}

.todays-work-metric smart-chart rect {
    fill: transparent !important;
}

/* Tooltip theming. Smart leaves the chart in its light theme, so the tooltip
   background is a hardcoded near-white and its text resolves to a light
   --smart token — fine in light mode, washed out in dark. Re-theme the box and
   text through --iats-* tokens so the tooltip adapts to light/dark. Smart sets
   the background inline, so !important is needed to win over it.
   NOTE: the tooltip is appended to document.body (positioned with page
   coordinates), NOT inside the widget — so these selectors must be global, not
   scoped to .todays-work-metric, to reach it. */
.smart-chart-tooltip .smart-chart-tooltip-content {
    background-color: var(--iats-bg-surface-raised) !important;
    border-color: var(--iats-input-border) !important;
}

.smart-chart-tooltip .smart-chart-tooltip-text {
    fill: var(--iats-text-primary) !important;
    color: var(--iats-text-primary) !important;
}