/* AI Dashboards — shared primitives (buttons, chips, badges, pills).
   Global rather than scoped because the widget card, the assistant
   panel, the draft card and the print page all use them, and scoped CSS
   does not cross component boundaries. Every class is aid-* prefixed
   (registered in memory.md). Layout lives in each component's scoped
   .razor.css. Same loading pattern as dashboard-portals.css. */

/* ── Colour channels ──────────────────────────────────────────────
   The spec gives the AI Dashboard surfaces as fixed-alpha brand colours over the light canvas
   (#223029 ink, #A3E96B accent, #F9574D danger). Written literally they never adapt, so the three
   channels live here as space-separated RGB triples and every aid-* rule — global and scoped —
   writes rgb(var(--aid-*-rgb) / <alpha>). Light values are the spec's, unchanged. In dark mode the
   ink channel flips to white so hairlines and dashed outlines stay visible, while the shadow
   channel goes to black (a white shadow is not a shadow); accent and danger are brand colours that
   read on either canvas, so they do not flip.
── */
:root,
[data-theme="light"] {
    --aid-ink-rgb: 34 48 41;
    --aid-shadow-rgb: 34 48 41;
    --aid-accent-rgb: 163 233 107;
    --aid-danger-rgb: 249 87 77;
    --aid-toolbar-bg: rgb(247 247 247 / 0.86);
}

.dark,
[data-theme="dark"] {
    --aid-ink-rgb: 255 255 255;
    --aid-shadow-rgb: 0 0 0;
    --aid-toolbar-bg: rgb(26 41 34 / 0.9);
}

.aid-spacer {
    flex: 1 1 auto;
}

/* ── Buttons: the existing three styles only (bright-green primary,
      outline, ghost icon) — no fourth style. ─────────────────────── */
.aid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: 44px;
    padding: 0 var(--space-5);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-content-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aid-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.aid-btn--sm {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: 12px;
}

.aid-btn--primary {
    border: 0;
    background: var(--color-bright-green);
    color: var(--color-midnight);
    font-weight: 700;
}

.aid-btn--primary:hover:not(:disabled) {
    background: var(--vp-action-btn-hover-bg, var(--color-bright-green));
    filter: brightness(0.94);
}

.aid-btn--outline {
    border: 1px solid var(--color-gray-02);
    background: var(--vp-card-bg);
}

.aid-btn--outline:hover:not(:disabled) {
    background: var(--color-midnight);
    border-color: var(--color-midnight);
    color: var(--color-white);
}

/* Card-header icon buttons: one size and style for all three (data table,
   reload, fullscreen) so the cluster lines up; the table toggle shows its
   "on" state with a fill rather than a different shape. */
.aid-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--vp-icon-btn-color, var(--color-gray-01));
    cursor: pointer;
}

.aid-icon-btn .material-icons {
    font-size: 18px;
    line-height: 1;
}

.aid-icon-btn:hover {
    background: var(--vp-icon-btn-hover-bg, var(--color-gray-04));
    color: var(--vp-icon-btn-hover-color, var(--color-midnight));
}

.aid-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--aid-accent-rgb) / 0.35);
}

.aid-icon-btn--on {
    background: rgb(var(--aid-accent-rgb) / 0.18);
    border-color: var(--color-bright-green);
    color: var(--vp-content-text);
}

.aid-link {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Chips & pills ───────────────────────────────────────────────── */
.aid-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 28px;
    padding: 0 var(--space-2) 0 10px;
    border: 1px solid var(--color-gray-02);
    border-radius: 999px;
    background: var(--vp-card-bg);
    font-size: 12px;
    color: var(--vp-content-text);
    white-space: nowrap;
}

.aid-chip .material-icons {
    font-size: 14px;
    color: var(--color-gray-01);
}

.aid-chip select {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    padding-right: 2px;
}

.aid-chip__key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-01);
}

.aid-chip--static {
    padding-right: var(--space-1);
}

.aid-chip__remove {
    border: 0;
    background: none;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-gray-01);
    cursor: pointer;
}

.aid-chip__remove:hover {
    color: var(--color-red);
}

.aid-chip--action {
    height: 26px;
    padding: 0 10px;
    border-color: rgb(var(--aid-ink-rgb) / 0.16);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.aid-chip--action:hover:not(:disabled) {
    border-color: var(--color-bright-green);
    background: rgb(var(--aid-accent-rgb) / 0.14);
}

.aid-chip--action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.aid-chip--dashed {
    border-style: dashed;
    border-color: rgb(var(--aid-ink-rgb) / 0.22);
}

.aid-chip--selected {
    border-color: var(--color-bright-green);
    background: var(--color-bright-green);
}

.aid-chip--soft {
    height: 22px;
    padding: 0 9px;
    border-color: rgb(var(--aid-ink-rgb) / 0.1);
    background: var(--color-beige-50);
    font-size: 11px;
    font-weight: 600;
}

.aid-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aid-badge--ai {
    background: rgb(var(--aid-accent-rgb) / 0.18);
    color: var(--vp-content-text);
}

.aid-badge--failed {
    background: rgb(var(--aid-danger-rgb) / 0.12);
    color: var(--vp-status-danger);
}

.aid-edit-pill {
    height: 28px;
    padding: 0 var(--space-3);
    border: 1px solid var(--vp-content-text);
    border-radius: 999px;
    background: var(--vp-card-bg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--vp-content-text);
    cursor: pointer;
}

.aid-edit-pill:hover {
    background: var(--color-midnight);
    color: var(--color-white);
}

.aid-width-btn,
.aid-remove-btn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-gray-02);
    border-radius: 999px;
    background: var(--vp-card-bg);
    font-size: 12px;
    color: var(--vp-content-text);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.aid-remove-btn:hover {
    border-color: var(--color-red);
    color: var(--color-red);
}

/* Bound text-block value token (purple), printed as plain text. */
.aid-token {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-purple);
    border-radius: 999px;
    background: var(--color-light-purple);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media print {
    .aid-token {
        border: 0;
        background: none;
        padding: 0;
    }
}