/*
 * FishSystem mobile and tablet compatibility layer
 * Loaded after page-specific styles so it can safely override legacy fixed widths.
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
#page { width: 100%; min-height: 100vh; overflow-x: hidden; }
.content, .contents-left, .container-fluid, .container-table, .container-situation {
    max-width: 100%;
}
.content { margin-left: auto; margin-right: auto; }

/* Forms and touch targets */
input, select, textarea, button { max-width: 100%; font-size: 16px; }
select.form-control, input.form-control, textarea.form-control { width: 100%; }
button, .btn, .newButton { min-height: 40px; touch-action: manipulation; }

/* Shared cards and fixed-width legacy boxes */
.box { width: min(100%, 560px) !important; max-width: 100% !important; margin-left: auto; margin-right: auto; }
#allThing, #personInfo { float: none !important; }

/* Tabs can wrap instead of being clipped */
.nav-tabs { display: flex; flex-wrap: wrap; width: 100%; }
.nav-tabs > li { float: none; flex: 1 1 120px; min-width: 0; }
.nav-tabs > li > a { margin-right: 2px; padding: 10px 12px; text-align: center; white-space: normal; }

/* Tables: horizontal scroll only inside the table region */
.table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
table { max-width: 100%; }
.table th, .table td { overflow-wrap: anywhere; word-break: break-word; }

/* Shared pond selector and content */
#page > .selectPonds { max-width: 1100px; }
#page > .selectPonds + .content { min-width: 0; }

/* Legacy 1100px modules */
.content-table, .content-table-new, .content-chart,
.container-situation, .basci-nowMonitor, .nowFeed-nowSell, .NP {
    width: 100% !important;
    max-width: 1100px !important;
}
.content-table-new { padding-left: clamp(10px, 2vw, 20px) !important; padding-right: clamp(10px, 2vw, 20px) !important; }

/* Charts need a usable fluid width */
#charts, #charts-N, #charts-P, .charts, .oxygen, .temp, .pH,
[id*="chart"], [id*="Chart"] { max-width: 100% !important; }
.oxygen, .temp, .pH { width: 100% !important; }

/* Prevent update icons from escaping chart cards */
.oxychartUpdate, .tempchartUpdate, .phchartUpdate { right: 12px !important; left: auto !important; }

/* Header adaptation */
@media (max-width: 767px) {
    .app-navbar { min-height: 52px; }
    .app-header-menu, .app-header-home, .app-header-logout {
        flex: 0 0 auto !important;
        min-width: 52px;
        height: 52px;
    }
    .app-header-menu { width: 58px; }
    .app-header-home { width: auto; padding: 0 8px; }
    .app-header-logout { width: auto; padding: 0 6px; }
    .app-header-home a, .app-header-logout a { font-size: 15px; white-space: nowrap; }
    .app-header-menu img { width: 27px !important; height: 27px !important; }
    .app-language-switch { margin-left: auto; gap: 2px; padding: 0 4px; }
    .app-language-switch button { min-height: 40px; padding: 4px; font-size: 13px; }

    .content, .contents-left { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; }
    .container-fluid { padding-left: 0; padding-right: 0; }
    h1 { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.25; overflow-wrap: anywhere; }

    /* Vertical layout for information + chart pages */
    #page > .selectPonds + .content,
    .basci-nowMonitor, .nowFeed-nowSell, .NP,
    .content.container-fluid {
        display: block !important;
    }
    .basic, .basicS-N, .basicS-P, .alerts, .nowMonitor, .nowFeed, .nowSell {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    .basic { height: auto !important; }
    .basicS { height: auto !important; min-height: 0 !important; }
    .basic ul, .content ul { margin: 0; padding-left: 0; }
    .basic li, .content li {
        width: 100% !important;
        min-height: 50px;
        height: auto !important;
        margin: 8px 0 !important;
        padding: 8px 2px;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
    }
    .basic li svg, .content li svg { margin-right: 10px !important; vertical-align: middle; }
    .alerts { padding: 10px !important; }

    /* Form/list pages */
    select[size] { min-height: 230px; }
    .newButton { width: auto !important; min-width: 72px; padding-left: 12px; padding-right: 12px; }
    #graphic1 .newButton, #graphic2 .newButton, #graphic3 .newButton { margin-bottom: 4px; }
    .input-group { width: 100%; }
    .forecastButton { width: 100% !important; }

    /* Tables */
    .table > tbody > tr > td, .table > tbody > tr > th,
    .table > tfoot > tr > td, .table > tfoot > tr > th,
    .table > thead > tr > td, .table > thead > tr > th {
        height: auto !important;
        min-height: 44px;
        padding: 9px 8px;
        font-size: 14px !important;
    }

    /* Monitor controls */
    .content-table, .content-table-new, .content-chart { margin-top: 16px !important; margin-bottom: 20px !important; }
    .selectDateTime { display: flex; flex-wrap: wrap; gap: 8px; }
    .selectDateTime input, .selectDateTime select, .selectDateTime button,
    #rili, #shijian, #sure, #update { flex: 1 1 140px; width: auto !important; margin: 0 !important; }
    .oxygen, .temp, .pH { height: 320px !important; padding: 20px 0 !important; }

    /* Dialogs and operation panels */
    .alerts, .light-contet, .right-cortrol, .senor-list { max-width: 100% !important; }
    .inputweeks { margin-top: 20px !important; }

    /* Camera/media */
    .imgs, .video { width: 100% !important; max-width: 100% !important; }
    .video iframe, .video video, .imgs img { width: 100% !important; max-width: 100% !important; }

    /* Footer */
    #footerContainer, .app-footer-inner { width: 100%; padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 420px) {
    .app-header-logout { display: none !important; }
    .app-language-switch button { font-size: 12px; }
    .nav-tabs > li { flex-basis: 33.333%; }
    .nav-tabs > li > a { padding: 9px 5px; font-size: 13px; }
    #page > .selectPonds { width: calc(100% - 20px) !important; margin: 12px 10px 6px !important; }
    #page > .selectPonds + .content { width: calc(100% - 20px) !important; }
    .oxygen, .temp, .pH { height: 280px !important; }
    .newButton { min-width: 64px; }
}

/* Landscape phones: keep the header compact and charts visible. */
@media (max-height: 500px) and (orientation: landscape) {
    .oxygen, .temp, .pH { height: 260px !important; }
    #page > .selectPonds { margin-top: 10px !important; }
}