/* ===========================================================
   Shared Edit Dialog / Edit System Wizard Styling
   =========================================================== */

.edit-system-dialog,
.edit-system-wizard-dialog {
    width: min(1040px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
}

    .edit-system-dialog .mud-dialog-title,
    .edit-system-wizard-dialog .mud-dialog-title {
        display: none !important;
    }

    .edit-system-dialog .mud-dialog-content,
    .edit-system-wizard-dialog .mud-dialog-content {
        padding: 0 !important;
        overflow-x: hidden !important;
        background: transparent !important;
    }

    .edit-system-dialog .mud-dialog-actions,
    .edit-system-wizard-dialog .mud-dialog-actions {
        padding: 8px 24px 12px 24px !important;
        background: transparent !important;
    }

/* ===========================================================
   Dialog Entity Backgrounds
   =========================================================== */

.edit-gfd-dialog {
    background-color: color-mix(in srgb, var(--color_gfd_light) 50%, white 50%) !important;
}

.edit-irrigationarea-dialog {
    background-color: color-mix(in srgb, var(--color_irrigationarea_light) 50%, white 50%) !important;
}

.edit-zone-dialog {
    background-color: color-mix(in srgb, var(--color_zone_light) 50%, white 50%) !important;
}

.edit-monitoringsite-dialog {
    background-color: color-mix(in srgb, var(--color_monitoringsite_light) 50%, white 50%) !important;
}

.edit-watersource-dialog {
    background-color: color-mix(in srgb, var(--color_watersource_light) 50%, white 50%) !important;
}

.edit-watermeter-dialog {
    background-color: color-mix(in srgb, var(--color_watermeter_light) 50%, white 50%) !important;
}

.edit-stockpile-dialog,
.edit-amendmentsstockpile-dialog {
    background-color: color-mix(in srgb, var(--color_amendmentsstockpile_light) 50%, white 50%) !important;
}

/* ===========================================================
   Entity Title Bars
   =========================================================== */

.gfd-title-bar {
    background: var(--color_gfd);
}

.irrigationarea-title-bar {
    background: var(--color_irrigationarea);
}

.zone-title-bar {
    background: var(--color_zone);
}

.monitoringsite-title-bar {
    background: var(--color_monitoringsite);
}

.watersource-title-bar {
    background: var(--color_watersource);
}

.watermeter-title-bar {
    background: var(--color_watermeter);
}

.stockpile-title-bar,
.amendmentsstockpile-title-bar {
    background: var(--color_amendmentsstockpile);
}


/* ===========================================================
   Title Bar
   =========================================================== */

.edit-system-title-bar,
.edit-system-wizard-title-bar {
    padding: 10px 20px;
    margin-bottom: 10px;
    color: white;
}

.edit-system-title-row,
.edit-system-wizard-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.edit-system-title-main,
.edit-system-wizard-title-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    gap: 6px;
}

.edit-system-wizard-title-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

    .edit-system-wizard-title-nav .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
        padding: 7px !important;
    }

    .edit-system-wizard-title-nav .mud-icon-root {
        font-size: 1.75rem !important;
    }

.edit-system-wizard-title-prefix {
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: bold;
    color: white;
    line-height: 1.5rem;
    white-space: nowrap;
}

.edit-system-wizard-breadcrumb-row {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    gap: 4px;
}

.edit-system-wizard-current-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.42rem;
    font-weight: bold;
    color: white;
    line-height: 1.55rem;
}

.edit-system-title-audit,
.edit-system-wizard-title-audit {
    display: none !important;
}

/* ===========================================================
   Close Button
   =========================================================== */

.edit-system-wizard-title-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
}

    .edit-system-wizard-title-close .mud-icon-button,
    .edit-system-wizard-close-button {
        width: 44px !important;
        height: 44px !important;
        padding: 7px !important;
        color: white !important;
        opacity: 1 !important;
    }

        .edit-system-wizard-title-close .mud-icon-root,
        .edit-system-wizard-close-button .mud-icon-root {
            fill: white !important;
            color: white !important;
            opacity: 1 !important;
            font-size: 1.8rem !important;
        }

        .edit-system-wizard-title-close .mud-icon-button:hover,
        .edit-system-wizard-close-button:hover {
            background-color: rgba(255,255,255,0.15) !important;
        }

