@charset "UTF-8";

/* Shared layout: the viewport width, rather than the device name, selects the layout. */
:root {
    --app-header-height: 3.75rem;
    --app-border: #e2e8f0;
    --app-ink: #1e293b;
    --app-blue: #244a98;
}

html { scroll-padding-top: calc(var(--app-header-height) + 1rem); }
body { overflow-wrap: break-word; }
#page-top { min-width: 0; width: 100%; min-height: 100vh; height: auto; color: var(--app-ink); }
#wrapper { min-width: 0; align-items: stretch; }
#wrapper #content-wrapper { min-width: 0; width: 100%; overflow: visible; }
#content { min-width: 0; }
#content > .container-fluid { min-width: 0; padding-top: .75rem; padding-bottom: 2rem; }
#content .row > [class*="col-"], #content .form-row > [class*="col-"] { min-width: 0; }
#content .card, #content .card-body { min-width: 0; }
#content img, #content video { max-width: 100%; height: auto; }
#content canvas { max-width: 100%; }
#content .form-control, .modal .form-control { max-width: 100%; }
.input-group { min-width: 0; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.skip-link { position: fixed; left: .75rem; top: -5rem; z-index: 1100; padding: .75rem 1rem; background: #173b7a; color: #fff; border-radius: .5rem; }
.skip-link:focus { top: .75rem; color: #fff; }

.topbar { min-height: var(--app-header-height); height: var(--app-header-height); padding: .25rem 1rem; gap: 1rem; border-bottom: 1px solid var(--app-border); }
.app-brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.app-brand img { width: 185px; height: auto; max-height: 2.5rem; }
.app-page-title { min-width: 0; flex: 1 1 auto; font-weight: 700; color: #172554; font-size: 1rem; }
.topbar .navbar-nav { flex: 0 0 auto; }
.topbar .nav-item .nav-link { height: 3rem; padding-left: .5rem; padding-right: .5rem; }
.topbar .dropdown-menu { max-width: calc(100vw - 1rem); }
.account-summary { max-width: 22rem; white-space: normal; }
.mobile-menu-toggle, .mobile-menu-header, .mobile-menu-backdrop { display: none; }
.sidebar { flex-shrink: 0; min-height: calc(100vh - var(--app-header-height)); background: #fff; border-right: 1px solid var(--app-border); }
.sidebar .sidebar-heading { text-align: left; line-height: 1.5; padding-top: .5rem; padding-bottom: .5rem; }
.sidebar:not(.toggled) .nav-item .nav-link { text-align: left; padding: .75rem 1rem; }
.sidebar:not(.toggled) .nav-item .nav-link span { display: inline; font-size: .85rem; }
.sidebar .nav-link[aria-current="page"] { color: #183f87; background: #eaf0ff; border-left: 3px solid #315bbb; font-weight: 700; }
.sidebar .nav-link[aria-current="page"] i { color: #315bbb; }

/* Wide records stay in an independently scrollable region, never widening the page. */
.table-responsive, .responsive-table, .table-wrap, .picker-list-wrap, .center-list-wrap {
    min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.responsive-table { width: 100%; }
.table-scroll-hint { display: none; padding: .5rem .75rem; font-size: .75rem; color: #475569; background: #f1f5f9; border-bottom: 1px solid var(--app-border); }
.table-scroll-hint.is-visible { display: block; }
.table-overflow:focus-visible { outline-offset: -3px; }
.modal-body { min-width: 0; }

/* The login screen also works on small phones and with the software keyboard open. */
.login_Form { min-width: 0; height: auto; margin: clamp(2rem, 9vh, 7rem) 0 2rem; padding: 0 .25rem; }
.login_wrapper { width: min(100%, 390px); max-width: 100%; padding: 2rem; }
.login_wrapper .login-btn .btn { width: 100%; min-height: 3rem; margin: 0; }

@media screen and (max-width: 991.98px) {
    .topbar { position: sticky; top: 0; z-index: 1030; gap: .65rem; padding-left: .65rem; padding-right: .65rem; }
    .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--app-border); border-radius: .5rem; color: #173b7a; }
    .app-brand img { width: 145px; }
    #accordionSidebar, #accordionSidebar.toggled {
        position: fixed; z-index: 1045; top: 0; bottom: 0; left: 0; width: 19rem !important;
        max-width: calc(100vw - 2.5rem); min-height: 0; height: 100vh; height: 100dvh;
        margin: 0; padding: 0 0 1.5rem; overflow-y: auto; overscroll-behavior: contain;
        background: #fff; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: .5rem 0 2rem rgba(15, 23, 42, .16);
    }
    .mobile-menu-open #accordionSidebar { visibility: visible; transform: translateX(0); }
    body.mobile-menu-open { overflow: hidden; }
    .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; min-height: var(--app-header-height); border-bottom: 1px solid var(--app-border); color: #173b7a; }
    .mobile-menu-header .btn { width: 44px; height: 44px; margin: 0; }
    .mobile-menu-backdrop:not([hidden]) { display: block; position: fixed; z-index: 1040; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(15, 23, 42, .45); }
    #accordionSidebar .nav-item .nav-link { width: 100%; display: block; text-align: left; padding: .85rem 1rem; min-height: 44px; }
    #accordionSidebar .nav-item .nav-link i { margin-right: .5rem; font-size: .9rem; }
    #accordionSidebar .nav-item .nav-link span { display: inline; font-size: .9rem; }
    #accordionSidebar .sidebar-heading { display: block; text-align: left; min-height: 44px; padding: .75rem 1rem; }
    #accordionSidebar .collapse { position: static; }
    #accordionSidebar #sidebarToggle { display: none; }
    #content > .container-fluid { padding-left: 1rem; padding-right: 1rem; }
    #content > .container-fluid > .d-flex, #content .card-header.d-flex { flex-wrap: wrap; gap: .65rem; }
    #content .management-page .card-header > .input-group { width: 100% !important; max-width: 100% !important; }
    #content .form-inline { gap: .5rem; }
    #content .form-inline > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #content .form-inline .form-control { margin-top: .25rem; margin-bottom: .25rem; }
    #content .btn, .modal .btn { min-height: 44px; }
    #content .form-control, .modal .form-control { min-height: 44px; font-size: 16px !important; }
    #content input[type="checkbox"], .modal input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; }
    #content input[type="radio"], .modal input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; }
    .responsive-data-table { min-width: var(--responsive-table-width, 600px); }
    #content .responsive-data-table th, .modal .responsive-data-table th { white-space: nowrap; }
    #content .responsive-data-table td, .modal .responsive-data-table td { font-size: .8125rem; line-height: 1.5; }
    #content .responsive-data-table td .btn, .modal .responsive-data-table td .btn { font-size: .8125rem; }
    #content h1, #content h2 { font-size: 1.4rem; line-height: 1.4; }
    #content h4 { font-size: 1.1rem; }
    #content .invoice-sheet { padding: 1rem; }
    #content .invoice-title { font-size: 1.5rem; letter-spacing: .1rem; }
    #content .work-block > .d-flex { flex-wrap: wrap; gap: .5rem; }
    #ascode-container .form-inline-row > .form-group, #prodModal .form-inline-row > .form-group { flex: 1 1 12rem; min-width: 0; }
    #ascode-container .fld, #ascode-container #selPrdgrp, #prodModal .fld { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
    #ascode-container .btn-row, #prodModal .btn-row { flex-wrap: wrap; }
    #prodModal { overflow-y: auto; overscroll-behavior: contain; }
    #prodModal > .inner { width: calc(100% - 1rem) !important; max-width: none !important; margin: .5rem auto !important; padding: 1rem !important; }
    #prodModal .inner > .d-flex { flex-wrap: wrap; gap: .5rem; }
    #chartWrap { width: 100% !important; }
    #chartWrap canvas { max-width: 100%; }
    .modal-dialog { width: calc(100% - 1rem) !important; max-width: none !important; margin: .5rem !important; }
    .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
    .modal-body { overflow-y: auto; overscroll-behavior-y: contain; }
    .modal-header, .modal-footer { flex-shrink: 0; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-header .close { min-width: 44px; min-height: 44px; }
}

@media screen and (max-width: 575.98px) {
    .topbar { gap: .35rem; padding-left: .4rem; padding-right: .4rem; }
    .app-brand img { width: 108px; }
    .app-page-title { font-size: .8rem; line-height: 1.35; }
    .topbar .nav-item .nav-link { padding: .25rem; }
    .topbar .nav-item .nav-link .ml-2 { margin-left: .25rem !important; }
    #content > .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
    #content .card-body { padding: 1rem; }
    #content .card-body.p-0 { padding: 0 !important; }
    #content .form-inline { align-items: stretch; }
    #content .form-inline > .form-control { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
    #content .form-inline > label { justify-content: flex-start; width: 100%; }
    #rcp-container .form-inline { width: 100%; }
    #rcp-container .form-inline > [class*="col-"] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0; }
    #rcp-container .form-inline > [class*="col-"] > .form-control { flex: 1 1 10rem; width: auto; min-width: 0; margin: 0 !important; }
    #rcp-container .form-inline > [class*="col-"] > .btn { margin: 0 !important; }
    #rcp-container .form-inline > [class*="col-"] > font { width: 100%; }
    #rcp-container .row { margin-bottom: .75rem !important; }
    #content .form-inline #btnArea { display: flex; flex-wrap: wrap; gap: .5rem; }
    #content .form-inline #btnArea .btn { margin: 0 !important; }
    #content .dataTables_wrapper .dataTables_length, #content .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin: .5rem 0; }
    #content .dataTables_wrapper .dataTables_filter input { max-width: 65%; min-height: 40px; font-size: 16px; }
    #content .dataTables_wrapper .dataTables_paginate { float: none; text-align: left; display: flex; flex-wrap: wrap; align-items: center; }
    #content .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; min-height: 40px; padding: .5rem; }
    #content .error { width: auto; font-size: 5rem; }
    .login_wrapper { padding: 1.5rem; border-radius: 1rem; }
    .login_Form { margin-top: 2rem; }
}

/* The survey page is standalone and intentionally keeps its existing print layout. */
@media screen and (max-width: 991.98px) {
    .survey-page .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .survey-page .count-card { grid-column: span 1; }
    .survey-page .avg-card, .survey-page .total-avg-card { grid-column: 1 / -1; }
    .survey-page .survey-table { min-width: 1100px; }
}
@media screen and (max-width: 575.98px) {
    .survey-page .page-container { padding: .75rem; }
    .survey-page .page-title { font-size: 1.5rem; }
    .survey-page .toolbar { padding: 1rem; }
    .survey-page .field-box { min-width: 0; width: 100%; }
    .survey-page .field-box input { width: 100%; min-height: 44px; font-size: 16px; }
    .survey-page .button-row { width: 100%; }
    .survey-page .button-row .btn { flex: 1 1 45%; height: auto; min-height: 44px; padding: .5rem; }
    .survey-page .summary-grid { grid-template-columns: minmax(0, 1fr); }
    .survey-page .summary-card { grid-column: 1 / -1; padding: 1rem; }
    .survey-page .section-header, .survey-page .chart-header { align-items: flex-start; flex-wrap: wrap; padding: 1rem; }
    .survey-page .chart-body { padding: .75rem; }
    .survey-page .row-print-link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    #accordionSidebar { transition: none; }
    html { scroll-behavior: auto; }
}
@media print {
    .skip-link, .mobile-menu-toggle, .mobile-menu-header, .mobile-menu-backdrop, .table-scroll-hint, .scroll-to-top { display: none !important; }
    body.mobile-menu-open { overflow: visible; }
    #accordionSidebar { transform: none; }
    .responsive-table { overflow: visible; }
    .responsive-data-table { min-width: 0; }
}

/* Mobile application shell. Desktop tables and forms retain their original DOM and layout. */
.app-page-caption, .app-bottom-nav, .app-filter-trigger, .app-filter-heading,
.app-filter-footer, .app-record-toolbar, .app-record-more, .app-mobile-action { display: none; }
.app-filter-sheet { display: contents; border: 0; padding: 0; margin: 0; color: inherit; }
.app-install { list-style: none; padding: .75rem; }
.app-install > button { display: flex; align-items: center; gap: .75rem; width: 100%; border: 1px solid #dce5f1; border-radius: .75rem; background: #f2f6fd; color: #244a98; padding: .75rem; text-align: left; font-weight: 700; }
.app-install small { display: block; margin-top: .2rem; color: #64748b; font-weight: 400; }
.app-install-guide { width: min(26rem, calc(100% - 2rem)); border: 0; border-radius: 1rem; padding: 1.5rem; color: #1e293b; box-shadow: 0 1rem 4rem #17255433; }
.app-install-guide::backdrop { background: #0f172a80; }
.app-install-guide h2 { font-size: 1.25rem; font-weight: 700; }
.app-install-guide .btn { width: 100%; min-height: 44px; }

@media screen and (max-width: 991.98px) {
    :root { --app-header-height: 4rem; --app-tab-height: calc(4rem + env(safe-area-inset-bottom, 0px)); }
    html, body { max-width: 100%; min-width: 0; }
    body { background: #f4f7fb; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
    #wrapper, #wrapper #content-wrapper, #content { width: 100%; max-width: 100%; min-width: 0; }
    body.has-app-navigation #content { padding-bottom: calc(var(--app-tab-height) + 1rem); }
    .topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--app-header-height) + env(safe-area-inset-top, 0px)); min-height: calc(var(--app-header-height) + env(safe-area-inset-top, 0px)); background: #fff !important; box-shadow: 0 2px 8px #20345708 !important; }
    .topbar .app-brand { display: none; }
    .topbar .app-page-title { margin: 0; font-size: 1.05rem; line-height: 1.4; color: #152c50; }
    .app-page-caption { display: block; font-size: .64rem; letter-spacing: .04rem; color: #64748b; font-weight: 400; }
    .app-current-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-menu-toggle { border: 0; border-radius: .75rem; font-size: 1.1rem; }
    .topbar .img-profile { width: 2rem; height: 2rem; }
    .topbar .fa-angle-down { display: none; }
    .app-bottom-nav { position: fixed; z-index: 1035; inset: auto 0 0; display: flex; align-items: stretch; justify-content: space-around; width: 100%; height: var(--app-tab-height); padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e0e7f0; box-shadow: 0 -3px 18px #21385708; }
    .app-bottom-nav > a, .app-bottom-nav > button { display: flex; flex: 1 1 0; flex-direction: column; gap: .25rem; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: .2rem; border: 0; border-radius: .65rem; background: transparent; color: #7b879b; font-size: .68rem; line-height: 1.25; font-weight: 600; text-decoration: none; }
    .app-bottom-nav i { font-size: 1.15rem; }
    .app-bottom-nav [aria-current="page"], .app-bottom-nav [aria-expanded="true"] { color: #244a98; background: #edf3ff; }
    body.as-detail-open .app-bottom-nav, body.modal-open .app-bottom-nav, body.app-filter-open .app-bottom-nav, body.app-custom-modal-open .app-bottom-nav { display: none; }
    body.as-detail-open #content { padding-bottom: 0; }
    .scroll-to-top { bottom: calc(var(--app-tab-height) + .75rem); right: .75rem; }
    #content > .container-fluid { padding-top: .75rem; }
    #content .card { border: 1px solid #e1e8f2; border-radius: .85rem; box-shadow: 0 2px 7px #142f5305 !important; overflow: visible; }
    #content .card-header { border-radius: .85rem .85rem 0 0; background: #fff; }
    #content .card-body { padding: .85rem; }
    #content .form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #content .form-control, .app-modal-screen .form-control { border-radius: .55rem; min-width: 0; }
    #content .btn { border-radius: .55rem; font-size: .85rem; }
    #content .input-group { flex-wrap: wrap; max-width: 100%; }
    #content .input-group > .form-control { min-width: 0; }
    #content .input-group-append { max-width: 100%; }
    .app-filter-trigger { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem .5rem; width: 100%; min-height: 66px; border: 1px solid #dbe4f0; border-radius: .8rem; margin: 0 0 .85rem; padding: .75rem .9rem; background: #fff; color: #203b66; text-align: left; }
    .app-filter-trigger > span { font-size: .9rem; font-weight: 700; }
    .app-filter-trigger > span > i { margin-right: .35rem; color: #5273a5; }
    .app-filter-summary { grid-column: 1; font-size: .73rem; color: #758196; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .app-filter-trigger > .fa-chevron-right { grid-column: 2; grid-row: 1 / 3; font-size: .8rem; color: #9ba9bd; }
    .app-filter-host { display: contents !important; }
    .app-filter-sheet:not([open]) { display: none !important; }
    .app-filter-sheet[open] { display: flex; flex-direction: column; position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: min(92vh, 850px); max-height: min(92dvh, 850px); margin: 0; padding: 0; border: 0; border-radius: 1.1rem 1.1rem 0 0; background: #fff; color: #1e293b; overflow: hidden; box-shadow: 0 -1rem 4rem #15274926; }
    .app-filter-sheet::backdrop { background: #14263e80; }
    .app-filter-heading { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: .65rem 1rem; border-bottom: 1px solid #e5ebf4; }
    .app-filter-close { min-width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 1.7rem; border: 0; border-radius: .5rem; background: transparent; color: #52627a; }
    .app-filter-fields { min-width: 0; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; font-size: .85rem; }
    .app-filter-fields .form-inline, .app-filter-fields .form-inline-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: stretch; }
    .app-filter-fields .form-inline > [class*="col-"], .app-filter-fields .form-inline > .form-control, .app-filter-fields .form-group { flex: 1 1 100% !important; max-width: 100% !important; padding: 0; margin: 0 0 .65rem !important; }
    .app-filter-fields .form-inline > [class*="col-"] { display: flex; flex-wrap: wrap; gap: .65rem; }
    .app-filter-fields .form-inline > [class*="col-"] > .form-control { flex: 1 1 100%; width: 100% !important; margin: 0 !important; }
    .app-filter-fields .form-control { min-height: 48px; font-size: 16px !important; border-radius: .55rem; max-width: 100%; }
    .app-filter-fields .btn { min-height: 44px; font-size: .9rem; border-radius: .5rem; }
    .app-filter-fields .form-row { margin: 0; }
    .app-filter-fields .form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
    .app-filter-fields label { display: block; margin: 0 0 .35rem; text-align: left; }
    .app-filter-footer { display: block; flex: 0 0 auto; border-top: 1px solid #e5ebf4; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); }
    .app-filter-footer .btn { min-height: 48px; width: 100%; border-radius: .6rem; }
    body.app-filter-open, body.app-custom-modal-open { overflow: hidden; }
    .app-filter-desktop-action { display: none !important; }
    .app-mobile-action { display: block; width: 100%; min-height: 46px; margin: 0 0 .85rem; }

    /* Each original record becomes a labeled touch card; action inputs and row handlers stay live. */
    #content .app-record-region, .app-modal-screen .app-record-region { overflow: visible !important; border: 0; max-height: none; }
    .app-record-region + .table-scroll-hint, .table-scroll-hint:has(+ .app-record-region) { display: none !important; }
    #content table.app-record-table, .app-modal-screen table.app-record-table { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0; border: 0; table-layout: auto; background: transparent; }
    .app-record-table > thead, .app-record-table > colgroup, .app-record-table .app-record-header-row { display: none !important; }
    #content .app-record-table > tbody, .app-modal-screen .app-record-table > tbody { display: grid; gap: .8rem; width: 100%; }
    #content .app-record-table > tbody > tr:not(.app-record-header-row), .app-modal-screen .app-record-table > tbody > tr:not(.app-record-header-row) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: .65rem .85rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid #dce5f1; border-radius: .8rem; background: #fff; color: #263750; box-shadow: 0 2px 6px #142f5305; }
    #content .app-record-table .app-record-cell, .app-modal-screen .app-record-table .app-record-cell { display: block; width: auto !important; min-width: 0; max-width: 100%; margin: 0; padding: 0 !important; border: 0 !important; background: transparent; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; font-size: .85rem !important; line-height: 1.5; }
    .app-record-cell::before { display: block; content: attr(data-label); color: #7a879b; font-size: .67rem; font-weight: 400; margin-bottom: .1rem; }
    .app-record-table .app-record-key { grid-column: 1 / -1; padding-right: 2.1rem !important; font-weight: 700; font-size: 1.02rem !important; color: #214579; }
    .app-record-table .app-record-select { position: absolute; top: .9rem; right: 1rem; width: 24px !important; }
    .app-record-table .app-record-select::before { display: none; }
    .app-record-table .app-record-select input { width: 22px; height: 22px; accent-color: #244a98; }
    .app-record-table .app-record-wide, .app-record-table .app-record-control, .app-record-table .app-record-tail { grid-column: 1 / -1; }
    #content .app-record-table .app-record-extra:not(.app-record-tail), .app-modal-screen .app-record-table .app-record-extra:not(.app-record-tail) { display: none; }
    #content .app-record-table .app-record-expanded .app-record-extra, .app-modal-screen .app-record-table .app-record-expanded .app-record-extra { display: block; }
    .app-record-more { display: block; width: 100%; min-height: 44px; margin: .65rem 0 -.3rem; border: 0; border-top: 1px solid #e8eef6; padding: .65rem 0 .25rem; background: transparent; color: #43679b; font-size: .77rem; font-weight: 600; text-align: center; }
    .app-record-more::after { content: attr(aria-label); }
    #content .app-record-table > tbody > tr:has(input[type="checkbox"]:checked) { border-color: #6489c7; background: #f6f9ff; }
    .app-record-toolbar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
    .app-record-toolbar .app-record-sort { flex: 1 1 9rem; width: auto; max-width: 100%; min-height: 44px; font-size: .8rem !important; }
    .app-record-toolbar .app-record-sort[hidden] { display: none; }
    .app-record-table .app-record-empty { display: block !important; text-align: center; }
    .app-record-empty td { display: block; width: 100% !important; border: 0; }
    .app-record-table > tfoot { display: block; width: 100%; padding: .75rem; background: #edf3fc; }
    .app-record-table > tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
    .app-record-table > tfoot th, .app-record-table > tfoot td { display: block; border: 0; min-width: 0; padding: .25rem; font-size: .8rem; }
    #content .dataTables_wrapper { min-width: 0; max-width: 100%; }
    #content .dataTables_filter input { border: 1px solid #d4dfed; border-radius: .5rem; background: #fff; }
    #content .dataTables_info { font-size: .75rem; color: #78869a; }

    /* All dialogs cover the actual viewport, including modals opened from transformed workspaces. */
    body > .app-modal-screen.modal { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; transform: none !important; }
    body > .app-modal-screen .modal-dialog { display: flex; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100%; min-height: 100%; margin: 0 !important; padding: 0; transform: none !important; transition: none !important; }
    body > .app-modal-screen .modal-content { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; height: 100%; max-height: 100vh !important; max-height: 100dvh !important; border: 0; border-radius: 0 !important; overflow: hidden; }
    body > .app-modal-screen .modal-header { flex: 0 0 auto; align-items: center; padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .7rem; }
    body > .app-modal-screen .modal-title { font-size: 1.05rem; font-weight: 700; }
    body > .app-modal-screen .modal-header .close { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -.25rem -.4rem -.25rem 0; padding: 0; font-size: 1.7rem; }
    body > .app-modal-screen .modal-body { flex: 1 1 auto; min-height: 0; min-width: 0; padding: 1rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    body > .app-modal-screen .modal-footer { flex: 0 0 auto; min-width: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); margin: 0; background: #fff; }
    body > .app-modal-screen .modal-footer .btn { min-height: 44px; border-radius: .5rem; }
    body > .app-modal-screen .row > [class*="col-"] { min-width: 0; }
    body > .app-modal-screen img { max-width: 100%; object-fit: contain; }
    body > .app-modal-screen .support-photo-preview { height: 180px; }
    body > .app-modal-screen .support-gallery img { height: 120px; }
    body > #prodModal.app-modal-screen { inset: 0 !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; max-width: 100%; padding: 0 !important; overflow: hidden !important; }
    body > #prodModal.app-modal-screen > .inner { display: flex; flex-direction: column; width: 100% !important; height: 100%; max-width: 100% !important; max-height: 100%; min-width: 0; margin: 0 !important; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0; overflow-y: auto; }
    #accordionSidebar .mobile-menu-header { padding-top: env(safe-area-inset-top, 0px); }
    #accordionSidebar { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

@media print {
    .app-bottom-nav, .app-filter-trigger, .app-filter-heading, .app-filter-footer,
    .app-record-toolbar, .app-record-more, .app-install, .app-install-guide, .app-mobile-action { display: none !important; }
    .app-filter-sheet { display: contents !important; }
    body.has-app-navigation #content { padding-bottom: 0; }
}