/* ================= WASTEWATER TREATMENT (WWTP) - OVERVIEW =================
 *
 * Ported from web/WebApp/Css/Overview.css of the vn0043-afchem-wastewater-treatment repo.
 * DO NOT edit this file by hand: re-run tools/scope_wwtp_css.py when that Overview.css changes.
 *
 * The only differences from upstream:
 *   - every selector is scoped to #view-wastewater (tank history modal: #tankHistoryModal)
 *   - @keyframes names get a wwtp- prefix so they cannot clash with hapo-scada's own
 *   - rules belonging to the afchem layout are dropped (.content-wrapper, body, html)
 */

#view-wastewater .overview-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #0a0a0a;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
/* PANELS CHUNG */
#view-wastewater .process-status-panel,
#view-wastewater .left-panel,
#view-wastewater .center-panel,
#view-wastewater .right-panel,
#view-wastewater .history-panel,
#view-wastewater .batch-overview-panel,
#view-wastewater .bom-panel {
    background: #131c2f;
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
}
#view-wastewater .panel-header h3 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    border-left: 0.25rem solid #00e5ff;
    padding-left: 0.625rem;
    margin-bottom: 1.25rem;
}
/* TIMELINE QUY TRÌNH */
#view-wastewater .process-timeline-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.875rem;
}
#view-wastewater .process-steps {
    flex: 1;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#view-wastewater .process-steps::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 2.5rem;
    right: 2.5rem;
    height: 0.25rem;
    background: #1e293b;
    z-index: 1;
    border-radius: 0.125rem;
}
#view-wastewater .step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 11%;
}
#view-wastewater .step-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #1e293b;
    border: 0.1875rem solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 1rem;
    transition: all 0.3s ease;
}
#view-wastewater .step.completed .step-icon {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}
#view-wastewater .step.active .step-icon {
    background: rgba(14, 165, 233, 0.2);
    border-color: #00e5ff;
    box-shadow: 0 0 0.9375rem rgba(0, 229, 255, 0.4);
    color: #00e5ff;
}
#view-wastewater .step.active.stopped .step-icon {
    background: rgba(234, 179, 8, 0.2);
    border-color: #eab308;
    box-shadow: 0 0 0.9375rem rgba(234, 179, 8, 0.4);
    color: #eab308;
}
#view-wastewater .step-label {
    position: absolute;
    top: 0.75rem;
    font-size: 0.875rem;
    font-weight: bold;
    color: #94a3b8;
}
#view-wastewater .step.completed .step-label {
    display: none;
}
#view-wastewater .step.active .step-label {
    display: none;
}
/* Loading / blinking marker on the active step */
#view-wastewater .step.active .step-icon::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #00e5ff;
    animation: wwtp-pulse 1.5s infinite;
}
#view-wastewater .step.active.stopped .step-icon::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #eab308;
    animation: none;
}
@keyframes wwtp-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.8;
    }
}
@keyframes wwtp-alarm-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}
#view-wastewater .blink-alarm {
    animation: wwtp-alarm-blink 1s infinite;
}
#view-wastewater .step-name {
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
    font-weight: 600;
}
#view-wastewater .step.completed .step-name {
    color: #10b981;
}
#view-wastewater .step.active .step-name {
    color: #00e5ff;
}
#view-wastewater .step.active.stopped .step-name {
    color: #eab308;
}
/* THỐNG KÊ TIẾN ĐỘ BƯỚC (STEP STATS) */
#view-wastewater .step-stats {
    display: flex;
    justify-content: space-between;
    background: #182137;
    padding: 0.9375rem 1.25rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid rgba(59, 130, 246, 0.15);
    gap: 1.25rem;
}
#view-wastewater .stat-box {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 5.625rem;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
    padding-right: 1.25rem;
}
#view-wastewater .stat-box:last-child {
    border-right: none;
    padding-right: 0;
}
#view-wastewater .stat-title {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-transform: uppercase;
    white-space: nowrap;
}
#view-wastewater .stat-val {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}
#view-wastewater .stat-val small {
    font-size: 1rem;
}
#view-wastewater .text-cyan {
    color: #00e5ff !important;
}
#view-wastewater .progress-bar-small {
    width: 100%;
    height: 0.375rem;
    background: #1e293b;
    border-radius: 0.1875rem;
    overflow: hidden;
    margin-top: 0.3125rem;
}
#view-wastewater .progress-fill {
    height: 100%;
    background: #00e5ff;
    border-radius: 0.1875rem;
    box-shadow: 0 0 0.5rem rgba(0, 229, 255, 0.5);
    transition: width 0.5s ease;
}
/* GRID MAIN CONTENT — one column: the P&ID gets the full width. */
#view-wastewater .overview-main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
/* BOTTOM GRID */
#view-wastewater .overview-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
/* RESPONSIVE */
@media (max-width: 100rem) {
  #view-wastewater .process-timeline-container {
        gap: 0.9375rem;
    }
  #view-wastewater .step-stats {
        padding: 0.625rem 0.9375rem;
        gap: 0.625rem;
    }
  #view-wastewater .stat-box {
        min-width: auto;
        padding-right: 0.9375rem;
    }
  #view-wastewater .stat-title {
        font-size: 0.625rem;
    }
  #view-wastewater .stat-val {
        font-size: 1rem;
    }
  #view-wastewater .step-name {
        font-size: 0.6875rem;
    }
}
@media (max-width: 75rem) {
  #view-wastewater .overview-bottom {
        grid-template-columns: 1fr;
    }
  /* On smaller screens, revert timeline to column */
#view-wastewater .process-timeline-container {
        flex-direction: column;
        align-items: stretch;
    }
  #view-wastewater .step-stats {
        flex-wrap: wrap;
        justify-content: space-around;
    }
  #view-wastewater .stat-box {
        border-right: none;
        padding-right: 0;
        min-width: 30%;
        margin-bottom: 0.625rem;
    }
}
/* ================= PHASE 2: CURRENT STEP & TANK ================= */
#view-wastewater .current-step-info {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}
#view-wastewater .step-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.625rem;
}
#view-wastewater .step-info-row:last-of-type {
    border-bottom: none;
}
#view-wastewater .info-label {
    color: #a9b7cb;
    font-size: 0.875rem;
    font-weight: 500;
}
#view-wastewater .info-value {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}
#view-wastewater .progress-bar-large {
    width: 100%;
    height: 0.75rem;
    background: #1e293b;
    border-radius: 0.375rem;
    overflow: hidden;
}
#view-wastewater .status-badge {
    display: inline-block;
    width: 7.5rem;
    text-align: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}