/* Force visibility regardless of entity colour */
.gfd-title-bar .edit-system-wizard-close-button,
.irrigationarea-title-bar .edit-system-wizard-close-button,
.zone-title-bar .edit-system-wizard-close-button,
.monitoringsite-title-bar .edit-system-wizard-close-button,
.watersource-title-bar .edit-system-wizard-close-button,
.watermeter-title-bar .edit-system-wizard-close-button,
.amendmentsstockpile-title-bar .edit-system-wizard-close-button {
    color: white !important;
    fill: white !important;
    opacity: 1 !important;
}

    .gfd-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .irrigationarea-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .zone-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .monitoringsite-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .watersource-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .watermeter-title-bar .edit-system-wizard-close-button .mud-icon-root,
    .amendmentsstockpile-title-bar .edit-system-wizard-close-button .mud-icon-root {
        color: white !important;
        fill:white !important;
        opacity: 1 !important;
    }



/* ===========================================================
   Content Area
   =========================================================== */

.edit-system-dialog-content,
.edit-system-wizard-content {
    width: 100%;
    min-width: 0;
    padding: 12px 24px 0 24px;
    box-sizing: border-box;
    background: transparent !important;
}

/* ===========================================================
   Input Layout
   =========================================================== */

.edit-system-editor-grid,
.edit-system-input-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 8px 7px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.edit-system-dialog-content > .mud-input-control,
.edit-system-dialog .mud-form > .mud-input-control:first-child,
.edit-system-wizard-content > .mud-input-control,
.edit-system-wizard-dialog .mud-form > .mud-input-control:first-child {
    margin-bottom: 8px !important;
}

/* ===========================================================
   Compact Inputs
   =========================================================== */

.edit-system-dialog .mud-input-control,
.edit-system-wizard-dialog .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.edit-system-dialog .mud-input > input.mud-input-root,
.edit-system-dialog .mud-input > textarea.mud-input-root,
.edit-system-dialog .mud-select .mud-input-slot,
.edit-system-wizard-dialog .mud-input > input.mud-input-root,
.edit-system-wizard-dialog .mud-input > textarea.mud-input-root,
.edit-system-wizard-dialog .mud-select .mud-input-slot {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 24px !important;
    display: flex !important;
    align-items: center !important;
}

.edit-system-dialog .mud-input-root,
.edit-system-wizard-dialog .mud-input-root {
    line-height: 24px !important;
}

.edit-system-dialog textarea.mud-input-root,
.edit-system-wizard-dialog textarea.mud-input-root {
    height: auto !important;
    min-height: 48px !important;
}

/* ===========================================================
   Input / Select Backgrounds
   =========================================================== */

.edit-system-dialog .mud-input-control-input-container,
.edit-system-dialog .mud-input,
.edit-system-dialog .mud-input-outlined,
.edit-system-dialog .mud-input-slot,
.edit-system-dialog .mud-select,
.edit-system-dialog .mud-select-input,
.edit-system-dialog input.mud-input-root,
.edit-system-dialog textarea.mud-input-root,
.edit-system-wizard-dialog .mud-input-control-input-container,
.edit-system-wizard-dialog .mud-input,
.edit-system-wizard-dialog .mud-input-outlined,
.edit-system-wizard-dialog .mud-input-slot,
.edit-system-wizard-dialog .mud-select,
.edit-system-wizard-dialog .mud-select-input,
.edit-system-wizard-dialog input.mud-input-root,
.edit-system-wizard-dialog textarea.mud-input-root {
    background-color: white !important;
}

/* ===========================================================
   Missing Values
   =========================================================== */

.edit-system-empty-input .mud-input-control-input-container,
.edit-system-empty-input .mud-input,
.edit-system-empty-input .mud-input-outlined,
.edit-system-empty-input .mud-input-slot,
.edit-system-empty-input .mud-select,
.edit-system-empty-input .mud-select-input,
.edit-system-empty-input input.mud-input-root,
.edit-system-empty-input textarea.mud-input-root {
    background-color: #ffd6d6 !important;
}

.edit-system-empty-input .mud-input-outlined-border {
    border-color: #d9534f !important;
}

