/* Mobile-only styles for Patient/Consultant/Viewer roles on phone-width devices.
   Loaded on every page (see _Head.cshtml); selectors here never match desktop markup,
   so this file is harmless to load unconditionally. All colours are var() references
   against wwwroot/css/tokens.css - no [data-theme] overrides needed here, same as
   site.css/style.css. */

/* ---------------------------------------------------------------------------
   Layout shell override - style.css's .layout-container/.main-right assume the
   fixed-width desktop sidebar (grid-template-columns, calc(100vw - 10em), a
   fixed 98vh height). Mobile chrome has no sidebar, so it needs plain block
   flow instead of that grid math.
--------------------------------------------------------------------------- */
/* style.css's base `body` rule sets `overflow: clip; height: 100%;` - correct for desktop
   (which relies on internal, per-view scroll containers instead of whole-page scroll), but
   it silently breaks normal page scrolling on mobile chrome, where the study-card list etc.
   is meant to scroll the page itself. Scoped via :has(.mobile-app-bar), present on every
   mobile-chrome page, so desktop's body styling is untouched. */
body:has(.mobile-app-bar) {
    overflow: visible;
    height: auto;
}

.layout-container.layout-container-mobile {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100vh;
    gap: 0;
    margin: 0;
    border-radius: 0;
}

.main-right.mobile-main {
    width: 100%;
    height: auto;
    min-height: calc(100vh - 3.5rem);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* The DICOM viewer's #imageWrapper relies on height:100% / flex:1 down the chain to
   size the Cornerstone canvas - that only resolves when every ancestor has a DEFINITE
   height, not just min-height (min-height alone leaves nested flex-grow items with an
   indefinite height in some browsers). Scoped to viewer pages via :has(.mv-viewport) so
   list/profile pages keep growing naturally with content instead of being clipped. */
body:has(.mv-viewport) .main-right.mobile-main {
    height: calc(100vh - 3.5rem);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Top app bar (_MobileTopBar.cshtml) - item 2
--------------------------------------------------------------------------- */
.mobile-app-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--dark);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

/* Shared by the app-bar hamburger and the drawer's close button (and any other bare
   icon button) - not scoped to .mobile-app-bar so it applies wherever .icon-btn is used. */
.icon-btn {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--text);
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-btn:active {
    background: var(--bg-surface-alt);
}

.mobile-app-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-app-bar-menu {
    flex: 0 0 auto;
    margin-left: auto;
}

.mobile-app-bar-menu ul {
    display: flex;
    align-items: center;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Slide-in nav drawer (_MobileNavDrawer.cshtml) - item 1
   Hand-rolled (Bootstrap 4 has no Offcanvas component).
--------------------------------------------------------------------------- */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    display: none;
}

.mobile-drawer-backdrop.open {
    display: block;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 80vw;
    max-width: 320px;
    background: var(--menu);
    color: var(--text);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: none;
}

.mobile-drawer.open {
    display: block;
    transform: translateX(0);
}

.mobile-drawer-header {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
}

/* Stack the client logo above the SC PACS logo (their source order in _Logos.cshtml,
   governed by AppSettings.ClientLogoOnTop) and stretch each to the drawer's full width -
   desktop's own narrow-rail layout for these is untouched, this only applies in the drawer. */
.mobile-drawer-logos {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mobile-drawer-logos .nav-logo {
    width: 100%;
}

.mobile-drawer-logos .nav-logo a {
    display: block;
    width: 100%;
}

.mobile-drawer-logos .nav-logo img {
    width: 100%;
    height: auto;
}

/* Keep the desktop navbar's top-half crop for the circular client logo (site.css .half-logo
   is a fixed 128x71px, which the full-width rule above would otherwise stretch back open). */
.mobile-drawer-logos .nav-logo img.half-logo {
    aspect-ratio: 128 / 71;
    object-fit: cover;
    object-position: top;
    height: auto;
}

.mobile-drawer-body {
    padding: .5rem;
}

/* Restyle the reused _LoginPartial nav-items for a vertical, row-per-item drawer
   instead of the desktop icon-over-label column. */
.mobile-drawer-body .nav-item {
    width: 100%;
    min-height: 3.25rem;
    border-radius: .5rem;
}

/* Descendant (not direct-child) selector: the Logout item's <a> is wrapped in a <form>
   (asp-page="/Account/Logout", posts on click) so it isn't a direct child of .nav-item
   like the other items - without this it fell back to default link styling. */
.mobile-drawer-body .nav-item form {
    margin: 0;
}

.mobile-drawer-body .nav-item a {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: .5rem .75rem;
    color: var(--text);
    text-decoration: none;
}

.mobile-drawer-body .nav-item.active {
    background: var(--menu-hover);
}

.mobile-drawer-body .nav-item.active a {
    color: var(--yellow-text);
}

.mobile-drawer-body .nav-item .ico {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    flex: 0 0 auto;
}

.mobile-drawer-body .nav-item span {
    font-size: .9375rem;
}

/* ---------------------------------------------------------------------------
   Study list-group card component - item 3
--------------------------------------------------------------------------- */
.study-list {
    padding: .75rem .75rem 5rem;
}

.study-card {
    background: var(--menu);
    border-radius: .5rem;
    margin-bottom: .625rem;
    position: relative;
    overflow: hidden;
}

.study-main {
    position: relative;
    padding: .8125rem .875rem .75rem;
}

.study-main:active {
    background: var(--bg-surface-alt);
}

.study-head {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.study-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.study-name a {
    color: inherit;
    text-decoration: none;
}

.study-name a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: 2px;
}

.patient-tag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-idle);
}