#view-wastewater .status-badge.in-progress {
    background: rgba(14, 165, 233, 0.2);
    color: #00e5ff;
    border: 0.0625rem solid #00e5ff;
}
#view-wastewater .status-badge.completed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 0.0625rem solid #10b981;
}
#view-wastewater .status-badge.pending {
    background: rgba(105, 104, 104, 0.2);
    color: #a8a7a7;
    border: 0.0625rem solid #a8a7a7;
}
#view-wastewater .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 0.0625rem solid #f59e0b;
}
#view-wastewater .status-badge.alarm {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 0.0625rem solid #ef4444;
}
/* TANK DIAGRAM LAYOUT */
#view-wastewater .tank-diagram-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 40.625rem;
    background: transparent;
    border-radius: 0.5rem;
    padding: 0.625rem 0;
}
#view-wastewater .tank-center-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-right: auto;
    margin-left: -1.875rem;
    width: 100%;
}
#view-wastewater .tank-img {
    max-height: 40.625rem;
    max-width: 100%;
    object-fit: contain;
    z-index: 1;
}
/* PARAMETER CARDS (LEFT & RIGHT) */
#view-wastewater .param-card-side {
    background: rgba(15, 23, 42, 0.6);
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
}
#view-wastewater .param-card-icon {
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
}
#view-wastewater .icon-blue {
    color: #3b82f6;
}
#view-wastewater .icon-cyan {
    color: #00e5ff;
}
#view-wastewater .icon-orange {
    color: #f59e0b;
}
#view-wastewater .icon-purple {
    color: #a855f7;
}
#view-wastewater .icon-red {
    color: #ef4444;
}
#view-wastewater .icon-green {
    color: #22c55e;
}
#view-wastewater .param-card-info {
    flex-grow: 1;
}
#view-wastewater .param-card-title {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
#view-wastewater .param-card-value {
    font-size: 1.375rem;
    color: #00e5ff;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1;
}
#view-wastewater .param-card-value small {
    font-size: 0.75rem;
    font-weight: normal;
}
/* TANK TEMP SENSORS (ON TANK) */
#view-wastewater .tank-temp-card {
    position: absolute;
    background: rgba(15, 23, 42, 0.8);
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 11.25rem;
    z-index: 10;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.25rem);
}
/* Line pointing left from card to tank */
#view-wastewater .tank-temp-card::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 50%;
    height: 0.0625rem;
    background: rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 0.3125rem rgba(59, 130, 246, 0.5);
}
#view-wastewater .tank-temp-card .param-card-title {
    font-size: 0.6875rem;
}
#view-wastewater .tank-temp-card .param-card-value {
    font-size: 1.125rem;
}
/* Positions for tank temp cards based on sodobontron.jpeg */
#view-wastewater .top-temp {
    top: 26.5%;
    right: 3%;
}
#view-wastewater .mid-temp {
    top: 45.5%;
    right: 3%;
}
#view-wastewater .bot-temp {
    top: 64%;
    right: 3%;
}
@media (max-width: 93.75rem) {
  #view-wastewater .tank-diagram-container {
        flex-direction: column;
        gap: 1.875rem;
    }
  #view-wastewater .tank-center-wrapper {
        margin-left: 0 !important;
    }
  #view-wastewater .param-card-side {
        width: calc(33% - 0.9375rem);
    }
}
@media (max-width: 75rem) {
  #view-wastewater .tank-center-wrapper {
        margin-right: 6.25rem !important;
    }
  #view-wastewater .tank-temp-card {
        transform: scale(0.8);
        transform-origin: left center;
    }
  #view-wastewater .param-card-side {
        width: calc(50% - 0.9375rem);
    }
}
@media (max-width: 48rem) {
  #view-wastewater .tank-center-wrapper {
        margin-right: 3.125rem !important;
    }
  #view-wastewater .tank-temp-card {
        transform: scale(0.6);
    }
  #view-wastewater .param-card-side {
        width: 100%;
    }
}
/* ================= PHASE 3: PROCESS & ENV PARAMS ================= */
/* OLD PROCESS PARAMS LIST (To be refactored or removed if unused) */
#view-wastewater .param-icon {
    font-size: 1.25rem;
    width: 1.875rem;
    text-align: center;
}
#view-wastewater .param-info {
    flex: 1;
}
#view-wastewater .param-name {
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}
#view-wastewater .param-meta {
    color: #64748b;
    font-size: 0.75rem;
}
#view-wastewater .param-meta span {
    font-family: 'Consolas', monospace;
}
#view-wastewater .param-value {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
}
#view-wastewater .param-value small {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-left: 0.125rem;
}
#view-wastewater .env-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9375rem;
}
#view-wastewater .env-card {
    background: rgba(0, 0, 0, 0.2);
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 0.9375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    transition: transform 0.2s;
}
#view-wastewater .env-card:hover {
    transform: translateY(-0.125rem);
    border-color: rgba(59, 130, 246, 0.3);
}
#view-wastewater .env-icon {
    font-size: 1.25rem;
    color: #e2e8f0;
}
#view-wastewater .env-data {
    display: flex;
    flex-direction: column;
}
#view-wastewater .env-val {
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: 700;
}
#view-wastewater .env-val small {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 0.25rem;
}
#view-wastewater .env-name {
    color: #a9b7cb;
    font-size: 0.75rem;
    text-transform: uppercase;
}
/* ================= PHASE 4: HISTORY & BATCH OVERVIEW ================= */
#view-wastewater .batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: #e2e8f0;
}
#view-wastewater .batch-table thead {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 0.125rem solid rgba(59, 130, 246, 0.2);
}
#view-wastewater .batch-table th {
    color: #a9b7cb;
    font-weight: 600;
    padding: 0.75rem 0.625rem;
    text-align: center;
    font-size: 0.8125rem;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
}
#view-wastewater .batch-table th:last-child {
    border-right: none;
}
#view-wastewater .batch-table th.th-process {
    text-align: left;
}
#view-wastewater .batch-table tbody tr {
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}
#view-wastewater .batch-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}
#view-wastewater .batch-table td {
    padding: 0.75rem 0.625rem;
    text-align: center;
    font-weight: 500;
}
#view-wastewater .batch-table td.td-process {
    text-align: left;
    color: #ffffff;
    font-weight: 600;
}
#view-wastewater .batch-table td.td-temp {
    color: #00e5ff;
}
#view-wastewater .batch-table .row-active {
    background: rgba(59, 130, 246, 0.15);
    border-left: 0.1875rem solid #00e5ff;
}
#view-wastewater .text-success {
    color: #10b981 !important;
}
#view-wastewater .text-warning {
    color: #f59e0b !important;
}
#view-wastewater .alarm-warning {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
/* BATCH OVERVIEW PANEL */
#view-wastewater .batch-info-content {
    display: flex;
    flex-direction: column;
}
#view-wastewater .info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
}
#view-wastewater .border-bottom-subtle {
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
}
#view-wastewater .info-row:last-child {
    border-bottom: none;
}
#view-wastewater .info-label {
    color: #a9b7cb;
    font-size: 0.8125rem;
}
#view-wastewater .info-value {
    font-size: 0.875rem;
    text-align: right;
}
#view-wastewater .btn-end-batch {
    width: 100%;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
/* GAUGE & CHART */
#view-wastewater .gauge-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
#view-wastewater .gauge-item {
    width: 33%;
    height: 15.625rem;
    /* Taller so the label underneath fits */
    background: transparent;
    box-shadow: none !important;
    /* No drop shadow, it made the layout look broken up */
    border: none !important;
}
#view-wastewater .gauge-item .highcharts-background {
    fill: transparent;
}
#view-wastewater .gauge-item .highcharts-pane-series-0 {
    fill: #1a1a1a;
}
#view-wastewater .main-line-chart,
#view-wastewater #container_line {
    width: 100%;
}
/* DANH SÁCH ALARM/EVENT (BÊN PHẢI) */
#view-wastewater .list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
    gap: 0.9375rem;
}
#view-wastewater .item-time {
    color: #94a3b8;
    font-size: 0.8125rem;
    font-family: monospace;
}
#view-wastewater .item-text {
    color: #e2e8f0;
    font-size: 0.8125rem;
    flex-grow: 1;
}
/* BADGES */
#view-wastewater .badge-warning-outline {
    border: 0.0625rem solid #f59e0b;
    color: #f59e0b;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    border-radius: 0.25rem;
}
#view-wastewater .badge-success-outline {
    border: 0.0625rem solid #22c55e;
    color: #22c55e;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    border-radius: 0.25rem;
}
#view-wastewater .status-dot-green {
    width: 0.625rem;
    height: 0.625rem;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0.5rem #22c55e;
}
#view-wastewater .view-all {
    font-size: 0.75rem;
    color: #3b82f6;
}
/* INPUT & BUTTON */
#view-wastewater .dark-input {
    background: #0a0a0a;
    border: 0.0625rem solid #334155;
    color: white;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
#view-wastewater .btn-scada {
    border: none;
    border-radius: 0.25rem;
    padding: 0.375rem 0.9375rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.625rem;
    cursor: pointer;
}
#view-wastewater .btn-excel {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}
#view-wastewater .btn-csv {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}
#view-wastewater .chart-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9375rem;
}
/* BOTTOM LOWER GRID cho Charts & BOM */
#view-wastewater .bottom-lower-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 75rem) {
  #view-wastewater .bottom-lower-grid {
        grid-template-columns: 1fr;
    }
}
/* BOM TABLE */
#view-wastewater .bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: #e2e8f0;
}
#view-wastewater .bom-table thead {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 0.125rem solid rgba(59, 130, 246, 0.2);
}
#view-wastewater .bom-table th {
    color: #a9b7cb;
    font-weight: 600;
    padding: 0.75rem 0.625rem;
    text-align: center;
    font-size: 0.8125rem;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
}
#view-wastewater .bom-table td {
    padding: 0.75rem 0.625rem;
    text-align: center;
    font-weight: 500;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.05);
}
#view-wastewater .bom-table th:last-child,
#view-wastewater .bom-table td:last-child {
    border-right: none;
}
#view-wastewater .bom-table tbody tr {
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}
#view-wastewater .bom-table tbody tr:last-child {
    border-bottom: none;
}
#view-wastewater .bom-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}
#view-wastewater .bom-table .th-code,
#view-wastewater .bom-table .td-code {
    text-align: left;
    color: #ffffff;
    font-weight: 600;
}
/* EQUIPMENT LABELS ON TANK */
#view-wastewater .eq-label {
    position: absolute;
    color: #fff;
    font-size: 0.8125rem;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
}
#view-wastewater .eq-pump {
    top: 96%;
    left: 9%;
}
#view-wastewater .eq-mixer {
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
}
#view-wastewater .eq-valve {
    bottom: 9%;
    left: 88%;
    transform: translateX(-50%);
}
/* ==================================================================
   5. SYSTEM-WIDE RESPONSIVE STYLES (FILTERS, TABLES, CHARTS & SETTINGS)
   ================================================================== */
