.no-screen, .no-screen * {
    display: none !important;
}

.detection-display {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 53px;
}

.detection-grid-row {
    display: grid;
    column-gap: 16px;
    row-gap: 32px;
    padding: 16px 20px;
    box-sizing: border-box;
}

.detection-grid-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 120ms ease;
}

.detection-grid-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.detection-grid-card-image {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.detection-grid-card-details {
    flex: 0 0 auto;
    display: grid;
    padding: 1px 2px 1px;
    min-width: 0;
    gap: 2px;
    border-radius: 0 0 8px 8px;
}

/* Timestamp (left) + device name (right) on a single row. Both truncate with
   ellipses rather than wrapping. Timestamp keeps its natural width; the device
   name flexes into the remaining space and truncates first when things get tight. */
.detection-grid-card-header-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
}

.detection-grid-card-timestamp {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detection-grid-card-device-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.7rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* In the grid card context only: truncate the DetectionDetailsComponent's detection-text
   MudText (rendered as a <p class="mud-typography …">) instead of wrapping. MudStack doesn't
   use a .mud-stack class — it renders utility classes like .d-flex / .flex-row — so we
   apply min-width: 0 to every descendant to let the flex chain shrink the text below its
   nowrap min-content. Scoped to .detection-grid-card-details so list view is unaffected. */
.detection-grid-card-details * {
    min-width: 0;
}

.detection-grid-card-details .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid-view only: shrink the detection icon and magnifying-glass icon-button one step
   below MudBlazor's Size.Small defaults (1.25rem / 1.125rem). Scoped to the grid card so
   list view sizing is untouched. Covers both the in-details icon and the corner-icon
   overlay that appears when there is no detection text. */
.detection-grid-card-details .mud-icon-size-small,
.detection-grid-card-corner-icon .mud-icon-size-small {
    font-size: 1rem;
}

.detection-grid-card-details .mud-icon-button-size-small {
    padding: 2px;
    font-size: 0.9rem;
}

/* When a detection has no text the detection icon is overlaid on the top-left of the
   image instead of taking up a second line in the details band. */
.detection-grid-card-corner-icon {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.scroll-locked {
    padding-right: 9px;
}

.table-row-header {
    background-color: rgba(130, 130, 130, 0.1) !important;
}
.table-row-header:hover {
    background-color: rgba(130, 130, 130, 0.4) !important;
}

.table-row-selected {
    background-color: rgba(130, 130, 130, 0.25) !important;
}
.table-row-selected:hover {
    background-color: rgba(130, 130, 130, 0.4) !important;
}


.drawer-background {
    background-color: var(--mud-palette-background);
}

.iframe {
    height: 400px;
    width: 100%;
    margin: 0 !important;
}

.setup-floating-buttons {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1100;
}

.dialog-popover {
    z-index: 1502;
}

.one-column-component {
    height: calc(100vh - 200px);
    width: 800px;
    overflow-x: hidden;
    overflow-y: auto;
}

.two-column-component {
    height: calc(100vh - 200px);
    width: 1200px;
    overflow-x: hidden;
    overflow-y: auto;
}

.three-column-component {
    height: calc(100vh - 200px);
    width: 1600px;
    overflow-x: hidden;
    overflow-y: auto;
}

.overlay-w1 {
    width: 800px;
    overflow-x: hidden;
}

.overlay-w2 {
    width: 1000px;
    overflow-x: hidden;
}

.overlay-w3 {
    width: 1200px;
    overflow-x: hidden;
}

.overlay-w4 {
    width: 1400px;
    overflow-x: hidden;
}

.overlay-w5 {
    width: 1600px;
    overflow-x: hidden;
}

.overlay-h1 {
    height: calc(100vh - 500px);
    overflow-y: auto;
}

.overlay-h2 {
    height: calc(100vh - 400px);
    overflow-y: auto;
}

.overlay-h3 {
    height: calc(100vh - 300px);
    overflow-y: auto;
}

.overlay-h4 {
    height: calc(100vh - 200px);
    overflow-y: auto;
}

.overlay-h5 {
    height: calc(100vh - 100px);
    overflow-y: auto;
}

.detections-page {
    height: calc(100vh - var(--mud-appbar-height));
    overflow: hidden;
    position: relative;
    padding-right: 12px;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
}

.scroll-position-wrapper
{
    position: relative;
    flex: 1;
    min-height: 0;
}

.scrollable-container
{
    /* Margin/padding values below set the scrollbar flush with the right edge of the container */
    height: 100%;
    margin-right: -12px;
    padding-right: 12px;
    overflow-y: auto;
}

.scroll-position-indicator
{
    position: absolute;
    right: 22px;
    top: 0;
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    white-space: nowrap;
}

.scroll-position-indicator.visible
{
    opacity: 1;
}

.page {
    height: calc(100vh - var(--mud-appbar-height));
    overflow-x: hidden;
    position: relative;
    padding: 12px;
}

.navmenu {
    overflow-y: scroll;
    scrollbar-width: none;
    overflow-x: hidden;
}

.mud-drawer-content {
    overflow-x: hidden !important;
}

.camera-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.view-item-actions {
    opacity: 0;
    transition: opacity 0.15s;
}

.camera-list-item:hover .view-item-actions {
    opacity: 1;
}

.navmenu::-webkit-scrollbar {
    display: none;
}

.page-content {
    overflow-x: hidden;
    overflow-y: auto;
}

.index-page {
    height: calc(100vh - 112px);
    overflow-x: hidden;
    position: relative;
    padding: 12px;
}

.help-page {
    height: calc(100vh - 24px);
    overflow-x: hidden;
    position: relative;
    padding: 12px;
}

.help-page-content {
    height: calc(100vh - 119px);
    overflow-y: auto;
}

.table {
    margin-top: 12px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 8px;
}

.drawer {
    background-color: transparent;
    max-width: 100vw;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 4px;
    max-height: calc(100vh - var(--mud-appbar-height) - 12px);
}

.search-drawer {
    height: calc(100vh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: -12px;
    margin-bottom: -12px;
    margin-right: -4px;
    margin-left: -12px;
    padding-top: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 10px;
}

.search-drawer-buttons {
    margin-top: 19px;
    margin-right: 6px;
    margin-left: -2px;
}

/* Asset list page content area — CSS Grid layout that auto-sizes the active
   list/grid view to fill the available space. Row 1 (auto) is the expansion
   panel form; row 2 (1fr) is the active grid (face / text / read-only fallback)
   which gets a definite computed height from the 1fr track. The grid component
   uses Height="100%" against that track. Replaces the previous magic-number
   calc(100vh - Xpx) approach so layout changes above (or panel toggles) just
   work without retuning anything. */
.asset-list-content-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
}

/* Force the active grid view to fill the 1fr row. Targets MudDataGrid for the
   editable views and the asset-grid-fill MudPaper for the read-only fallback.
   The "Save first" notice MudPaper is intentionally NOT included — it stays
   at natural size so we don't inflate one line of text into a giant box. */
.asset-list-content-grid > .mud-data-grid,
.asset-list-content-grid > .asset-grid-fill {
    height: 100%;
    min-height: 0;
}

/* MudDataGrid's outer wrapper is block-layout by default, so the toolbar +
   table-container (with max-height: 100%) + pager can stack PAST the wrapper's
   definite height — pushing the page past the drawer. Force flex column so the
   table-container fills only the REMAINING space after toolbar + pager. Scoped
   to .asset-list-content-grid so other MudDataGrids in the app aren't affected. */
.asset-list-content-grid > .mud-data-grid {
    display: flex;
    flex-direction: column;
}

.asset-list-content-grid > .mud-data-grid > .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
}

/* Search drawer's vertical layout — full-height flex column so the Search/Reset
   action buttons stay pinned to the bottom regardless of expansion-panel scroll. */
.search-vertical-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.search-vertical-layout > .search-vertical-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.search-vertical-layout > .search-vertical-actions {
    flex: 0 0 auto;
    padding-bottom: 8px;
    margin-top: 8px;
}

/* Asset list page content area — CSS Grid layout that auto-sizes the active
   list/grid view to fill the available space. Row 1 (auto) is the expansion
   panel form; row 2 (1fr) is the active grid (face / text / read-only fallback)
   which gets a definite computed height from the 1fr track. The grid component
   uses Height="100%" against that track. Replaces the previous magic-number
   calc(100vh - Xpx) approach so layout changes above (or panel toggles) just
   work without retuning anything. */
.asset-list-content-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
}

