@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Bpt.Blazor.Diagrams/Bpt.Blazor.Diagrams.2tyydm3o66.bundle.scp.css';
@import '_content/Bpt.UI.Shared/Bpt.UI.Shared.eehjbvxat7.bundle.scp.css';
@import '_content/Bpt.UI.Web.AI/Bpt.UI.Web.AI.c1tlul7rad.bundle.scp.css';
@import '_content/Bpt.UI.Web.Users/Bpt.UI.Web.Users.tm02pgoftn.bundle.scp.css';
@import '_content/Bpt.UI.Web/Bpt.UI.Web.waak1jn4yi.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';
@import '_content/WaR.SDK.UI.Designer/WaR.SDK.UI.Designer.7vq7neyyep.bundle.scp.css';

/* /Pages/Authorised/DashboardComponents/Components/ControllerInfoPanel.razor.rz.scp.css */
/* Compact layout for ControllerInfoPanel */
.compact-card[b-skz0sf4jwf] { padding: 0; }

.control-grid[b-skz0sf4jwf] {
    display: grid;
    grid-template-columns: 140px 1fr 280px auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}

.row-actions[b-skz0sf4jwf] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    column-gap: 6px;
    align-items: center;
}

/* Tighten default Mud spacing inside card */
:root[b-skz0sf4jwf] {
}

@media (max-width: 900px) {
    .control-grid[b-skz0sf4jwf] { grid-template-columns: 120px 1fr; }
    .control-grid > div:nth-child(3n)[b-skz0sf4jwf],
    .control-grid > div:nth-child(4n)[b-skz0sf4jwf] { grid-column: span 2; }
}
/* /Pages/Authorised/DashboardComponents/Components/ControllerInfoPanelDOL.razor.rz.scp.css */
/* Compact layout for ControllerInfoPanel */
.compact-card[b-qmdyxsbcyg] { padding: 0; }

.control-grid[b-qmdyxsbcyg] {
    display: grid;
    grid-template-columns: 140px 1fr 280px auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}

.row-actions[b-qmdyxsbcyg] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    column-gap: 6px;
    align-items: center;
}

/* Tighten default Mud spacing inside card */
:root[b-qmdyxsbcyg] {
}

@media (max-width: 900px) {
    .control-grid[b-qmdyxsbcyg] { grid-template-columns: 120px 1fr; }
    .control-grid > div:nth-child(3n)[b-qmdyxsbcyg],
    .control-grid > div:nth-child(4n)[b-qmdyxsbcyg] { grid-column: span 2; }
}
/* /Pages/Authorised/DashboardComponents/Components/MyHomeComponent.razor.rz.scp.css */
/* ── Alert banner ─────────────────────────────────────── */
.home-alert-banner[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
}

.home-alert-danger[b-unax7t3hdr] {
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.25);
    color: #b71c1c;
}

.home-alert-warning[b-unax7t3hdr] {
    background: rgba(245, 124, 0, 0.08);
    border: 1px solid rgba(245, 124, 0, 0.25);
    color: #e65100;
}

.home-alert-icon[b-unax7t3hdr] {
    font-size: 1.3rem !important;
    flex-shrink: 0;
}

.home-alert-body[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-alert-sep[b-unax7t3hdr] {
    opacity: 0.35;
}

/* ── Stat hero cards ──────────────────────────────────── */
.home-stat-card[b-unax7t3hdr] {
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
    min-height: 136px;
}

.home-stat-card:hover[b-unax7t3hdr] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.06);
}

.home-stat-accent[b-unax7t3hdr] {
    width: 5px;
    flex-shrink: 0;
    border-radius: 14px 0 0 14px;
}

.home-stat-body[b-unax7t3hdr] {
    flex: 1;
    padding: 16px 16px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.home-stat-header[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-stat-icon-wrap[b-unax7t3hdr] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-stat-icon[b-unax7t3hdr] {
    font-size: 1.1rem !important;
}

.home-stat-label[b-unax7t3hdr] {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.42);
    white-space: nowrap;
}

.home-stat-value[b-unax7t3hdr] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.home-stat-pct[b-unax7t3hdr] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.home-stat-bar-wrap[b-unax7t3hdr] {
    height: 4px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    overflow: hidden;
}

.home-stat-bar[b-unax7t3hdr] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s ease;
    max-width: 100%;
}

.home-stat-bar-alert[b-unax7t3hdr] {
    background: #d32f2f !important;
}

.home-stat-detail[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    flex-wrap: wrap;
    line-height: 1;
}