@media (max-width: 75rem) {
  #view-wastewater body .batch-table th,
#view-wastewater body .batch-table td {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.6875rem !important;
    }
}
@media (max-width: 62rem) {
  #view-wastewater body .filter-inputs {
        gap: 0.625rem !important;
    }
  #view-wastewater body .filter-group {
        flex-grow: 1;
    }
}
@media (max-width: 48rem) {
  /* Responsive search filter */
#view-wastewater body .filter-inputs {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
  #view-wastewater body .filter-group {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
  #view-wastewater body .filter-bar input[type="date"],
#view-wastewater body .filter-bar select,
#view-wastewater body .filter-input,
#view-wastewater body .datepicker {
        width: 100% !important;
        box-sizing: border-box !important;
    }
  #view-wastewater body .filter-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
  #view-wastewater body .filter-actions .btn-custom {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
    }
  /* Fluid chart */
#view-wastewater body .chart-container,
#view-wastewater body .highcharts-container,
#view-wastewater body .highcharts-container svg {
        width: 100% !important;
    }
  /* System settings (user setting page) */
#view-wastewater body .setting-panel {
        padding: 0.75rem !important;
    }
  #view-wastewater body .panel-header-custom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
  #view-wastewater body .panel-header-custom h3 {
        font-size: 1rem !important;
    }
}
/* Responsive layout for width 1500px - 1876px to prevent overlapping of temperature cards on the right column */
@media (min-width: 1500px) and (max-width: 1876px) {
  #view-wastewater .tank-diagram-container {
        display: grid !important;
        grid-template-columns: 12.5rem 1fr;
        grid-template-rows: auto auto;
        justify-content: stretch;
        align-items: center;
    }
  #view-wastewater .tank-center-wrapper {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0 !important;
        margin-right: 11.25rem !important; /* Leaves room for the temperature cards on the right */
    }
  /* The WWTP panel has no side columns to clear -- the grid above would leave
       a 12.5rem gutter and an 11.25rem right margin for cards it does not have,
       and the diagram loses ~24rem of the width its pipework needs. */
#view-wastewater .wwtp-dashboard .tank-diagram-container.wwtp-diagram-container {
        display: flex !important;
    }
  #view-wastewater .wwtp-dashboard .tank-center-wrapper.wwtp-center-wrapper {
        margin-right: 0 !important;
    }
}
/* Decrease font sizes and paddings for all cards in mixing tank diagram for screens < 1600px */
@media (max-width: 100rem) {
  #view-wastewater .param-card-side {
        padding: 0.375rem 0.5rem !important;
        gap: 0.5rem !important;
    }
  #view-wastewater .param-card-icon {
        font-size: 1.375rem !important;
        width: 2rem !important;
    }
  #view-wastewater .param-card-title {
        font-size: 0.625rem !important;
    }
  #view-wastewater .param-card-value {
        font-size: 1.125rem !important;
    }
  #view-wastewater .param-card-value small {
        font-size: 0.65rem !important;
    }
  #view-wastewater .tank-temp-card {
        width: 10rem !important;
        padding: 0.375rem 0.5rem !important;
        gap: 0.25rem !important;
    }
  #view-wastewater .tank-temp-card .param-card-icon {
        font-size: 1.125rem !important;
        width: 1.5rem !important;
    }
  #view-wastewater .tank-temp-card .param-card-title {
        font-size: 0.625rem !important;
    }
  #view-wastewater .tank-temp-card .param-card-value {
        font-size: 1.0rem !important;
    }
  #view-wastewater .tank-temp-card .param-card-std {
        font-size: 0.625rem !important;
    }
}
#view-wastewater .tank-image-wrapper {
    margin: 0 auto;
}
/* SVG Vortex Wave Animation (Flowing Neon Water Waves) */
@keyframes wwtp-vortex-flow-top {
    to {
        stroke-dashoffset: -300;
    }
}
@keyframes wwtp-vortex-flow-mid {
    to {
        stroke-dashoffset: -255;
    }
}
@keyframes wwtp-vortex-flow-bot {
    to {
        stroke-dashoffset: -210;
    }
}
#view-wastewater .vortex-wave {
    fill: none;
    stroke: rgba(0, 229, 255, 0.85); /* Neon water blue */
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.8));
}
#view-wastewater .top-wave {
    stroke: rgba(0, 229, 255, 0.95);
    stroke-width: 12; /* Very thick and crisp */
    stroke-dasharray: 85, 15; /* Dense dashes, small gaps */
    animation: wwtp-vortex-flow-top 2.6s linear infinite; /* Slowed down so it is easier on the eye */
}
#view-wastewater .mid-wave {
    stroke: rgba(0, 229, 255, 0.9);
    stroke-width: 9.5; /* Thicker */
    stroke-dasharray: 70, 15; /* Dense dashes, small gaps */
    animation: wwtp-vortex-flow-mid 2.0s linear infinite; /* Slowed down so it is easier on the eye */
}
#view-wastewater .bot-wave {
    stroke: rgba(0, 229, 255, 0.85);
    stroke-width: 7.5; /* Thicker */
    stroke-dasharray: 55, 15; /* Dense dashes, small gaps */
    animation: wwtp-vortex-flow-bot 1.4s linear infinite; /* Slowed down so it is easier on the eye */
}
/* ================= WWTP DASHBOARD ================= */
/* The diagram carries its own top margin inside the viewBox, so the panel
   title does not need a full line of air under it as well. */
#view-wastewater .wwtp-dashboard .panel-header h3 {
    margin-bottom: 0.5rem;
}
#view-wastewater .wwtp-dashboard .tank-diagram-container.wwtp-diagram-container {
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    gap: 0;
}
#view-wastewater .wwtp-dashboard .tank-center-wrapper.wwtp-center-wrapper {
    margin-left: 0;
    margin-right: 0;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}
/* Everything -- the background photo, the sprites, the pipes, and every HTML
   overlay positioned in % of this box -- shares one 1620x797 coordinate space
   (the SVG viewBox starts at y 60, which crops the dead band above the drums),
   so the wrapper just has to hold that aspect ratio. It takes the full panel
   width: the diagram is meant to be read across the room. */
#view-wastewater .wwtp-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    /* The artwork is drawn for this box 1:1. Past it every photo would be
       upscaled and the whole diagram goes soft, so cap it and centre instead. */
    max-width: 1620px;
    aspect-ratio: 1620 / 797;
    line-height: 0;
    margin: 0 auto;
    /* Size container for the overlays: --u is one viewBox unit, so an overlay
       sized in --u scales with the drawing instead of keeping its pixel size and
       swelling over the pipework as the panel narrows. Only descendants may use
       it -- cqw inside the container itself resolves against its own ancestor. */
    container-type: inline-size;
    --u: calc(100cqw / 1620);
}
#view-wastewater .wwtp-img {
    display: block;
    width: 100%;
    height: auto;
    /* Overrides .tank-img — a clamped height would letterbox the bitmap. */
    max-width: none;
    max-height: none;
    object-fit: fill;
    border-radius: 0.5rem;
}
#view-wastewater .wwtp-center-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#view-wastewater .status-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
#view-wastewater .status-pill.running {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 0.0625rem solid rgba(16, 185, 129, 0.45);
}
#view-wastewater .status-pill.stopped {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 0.0625rem solid rgba(148, 163, 184, 0.35);
}
#view-wastewater .status-pill.alarm {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 0.0625rem solid rgba(239, 68, 68, 0.45);
}
/* Live-reading cards.
   Dark and semi-transparent, so the pipework behind them still reads: that is
   what lets them be this big even though they sit right over the dosing drops
   into tank 1. One grid -- icon, parameter over its tank, the reading under
   that, and the configured limit on its own footer row. */
