/* Shared by the WebAssembly and MAUI hosts; loaded after the theme. */
:root {
    --app-width: 960px;
    --nav-space: calc(100px + env(safe-area-inset-bottom, 0px));
}
html { min-height: 100%; }
body {
    font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    padding: 0 !important;
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    background: #f2f2f2;
}
#app {
    width: 100%;
    max-width: var(--app-width);
    margin: 0 auto;
    padding: 0;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
    border-radius: 0;
    background: #f2f2f2;
}
#app *, #app *::before, #app *::after { box-sizing: border-box; }
#app img { max-width: 100%; height: auto; }
#app .dashboard {
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top, 0px))
        max(12px, env(safe-area-inset-right, 0px))
        var(--nav-space) max(12px, env(safe-area-inset-left, 0px));
}
#app .dashboard .px-5 {
    padding-left: clamp(0px, 3vw, 24px) !important;
    padding-right: clamp(0px, 3vw, 24px) !important;
}
#app .w-box { min-width: 0; overflow-wrap: anywhere; }
#app .w-box > .d-flex { width: 100%; min-width: 0; }
#app h4 { min-width: 0; overflow-wrap: anywhere; }
#app .item__holder, #app .plant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
#app .item__select, #app .item__select.w-50 {
    width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: clamp(10px, 3vw, 20px);
    overflow-wrap: anywhere;
}
#app .item__select.w-100 { grid-column: 1 / -1; }
#app .item__select .ico img { object-fit: contain; }
#app .form-control, #app .form-select { min-width: 0; font-size: 16px; }
#app .row > .col { min-width: 0; }
#app .btn { min-height: 44px; white-space: normal; }
#app .dashboard .d-flex.justify-content-between:has(> .btn) { gap: 12px; flex-wrap: wrap; }
#app .dashboard .d-flex.justify-content-between > .btn { flex: 1 1 auto; }
#app nav.nav {
    position: fixed;
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width: calc(var(--app-width) - 24px);
    margin: 0;
    flex-wrap: nowrap;
    z-index: 100;
}
#app nav.nav a { flex: 1 1 0; min-width: 0; width: 25%; min-height: 64px; }
#app nav.nav a span { font-size: clamp(11px, 3vw, 14px); }
#app .login, #app .splash {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 24px;
    padding: max(24px, env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px)) !important;
}
#app .login form { min-height: 0; width: 100%; max-width: 480px; margin: 0 auto; }
#app .chat-page { padding-bottom: var(--nav-space); }
#app .chat-input-bar { padding-bottom: 12px; }
#app .farm-map { width: 100%; height: 400px; height: clamp(220px, 50dvh, 400px); }
#app table { width: 100%; table-layout: fixed; }
#app th, #app td { overflow-wrap: anywhere; }
#app td .btn { margin: 2px; }
#spinnerDiv { position: fixed !important; inset: 0; width: 100% !important; height: 100% !important; }
@media (max-width: 359px) {
    #app .row > .col { flex: 0 0 100%; margin-bottom: 12px; }
    #app .chat-message { max-width: 90%; }
    #app .chat-input-bar { padding: 8px; gap: 6px; }
}
@media (min-width: 768px) {
    #app .plant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #app .dashboard { padding-left: 24px; padding-right: 24px; }
}