/* /admin/userbase — dfl shell + detail card + drawer styling.
   Loaded globally by Dash's /assets convention; the rules here are
   namespaced under ``.ub-*`` so they only affect this page. */


/* ---------------------------------------------------------------
   Crew rows — clickable affordance (mirrors loc-admin row hover)
   --------------------------------------------------------------- */

.mantine-Table-tr[data-ub-row="1"] {
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.mantine-Table-tr[data-ub-row="1"]:hover {
    background-color: var(--mantine-color-default-hover) !important;
    box-shadow: inset 3px 0 0 var(--mantine-color-harbor-6);
}


/* ---------------------------------------------------------------
   Detail panel — flex column inside its host (dfl tab OR drawer)
   --------------------------------------------------------------- */

.ub-detail-host,
.ub-detail-host > .ub-detail-panel {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ub-detail-eyebrow {
    flex: 0 0 auto;
    background-color: var(--mantine-color-default-hover);
}

/* Empty state fills the scroll body when no row is selected. */
.ub-detail-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------------
   Mobile drawer body — match the public-map detail drawer's
   liquid-glass treatment for visual consistency.
   --------------------------------------------------------------- */

.ub-detail-drawer-body {
    padding: 0 !important;
    height: 100%;
    overflow: hidden !important;
    background: var(--mantine-color-body);
}


/* ---------------------------------------------------------------
   FlexLayout shell — flatten the default theme so the dfl chrome
   blends with the admin surface header.
   --------------------------------------------------------------- */

#ub-flex .flexlayout__layout,
#ub-flex .flexlayout__tabset {
    background: var(--mantine-color-body);
}

#ub-flex .flexlayout__tab {
    background: var(--mantine-color-body);
    color: var(--mantine-color-text);
}

#ub-flex .flexlayout__tab_button--selected {
    background: var(--mantine-color-default-hover);
}