/* ============================================================================
   Radium UI Revamp — shared TOPBAR widget styles (R2.6)
   Gives the secondary pages (pacsStudies, oppatient, centers, edgeServerMembers)
   the SAME topbar widgets as the worklist: brand wordmark, global search,
   center pin-pill, notifications bell, help (?), avatar. Built by
   js/shell-topbar.js. Plain CSS, loaded after the LESS bundle.
   (The worklist itself styles these in revamp.css; this mirrors them.)
   ============================================================================ */

/* brand wordmark (serif, after the menu logo) */
[data-header-bar] [data-revamp-brand] {
    font-family: Georgia, "Cambria", "Times New Roman", serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.3px;
    color: var(--font-color);
    padding: 0 16px 0 8px;
    white-space: nowrap;
    align-self: center;
}
[data-header-bar] [data-revamp-brand] .cyn {
    color: var(--def-gr-color-a);
}

/* global search box */
[data-revamp-search-wrap] {
    flex: 1 1 auto; max-width: 540px;
    position: relative; display: flex; align-items: center; margin: 0 12px;
}
[data-revamp-search-wrap] .rss-icon {
    position: absolute; left: 12px; font-size: 13px; opacity: .65; pointer-events: none;
}
[data-header-bar] [data-revamp-search] {
    width: 100%; height: 34px; margin: 0; padding: 0 14px 0 34px;
    border-radius: 18px;
    border: 1px solid var(--fg-color-a);
    background-color: var(--bg-color);
    color: var(--font-color);
    font: inherit; font-size: 13px; outline: none;
}
[data-header-bar] [data-revamp-search]::placeholder { color: var(--label-color); }
[data-header-bar] [data-revamp-search]:focus {
    border-color: var(--def-gr-color-a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--def-gr-color-a) 18%, transparent);
}

/* avatar (initials -> profile) */
[data-header-bar] [data-revamp-avatar] {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    margin: 0 10px 0 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--def-gr-color-a), var(--def-gr-color-b));
    color: #06222b;
    font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
}

/* center selector as a readable pin-pill */
[data-header-bar] [data-revamp-center] {
    display: inline-flex; align-items: center; gap: 7px;
    background-color: color-mix(in srgb, var(--def-gr-color-a) 12%, transparent);
    border: 1.5px solid var(--def-gr-color-a);
    border-radius: 18px;
    padding: 6px 16px; margin: 0 4px;
}
[data-header-bar] [data-revamp-center] .rc-pin { font-size: 14px; line-height: 1; }
[data-header-bar] [data-revamp-center] #centerdropdown {
    -webkit-appearance: none !important; appearance: none !important;
    background: transparent !important; background-image: none !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    outline: none; color: var(--text-strong); font-weight: 600; font-size: 13px;
    padding: 0; margin: 0; min-width: 64px; height: auto; cursor: pointer;
}
[data-header-bar] [data-revamp-center] #centerdropdown option { color: #0a1520; }

/* notifications bell + dropdown */
[data-header-bar] .rnotif-bell {
    flex: 0 0 auto; position: relative;
    width: 36px; height: 36px; margin: 0 2px 0 6px; padding: 0;
    border: none; border-radius: 50%;
    background: color-mix(in srgb, var(--def-gr-color-a) 10%, transparent);
    color: var(--text-strong); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
[data-header-bar] .rnotif-bell:hover { background: color-mix(in srgb, var(--def-gr-color-a) 22%, transparent); }
[data-header-bar] .rnotif-bell .rnotif-bell-glyph { font-size: 17px; }
[data-header-bar] .rnotif-bell .rnotif-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--err-color); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--theme-color);
}
.rnotif-dropdown {
    position: fixed; z-index: 9999;
    width: 360px; max-width: calc(100vw - 16px); max-height: 70vh;
    overflow: hidden; display: flex; flex-direction: column;
    background: var(--fg-color);
    border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 30%, transparent);
    border-radius: 12px; box-shadow: var(--def-box-shadow);
}
.rnotif-dropdown.hidden { display: none; }
.rnotif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--font-color) 14%, transparent);
}
.rnotif-head-title { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.rnotif-mark-all { border: none; background: transparent; color: var(--def-gr-color-a); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.rnotif-mark-all:hover { text-decoration: underline; }
.rnotif-list { overflow-y: auto; }
.rnotif-empty { padding: 26px 14px; text-align: center; color: var(--label-color); font-size: 13px; }
.rnotif-row { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--font-color) 9%, transparent); cursor: pointer; }
.rnotif-row:hover { background: color-mix(in srgb, var(--def-gr-color-a) 8%, transparent); }
.rnotif-row.unread { background: color-mix(in srgb, var(--def-gr-color-a) 12%, transparent); }
.rnotif-row.unread .rnotif-title { font-weight: 700; }
.rnotif-row.unread .rnotif-title::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
    vertical-align: middle; border-radius: 50%; background: var(--def-gr-color-a);
}
.rnotif-title { font-size: 13px; color: var(--text-strong); }
.rnotif-body { font-size: 12px; color: var(--font-color); margin-top: 2px; }
.rnotif-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.rnotif-kind {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--def-gr-color-a);
    background: color-mix(in srgb, var(--def-gr-color-a) 14%, transparent); padding: 1px 7px; border-radius: 8px;
}
.rnotif-time { font-size: 11px; color: var(--label-color); }

