/***********************************************************************
 *          tabulator.css
 *
 *          Cross-app Tabulator theme fixes and reusable helpers.
 *
 *          Tabulator is a first-class element across the yunos, so its
 *          styling belongs to the library — not duplicated per app.
 *          Import this once (after `tabulator.min.css` +
 *          `tabulator_bulma.css`) so every consumer gets the same
 *          theme-aware behaviour.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

/* ====================================================================
 *  Active / selected row highlight.
 *  Green wash + left accent, theme-aware, with enough specificity
 *  (three classes) to beat the striped-row !important backgrounds.
 *  Add `yui-row-active` to a `.tabulator-row` element to mark it.
 * ==================================================================== */
.tabulator-row.yui-row-active,
.tabulator-row.yui-row-active.tabulator-row-odd,
.tabulator-row.yui-row-active.tabulator-row-even {
    background-color: #E8F6EE !important;
    box-shadow: inset 4px 0 0 #2BB673;
}

[data-theme=dark] .tabulator-row.yui-row-active,
[data-theme=dark] .tabulator-row.yui-row-active.tabulator-row-odd,
[data-theme=dark] .tabulator-row.yui-row-active.tabulator-row-even {
    background-color: rgba(43, 182, 115, 0.22) !important;
    box-shadow: inset 4px 0 0 #2BB673;
}

/* ====================================================================
 *  Tree expand/collapse control (the +/- box) in dark theme.
 *  Tabulator hardcodes the box border and the +/- strokes to #333 on
 *  a near-black wash — a dark glyph in a dark box on a dark background,
 *  effectively invisible. Repaint border, wash and strokes light.
 * ==================================================================== */
[data-theme=dark] .tabulator-data-tree-control {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme=dark] .tabulator-data-tree-control:hover {
    background: rgba(255, 255, 255, 0.28) !important;
}
[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-expand,
[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-expand:after,
[data-theme=dark] .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
    background: #ffffff !important;
}

/*  Moved from c_yui_main.css (2.6.1): generic Tabulator theming
 *  (column separator, frozen columns, striping/hover, dark + system themes).
 *  Self-contained here so every consumer gets it without the
 *  legacy stack's stylesheet. */

/*********************************************************
 *      Tabulator
 *********************************************************/

/* Visible column separator via pseudo-element on the right-side resize handle only.
   .prev handles (left-side) are excluded so hidden columns (e.g. Select Row when
   not in edit mode) don't leave a spurious line at the start of the table. */
.tabulator .tabulator-col-resize-handle:not(.prev)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--bulma-border);
}

.tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: var(--bulma-background) !important;
}
.tabulator .tabulator-header .tabulator-frozen {
    background-color: var(--bulma-background) !important;
}

/*
 *  Tabulator light theme — alternating row backgrounds
 *  scheme-main-ter (#f5f5f5) gives visible contrast against white odd rows.
 *  !important needed to override the tabulator_bulma.css theme.
 */
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-odd {
    background-color: var(--bulma-scheme-main, #fff) !important;
}

.tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
}

.tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--bulma-background, #ebebeb) !important;
}

/* ====================================================================
 *  Opt-out of the whole-row hover wash + pointer cursor. For tables that
 *  select ONLY through the checkbox column (selectableRows:"highlight"),
 *  the hover highlight reads as a selection. Add `yui-no-row-hover` on the
 *  .tabulator element: unselected rows stay visually static on hover; a
 *  checkbox-selected row keeps its `.tabulator-selected` colour (the
 *  :not() guard leaves it alone). Colours mirror the striping rules so
 *  hover === the row's own background in every theme.
 * ==================================================================== */
.tabulator.yui-no-row-hover .tabulator-row.tabulator-selectable:hover {
    cursor: default !important;
}
.tabulator.yui-no-row-hover
        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
    background-color: var(--bulma-scheme-main, #fff) !important;
    color: var(--bulma-body-color) !important;
}
.tabulator.yui-no-row-hover
        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
    color: var(--bulma-body-color) !important;
}
[data-theme=dark] .tabulator.yui-no-row-hover
        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
    background-color: var(--bulma-body-background-color) !important;
    color: var(--bulma-body-color) !important;
}
[data-theme=dark] .tabulator.yui-no-row-hover
        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
    background-color: var(--bulma-background) !important;
    color: var(--bulma-body-color) !important;
}

/*
 *  Tabulator dark theme
 *  Activated by html[data-theme=dark] (set by the app's theme switcher)
 */
[data-theme=dark] .tabulator {
    background-color: var(--bulma-body-background-color);
    border-color: var(--bulma-border);
    color: var(--bulma-body-color);
}

[data-theme=dark] .tabulator .tabulator-header,
[data-theme=dark] .tabulator .tabulator-header .tabulator-col {
    background-color: var(--bulma-background);
    border-color: var(--bulma-border);
    color: var(--bulma-text);
}

