:root {
    --mud-palette-primary: #164F7A;
    --mud-palette-info: #548cb7;
    --color-primary: #5EA73C; /* Deep green for strong brand presence */
    --color-primary-light: #68ad3c; /* Bright green for highlights and accents */
    --color-primary-lighter: #92C83E; /* Soft greenyellow for backgrounds or subtle elements */
    --color-white: #FFFFFF; /* Clean white for contrast and clarity */
    --color-black: #75797b; /* Solid black for text or deep contrast */
    --color-text: #2a2d35 /* Dark gray for readable body text */
    --color-gray: #616161; /* Neutral gray for borders, muted text */
    /* Primary: blue  RGB 22 79 122  */
    --lg-color-primary: #164F7A;
    --lg-color-primary-dark: #548cb7; /* darkened for hover states */
    --lg-color-primary-lighter: #7DA6C2; /* lighter blue highlight backgrounds */
    --lg-color-primary-light: #A3C1D5;
    --lg-color-primary-lightest: #C9DBE8;
    /* Primary: Brand Black  RGB 35 31 32 */
    --lg-color-dark: #231F20;
    --lg-color-dark-lighter: #4f4c4d;
    --lg-color-dark-light: #7b7979;
    --lg-color-dark-lightest: #a7a5a6; /* near-white tint — subtle backgrounds over dark */
    /* Secondary: Cool Teal  RGB 80 179 173 */
    --lg-color-secondary-cool: #548cb7;
    --lg-color-secondary-cool-darker: #3E7DA8;
    --lg-color-secondary-cool-lighter: #7AA7C9;
    --lg-color-secondary-cool-light: #9FBDD9;
    --lg-color-secondary-cool-lightest: #C5D3E8;
    /* Primary UI font: Montserrat (Light + Bold) */
    --lg-font-family: Poppins, Roboto, Helvetica, Arial, sans-serif;
    /* Body / paragraph text: Open Sans Regular */
    --lg-font-family-body: Poppins, Roboto, Helvetica, Arial, sans-serif;
    /* Display / decorative (landing hero only): Caveat script */
    --lg-font-family-display: Poppins, Roboto, Helvetica, Arial, sans-serif;
    --elite-bg: #FFFFFF;
    --elite-header-bg: #FFFFFF ;
    --elite-accent: #00A7D8;
    --elite-accent-glow: rgba(0, 167, 216, 0.4);
    --elite-border: rgba(255, 255, 255, 0.08);
    --elite-text: #164F7A;
    --elite-text-dim: rgba(255, 255, 255, 0.5);
}

@import url('startup-shell-temporary.css');

h6 {
    color: var(--mud-palette-info) !important;
}
.mud-primary-text {
    color: var(--mud-palette-primary) !important;
    --mud-ripple-color: var(--mud-palette-primary) !important;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}
.swal2-container {
    z-index: 1060 !important;
}

.mud-appbar {
    background-color: #FFFFFF;
    border-bottom: 4px solid #2155b5; /* Adjust the thickness and color as needed */
    color: #2155b5;
}
.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover) !important;
    font-weight: 800 !important;
    line-height: 1.5rem !important;
}
.dialog-background-title {
    background: rgb(from var(--mud-palette-info-lighten) r g b / 50%);
    color: var(--mud-palette-white);
}

.mud-tab {
    cursor: pointer;
    padding-right: 24px;
}
/* Disable the slider. It doesn't position itself correctly. */
.mud-tab-slider.mud-tab-slider-horizontal {
    height: 0 !important;
}
.mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border-radius: 0px;
    border-style: solid;
    border-width: 0 0 4px 0;
}


.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-primary-text);
    --mud-ripple-color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}
    .mud-button-filled.mud-button-filled-primary:hover {
        color: var(--mud-palette-primary-text);
        --mud-ripple-color: var(--mud-palette-primary-text);
        background-color: var(--mud-palette-secondary);
    }

.mud-main-content {
    padding-top: 0px !important;
}

.tabActiveheader {
    background-color: var(--mud-palette-primary-lighten) !important;
}
.tabActiveheaderLight {
    background-color: var(--mud-palette-primary-hover) !important;
    padding-right:24px;
}  

/* ── Tile data section headers: VSD / WATER / GAS ── */
.tile-section-header {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 10px;
    padding: 7px 12px 6px;
    user-select: none;
    transition: box-shadow 0.2s ease;
}

/* Inner top-edge highlight — the "glass" effect */
.tile-section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

