/* Shared sizing and responsive layout for every application entry point. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
img, video { max-width: 100%; height: auto; }
input, select, textarea, .field, .form-group { min-width: 0; max-width: 100%; }
.card, .card.wide, .container, .app-shell, .mobile-frame { max-width: 100%; }
body > .card { height: auto; }
.panel, .stat-card, .stat, .content, .main, .dash-main,
.grid > *, .dash-grid > *, .lp-grid > *, .field-row > * { min-width: 0; }
.record, .notice, .pname, .identity, .kv-val { overflow-wrap: anywhere; }
.dash-top, .topbar, .navbar, .navbar-left, .navbar-right,
.topbar-actions, .filter-tabs, .actions { flex-wrap: wrap; gap: 12px; }
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap table { min-width: 560px; }
.table-wrap:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.otp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 1024px) {
    .dash-main { padding: 24px 20px; }
    .dash-grid, .lp-grid { grid-template-columns: minmax(0, 1fr); }
    .action-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
}

@media (max-width: 860px) {
    /* Keep every section named and reachable, without taking room from content. */
    .dashboard.dash-active { flex-direction: column; }
    .dashboard > .sidebar {
        position: relative;
        width: 100%; height: auto; max-height: none;
        flex-direction: row; align-items: center;
        padding: 10px 12px; gap: 6px;
        overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .dashboard > .sidebar > * { flex: 0 0 auto; }
    .dashboard > .sidebar .side-brand,
    .dashboard > .sidebar .nav-spacer { display: none; }
    .dashboard > .sidebar .nav-item { min-height: 44px; margin: 0; white-space: nowrap; }
    .dashboard > .sidebar .nav-item span { display: inline; }
    .dashboard > .sidebar .nav-logout { margin: 0; padding: 0; border: 0; }
    .dashboard .dash-main { width: 100%; max-height: none; overflow: visible; }
    .layout { grid-template-columns: minmax(0, 1fr); }
    .layout > .sidebar { width: 100%; height: auto; }
}

@media (max-width: 600px) {
    body:not(.dash-open):has(> .card) { padding: 24px 16px; }
    body > .card, body > .card.wide { padding: 24px 20px; flex-shrink: 0; }
    .dash-main, .main { padding: 20px 14px 32px; }
    .dash-top, .topbar { align-items: flex-start; }
    .dash-top > *, .topbar > * { min-width: 0; max-width: 100%; }
    .dash-top .profile-chip, .dash-top .vessel-chip { max-width: 100%; }
    .stat-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card, .stat { padding: 14px 12px; }
    .dash-grid, .grid, .lp-grid, .lp-row, .form-grid, .record-form {
        grid-template-columns: minmax(0, 1fr);
    }
    .field-row { flex-direction: column; gap: 0; }
    .panel, .lp-card { padding: 18px 14px; }
    .record-form button { width: 100%; }
    input:not([type=checkbox]):not([type=radio]), select, textarea,
    .field input, .field select, .record-form input, .record-form select,
    .record-form textarea, .lp-field input, .lp-field select { font-size: 16px; }
    button, .btn, .button, .logout-btn, .filter-tab, .qa-btn { min-height: 44px; }
    .navbar { padding: 16px; }
    .navbar-right { display: flex; }
    .page-shell { margin: 20px auto; padding: 0 14px; }
    .page-shell .hero { padding: 22px 18px; }
    .page-shell .hero h1 { font-size: 28px; }
    .kv-row { gap: 12px; align-items: flex-start; }
    .kv-val { text-align: right; }
    .sos-panel { flex-direction: column; text-align: center; }
    [data-map-list] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-map-embed], [data-map-canvas] { min-height: 240px !important; }
    body.mobile-shell { padding: 0; }
    .mobile-frame { width: 100%; border-radius: 0; min-height: 100dvh; }
    body:has(#home-title) > header { padding: 16px; gap: 16px; flex-wrap: wrap; }
    body:has(#home-title) > header nav { display: flex; flex-wrap: wrap; gap: 16px; }
    .hero-ctas { flex-wrap: wrap; }
}

@media (max-width: 380px) {
    .stat-grid, .stats { grid-template-columns: minmax(0, 1fr); }
    .otp-grid { gap: 5px; }
}

@media (max-height: 700px) {
    body:not(.dash-open):has(> .card) { align-items: flex-start; }
}

/* Current dashboards: keep overflow inside records, not the viewport. */
.dashboard .dash-main { min-width: 0; }
.dashboard .record-form > *, .dashboard .policy-links > * { min-width: 0; overflow-wrap: anywhere; }
.dashboard .record-form input:not([type=checkbox]):not([type=radio]),
.dashboard .record-form select, .dashboard .record-form textarea { width: 100%; }
.dashboard .table-wrap { max-width: 100%; }
.dashboard [data-map-consent] { overflow-wrap: anywhere; }
.dashboard [data-map-consent] button { margin: 4px 8px 4px 0; }
.dashboard [data-map-embed], .dashboard [data-map-canvas] {
    height: clamp(240px, 55vh, 480px) !important;
    height: clamp(240px, 55dvh, 480px) !important;
    max-height: none !important;
}
@media (max-width: 860px) {
    .dashboard .record-form { grid-template-columns: minmax(0, 1fr); }
    .dashboard .policy-links { gap: 8px 16px; }
    .dashboard .policy-links a { min-height: 44px; display: inline-flex; align-items: center; }
    .dashboard .dash-top .profile-chip, .dashboard .dash-top .vessel-chip { max-width: 100%; }
}
@media (max-height: 500px) {
    .dashboard .dash-main { max-height: none; overflow: visible; }
    .dashboard [data-map-embed], .dashboard [data-map-canvas] { height: 240px !important; }
}