[data-theme=dark] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: var(--bulma-background-bis, var(--bulma-background));
}

[data-theme=dark] .tabulator-row,
[data-theme=dark] .tabulator-row.tabulator-row-odd {
    background-color: var(--bulma-body-background-color) !important;
    color: var(--bulma-body-color);
    border-color: var(--bulma-border);
}

[data-theme=dark] .tabulator-row.tabulator-row-even {
    background-color: var(--bulma-background) !important;
    color: var(--bulma-body-color);
    border-color: var(--bulma-border);
}

[data-theme=dark] .tabulator-row .tabulator-cell {
    border-color: var(--bulma-border);
    color: var(--bulma-body-color);
}

[data-theme=dark] .tabulator-row.tabulator-selectable:hover {
    background-color: var(--bulma-background) !important;
    color: var(--bulma-text) !important;
}

/* ====================================================================
 *  The CELL EDITOR — typography and box, in EVERY theme.
 *
 *  Tabulator hands the editor a bare <input>, and a bare form control does
 *  not inherit typography: the browser gives it its own default (13.33px
 *  Arial), so the value visibly SHRINKS and changes face the moment the cell
 *  enters edit mode. The theme also drops the editing cell's padding
 *  (`.tabulator-editing {padding: 0}`) and the control brings its own, so
 *  the text jumps sideways too. Inherit the font and restore the cell's 4px
 *  so entering edit mode changes nothing but the caret.
 * ==================================================================== */
.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select,
.tabulator-row .tabulator-cell.tabulator-editing textarea,
.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    width: 100%;
    padding: 0 4px;
}

.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select {
    height: 100%;
}

/*
 *  The CELL EDITOR in dark theme.
 *
 *  Tabulator gives its editor input no colour of its own, so it inherits the
 *  browser default: BLACK text on the dark cell — the value disappears the
 *  moment you click into it, and comes back when the field loses focus. Same
 *  for a header-filter input and for a <select>.
 *
 *  `--bulma-body-color` is the DIMMED body text; on the near-black editor
 *  wash it reads washed out just when the eye needs it most (you are typing
 *  into it). The editing state gets `--bulma-text-strong` plus a wash one
 *  step lighter than the row and a link-coloured border, so the open field
 *  is the brightest thing in the table.
 */