.patient-tag .age {
    font-size: .8125rem;
    line-height: 1;
    padding-right: .5rem;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

/* Every mobile study-list card: the age/sex divider matches this card's action-icon
   color (.study-actions .act, uniformly recolored on these same lists further below)
   instead of the generic muted --border. */
.patient-study-list .patient-tag .age,
.patient-shared-list .patient-tag .age,
.viewer-shared-list .patient-tag .age,
.consultant-study-list .patient-tag .age {
    border-right-color: #f8f9fa;
}

:root[data-theme="light"] .patient-study-list .patient-tag .age,
:root[data-theme="light"] .patient-shared-list .patient-tag .age,
:root[data-theme="light"] .viewer-shared-list .patient-tag .age,
:root[data-theme="light"] .consultant-study-list .patient-tag .age {
    border-right-color: var(--text-idle);
}

.patient-tag .sex {
    display: flex;
    flex: 0 0 auto;
}

.study-desc {
    font-size: .875rem;
    color: var(--text-idle);
    margin: .125rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.study-meta {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--text-idle);
    flex-wrap: wrap;
}

/* Shared-studies cards (Views/AssignedStudies/Mobile/*.cshtml): visually separate the
   sharing metadata (shared with / expiration) from the study info above it. */
.study-meta-shared {
    border-top: 1px dashed var(--border);
    padding-top: .5rem;
}

.study-date {
    margin: 0;
    flex: 0 0 auto;
}

/* Patient's own mobile studies list only - match the date to the patient-name color
   instead of the muted .study-meta color used by the rest of the row (size/modality).
   Viewer's "shared with me" list and Consultant's study list match the same treatment. */
.patient-study-list .study-date,
.patient-shared-list .study-date,
.viewer-shared-list .study-date,
.consultant-study-list .study-date {
    color: var(--text);
}

/* Same lists - age + sex icon match the patient-name color too, instead of the
   default muted .patient-tag color. */
.patient-study-list .patient-tag,
.patient-shared-list .patient-tag,
.viewer-shared-list .patient-tag,
.consultant-study-list .patient-tag {
    color: var(--text);
}

/* Shared-list "Shared" section: row 1 is the "Shared" label + status, row 2 is
   who it's shared with + the expiration date, spread to the row's full width. */
.study-share-row {
    justify-content: space-between;
    flex-wrap: nowrap;
}

.share-label,
.share-item {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.share-item {
    min-width: 0;
}

.share-item .share-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The calendar glyph's visual weight sits higher than the user/share-alt glyphs even
   though its box is centered like theirs - nudge it down a hair to match optically. */
.share-item .fa-calendar-alt {
    transform: translateY(-1.0px);
}

/* The map-marker glyph's ink (a circle over a thin tail) sits mostly in the icon box's
   upper half, so its visual weight reads as lower than the text next to it even though
   the boxes are already flex-centered - nudge it up to align the pin's circle optically. */
.study-location .fa-map-marker-alt {
    transform: translateY(-1.5px);
}

/* Shared-list only: "shared with" / expiration date values match the study-date color. */
.patient-shared-list .share-value,
.viewer-shared-list .share-value {
    color: var(--text);
}

/* Consultant's study list: patient-ID row (Views/Studies/Mobile/Consultant.cshtml) - the ID
   value matches the patient-name color like the rest of this card's identifying text. */
.study-id-value {
    color: var(--text);
}

/* Study location tag (local DB vs. pulled live from the PACS server) - same info color the
   desktop table uses for PACS-server rows (site.css .row-server), applied to this one tag
   instead of the whole row. */
.study-location.is-remote {
    color: #17a2b8;
}

.share-status-group {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex: 0 0 auto;
}

/* Sharing-status dot: yellow/green when active, muted gray once expired - same in both themes. */
.share-status {
    flex: 0 0 auto;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background-color: var(--yellow);
}

.share-status.is-expired {
    background-color: var(--text-idle);
}

.mod-group {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

.modality {
    background: var(--yellow);
    color: var(--on-accent);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .125rem .375rem;
    border-radius: .1875rem;
    line-height: 1.3;
}

/* Row state, mirroring the desktop DataTables .row-unread / .row-expired classes
   (wwwroot/css/site.css). The tint is mixed from each theme's own card surface (--menu),
   so it stays subtle and reads correctly in both themes instead of a hardcoded hex. Dark
   theme mixes in white (yellow-on-navy read as too warm/heavy); light keeps the yellow tint. */
.study-card.is-unread {
    background: color-mix(in srgb, white 12%, var(--menu));
    box-shadow: inset 3px 0 0 var(--yellow);
}

:root[data-theme="light"] .study-card.is-unread {
    background: color-mix(in srgb, var(--yellow) 12%, var(--menu));
}

.study-card.is-unread .study-name::after {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--yellow);
    margin-left: .5rem;
    vertical-align: middle;
}

.study-actions {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--border);
    padding: .25rem;
}

.study-actions .act {
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-idle);
    text-decoration: none;
    border-radius: .375rem;
    position: relative;
}