/* help (?) icon + tips popover */
[data-header-bar] .r-help-btn {
    flex: 0 0 auto; width: 30px; height: 30px; margin: 0 2px; padding: 0;
    border: 1.5px solid color-mix(in srgb, var(--def-gr-color-a) 55%, transparent);
    border-radius: 50%; background: transparent; color: var(--text-strong);
    font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
[data-header-bar] .r-help-btn:hover { background: color-mix(in srgb, var(--def-gr-color-a) 18%, transparent); }
.r-tips-pop {
    position: fixed; z-index: 9999; width: 360px; max-width: calc(100vw - 16px); max-height: 72vh;
    overflow: hidden; display: flex; flex-direction: column;
    background: var(--fg-color); border: 1px solid color-mix(in srgb, var(--def-gr-color-a) 30%, transparent);
    border-radius: 12px; box-shadow: var(--def-box-shadow);
}
.r-tips-pop.hidden { display: none; }
.r-tips-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--font-color) 14%, transparent); }
.r-tips-title { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.r-tips-body { overflow-y: auto; padding: 6px 0; }
.r-tip { display: flex; gap: 10px; padding: 9px 14px; }
.r-tip-ic { font-size: 16px; flex: 0 0 auto; line-height: 1.4; }
.r-tip-h { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.r-tip-d { font-size: 12px; color: var(--font-color); margin-top: 1px; }

/* Standardized primary nav: show the label ("Edge" / "PACS" / "OP") under each
   of the three nav icons (the revamp normally hides icon labels). */
[data-header-bar] .icon[data-ui-svg="edge"][data-label],
[data-header-bar] .icon[data-ui-svg="pacs"][data-label],
[data-header-bar] .icon[data-ui-svg="outpatient"][data-label] { position: relative; margin-bottom: 10px; }
[data-header-bar] .icon[data-ui-svg="edge"][data-label]::after,
[data-header-bar] .icon[data-ui-svg="pacs"][data-label]::after,
[data-header-bar] .icon[data-ui-svg="outpatient"][data-label]::after {
    display: block !important;
    content: attr(title);
    position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 600; letter-spacing: .03em;
    color: var(--label-color); white-space: nowrap;
}

/* Standardized topbar: the per-page search ("search_list"/"search") and the
   filter funnel are replaced by the shared global search box — hide the old
   icons on every topbar (the hidden search_list still backs the global box). */
[data-header-bar] .icon[data-ui-svg="search_list"],
[data-header-bar] .icon[data-ui-svg="search"],
[data-header-bar] .icon[data-ui-svg="filter"] { display: none !important; }
[data-header-bar] [data-ui-basemenu-cont]:has(.icon[data-ui-svg="filter"]) { display: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Mobile (≤900px): collapse the shell topbar (pacsStudies / oppatient /
   centers / edgeServerMembers) into a clean two-row bar — brand + centre +
   bell on row 1, full-width global search on row 2 — and drop the noisy
   page-native icons. Mirrors the worklist's collapsed topbar.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    [data-header-bar] {
        flex-wrap: wrap !important; height: auto !important; align-items: center;
        row-gap: 6px; padding: 8px 10px !important;
        position: sticky; top: 0; z-index: 1000;
    }
    /* declutter: page-native + secondary icons */
    [data-header-bar] .icon[data-ui-svg="pacs"],
    [data-header-bar] .icon[data-ui-svg="edge"],
    [data-header-bar] .icon[data-ui-svg="outpatient"],
    [data-header-bar] .icon[data-ui-svg="search_list"],
    [data-header-bar] .r-help-btn,
    [data-header-bar] [data-revamp-avatar] { display: none !important; }
    /* the filter-funnel sits in its own basemenu container — hide that too */
    [data-header-bar] [data-ui-basemenu-cont]:has(.icon[data-ui-svg="filter"]) { display: none !important; }

    [data-header-bar] [data-revamp-brand] { font-size: 18px; padding: 0 6px; flex: 0 1 auto; }
    /* global search → full-width second row */
    [data-header-bar] [data-revamp-search-wrap] { order: 20; flex: 1 0 100% !important; max-width: none; margin: 2px 0 0; }
    /* centre pill compact, pushed to the right of row 1 */
    [data-header-bar] [data-revamp-center] { padding: 5px 12px; margin-left: auto; }
    /* notification bell: clean glyph, no cyan disc / tap flash */
    [data-header-bar] .rnotif-bell {
        background: transparent !important; box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important; margin-left: 4px;
    }
    [data-header-bar] .rnotif-bell:hover { background: transparent !important; }
    [data-header-bar] .rnotif-bell:focus, [data-header-bar] .rnotif-bell:active { outline: none !important; background: transparent !important; }
    /* hide the framework status bar (lands as a blank bar on mobile) */
    [data-ui-statusbar] { display: none !important; }

    /* QA (Edge #10) — the main nav menu (opened from the mandala) had no height
       cap, so on a short mobile viewport its lower entries were cut off with no
       way to reach them. Cap it to the viewport and let it scroll. */
    [data-header-bar] [data-ui-basemenu-cont]:has(.icon[data-ui-svg="radium"]) [data-ui-basemenu] {
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}