/* Smart table (Components/Tables/DataTable.razor), ported from the Bitlago DataTable used by
   Tessera and restyled in BTL101 tokens (app.css :root). Every selector starts with bdt- so it
   cannot reach other markup. Sizes come from data-table.js through CSSOM: the CSP forbids
   style attributes, so nesting depth is a class (bdt-depth-N) instead of an inline variable. */

:root {
    --bdt-border: var(--border);
    --bdt-border-strong: var(--border-strong);
    --bdt-muted: var(--muted);
    --bdt-head: var(--text);
    --bdt-accent: var(--accent);
    --bdt-surface: rgba(0, 0, 0, 0.22);
    --bdt-hover: rgba(0, 212, 255, 0.04);
    --bdt-field: var(--field);
}

/* ---------- toolbar above the table ---------- */

.bdt-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
    font-size: .8125rem;
    color: var(--bdt-muted);
}

.bdt-count {
    font-variant-numeric: tabular-nums;
}

.bdt-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .5rem;
    border: 1px solid var(--bdt-border);
    border-radius: 999px;
    background: var(--bdt-field);
    font-size: .75rem;
    color: var(--bdt-head);
}

.bdt-chip-clear {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    color: var(--bdt-muted);
    cursor: pointer;
    font-size: .9rem;
}

.bdt-chip-clear:hover {
    color: var(--danger);
}

/* ---------- table shell ---------- */

/* The component root stacks toolbar, scroller and grip. */
.bdt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The scroll container. Sticky positioning resolves against the nearest
   scrolling ancestor, so the header only stays put once *this* element is what
   scrolls — a wrapper with no height cap scrolls the page instead and the
   header sails away with it. */
.bdt-wrap {
    border: 1px solid var(--bdt-border);
    border-radius: .5rem;
    overflow: auto;
    background: var(--bdt-field);
    min-width: 0;
}

.bdt-h-fixed > .bdt-wrap {
    max-height: var(--bdt-h, 60vh);
}

/* When a grip follows the scroller, the rounded bottom corners belong to the
   grip — otherwise the two read as separate boxes stacked by accident. */
.bdt:has(> .bdt-grip) > .bdt-wrap {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- height grip ---------- */

.bdt-grip {
    height: .75rem;
    margin-top: -1px;
    border: 1px solid var(--bdt-border);
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;
    background: var(--bdt-surface);
    cursor: ns-resize;
    position: relative;
    transition: background-color .12s ease-in-out;
}

/* The dots are the affordance — a bare strip reads as a border, not a handle. */
.bdt-grip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.75rem;
    height: 2px;
    transform: translate(-50%, -50%);
    border-top: 2px dotted var(--bdt-border-strong);
}

.bdt-grip:hover,
.bdt-grip.is-dragging {
    background: var(--bdt-hover);
}

table.bdt-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

/* Applied only once every visible column has an explicit width. Fixed layout is
   what makes a drag move one column instead of reflowing all of them; with a
   width missing the browser starts redistributing again and the drag fights
   itself.

   The width stays at 100% and the component supplies min-width as the exact sum
   of the chosen column widths. `max-content` would be wrong: it measures the
   *content*, so a table whose columns comfortably fit would still be forced
   wide enough for its longest cell and scroll sideways for no reason. */
table.bdt-table.is-fixed {
    table-layout: fixed;
}

table.bdt-table.is-fixed th,
table.bdt-table.is-fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
}

table.bdt-table.is-fixed .bdt-head-row th {
    white-space: nowrap;
}

/* ---------- header ---------- */

/* The label row is sticky so a long table keeps its column names while the
   filter row scrolls away with the data — filters are set once, column names
   are read constantly. */
.bdt-table thead tr.bdt-head-row th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bdt-surface);
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--bdt-border);
    white-space: nowrap;
    text-align: inherit;
}

/* A heading is a label that happens to be clickable, so it carries no button
   chrome at all — the affordance is the chevron and the hover colour. */
.bdt-sort {
    all: unset;
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    cursor: pointer;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bdt-muted);
    transition: color .12s ease-in-out;
}

.bdt-sort:hover,
.bdt-sort:focus-visible {
    color: var(--bdt-accent);
}

.bdt-sort:focus-visible {
    outline: 2px solid rgba(0, 212, 255, .35);
    outline-offset: 2px;
    border-radius: 2px;
}

.bdt-head-static {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bdt-muted);
}

/* Reserve the arrow's width always, so labels do not shift sideways when a
   column becomes sorted. */