.study-actions .act:active {
    color: var(--text);
    background: var(--bg-surface-alt);
}

.study-actions .act:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: -2px;
}

.study-actions .act[disabled] {
    opacity: .35;
    pointer-events: none;
}

.study-actions .act.is-primary {
    color: var(--yellow-text);
}

.study-actions .act.is-danger:active {
    color: var(--danger);
    background: rgba(220, 53, 69, .12);
}

/* Patient's own mobile studies list (Views/Studies/Mobile/Patient.cshtml) only: every
   action icon reads as the same neutral color instead of highlighting one as "primary" -
   dark theme uses Bootstrap's own $light (#f8f9fa), matching the btn-outline-light buttons
   used for the same actions on desktop; light theme reuses --text-idle for legible contrast
   against the white card surface. */
.patient-study-list .study-actions .act,
.patient-study-list .study-actions .act.is-primary,
.patient-shared-list .study-actions .act,
.viewer-shared-list .study-actions .act,
.consultant-study-list .study-actions .act {
    color: #f8f9fa;
}

:root[data-theme="light"] .patient-study-list .study-actions .act,
:root[data-theme="light"] .patient-study-list .study-actions .act.is-primary,
:root[data-theme="light"] .patient-shared-list .study-actions .act,
:root[data-theme="light"] .viewer-shared-list .study-actions .act,
:root[data-theme="light"] .consultant-study-list .study-actions .act {
    color: var(--text-idle);
}

/* "Stop sharing" keeps its own danger (red) color in both themes - it's a destructive
   action, unlike the other uniformly-colored actions in this list. */
.patient-shared-list .study-actions .act.is-danger {
    color: var(--danger);
}

@media (min-width: 768px) {
    .study-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 .625rem;
        max-width: 60rem;
        margin: 0 auto;
        align-items: start;
    }
}

/* ---------------------------------------------------------------------------
   Patient picker rows (Views/Studies/Mobile/Patients.cshtml)
--------------------------------------------------------------------------- */
.mobile-patient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.25rem;
    padding: .75rem .875rem;
    color: var(--text-idle);
}

.mobile-patient-row:active {
    background: var(--bg-surface-alt);
}

.mobile-patient-row .study-name {
    color: var(--text);
    text-align: left;
}

/* ---------------------------------------------------------------------------
   Search box (mobile study-list pages)
--------------------------------------------------------------------------- */
.mobile-search-wrap {
    padding: 0 .75rem .75rem;
}

.mobile-search-wrap .position-relative > svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-idle);
    pointer-events: none;
}

