/* ============================================
   管理后台全端响应式 · 电脑 / 平板 / 手机
   ============================================ */

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

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- 平板 ---------- */
@media (max-width: 1024px) {
    .login-panel {
        padding: 40px 28px;
    }

    .login-container {
        max-width: 100%;
    }

    .topbar {
        padding: 0 20px;
        gap: 12px;
    }

    .topbar-title h2 {
        font-size: 20px;
    }

    .content-wrapper {
        padding: 20px;
    }

    .panel-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-header-btns {
        width: 100%;
        justify-content: stretch;
    }

    .panel-header-btns .btn-secondary-sm,
    .panel-header-btns .btn-add {
        flex: 1;
        min-width: 0;
    }

    .modal-content {
        max-width: 96%;
    }
}

/* ---------- 手机 ---------- */
@media (max-width: 768px) {
    .login-page {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    .login-panel {
        padding: 32px 20px;
        align-items: flex-start;
        padding-top: max(32px, env(safe-area-inset-top));
    }

    .login-header h2 {
        font-size: 22px;
    }

    .login-form .login-input,
    .login-form input[type="text"],
    .login-form input[type="password"] {
        display: block !important;
        width: 100% !important;
        font-size: 16px;
        min-height: 48px;
        color: var(--text-primary) !important;
        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .btn-login {
        min-height: 48px;
        font-size: 16px;
    }

    .sidebar {
        width: min(280px, 88vw);
    }

    .topbar {
        height: auto;
        min-height: 56px;
        padding: 10px 14px;
        flex-wrap: wrap;
    }

    .topbar-title {
        order: 2;
        width: calc(100% - 50px);
    }

    .topbar-breadcrumb {
        display: none;
    }

    .topbar-title h2 {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-actions {
        order: 1;
        margin-left: auto;
        gap: 8px;
    }

    .topbar-user {
        display: none !important;
    }

    .btn-preview {
        display: none !important;
    }

    .sync-status {
        display: none !important;
    }

    .btn-save {
        display: inline-flex !important;
        padding: 8px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    .btn-save svg {
        width: 14px;
        height: 14px;
    }

    .sidebar-toggle {
        display: flex !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .content-wrapper {
        padding: 14px;
    }

    .panel-header h3 {
        font-size: 18px;
    }

    .panel-header p {
        font-size: 13px;
    }

    .dashboard-grid {
        gap: 12px;
    }

    .dashboard-card {
        padding: 16px;
    }

    .products-grid,
    .product-item {
        width: 100%;
    }

    .product-item-image {
        height: 180px;
    }

    .form-row,
    .color-grid,
    .action-buttons {
        grid-template-columns: 1fr !important;
    }

    .image-upload-group .image-preview-wrap {
        max-width: 100%;
    }

    .inquiries-table-wrap {
        margin: 0 -14px;
        padding: 0 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inquiries-table {
        min-width: 720px;
    }

    .inquiries-table th,
    .inquiries-table td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal.active {
        display: flex !important;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        margin: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .modal-footer .btn-cancel,
    .modal-footer .btn-confirm {
        width: 100%;
        min-height: 44px;
    }

    .toast {
        left: 14px;
        right: 14px;
        max-width: none;
    }

    .news-edit-item {
        gap: 12px;
    }

    .partner-edit-item {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-preview-frame {
        height: 280px;
    }
}

/* ---------- 小屏手机 ---------- */
@media (max-width: 480px) {
    .login-brand {
        display: none;
    }

    .panel-header-btns {
        flex-direction: column;
    }

    .panel-header-btns .btn-secondary-sm,
    .panel-header-btns .btn-add {
        width: 100%;
    }

    .dashboard-card .card-value {
        font-size: 28px;
    }

    .quick-actions {
        grid-template-columns: 1fr !important;
    }

    .activity-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .partners-editor {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- 横屏 ---------- */
@media (max-width: 896px) and (orientation: landscape) {
    .login-panel {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .modal-content {
        max-height: 96vh;
    }
}

/* ---------- 触控 ---------- */
@media (hover: none) and (pointer: coarse) {
    .nav-item,
    .btn-save,
    .btn-add,
    .btn-login,
    .dashboard-card {
        touch-action: manipulation;
    }
}

@supports (padding: max(0px)) {
    .topbar {
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .content-wrapper {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .toast {
        bottom: max(24px, env(safe-area-inset-bottom));
    }
}

/* 侧栏折叠时主区域占满 */
@media (max-width: 768px) {
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
}