/* Shared viewport bounds for template and dynamically created dialogs. */
:root {
    --window-gap: clamp(8px, 2vw, 20px);
    --window-height: calc(100vh - 2 * var(--window-gap));
}
@supports (height: 100dvh) {
    :root { --window-height: calc(100dvh - 2 * var(--window-gap)); }
}

:is(.modal-overlay, .modal, #photos-overlay, #row-override-modal,
    #budget-modal, #budget-status-panel, #off-resign-modal,
    #offline-order-modal, #custom-app-modal-overlay) {
    box-sizing: border-box;
    padding: var(--window-gap) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

:is(.modal-overlay, .modal, #photos-overlay, #row-override-modal,
    #budget-modal, #budget-status-panel, #off-resign-modal,
    #offline-order-modal, #custom-app-modal-overlay) > :is(div, form) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    max-height: var(--window-height) !important;
    flex-shrink: 0;
}

/* These cards do not use the shared header/body/footer structure. */
:is(#photos-overlay, #row-override-modal, #budget-modal,
    #budget-status-panel, #off-resign-modal, #custom-app-modal-overlay,
    #register-modal, #linked-invoice-register-modal, .modal) > div {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
.modal-body { min-height: 0; min-width: 0; }
.modal-header { gap: 0.75rem; }
.modal-header h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-footer { flex-wrap: wrap; gap: 0.5rem; }
:is(#photos-overlay, #row-override-modal, #budget-modal) input {
    min-width: 0;
    max-width: 100%;
}

/* Desktop widths can still have very little usable height. */
@media (min-width: 821px) and (max-height: 800px) {
    .container { padding: 1rem 1.5rem; }
    .category-explorer-container {
        height: min(650px, calc(100vh - 220px)) !important;
        height: min(650px, calc(100dvh - 220px)) !important;
        min-height: 260px;
    }
    .category-explorer-left, .category-explorer-right { min-height: 0; min-width: 0; }
}
@media (max-height: 700px) {
    .modal-header, .modal-footer { padding: 0.75rem 1rem !important; }
    .modal-body { padding: 1rem !important; }
    #custom-app-modal-box { padding: 1.25rem !important; }
    #custom-app-modal-message { font-size: 1rem !important; margin-bottom: 1rem !important; }
}

/* Keep desktop navigation out of the logo and account controls. */
@media (min-width: 821px) and (max-width: 1200px) {
    .admin-header-bar { height: auto; flex-direction: column; padding: 0.5rem 1rem; gap: 0.5rem; }
    .admin-header-nav { position: static; transform: none; flex-wrap: wrap; }
    .admin-header-top { min-width: 0; flex-wrap: wrap; gap: 0.5rem; }
    .admin-header-actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    :is(#photos-overlay, #row-override-modal, #budget-modal,
        #budget-status-panel, #off-resign-modal) > div { padding: 1rem !important; }
    .modal-header, .modal-footer { flex-wrap: wrap; }

    #off-single-entry-fields {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    #off-single-entry-fields > div:nth-child(1) { grid-column: 1; grid-row: 1; }
    #off-single-entry-fields > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    #off-single-entry-fields > div:nth-child(3) { grid-column: 2; grid-row: 1; }

    #offline-order-modal > .glass-card { padding: 12px !important; border-radius: 16px !important; }
    #offline-order-modal .offline-entry-header { padding: 10px 12px !important; margin-bottom: 0 !important; gap: 8px; flex-wrap: nowrap; }
    #offline-order-modal > .glass-card > .offline-entry-header { padding: 0 0 10px !important; }
    #offline-order-modal .offline-entry-header :is(h2, h3) { font-size: 1rem !important; line-height: 1.4; min-width: 0; }
    #offline-order-modal .offline-entry-header > div { gap: 6px !important; flex-shrink: 0; }
    #offline-order-modal #off-entry-mode-toggle { display: inline-flex; align-items: center; min-height: 40px; font-size: .7rem !important; text-decoration: none !important; }
    #offline-order-modal #btn-close-off-modal { width: 40px; height: 40px; padding: 0 !important; color: #64748b !important; }
    #offline-order-modal .offline-entry-body { padding: 10px 12px !important; gap: 10px !important; }
    #offline-order-modal > .glass-card > .offline-entry-body { padding: 0 !important; }
    #offline-order-modal #off-single-entry-fields > div { min-width: 0; display: flex; flex-direction: column; }
    #offline-order-modal #off-single-entry-fields label { display: block; flex: 1; line-height: 1.4; margin-bottom: 4px !important; }
    #offline-order-modal :is(#off-date, #off-dept, #off-amount, #off-contact-name, #off-contact-phone, #off-signed-at) { min-width: 0; min-height: 40px; height: 40px !important; }
    #offline-order-modal :is(#off-date, #off-amount) { display: block; width: 100%; max-width: 100%; box-sizing: border-box; flex-shrink: 0; }
    #offline-order-modal #off-date { padding: 4px 6px !important; overflow: hidden; -webkit-appearance: none; appearance: none; }
    #offline-order-modal #off-date::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    #offline-order-modal .offline-entry-options { padding: 10px !important; gap: 8px !important; border-radius: 10px !important; }
    #offline-order-modal .offline-entry-options > div:not(#off-contact-group):not(#off-photo-group) { gap: 6px; padding-bottom: 6px !important; }
    #offline-order-modal .offline-entry-options > div > .off-store-segment-container { width: min(62%, 190px) !important; flex-shrink: 0; }
    #offline-order-modal .off-store-text { min-height: 36px; box-sizing: border-box; }
    #offline-order-modal #off-contact-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    #offline-order-modal .offline-entry-footer { padding: 10px 12px !important; gap: 8px !important; }
    #offline-order-modal > .glass-card .offline-entry-footer { padding: 0 !important; margin-top: 4px !important; }
    #offline-order-modal .offline-entry-footer button { min-height: 40px; }
}