.edit-system-empty-input .mud-input-label,
.edit-system-empty-input .mud-input-label.mud-input-label-animated {
    color: rgba(176, 0, 32, 0.55) !important;
}

.edit-system-empty-input input::placeholder,
.edit-system-empty-input textarea::placeholder,
.edit-system-empty-input .mud-select-input {
    color: rgba(176, 0, 32, 0.45) !important;
    opacity: 1 !important;
}

/* ===========================================================
   Information Panel - Shared
   =========================================================== */

.edit-system-info-panel {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px;
    background: white !important;
}

.edit-system-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 8px 14px;
    margin: 0 !important;
    width: 100%;
}

.info-item {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.035);
}

.info-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    word-break: break-word;
}

/* ===========================================================
   Connected System Chips - Shared
   =========================================================== */

.edit-system-connected-panel,
.edit-system-summary-panel {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding: 4px 8px;
    background: white !important;
}

.edit-system-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.edit-system-chip-group-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-height: unset;
    margin: 0;
    padding: 0;
}

    .edit-system-chip-group-row + .edit-system-chip-group-row {
        margin-top: 2px;
    }

.edit-system-summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.edit-system-summary-label-hidden {
    display: none !important;
}

.edit-system-summary-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: unset;
    margin: 0;
    padding: 0;
}

    .edit-system-summary-chip-row .mud-chip {
        margin: 0 !important;
    }

    .edit-system-summary-chip-row .mud-chipset {
        margin: 0 !important;
        padding: 0 !important;
    }

.edit-system-summary-chip {
    cursor: pointer;
}

    .edit-system-summary-chip.gfd-entity {
        background: var(--color_gfd) !important;
        color: white !important;
    }

    .edit-system-summary-chip.irrigationarea-entity {
        background: var(--color_irrigationarea) !important;
        color: white !important;
    }

    .edit-system-summary-chip.zone-entity {
        background: var(--color_zone) !important;
        color: white !important;
    }

    .edit-system-summary-chip.monitoringsite-entity {
        background: var(--color_monitoringsite) !important;
        color: white !important;
    }

    .edit-system-summary-chip.watersource-entity {
        background: var(--color_watersource) !important;
        color: white !important;
    }

    .edit-system-summary-chip.watermeter-entity {
        background: var(--color_watermeter) !important;
        color: white !important;
    }

    .edit-system-summary-chip.amendmentsstockpile-entity,
    .edit-system-summary-chip.stockpile-entity {
        background: var(--color_amendmentsstockpile) !important;
        color: white !important;
    }

.edit-system-chip-expand-text {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 4px;
}

.edit-system-empty-chip {
    background: white !important;
    color: #8a5a00 !important;
    font-weight: 700;
}

.edit-system-hide-chip {
    background: white !important;
    color: #555 !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    font-weight: 700;
    cursor: pointer;
}

/* ===========================================================
   Statistics Table - Shared
   =========================================================== */

.edit-system-statistics-panel {
    margin-top: 8px !important;
}

.edit-system-statistics-grid {
    display: grid;
    grid-template-columns: 210px repeat(4, minmax(0, 1fr));
    gap: 6px 10px;
    align-items: stretch;
    margin-top: 0;
    width: 100%;
}

.edit-system-statistics-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 4px;
}

.edit-system-statistics-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.04);
    font-weight: 800;
    text-align: center;
}

.edit-system-statistics-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.035);
    text-align: center;
    font-weight: 500;
}

.edit-system-no-applications-chip {
    grid-column: span 4;
    justify-self: start;
    background: white !important;
    color: #8a5a00 !important;
    font-weight: 700;
}

/* ===========================================================
   Wizard Breadcrumb Chips
   =========================================================== */

.edit-system-wizard-breadcrumb-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap !important;
}

.edit-system-wizard-breadcrumb-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 260px;
    background: white !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: clamp(0.60rem, 1.05vw, 1.23rem);
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
}

    .edit-system-wizard-breadcrumb-chip .mud-chip-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        font-size: clamp(0.60rem, 1.05vw, 1.23rem);
        font-weight: bold;
        line-height: 1 !important;
        padding: 0 8px !important;
        margin: 0 !important;
    }

    .edit-system-wizard-breadcrumb-chip .mud-chip-label {
        display: block !important;
        min-width: 0;
        max-width: 100%;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }

