/***********************************************************************
 *          c_yui_treedb_topic_with_form.css
 *
 *      Minimal styling for C_YUI_TREEDB_TOPIC_WITH_FORM.
 *      Only the row-count footer for now: Tabulator's default
 *      footer chrome (padding + min-height) is taller than a data
 *      row, so collapse it to a thin status strip.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

.tabulator .tabulator-footer {
    padding: 0;
    min-height: 0;
}
.tabulator .tabulator-footer .tabulator-footer-contents {
    padding: 0.2rem 0;
    margin: 0;
    min-height: 0;
}
.tabulator .tabulator-footer .yui-tabulator-rowcount {
    line-height: 1.5;
}

/*  All rows fit in one page: the First/Prev/1/Next/Last strip is pure
 *  noise (worst on mobile) — update_rowcount() toggles the class on every
 *  data change. The page-size SELECTOR stays: it is what made the table
 *  one page in the first place ("All" on a topic of 300 rows), so hiding
 *  it together with the buttons left the reader no way back to 50.  */
.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-page,
.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-pages {
    display: none;
}

/*  No choice in the selector would change anything either — the topic is
 *  smaller than the smallest page size it offers — so the whole strip,
 *  label and select included, is noise.  */
.tabulator.yui-no-paginator .tabulator-footer .tabulator-paginator {
    display: none;
}

/*  Toolbar wrapping discipline (mobile): the record-buttons group
 *  must never split across lines — Bulma .buttons wraps internally,
 *  which stacked the toolbar into 3 rows on narrow phones. Keep the
 *  group on one line and scroll it horizontally if it overflows
 *  (same distribute-or-scroll pattern as the nav icon-bar); the
 *  search+refresh block then wraps as a whole, so the toolbar is
 *  1 row when it fits and exactly 2 when it doesn't.  */
.toolbar_tabulator_table .buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}
.toolbar_tabulator_table .control.has-icons-left {
    min-width: 0;
}

/*  Search box width: a rule, not an inline style, so the mobile block
 *  below can widen it (an inline max-width would win over any class).  */
.TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH .input {
    max-width: 200px;
}

/*  Mobile: the tools of the list (search + refresh) take a row of their
 *  own, with the search stretched across it and the refresh pinned at
 *  the end. Without this the group keeps its natural width and leaves
 *  dead space, while the search -- the most used control of the two --
 *  stays the narrowest thing on screen. The refresh label is already
 *  dropped by is-hidden-mobile, decided in the markup: measuring at
 *  runtime would change the shape of the bar on a language switch.  */
@media screen and (max-width: 768px) {
    .TREEDB_TABLE_TOOLS {
        width: 100%;
    }
    .TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH {
        flex: 1 1 auto;
    }
    .TREEDB_TABLE_TOOLS .TREEDB_TABLE_SEARCH .input {
        max-width: none;
    }
}

/*  The edit/create form runs in the shell's standardized adaptive dialog
 *  (yui_shell_show_modal dialog:true, logical_class TREEDB_FORM_SHEET). The
 *  shell CSS already gives it the centred card / full-screen-mobile sheet;
 *  here we only widen it on desktop — a label+field record form wants more
 *  room than the default 640px. Mobile stays edge-to-edge (shell rule). */
@media screen and (min-width: 769px) {
    .TREEDB_FORM_SHEET .yui-dialog-content {
        max-width: 50rem;
    }
}

/*  Cell of a col holding a JSON document: a truncated preview that opens
 *  the whole value in a viewer. Bulma already paints an <a> as a link
 *  (colour + pointer cursor, href or not — the click is an FSM event,
 *  not a navigation), so the only thing to state here is that a preview
 *  of a JSON fragment must stay on ONE line: wrapped, it would make the
 *  row of every structured record three lines tall.  */
.JSON_CELL {
    white-space: nowrap;
}
.JSON_CELL .JSON_CELL_ICON {
    margin-right: 0.25rem;
    vertical-align: middle;
}
.JSON_CELL .JSON_CELL_PREVIEW {
    text-decoration: underline;
    vertical-align: middle;
}

.without-border {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}


/*  Cell of a col flagged `icon`: the glyph is a CSS mask sized in `em`,
 *  so it comes out at the row's font size -- smaller than the 18px the
 *  `image` cells next to it get. A touch larger, and centred on the row
 *  rather than on the text baseline.  */
.ICON_CELL {
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
}

/*
 *  What a `file` column shows in a cell: the asset id, shortened, or the
 *  word for having none. Monospace because it is a hash and a hash read
 *  in a proportional font is unreadable.
 */
.FILE_CELL {
    font-family: monospace;
}

.FILE_CELL.is-empty {
    font-family: inherit;
    font-style: italic;
    opacity: 0.6;
}

/*
 *  A file cell that names an asset is a LINK: the click opens it
 *  (EV_SHOW_CELL_FILE). Same shape as the JSON cell beside it.
 */
.FILE_CELL_LINK {
    white-space: nowrap;
}
.FILE_CELL_LINK .FILE_CELL_ICON {
    margin-right: 0.25rem;
    vertical-align: middle;
}
.FILE_CELL_LINK .FILE_CELL_ID {
    text-decoration: underline;
    vertical-align: middle;
}
.FILE_CELL_LINK .FILE_CELL_MORE {
    margin-left: 0.35rem;
    font-family: inherit;
    opacity: 0.7;
    vertical-align: middle;
}

/*
 *  The file popup: one item per asset the cell names, each the thing
 *  itself and a caption (what it is, and a way to open it full size).
 */
.TREEDB_CELL_FILE {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem;
    height: 100%;
    overflow: auto;
}
.TREEDB_CELL_FILE .CELL_FILE_ITEM {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.TREEDB_CELL_FILE img.CELL_FILE_MEDIA,
.TREEDB_CELL_FILE video.CELL_FILE_MEDIA {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
.TREEDB_CELL_FILE audio.CELL_FILE_MEDIA {
    width: 100%;
}
.TREEDB_CELL_FILE iframe.CELL_FILE_MEDIA {
    min-height: 60vh;
}
.TREEDB_CELL_FILE .CELL_FILE_CAPTION {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    opacity: 0.85;
}
.TREEDB_CELL_FILE .CELL_FILE_ID {
    font-family: monospace;
    overflow-wrap: anywhere;
}

/*
 *  The table is showing only the rows linked to one record, because a
 *  hook was clicked (EV_FILTER_BY_PARENT). Said above the table, with
 *  the way out beside it: a filter nobody can see is a table that looks
 *  like it lost rows.
 */
.TREEDB_PARENT_FILTER {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--bulma-border, #dbdbdb);
    background: var(--bulma-scheme-main-bis, transparent);
}
.TREEDB_PARENT_FILTER .PARENT_FILTER_ID {
    font-family: monospace;
    overflow-wrap: anywhere;
}

/*
 *  A hook whose children live in more than one topic: which one to open.
 */
.TREEDB_HOOK_CHOICE {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}