/* ============================================================================
   RIGHT SIDEBAR -- ADD CARD
   ============================================================================
   The "+ Add card" row under a detail page's related-records accordion, the
   cards it adds, and the drawer that picks them. See
   assets/js/vryno-sidebar-cards.js for the behaviour.

   Nothing here restyles an existing section. Added cards are built from the
   page's own .accordion-item / .accordion-button markup so they inherit the
   accordion's borders, radii, spacing and both themes for free; the rules
   below cover only the parts that do not exist yet -- the add row, the edit
   and remove controls an added card reveals on hover, the drag state, and the
   drawer's picker.

   Selector weight, not style: the platform stylesheets are injected ahead of
   the page's bootstrap.min.css, so a single-class rule ties with Bootstrap's
   and loses on order. Anything competing with a Bootstrap rule is scoped with
   `html` and a second class, the same way vryno-related-add.css does it.
============================================================================ */

/* --- The add row -----------------------------------------------------------
   Subtle at rest: a dashed outline and grey text, so a sidebar that is already
   full of real cards does not end in something that competes with them. It
   only picks up the accent on hover or keyboard focus, which is what makes it
   read as clickable at the moment you go for it.

   It sits ABOVE the cards and pins there. With twenty cards the list is
   taller than the screen, and an add control at the bottom is one you have to
   scroll to find at exactly the moment you want it; at the top it is on screen
   as soon as the sidebar is. `top` is set by the script, which also pushes the
   accordion down by this row's height so the two stack instead of overlapping.

   The background is the page's own ground, measured at runtime: the row is
   pinned over whatever scrolls behind it, so a transparent one would show the
   first card sliding through it. */
