@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ════════════════════════════════════════════════════════════════════
   GLOBAL UI SCALE  (fit-to-viewport density knob)
   ────────────────────────────────────────────────────────────────────
   Single source of truth for app density. The value is now chosen per
   viewport width (see the :root block below) instead of being fixed,
   because the pages are authored in fixed px against a ~1600px-wide
   content area. Every rule below collapses to a no-op at 1.

   Why `zoom` and not a smaller root font-size:
   MudBlazor.min.css expresses ~5300 lengths in px and only ~74 in rem,
   so component metrics (input/button heights, toolbar heights, cell
   padding, icon sizes, drawer widths) do NOT follow the rem base. A
   font-size change only shrinks text and leaves the chrome full size.
   `zoom` scales the CSS px itself, which is what browser zoom does, and
   unlike `transform: scale()` it participates in layout (no leftover
   gaps, no blurred text, hit-testing stays correct).

   Two compensations are required and are applied below:
     1. `zoom` does NOT rescale vh/vw. Use --af-vh / --af-vw instead of
        raw viewport units, or full-height pages lose (1 - scale) of the
        screen. Pattern: calc(var(--af-vh) * 100) in place of 100vh.
     2. MudBlazor positions popovers in JS by writing px from
        getBoundingClientRect() (visual space) onto .mud-popover. Inside
        a zoomed subtree those px get re-scaled, misplacing every menu,
        select, tooltip and date picker. The .mud-popover rules below
        cancel the inherited zoom on the positioned node and re-apply it
        to its content, so position is exact and content still scales.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* FIT-TO-VIEWPORT SCALE
       -------------------------------------------------------------------
       The pages are authored in fixed px against a content area of roughly
       1600 CSS px (the KPI card row and the wallboard column set are what
       set that width). The trap is that CSS viewport width is NOT the
       panel's pixel width: a laptop with Windows display scaling at 150%
       reports a 1280px CSS viewport on a physical 1920px panel, so the
       fixed px eat 1.5x more of the screen and the whole UI reads as
       oversized -- the wallboard drops to ~2 visible rows.

       So: scale down only far enough to hand the layout ~1600px of room,
       and never scale up past 1:1 (1:1 is what the page CSS is drawn for;
       going above it just magnifies without adding information).

           scale = min(1, viewport / 1600)

         CSS viewport      scale   layout width   typical display
         >= 1600px         1.00    = viewport     1920x1080 monitor @100%
         1440 - 1599px     0.90    1600 - 1777
         1200 - 1439px     0.80    1500 - 1799    1920 panel @150% OS scale
         < 1200px          0.70    < 1714         small / heavily scaled

       Width only. Height is deliberately not part of the fit, so a short
       screen shows fewer table rows rather than shrinking every control;
       folding height in would push the 150%-scaled laptop to ~0.67 and
       take the 9-13px wallboard labels under the legibility floor.

       Breakpoints, not a continuous calc(), because `zoom` needs a
       unitless number and CSS cannot divide a length by a length to get
       one. The steps are placed so layout width lands near 1600-1800px
       at every common display. Floor is 0.70: below that the wallboard's
       9px labels render under ~6px.

       The 0.80 band starts at 1200px, not 1280px, on purpose: the target
       laptop reports exactly 1280px, so a boundary there would flip it to
       0.70 the moment anything took 1px off the viewport (a document
       scrollbar alone is ~15px). Boundaries sit away from real widths. */
    --af-ui-scale: 1;

    /* Viewport units, pre-divided by the scale. Use as: calc(var(--af-vh) * 100) */
    --af-vh: calc(1vh / var(--af-ui-scale));
    --af-vw: calc(1vw / var(--af-ui-scale));
}

/* `zoom` on html does not change the viewport, so these queries always
   evaluate against the real CSS viewport -- no feedback loop. */
@media (max-width: 1599.98px) {
    :root {
        --af-ui-scale: 0.9;
    }
}

@media (max-width: 1439.98px) {
    :root {
        --af-ui-scale: 0.8;
    }
}

@media (max-width: 1199.98px) {
    :root {
        --af-ui-scale: 0.7;
    }
}

html {
    zoom: var(--af-ui-scale);
}

/* MudBlazor's JS-positioned popover layer — see note 2 above. */
.mud-popover {
    zoom: calc(1 / var(--af-ui-scale));
}

    .mud-popover > * {
        zoom: var(--af-ui-scale);
    }