/* Force the active grid view to fill the 1fr row. Targets MudDataGrid for the
   editable views and the asset-grid-fill MudPaper for the read-only fallback.
   The "Save first" notice MudPaper is intentionally NOT included — it stays
   at natural size so we don't inflate one line of text into a giant box. */
.asset-list-content-grid > .mud-data-grid,
.asset-list-content-grid > .asset-grid-fill {
    height: 100%;
    min-height: 0;
}

/* MudDataGrid's outer wrapper is block-layout by default, so the toolbar +
   table-container (with max-height: 100%) + pager can stack PAST the wrapper's
   definite height — pushing the page past the drawer. Force flex column so the
   table-container fills only the REMAINING space after toolbar + pager. Scoped
   to .asset-list-content-grid so other MudDataGrids in the app aren't affected. */
.asset-list-content-grid > .mud-data-grid {
    display: flex;
    flex-direction: column;
}

.asset-list-content-grid > .mud-data-grid > .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
}

/* Search drawer's vertical layout — full-height flex column so the Search/Reset
   action buttons stay pinned to the bottom regardless of expansion-panel scroll. */
.search-vertical-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.search-vertical-layout > .search-vertical-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.search-vertical-layout > .search-vertical-actions {
    flex: 0 0 auto;
    padding-bottom: 8px;
    margin-top: 8px;
}

