:root {
    --ipro-viewport-width: 100vw;
    --ipro-viewport-height: 100vh;
    --ipro-screen-width: 100vw;
    --ipro-screen-height: 100vh;
    --ipro-device-pixel-ratio: 1;
    --ipro-layout-gutter: clamp(12px, 2.2vw, 28px);
    --ipro-safe-top: env(safe-area-inset-top, 0px);
    --ipro-safe-right: env(safe-area-inset-right, 0px);
    --ipro-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ipro-safe-left: env(safe-area-inset-left, 0px);
}

html,
body,
app-root {
    width: 100%;
    min-width: 0;
    min-height: var(--ipro-viewport-height);
}

body.app-native-shell {
    overflow-x: hidden;
    overscroll-behavior: none;
}

.app-native-shell .page,
.app-native-shell .page-wrapper,
.app-native-shell .page-body {
    min-width: 0;
    max-width: 100%;
}

.app-native-shell .page {
    min-height: var(--ipro-viewport-height);
}

.app-native-shell .app-startup-loading {
    min-height: var(--ipro-viewport-height);
    padding-top: max(24px, var(--ipro-safe-top));
    padding-right: max(24px, var(--ipro-safe-right));
    padding-bottom: max(24px, var(--ipro-safe-bottom));
    padding-left: max(24px, var(--ipro-safe-left));
}

.app-native-shell .page-body > .container,
.app-native-shell .page-body > .container-fluid,
.app-native-shell .page-body > .container-sm,
.app-native-shell .page-body > .container-md,
.app-native-shell .page-body > .container-lg,
.app-native-shell .page-body > .container-xl,
.app-native-shell .page-body > .container-xxl {
    max-width: 100%;
    padding-right: max(var(--ipro-layout-gutter), var(--ipro-safe-right));
    padding-left: max(var(--ipro-layout-gutter), var(--ipro-safe-left));
}

.app-native-shell .table-responsive,
.app-native-shell .overflow-auto,
.app-native-shell .overflow-x-auto {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.app-native-shell .modal-content {
    max-height: calc(var(--ipro-viewport-height) - max(24px, var(--ipro-safe-top)) - max(24px, var(--ipro-safe-bottom)));
}

.app-native-shell .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-native-shell #toast-container > div {
    max-width: calc(var(--ipro-viewport-width) - 24px);
}

:root[data-ipro-viewport="narrow"] {
    --ipro-layout-gutter: 12px;
    --tblr-page-padding: 12px;
}