/* Used inside CSS-grid layouts (control-grid) to span all columns */
.tile-section-full-row {
    grid-column: 1 / -1;
}

/* Typography refinement for all section labels */
.tile-section-header .mud-typography {
    position: relative;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.tile-section-vsd {
    background: linear-gradient(145deg, #45b34e 0%, #2a7d34 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 -1px 0 rgba(0, 0, 0, 0.14) inset,
        0 3px 10px rgba(42, 125, 52, 0.40);
}

.tile-section-water {
    background: linear-gradient(145deg, #3b9ddd 0%, #1458b8 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 -1px 0 rgba(0, 0, 0, 0.14) inset,
        0 3px 10px rgba(20, 88, 184, 0.42);
}

.tile-section-gas {
    background: linear-gradient(145deg, #ffb74d 0%, #e65100 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 3px 10px rgba(230, 81, 0, 0.34);
}
.tile-section-engine {
    background: linear-gradient(145deg, #78909c 0%, #37474f 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 -1px 0 rgba(0, 0, 0, 0.16) inset,
        0 3px 10px rgba(55, 71, 79, 0.40);
}
.fab-xs {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
}

    .fab-xs .mud-icon-root {
        font-size: 12px !important;
        line-height: 20px !important;
    }

/* ── Disconnected controller tile: lightly grayed-out but still fully interactive ── */
.tile-disconnected {
    background: linear-gradient(135deg, rgba(245, 245, 245, 1) 0%, rgba(238, 238, 238, 1) 100%) !important;
}

/* Gray out the identity + telemetry data; keep the actions bar (Well Detail) crisp and clickable */
.tile-disconnected .card-header-premium,
.tile-disconnected .mud-card-content {
    filter: grayscale(0.9) opacity(0.55);
    transition: filter 0.25s ease;
}

/* Ease the fade on hover to reassure the tile is still live */
.tile-disconnected:hover .card-header-premium,
.tile-disconnected:hover .mud-card-content {
    filter: grayscale(0.55) opacity(0.75);
}

/*
 * Reduced-motion exemption for progress indicators.
 *
 * Bpt.UI.Web.Theming's bpt-utilities.css ships a `prefers-reduced-motion: reduce`
 * reset that forces `animation-duration: 0.01ms` and `animation-iteration-count: 1`
 * on every element (*, *::before, *::after). That freezes MudBlazor's indeterminate
 * MudProgressLinear/MudProgressCircular, which must loop to convey ongoing work
 * (e.g. the loading bar shown when clicking "Historical Monitoring").
 *
 * Loading/status indicators are exempt from reduced-motion guidance, so re-enable
 * their looping animation. This file loads after bpt-utilities.css and the selectors
 * outrank the universal reset, so these !important rules win.
 */
@media (prefers-reduced-motion: reduce) {
    /* Bar-class form (.horizontal on the bar) */
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.horizontal {
        animation: mud-progress-linear-horizontal-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite !important;
    }

    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.vertical {
        animation: mud-progress-linear-vertical-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite !important;
    }

    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.horizontal {
        animation: mud-progress-linear-horizontal-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite !important;
    }

    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.vertical {
        animation: mud-progress-linear-vertical-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite !important;
    }

    /* Root-class form (.horizontal on the root, bars matched by position) */
    .mud-progress-linear.mud-progress-indeterminate.horizontal .mud-progress-linear-bar:first-child {
        animation: mud-progress-linear-horizontal-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite !important;
    }

    .mud-progress-linear.mud-progress-indeterminate.horizontal .mud-progress-linear-bar:last-child {
        animation: mud-progress-linear-horizontal-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite !important;
    }

    .mud-progress-linear.mud-progress-indeterminate.vertical .mud-progress-linear-bar:first-child {
        animation: mud-progress-linear-vertical-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite !important;
    }

    .mud-progress-linear.mud-progress-indeterminate.vertical .mud-progress-linear-bar:last-child {
        animation: mud-progress-linear-vertical-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite !important;
    }

    /* Circular indeterminate */
    .mud-progress-circular.mud-progress-indeterminate {
        animation: mud-progress-circular-keyframes-circular-rotate 1.4s linear infinite !important;
    }

    .mud-progress-circular-indeterminate-child {
        animation: mud-progress-circular-keyframes-circular-rotate 1.4s linear reverse infinite !important;
    }

    .mud-progress-circular-circle.mud-progress-indeterminate {
        animation: mud-progress-circular-keyframes-circular-dash 1.4s ease-in-out infinite !important;
    }
}