/* ============================================================================
   DETAIL PAGE COLUMN LAYOUT
   ============================================================================
   The drag bars between the three detail columns, and the size control in a
   card header. Widths themselves are inline styles set by
   vryno-detail-layout.js -- nothing here changes a column's width, so this
   stylesheet on its own is inert and the grid keeps Bootstrap's 3/6/3.

   The bars are absolutely positioned inside the row, over its gutters,
   rather than being row children: a Bootstrap row distributes width across
   its flex children, and two extra children would take that width from the
   columns and break the percentages.
============================================================================ */

.vr-dl-row {
    position: relative;
}

/* ---- the drag bar ------------------------------------------------------ */

/* The bars are children of the row, and Bootstrap's `.row > *` sets
   width: 100% -- one class, same weight as a bare `.vr-dl-handle`, and
   bootstrap.min.css is loaded AFTER the platform's stylesheets, so a plain
   class selector loses the tie. That is not cosmetic here: at 100% width
   each bar became an invisible col-resize overlay lying across the cards
   next to it, swallowing their clicks. `html` plus the row class puts this
   comfortably ahead. */
html .vr-dl-row>.vr-dl-handle {
    position: absolute;
    z-index: 5;
    width: 14px;
    max-width: 14px;
    padding: 0;
    /* Centred on the boundary: js sets left to the column's right edge. */
    margin-left: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
    /* The gutter is 12px of empty space between two cards, so the bar can
       own all of it without covering anything clickable. */
}

html .vr-dl-row>.vr-dl-handle[hidden] {
    display: none;
}

/* The grip is what is actually seen: a thin pill, invisible until the row is
   hovered, so a detail page at rest looks exactly as it did. */
/* .vr-dl-grip {
    display: block;
    width: 4px;
    height: 100%;
    max-height: 100%;
    border-radius: 4px;
    background: var(--primary, #482dc1);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity .15s ease, transform .15s ease;
} */

.vr-dl-row:hover .vr-dl-grip {
    opacity: .18;
    transform: scaleX(1);
}

.vr-dl-handle:hover .vr-dl-grip,
.vr-dl-handle:focus-visible .vr-dl-grip,
.vr-dl-handle.vr-dl-dragging .vr-dl-grip {
    opacity: .85;
    transform: scaleX(1.4);
}

.vr-dl-handle:focus-visible {
    outline: none;
}

.vr-dl-handle:focus-visible .vr-dl-grip {
    box-shadow: 0 0 0 2px var(--primary-transparent, rgba(72, 45, 193, .25));
}

/* While dragging, stop the pointer selecting text in the cards it crosses,
   and keep the resize cursor even where the pointer leaves the bar. */
body.vr-dl-resizing {
    cursor: col-resize;
    user-select: none;
}

body.vr-dl-resizing * {
    /* Anything with its own cursor (links, buttons, the cards) would
       otherwise flicker the cursor back mid-drag. */
    cursor: col-resize !important;
}

/* ---- the size control -------------------------------------------------- */

/* The headers this drops into are already d-flex with the title on the left;
   this keeps the control hard right without the header needing to change. */
.vr-dl-has-chip {
    position: relative;
}

.vr-dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 1px solid var(--border-color, #ececec);
    border-radius: 20px;
    background: transparent;
    color: var(--gray-500, #707070);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}

.vr-dl-chip[hidden] {
    display: none;
}

.vr-dl-chip i {
    font-size: 13px;
    line-height: 1;
}

/* Hover-revealed like the sidebar's own row controls, so it does not add a
   permanent button to every card header. Focus and a non-default width both
   keep it visible -- a column someone has resized should say so. */
.vr-dl-row:hover .vr-dl-chip,
.vr-dl-chip:focus-visible,
.vr-dl-chip:not([data-size="compact"]) {
    opacity: 1;
}

.vr-dl-chip:hover {
    border-color: var(--primary, #482dc1);
    background: var(--primary-transparent, rgba(72, 45, 193, .1));
    color: var(--primary, #482dc1);
}

.vr-dl-chip:not([data-size="compact"]) {
    border-color: var(--primary, #482dc1);
    color: var(--primary, #482dc1);
}

/* ---- reflowed right column --------------------------------------------
   Once the right column is full width under the other two, its accordions
   read as one long ladder in a very wide space. Two columns of them keeps
   the scan length sane; the accordions are independent blocks so they can
   flow in columns without their order mattering. */

@media (min-width: 1200px) {
    .vr-dl-row.vr-dl-stacked>[class*="col-xl-3"]:last-of-type .accordion,
    .vr-dl-row.vr-dl-stacked>[class*="col-xl-3"]:last-of-type>.d-flex.flex-column {
        columns: 2;
        column-gap: 16px;
    }

    .vr-dl-row.vr-dl-stacked>[class*="col-xl-3"]:last-of-type .accordion>* {
        break-inside: avoid;
    }
}

/* Below xl, Bootstrap has already stacked the grid and js has cleared its
   inline widths; make sure nothing here lingers. */
.vr-dl-row[data-vr-dl-narrow] .vr-dl-handle,
.vr-dl-row[data-vr-dl-narrow] .vr-dl-chip {
    display: none;
}

/* ---- dark theme --------------------------------------------------------
   Nothing to restate: --border-color, --primary, --primary-transparent and
   --gray-500 are all redefined by the dark theme, so the chip and the grip
   follow it already. Note the grey ramp inverts in dark (--gray-700 is the
   LIGHT end there), so if a rule is ever added here, reach for a higher
   number rather than a lower one. */