.home-stat-positive[b-unax7t3hdr] { color: #2e7d32; font-weight: 600; }
.home-stat-negative[b-unax7t3hdr] { color: #c62828; font-weight: 600; }
.home-stat-warning[b-unax7t3hdr]  { color: #f57c00; font-weight: 600; }
.home-stat-muted[b-unax7t3hdr]    { color: rgba(0, 0, 0, 0.42); font-weight: 500; }
.home-stat-sep[b-unax7t3hdr]      { color: rgba(0, 0, 0, 0.20); }

/* ── Stat card colour variants ────────────────────────── */
.home-stat-primary .home-stat-accent[b-unax7t3hdr]    { background: #164F7A; }
.home-stat-primary .home-stat-icon-wrap[b-unax7t3hdr] { background: rgba(22, 79, 122, 0.10); }
.home-stat-primary .home-stat-icon[b-unax7t3hdr]      { color: #164F7A; }
.home-stat-primary .home-stat-value[b-unax7t3hdr]     { color: #164F7A; }
.home-stat-primary .home-stat-bar[b-unax7t3hdr]       { background: #164F7A; }

.home-stat-green .home-stat-accent[b-unax7t3hdr]      { background: #2e7d32; }
.home-stat-green .home-stat-icon-wrap[b-unax7t3hdr]   { background: rgba(46, 125, 50, 0.10); }
.home-stat-green .home-stat-icon[b-unax7t3hdr]        { color: #2e7d32; }
.home-stat-green .home-stat-value[b-unax7t3hdr]       { color: #2e7d32; }
.home-stat-green .home-stat-bar[b-unax7t3hdr]         { background: #2e7d32; }

.home-stat-teal .home-stat-accent[b-unax7t3hdr]       { background: #00796b; }
.home-stat-teal .home-stat-icon-wrap[b-unax7t3hdr]    { background: rgba(0, 121, 107, 0.10); }
.home-stat-teal .home-stat-icon[b-unax7t3hdr]         { color: #00796b; }
.home-stat-teal .home-stat-value[b-unax7t3hdr]        { color: #00796b; }
.home-stat-teal .home-stat-bar[b-unax7t3hdr]          { background: #00796b; }

.home-stat-orange .home-stat-accent[b-unax7t3hdr]     { background: #e65100; }
.home-stat-orange .home-stat-icon-wrap[b-unax7t3hdr]  { background: rgba(230, 81, 0, 0.10); }
.home-stat-orange .home-stat-icon[b-unax7t3hdr]       { color: #e65100; }
.home-stat-orange .home-stat-value[b-unax7t3hdr]      { color: #e65100; }
.home-stat-orange .home-stat-bar[b-unax7t3hdr]        { background: #e65100; }

.home-stat-indigo .home-stat-accent[b-unax7t3hdr]     { background: #303f9f; }
.home-stat-indigo .home-stat-icon-wrap[b-unax7t3hdr]  { background: rgba(48, 63, 159, 0.10); }
.home-stat-indigo .home-stat-icon[b-unax7t3hdr]       { color: #303f9f; }
.home-stat-indigo .home-stat-value[b-unax7t3hdr]      { color: #303f9f; }
.home-stat-indigo .home-stat-bar[b-unax7t3hdr]        { background: #303f9f; }

/* ── Chart cards ──────────────────────────────────────── */
.home-chart-card[b-unax7t3hdr] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 16px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-carousel-card[b-unax7t3hdr] {
    padding: 0;
    overflow: hidden;
}

.home-chart-header[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.home-chart-title[b-unax7t3hdr] {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    color: rgba(0, 0, 0, 0.46);
    text-transform: uppercase;
}

/* ── Ring chart overlay ───────────────────────────────── */
.ring-container[b-unax7t3hdr] {
    position: relative;
    flex: 1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-center[b-unax7t3hdr] {
    position: absolute;
    text-align: center;
    pointer-events: none;
    line-height: 1.2;
}

.ring-value[b-unax7t3hdr] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(0, 0, 0, 0.80);
}

.ring-sub[b-unax7t3hdr] {
    font-size: 0.63rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.32);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ── Chart inline legends ─────────────────────────────── */
.home-chart-legend[b-unax7t3hdr] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.home-legend-item[b-unax7t3hdr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.home-legend-dot[b-unax7t3hdr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-legend-label[b-unax7t3hdr] {
    flex: 1;
    color: rgba(0, 0, 0, 0.52);
    font-weight: 500;
}

.home-legend-value[b-unax7t3hdr] {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.75);
    min-width: 20px;
    text-align: right;
}

.home-legend-alert[b-unax7t3hdr] {
    color: #c62828;
}
/* /Pages/Authorised/DashboardComponents/Components/MyWellScadaViewCBM.razor.rz.scp.css */
:global(body)[b-c4g6mn7brc] { overflow-x: hidden; }
:global(:root)[b-c4g6mn7brc] { --cube-orange:#FF9800; --cube-amber:#FFC107; --cube-orange-grad:linear-gradient(90deg,var(--cube-orange),var(--cube-amber)); --cube-green:green; --cube-greenlight:greenyellow; --cube-green-grad:linear-gradient(90deg,var(--cube-green),var(--cube-greenlight)); --cube-deep-navy:#0B1437; --cube-deep-navy-alt:#0A1027; }
.centered-stack[b-c4g6mn7brc] { display: flex; align-items: center; }
.centered-stack > *[b-c4g6mn7brc] { display: flex; align-items: center; }
.image-container[b-c4g6mn7brc] { position: relative; display: inline-block; width: 100%; }
.responsive-image[b-c4g6mn7brc] { width: 100%; height: auto; max-width: 600px; }
.pressure-overlay[b-c4g6mn7brc] { position: absolute; top: 12%; right: 20%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.pressuregas-overlay[b-c4g6mn7brc] { position: absolute; top: 30%; right: 20%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flow-overlay[b-c4g6mn7brc] { position: absolute; top: 10%; right: 4%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flowgas-overlay[b-c4g6mn7brc] { position: absolute; top: 28%; right: 4%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.ch4flowgas-overlay[b-c4g6mn7brc] {
    position: absolute;
    top: 32%;
    right: 4%;
    background-color: rgba(255,255,255,0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: clamp(0.75rem,2.5vw,0.875rem);
}
.waterground-overlay[b-c4g6mn7brc] { position: absolute; top: 50%; right: 6%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.waterLevel-overlay[b-c4g6mn7brc] { position: absolute; top: 65%; right: 6%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.frequency-overlay[b-c4g6mn7brc] { position: absolute; top: 30%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.dcVoltage-overlay[b-c4g6mn7brc] { position: absolute; top: 35%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.dcAmps-overlay[b-c4g6mn7brc] { position: absolute; top: 40%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.vsdStatus-overlay[b-c4g6mn7brc] { position: absolute; top: 45%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.controlMode-overlay[b-c4g6mn7brc] { position: absolute; top: 65%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.frequencyB-overlay[b-c4g6mn7brc] { position: absolute; top: 70%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flowB-overlay[b-c4g6mn7brc] { position: absolute; top: 75%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.pressureB-overlay[b-c4g6mn7brc] { position: absolute; top: 80%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.waterLevelB-overlay[b-c4g6mn7brc] { position: absolute; top: 85%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.version-pill[b-c4g6mn7brc] { display:inline-flex; align-items:center; gap:.45rem; padding:0 .6rem; border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid #164F7A; letter-spacing:.4px; position:relative; }
.glow-border[b-c4g6mn7brc]::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--cube-orange-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.live-dotOff[b-c4g6mn7brc] { width:8px; height:8px; border-radius:50%; background:var(--cube-orange-grad); box-shadow:0 0 0 2px var(--cube-deep-navy); display:inline-block; animation: livepulse-b-c4g6mn7brc 2.2s ease-in-out infinite; }
.live-dotOn[b-c4g6mn7brc] { width:8px; height:8px; border-radius:50%; background:var(--cube-green-grad); box-shadow:0 0 0 2px var(--cube-deep-navy); display:inline-block; animation: livepulse-b-c4g6mn7brc 2.2s ease-in-out infinite; }
@keyframes livepulse-b-c4g6mn7brc { 0% { opacity:.9; transform:scale(1);} 50% { opacity:.45; transform:scale(.85);} 100% { opacity:.9; transform:scale(1);} }
/* /Pages/Authorised/DashboardComponents/Components/MyWellScadaViewDOL.razor.rz.scp.css */
:global(body)[b-9xsqld0ipp] { overflow-x: hidden; }
:global(:root)[b-9xsqld0ipp] { --cube-orange:#FF9800; --cube-amber:#FFC107; --cube-orange-grad:linear-gradient(90deg,var(--cube-orange),var(--cube-amber)); --cube-green:green; --cube-greenlight:greenyellow; --cube-green-grad:linear-gradient(90deg,var(--cube-green),var(--cube-greenlight)); --cube-deep-navy:#0B1437; --cube-deep-navy-alt:#0A1027; }
.centered-stack[b-9xsqld0ipp] { display: flex; align-items: center; }
.centered-stack > *[b-9xsqld0ipp] { display: flex; align-items: center; }
.image-container[b-9xsqld0ipp] { position: relative; display: inline-block; width: 100%; }
.responsive-image[b-9xsqld0ipp] { width: 100%; height: auto; max-width: 600px; }
.pressure-overlay[b-9xsqld0ipp] { position: absolute; top: 12%; right: 20%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.pressuregas-overlay[b-9xsqld0ipp] { position: absolute; top: 30%; right: 20%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flow-overlay[b-9xsqld0ipp] { position: absolute; top: 10%; right: 4%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flowgas-overlay[b-9xsqld0ipp] { position: absolute; top: 28%; right: 4%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.ch4flowgas-overlay[b-9xsqld0ipp] {
    position: absolute;
    top: 32%;
    right: 4%;
    background-color: rgba(255,255,255,0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: clamp(0.75rem,2.5vw,0.875rem);
}
.waterground-overlay[b-9xsqld0ipp] { position: absolute; top: 50%; right: 6%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.waterLevel-overlay[b-9xsqld0ipp] { position: absolute; top: 65%; right: 6%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.frequency-overlay[b-9xsqld0ipp] { position: absolute; top: 30%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.dcVoltage-overlay[b-9xsqld0ipp] { position: absolute; top: 35%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.dcAmps-overlay[b-9xsqld0ipp] { position: absolute; top: 40%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.vsdStatus-overlay[b-9xsqld0ipp] { position: absolute; top: 45%; left: 25%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.controlMode-overlay[b-9xsqld0ipp] { position: absolute; top: 65%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.frequencyB-overlay[b-9xsqld0ipp] { position: absolute; top: 70%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.flowB-overlay[b-9xsqld0ipp] { position: absolute; top: 75%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.pressureB-overlay[b-9xsqld0ipp] { position: absolute; top: 80%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.waterLevelB-overlay[b-9xsqld0ipp] { position: absolute; top: 85%; left: 15%; background-color: rgba(255,255,255,0.8); padding: 4px 8px; border-radius: 4px; font-size: clamp(0.75rem,2.5vw,0.875rem); }
.version-pill[b-9xsqld0ipp] { display:inline-flex; align-items:center; gap:.45rem; padding:0 .6rem; border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid #164F7A; letter-spacing:.4px; position:relative; }
.glow-border[b-9xsqld0ipp]::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--cube-orange-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.live-dotOff[b-9xsqld0ipp] { width:8px; height:8px; border-radius:50%; background:var(--cube-orange-grad); box-shadow:0 0 0 2px var(--cube-deep-navy); display:inline-block; animation: livepulse-b-9xsqld0ipp 2.2s ease-in-out infinite; }
.live-dotOn[b-9xsqld0ipp] { width:8px; height:8px; border-radius:50%; background:var(--cube-green-grad); box-shadow:0 0 0 2px var(--cube-deep-navy); display:inline-block; animation: livepulse-b-9xsqld0ipp 2.2s ease-in-out infinite; }
@keyframes livepulse-b-9xsqld0ipp { 0% { opacity:.9; transform:scale(1);} 50% { opacity:.45; transform:scale(.85);} 100% { opacity:.9; transform:scale(1);} }
/* /Pages/Authorised/DashboardComponents/Components/MyWellScadaViewFAI.razor.rz.scp.css */
/* /Pages/Authorised/DashboardComponents/Components/ScadaImageViewOverlayCBM.razor.rz.scp.css */
.image-container[b-lvxr5kh0gu] {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

/* Cross isolation for MudImage output */
[b-lvxr5kh0gu] .background-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Cross isolation for MudText output */
.image-container[b-lvxr5kh0gu]  .overlay-text {
    position: absolute;
    background-color: #f4f4f4;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
}

    .image-container[b-lvxr5kh0gu]  .overlay-text span {
        color: inherit;
    }

/* Blinking red text for TRIPPED */
[b-lvxr5kh0gu] .blink-red {
    color: red !important;
    animation: blink-red-b-lvxr5kh0gu 1s steps(2, start) infinite;
}

@keyframes blink-red-b-lvxr5kh0gu {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}

/* Blinking orange text for UNKNOWN */
[b-lvxr5kh0gu] .blink-orange {
    color: darkorange !important;
    animation: blink-orange-b-lvxr5kh0gu 3s steps(2, start) infinite !important;
}

@keyframes blink-orange-b-lvxr5kh0gu {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}


/* /Pages/Authorised/DashboardComponents/Components/ScadaImageViewOverlayDOL.razor.rz.scp.css */
.image-container[b-3lr1o3rdz4] {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

/* Cross isolation for MudImage output */
[b-3lr1o3rdz4] .background-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Cross isolation for MudText output */
.image-container[b-3lr1o3rdz4]  .overlay-text {
    position: absolute;
    background-color: #f4f4f4;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
}

    .image-container[b-3lr1o3rdz4]  .overlay-text span {
        color: inherit;
    }

/* Blinking red text for TRIPPED */
[b-3lr1o3rdz4] .blink-red {
    color: red !important;
    animation: blink-red-b-3lr1o3rdz4 1s steps(2, start) infinite;
}

@keyframes blink-red-b-3lr1o3rdz4 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}

/* Blinking orange text for UNKNOWN */
[b-3lr1o3rdz4] .blink-orange {
    color: darkorange !important;
    animation: blink-orange-b-3lr1o3rdz4 3s steps(2, start) infinite !important;
}

@keyframes blink-orange-b-3lr1o3rdz4 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}


/* /Pages/Authorised/DashboardComponents/Components/ScadaImageViewOverlayFAI.razor.rz.scp.css */
.image-container[b-bbbzfw6bl3] {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

/* Cross isolation for MudImage output */
[b-bbbzfw6bl3] .background-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Cross isolation for MudText output */
.image-container[b-bbbzfw6bl3]  .overlay-text {
    position: absolute;
    background-color: #f4f4f4;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
}

    .image-container[b-bbbzfw6bl3]  .overlay-text span {
        color: inherit;
    }

/* Blinking red text for TRIPPED */
[b-bbbzfw6bl3] .blink-red {
    color: red;
    animation: blink-red-b-bbbzfw6bl3 1s steps(2, start) infinite;
}

@keyframes blink-red-b-bbbzfw6bl3 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}

/* Blinking orange text for UNKNOWN */
[b-bbbzfw6bl3] .blink-orange {
    color: darkorange !important;
    animation: blink-orange-b-bbbzfw6bl3 3s steps(2, start) infinite !important;
}

@keyframes blink-orange-b-bbbzfw6bl3 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.5;
    }
}
/* /Pages/Authorised/DashboardComponents/MyTileView.razor.rz.scp.css */
/* Modern hover effects for MyTileView component */

/* Hover effect for cards - elevates and adds shadow */
[b-b9xcf7ggk1] .mud-elevation-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Smooth transitions for all interactive elements */
[b-b9xcf7ggk1] .mud-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effect */
[b-b9xcf7ggk1] .mud-button-root:hover {
    transform: translateY(-1px);
}

/* Expansion panel hover effect */
[b-b9xcf7ggk1] .mud-expansion-panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Avatar pulse animation on hover */
[b-b9xcf7ggk1] .mud-avatar:hover {
    animation: pulse-b-b9xcf7ggk1 0.5s ease-in-out;
}

@keyframes pulse-b-b9xcf7ggk1 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Chip hover effect */
[b-b9xcf7ggk1] .mud-chip:hover {
    transform: scale(1.03);
    transition: transform 0.2s ease;
}

/* Menu button hover effect */
[b-b9xcf7ggk1] .mud-menu:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
}

/* Fade in animation for cards */
@keyframes fadeInUp-b-b9xcf7ggk1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-b9xcf7ggk1] .mud-grid-item {
    animation: fadeInUp-b-b9xcf7ggk1 0.5s ease-out;
}

/* Stagger animation for multiple cards - extended to support up to 12 cards */
[b-b9xcf7ggk1] .mud-grid-item:nth-child(1) { animation-delay: 0.05s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(2) { animation-delay: 0.1s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(3) { animation-delay: 0.15s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(4) { animation-delay: 0.2s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(5) { animation-delay: 0.25s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(6) { animation-delay: 0.3s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(7) { animation-delay: 0.35s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(8) { animation-delay: 0.4s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(9) { animation-delay: 0.45s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(10) { animation-delay: 0.5s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(11) { animation-delay: 0.55s; }
[b-b9xcf7ggk1] .mud-grid-item:nth-child(12) { animation-delay: 0.6s; }
/* Items beyond 12 will still animate but without delay */

/* Icon rotation on hover */
[b-b9xcf7ggk1] .mud-icon-root:hover {
    transition: transform 0.3s ease;
}

[b-b9xcf7ggk1] .mud-menu .mud-icon-root:hover {
    transform: rotate(90deg);
}

/* Badge subtle pulse animation */
[b-b9xcf7ggk1] .mud-badge {
    animation: badgePulse-b-b9xcf7ggk1 2s infinite;
}

@keyframes badgePulse-b-b9xcf7ggk1 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Well Detail button — Apple-grade depth and refinement */
[b-b9xcf7ggk1] .btn-well-detail {
    background: linear-gradient(160deg, #2c82d6 0%, #1a66c0 40%, #1558ae 100%) !important;
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.22) inset,
        0 4px 14px rgba(21, 88, 174, 0.52),
        0 1px 4px rgba(0, 0, 0, 0.16) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Inner top-edge highlight — the "glass" feel */
[b-b9xcf7ggk1] .btn-well-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer sweep on hover */
[b-b9xcf7ggk1] .btn-well-detail::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.60s ease;
    pointer-events: none;
    z-index: 2;
}

[b-b9xcf7ggk1] .btn-well-detail:hover {
    background: linear-gradient(160deg, #3d92e6 0%, #2878d4 40%, #1f6ac6 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.26) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 8px 22px rgba(21, 88, 174, 0.60),
        0 2px 6px rgba(0, 0, 0, 0.14) !important;
    transform: translateY(-1px) !important;
}

[b-b9xcf7ggk1] .btn-well-detail:hover::after {
    left: 150%;
}

/* Tactile press-down state */
[b-b9xcf7ggk1] .btn-well-detail:active {
    background: linear-gradient(160deg, #1a66c0 0%, #1558ae 40%, #104fa0 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.30) inset,
        0 2px 8px rgba(21, 88, 174, 0.40) !important;
    transform: translateY(1px) !important;
}

/* Scoped mud-paper background for this component */
[b-b9xcf7ggk1] .mud-paper {
    background-color: #f4f4f4;
}

/* ── Card header — two-row identity layout ── */
[b-b9xcf7ggk1] .card-header-premium {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.07) 0%, rgba(21, 88, 174, 0.03) 100%);
    border-bottom: 1px solid rgba(25, 118, 210, 0.09);
    padding-bottom: 12px !important;
}

.card-header-top[b-b9xcf7ggk1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

[b-b9xcf7ggk1] .card-header-avatar {
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.30);
    margin-top: 2px;
}

.card-header-body[b-b9xcf7ggk1] {
    flex: 1;
    min-width: 0;
}

.card-header-title-row[b-b9xcf7ggk1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-header-connection[b-b9xcf7ggk1] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.card-conn-pct[b-b9xcf7ggk1] {
    font-size: 0.70rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.card-header-subtitle-row[b-b9xcf7ggk1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

[b-b9xcf7ggk1] .card-status-chip {
    height: 20px !important;
    font-size: 0.68rem !important;
    margin: 0 !important;
}

/* ── Tile data card: section header + value rows unified ── */
.tile-data-card[b-b9xcf7ggk1] {
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.09),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

.tile-data-body[b-b9xcf7ggk1] {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
}

.tile-data-row[b-b9xcf7ggk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.12s ease;
}

.tile-data-row:last-child[b-b9xcf7ggk1] {
    border-bottom: none;
}

.tile-data-row:hover[b-b9xcf7ggk1] {
    background: rgba(0, 0, 0, 0.025);
}

.tile-data-label[b-b9xcf7ggk1] {
    font-size: 0.71rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.50);
    letter-spacing: 0.01em;
}

.tile-data-value[b-b9xcf7ggk1] {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.78);
    letter-spacing: -0.01em;
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    [b-b9xcf7ggk1] .mud-elevation-hover:hover {
        transform: none;
    }
    
    [b-b9xcf7ggk1] .mud-card,
    [b-b9xcf7ggk1] .mud-button-root,
    [b-b9xcf7ggk1] .mud-avatar,
    [b-b9xcf7ggk1] .mud-chip,
    [b-b9xcf7ggk1] .mud-icon-root {
        animation: none !important;
        transition: none !important;
    }

    [b-b9xcf7ggk1] .btn-well-detail::after {
        transition: none;
    }
    
    [b-b9xcf7ggk1] .mud-badge {
        animation: none;
    }
    
    [b-b9xcf7ggk1] .mud-grid-item {
        animation: none;
    }
}