:root[data-ipro-viewport="narrow"] .app-native-shell {
    font-size: 13px;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(h1, .page-title, .header-title, .main-title, .view-title) {
    font-size: 18px !important;
    line-height: 1.3 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(h2, .section-title, .project-title, .facility-title, .modal-title) {
    font-size: 16px !important;
    line-height: 1.35 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(h3, .card-title, .offline-cache-title, .sync-conflict-title) {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(.header-subtitle, .modal-subtitle, .meta-text, .info-text, .sub-text, .field-label, .detail-label) {
    font-size: 11px !important;
    line-height: 1.45 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(
    .btn,
    .add-btn,
    .action-button,
    .cache-action-btn,
    .drawing-empty-btn,
    .modal-btn,
    .photo-action-btn,
    .share-button,
    .share-cancel-button,
    .share-save-button,
    .save-form-btn,
    .btn-action,
    .btn-cancel,
    .btn-save,
    .btn-submit,
    .btn-edit
) {
    min-height: 36px;
    padding: 7px 10px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(.form-control, .form-select, .text-input, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 13px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(.form-control, .form-select, .text-input, input:not([type="checkbox"]):not([type="radio"])) {
    min-height: 38px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(.top-app-bar .nav-btn, .top-app-bar .action-btn, .icon-button, .back-icon-btn, .page-btn) {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .page-dot {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell :where(.header-main-row, .header-actions, .drawing-actions, .form-actions, .modal-buttons, .offline-cache-actions) {
    min-width: 0;
    gap: 6px !important;
    flex-wrap: wrap;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .header-actions {
    margin-left: auto;
    justify-content: flex-end;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .search-group {
    height: 38px !important;
    max-width: 100%;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .page-body .row {
    min-width: 0;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .page-body .grid-cols-2,
:root[data-ipro-viewport="narrow"] .app-native-shell .page-body .grid-cols-3,
:root[data-ipro-viewport="narrow"] .app-native-shell .page-body .grid-cols-4 {
    grid-template-columns: minmax(0, 1fr);
}

:root[data-ipro-viewport="narrow"] .app-native-shell .modal-dialog {
    width: auto;
    margin: max(8px, var(--ipro-safe-top)) max(8px, var(--ipro-safe-right)) max(8px, var(--ipro-safe-bottom)) max(8px, var(--ipro-safe-left));
}

:root[data-ipro-viewport="narrow"] .app-native-shell .offcanvas {
    max-width: calc(var(--ipro-viewport-width) - var(--ipro-safe-left) - var(--ipro-safe-right));
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .card,
:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .modal-content {
    border-radius: 10px;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .auth-content {
    padding: max(12px, var(--ipro-safe-top)) max(12px, var(--ipro-safe-right)) max(12px, var(--ipro-safe-bottom)) max(12px, var(--ipro-safe-left)) !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .auth-card {
    padding: 22px !important;
    border-radius: 16px !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell :where(.login-input, .login-submit, .isri-login-button) {
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .login-form {
    gap: 12px !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .login-option {
    gap: 8px !important;
    min-height: 42px;
    padding: 8px 10px !important;
    border-radius: 10px !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .login-option-title {
    font-size: 12px !important;
}

:root[data-ipro-orientation="portrait"][data-ipro-device="compact"] .app-native-shell .login-option-desc {
    font-size: 10px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container {
    height: auto !important;
    min-height: 100% !important;
    padding: max(16px, var(--ipro-safe-top)) max(14px, var(--ipro-safe-right)) max(16px, var(--ipro-safe-bottom)) max(14px, var(--ipro-safe-left)) !important;
    gap: 16px !important;
    overflow-y: auto;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(190px, 1fr));
    gap: 12px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card {
    min-height: 190px;
    border-radius: 20px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .card-content {
    padding: 18px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .icon-surface {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .icon-surface i {
    font-size: 20px !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .text-group h3 {
    margin-bottom: 8px !important;
    font-size: clamp(20px, 5.4vw, 24px) !important;
    line-height: 1.25 !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .text-group p {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

:root[data-ipro-orientation="portrait"] .app-native-shell .home-container .md-card .card-footer {
    margin-top: 12px !important;
    font-size: 13px !important;
}

.app-native-shell .facilities-page .top-app-bar,
.app-native-shell .facilities-page .header-title-row,
.app-native-shell .facilities-page .facility-main,
.app-native-shell .facilities-page .facility-info,
.app-native-shell .facilities-page .facility-meta {
    min-width: 0;
}

.app-native-shell .facilities-page .header-title-row {
    overflow: hidden;
}

.app-native-shell .facilities-page .header-title-row .header-title,
.app-native-shell .facilities-page .header-title-row .header-subtitle {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-native-shell .facilities-page .search-group {
    flex: 0 1 260px;
    min-width: 160px;
}

.app-native-shell .facilities-page .facility-meta .meta-badge:first-child {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-native-shell .facilities-page .facility-meta .checklist-badge {
    flex-shrink: 0;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .header-container {
    padding: 8px 12px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .top-app-bar {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px 8px !important;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .top-app-bar .nav-btn {
    grid-column: 1;
    grid-row: 1;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .header-title-row {
    grid-column: 2;
    grid-row: 1;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .search-group {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
}

:root[data-ipro-viewport="narrow"] .app-native-shell .facilities-page .scaffold-content {
    padding: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"],
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] {
    --ipro-layout-gutter: 14px;
    --tblr-page-padding: 14px;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell {
    font-size: 12px;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(h1, .page-title, .header-title, .main-title, .view-title) {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(h2, .section-title, .project-title, .facility-title, .modal-title) {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(
    .btn,
    .add-btn,
    .action-button,
    .cache-action-btn,
    .drawing-empty-btn,
    .modal-btn,
    .photo-action-btn,
    .share-button,
    .share-cancel-button,
    .share-save-button,
    .save-form-btn,
    .btn-action,
    .btn-cancel,
    .btn-save,
    .btn-submit,
    .btn-edit
) {
    min-height: 34px;
    padding: 6px 9px !important;
    gap: 5px !important;
    font-size: 11px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.form-control, .form-select, .text-input, input:not([type="checkbox"]):not([type="radio"])) {
    min-height: 36px;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.top-app-bar .nav-btn, .top-app-bar .action-btn, .icon-button, .back-icon-btn, .page-btn) {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.top-app-bar, .content-header, .view-header) {
    min-height: 44px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.header-main-row, .header-actions, .drawing-actions, .form-actions, .modal-buttons, .offline-cache-actions) {
    gap: 5px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .auth-content {
    align-items: flex-start !important;
    padding: max(8px, var(--ipro-safe-top)) max(10px, var(--ipro-safe-right)) max(8px, var(--ipro-safe-bottom)) max(10px, var(--ipro-safe-left)) !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .auth-card {
    max-width: 420px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .login-header {
    margin-bottom: 8px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .isri-brand-logo {
    display: none !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .isri-brand-title {
    margin-top: 0 !important;
    font-size: 16px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.isri-brand-subtitle, .login-footer, .login-option-desc) {
    display: none !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .isri-login-section-title {
    margin-bottom: 8px !important;
    font-size: 16px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell :where(.login-input, .login-submit, .isri-login-button) {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .login-form {
    gap: 8px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .login-option {
    align-items: center !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .home-container {
    padding: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .home-content {
    gap: 12px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .card-item {
    min-height: 160px !important;
    height: auto !important;
    padding: 16px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .header-section .main-title span:nth-child(2) {
    font-size: 28px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .text-area h2 {
    font-size: 18px !important;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .page-header,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .page-header {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .card-header,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .card-header {
    min-height: 0;
    padding: 8px 12px;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .card-body,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .card-body {
    padding: 10px 12px;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .modal-dialog,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .modal-dialog {
    margin-top: max(6px, var(--ipro-safe-top));
    margin-bottom: max(6px, var(--ipro-safe-bottom));
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .app-startup-loading,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .app-startup-loading {
    padding-top: max(12px, var(--ipro-safe-top));
    padding-bottom: max(12px, var(--ipro-safe-bottom));
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .app-startup-loading__brand,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .app-startup-loading__brand {
    margin-bottom: 14px;
}

:root[data-ipro-orientation="landscape"][data-ipro-device="compact"] .app-native-shell .app-startup-loading__spinner,
:root[data-ipro-orientation="landscape"][data-ipro-viewport-height="short"] .app-native-shell .app-startup-loading__spinner {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .app-native-shell *,
    .app-native-shell *::before,
    .app-native-shell *::after {
        scroll-behavior: auto !important;
    }
}