.gfd-title-bar .edit-system-wizard-breadcrumb-chip,
.gfd-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_gfd) !important;
}

.irrigationarea-title-bar .edit-system-wizard-breadcrumb-chip,
.irrigationarea-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_irrigationarea) !important;
}

.zone-title-bar .edit-system-wizard-breadcrumb-chip,
.zone-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_zone) !important;
}

.monitoringsite-title-bar .edit-system-wizard-breadcrumb-chip,
.monitoringsite-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_monitoringsite) !important;
}

.watersource-title-bar .edit-system-wizard-breadcrumb-chip,
.watersource-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_watersource) !important;
}

.watermeter-title-bar .edit-system-wizard-breadcrumb-chip,
.watermeter-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_watermeter) !important;
}

.amendmentsstockpile-title-bar .edit-system-wizard-breadcrumb-chip,
.amendmentsstockpile-title-bar .edit-system-wizard-breadcrumb-chip .mud-chip-content {
    color: var(--color_amendmentsstockpile) !important;
}

/* ===========================================================
   Wizard Placeholder
   =========================================================== */

.edit-system-wizard-page-placeholder {
    min-height: 340px;
    padding: 20px;
    border-radius: 8px;
    background: rgba(255,255,255,0.55);
    border: 1px dashed rgba(0,0,0,0.25);
}

/* ===========================================================
   Wizard Actions
   =========================================================== */

.edit-system-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.edit-system-wizard-actions-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.edit-system-wizard-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.edit-system-wizard-footer-audit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.15rem;
    color: rgba(0,0,0,0.80);
}

.edit-system-wizard-footer-audit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

/* ===========================================================
   Comments
   =========================================================== */

.edit-system-comments {
    display: block;
}

    .edit-system-comments.mud-input-control {
        margin-top: 10px !important;
    }

/* ===========================================================
   Entity Input Label Colours
   =========================================================== */

.gfd-entity .mud-input-label,
.gfd-entity .mud-input-label.mud-input-label-animated,
.gfd-info-panel .edit-system-section-title,
.gfd-info-panel .info-label {
    color: var(--color_gfd) !important;
}

.irrigationarea-entity .mud-input-label,
.irrigationarea-entity .mud-input-label.mud-input-label-animated,
.irrigationarea-info-panel .edit-system-section-title,
.irrigationarea-info-panel .info-label {
    color: var(--color_irrigationarea) !important;
}

.zone-entity .mud-input-label,
.zone-entity .mud-input-label.mud-input-label-animated,
.zone-info-panel .edit-system-section-title,
.zone-info-panel .info-label {
    color: var(--color_zone) !important;
}

.monitoringsite-entity .mud-input-label,
.monitoringsite-entity .mud-input-label.mud-input-label-animated,
.monitoringsite-info-panel .edit-system-section-title,
.monitoringsite-info-panel .info-label {
    color: var(--color_monitoringsite) !important;
}

.watersource-entity .mud-input-label,
.watersource-entity .mud-input-label.mud-input-label-animated,
.watersource-info-panel .edit-system-section-title,
.watersource-info-panel .info-label {
    color: var(--color_watersource) !important;
}

.watermeter-entity .mud-input-label,
.watermeter-entity .mud-input-label.mud-input-label-animated,
.watermeter-info-panel .edit-system-section-title,
.watermeter-info-panel .info-label {
    color: var(--color_watermeter) !important;
}

.amendmentsstockpile-entity .mud-input-label,
.amendmentsstockpile-entity .mud-input-label.mud-input-label-animated,
.amendmentsstockpile-info-panel .info-label {
    color: var(--color_amendmentsstockpile) !important;
}

/* ===========================================================
   Entity Panel Colours
   =========================================================== */

.gfd-info-panel,
.irrigationarea-info-panel,
.zone-info-panel,
.monitoringsite-info-panel,
.watersource-info-panel,
.watermeter-info-panel,
.amendmentsstockpile-info-panel {
    background: white !important;
}

.gfd-info-panel,
.gfd-connected-panel {
    border-color: var(--color_gfd);
}