.bdt-arrow {
    display: inline-block;
    min-width: .6em;
    font-size: .625rem;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.bdt-sort:hover .bdt-arrow {
    opacity: .4;
}

.bdt-sort.is-sorted {
    color: var(--bdt-accent);
}

.bdt-sort.is-sorted .bdt-arrow {
    opacity: 1;
}

.bdt-rank {
    font-size: .5625rem;
    font-weight: 700;
    color: #00111a;
    background: var(--bdt-accent);
    border-radius: 999px;
    padding: 0 .3em;
    line-height: 1.4;
}

/* ---------- filter row ---------- */

.bdt-table thead tr.bdt-filter-row th {
    position: sticky;
    /* Set from JS once the label row has been laid out — the offset depends on
       whether headings wrapped, which CSS cannot know up front. */
    top: var(--bdt-head-h, 2rem);
    z-index: 2;
    background: var(--bdt-field);
    padding: .35rem .5rem .5rem;
    border-bottom: 2px solid var(--bdt-border-strong);
}

.bdt-filter {
    width: 100%;
    /* Kept small on purpose: this minimum is multiplied by every column, so a
       generous value here is what stops an otherwise-fitting table from fitting
       its card. Three characters of feedback is enough for a filter box. */
    min-width: 3rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: var(--bdt-surface);
    padding: .2rem .45rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--bdt-head);
    transition: border-color .12s ease-in-out, background-color .12s ease-in-out;
}

.bdt-filter::placeholder {
    color: #4b5563;
}

.bdt-filter:hover {
    border-color: var(--bdt-border);
}

.bdt-filter:focus {
    outline: none;
    background: var(--bdt-field);
    border-color: var(--bdt-accent);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .18);
}

/* A choice filter is the same control in a different shape. box-sizing matters
   here and not on the input: a select's default content-box would push the
   column past the width the header measured. */
select.bdt-filter {
    box-sizing: border-box;
    padding-right: .25rem;
    cursor: pointer;
}

/* An active filter has to be obvious — otherwise an empty-looking table reads
   as missing data rather than a narrowed view. */
.bdt-filter.is-active {
    background: var(--bdt-field);
    border-color: var(--bdt-accent);
}

/* ---------- body ---------- */

.bdt-table tbody td {
    padding: .45rem .625rem;
    border-bottom: 1px solid var(--bdt-border);
    vertical-align: middle;
}

.bdt-table tbody tr:last-child td {
    border-bottom: 0;
}

.bdt-table tbody tr:hover td {
    background: var(--bdt-hover);
}

.bdt-table tbody td a {
    text-decoration: none;
}

.bdt-table tbody td a:hover {
    text-decoration: underline;
}

.bdt-empty {
    padding: 1.5rem .625rem;
    text-align: center;
    color: var(--bdt-muted);
}

/* Numbers read wrong ragged; tabular figures keep the columns aligned. */
.bdt-table .text-end {
    font-variant-numeric: tabular-nums;
}

/* ---------- column resize handle ---------- */

/* Sits in the header cell's padding, not beside the label, so it does not
   consume width the column could use for content. */
.bdt-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
    user-select: none;
}

.bdt-resizer::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 3px;
    width: 1px;
    height: 70%;
    background: var(--bdt-border-strong);
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.bdt-resizer:hover::after,
.bdt-resizer.is-dragging::after {
    opacity: 1;
    background: var(--bdt-accent);
}

.bdt-resizer.is-dragging::after {
    width: 2px;
}

/* While dragging, the pointer owns the gesture: text selection and hover
   feedback elsewhere are only noise. */
body.bdt-dragging {
    user-select: none;
    cursor: col-resize;
}

/* ---------- toolbar: settings ---------- */

.bdt-toolbar-gap {
    flex: 1;
}

.bdt-hidden-note {
    font-size: .75rem;
    color: var(--bdt-muted);
}

.bdt-pop-anchor {
    position: relative;
}

.bdt-cog {
    all: unset;
    cursor: pointer;
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .9375rem;
    line-height: 1.2;
    color: var(--bdt-muted);
    transition: color .12s ease-in-out, background-color .12s ease-in-out;
}

.bdt-cog:hover,
.bdt-cog:focus-visible,
.bdt-cog.is-open {
    color: var(--bdt-accent);
    background: var(--bdt-hover);
}

.bdt-cog:focus-visible {
    outline: 2px solid rgba(0, 212, 255, .35);
    outline-offset: 1px;
}

/* ---------- column settings popover ---------- */

/* A popover rather than a modal: the user needs to see the table react behind
   it while they toggle columns. */
