/* Shared phone and small tablet layout. Desktop rules remain in their own sheets. */
@media (max-width: 767px) {
    html { width: 100%; -webkit-text-size-adjust: 100%; }
    body { min-width: 0; width: 100%; }
    body.admin-page { display: block; }
    #Env_main, .main-content, .content, .page, .card, .card-body {
        min-width: 0;
        max-width: 100%;
    }
    .admin-page .main-content { margin-left: 0; width: 100%; }
    .admin-page .content { padding: 10px 10px 36px; }
    .sidebar-nav { min-height: 0; overscroll-behavior: contain; }
    .admin-page .top-bar {
        height: auto;
        min-height: 60px;
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .top-bar > div:first-child { min-width: 0; flex: 1 1 130px; }
    .top-bar .page-title { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
    .top-bar .header-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 6px; }
    .header-actions .balance-btn { min-height: 40px; max-width: 110px; text-overflow: ellipsis; }
    .header-actions select { min-height: 40px; max-width: 100%; }
    .menu-toggle { min-width: 42px; min-height: 42px; flex-shrink: 0; }
    .card-header { gap: 10px; padding: 10px; }
    .card-header > div { min-width: 0; max-width: 100%; }
    .card-header > div[style*="display: flex"] { flex-wrap: wrap; gap: 8px !important; }
    .card-header-stat { min-width: 64px; padding: 5px 7px; }
    .card-body .button-container, .button-container { display: flex; flex-wrap: wrap; gap: 8px; }
    .card-body > div[style*="display: flex"],
    .card-body > div > div[style*="justify-content: space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .card-body div[style*="justify-content: space-between"] > div:first-child { min-width: 0; }
    .content a, .content p, #kawangLinkDisplay { overflow-wrap: anywhere; }
    .card-body [style*="grid-template-columns"],
    .弹窗内部 [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .rounded-table-container, .table-wrapper {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .rounded-table { min-width: 640px; }
    .rounded-table th, .rounded-table td { padding: 12px 10px; font-size: 13px; }
    .表格底部码页 { padding: 10px 6px; gap: 10px; }
    .分页信息, .分页按钮组 { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .admin-page button, .store-page button, .nav-item, .弹窗底部 button { min-height: 40px; touch-action: manipulation; }
    .admin-page input:not([type="checkbox"]):not([type="radio"]),
    .admin-page select, .admin-page textarea,
    .store-page input:not([type="checkbox"]):not([type="radio"]),
    .store-page select, .store-page textarea { min-width: 0; max-width: 100%; font-size: 16px !important; }
    .弹窗遮罩, .弹窗遮罩2 {
        padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
        height: 100%;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .弹窗遮罩 .弹窗背景, .弹窗遮罩2 .弹窗背景 {
        display: flex;
        flex-direction: column;
        width: min(100%, 560px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)));
    }
    .弹窗背景 > .弹窗内部 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px !important;
        flex: 1 1 auto;
    }
    .弹窗头部 { height: auto; min-height: 54px; padding: 10px 14px; flex: 0 0 auto; }
    .弹窗头部文字 { min-width: 0; }
    .弹窗头部文字 h4 { overflow-wrap: anywhere; }
    .弹窗头部关闭按钮 { min-width: 36px; min-height: 36px; flex: 0 0 auto; }
    .弹窗底部 { padding: 10px 14px; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
    .弹窗底部 button { flex: 1 1 110px; white-space: normal; }
    .弹窗内部 div[style*="display:flex"], .弹窗内部 div[style*="display: flex"] { min-width: 0; }
    .弹窗内部 input, .弹窗内部 select, .弹窗内部 textarea { max-width: 100%; min-width: 0; }
    .store-page .app-container { padding: 16px 10px max(24px, env(safe-area-inset-bottom, 0px)); min-width: 0; }
    .store-page .card-padding { padding: 20px 14px; }
    .store-page .site-name { font-size: 22px; overflow-wrap: anywhere; }
    .store-page .nav-tabs-minimal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; gap: 4px; }
    .store-page .tab-btn { padding: 10px 4px; min-width: 0; justify-content: center; }
    .store-page .table-wrapper { margin: 0; padding: 0; }
    .store-page #queryKeyword { width: 0; min-width: 0; flex: 1 1 0; }
    .store-page #queryTypeSelect { flex: 0 0 auto; }
    .store-page #商品详情 > div { gap: 10px; flex-wrap: wrap; }
    .store-page #detail_商品名称 { overflow-wrap: anywhere; }
}

@media (max-width: 399px) {
    .top-bar > div:first-child, .top-bar .header-actions { flex-basis: 100%; }
    .top-bar .header-actions { justify-content: flex-end; }
    .store-page .card-padding { padding: 16px 12px; }
}

/* Drawer and content use the same breakpoint in portrait and landscape. */
@media (max-width:1023px) {
 .admin-page .main-content {margin-left:0!important;width:100%;min-width:0;}
}

/* Preserve the original site information card layout on phones. */
@media (max-width:767px) {
 #siteInfo .card-body > div[style*="grid-template-columns"] {
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
 }
}