.irrigationarea-info-panel,
.irrigationarea-connected-panel {
    border-color: var(--color_irrigationarea);
}

.zone-info-panel,
.zone-connected-panel {
    border-color: var(--color_zone);
}

.monitoringsite-info-panel,
.monitoringsite-connected-panel {
    border-color: var(--color_monitoringsite);
}

.watersource-info-panel,
.watersource-connected-panel {
    border-color: var(--color_watersource);
}

.watermeter-info-panel,
.watermeter-connected-panel {
    border-color: var(--color_watermeter);
}

.amendmentsstockpile-info-panel,
.amendmentsstockpile-connected-panel {
    border-color: var(--color_amendmentsstockpile);
}
/* ===========================================================
   Responsive - Shared
   =========================================================== */

@media (max-width: 980px) {
    .edit-system-dialog-content,
    .edit-system-wizard-content {
        width: calc(100vw - 64px);
        min-width: 0;
    }

    .edit-system-editor-grid,
    .edit-system-input-grid,
    .edit-system-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .edit-system-summary-grid,
    .edit-system-statistics-grid {
        grid-template-columns: 170px repeat(4, minmax(110px, 1fr));
    }
}

@media (max-width: 620px) {
    .edit-system-dialog,
    .edit-system-wizard-dialog {
        max-width: calc(100vw - 24px);
    }

    .edit-system-dialog-content,
    .edit-system-wizard-content {
        width: calc(100vw - 40px);
        padding: 10px 14px 0 14px;
    }

    .edit-system-title-bar,
    .edit-system-wizard-title-bar {
        padding: 10px 14px;
    }

    .edit-system-title-row,
    .edit-system-wizard-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .edit-system-editor-grid,
    .edit-system-input-grid,
    .edit-system-info-grid,
    .edit-system-summary-grid,
    .edit-system-statistics-grid {
        grid-template-columns: 1fr;
    }

    .edit-system-summary-label,
    .edit-system-statistics-label {
        justify-content: flex-start;
        text-align: left;
    }

    .edit-system-no-applications-chip {
        grid-column: auto;
        justify-self: start;
    }

    .edit-system-dialog .mud-dialog-actions,
    .edit-system-wizard-dialog .mud-dialog-actions {
        padding: 8px 14px 12px 14px !important;
    }

    .edit-system-wizard-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .edit-system-wizard-actions-left,
    .edit-system-wizard-actions-right {
        justify-content: space-between;
    }
}

/* ===========================================================
   Page CSS - GFD System Page
   =========================================================== */

.gfd-name-area-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: stretch;
}

.gfd-area-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.72);
    text-align: center;
}

.gfd-area-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color_gfd);
    line-height: 1.2;
}

/* ===========================================================
   Page CSS - Irrigation Area System Page
   =========================================================== */

.irrigationarea-name-area-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: stretch;
}

.irrigationarea-area-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.72);
    text-align: center;
}

.irrigationarea-area-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color_irrigationarea);
    line-height: 1.2;
}

/* ===========================================================
   Page CSS - Monitoring Site System Page
   =========================================================== */

.monitoringsite-name-description-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) !important;
    gap: 5px 7px !important;
    align-items: start !important;
    width: 100%;
}

    .monitoringsite-name-description-row > * {
        min-width: 0;
    }

.monitoringsite-bool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 5px 7px;
}

    .monitoringsite-bool-grid .mud-checkbox {
        background: rgba(255,255,255,0.55);
        border-radius: 6px;
        padding: 4px 8px;
    }

/* ========================================================================
   WATER SOURCE EDIT SYSTEM WIZARD PAGE
   ======================================================================== */

.watersource-dialog-content {
    --watersource-color: var(--color_watersource);
    --watersource-light-color: var(--color_watersource_light);
}

