/***********************************************************************
 *          c_yui_treedb_topics.css
 *
 *      Styling for C_YUI_TREEDB_TOPICS' cards-landing (list -> detail):
 *      the topic cards (three hash-routed icon actions) and the routed
 *      topic-info panel. Theme-aware via Bulma variables.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/

/*  One topic card: name on top, a row of icon actions below.
 *  The grid itself is the shell's .yui-nav-cards. */
.TREEDB_TOPIC_CARD {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border: 1px solid var(--bulma-border-weak, #dbdbdb);
    border-radius: 0.5rem;
    background: var(--bulma-scheme-main, #fff);
    color: var(--bulma-text, inherit);
}
.TREEDB_TOPIC_CARD {
    cursor: pointer;
}
/*  Selected (clicked) card: link-coloured border + soft ring. */
.TREEDB_TOPIC_CARD.is-selected {
    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
    box-shadow: 0 0 0 2px var(--bulma-link-on-scheme, var(--bulma-link, #485fc7)) inset;
}
.TREEDB_TOPIC_CARD .TREEDB_TOPIC_CARD_NAME {
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}
/*  What the card says about its topic: version + columns, then the
 *  topics it hangs from and the ones hanging from it. Muted and small,
 *  under the name; a long list is cut, whole in the title. The spans
 *  are spaced by `gap` because createElement2 trims text nodes.  */
.TREEDB_TOPIC_CARD_META,
.TREEDB_TOPIC_CARD_REL {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    max-width: 100%;
    font-size: 0.75rem;
    color: var(--bulma-text-weak, #7a7a7a);
    white-space: nowrap;
}
.TREEDB_TOPIC_CARD_COLS {
    display: inline-flex;
    gap: 0.25rem;
}
.TREEDB_TOPIC_CARD_REL_LIST {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bulma-text, inherit);
}
.TREEDB_TOPIC_CARD_PKEY2S .TREEDB_TOPIC_CARD_REL_LIST {
    font-weight: 600;
}
.TREEDB_TOPIC_CARD_ACTIONS {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}
.TREEDB_TOPIC_CARD_ACTIONS > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    color: var(--bulma-text, inherit);
    text-decoration: none;
}
.TREEDB_TOPIC_CARD_ACTIONS > a .icon {
    font-size: 1.15rem;
}
.TREEDB_TOPIC_CARD_ACTIONS > a:hover,
.TREEDB_TOPIC_CARD_ACTIONS > a:focus-visible {
    background: var(--bulma-background, #f5f5f5);
    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
}

/*  Routed topic-info panel. */
.TREEDB_TOPIC_INFO {
    padding: 1rem;
}
.TREEDB_TOPIC_INFO .TREEDB_TOPIC_INFO_CARD {
    max-width: 48rem;
}
.TREEDB_TOPIC_INFO table code {
    background: transparent;
    padding: 0;
}

/*  The backend url in the toolbar, between the left buttons and the
 *  json button (which keeps itself flush right with margin-left:auto).
 *  The buttons never shrink: when the row runs out of room it is the
 *  url that gives way, one character at a time, down to its icon. */
.TREEDB_TOPICS_TOOLBAR > .button {
    flex: none;
}
.TREEDB_TOPICS_SOURCE {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--bulma-text-weak, #7a7a7a);
}
.TREEDB_TOPICS_SOURCE .icon {
    flex: none;
}
/*  One line, cut with an ellipsis. The whole url stays in the title. */
.TREEDB_TOPICS_SOURCE .TREEDB_TOPICS_SOURCE_URL {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}