#view-wastewater .wwtp-sensor-card {
    position: absolute;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "ico head"
        "ico read"
        "foot foot";
    align-items: center;
    column-gap: 0.55rem;
    row-gap: 0.08rem;
    width: 8.8rem;
    padding: 0.7rem 0.68rem 0.6rem;
    margin: 0;
    background:
        linear-gradient(180deg, var(--card-accent-soft), rgba(16, 26, 46, 0)),
        rgba(16, 26, 46, 0.93);
    border: 0.0625rem solid rgba(148, 163, 184, 0.16);
    border-radius: 0.6rem;
    box-shadow: 0 0.55rem 1.4rem rgba(2, 6, 23, 0.6), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    /* Same accents as the tank-history modal. */
    --card-accent: #38bdf8;
    --card-accent-soft: rgba(56, 189, 248, 0.14);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%);
    text-align: left;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#view-wastewater .wwtp-sensor-card .sensor-ico {
    grid-area: ico;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.45rem;
    background: var(--card-accent-soft);
    color: var(--card-accent);
    font-size: 0.85rem;
}
#view-wastewater .wwtp-sensor-card .sensor-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#view-wastewater .wwtp-sensor-card .sensor-name {
    color: #e2e8f0;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
}
#view-wastewater .wwtp-sensor-card .sensor-where {
    color: #94a3b8;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
#view-wastewater .wwtp-sensor-card .sensor-read {
    grid-area: read;
    display: flex;
    align-items: baseline;
    gap: 0.22rem;
    color: var(--card-accent);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
#view-wastewater .wwtp-sensor-card .sensor-read small {
    font-size: 0.58rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0;
}
#view-wastewater .wwtp-sensor-card .sensor-foot {
    grid-area: foot;
    margin-top: 0.5rem;
    padding-top: 0.42rem;
    border-top: 0.0625rem solid rgba(148, 163, 184, 0.22);
    color: #94a3b8;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Label and range stay on one line -- the card is sized for the longest of
       them, "<label> 2.0 - 8.0 mg/L". Clipping here is only a guard for a unit
       or a translation longer than any of the ones we ship: it keeps the text
       inside the frame instead of letting it run out past the border. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#view-wastewater .wwtp-sensor-card .sensor-foot b {
    color: #e2e8f0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* The whole card opens that tank's chart; this is the only hint it needs. */
#view-wastewater .wwtp-sensor-card .sensor-chart-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.52rem;
}
/* The card is a diagram object: it has to sit in the 138-unit band between the
   dosing lanes (y 274) and the sample delivery lane (y 412) and keep its right
   edge clear of the drops into its own tank, at every panel width. That is what
   caps the width: the NH4 card is centred at x 954 and the drop into tank 3 runs
   down x 872, so 154 units is about as wide as the card can get. So every
   length here is in viewBox units -- the numbers are what the rem rules above
   render to at the panel's full 1620px, so the card looks the same there and only
   changes below it. Text shrinks with the drawing: that is the trade for never
   covering a pipe. */
@supports (container-type: inline-size) {
  #view-wastewater .wwtp-sensor-card {
        column-gap: calc(9 * var(--u));
        row-gap: calc(1.3 * var(--u));
        width: calc(154 * var(--u));
        padding: calc(13 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));
        border-width: calc(1 * var(--u));
        border-radius: calc(10 * var(--u));
        box-shadow: 0 calc(9 * var(--u)) calc(22 * var(--u)) rgba(2, 6, 23, 0.6),
                    inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.04);
    }
  #view-wastewater .wwtp-sensor-card .sensor-ico {
        width: calc(25 * var(--u));
        height: calc(25 * var(--u));
        border-radius: calc(7 * var(--u));
        font-size: calc(14 * var(--u));
    }
  #view-wastewater .wwtp-sensor-card .sensor-name { font-size: calc(11 * var(--u)); }
  #view-wastewater .wwtp-sensor-card .sensor-where { font-size: calc(10 * var(--u)); }
  #view-wastewater .wwtp-sensor-card .sensor-read {
        gap: calc(3.5 * var(--u));
        font-size: calc(27 * var(--u));
    }
  #view-wastewater .wwtp-sensor-card .sensor-read small { font-size: calc(9 * var(--u)); }
  #view-wastewater .wwtp-sensor-card .sensor-foot {
        margin-top: calc(8 * var(--u));
        padding-top: calc(7 * var(--u));
        border-top-width: calc(1 * var(--u));
        font-size: calc(9 * var(--u));
    }
  #view-wastewater .wwtp-sensor-card .sensor-chart-hint {
        top: calc(8 * var(--u));
        right: calc(9 * var(--u));
        font-size: calc(8 * var(--u));
    }
  #view-wastewater .wwtp-sensor-card:hover,
#view-wastewater .wwtp-sensor-card:focus { transform: translate(-50%, -50%) translateY(calc(-2 * var(--u))); }
}
/* One accent per parameter -- the same three the modal uses. */
#view-wastewater .wwtp-sensor-card.sensor-ph { --card-accent: #a78bfa; --card-accent-soft: rgba(167, 139, 250, 0.14); }
#view-wastewater .wwtp-sensor-card.sensor-do2,
#view-wastewater .wwtp-sensor-card.sensor-do3 { --card-accent: #34d399; --card-accent-soft: rgba(52, 211, 153, 0.14); }
#view-wastewater .wwtp-sensor-card.sensor-nh4 { --card-accent: #fbbf24; --card-accent-soft: rgba(251, 191, 36, 0.14); }
#view-wastewater .wwtp-sensor-card:hover,
#view-wastewater .wwtp-sensor-card:focus {
    transform: translate(-50%, -50%) translateY(-0.12rem);
    border-color: rgba(226, 232, 240, 0.55);
    box-shadow: 0 0.55rem 1.3rem rgba(2, 6, 23, 0.65);
    outline: none;
    z-index: 6;
}
#view-wastewater .wwtp-sensor-card:hover .sensor-chart-hint { color: #e2e8f0; }
/* Reading outside the configured limit. */
#view-wastewater .wwtp-sensor-card.sensor-alarm {
    --card-accent: #f87171;
    --card-accent-soft: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.6);
    animation: wwtp-sensor-alarm-wwtp-pulse 1.1s ease-in-out infinite;
}
@keyframes wwtp-sensor-alarm-pulse {
    0%, 100% { box-shadow: 0 0 0 0.08rem rgba(239, 68, 68, 0.3), 0 0.35rem 1rem rgba(2, 6, 23, 0.55); }
    50% { box-shadow: 0 0 0 0.18rem rgba(239, 68, 68, 0.55), 0 0.35rem 1rem rgba(2, 6, 23, 0.55); }
}
#view-wastewater .pump-card.pump-alarm {
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: 0 0 0 0.08rem rgba(6, 182, 212, 0.25);
}
/* Left of each blue barrel — tank1/2 further left to clear drums */
/* Sensor card and pump dot positions are inline: generated from the measured
   pipework geometry of so_do_wwtp_v5.png (1047x857). */
#view-wastewater .pump-dot {
    position: absolute;
    z-index: 5;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #64748b;
    border: 0.15rem solid rgba(255, 255, 255, 0.45);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.55);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
    cursor: pointer;
}
#view-wastewater .pump-dot:hover {
    transform: translate(-50%, -50%) scale(1.25);
}
#view-wastewater .pump-dot.pump-running {
    background: #10b981;
    box-shadow: 0 0 var(--dot-glow, 0.75rem) rgba(16, 185, 129, 0.85);
    animation: wwtp-pump-wwtp-pulse 1.2s ease-in-out infinite;
}
/* A dosing pump's running light is the colour of its own chemical line (the
   .wp-leg.acid / .alkali / .kali flow strokes), so the drum, the pipe leaving it
   and the light on its head all read as one run. */
#view-wastewater .pump-dot.dosing.pump-running,
#view-wastewater .pump-dot[data-pump="acid"].pump-running {
    background: #f87171;
    box-shadow: 0 0 var(--dot-glow, 0.75rem) rgba(248, 113, 113, 0.85);
}
#view-wastewater .pump-dot[data-pump="alkali"].pump-running {
    background: #60a5fa;
    box-shadow: 0 0 var(--dot-glow, 0.75rem) rgba(96, 165, 250, 0.85);
}
#view-wastewater .pump-dot[data-pump="kali"].pump-running {
    background: #fb923c;
    box-shadow: 0 0 var(--dot-glow, 0.75rem) rgba(251, 146, 60, 0.85);
}
#view-wastewater .pump-dot.motor.pump-running {
    background: #38bdf8;
    box-shadow: 0 0 var(--dot-glow, 0.75rem) rgba(56, 189, 248, 0.85);
}
@keyframes wwtp-pump-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.85; }
}
#view-wastewater .pump-card.pump-running .param-card-icon,
#view-wastewater .dosing-card.pump-running .param-card-icon {
    box-shadow: 0 0 0.75rem rgba(0, 229, 255, 0.45);
}
/* --- Treatment train ------------------------------------------------
   Photo sprites cut from the source drawing, placed 1:1 by the SVG in
   Views/Home/Overview.cshtml. Only the name plates and the discharge
   arrow are drawn here. */