/* Name / Description / Capacity row */
.watersource-name-area-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.2fr) minmax(260px, 2fr) minmax(140px, 1fr) !important;
    gap: 5px 7px !important;
    align-items: start !important;
    width: 100% !important;
}

    .watersource-name-area-row > .mud-input-control,
    .watersource-name-area-row > .mud-input-control-root {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

/* Connected systems panel */
.watersource-system-group-panel {
    background: white !important;
    border: 1px solid var(--color_watersource);
    border-radius: 8px;
    box-shadow: none !important;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Linked irrigation areas */
.watersource-system-summary-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: center;
}

.watersource-system-summary-label {
    color: var(--color_watersource);
    font-weight: 600;
    white-space: nowrap;
}

.watersource-system-summary-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.watersource-summary-chip {
    height: 24px;
    font-size: 0.75rem;
}

/* Summary table */
.watersource-waterquality-summary-panel {
    margin-top: 4px;
}

/* Water source label colours */
.watersource-dialog-content .mud-input-control > .mud-input-control-input-container > label.mud-input-label,
.watersource-dialog-content .mud-input-label {
    color: var(--color_watersource) !important;
}

/* ===========================================================
   Page CSS - Water Meter System Page
   =========================================================== */

.watermeter-entity {
    --edit-system-summary-table-main: var(--color_watermeter);
    --edit-system-summary-table-light: var(--color_watermeter_light);
}

.watermeter-dialog-content {
    --watermeter-color: var(--color_watermeter);
    --watermeter-light-color: var(--color_watermeter_light);
}

.watermeter-name-description-row {
    display: block !important;
    width: 100% !important;
}

    .watermeter-name-description-row > .mud-input-control,
    .watermeter-name-description-row > .mud-input-control-root,
    .watermeter-name-description-row .mud-input-control,
    .watermeter-name-description-row .mud-input-control-root {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

.watermeter-readings-summary-panel {
    margin-top: 4px;
}

.watermeter-dialog-content .mud-input-control > .mud-input-control-input-container > label.mud-input-label,
.watermeter-dialog-content .mud-input-label {
    color: var(--color_watermeter) !important;
}


/* ===========================================================
   Page CSS - Zone System Page
   =========================================================== */

.zone-info-panel-compact {
    margin-top: 6px;
}

.zone-info-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

/* ===========================================================
   Page CSS - Amendments Stockpile System Page
   =========================================================== */

.amendmentsstockpile-system-summary-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    margin-bottom: 12px;
    align-items: start;
}

.amendmentsstockpile-system-summary-label {
    font-weight: 600;
    white-space: nowrap;
}

.amendmentsstockpile-system-summary-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.amendmentsstockpile-summary-chip {
    cursor: pointer;
}

.amendmentsstockpile-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ===========================================================
   Page CSS - Responsive
   =========================================================== */

@media (max-width: 1200px) {
    .amendmentsstockpile-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .amendmentsstockpile-info-grid {
        grid-template-columns: 1fr;
    }

    .amendmentsstockpile-system-summary-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 620px) {
    .gfd-name-area-row,
    .irrigationarea-name-area-row {
        grid-template-columns: 1fr;
    }

    .monitoringsite-bool-grid {
        grid-template-columns: 1fr;
    }
}


/* ===========================================================
   System Page Summary Tables - Shared
   =========================================================== */

.gfd-entity {
    --edit-system-summary-table-main: var(--color_gfd);
    --edit-system-summary-table-light: var(--color_gfd_light);
}

.irrigationarea-entity {
    --edit-system-summary-table-main: var(--color_irrigationarea);
    --edit-system-summary-table-light: var(--color_irrigationarea_light);
}

.zone-entity {
    --edit-system-summary-table-main: var(--color_zone);
    --edit-system-summary-table-light: var(--color_zone_light);
}

.monitoringsite-entity {
    --edit-system-summary-table-main: var(--color_monitoringsite);
    --edit-system-summary-table-light: var(--color_monitoringsite_light);
}

.watersource-entity {
    --edit-system-summary-table-main: var(--color_watersource);
    --edit-system-summary-table-light: var(--color_watersource_light);
}

.watermeter-entity {
    --edit-system-summary-table-main: var(--color_watermeter);
    --edit-system-summary-table-light: var(--color_watermeter_light);
}

.amendmentsstockpile-entity,
.stockpile-entity {
    --edit-system-summary-table-main: var(--color_amendmentsstockpile);
    --edit-system-summary-table-light: var(--color_amendmentsstockpile_light);
}

.edit-system-summary-table-panel {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-sizing: border-box;
    overflow-x: hidden;
}

.edit-system-summary-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: transparent;
}

    .edit-system-summary-table th {
        background-color: var(--edit-system-summary-table-main);
        color: white;
        font-weight: 700;
        text-align: center;
        padding: 5px 6px;
        border: 1px solid var(--edit-system-summary-table-main);
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }

