/*
 * Chrome that Syncfusion renders for the RightSideBar: the SfSidebar host element itself
 * (.e-sidebar) and the SfListView internals inside it (.e-listview, .e-list-parent,
 * .e-list-item, .e-list-wrapper, .e-list-content).
 *
 * These are created by the controls, not by RightSideBar's or HomePanelList's markup, so no
 * element carrying either component's CSS-isolation scope attribute is reliably an ancestor —
 * ::deep cannot be depended on. Same reasoning as daily-brief-feedback-dialog.css.
 *
 * Loaded after the vendor theme so these win the cascade.
 */

/* --- the sidebar host ------------------------------------------------------------------ */

/* Anchored on the Target container, not on CssClass or the host wrapper: SfSidebar moves its
   root element into Target (.home-page__map, which it tags .e-sidebar-context) and the element
   never carries the CssClass, so both of those selectors matched nothing and this whole file's
   sidebar rules were inert. Index is the only page rendering RightSideBar and the only SfSidebar
   using Target, so this cannot reach another control.
   Outranks the vendor theme, which sets position: fixed, overflow: auto, its own background, and
   a left border on .e-right — equal specificity, and this file is the last stylesheet in
   App.razor. width is omitted deliberately: SfSidebar writes it inline from its Width parameter. */
.home-page__map > .e-sidebar {
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    pointer-events: auto;
}

/* The three width steps. !important because SfSidebar writes width inline from its Width
   parameter, and only !important outranks an inline style - the same reason the mobile rule
   at the bottom of this file needs it. Each step pairs with a scale band in
   RightSideBar.razor.css, and a test asserts the pairs stay in step. */
@media (min-width: 1000px) and (max-width: 1299px) {
    .home-page__map > .e-sidebar {
        width: 350px !important;
    }
}

@media (min-width: 601px) and (max-width: 999px) {
    .home-page__map > .e-sidebar {
        width: 300px !important;
    }
}

/* Mirrors the vendor's own .e-open/.e-close rules so its 0.5s default does not apply,
   without disturbing how it sequences visibility. */
.home-page__map > .e-sidebar.e-open,
.home-page__map > .e-sidebar.e-close {
    transition: transform 180ms ease, visibility 180ms;
}

/* Safe to drop entirely rather than shorten: the vendor's own e-disable-animation sets
   transition: none on these same elements whenever Animate is false, which is how the bar
   renders on first paint. */
@media (prefers-reduced-motion: reduce) {
    .home-page__map > .e-sidebar.e-open,
    .home-page__map > .e-sidebar.e-close {
        transition: none;
    }
}

/* --- SfListView internals -------------------------------------------------------------- */

.home-panel-list__control.e-listview,
.home-panel-list__control .e-list-container {
    /* The vendor rounds .e-listview by 4px and .e-list-container clips to it, which curved the
       first row's square corner - visible as a rounded top edge and a sliver of light beside the
       selected row's 3px indicator. The rows are flush with the panel; only the corner was cut. */
    border-radius: 0 !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.home-panel-list__control .e-list-parent {
    border-width: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* The vendor sets .e-listview:not(.e-list-template) .e-list-item { height: 40px; padding:
   7px 9px 7px 12px } which collapses the 72px rows, so height and padding are forced here. */
.home-panel-list__control .e-list-parent > .e-list-item {
    border-width: 0 !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
    min-height: calc(72px * var(--home-right-panel-geometry-scale, 1)) !important;
    overflow: visible;
    padding: 0 !important;
    width: 100% !important;
}

.home-panel-list__control .e-list-parent > .e-list-item > .e-list-wrapper,
.home-panel-list__control .e-list-parent > .e-list-item > .e-list-wrapper > .e-list-content {
    height: auto !important;
    min-height: calc(72px * var(--home-right-panel-geometry-scale, 1)) !important;
    overflow: visible;
    padding: 0 !important;
}

/* e-hover and e-focused are classes Syncfusion's JavaScript adds on pointer and keyboard
   interaction, so :hover alone does not cover them. They are added regardless of e-active,
   which is why a selected row still changed on hover - GetRowClass already withholds our
   own hovered class when a row is selected. Rows are painted solely by HomePanelList. */
.home-panel-list__control .e-list-item.e-active,
.home-panel-list__control .e-list-item.e-focused,
.home-panel-list__control .e-list-item.e-hover,
.home-panel-list__control .e-list-item:hover {
    background-color: transparent !important;
}

/* Restores the focus indicator the rule above removes: in this theme e-focused is carried by
   background-color alone, and the vendor's matching color is inert because the row's spans set
   their own through tw: utilities. Gated on :focus-visible rather than e-focused alone, which
   the comment above notes is also added on pointer interaction and would ring on every click.
   Both selectors because the focus may sit on the list container or on a row within it. */
.home-panel-list__control:focus-visible .e-list-item.e-focused,
.home-panel-list__control:has(:focus-visible) .e-list-item.e-focused {
    outline: 2px solid var(--theme-focus-ring-color);
    outline-offset: -2px;
}

/* --- the mobile close button (an SfButton inside the sidebar) -------------------------- */

.right-side-bar__mobile-close.e-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: none;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    min-width: 0;
    padding: 0;
    width: 2.25rem;
}

@media (max-width: 600px) {
    /* Full bleed by pinning both edges rather than setting a width. width: 100% depends on
       which box it resolves against, and the vendor sets left: auto on .e-right; pinning
       left and right and letting width compute fills the container regardless. !important
       is required because SfSidebar writes width inline from its Width parameter, and only
       !important outranks an inline style. */
    .home-page__map > .e-sidebar {
        left: 0 !important;
        max-width: none !important;
        right: 0 !important;
        width: auto !important;
    }

    .home-page__map--chat > .e-sidebar {
        bottom: 0 !important;
        height: auto !important;
        position: fixed !important;
        top: var(--top-bar-height) !important;
        z-index: 1010 !important;
    }
}