.bdt-pop {
    /* A native popover (top layer) with coordinates from JS. Plain `fixed` was
       not enough: an ancestor with `backdrop-filter` or `transform` (the glass
       cards) becomes its containing block, so the viewport coordinates landed
       inside the card and the card's stacking context put the panel behind its
       neighbours; `overflow: hidden` or a scroll container would clip it. The
       top layer answers to none of them. The user agent's popover defaults
       (inset, margin, padding) are reset here. */
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 1080;
    width: 17rem;
    max-height: 24rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bdt-border-strong);
    border-radius: .5rem;
    background: var(--bdt-field);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .55);
    font-size: .8125rem;
    color: var(--bdt-head);
}

.bdt-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--bdt-border);
}

.bdt-pop-close {
    all: unset;
    cursor: pointer;
    padding: 0 .25rem;
    color: var(--bdt-muted);
    font-size: 1rem;
    line-height: 1;
}

.bdt-pop-close:hover {
    color: var(--danger);
}

.bdt-pop-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--bdt-border);
}

.bdt-pop-actions button {
    all: unset;
    cursor: pointer;
    padding: .15rem .45rem;
    border: 1px solid var(--bdt-border);
    border-radius: .25rem;
    font-size: .75rem;
    color: var(--bdt-head);
    background: var(--bdt-surface);
}

.bdt-pop-actions button:hover {
    border-color: var(--bdt-accent);
    color: var(--bdt-accent);
}

.bdt-pop-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    overflow-y: auto;
}

.bdt-pop-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .35rem;
    border-radius: .25rem;
}

.bdt-pop-item:hover {
    background: var(--bdt-hover);
}

.bdt-pop-item label {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.bdt-pop-item label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A hidden column stays listed but reads as switched off. */
.bdt-pop-item.is-hidden label span {
    color: var(--bdt-muted);
}

.bdt-pop-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.bdt-pop-item.is-hidden label {
    cursor: pointer;
}

.bdt-pop-move {
    display: inline-flex;
    gap: .1rem;
}

.bdt-pop-move button {
    all: unset;
    cursor: pointer;
    width: 1.1rem;
    text-align: center;
    border-radius: .2rem;
    color: var(--bdt-muted);
    font-size: .75rem;
}

.bdt-pop-move button:hover:not(:disabled) {
    color: var(--bdt-accent);
    background: var(--bdt-field);
}

.bdt-pop-move button:disabled {
    opacity: .25;
    cursor: default;
}

/* The action cell holds a row of icon buttons and must never wrap them: in an
   automatic layout the column is only as wide as the table can spare, and a
   second button then drops onto its own line and staggers down the row. */
.bdt-table .bdt-actions {
    white-space: nowrap;
}

/* ---- Display modes, grouping and tree ---- */

/* Leading column holding the tree toggle and the nesting indent. */
.bdt-table .bdt-lead {
    padding-left: 0.25rem;
    padding-right: 0;
    white-space: nowrap;
    vertical-align: middle;
}

/* Indentation of nested and grouped rows, one 18px step per level. */
.bdt-indent {
    display: inline-block;
    width: 0;
}
.bdt-depth-1 { width: 18px; }
.bdt-depth-2 { width: 36px; }
.bdt-depth-3 { width: 54px; }
.bdt-depth-4 { width: 72px; }
.bdt-depth-5 { width: 90px; }
.bdt-depth-6 { width: 108px; }
.bdt-depth-7 { width: 126px; }
.bdt-depth-8 { width: 144px; }
.bdt-depth-9 { width: 162px; }
.bdt-depth-10 { width: 180px; }


button.bdt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bdt-muted);
    line-height: 1;
    vertical-align: middle;
}

button.bdt-toggle:hover { transform: none; box-shadow: none; }
.bdt-toggle .icon { transition: transform .15s; }
.bdt-toggle.is-open .icon { transform: rotate(90deg); }

.bdt-toggle:hover {
    color: var(--bdt-head);
}

.bdt-group-row > td {
    background: rgba(124, 58, 237, .10);
    font-weight: 600;
}

.bdt-group-count {
    margin-left: 0.5rem;
    font-weight: 400;
    color: var(--bdt-muted);
}

.bdt-child-row > td {
    background: transparent;
}

.bdt-pop-group {
    border: 1px solid var(--bdt-border-strong);
    border-radius: 0.2rem;
    background: transparent;
    font-size: 0.7rem;
    padding: 0 0.3rem;
    margin-right: 0.25rem;
    color: var(--bdt-muted);
}

.bdt-pop-group.is-grouped {
    border-color: var(--bdt-accent);
    color: var(--bdt-accent);
}

/* ---------- BTL101 ---------- */

