/* Final page-specific stability fixes: desktop + mobile */

/* Shared header must remain in normal document flow on data pages. */
body.page-np #headerContainer,
body.page-monitor #headerContainer,
body.page-growup #headerContainer,
body.page-camera #headerContainer,
body.page-situation #headerContainer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    z-index: 20;
}

/* Pond selector is a toolbar, never a floating layer. */
body.page-np #page > .selectPonds,
body.page-monitor #page > .selectPonds,
body.page-growup #page > .selectPonds,
body.page-camera #page > .selectPonds,
body.page-situation #page > .selectPonds {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    z-index: 1 !important;
}

/* np.html uses .alerts as an ordinary chart panel. Undo the generic modal rule. */
body.page-np .alerts {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    box-sizing: border-box;
}

body.page-np .content.container-fluid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: min(calc(100% - 40px), 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 8px 0 32px !important;
}
body.page-np .basicS-N,
body.page-np .basicS-P {
    width: 100% !important;
    min-width: 0;
}
body.page-np .basicS-N > ul,
body.page-np .basicS-P > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.page-np .content li {
    width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
body.page-np #charts-N,
body.page-np #charts-P {
    width: 100% !important;
    min-width: 0;
}

/* Monitor page: keep selector, summary cards and charts in normal flow. */
body.page-monitor .content {
    float: none !important;
    width: min(calc(100% - 40px), 1180px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.page-monitor .content-table,
body.page-monitor .content-table-new,
body.page-monitor .content-chart {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Placeholder styling and predictable create-form inputs. */
body.page-feed input::placeholder,
body.page-medicine input::placeholder,
body.page-fish input::placeholder,
body.page-manage input::placeholder {
    color: #8a98a5;
    opacity: 1;
}
body.page-feed .info input,
body.page-medicine .info input,
body.page-fish .info input,
body.page-manage .info input,
body.page-medicine .info-date input {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body.page-np #page,
    body.page-monitor #page,
    body.page-growup #page,
    body.page-camera #page,
    body.page-situation #page {
        display: block !important;
        min-height: 100vh;
    }

    body.page-np #page > .selectPonds,
    body.page-monitor #page > .selectPonds,
    body.page-growup #page > .selectPonds,
    body.page-camera #page > .selectPonds,
    body.page-situation #page > .selectPonds {
        width: calc(100% - 24px) !important;
        margin: 12px auto 10px !important;
    }

    body.page-np #page > .selectPonds select,
    body.page-monitor #page > .selectPonds select,
    body.page-growup #page > .selectPonds select,
    body.page-camera #page > .selectPonds select,
    body.page-situation #page > .selectPonds select {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-np .content.container-fluid {
        display: block !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        padding: 0 0 24px !important;
    }
    body.page-np .basicS-N,
    body.page-np .basicS-P {
        width: 100% !important;
        margin: 0 0 22px !important;
    }
    body.page-np .alerts {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
    }
    body.page-np .alerts p {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 0 12px;
    }
    body.page-np .alerts input,
    body.page-np .alerts button {
        width: 100% !important;
        min-height: 42px;
    }
    body.page-np #charts-N,
    body.page-np #charts-P {
        min-height: 300px;
    }

    body.page-monitor .content {
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.page-monitor .icons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
        width: 100% !important;
    }
    body.page-monitor .contentsss {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    body.page-monitor .selectDateTime,
    body.page-monitor .selectDateTime .selects {
        width: 100% !important;
    }
    body.page-monitor .selectDateTime .selects {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    body.page-monitor .selectDateTime input,
    body.page-monitor .selectDateTime button {
        width: 100% !important;
        min-height: 42px;
    }
}