#view-wastewater .wwtp-train-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}
/* No bitmap element left in the wrapper, so nothing else sets its height. */
#view-wastewater .wwtp-img { display: none; }
#view-wastewater .wt-plate rect { fill: #16325c; stroke: #cbd5e1; stroke-width: 1.2; }
#view-wastewater .wt-plate text { fill: #f1f5f9; font: 700 14px "Segoe UI", Arial, sans-serif; text-anchor: middle; letter-spacing: 0.04em; }
#view-wastewater .wt-outfall rect,
#view-wastewater .wt-outfall polygon { fill: #38bdf8; }
#view-wastewater .wt-outfall text { fill: #7dd3fc; font: 700 10px "Segoe UI", Arial, sans-serif; text-anchor: middle; letter-spacing: 0.05em; }
#view-wastewater .wt-shell { fill: url(#wtShell); }
#view-wastewater .wt-dome { fill: url(#wtDome); }
#view-wastewater .wt-bed { fill: url(#wtBed); }
#view-wastewater .wt-bed-line { fill: #6d5c38; opacity: 0.7; }
#view-wastewater .wt-gloss { fill: #ffffff; opacity: 0.45; }
#view-wastewater .wt-leg { fill: #6b7787; }
#view-wastewater .wt-skid { fill: #8996a7; }
#view-wastewater .wt-manifold { fill: #7f8c9d; }
#view-wastewater .wt-nozzle { fill: #556171; }
#view-wastewater .wt-valve { fill: #3f4b5b; }
#view-wastewater .wt-stem { fill: #94a3b8; }
#view-wastewater .wt-hand { fill: #cbd5e1; stroke: #475569; stroke-width: 1.2; }
/* Pipework.
   Three static strokes stack into a tube: a dark shell, a lighter core and a
   thin sheen along the top, so the run reads as pipe rather than a flat line.
   Over that sits one lit dash pattern plus arrowheads travelling the path. Both
   only show while that leg is actually flowing, so a stopped pump reads as a
   dead line instead of a line that merely stopped shimmering. */
/* Strainer on every suction, so a draw-off reads as taken from inside the tank
   rather than as a pipe that stops mid-water. */
#view-wastewater .wt-intake { fill: #8996a7; stroke: #26323f; stroke-width: 1.1; }
#view-wastewater .wt-intake-slot { fill: #33404e; }
/* BE 5's inlet fitting: flange on the wall, spool, bell mouth. Lit from the
   left like the rest of the steelwork, and no heavy outline -- it is 30px of
   pipework, not a diagram symbol. */
/* Gravity overflow runs in an open launder: a floor, a back wall standing above
   the water line, and an end plate at each end. The water in it is styled below
   as .weir -- open channel, not a pipe, so it has no dark pipe shell. */
#view-wastewater .wt-chute { fill: #97a5b5; }
#view-wastewater .wt-chute-back { fill: #7c8b9c; }
#view-wastewater .wt-chute-lip { fill: #cbd6e2; }
#view-wastewater .wt-chute-end { fill: #8b98a8; }
#view-wastewater .wt-flange { fill: #9aa8b8; stroke: #2b3846; stroke-width: 1; }
#view-wastewater .wt-spool { fill: #8b98a8; stroke: #2b3846; stroke-width: 1; }
#view-wastewater .wt-bell { fill: #aab7c6; stroke: #2b3846; stroke-width: 1; }
#view-wastewater .wt-bell-rim { fill: #cfd9e4; }
/* ... and the water leaving it: streamlines that fade into the tank instead of
   stopping dead, plus the bubbles and the surface boil they make. */
#view-wastewater .wp-stream {
    fill: none;
    stroke: url(#wpPlume);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
    animation: wwtp-wp-dash-plume 0.4s linear infinite;
    will-change: stroke-dashoffset;
}
@keyframes wwtp-wp-dash-plume {
    to { stroke-dashoffset: -16; }
}
#view-wastewater .wp-bub { fill: #eaf9ff; opacity: 0; }
#view-wastewater .wp-shell {
    fill: none;
    stroke: #16293a;
    stroke-width: 7.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
#view-wastewater .wp-core {
    fill: none;
    stroke: #3f6683;
    stroke-width: 5.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
#view-wastewater .wp-sheen {
    fill: none;
    stroke: #86b4d4;
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.4;
    transform: translateY(-1.4px);
}
#view-wastewater .wp-shell.air,
#view-wastewater .wp-shell.sample { stroke-width: 6; }
/* Air is not water: the header runs thinner, grey-cored and dot-dashed so it
   cannot be mistaken for a suction or overflow main under the tanks. */
#view-wastewater .wp-shell.air { stroke-width: 5; stroke: #1b2530; }
/* Dosing lines are small-bore tubing, so they run thinner than the mains. */
#view-wastewater .wp-shell.acid,
#view-wastewater .wp-shell.alkali,
#view-wastewater .wp-shell.kali { stroke-width: 5.2; }
#view-wastewater .wp-core.air { stroke: #5b6675; stroke-width: 3; }
#view-wastewater .wp-core.sample { stroke: #4d4f7d; stroke-width: 3.8; }
#view-wastewater .wp-core.acid { stroke: #7f2a2a; stroke-width: 3.2; }
#view-wastewater .wp-core.alkali { stroke: #24467e; stroke-width: 3.2; }
#view-wastewater .wp-core.kali { stroke: #8a4a15; stroke-width: 3.2; }
/* Open channel: the body is water, not steel, so there is no dark shell around
   it -- just the shaded flow with a lit surface line on top. */
#view-wastewater .wp-shell.weir { stroke: #1d4f6b; stroke-width: 6.4; stroke-linecap: butt; }
#view-wastewater .wp-core.weir { stroke: #3f88ad; stroke-width: 5; stroke-linecap: butt; }
#view-wastewater .wp-sheen.weir { stroke: #bfeeff; stroke-width: 1.4; opacity: 0.55; transform: translateY(-2px); }
#view-wastewater .wp-sheen.acid,
#view-wastewater .wp-sheen.alkali,
#view-wastewater .wp-sheen.kali { opacity: 0.25; }
/* A leg is dark until its pump or its gravity flow is on. */
#view-wastewater .wp-leg { display: none; }
#view-wastewater .wp-leg.active { display: block; }
/* The lit flow.
   Every pattern sums to the same 36px period and every leg shares one 0.6s
   cycle, so the dashes travel 60px/s -- exactly the speed of the arrowheads
   along the same path, and the loop closes on itself with no jump. The glow is
   a second, wider, translucent stroke rather than a drop-shadow filter: a
   filter has to be re-rasterised every frame on every leg, which is what made
   the flow stutter. */
#view-wastewater .wp-flow,
#view-wastewater .wp-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16 20;
    animation: wwtp-wp-dash-flow 0.6s linear infinite;
    will-change: stroke-dashoffset;
}
#view-wastewater .wp-flow { stroke-width: 2.8; }
#view-wastewater .wp-glow { stroke-width: 7; opacity: 0.22; }
@keyframes wwtp-wp-dash-flow {
    to { stroke-dashoffset: -36; }
}
#view-wastewater .wp-leg.water .wp-flow,
#view-wastewater .wp-leg.water .wp-glow { stroke: #38e1ff; }
#view-wastewater .wp-leg.clean .wp-flow,
#view-wastewater .wp-leg.clean .wp-glow { stroke: #a5f3fc; }
#view-wastewater .wp-leg.weir .wp-flow,
#view-wastewater .wp-leg.weir .wp-glow { stroke: #7fe3ff; }
#view-wastewater .wp-leg.ret .wp-flow,
#view-wastewater .wp-leg.ret .wp-glow { stroke: #fbbf24; }
#view-wastewater .wp-leg.sample .wp-flow,
#view-wastewater .wp-leg.sample .wp-glow { stroke: #c4b5fd; stroke-dasharray: 12 24; }
#view-wastewater .wp-leg.air .wp-flow,
#view-wastewater .wp-leg.air .wp-glow { stroke: #cbd5e1; stroke-dasharray: 2 8 8 18; }
#view-wastewater .wp-leg.air .wp-flow { stroke-width: 2.2; opacity: 0.9; }
#view-wastewater .wp-leg.air .wp-glow { opacity: 0.16; }
#view-wastewater .wp-leg.acid .wp-flow,
#view-wastewater .wp-leg.acid .wp-glow { stroke: #f87171; stroke-dasharray: 10 26; }
#view-wastewater .wp-leg.alkali .wp-flow,
#view-wastewater .wp-leg.alkali .wp-glow { stroke: #60a5fa; stroke-dasharray: 10 26; }
#view-wastewater .wp-leg.kali .wp-flow,
#view-wastewater .wp-leg.kali .wp-glow { stroke: #fb923c; stroke-dasharray: 10 26; }
#view-wastewater .wp-leg.acid .wp-flow,
#view-wastewater .wp-leg.alkali .wp-flow,
#view-wastewater .wp-leg.kali .wp-flow { stroke-width: 2.4; }
#view-wastewater .wp-mark { filter: drop-shadow(0 0 2px rgba(2, 6, 23, 0.8)); }
#view-wastewater .wp-leg.water .wp-mark { fill: #e0fbff; }
#view-wastewater .wp-leg.clean .wp-mark { fill: #ecfeff; }
#view-wastewater .wp-leg.weir .wp-mark { fill: #e0f7ff; }
#view-wastewater .wp-leg.ret .wp-mark { fill: #fff7ed; }
#view-wastewater .wp-leg.sample .wp-mark { fill: #ede9fe; }
#view-wastewater .wp-leg.acid .wp-mark { fill: #fecaca; }
#view-wastewater .wp-leg.alkali .wp-mark { fill: #bfdbfe; }
#view-wastewater .wp-leg.kali .wp-mark { fill: #fed7aa; }
#view-wastewater .wp-leg.air .wp-mark { fill: none; stroke: #e2e8f0; stroke-width: 1.2; }
/* Water arriving in a tank: a falling jet, a few droplets and the ripples they
   leave on the surface, so a gravity overflow reads as flow and not as a pipe
   that simply stops at the wall. */
