/* Shared responsive behavior for kiosk/admin pages */
*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --app-gutter: clamp(8px, 2.2vw, 16px);
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
    height: auto;
}

iframe {
    border: 0;
}

table {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.container,
.container-fluid {
    padding-left: max(var(--app-gutter), var(--safe-left));
    padding-right: max(var(--app-gutter), var(--safe-right));
}

.page-header,
.panel,
.card,
.section-card,
.page-shell,
.toolbar {
    max-width: 100%;
}

.brand-subtitle,
.shortcut-hint {
    overflow-wrap: anywhere;
}

.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.table-responsive > .table {
    width: max-content;
    min-width: 100%;
}

.table-responsive.table-wide > table,
.table-responsive.table-wide > .table {
    min-width: 920px;
}

.input-group,
.form-control,
.form-select {
    max-width: 100%;
    min-width: 0;
}

.d-flex.gap-1,
.d-flex.gap-2,
.d-flex.gap-3,
.d-flex.gap-4 {
    flex-wrap: wrap;
}

.modal {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
}

.modal-dialog {
    margin: clamp(0.4rem, 2vw, 0.9rem) auto;
    width: min(calc(100vw - 1rem - var(--safe-left) - var(--safe-right)), 100%);
}

.modal-content {
    max-height: calc(100dvh - 1rem - var(--safe-top) - var(--safe-bottom));
}

.timeout-feedback-modal,
.timeout-modal,
.document-transmittal-modal,
.transmittal-popup-modal,
.admin-create-modal,
.complete-signature-modal,
.signature-capture-modal,
.transmittal-update-modal {
    max-width: min(96vw, 1100px);
}

.modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    gap: 0.5rem;
    padding-bottom: calc(0.75rem + var(--safe-bottom));
}

.btn,
button,
[type="button"],
[type="submit"] {
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 1199px) {
    .page-header,
    .panel,
    .card,
    .section-card,
    .page-shell {
        border-radius: 14px;
    }

    .btn {
        min-height: 40px;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 820px;
    }
}

@media (max-width: 991px) {
    .container,
    .container-fluid {
        padding-left: max(10px, var(--safe-left)) !important;
        padding-right: max(10px, var(--safe-right)) !important;
    }

    .page-header {
        border-radius: 14px !important;
        padding: 12px 14px !important;
    }

    .page-header .brand {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .header-actions,
    .admin-actions {
        width: 100%;
        align-items: stretch !important;
    }

    .admin-actions .btn,
    .admin-actions a {
        width: 100%;
        justify-content: center;
    }

    .toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.55rem;
    }

    .toolbar .dropdown,
    .toolbar .input-group,
    .toolbar .btn {
        width: 100%;
    }

    .shortcut-hint {
        text-align: center;
        white-space: normal;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 760px;
    }

    .table-wrap.table-responsive,
    .table-wrapper.table-responsive {
        overflow-x: auto !important;
    }

    .data-table {
        min-width: 760px !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .container,
    .container-fluid {
        padding-left: max(10px, var(--safe-left)) !important;
        padding-right: max(10px, var(--safe-right)) !important;
    }

    .page-header,
    .panel,
    .card,
    .section-card,
    .page-shell {
        border-radius: 12px !important;
    }

    .table-responsive > table th,
    .table-responsive > table td,
    .table-responsive > .table th,
    .table-responsive > .table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .modal-dialog {
        width: min(calc(100vw - 0.9rem - var(--safe-left) - var(--safe-right)), 100%);
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 700px;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 14px;
    }

    h1,
    h2,
    h3 {
        line-height: 1.2;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .page-header {
        padding: 10px 12px !important;
    }

    .btn,
    button,
    [type="button"],
    [type="submit"],
    .modal-footer .btn {
        width: 100%;
    }

    .modal-dialog {
        margin: 0.45rem auto;
    }

    .modal-content {
        border-radius: 12px;
    }

    .toolbar .btn,
    .toolbar .dropdown,
    .toolbar .input-group {
        width: 100%;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 620px;
    }

    .data-table {
        min-width: 680px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 13.5px;
    }

    .container,
    .container-fluid {
        padding-left: max(8px, var(--safe-left)) !important;
        padding-right: max(8px, var(--safe-right)) !important;
    }

    .page-header {
        padding: 9px 10px !important;
    }

    .modal-body {
        padding: 12px;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 560px;
    }

    .timeout-feedback-modal,
    .timeout-modal,
    .document-transmittal-modal,
    .transmittal-popup-modal,
    .admin-create-modal,
    .complete-signature-modal,
    .signature-capture-modal,
    .transmittal-update-modal {
        max-width: calc(100vw - 1rem) !important;
    }
}

@media (max-width: 430px) {
    .container.mt-5 {
        margin-top: 0.9rem !important;
    }

    .page-header {
        padding: 8px 10px !important;
    }

    .brand img {
        width: 42px;
        height: 42px;
    }

    .toolbar {
        padding: 8px !important;
    }

    .modal-dialog {
        width: min(calc(100vw - 0.8rem - var(--safe-left) - var(--safe-right)), 100%);
    }

    .timeout-feedback-modal,
    .timeout-modal,
    .document-transmittal-modal,
    .transmittal-popup-modal,
    .admin-create-modal,
    .complete-signature-modal,
    .signature-capture-modal,
    .transmittal-update-modal {
        max-width: calc(100vw - 0.8rem) !important;
    }
}

@media (max-width: 375px) {
    body {
        font-size: 13.2px;
    }

    .page-header {
        padding: 8px 9px !important;
    }

    .btn {
        min-height: 36px;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 520px;
    }
}

@media (max-width: 360px) {
    .modal-dialog {
        margin: 0.35rem auto;
    }
}

@media (max-width: 320px) {
    body {
        font-size: 13px;
    }

    .container,
    .container-fluid {
        padding-left: max(6px, var(--safe-left)) !important;
        padding-right: max(6px, var(--safe-right)) !important;
    }

    .page-header {
        padding: 7px 8px !important;
    }

    .toolbar {
        padding: 7px !important;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 500px;
    }

    .data-table {
        min-width: 560px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .container,
    .container-fluid {
        padding-left: max(12px, var(--safe-left)) !important;
        padding-right: max(12px, var(--safe-right)) !important;
    }

    .page-header {
        padding: 14px 16px !important;
    }

    .toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-responsive.table-wide > table,
    .table-responsive.table-wide > .table {
        min-width: 860px;
    }

    .modal-dialog {
        width: min(calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)), 980px);
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .modal-content {
        max-height: calc(100dvh - 0.9rem - var(--safe-top) - var(--safe-bottom));
    }

    .modal-body {
        max-height: calc(100dvh - 9rem);
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .container.mt-5 {
        margin-top: 0.5rem !important;
    }

    .modal-dialog {
        margin: 0.3rem auto;
    }

    .modal-content {
        max-height: calc(100dvh - 0.6rem - var(--safe-top) - var(--safe-bottom));
        border-radius: 12px;
    }

    .modal-body {
        max-height: calc(100dvh - 8.2rem);
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}