.mobile-search-input {
    background: var(--bg-input);
    border: 0;
    border-radius: .625rem;
    color: var(--text);
    height: 2.5rem;
    padding-left: 2.25rem;
    font-size: .9375rem;
}

.mobile-search-input::placeholder {
    color: var(--text-idle);
}

.mobile-search-input:focus {
    background: var(--bg-input);
    color: var(--text);
    box-shadow: 0 0 0 2px rgba(255, 199, 55, .45);
}

/* ---------------------------------------------------------------------------
   Collapsible search/filter panel (Views/Studies/Mobile/Consultant.cshtml) -
   reuses Views/Studies/SearchFilters.cshtml's own field markup/ids/names, so the
   same server-side filtering as the desktop table applies; only the layout below
   restacks those Bootstrap columns to full-width rows for a narrow viewport.
--------------------------------------------------------------------------- */
.mobile-filter-wrap {
    padding: .75rem .75rem;
}

.mobile-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2.5rem;
    padding: 0 .9375rem;
    background: var(--bg-input);
    border: 0;
    border-radius: .625rem;
    color: var(--text);
    font-size: .9375rem;
}

.mobile-filter-toggle .fa-filter {
    color: var(--text-idle);
    margin-right: .5rem;
}

.mobile-filter-chevron {
    color: var(--text-idle);
    transition: transform .15s ease;
}

.mobile-filter-toggle:not(.collapsed) .mobile-filter-chevron {
    transform: rotate(180deg);
}

.mobile-filter-panel {
    margin-top: .5rem;
    padding: .75rem;
    background: var(--menu);
    border: 1px solid var(--border);
    border-radius: .625rem;
}

.mobile-filter-panel .form-row {
    display: block;
    margin: 0;
}

.mobile-filter-panel .form-group {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
    margin-bottom: .5rem;
}

/* Birth date is dropped from the mobile filter panel only - SearchFilters.cshtml is shared
   with the desktop table, which still shows it there. */
.mobile-filter-panel .form-group:has(#patBirthDate) {
    display: none;
}

.mobile-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.mobile-filter-actions .btn {
    flex: 1 1 0;
}

/* "Today" reads long in Bulgarian ("Днешни изследвания") - give it its own full-width
   row under Clear/Search instead of squeezing three buttons into one row. */
.mobile-filter-actions .mobile-filter-today {
    flex: 1 1 100%;
}

/* ---------------------------------------------------------------------------
   "Load more" control - item 4.2 / 5 (no paging info text is rendered)
--------------------------------------------------------------------------- */
.mobile-load-more {
    display: block;
    width: calc(100% - 1.5rem);
    margin: .5rem .75rem 1rem;
    padding: .625rem;
    background: var(--menu);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: .5rem;
}

.mobile-load-more:active {
    background: var(--bg-surface-alt);
}

.mobile-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-idle);
}

/* "Showing X of Y" counter, updated on load and again after "Load more" - see
   MobileStudyList's onReveal hook (Views/Studies/Mobile/Consultant.cshtml). Text color
   matches this list's action-icon color (.consultant-study-list .study-actions .act)
   instead of the default muted .mobile-empty-state gray. */
.mobile-list-count {
    padding: 0 .75rem;
    margin-top: -.25rem;
    text-align: center;
    font-size: .8125rem;
    color: #f8f9fa;
}

:root[data-theme="light"] .mobile-list-count {
    color: var(--text-idle);
}

/* ---------------------------------------------------------------------------
   Segmented control (Consultant shared-studies: received / sent) - item 5
--------------------------------------------------------------------------- */
.mobile-segmented {
    display: flex;
    gap: .25rem;
    padding: .75rem .75rem 0;
}

.mobile-segmented .seg-btn {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--menu);
    color: var(--text-idle);
    border-radius: .5rem;
    padding: .5rem;
    font-size: .875rem;
}

.mobile-segmented .seg-btn.active {
    background: var(--yellow);
    color: var(--on-accent);
    border-color: var(--yellow);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Mobile DICOM viewer (Views/WebViewer/Mobile/*) - item 6
--------------------------------------------------------------------------- */
.mv-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .5rem .875rem;
    background: var(--menu);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

/* Text stays its own column (name above ID) but as one flex item so the grid button
   sits to its right instead of below it; min-width:0 lets it still shrink for ellipsis. */
.mv-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.mv-header-name,
.mv-header-id {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mv-header-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
}

.mv-header-id {
    font-size: .8125rem;
    color: var(--text-idle);
    margin-top: .125rem;
}

.mv-viewport {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative;
    background: #000;
}

/* per-view sync-group controls from the reused SeriesView.cshtml partial - meaningless
   with a single forced viewport */
.mv-viewport #window-tools {
    display: none;
}

.mv-thumb-strip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .625rem;
    padding: .625rem .75rem;
    background: var(--menu);
    border-top: 1px solid var(--border);
}