#view-wastewater .wp-jet-glow {
    fill: none;
    stroke: #7dd3fc;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: 0.28;
    filter: blur(2px);
}
#view-wastewater .wp-jet {
    fill: none;
    stroke: #dff8ff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    opacity: 0.95;
    filter: drop-shadow(0 0 3px rgba(190, 242, 255, 0.9));
    animation: wwtp-wp-pour-fall 0.34s linear infinite;
}
@keyframes wwtp-wp-pour-fall {
    to { stroke-dashoffset: -9; }
}
#view-wastewater .wp-drop {
    fill: #f0fdff;
    filter: drop-shadow(0 0 2px rgba(190, 242, 255, 0.9));
}
#view-wastewater .wp-splash { fill: #eafcff; }
#view-wastewater .wp-foam {
    fill: #ffffff;
    opacity: 0.6;
    filter: blur(1px);
}
#view-wastewater .wp-ripple {
    fill: none;
    stroke: #cdf3ff;
    stroke-width: 1.5;
}
/* The sheet coming off a launder lip: a body of water that widens as it falls,
   with threads sliding down it. Both are what a weir actually looks like -- no
   nozzle, no jet, just water leaving a lip. */
#view-wastewater .wp-nappe {
    fill: #9fe0f5;
    opacity: 0.5;
    filter: blur(0.6px);
}
#view-wastewater .wp-thread {
    fill: none;
    stroke: #eafaff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 7 11;
    opacity: 0.9;
    animation: wwtp-wp-dash-fall 0.45s linear infinite;
    will-change: stroke-dashoffset;
}
@keyframes wwtp-wp-dash-fall {
    to { stroke-dashoffset: -18; }
}
#view-wastewater .wp-leg.ret .wp-jet { stroke: #fef3c7; filter: drop-shadow(0 0 3px rgba(253, 230, 138, 0.9)); }
#view-wastewater .wp-leg.ret .wp-jet-glow { stroke: #fbbf24; }
#view-wastewater .wp-leg.ret .wp-drop,
#view-wastewater .wp-leg.ret .wp-splash { fill: #fffbeb; }
#view-wastewater .wp-leg.ret .wp-ripple { stroke: #fde68a; }
/* Dosing arrives as a thin chemical stream, tinted per reagent. */
#view-wastewater .wp-leg.acid .wp-jet { stroke: #fecaca; filter: drop-shadow(0 0 3px rgba(248, 113, 113, 0.9)); }
#view-wastewater .wp-leg.acid .wp-jet-glow { stroke: #ef4444; }
#view-wastewater .wp-leg.acid .wp-drop,
#view-wastewater .wp-leg.acid .wp-splash { fill: #fee2e2; }
#view-wastewater .wp-leg.acid .wp-ripple { stroke: #fca5a5; }
#view-wastewater .wp-leg.alkali .wp-jet { stroke: #bfdbfe; filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.9)); }
#view-wastewater .wp-leg.alkali .wp-jet-glow { stroke: #3b82f6; }
#view-wastewater .wp-leg.alkali .wp-drop,
#view-wastewater .wp-leg.alkali .wp-splash { fill: #dbeafe; }
#view-wastewater .wp-leg.alkali .wp-ripple { stroke: #93c5fd; }
#view-wastewater .wp-leg.kali .wp-jet { stroke: #fed7aa; filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.9)); }
#view-wastewater .wp-leg.kali .wp-jet-glow { stroke: #f97316; }
#view-wastewater .wp-leg.kali .wp-drop,
#view-wastewater .wp-leg.kali .wp-splash { fill: #ffedd5; }
#view-wastewater .wp-leg.kali .wp-ripple { stroke: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  #view-wastewater .wp-flow,
#view-wastewater .wp-glow,
#view-wastewater .wp-jet { animation: none; }
  #view-wastewater .wp-mark-holder,
#view-wastewater .wp-pour { display: none; }
}
#view-wastewater .bubble {
    opacity: 0;
    fill: rgba(255, 255, 255, 0.92);
    stroke: rgba(186, 230, 253, 0.95);
    stroke-width: 0.8;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85));
}
#view-wastewater .bubble.active {
    animation: wwtp-bubble-rise 2.6s ease-out infinite;
}
#view-wastewater .bubble.active.d0 { animation-delay: 0s; }
#view-wastewater .bubble.active.d1 { animation-delay: 0.4s; }
#view-wastewater .bubble.active.d2 { animation-delay: 0.8s; }
#view-wastewater .bubble.active.d3 { animation-delay: 1.2s; }
#view-wastewater .bubble.active.d4 { animation-delay: 1.6s; }
#view-wastewater .bubble.active.d5 { animation-delay: 2.0s; }
@keyframes wwtp-bubble-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    12% {
        opacity: 0.95;
    }
    55% {
        opacity: 0.85;
    }
    100% {
        transform: translateY(-95px);
        opacity: 0;
    }
}
@media (max-width: 75rem) {
  #view-wastewater .wwtp-dashboard .tank-diagram-container.wwtp-diagram-container {
        flex-direction: column;
        align-items: stretch;
    }
}
/* Tank hit zones on P&ID */
#view-wastewater .tank-hit {
    position: absolute;
    z-index: 3;
    border: 0.0625rem solid transparent;
    background: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#view-wastewater .tank-hit:hover,
#view-wastewater .tank-hit:focus {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.55);
}
/* ---- Tank chart modal — dark, matching the dashboard panels ---- */
#tankHistoryModal .tank-history-dialog {
    max-width: 78rem;
    width: 94vw;
    margin: 1.5rem auto;
}
#tankHistoryModal .tank-history-modal {
    background: #101a2e;
    border: 0.0625rem solid rgba(148, 163, 184, 0.16);
    border-radius: 0.85rem;
    box-shadow: 0 1.5rem 3rem rgba(2, 6, 23, 0.7);
    overflow: hidden;
    color: #e2e8f0;
    /* Accent, overridden per parameter below. */
    --tank-accent: #38bdf8;
    --tank-accent-soft: rgba(56, 189, 248, 0.14);
}
#tankHistoryModal .tank-history-modal.param-ph { --tank-accent: #a78bfa; --tank-accent-soft: rgba(167, 139, 250, 0.14); }
#tankHistoryModal .tank-history-modal.param-do { --tank-accent: #34d399; --tank-accent-soft: rgba(52, 211, 153, 0.14); }
#tankHistoryModal .tank-history-modal.param-nh4 { --tank-accent: #fbbf24; --tank-accent-soft: rgba(251, 191, 36, 0.14); }
#tankHistoryModal .tank-history-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.15rem;
    background: linear-gradient(90deg, var(--tank-accent-soft), rgba(16, 26, 46, 0));
    border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.14);
}
#tankHistoryModal .tank-history-param {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.45rem;
    background: var(--tank-accent-soft);
    border: 0.0625rem solid var(--tank-accent);
    color: var(--tank-accent);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
