/* ============================================================================
   Radium UI Revamp — shared shell layer for the secondary list pages
   (centers, oppatient, pacsStudies, edgeServerMembers).
   Plain CSS, loaded AFTER the LESS bundle so it wins. Gives these pages the
   same card-framed shell, tokenized table, and clean topbar as the worklist,
   and makes them render correctly in BOTH dark and light themes.
   (The worklist has its own revamp.css; this file is for the other pages.)
   ============================================================================ */

/* page area below the topbar */
.desk {
    padding: 20px 22px 44px;
    background-color: var(--bg-color);
    box-sizing: border-box;
}
[data-ui-card-holder] { width: 100%; }

/* card frame around any list card on these pages */
[data-ui-card][data-rzd-container] {
    background-color: var(--fg-color);
    border: 1px solid var(--fg-color-a);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .20);
    overflow: hidden;
    margin-bottom: 22px;
}

/* OP list: the row action popups (history / attachment / details basemenus)
   drop below the row; with overflow:hidden + a short card they were clipped.
   Let them escape the card on the OP worklist only (worklist card untouched). */
[data-ui-card][data-rzd-route="/api/spin/radon/oppatients"] {
    overflow: visible;
}

/* shared list table -> token-driven (works in both themes) */
table.tablelist { border-bottom: 1px solid var(--fg-color-b); }
table.tablelist tbody th {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .7px;
    font-weight: 700;
    color: var(--label-color);
    padding: 12px 10px;
    background-color: var(--fg-color);
}
table.tablelist tbody tr:first-child {
    background-color: var(--fg-color);
    box-shadow: 0 1px 0 var(--fg-color-a);
}
table.tablelist tbody td {
    border-right: 1px solid var(--fg-color-a);
}
table.tablelist tbody tr[data-rzd-entry] td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--fg-color-a);
}
table.tablelist tbody tr[data-rzd-entry]:hover {
    background-color: color-mix(in srgb, var(--def-gr-color-a) 7%, transparent);
    box-shadow: inset 3px 0 0 var(--def-gr-color-a);
}

/* topbar: clean icon nav + the SAME contrasting band as the worklist
   (mockup hex #16323D gradient, dark theme; white in light theme) so the
   shell pages read as one family with edgestudies. */
[data-header-bar] {
    background: linear-gradient(180deg, #16323D 0%, #14303A 100%);
    border-bottom: 1px solid #1d4252;
    align-items: center;
    min-height: 58px;
    padding: 0 16px;
    gap: 6px;
}
:root[data-theme="light"] [data-header-bar] {
    background: #ffffff;
    border-bottom: 1px solid var(--fg-color-a);
}
[data-header-bar] .icon[data-label]::after { display: none !important; }
[data-header-bar] .icon[data-label] { margin-bottom: 0; }
[data-header-bar] .icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-size: 56% 56%;
    transition: background-color .12s;
}
[data-header-bar] [data-ui-basemenu-cont] > .icon[data-ui-svg="radium"] { background-size: 76% 76%; }
[data-header-bar] .icon:hover {
    background-color: color-mix(in srgb, var(--def-gr-color-a) 14%, transparent);
}
[data-header-bar] #centerdropdown,
[data-header-bar] select {
    background-color: var(--bg-color);
    color: var(--font-color);
    border: 1px solid var(--fg-color-a);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    outline: none;
}

/* toolbar/action buttons commonly used on these pages */
[data-ui-card][data-rzd-container] [data-ui-opnbtn],
[data-ui-card][data-rzd-container] [data-ui-lnbtn] {
    border-radius: 8px;
}

/* ============================================================================
   Sanity check: mobile safety for the shared shell pages (centers / oppatient /
   pacsStudies / edgeServerMembers). This file previously had NO media query, so
   on a narrow phone the wide list tables were clipped by the card's
   overflow:hidden and the 22px page gutters wasted space. Conservative additions
   only — nothing existing is removed.
   ============================================================================ */
@media (max-width: 600px) {
    /* tighter page gutters so content fits a narrow viewport */
    .desk { padding: 12px 10px 32px; }
    [data-ui-card-holder] { max-width: 100%; box-sizing: border-box; }
    /* let a too-wide list table scroll horizontally inside the card instead of
       being clipped (card keeps overflow:hidden on the Y axis for rounded corners) */
    [data-ui-card][data-rzd-container] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        box-sizing: border-box;
    }
}