.edit-system-summary-table-title {
    text-align: left !important;
    font-weight: 850 !important;
    font-size: 0.88rem;
}

.edit-system-summary-table td {
    padding: 5px 6px;
    border: 1px solid var(--edit-system-summary-table-light);
    text-align: center;
    background-color: rgba(255,255,255,0.70);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}

.edit-system-summary-table-row-title {
    text-align: left !important;
    font-weight: bold;
    color: var(--edit-system-summary-table-main);
    white-space: normal;
    overflow-wrap: anywhere;
}

.edit-system-summary-table-warning-cell {
    background-color: #fff3cd !important;
    font-weight: 700;
    color: #7a5a00;
    text-align: center !important;
}

.edit-system-summary-table-due {
    background-color: yellow !important;
    font-weight: 700;
}



/* ========================================================================
   COMPACT MUDBLAZOR EMPTY INPUT PLACEHOLDER LABELS
   ------------------------------------------------------------------------
   The Edit System dialogs use reduced-height MudBlazor outlined inputs.

   This version fixes the issue where placeholder labels remain over the
   user's text while typing in MudNumericField controls.

   Behaviour:
   - Empty and unfocused → label centred vertically.
   - Focused → label immediately moves to the floating position.
   - Filled → label remains floated.
   - Entity colour rules still apply to floating labels.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Empty input: centre placeholder label
   ------------------------------------------------------------------------ */

.edit-system-dialog-content
.mud-input-control > .mud-input-control-input-container:not(:focus-within):not(:has(.mud-input.mud-shrink)) > label.mud-input-label-outlined.mud-input-label-inputcontrol,
.edit-system-wizard-content
.mud-input-control > .mud-input-control-input-container:not(:focus-within):not(:has(.mud-input.mud-shrink)) > label.mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, 13px) scale(1) !important;
    line-height: 1.15rem !important;
    color: #b0b0b0 !important;
}

/* ------------------------------------------------------------------------
   Focused OR populated input: float label immediately
   ------------------------------------------------------------------------ */

.edit-system-dialog-content
.mud-input-control > .mud-input-control-input-container:focus-within > label.mud-input-label-outlined.mud-input-label-inputcontrol,
.edit-system-dialog-content
.mud-input-control > .mud-input-control-input-container:has(.mud-input.mud-shrink) > label.mud-input-label-outlined.mud-input-label-inputcontrol,
.edit-system-wizard-content
.mud-input-control > .mud-input-control-input-container:focus-within > label.mud-input-label-outlined.mud-input-label-inputcontrol,
.edit-system-wizard-content
.mud-input-control > .mud-input-control-input-container:has(.mud-input.mud-shrink) > label.mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, -6px) scale(0.75) !important;
}

/* ------------------------------------------------------------------------
   Faster animation so the label gets out of the way immediately
   ------------------------------------------------------------------------ */

.edit-system-dialog-content .mud-input-label,
.edit-system-wizard-content .mud-input-label {
    transition: transform 80ms ease, color 80ms ease !important;
}

/* ------------------------------------------------------------------------
   Do not interfere with outlined field legends
   ------------------------------------------------------------------------ */

.edit-system-dialog-content
.mud-input-outlined-border > legend,
.edit-system-wizard-content
.mud-input-outlined-border > legend {
    color: inherit;
}

/* ===========================================================
   Changed Inputs
   =========================================================== */

.edit-system-changed-input .mud-input-control-input-container,
.edit-system-changed-input .mud-input,
.edit-system-changed-input .mud-input-outlined,
.edit-system-changed-input .mud-input-slot,
.edit-system-changed-input .mud-select,
.edit-system-changed-input .mud-select-input,
.edit-system-changed-input input.mud-input-root,
.edit-system-changed-input textarea.mud-input-root {
    background-color: #ffff00 !important;
}

.edit-system-changed-input .mud-input-outlined-border {
    border-color: #c9a900 !important;
}