/* Detection-type tab selector inside the search drawer: hide MudTabs' overflow scroll
   arrows so all icons fit in the drawer width without the chevrons. */
.detection-type-tabs .mud-tabs-toolbar-scroll-button,
.detection-type-tabs .mud-tab-scroll-button,
.detection-type-tabs .mud-tabs-scroll-button {
    display: none !important;
}

/* Reclaim the default expansion-panel inner padding inside the search drawer so the
   detection-type tabs have more room. */
.search-drawer-panels .mud-expand-panel-content {
    padding: 4px !important;
}

.watch-list-red {
    background-color: #d98880;
}

.watch-list-orange {
    background-color: #f0b27a;
}

.watch-list-yellow {
    background-color: #f7dc6f;
}

.watch-list-light-green {
    background-color: #82e0aa;
}

.watch-list-green {
    background-color: #7dcea0;
}

.watch-list-blue-green {
    background-color: #73c6b6;
}

.watch-list-blue {
    background-color: #85c1e9;
}

.watch-list-light-blue {
    background-color: #d4e6f1;
}

.watch-list-lavender {
    background-color: #e8daef;
}

.watch-list-purple {
    background-color: #bb8fce;
}

.watch-list-pink {
    background-color: #fadbd8;
}

.watch-list-white {
    background-color: #FFFFFF;
}

.dialog-background {
    backdrop-filter: blur(10px);
}

#components-reconnect-modal {
    color: black !important;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

[data-md-render] ul {
    list-style-position: inside;
}

[data-md-render] p {
    margin-bottom: .25em;
}

[data-md-render] h3 {
    font-size: var(--mud-typography-h3-size);
    font-family: var(--mud-typography-h3-family);
    font-weight: var(--mud-typography-h3-weight);
    line-height: var(--mud-typography-h3-lineheight);
    letter-spacing: var(--mud-typography-h3-letterspacing);
    text-transform: var(--mud-typography-h3-text-transform);
    margin-top: 1rem;
    margin-bottom: .8rem;
}

[data-md-render] h4 {
    font-size: var(--mud-typography-h4-size);
    font-family: var(--mud-typography-h4-family);
    font-weight: var(--mud-typography-h4-weight);
    line-height: var(--mud-typography-h4-lineheight);
    letter-spacing: var(--mud-typography-h4-letterspacing);
    text-transform: var(--mud-typography-h4-text-transform);
    margin-top: 1rem;
    margin-bottom: .75rem;
}

[data-md-render] h5 {
    font-size: var(--mud-typography-h5-size);
    font-family: var(--mud-typography-h5-family);
    font-weight: var(--mud-typography-h5-weight);
    line-height: var(--mud-typography-h5-lineheight);
    letter-spacing: var(--mud-typography-h5-letterspacing);
    text-transform: var(--mud-typography-h5-text-transform);
    margin-top: 1rem;
    margin-bottom: .5rem;
}

[data-md-render] h6 {
    font-size: var(--mud-typography-h6-size);
    font-family: var(--mud-typography-h6-family);
    font-weight: var(--mud-typography-h6-weight);
    line-height: var(--mud-typography-h6-lineheight);
    letter-spacing: var(--mud-typography-h6-letterspacing);
    text-transform: var(--mud-typography-h6-text-transform);
    margin-top: 1rem;
    margin-bottom: .25rem;
}

.audit-trail-grid {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.audit-trail-grid .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
}

.audit-trail-grid td:first-child button:disabled {
    visibility: hidden;
}

.smart-search-container {
    min-width: 500px;
    max-width: 800px;
}

.page-image-drop-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    z-index: 1500;
    background: rgba(var(--mud-palette-primary-rgb), 0.95);
    color: var(--mud-palette-primary-contrasttext);
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-bottom: 3px dashed var(--mud-palette-primary-contrasttext);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    animation: drop-banner-slide 0.2s ease-out;
}

.page-image-drop-banner.drag-active {
    display: flex;
}

@keyframes drop-banner-slide {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.detection-type-card {
    border: 1px solid var(--mud-palette-lines-default) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
}

.detection-type-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.6) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 0 rgba(var(--mud-palette-primary-rgb), 0.25) !important;
}

.detection-type-card-selected {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.6) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

.detection-type-card-selected:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 0 rgba(var(--mud-palette-primary-rgb), 0.4) !important;
}

.object-grid {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.object-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.object-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.object-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.object-grid-cols-7 { grid-template-columns: repeat(7, 1fr); }

.object-grid-tile {
    height: 80px !important;
    min-height: 0 !important;
}

.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.25rem;
    width: 100%;
}

.color-swatch {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.wizard-step-body {
    width: 75%;
    margin: 0 auto;
}