/*
 * 后台移动端统一适配。
 * 只在中小屏覆盖布局，不改各页面原有桌面风格。
 */

html {
    -webkit-text-size-adjust: 100%;
}

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

button,
.btn,
.back-btn,
.logout-btn,
.action-btn,
.action-button,
.save-btn,
.reset-btn,
.add-btn,
.refresh-btn,
a.feature-card {
    touch-action: manipulation;
}

table {
    width: 100%;
}

code,
pre {
    max-width: 100%;
}

@media (max-width: 900px) {
    body {
        min-width: 0 !important;
        overflow-x: hidden;
        background-attachment: scroll !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    header,
    .header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }

    header h1,
    .header h1,
    .logo h1 {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .logo {
        min-width: 0 !important;
        flex: 1 1 260px !important;
    }

    .content,
    .grid-container,
    .cards-container,
    .stores-container,
    .formatting-examples,
    .form-grid,
    .main-content,
    .dashboard-grid,
    .settings-grid,
    .preview-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .card,
    .settings-card,
    .feature-card,
    .modal,
    .modal-content,
    .panel,
    .section,
    .preview {
        max-width: 100% !important;
    }

    .card,
    .settings-card,
    .panel {
        border-radius: 10px !important;
    }

    .stats,
    .summary,
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .toolbar,
    .filters,
    .search-bar,
    .search-container,
    .button-row,
    .action-buttons,
    .btn-group,
    .form-actions,
    .history-buttons,
    .history-header,
    .tag-input,
    .repeat-time-container,
    .schedule-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .toolbar > *,
    .filters > *,
    .search-bar > *,
    .search-container > *,
    .button-row > *,
    .action-buttons > *,
    .btn-group > *,
    .form-actions > *,
    .history-buttons > *,
    .history-header > *,
    .tag-input > *,
    .repeat-time-container > *,
    .schedule-options > * {
        min-width: min(220px, 100%) !important;
        flex: 1 1 auto !important;
    }

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

    input[style*="width"],
    select[style*="width"],
    textarea[style*="width"],
    .form-control[style*="width"] {
        width: 100% !important;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    code {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    pre {
        overflow-x: auto;
        white-space: pre-wrap;
    }

    .table-wrap,
    .table-container,
    .groups-list,
    .shops-list,
    .store-list,
    .keyboard-display,
    .shop-list,
    .history-list {
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal,
    .modal-content {
        width: min(94vw, 640px) !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }

    .modal-overlay,
    .modal {
        padding: 12px !important;
    }
}

@media (max-width: 560px) {
    body {
        padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
    }

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    header,
    .header {
        padding: 16px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .logo {
        flex: 1 1 100% !important;
        justify-content: center !important;
    }

    .logo img {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 auto !important;
    }

    header .btn,
    header .back-btn,
    header .logout-btn,
    .header .btn,
    .header .back-btn,
    .back-btn,
    .logout-btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .stats,
    .summary,
    .features-grid,
    .cards-container,
    .stores-container {
        grid-template-columns: 1fr !important;
    }

    .formatting-example {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    .stat,
    .stat-item,
    .feature-card {
        min-height: 104px !important;
    }

    .card,
    .settings-card,
    .panel,
    .feature-card {
        padding: 16px !important;
    }

    .card-title,
    .modal-header,
    .card-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .card-title h2,
    .modal-title,
    .page-title,
    .dashboard-title,
    .preview-title {
        font-size: clamp(1.25rem, 6vw, 1.6rem) !important;
        line-height: 1.25 !important;
    }

    .toolbar,
    .filters,
    .search-bar,
    .search-container,
    .button-row,
    .action-buttons,
    .btn-group,
    .form-actions,
    .history-buttons,
    .history-header,
    .tag-input,
    .repeat-time-container,
    .schedule-options {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .toolbar > *,
    .filters > *,
    .search-bar > *,
    .search-container > *,
    .button-row > *,
    .action-buttons > *,
    .btn-group > *,
    .form-actions > *,
    .history-buttons > *,
    .history-header > *,
    .tag-input > *,
    .repeat-time-container > *,
    .schedule-options > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    button,
    .btn,
    .back-btn,
    .logout-btn,
    .action-btn,
    .action-button,
    .save-btn,
    .reset-btn,
    .add-btn,
    .refresh-btn {
        min-height: 44px !important;
        white-space: normal !important;
    }

    input,
    select,
    textarea,
    .form-control {
        width: 100% !important;
        font-size: 16px !important;
    }

    textarea {
        min-height: 112px;
    }

    .phone-mockup {
        width: 100% !important;
        max-width: 320px !important;
    }

    .phone-screen {
        min-height: 380px !important;
    }

    .notification {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        transform: translateY(-160%) !important;
    }

    .notification.show {
        transform: translateY(0) !important;
    }
}