: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 */
}

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);
}
.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;
    }