.vr-sc-addcard {
    position: sticky;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 8px;
    padding: 9px 12px;
    border: 1px dashed #c8c8c8;
    border-radius: 8px;
    /* The tint is yours; the opaque base under it is what a pinned row needs,
       or the first card shows through as it scrolls behind. Painting the tint
       as a background-IMAGE over a background-COLOR keeps your exact colour
       and still covers what passes underneath. The dark theme drops the tint
       and keeps the measured ground -- a light wash over a dark page reads as
       a pale bar across the sidebar. */
    background-color: var(--vr-sc-ground, var(--body-bg, #f1f2f4));
    background-image: linear-gradient(#f8f5ffb0, #f8f5ffb0);
    color: var(--gray-500, #707070);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.vr-sc-addcard:hover,
.vr-sc-addcard:focus-visible {
    border-color: var(--primary, #482dc1);
    border-style: solid;
    background-color: var(--primary-transparent, rgba(72, 45, 193, .08));
    background-image: none;
    color: var(--primary, #482dc1);
    outline: none;
}

.vr-sc-addcard>i {
    font-size: 15px;
}

/* --- Card controls ---------------------------------------------------------
   Edit and remove, revealed on hover, sitting immediately left of the +. Every
   card in the sidebar gets them -- the page's own sections as well as the ones
   added here -- because a sidebar where only some cards can be managed makes
   you learn which are which. The group is RIGHT-anchored and
   the script offsets it past the +, so the + lands in the same place on an
   added card as on an original one and does not move when these appear.

   Collapsed to zero width at rest rather than merely transparent: an
   invisible 22px hit target either side of the + would swallow clicks meant
   for it. */
html .accordion-header.vr-sc-host {
    position: relative;
}

html .accordion-header.vr-sc-host>.vr-sc-acts {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--gray-500, #707070);
    cursor: pointer;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .15s ease, width .15s ease, background-color .15s ease,
        color .15s ease;
}

html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act>i {
    font-size: 15px;
    line-height: 1;
}

/* Revealed by hovering the card, or by tabbing into either control -- without
   the focus rule they would be unreachable from the keyboard. Keyed off
   .accordion-item, not .vr-sc-card: the page's own sections carry these
   controls too now, and they are not .vr-sc-card. */
.accordion-item:hover>.accordion-header>.vr-sc-acts>.vr-sc-act,
html .accordion-header.vr-sc-host>.vr-sc-acts:focus-within>.vr-sc-act {
    width: 22px;
    opacity: .7;
    pointer-events: auto;
}

html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act:hover,
html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act:focus-visible {
    opacity: 1;
    background: var(--primary-transparent, rgba(72, 45, 193, .1));
    color: var(--primary, #482dc1);
}

/* Removing a card is the one destructive control here, so it says so on
   approach rather than looking like everything else. */
html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act--del:hover,
html .accordion-header.vr-sc-host>.vr-sc-acts>.vr-sc-act--del:focus-visible {
    background: var(--danger-transparent, rgba(239, 30, 30, .1));
    color: var(--danger, #EF1E1E);
}

/* An open section's header carries the accent fill, so the controls follow its
   text colour there rather than staying grey against it. */
html .accordion-header.vr-sc-host>.accordion-button:not(.collapsed)~.vr-sc-acts>.vr-sc-act {
    color: inherit;
}

/* The label is the only thing that can grow into the controls' space. The
   originals reserve 76px for one + and the chevron; an added card needs more,
   for the two that appear beside it -- without this a long title pushes its
   count badge under the trash icon.

   Two selectors, because vryno-related-add.css sets the 76px cap with the
   same weight AND is registered after this file, so it wins on order. On a
   card it has decorated, both classes are present and the compound selector
   outranks it; on one it has not (nothing to add to a stage history) only the
   first applies and there is nothing to outrank. */
html .accordion-header.vr-sc-host>.accordion-button>span:first-child,
html .accordion-header.vr-sc-host.vr-ra-host>.accordion-button>span:first-child {
    min-width: 0;
    max-width: calc(100% - 124px);
    overflow: hidden;
    white-space: nowrap;
}

/* --- Reordering ------------------------------------------------------------
   Drag only. A pair of move arrows on every card header would be two more
   controls competing with the + that actually gets used. */
.vr-sc-card[draggable="true"] .accordion-button {
    cursor: grab;
}

.vr-sc-card.is-dragging {
    opacity: .45;
}

.vr-sc-card.is-over {
    box-shadow: inset 0 2px 0 var(--primary, #482dc1);
}

/* --- Card body -------------------------------------------------------------
   Rows match the shape the page's own sections use: a round tinted glyph, a
   title, and a line of meta under it. */
.vr-sc-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}

.vr-sc-row+.vr-sc-row {
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.vr-sc-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-transparent, rgba(72, 45, 193, .1));
    color: var(--primary, #482dc1);
    font-size: 13px;
}

.vr-sc-empty {
    padding: 14px 2px;
    color: var(--gray-500, #707070);
    font-size: 12px;
    text-align: center;
}

/* A property-list card is label/value pairs, not rows of records. */
.vr-sc-prop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}

.vr-sc-prop+.vr-sc-prop {
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.vr-sc-prop>dt {
    flex: 0 0 auto;
    margin: 0;
    color: var(--gray-500, #707070);
    font-weight: 400;
}

.vr-sc-prop>dd {
    margin: 0;
    color: var(--heading-color, #111827);
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- Scrolling -------------------------------------------------------------
   The accordion is sticky under the header. Capping it at the viewport means a
   sidebar with fifteen cards scrolls inside itself instead of running off the
   bottom of the screen; with seven it is shorter than the cap and nothing
   changes. The gutter keeps the scrollbar off the card borders. */
.vr-sc-scroll {
    max-height: calc(100vh - var(--vr-sc-top, 72px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
}

.vr-sc-scroll::-webkit-scrollbar {
    width: 8px;
}

.vr-sc-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--gray-300, #d0d5dd);
    background-clip: content-box;
}

/* --- The picker drawer -----------------------------------------------------
   Bootstrap's offcanvas provides the panel, the backdrop and the dismissal;
   these are the picker's own parts. */
.vr-sc-drawer {
    width: 560px;
    max-width: 100vw;
}

.vr-sc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.vr-sc-tab {
    flex: 1 1 0;
    padding: 12px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--gray-500, #707070);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.vr-sc-tab:hover {
    color: var(--heading-color, #111827);
}

.vr-sc-tab.is-active {
    color: var(--primary, #482dc1);
    border-bottom-color: var(--primary, #482dc1);
}

/* A choice in either tab. The whole tile is the hit target, so there is no
   hunting for a small button. */
.vr-sc-pick {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vr-sc-pick:hover:not(:disabled) {
    border-color: var(--primary, #482dc1);
    box-shadow: 0 1px 6px rgba(16, 24, 40, .08);
}

.vr-sc-pick:disabled {
    opacity: .55;
    cursor: default;
}

.vr-sc-pick-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-transparent, rgba(72, 45, 193, .1));
    color: var(--primary, #482dc1);
    font-size: 18px;
}

.vr-sc-pick-title {
    margin: 0 0 2px;
    color: var(--heading-color, #111827);
    font-size: 14px;
    font-weight: 600;
}

.vr-sc-pick-desc {
    margin: 0;
    color: var(--gray-500, #707070);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Two states, two colours, both stated here. An earlier version leaned on a
   Tailwind arbitrary class for the accent and both states came out green,
   which made an addable card look like one that was already in the sidebar —
   the single thing this label exists to tell them apart. */
.vr-sc-pick-state {
    flex-shrink: 0;
    align-self: center;
    font-size: 12px;
    font-weight: 600;
}

.vr-sc-pick-state--add {
    color: var(--primary, #482dc1);
}

.vr-sc-pick-state--added {
    color: var(--success, #1ABE17);
}

.vr-sc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .vr-sc-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.vr-sc-none {
    padding: 32px 8px;
    color: var(--gray-500, #707070);
    font-size: 13px;
    text-align: center;
}

/* A heading inside the library tab, for the removed-sections group. */
.vr-sc-grouplabel {
    margin: 0 0 8px;
    color: var(--gray-500, #707070);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The chip row in the create step, for picking which fields a property card
   shows and which kinds an activity card counts. */
.vr-sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    color: var(--gray-600, #525252);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.vr-sc-chip:hover {
    border-color: var(--primary, #482dc1);
}

.vr-sc-chip.is-on {
    border-color: var(--primary, #482dc1);
    background: var(--primary-transparent, rgba(72, 45, 193, .1));
    color: var(--primary, #482dc1);
    font-weight: 500;
}

@media print {

    .vr-sc-addcard,
    .vr-sc-menu {
        display: none !important;
    }

    .vr-sc-scroll {
        max-height: none;
        overflow: visible;
    }
}

/* The tint above is tuned for the light page. On the dark one the measured
   ground carries the row by itself. */
[data-bs-theme="dark"] .vr-sc-addcard {
    background-image: none;
}