/* Headers in the room's mono caps, like the other tables of the app. */
.bdt-sort, .bdt-head-static { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.bdt-table thead tr.bdt-head-row th { background: #0d1422; }
.bdt-table thead tr.bdt-filter-row th { background: #0d1422; }
.bdt-wrap { border-radius: var(--radius); background: var(--surface-glass); }
.bdt-toolbar { font-family: var(--mono); font-size: 11px; }
.bdt-chip { font-family: var(--sans); }
.bdt-cog.icon-btn { margin: 0; }
.bdt-filter { font-family: var(--sans); color: var(--text); }
select.bdt-filter { width: 100%; }
.bdt-pop { color: var(--text); background: var(--surface); }
.bdt-pop-actions button, .bdt-pop-move button, .bdt-pop-close, .bdt-pop-group { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.bdt-pop-group { font-size: .7rem; }
.bdt-pop-group:hover, .bdt-pop-actions button:hover { transform: none; box-shadow: none; }
.bdt-reset { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; margin: 0; }
button.bdt-chip-clear { margin: 0; }
button.bdt-chip-clear:hover { transform: none; box-shadow: none; }
.bdt-more { display: flex; justify-content: center; margin-top: .75rem; }
.bdt-table td.mono, .bdt-table .mono { font-family: var(--mono); font-size: 12px; }
.bdt-table .muted { color: var(--muted); }
.bdt-table .data { font-family: var(--mono); font-size: 11.5px; color: #cbd5e1; word-break: break-word; }
.bdt + .card, .card + .bdt, .bdt + .grid-2 { margin-top: 1.5rem; }
.card .bdt-wrap { background: transparent; }
.inline-form { display: inline; margin: 0; }
.bdt-actions .inline-form > button.icon-btn[type="submit"] { width: 2rem; }
.bdt-table .bdt-actions { text-align: right; }

/* Long values (e-mails, file names) break anywhere rather than widening the table past the
   page; dates and sizes keep to one line. */
.bdt-table tbody td { overflow-wrap: anywhere; }
.bdt-table .nowrap { white-space: nowrap; overflow-wrap: normal; }

/* The actions stay at the right edge even when the table scrolls sideways: a row's buttons
   must never end up out of sight. */
.bdt-table .bdt-actions { position: sticky; right: 0; z-index: 1; }
.bdt-table tbody td.bdt-actions { background: #0e1524; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .6); }
.bdt-table tbody tr:hover td.bdt-actions { background: #101a2b; }
.bdt-table thead th.bdt-actions { z-index: 4; }

/* ---------- Strom ---------- */

/* Nesting sits in the first column: indent, arrow (or its space), then the content. */
.bdt-tree-cell { display: flex; align-items: center; min-width: 0; }
.bdt-tree-cell .bdt-indent { flex: none; }
.bdt-toggle-space { display: inline-block; flex: none; width: 18px; }
.bdt-tree-content { min-width: 0; margin-left: .25rem; }

/* Deeper levels a shade lighter, so what belongs to a folder reads as one block. */
.bdt-table tbody tr.bdt-level-1 td { background: rgba(124, 58, 237, .045); }
.bdt-table tbody tr.bdt-level-2 td { background: rgba(124, 58, 237, .085); }
.bdt-table tbody tr.bdt-level-3 td { background: rgba(124, 58, 237, .12); }
.bdt-table tbody tr.bdt-level-4 td { background: rgba(124, 58, 237, .15); }
.bdt-table tbody tr[class*="bdt-level-"]:hover td { background: var(--bdt-hover); }

/* Switch between the plain and the advanced view. */
button.bdt-mode-toggle {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .25rem .6rem;
    border: 1px solid var(--bdt-border-strong); border-radius: 8px; background: transparent;
    color: var(--bdt-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}
button.bdt-mode-toggle:hover, button.bdt-mode-toggle.is-active { color: var(--bdt-accent); border-color: var(--bdt-accent); transform: none; box-shadow: none; }
.bdt-tree-content.is-toggle { cursor: pointer; }
.bdt-tree-content.is-toggle:hover .tree-label { color: var(--accent); }

/* Usage hint: an info icon whose tooltip wraps instead of running off the page. */
.bdt-hint { cursor: help; }
.bdt-hint[data-tip]:hover::after, .bdt-hint[data-tip]:focus-visible::after {
    left: 0; right: auto; width: min(26rem, 80vw); white-space: normal; line-height: 1.45; z-index: 30;
}

/* The folder the page is about, first row of its tree. */
.bdt-table tbody tr.is-current td { background: rgba(0, 212, 255, .07); }
.bdt-table tbody tr.is-current .tree-label { color: var(--accent); }

/* Tooltips of row actions open to the left, within their row: above the button they would run
   under the sticky header and be cut off by the table's scroll area in the first row. */
.bdt-table tbody .icon-btn[data-tip]:hover::after,
.bdt-table tbody .icon-btn[data-tip]:focus-visible::after {
    top: 50%;
    bottom: auto;
    right: calc(100% + 6px);
    transform: translateY(-50%);
}