/***********************************************************************
 *          c_yui_form.css
 *
 *      Theme integration for the third-party widgets C_YUI_FORM hosts
 *      (tom-select, vanilla-jsoneditor) plus form-owned input states.
 *
 *      Everything maps to Bulma CSS vars, so a single rule set follows
 *      light/dark automatically (explicit data-theme or system theme) —
 *      no per-theme selectors needed.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

/*--- tom-select (fkey fields): ships light-only colors ---*/
.C_YUI_FORM .ts-wrapper .ts-control {
    background: var(--bulma-scheme-main, #fff);
    color: var(--bulma-text, #4a4a4a);
    border-color: var(--bulma-border, #dbdbdb);
}
.C_YUI_FORM .ts-control > input {
    color: var(--bulma-text, #4a4a4a);
}
.C_YUI_FORM .ts-wrapper.multi .ts-control > div {
    background: var(--bulma-background, #f2f2f2);
    color: var(--bulma-text, #4a4a4a);
}
.C_YUI_FORM .ts-dropdown {
    background: var(--bulma-scheme-main, #fff);
    color: var(--bulma-text, #4a4a4a);
    border-color: var(--bulma-border, #dbdbdb);
}
.C_YUI_FORM .ts-dropdown .option.active {
    background: var(--bulma-link, #485fc7);
    color: var(--bulma-link-invert, #fff);
}

/*--- vanilla-jsoneditor: align its accent with the app palette ---*/
.C_YUI_FORM .jsoneditor {
    --jse-theme-color: var(--bulma-link, #485fc7);
    --jse-theme-color-highlight: var(--bulma-link, #485fc7);
}

/*--- readonly fields (e.g. the pkey in update mode) look readonly ---*/
/*  The BACKGROUND and the cursor are what say "not editable"; the text
 *  is not dimmed for it. `--bulma-text-weak` on that background reads
 *  4.07:1 in dark, under the 4.5 of small text -- and a value you may
 *  read but not change is exactly a value you have to be able to read. */
.C_YUI_FORM input.input[readonly] {
    background-color: var(--bulma-background, #f5f5f5);
    color: var(--bulma-text, #2e333d);
    border-color: var(--bulma-border, #dbdbdb);
    cursor: default;
}

/*  Moved from c_yui_main.css (2.6.1): scroll containment for the fields area.
 *  Self-contained here so every consumer gets it without the
 *  legacy stack's stylesheet. */

.overscroll-contain {
    overscroll-behavior: contain;
}


/*  A colour that cannot be changed. `readonly` does not apply to a colour
 *  input (the spec lists the types it applies to and colour is not one),
 *  so it is `disabled` instead -- and a disabled swatch is drawn by the
 *  browser as a pale ghost of itself, which loses the one thing the field
 *  is for: seeing the colour. Keep the swatch, lose the affordance.  */
.C_YUI_FORM input[type="color"][disabled] {
    opacity: 1;
    cursor: default;
    border-color: var(--bulma-border, #dbdbdb);
}

/*  A json document that cannot be edited. The editor is read-only for
 *  real (`readOnly` at build time); this is what makes it LOOK it --
 *  the menu bar is the whole invitation, and it offers nothing that
 *  reading needs.  */
.C_YUI_FORM .yui-jse-readonly .jse-menu {
    display: none !important;
}
.C_YUI_FORM .yui-jse-readonly {
    background-color: var(--bulma-background, #f5f5f5);
}

/*  The value of a colour, beside its swatch: what the swatch cannot say.
 *  `user-select: all` so one click takes the whole `#e0a800` -- to a
 *  browser that is three words, and a double-click stops at one of them. */
.C_YUI_FORM .yui-color-value {
    margin-left: 0.5rem;
    vertical-align: middle;
    color: var(--bulma-text-weak, #7a7a7a);
    user-select: all;
    -webkit-user-select: all;
    cursor: text;
}
.C_YUI_FORM input[type="color"] {
    vertical-align: middle;
}