/* Follow-specific drawer styles. Structural rules for the root container and the
   DxDrawer host live in drawer-tab-rail.css (.drawer-root, .drawer-host); this file
   only carries Follow-specific body/list/actions styles. */

.follow-drawer-empty {
    padding: 16px;
    color: var(--vl-text-muted);
    font-style: italic;
}

.follow-drawer-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Take the full DxDrawer panel width minus our horizontal padding. */
    width: 100%;
    box-sizing: border-box;
}

/* DxCheckBox renders as an inline-flex .dxbl-checkbox by default, so the label hugs
   its own text and the row collapses to half the panel. Force each checkbox in the
   drawer body to fill the available width so labels span edge-to-edge. */
.follow-drawer-body .dxbl-checkbox {
    display: flex;
    width: 100%;
}

.follow-property-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--vl-line-soft);
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.follow-property-row {
    padding: 2px 0;
    width: 100%;
}

.follow-drawer-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
}

.follow-drawer-close {
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    color: var(--vl-text);
}

.follow-drawer-close:hover {
    color: var(--vl-accent);
}

.follow-property-filter { padding: 6px 0 4px 0; }
.follow-property-filter-input { width: 100%; }
.follow-property-select-all {
    padding: 4px 0 6px 0;
    border-bottom: 1px solid var(--vl-line-soft);
}
.follow-property-empty {
    padding: 12px 4px;
    font-style: italic;
    color: var(--vl-text-muted);
}
.follow-property-row mark {
    background-color: var(--dxds-color-fill-warning-subdued-rest, var(--dxbl-warning-bg, #fff3a8));
    color: inherit;
    padding: 0;
}