#tankHistoryModal .tank-history-heading {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    margin-right: auto;
}
#tankHistoryModal .tank-history-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
#tankHistoryModal .tank-history-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}
#tankHistoryModal .tank-history-close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid rgba(148, 163, 184, 0.25);
    border-radius: 0.4rem;
    background: rgba(148, 163, 184, 0.08);
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#tankHistoryModal .tank-history-close:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}
/* Range summary of the water-quality series */
#tankHistoryModal .tank-history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.0625rem;
    background: rgba(148, 163, 184, 0.14);
    border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.14);
}
#tankHistoryModal .tank-stat {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.6rem 0.9rem;
    background: #101a2e;
}
#tankHistoryModal .tank-stat-key {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
#tankHistoryModal .tank-stat-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -0.02em;
}
#tankHistoryModal .tank-stat:first-child .tank-stat-val { color: var(--tank-accent); }
#tankHistoryModal .tank-history-body {
    padding: 0.9rem 1.15rem 1.15rem;
}
#tankHistoryModal .tank-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
#tankHistoryModal .tank-range-group {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: 0.5rem;
    background: rgba(148, 163, 184, 0.1);
    border: 0.0625rem solid rgba(148, 163, 184, 0.16);
}
#tankHistoryModal .tank-range-btn {
    padding: 0.32rem 0.7rem;
    border: 0;
    border-radius: 0.38rem;
    background: transparent;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#tankHistoryModal .tank-range-btn:hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.14); }
#tankHistoryModal .tank-range-btn.active {
    background: var(--tank-accent);
    color: #0b1220;
}
#tankHistoryModal .tank-range-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0.0625rem solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
}
#tankHistoryModal .tank-range-clear.active {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.55);
    color: #6ee7b7;
}
#tankHistoryModal .tank-history-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
#tankHistoryModal .tank-history-input {
    height: 2rem;
    min-width: 11.5rem;
    padding: 0 0.5rem;
    border-radius: 0.4rem;
    border: 0.0625rem solid rgba(148, 163, 184, 0.25);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font-size: 0.78rem;
    color-scheme: dark;
}
#tankHistoryModal .tank-history-input:focus {
    outline: none;
    border-color: var(--tank-accent);
}
#tankHistoryModal .tank-history-arrow { color: #64748b; font-weight: 700; }
#tankHistoryModal .tank-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.7rem;
    border-radius: 0.4rem;
    border: 0.0625rem solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#tankHistoryModal .tank-btn-primary { background: var(--tank-accent); color: #0b1220; }
#tankHistoryModal .tank-btn-primary:hover { filter: brightness(1.08); }
#tankHistoryModal .tank-btn-ghost {
    margin-left: auto;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}
#tankHistoryModal .tank-btn-ghost:hover { background: rgba(16, 185, 129, 0.24); }
#tankHistoryModal .tank-history-hint {
    margin: 0.6rem 0 0.7rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #64748b;
}
#tankHistoryModal .tank-history-chart-wrap {
    position: relative;
    width: 100%;
    height: calc(74vh - 16rem);
    min-height: 20rem;
    padding: 0.6rem 0.4rem 0.2rem;
    border-radius: 0.6rem;
    background: rgba(2, 6, 23, 0.45);
    border: 0.0625rem solid rgba(148, 163, 184, 0.12);
}
/* Live badge — only while the chart is in realtime mode */
#tankHistoryModal .tank-history-live-badge {
    display: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.75rem;
    background: rgba(16, 185, 129, 0.16);
    border: 0.0625rem solid rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
#tankHistoryModal .tank-history-live-badge.active { display: inline-flex; }
#tankHistoryModal .tank-history-live-badge i {
    font-size: 0.4rem;
    animation: wwtp-tank-live-blink 1.4s ease-in-out infinite;
}
@keyframes wwtp-tank-live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
@media (max-width: 64rem) {
  #tankHistoryModal .tank-history-dialog { width: 97vw; max-width: 97vw; }
  #tankHistoryModal .tank-history-chart-wrap { height: calc(70vh - 15rem); min-height: 16rem; }
  #tankHistoryModal .tank-history-input { min-width: 9.5rem; }
}
/* ---- Diagram labels ----
   build_transparent_diagram.py erases these from the bitmap; they are re-drawn
   here so they stay legible once the drawing background is transparent. */
#view-wastewater .wwtp-label-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
#view-wastewater .wwtp-label {
    position: absolute;
    display: block;
    color: #cbd5e1;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-shadow: 0 0.0625rem 0.125rem rgba(2, 6, 23, 0.9);
}
/* Pump captions take the colour of the leg they belong to. */
#view-wastewater .wwtp-label-returnpump { color: #fbbf24; }
#view-wastewater .wwtp-label-transfer,
#view-wastewater .wwtp-label-filterfeed { color: #67e8f9; }
#view-wastewater .wwtp-label-recirc1,
#view-wastewater .wwtp-label-recirc2,
#view-wastewater .wwtp-label-recirc3,
#view-wastewater .wwtp-label-recirc4 { color: #c4b5fd; }
@media (min-width: 90rem) {
  #view-wastewater .wwtp-label { font-size: 0.58rem; }
}
/* AUTO / MANUAL selector state of a settling aeration motor */
#view-wastewater .mode-pill {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: rgba(56, 189, 248, 0.12);
    border: 0.0625rem solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
#view-wastewater .mode-pill.manual {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}
/* ---- Status strip under the diagram ----
   Replaces the old left/right side columns so the drawing gets the full panel
   width; keeps every pump / blower / dosing status the spec asks for. */
#view-wastewater .wwtp-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
}
#view-wastewater .wwtp-status-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
#view-wastewater .wwtp-status-group-title {
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#view-wastewater .wwtp-status-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
#view-wastewater .wwtp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(15, 23, 42, 0.6);
    border: 0.0625rem solid rgba(148, 163, 184, 0.16);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#view-wastewater .wwtp-chip > i {
    color: #64748b;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}
#view-wastewater .wwtp-chip-name {
    color: #cbd5e1;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}
#view-wastewater .wwtp-chip-rate {
    color: #94a3b8;
    font-size: 0.625rem;
    white-space: nowrap;
}
#view-wastewater .wwtp-chip-note {
    color: #64748b;
    font-size: 0.625rem;
    font-style: italic;
    align-self: center;
}
#view-wastewater .wwtp-chip.pump-running {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 0.5rem rgba(16, 185, 129, 0.2);
}
#view-wastewater .wwtp-chip.pump-running > i {
    color: #34d399;
}
#view-wastewater .wwtp-chip.dosing-card.pump-running {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 0.5rem rgba(168, 85, 247, 0.2);
}
#view-wastewater .wwtp-chip.dosing-card.pump-running > i {
    color: #c084fc;
}
#view-wastewater .wwtp-chip.pump-alarm {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0.5rem rgba(239, 68, 68, 0.25);
}
#view-wastewater .wwtp-chip.pump-alarm > i {
    color: #f87171;
}
/* ---- Cards rebuilt as HTML ----
   The drawing carried these as 7-13px bitmap text, unreadable once the diagram is
   scaled. build_transparent_diagram.py erases the matching rects; everything below
   redraws them as vector text so it stays sharp at any size. Sizes are tuned for
   the diagram at its usual ~1230px width, with a bump on wide screens. */
#view-wastewater .wwtp-card-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
#view-wastewater .wwtp-card {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    padding: 0.15rem 0.2rem;
    border-radius: 0.4rem;
    background: #f1f5f9;
    border: 0.09rem solid #94a3b8;
    box-shadow: 0 0.12rem 0.4rem rgba(2, 6, 23, 0.45);
    text-align: center;
    overflow: hidden;
}
#view-wastewater .wwtp-card-title {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #0f172a;
}
/* CANH BAO (ALARM) */
#view-wastewater .wwtp-card-list {
    list-style: none;
    margin: 0.1rem 0 0;
    padding: 0;
    width: 100%;
    text-align: left;
}
#view-wastewater .wwtp-card-list li {
    position: relative;
    padding-left: 0.5rem;
    margin-bottom: 0.16rem;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
}
#view-wastewater .wwtp-card-list li::before {
    content: "•";
    position: absolute;
    left: 0.05rem;
    color: #475569;
}
#view-wastewater .wwtp-card-foot {
    margin-top: auto;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.25;
    color: #b91c1c;
}
/* MO TO 1 / 2 — an SVG motor replaces the text the drawing carried. No card
   behind it: the motor sits straight on the dark panel like the other plant
   equipment, so the caption is light instead of navy-on-white. */