.mv-thumb-strip .notselectedDiv,
.mv-thumb-strip .dcmSeries,
.mv-thumb-strip .srSeries {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
    min-height: 5.5rem;
    max-height: 5.5rem;
    overflow: hidden;
}

/* Desktop's own style.css only sets width:100% (not height) on .srSeries > img (the
   static SR/DOC/ECG icon thumbnails), unlike .dcmSeries > img which gets both - so on
   desktop those non-DICOM-image series render at a different height than the rest of
   the strip. Fixed here for the mobile strip only: every thumbnail image, regardless of
   type, fills the same fixed box. */
.mv-thumb-strip .notselectedDiv > img,
.mv-thumb-strip .dcmSeries > img,
.mv-thumb-strip .srSeries > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The four corner overlays are absolutely positioned and have no width of their own, so
   their text runs toward the middle until, at phone width, the left and right columns print
   on top of each other - patient name over series description. Cap each at 45%, which with
   the 3px and 21px insets still leaves a gap between them at 390px, and wrap inside long
   values rather than clipping: what is written on the image is meant to be read. */
body:has(.mobile-app-bar) .dicom-overlay {
    max-width: 45%;
    overflow-wrap: break-word;
}

/* The cine controls come out of style.css with z-index 9901, which on a phone lifts them
   over the app bar, the drawer and the tools sheet - the whole mobile chrome lives in the
   1030-1050 band. Drop them just under it: still above the image and its overlays, but no
   longer floating on top of an open menu. Scoped to the mobile chrome so desktop keeps 9901. */
body:has(.mobile-app-bar) .video-nav {
    z-index: 1020;
}

#mv-tools-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(7.5rem + env(safe-area-inset-bottom, 0));
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 0;
    background: var(--yellow);
    color: var(--on-accent);
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    z-index: 1035;
}

.mv-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    display: none;
}

.mv-sheet-backdrop.open {
    display: block;
}

.mv-tools-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 65vh;
    overflow-y: auto;
    background: var(--menu);
    color: var(--text);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom, 0));
    transform: translateY(100%);
    transition: transform .2s ease;
    z-index: 1045;
    display: none;
}

.mv-tools-sheet.open {
    display: block;
    transform: translateY(0);
}

.mv-sheet-handle {
    width: 2.5rem;
    height: .25rem;
    border-radius: .125rem;
    background: var(--border);
    margin: .5rem auto .75rem;
}

.mv-tools-primary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .5rem;
}

.mv-tools-group {
    border-top: 1px solid var(--border);
    padding: .5rem 0;
}

.mv-tools-group summary {
    font-weight: 600;
    padding: .375rem 0;
    cursor: pointer;
    list-style: none;
}

.mv-tools-group summary::-webkit-details-marker {
    display: none;
}

.mv-tools-group summary::after {
    content: "\25BE";
    float: right;
}

.mv-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    padding-top: .375rem;
}

.mv-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 3.5rem;
    padding: .375rem .25rem;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;
    font-size: .6875rem;
}

.mv-tools-primary .mv-tool-btn {
    flex: 1 1 6rem;
}

.mv-tool-btn i {
    font-size: 1.125rem;
}

.mv-tool-btn.active,
.mv-tool-btn.mv-tool-active {
    background: var(--yellow);
    color: var(--on-accent);
    border-color: var(--yellow);
}

/* ---------------------------------------------------------------------------
   Profile bottom tab bar (Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml) - item 7
--------------------------------------------------------------------------- */
.mobile-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--menu);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-tab-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .5rem 0 .375rem;
    font-size: .6875rem;
    color: var(--text-idle);
    text-decoration: none;
}

.mobile-tab-item i {
    font-size: 1.125rem;
}

.mobile-tab-item.active {
    color: var(--yellow-text);
}

/* keep page content clear of the fixed bottom tab bar on the mobile Profile pages only */
body:has(.mobile-tab-bar) .main-right.mobile-main {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0));
}