html, body {
    font-size: 14px;
    font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
    margin: 0;
    padding: 0;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.custom-modal-overlay {
    background-color: #000000e3 !important;
}

    .custom-modal-overlay .blazored-modal {
        border-radius: 0px !important;
    }

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

    .dialog h4 {
        margin-top: 0;
    }

@keyframes blinker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.live-indicator {
    font-size: 0.75rem;
    color: red;
    animation: blinker 1s linear infinite;
    margin-right: 4px;
}

.blinking-text {
    color: red;
    font-size: 0.75rem;
    animation: blinker 1s linear infinite;
}

/* Styling for each summary box */
.summary-box {
    background-color: var(--mud-palette-surface) !important;
    border: 2px solid var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 8px !important;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 80px !important;
}

    /* Title styling inside each summary box */
    .summary-box h4 {
        margin: 0 !important;
        font-size: 1.1rem !important;
        color: var(--mud-palette-text-primary) !important;
        font-weight: bold !important;
    }

    /* Value text styling inside each summary box */
    .summary-box p {
        margin: 5px 0 !important;
        font-size: 1.5rem !important;
        font-weight: bold !important;
        color: var(--mud-palette-text-primary) !important;
    }

.btn-primary {
    color: white !important;
    background-color: #00719E !important;
    border-color: #1861ac !important;
}

.table {
    width: 100%;
    border: none; /* Remove global border */
    border-collapse: collapse;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary); /* text color theme-aware */
    border-radius: 4px;
}

    .table th, .table td {
        border: 1px solid var(--mud-palette-divider);
        padding: 8px;
        text-align: center !important;
        color: var(--mud-palette-text-primary); /* text color theme-aware */
        text-align: center;
    }
    /* Fix the table header at the top when scrolling */
    .table th {
        position: sticky;
        top: 0;
        background-color: var(--mud-palette-surface); /* To ensure the header doesn't overlap with table rows */
        z-index: 1; /* Ensure header stays on top of table rows */
        border-bottom: 1px solid var(--mud-palette-divider) !important;
        box-shadow: none;
        background-color: #363535 !important;
        color: white !important;
        text-align: center;
    }

    .table tr:nth-child(even) {
        background-color: var(--mud-palette-background-grey);
    }

    /* Styling for smaller action buttons */
    /* Ensure that buttons within the table are displayed horizontally (side by side) */
    .table td button {
        font-size: 0.7rem; /* Smaller text size */
        padding: 4px 8px; /* Smaller padding for compact buttons */
        height: 30px; /* Adjust the button height */
        width: 30px; /* Adjust the button width */
        display: inline-flex; /* This ensures the buttons appear side by side */
        align-items: center; /* Vertically center the icon */
        justify-content: center; /* Horizontally center the icon */
        margin-right: 5px; /* Add space between buttons */
    }

        /* Optional: Styling for the icons inside the buttons */
        .table td button i {
            font-size: 0.9rem; /* Smaller icon size */
        }

        /* Button specific styling */
        .table td button.btn-light {
            background-color: var(--mud-palette-background-grey); /* theme-aware light button */
            border: 1px solid var(--mud-palette-divider);
            color: var(--mud-palette-text-primary);
        }

        .table td button.btn-danger {
            background-color: var(--mud-palette-error);
            color: white;
            border: none;
        }

        .table td button.btn-info {
            background-color: var(--mud-palette-info);
            color: white;
            border: none;
        }

.form-control {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
}

.btn-light {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast);
    border: none;
}

.btn-theme-primary {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast);
    border: none;
}

    .btn-theme-primary i {
        color: var(--mud-palette-primary-contrast);
    }

.table td button.btn-call {
    background: linear-gradient(135deg, #1de9b6, #1dc4e9);
    color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.3s ease;
}

    .table td button.btn-call:hover {
        background: linear-gradient(135deg, #17c1a4, #17a2b8);
    }

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-safe {
    color: #4caf50;
    font-size: 14px;
}

.status-flagged {
    color: #e9837c;
    font-size: 14px;
}

.tab-buttons {
    display: flex;
    gap: 10px;
}

    .tab-buttons .btn-custom {
        background-color: #00719E;
        color: white !important;
        border: none;
        margin: 2px;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
    }

        .tab-buttons .btn-custom.active {
            background-color: 2px solid #1e90ff; /* DodgerBlue highlight */
            color: white !important;
            font-weight: bold;
            box-shadow: 0 0 6px rgba(0,0,0,0.3);
        }

.form-background {
    background-color: var(--mud-palette-background);
    padding: 10px 20px 40px 20px;
    border-radius: 15px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: auto;
    color: var(--mud-palette-text-primary);
}

.header-background {
    background-color: var(--mud-palette-surface);
    padding: 10px;
    border-radius: 8px 8px 0 0;
    color: var(--mud-palette-text-primary);
}

/* === Thick & Visible MudSlider === */

/* thicker track for all MudSliders (optional) */
.mud-slider {
    --mud-slider-track-thickness: 10px;
}

/* or only for your thick-slider class */
.thick-slider.mud-slider {
    --mud-slider-track-thickness: 20px;
}

/* enlarge thumb (handle) */
.thick-slider .mud-slider-thumb {
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

    /* make thumb easier to see when focused/hovered */
    .thick-slider .mud-slider-thumb:hover,
    .thick-slider .mud-slider-thumb:focus {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        transform: scale(1.1);
    }

.live-wallboard-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}