@media (max-width: 640px) {
    .app-shell {
        padding-top: max(18px, env(safe-area-inset-top)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
    }

    .app-shell > header {
        margin-bottom: 20px !important;
        padding: 20px 14px !important;
        border-radius: 20px !important;
    }

    .brand-title {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
    }

    .app-tabs {
        margin-bottom: 18px !important;
    }

    .slip-meta-card {
        padding: 15px;
        border-radius: 18px;
    }

    .slip-meta-grid {
        grid-template-columns: 1fr;
    }

    .slip-field-date {
        grid-column: auto;
    }

    .data-tools-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .data-tool-btn {
        width: 100%;
    }
}

/* Safari ซูมและเลื่อน viewport เมื่อโฟกัสช่องกรอกที่เล็กกว่า 16px */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 640px) {
        input:not([type="hidden"]),
        select,
        textarea {
            font-size: 16px !important;
        }
    }
}

@media (min-width: 641px) {
    .slip-field-date {
        grid-column: 1 / -1;
    }
}