/* .mfa-profile (site.css) is hardcoded to 60% width for the desktop layout, which is far
   too narrow on a phone screen - its buttons' text then overflows past that background. */
body:has(.mobile-tab-bar) .mfa-profile {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .profile-pages-title,
    .d-flex.flex-row {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   Third-party licenses modal (Views/Shared/_LicensesModal.cshtml, content from
   Views/Licenses/_LicensesDialog.cshtml, base styling in css/licenses.css).
   licenses.css already reflows the per-package rows below 700px - these rules
   only tighten the modal chrome itself and the stat-tile row for the app's own
   mobile shell, where every extra pixel of width matters more than on a
   merely-narrowed desktop browser.
--------------------------------------------------------------------------- */
body:has(.mobile-app-bar) .licenses-modal .modal-dialog {
    width: calc(100% - 1rem);
    margin: .5rem auto;
}

body:has(.mobile-app-bar) .licenses-modal .modal-header,
body:has(.mobile-app-bar) .licenses-modal .modal-body,
body:has(.mobile-app-bar) .licenses-modal .modal-footer {
    padding: .75rem;
}

body:has(.mobile-app-bar) .licenses-modal .modal-title {
    font-size: 1.05rem;
}

body:has(.mobile-app-bar) .licenses-modal .modal-body {
    max-height: 78vh;
}

/* Four stat tiles in a row (Components/Libraries/License terms/Download link) don't fit a
   phone width at their desktop gap - a 2x2 grid keeps each figure legible instead. */
body:has(.mobile-app-bar) .licenses-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 1.25em;
}

body:has(.mobile-app-bar) .figure-n {
    font-size: 1.6rem;
}

body:has(.mobile-app-bar) .licenses-filter {
    max-width: none;
}

body:has(.mobile-app-bar) .licenses-tabs .nav-link {
    padding: .5rem .6rem;
    font-size: .9rem;
}

body:has(.mobile-app-bar) .lic-text {
    padding: .75em .8em;
    font-size: .78rem;
}

/* Full-width Close button matches this app's other mobile action buttons (e.g.
   .mobile-load-more) instead of the desktop dialog's right-aligned, fixed-width one. */
body:has(.mobile-app-bar) .licenses-modal .modal-footer .btn {
    width: 100%;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Grid/split-screen picker (Views/WebViewer/Mobile/Index.cshtml). Reuses the desktop's
   #gridSelectModal/.grid-selector widget (wwwroot/Scripts/gridselector.js, base look in
   css/style.css) via a #btn-grid icon button in the mv-header row, capped at 2x2
   (gs.init(..., 2)) instead of desktop's 4x4 - a phone screen has no room for more than
   four viewports anyway. Cells are sized up here for a touch target instead of desktop's
   24px hover-picker squares. */
body:has(.mobile-app-bar) #gridSelectModal.grid-selector {
    /* Above .mv-header (which it's opened from) and the thumbnail strip below it. */
    z-index: 1050;
    background: var(--menu);
    border-color: var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

body:has(.mobile-app-bar) #gridSelectModal .grid-interactive .grid-cell {
    width: 2.25rem;
    height: 2.25rem;
}

/* PublicAccess pages. The QR guest meets these on a phone, before any cookie exists and
   usually while standing in a corridor - so they get the full width instead of a centred
   card floating in a desktop grid, and the one field and one button are thumb sized. */
.guest-panel {
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0));
}

/* The page's own title, now that the app bar carries the flow name instead. Same face and
   weight as the bar title so the two read as one voice, and --text rather than --text-idle
   keeps it the brightest thing on the page in the dark theme. */
.guest-panel .guest-heading {
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    margin: 0 0 1rem;
}

.guest-panel .guest-icon {
    display: block;
    font-size: 2.75rem;
    text-align: center;
    /* Auto margins, not text-align alone: Font Awesome swaps the <i> for an <svg>,
       whose block box is only as wide as the glyph and would hug the left edge. */
    margin: 0 auto 1rem;
    color: var(--text-idle);
}

.guest-panel .guest-text {
    text-align: center;
    color: var(--text-idle);
    margin-bottom: 1.5rem;
}

.guest-panel .form-group {
    margin-bottom: 1.25rem;
}

/* Wide enough to hit without aiming, and centred because the value is a single number. */
.guest-panel .form-control {
    height: 3rem;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: .08em;
}

.guest-panel .btn {
    height: 3rem;
    font-size: 1.05rem;
}