#view-wastewater .wwtp-card-motor {
    background: none;
    border: 0;
    box-shadow: none;
    gap: 0;
    padding: 0;
}
#view-wastewater .wwtp-card-motor .wwtp-card-title {
    color: #dbeafe;
    font-size: 0.58rem;
    line-height: 1.05;
    text-shadow: 0 0.0625rem 0.125rem rgba(2, 6, 23, 0.9);
}
#view-wastewater .wwtp-motor-svg {
    display: block;
    width: 100%;
    max-width: 3.4rem;
    height: auto;
    margin-bottom: 0.05rem;
}
/* Drum name plates, drawn over the erased rect on each drum */
#view-wastewater .wwtp-plate {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    background: #ffffff;
    box-shadow: 0 0.1rem 0.3rem rgba(2, 6, 23, 0.4);
    text-align: center;
    overflow: hidden;
}
#view-wastewater .wwtp-plate-main {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.05;
    color: #0f172a;
    letter-spacing: -0.01em;
}
#view-wastewater .wwtp-plate-sub {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: #334155;
}
/* "BE n" tags above each tank */
@media (min-width: 90rem) {
  #view-wastewater .wwtp-card-title { font-size: 0.72rem; }
  #view-wastewater .wwtp-card-list li { font-size: 0.64rem; }
  #view-wastewater .wwtp-card-foot { font-size: 0.64rem; }
  #view-wastewater .wwtp-card-motor .wwtp-card-title { font-size: 0.64rem; }
  #view-wastewater .wwtp-plate-main { font-size: 1.1rem; }
  #view-wastewater .wwtp-plate-sub { font-size: 0.64rem; }
}
/* The rest of the overlay layer, in viewBox units for the same reason as the
   sensor cards: a name plate or a caption sized in rem keeps its pixel size
   while the drawing scales with the panel, so on a narrower screen the text
   outgrows its plate and the pump dots outgrow their pumps. The numbers are
   what the rem rules render to at the panel's full 1620px. */
@supports (container-type: inline-size) {
  #view-wastewater .wwtp-label {
        font-size: calc(9 * var(--u));
        text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(2, 6, 23, 0.9);
    }
  #view-wastewater .wwtp-plate {
        border-radius: calc(5 * var(--u));
        box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(2, 6, 23, 0.4);
    }
  #view-wastewater .wwtp-plate-main { font-size: calc(18 * var(--u)); }
  #view-wastewater .wwtp-plate-sub { font-size: calc(10 * var(--u)); }
  #view-wastewater .wwtp-card-motor .wwtp-card-title {
        font-size: calc(9 * var(--u));
        text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(2, 6, 23, 0.9);
    }
  #view-wastewater .pump-dot {
        width: calc(18 * var(--u));
        height: calc(18 * var(--u));
        border-width: calc(2.4 * var(--u));
        box-shadow: 0 0 calc(6 * var(--u)) rgba(0, 0, 0, 0.55);
        --dot-glow: calc(12 * var(--u));
    }
  /* The motor shell is only 34x18 units, so its lamp runs smaller than a
       pump's -- an 18px dot on it covers the machine instead of marking it. */
#view-wastewater .pump-dot.motor {
        width: calc(13 * var(--u));
        height: calc(13 * var(--u));
        border-width: calc(1.8 * var(--u));
    }
}

/* ---------------------------------------------------------------------------
 * Embedding the dashboard in the SPA.
 * Upstream this is a standalone page inside AdminLTE's .content-wrapper, so
 * .overview-dashboard adds 1.25rem of padding, paints its own #0a0a0a background
 * and forces min-height: 100vh. In hapo-scada it lives inside .content-container,
 * which already has 30px of padding and a height of calc(100vh - header): keeping
 * those three values doubles the padding, paints over the theme and makes the page
 * taller than one screen no matter what.
 * (scope_wwtp_css.py drops the upstream .content-wrapper rule, so the compensation
 * lives here.)
 * --------------------------------------------------------------------------- */
#view-wastewater .overview-dashboard {
    padding: 0;
    min-height: 0;
    background: transparent;
}

/* ---------------------------------------------------------------------------
 * Plant status bar.
 * Ported from .machine-info-bar in vn0043/Views/Shared/_LayoutMain.cshtml. There it
 * sits on the shared header; hapo-scada has its own header for every tab, so the bar
 * lives inside the screen instead and carries a panel background to match the rest.
 * (Added by tools/scope_wwtp_css.py -- it is not part of Overview.css.)
 * --------------------------------------------------------------------------- */
#view-wastewater .machine-info-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.5rem 1rem;
    background: #131c2f;
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3);
}

#view-wastewater .machine-info-bar .divider {
    width: 0.0625rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.5rem;
}

#view-wastewater .machine-info-bar .info-item {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.375rem 0.75rem;
}

#view-wastewater .machine-info-bar .info-label {
    font-size: 0.8125rem;
    color: #a9b7cb;
    font-weight: 600;
}

#view-wastewater .machine-info-bar .info-value {
    font-size: 1rem;
    color: #00e5ff;
    font-weight: 700;
}

#view-wastewater .machine-info-bar .machine-status {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.25rem;
    display: inline-block;
}

#view-wastewater .machine-info-bar .machine-status.running {
    color: #22c55e;
    font-size: 1rem;
}

#view-wastewater .machine-info-bar .machine-status.alarm { color: #ef4444; }
#view-wastewater .machine-info-bar .machine-status.stopped { color: #94a3b8; }

#view-wastewater .machine-info-bar .production-value {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    font-size: 1rem;
    color: #ffffff;
    font-weight: 700;
}

#view-wastewater .machine-info-bar .production-value .current-value { color: #00e5ff; }
#view-wastewater .machine-info-bar .production-value .sep { color: #475569; font-weight: 500; }

#view-wastewater .machine-info-bar .alarm-item {
    cursor: pointer;
    transition: background 0.2s ease;
    border: 0;
    background: transparent;
    text-align: left;
}

#view-wastewater .machine-info-bar .alarm-item:hover {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.375rem;
}

#view-wastewater .machine-info-bar .alarm-item .alarm-count {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

#view-wastewater .machine-info-bar .alarm-item .alarm-bell {
    color: #f59e0b;
    font-size: 1rem;
    animation: wwtp-bell-shake 2s infinite;
}

#view-wastewater .machine-info-bar .alarm-item .alarm-badge {
    color: #f59e0b;
    font-size: 1rem;
    font-weight: 600;
}

@keyframes wwtp-bell-shake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
}

@media (max-width: 64rem) {
    #view-wastewater .machine-info-bar { padding: 0.375rem 0.625rem; }
    #view-wastewater .machine-info-bar .divider { margin: 0 0.375rem; }
    #view-wastewater .machine-info-bar .info-item { padding: 0.25rem 0.5rem; }
    #view-wastewater .machine-info-bar .info-label { font-size: 0.75rem; }
}

/* ---------------------------------------------------------------------------
 * Showing and hiding the tank history modal.
 * Upstream relies on Bootstrap to toggle .modal; hapo-scada does not load Bootstrap,
 * so the overlay is rebuilt here and the JS only toggles the .is-open class.
 * (Added by tools/scope_wwtp_css.py -- it is not part of Overview.css.)
 * --------------------------------------------------------------------------- */
#tankHistoryModal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    display: none;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.72);
}

/* Centred on both axes, standing in for Bootstrap's .modal-dialog-centered.
   margin:auto on the dialog rather than align-items:center, because once the modal is
   taller than the viewport align-items:center clips the top out of reach. */
#tankHistoryModal.is-open {
    display: flex;
}

#tankHistoryModal .tank-history-dialog {
    margin: auto;
}

#tankHistoryModal .modal-content {
    width: 100%;
}

/* ---------------------------------------------------------------------------
 * Water quality alarm threshold table on the Settings page.
 * js/wwtp-alarm-threshold-setting.js (ported verbatim) puts .form-control-custom on
 * its inputs, so the matching styles are declared here.
 * (Added by tools/scope_wwtp_css.py -- it is not part of Overview.css.)
 * --------------------------------------------------------------------------- */
#view-settings .wwtp-threshold-container .form-control-custom {
    width: 100%;
    background: var(--bg-primary);
    border: 0.0625rem solid var(--border-color);
    border-radius: 0.5rem;
    color: #fff;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    outline: none;
    text-align: center;
}

#view-settings .wwtp-threshold-container .form-control-custom:focus {
    border-color: var(--accent-blue);
}

#view-settings .wwtp-threshold-container .threshold-enabled {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

#view-settings .wwtp-threshold-container td {
    vertical-align: middle;
}