/* Shared native layout. Never hard-code the height of Android/iOS system bars.
   Capacitor's Android variables take precedence over WebView env() values.
   iOS uses env() with viewport-fit=cover and contentInset=never. */
html.kaigogest-native-app {
    --kg-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --kg-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --kg-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    --kg-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --kg-header-gutter: 28px;
    --kg-content-gutter: 28px;
}

/* Keep the opaque header background behind the status icons, with all header
   controls below them. Sticky headers retain this protection when scrolling. */
.kaigogest-native-app .topbar {
    /* Compiled legacy assets force the base header height with !important. */
    height: calc(var(--app-header-height) + var(--kg-safe-top)) !important;
    min-height: calc(var(--app-header-height) + var(--kg-safe-top)) !important;
    box-sizing: border-box;
    padding-top: var(--kg-safe-top);
    padding-left: calc(var(--kg-header-gutter) + var(--kg-safe-left));
    padding-right: calc(var(--kg-header-gutter) + var(--kg-safe-right));
    background: #fff;
}
.kaigogest-native-app .sidebar {
    padding-bottom: var(--kg-safe-bottom);
    padding-left: var(--kg-safe-left);
}
.kaigogest-native-app .sidebar .brand-box {
    height: calc(var(--app-header-height) + var(--kg-safe-top)) !important;
    min-height: calc(var(--app-header-height) + var(--kg-safe-top)) !important;
    flex-basis: calc(var(--app-header-height) + var(--kg-safe-top)) !important;
    padding-top: calc(16px + var(--kg-safe-top));
}
.kaigogest-native-app .page-content {
    padding-left: calc(var(--kg-content-gutter) + var(--kg-safe-left));
    padding-right: calc(var(--kg-content-gutter) + var(--kg-safe-right));
}

/* Fixed overlays have their own viewport; body padding cannot protect them. */
.kaigogest-native-app .offcanvas {
    top: var(--kg-safe-top);
    bottom: var(--kg-safe-bottom);
}
.kaigogest-native-app .offcanvas-start { left: var(--kg-safe-left); }
.kaigogest-native-app .offcanvas-end { right: var(--kg-safe-right); }
.kaigogest-native-app .offcanvas-start,
.kaigogest-native-app .offcanvas-end {
    max-width: calc(100vw - var(--kg-safe-left) - var(--kg-safe-right));
}
.kaigogest-native-app .offcanvas-top { bottom: auto; }
.kaigogest-native-app .offcanvas-bottom { top: auto; }
.kaigogest-native-app .offcanvas-top,
.kaigogest-native-app .offcanvas-bottom {
    left: var(--kg-safe-left);
    right: var(--kg-safe-right);
}
.kaigogest-native-app .modal {
    --kg-modal-margin-top: max(var(--bs-modal-margin, 1.75rem), calc(6px + var(--kg-safe-top)));
    --kg-modal-margin-bottom: max(var(--bs-modal-margin, 1.75rem), calc(6px + var(--kg-safe-bottom)));
    --kg-modal-height: calc(100dvh - var(--kg-modal-margin-top) - var(--kg-modal-margin-bottom));
    padding: 0 !important;
}
.kaigogest-native-app .modal .modal-dialog {
    margin-top: var(--kg-modal-margin-top) !important;
    margin-bottom: var(--kg-modal-margin-bottom) !important;
    max-width: min(var(--bs-modal-width, 500px), calc(100vw -
        max(var(--kg-safe-left), var(--kg-safe-right)) -
        max(var(--kg-safe-left), var(--kg-safe-right)) - 12px));
}
.kaigogest-native-app .modal .modal-dialog-centered {
    min-height: var(--kg-modal-height);
}
.kaigogest-native-app .modal .modal-dialog-scrollable {
    height: var(--kg-modal-height);
}
.kaigogest-native-app .modal .modal-content {
    max-height: var(--kg-modal-height) !important;
}
.kaigogest-native-app .swal2-container {
    padding-top: calc(.625em + var(--kg-safe-top));
    padding-bottom: calc(.625em + var(--kg-safe-bottom));
    padding-left: calc(.625em + var(--kg-safe-left));
    padding-right: calc(.625em + var(--kg-safe-right));
}

/* The login has no topbar, so its shell reserves the safe areas itself. */
.kaigogest-native-app .kg-login-shell {
    box-sizing: border-box;
    padding-top: var(--kg-safe-top);
    padding-bottom: var(--kg-safe-bottom);
    padding-left: var(--kg-safe-left);
    padding-right: var(--kg-safe-right);
}

@media (max-width: 991.98px) {
    html.kaigogest-native-app { --kg-header-gutter: 16px; --kg-content-gutter: 14px; }
    .kaigogest-native-app .sidebar .brand-box { padding-top: calc(12px + var(--kg-safe-top)); }
    .kaigogest-native-app .mobile-nav {
        height: calc(66px + var(--kg-safe-bottom));
        padding-bottom: var(--kg-safe-bottom);
        padding-left: calc(4px + var(--kg-safe-left));
        padding-right: calc(4px + var(--kg-safe-right));
    }
    .kaigogest-native-app .page-content { padding-bottom: calc(86px + var(--kg-safe-bottom)); }
    .kaigogest-native-app .sticky-form-footer { bottom: calc(78px + var(--kg-safe-bottom)); }
}
@media (max-width: 767.98px) {
    html.kaigogest-native-app { --kg-header-gutter: 10px; }
    .kaigogest-native-app .modal {
        --kg-modal-margin-top: calc(6px + var(--kg-safe-top));
        --kg-modal-margin-bottom: calc(6px + var(--kg-safe-bottom));
    }
    .kaigogest-native-app .modal .modal-dialog {
        max-width: none;
        height: calc(100dvh - var(--kg-safe-top) - var(--kg-safe-bottom) - 12px) !important;
        min-height: calc(100dvh - var(--kg-safe-top) - var(--kg-safe-bottom) - 12px) !important;
        margin: calc(6px + var(--kg-safe-top)) calc(6px + var(--kg-safe-right))
                calc(6px + var(--kg-safe-bottom)) calc(6px + var(--kg-safe-left)) !important;
    }
    .kaigogest-native-app .modal-content > form > .modal-footer,
    .kaigogest-native-app .modal-content > .modal-footer {
        /* Dialog bounds already exclude the bottom system bar. */
        padding-bottom: 10px;
    }
}

/* Native document preview deliberately fills the screen: inset its controls
   instead of shrinking the dialog, so each safe area is applied only once. */
html.kaigogest-native-app .document-preview-modal.is-native-document-preview .modal-dialog {
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
}
html.kaigogest-native-app .document-preview-modal.is-native-document-preview .modal-content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-left: var(--kg-safe-left);
    padding-right: var(--kg-safe-right);
}
html.kaigogest-native-app .document-preview-modal.is-native-document-preview .modal-header {
    padding-top: calc(13px + var(--kg-safe-top));
}
html.kaigogest-native-app .document-preview-modal.is-native-document-preview .modal-footer {
    padding-bottom: calc(10px + var(--kg-safe-bottom));
}