[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input,
[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing select,
[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea {
    background-color: var(--bulma-grey-darker, #2b2f38);
    color: var(--bulma-text-strong, #f5f6f7) !important;
    caret-color: var(--bulma-text-strong, #f5f6f7);
    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
}

/*  Tabulator's inputs are bare `input`s, so Bulma's placeholder colour
 *  never reaches them: in the light scheme they were left at the
 *  BROWSER's default (3.09:1) and in the dark one they were painted
 *  with `--bulma-text-weak` (4.07). One rule for every scheme, the same
 *  70% of the text colour the rest of the library uses -- `filter
 *  column…` is what says what that box does.  */
.tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
.tabulator .tabulator-header .tabulator-header-filter input::placeholder {
    color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.7);
    opacity: 1;
}

/* ====================================================================
 *  The HEADER FILTER box is FURNITURE, not an open editor.
 *
 *  Both are inputs inside the table, so they shared these rules -- but an
 *  editor is a MODE: one cell, while you type into it, and deliberately the
 *  brightest thing on screen. A filter box is permanent and there is one per
 *  column, so wearing the editor's border a header of eight columns drew
 *  eight hard boxes across the top of every table, link-BLUE in dark theme.
 *
 *  Discreet at rest -- a hairline in the theme's weakest border colour, no
 *  wash of its own -- and only the FOCUSED one stands out, which is the one
 *  you are typing in.
 * ==================================================================== */
/*  `.tabulator-col` is in the selector to MATCH tabulator_bulma.css, which
 *  paints this border at `.tabulator .tabulator-header .tabulator-col
 *  .tabulator-header-filter input`. Without that one class the rule below
 *  loses the cascade by specificity and nothing here has any effect --
 *  which is exactly what happened the first time.  */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
    /*  A neutral translucent grey, NOT `--bulma-border`: that token does not
     *  flip with the theme here -- it stays #dbdbdb, which is a hairline on
     *  white and a bright line on near-black. 35% mid-grey reads as the same
     *  quiet hairline over both, and needs no per-theme rule.  */
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 3px;
    background-color: transparent;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:focus {
    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
    outline: none;
}

[data-theme=dark] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
[data-theme=dark] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
    color: var(--bulma-text-strong, #f5f6f7);
    caret-color: var(--bulma-text-strong, #f5f6f7);
}

[data-theme=dark] .tabulator-row.tabulator-selected {
    background-color: var(--bulma-link) !important;
    color: var(--bulma-link-invert) !important;
}

[data-theme=dark] .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--bulma-link-invert) !important;
}

[data-theme=dark] .tabulator .tabulator-footer {
    background-color: var(--bulma-background);
    border-color: var(--bulma-border);
    color: var(--bulma-text);
}

[data-theme=dark] .tabulator .tabulator-footer .tabulator-page {
    background-color: transparent;
    color: var(--bulma-text);
    border-color: var(--bulma-border);
}

[data-theme=dark] .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background-color: var(--bulma-background);
    color: var(--bulma-text);
}

[data-theme=dark] .tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--bulma-link);
    color: var(--bulma-link-invert);
}

/*  The paginator paints its OWN colour -- tabulator_bulma.css sets
 *  `color: hsl(0, 0%, 21%)` on `.tabulator-paginator` itself -- so the
 *  footer's colour never reaches the "Rows per page" label: near-black
 *  text on the dark footer, legible only if you knew it was there. Say
 *  it on the element that sets it, and on the native <select>, which
 *  otherwise keeps the browser's light chrome.  */
[data-theme=dark] .tabulator .tabulator-footer .tabulator-paginator,
[data-theme=dark] .tabulator .tabulator-footer .tabulator-paginator label {
    color: var(--bulma-text);
}

[data-theme=dark] .tabulator .tabulator-footer .tabulator-page-size {
    background-color: var(--bulma-background);
    color: var(--bulma-text);
    border-color: var(--bulma-border);
}

[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: var(--bulma-background) !important;
}

/* system theme: follow OS preference */
@media (prefers-color-scheme: dark) {
    [data-theme=system] .tabulator {
        background-color: var(--bulma-body-background-color);
        border-color: var(--bulma-border);
        color: var(--bulma-body-color);
    }
    [data-theme=system] .tabulator .tabulator-header,
    [data-theme=system] .tabulator .tabulator-header .tabulator-col {
        background-color: var(--bulma-background);
        border-color: var(--bulma-border);
        color: var(--bulma-text);
    }
    [data-theme=system] .tabulator-row,
    [data-theme=system] .tabulator-row.tabulator-row-odd {
        background-color: var(--bulma-body-background-color) !important;
        color: var(--bulma-body-color);
        border-color: var(--bulma-border);
    }
    [data-theme=system] .tabulator-row.tabulator-row-even {
        background-color: var(--bulma-background) !important;
        color: var(--bulma-body-color);
        border-color: var(--bulma-border);
    }
    [data-theme=system] .tabulator-row .tabulator-cell {
        border-color: var(--bulma-border);
        color: var(--bulma-body-color);
    }
    [data-theme=system] .tabulator-row.tabulator-selectable:hover {
        background-color: var(--bulma-background) !important;
    }
    [data-theme=system] .tabulator.yui-no-row-hover
            .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
        background-color: var(--bulma-body-background-color) !important;
        color: var(--bulma-body-color) !important;
    }
    [data-theme=system] .tabulator.yui-no-row-hover
            .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
        background-color: var(--bulma-background) !important;
        color: var(--bulma-body-color) !important;
    }
    /*  same editor fix as [data-theme=dark] above  */
    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing input,
    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing select,
    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing textarea {
        background-color: var(--bulma-grey-darker, #2b2f38);
        color: var(--bulma-text-strong, #f5f6f7) !important;
        caret-color: var(--bulma-text-strong, #f5f6f7);
        border-color: var(--bulma-link-on-scheme, var(--bulma-link, #4a9eff));
    }
    /*  same furniture-not-editor rule as [data-theme=dark] above  */
    [data-theme=system] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
    [data-theme=system] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
        color: var(--bulma-text-strong, #f5f6f7);
        caret-color: var(--bulma-text-strong, #f5f6f7);
    }
    [data-theme=system] .tabulator-row.tabulator-selected {
        background-color: var(--bulma-link) !important;
        color: var(--bulma-link-invert) !important;
    }
    [data-theme=system] .tabulator .tabulator-footer {
        background-color: var(--bulma-background);
        border-color: var(--bulma-border);
        color: var(--bulma-text);
    }
    [data-theme=system] .tabulator .tabulator-footer .tabulator-page {
        background-color: transparent;
        color: var(--bulma-text);
        border-color: var(--bulma-border);
    }
    [data-theme=system] .tabulator .tabulator-footer .tabulator-page.active {
        background-color: var(--bulma-link);
        color: var(--bulma-link-invert);
    }
    /*  same paginator-paints-its-own-colour rule as [data-theme=dark]  */
    [data-theme=system] .tabulator .tabulator-footer .tabulator-paginator,
    [data-theme=system] .tabulator .tabulator-footer .tabulator-paginator label {
        color: var(--bulma-text);
    }
    [data-theme=system] .tabulator .tabulator-footer .tabulator-page-size {
        background-color: var(--bulma-background);
        color: var(--bulma-text);
        border-color: var(--bulma-border);
    }
}