/*
 * FishSystem desktop + tablet + mobile layout correction
 * Loaded last. It fixes legacy Bootstrap floats and fixed narrow cards
 * without changing backend or page business logic.
 */

/* Stable page shell */
html, body {
    min-height: 100%;
}
body.responsive-audited #page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.responsive-audited #headerContainer,
body.responsive-audited #footerContainer {
    flex: 0 0 auto;
    width: 100%;
}
body.responsive-audited .content {
    flex: 1 0 auto;
}
body.responsive-audited #footerContainer {
    clear: both;
    margin-top: auto;
}
body.responsive-audited #footerContainer .app-footer-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px;
    text-align: center;
}

/* Undo the old global 560 px rule. Width is controlled by page type below. */
body.responsive-audited .box {
    max-width: none !important;
}

/* CRUD/list pages: feed, fish, medicine and pond management */
body.page-feed .content.container-fluid,
body.page-fish .content.container-fluid,
body.page-medicine .content.container-fluid,
body.page-manage .content.container-fluid {
    width: 100%;
    padding: 26px 24px 40px;
}

body.page-feed .content > .row,
body.page-fish .content > .row,
body.page-medicine .content > .row,
body.page-manage .content > .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.page-feed #feedHeader,
body.page-fish #fishHeader,
body.page-medicine #medicineHeader,
body.page-manage #poodHeader {
    width: min(100%, 820px);
    margin: 0 auto 20px;
    padding: 0 16px;
    text-align: center;
    line-height: 1.3;
}

body.page-feed #allThing,
body.page-fish #allThing,
body.page-medicine #allThing,
body.page-manage #allThing {
    float: none !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin: 0 auto 28px !important;
    padding: 0 20px 22px !important;
    text-align: left;
}

body.page-feed #allThing > .nav-tabs,
body.page-fish #allThing > .nav-tabs,
body.page-medicine #allThing > .nav-tabs,
body.page-manage #allThing > .nav-tabs {
    width: 100%;
    margin: 0;
}

body.page-feed #tabContent,
body.page-fish #tabContent,
body.page-medicine #tabContent,
body.page-manage #tabContent {
    width: 100%;
    min-height: 0;
}

body.page-feed #tabContent .col-xs-12,
body.page-fish #tabContent .col-xs-12,
body.page-medicine #tabContent .col-xs-12,
body.page-manage #tabContent .col-xs-12 {
    float: none !important;
    width: 100% !important;
    margin: 0;
    padding: 14px 0 0;
}

body.page-feed select[size],
body.page-fish select[size],
body.page-medicine select[size],
body.page-manage select[size] {
    width: 100%;
    min-height: 360px;
    max-height: 52vh;
    padding: 6px 8px;
    font-size: 16px;
    line-height: 1.55;
}

body.page-feed .form-group,
body.page-fish .form-group,
body.page-medicine .form-group,
body.page-manage .form-group {
    width: 100%;
    margin-bottom: 0;
}

body.page-feed .newButton,
body.page-fish .newButton,
body.page-medicine .newButton,
body.page-manage .newButton {
    min-width: 44px;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px;
    margin-top: 10px;
    border-radius: 6px;
}

body.page-feed .table-responsive,
body.page-fish .table-responsive,
body.page-medicine .table-responsive,
body.page-manage .table-responsive {
    float: none !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 14px 0 0 !important;
}

body.page-feed .table,
body.page-fish .table,
body.page-medicine .table,
body.page-manage .table {
    width: 100%;
    table-layout: auto;
}

/* TGC configuration uses the same centered desktop card logic. */
body.page-tgc .content.container-fluid {
    width: 100%;
    padding: 26px 24px 40px;
}
body.page-tgc .content > .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
}
body.page-tgc #choose,
body.page-tgc #calculate {
    float: none !important;
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin: 0 auto 24px !important;
}

/* Active table remains centered at both desktop and mobile widths. */
body.page-active .contents-left,
body.active-page .contents-left {
    float: none !important;
    left: auto !important;
    right: auto !important;
    width: min(calc(100% - 48px), 1180px) !important;
    max-width: 1180px !important;
    margin: 32px auto !important;
}
body.page-active .active-table-scroll,
body.active-page .active-table-scroll {
    width: 100%;
    margin: 0 auto;
}
body.page-active .active-table-scroll table,
body.active-page .active-table-scroll table {
    margin-left: auto;
    margin-right: auto;
}

/* Desktop information/chart pages: use the available width instead of a narrow card. */
@media (min-width: 992px) {
    body.page-growup #page > .selectPonds,
    body.page-np #page > .selectPonds,
    body.page-monitor #page > .selectPonds,
    body.page-camera #page > .selectPonds,
    body.page-situation #page > .selectPonds {
        width: min(calc(100% - 64px), 1180px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.page-growup #page > .selectPonds + .content,
    body.page-np #page > .selectPonds + .content,
    body.page-monitor #page > .selectPonds + .content,
    body.page-camera #page > .selectPonds + .content,
    body.page-situation #page > .selectPonds + .content {
        width: min(calc(100% - 64px), 1180px) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    body.page-feed .content.container-fluid,
    body.page-fish .content.container-fluid,
    body.page-medicine .content.container-fluid,
    body.page-manage .content.container-fluid,
    body.page-tgc .content.container-fluid {
        padding: 22px 18px 34px;
    }

    body.page-feed #allThing,
    body.page-fish #allThing,
    body.page-medicine #allThing,
    body.page-manage #allThing,
    body.page-tgc #choose,
    body.page-tgc #calculate {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }
}

/* Phones */
@media (max-width: 767px) {
    body.page-feed .content.container-fluid,
    body.page-fish .content.container-fluid,
    body.page-medicine .content.container-fluid,
    body.page-manage .content.container-fluid,
    body.page-tgc .content.container-fluid {
        padding: 16px 10px 28px !important;
    }

    body.page-feed #feedHeader,
    body.page-fish #fishHeader,
    body.page-medicine #medicineHeader,
    body.page-manage #poodHeader {
        width: 100%;
        margin-bottom: 14px;
        padding: 0 6px;
    }

    body.page-feed #allThing,
    body.page-fish #allThing,
    body.page-medicine #allThing,
    body.page-manage #allThing,
    body.page-tgc #choose,
    body.page-tgc #calculate {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-feed #tabContent .col-xs-12,
    body.page-fish #tabContent .col-xs-12,
    body.page-medicine #tabContent .col-xs-12,
    body.page-manage #tabContent .col-xs-12 {
        padding-top: 10px;
    }

    body.page-feed select[size],
    body.page-fish select[size],
    body.page-medicine select[size],
    body.page-manage select[size] {
        min-height: 250px;
        max-height: 46vh;
    }

    body.page-feed .newButton,
    body.page-fish .newButton,
    body.page-medicine .newButton,
    body.page-manage .newButton {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        min-height: 46px;
    }

    body.page-active .contents-left,
    body.active-page .contents-left {
        width: calc(100% - 20px) !important;
        margin: 16px auto 24px !important;
    }
}

/* Very wide desktops: avoid an undersized visual island. */
@media (min-width: 1440px) {
    body.page-feed #allThing,
    body.page-fish #allThing,
    body.page-medicine #allThing,
    body.page-manage #allThing,
    body.page-tgc #choose,
    body.page-tgc #calculate {
        max-width: 900px !important;
        width: min(100%, 900px) !important;
    }
}