/* =====================================================================
   RESPONSIVE & MOBILE ADAPTATION
   Media query breakpoints for mobile, tablet, and desktop
   2026-10-30: Phase 3 UI/UX Optimization
   ===================================================================== */

/* ========== BREAKPOINT DEFINITIONS ========== */
/* Mobile Portrait: max-width 640px */
/* Tablet Portrait: max-width 768px */
/* Tablet Landscape: max-width 1024px */
/* Desktop: > 1024px (default styles above) */

/* ========== BASE RESPONSIVE IMPROVEMENTS ========== */

/* 图片自适应：只给 max-width / height，不设 display:block
   （站内大量行内图标 <img>，改块级会打乱按钮、标签内部对齐） */
img {
  max-width: 100%;
  height: auto;
}

/* 注意：不要在这里给 .container / .main / .lp-main 设 width:100% ——
   控制台骨架是「.sidebar 固定 212px + .main margin-left:212px」，
   再叠加 width:100% 会直接横向溢出 212px（v1.0.15 上线实测 1440 宽溢出 202px）。
   主区宽度由 site-polish / 各页既有规则负责。 */

/* ========== TABLET LANDSCAPE (max-width: 1024px) ========== */
@media (max-width: 1024px) {
  /* 侧栏显隐与主区偏移交给既有抽屉机制（site-polish 的 initDrawerNav，≤992px：
     汉堡按钮 + 遮罩 + transform 移出屏幕）。此处若 display:none 侧栏，
     993~1024 区间会既看不到侧栏也没有唤出入口。 */

  .c-form-group {
    margin-bottom: 14px;
  }

  .c-card-body {
    padding: 12px;
  }

  .c-table {
    font-size: 13px;
  }

  .c-table th,
  .c-table td {
    padding: 10px;
  }
}

/* ========== TABLET PORTRAIT (max-width: 768px) ========== */
@media (max-width: 768px) {
  /* Root font size adjustment for smaller screens */
  :root {
    --font-size-base: 14px;
  }

  html, body {
    font-size: 14px;
  }

  /* 侧栏在 ≤768 不再改造成底部 tab bar —— 既有抽屉（汉堡 + 遮罩）已是移动端导航，
     两套叠加会让 390 宽同时出现底部横条与抽屉。此处只做内容区适配。 */

  /* 主区偏移由 site-polish 负责（≤992 已是 margin-left:0）；
     这里不再为「底部 tab bar」预留 60px 空白——那套横条已按上面说明移除。 */

  /* Adjust hero section for small screens */
  .login-side {
    display: none;
  }

  .login-panel {
    width: 100%;
    min-height: auto;
  }

  /* Responsive button sizes */
  .c-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .c-btn.lg {
    padding: 10px 16px;
  }

  .c-btn.full {
    width: 100%;
  }

  /* Form improvements */
  .c-form-group {
    margin-bottom: 12px;
  }

  .c-input,
  .c-select,
  .c-textarea {
    padding: 10px 12px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Card improvements */
  .c-card {
    border-radius: 8px;
  }

  .c-card-header {
    padding: 12px;
  }

  .c-card-body {
    padding: 12px;
  }

  .c-card-footer {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Modal improvements */
  .c-modal {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
  }

  .c-modal-header {
    padding: 16px;
  }

  .c-modal-body {
    padding: 16px;
  }

  /* Table improvements */
  .c-table {
    font-size: 13px;
  }

  .c-table th,
  .c-table td {
    padding: 10px 8px;
  }

  /* Table horizontal scroll for small screens */
  .c-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide secondary table columns on small screens */
  .c-table .secondary {
    display: none;
  }

  /* Pagination adjustments */
  .c-pagination {
    gap: 2px;
    flex-wrap: wrap;
  }

  .c-pagination-item {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  /* Alert improvements */
  .c-alert {
    padding: 12px;
    gap: 10px;
  }

  .c-alert-title {
    font-size: 12px;
  }

  .c-alert-message {
    font-size: 12px;
  }
}

/* ========== MOBILE PORTRAIT (max-width: 640px) ========== */
@media (max-width: 640px) {
  :root {
    --font-size-base: 13px;
  }

  html, body {
    font-size: 13px;
  }

  /* Reduce padding globally */
  .container,
  .main,
  .lp-main {
    padding: 0 12px;
  }

  body .main,
  body .lp-main {
    margin-left: 0;
    margin-bottom: 0;
  }

  /* Full width layouts */
  .grid,
  .grid-2,
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Typography adjustments */
  h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

  h4 {
    font-size: 15px;
  }

  p {
    line-height: 1.6;
  }

  /* Button adjustments */
  .c-btn {
    padding: 10px 14px;
    font-size: 13px;
    min-height: 44px; /* Touch target size */
    min-width: 44px;
  }

  .c-btn.full {
    width: 100%;
  }

  .c-btn.lg {
    padding: 12px 16px;
  }

  /* Form element adjustments */
  .c-input,
  .c-select,
  .c-textarea {
    padding: 12px 12px;
    font-size: 16px; /* Critical for iOS - prevents zoom */
    border-radius: 6px;
    min-height: 44px; /* Touch target size */
  }

  .c-checkbox,
  .c-radio {
    gap: 12px;
  }

  .c-checkbox input,
  .c-radio input {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  /* Card adjustments */
  .c-card {
    border-radius: 8px;
  }

  .c-card-header {
    padding: 12px;
  }

  .c-card-header h3 {
    font-size: 14px;
  }

  .c-card-body {
    padding: 12px;
  }

  .c-card-footer {
    padding: 10px 12px;
    flex-direction: column;
    gap: 8px;
  }

  .c-card-footer .c-btn {
    width: 100%;
  }

  /* Modal adjustments */
  .c-modal-mask {
    padding: 16px;
  }

  .c-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
  }

  .c-modal-header {
    padding: 14px;
  }

  .c-modal-body {
    padding: 14px;
  }

  .c-modal-footer {
    padding: 12px 14px;
  }

  /* Table: hide and show as cards on mobile */
  .c-table {
    display: block;
    overflow: visible;
  }

  .c-table thead {
    display: none;
  }

  .c-table tbody {
    display: block;
  }

  .c-table tr {
    display: block;
    border-bottom: 12px solid var(--color-neutral-200);
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
  }

  .c-table td {
    display: block;
    padding: 12px;
    border-bottom: none;
    position: relative;
    padding-left: 35%;
  }

  .c-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    font-weight: 600;
    font-size: 12px;
  }

  /* Pagination adjustments */
  .c-pagination {
    gap: 2px;
  }

  .c-pagination-item {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .c-pagination-text {
    padding: 0 4px;
    font-size: 12px;
  }

  /* Alert improvements */
  .c-alert {
    padding: 12px;
    gap: 12px;
    border-left: 4px solid;
  }

  .c-alert-title {
    font-size: 13px;
  }

  .c-alert-message {
    font-size: 12px;
  }

  /* Badge and tag adjustments */
  .c-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  .c-tag {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* Reduce spacing */
  .c-divider {
    margin: 12px 0;
  }

  .c-form-group {
    margin-bottom: 12px;
  }

  /* Touch-friendly spacing */
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px; /* Recommended touch target */
  }

  /* 不再为底部 tab bar 预留 body 内边距（该导航形态未启用，见 ≤768 段说明） */
}

/* ========== EXTRA SMALL (max-width: 480px) ========== */
@media (max-width: 480px) {
  .container,
  .main,
  .lp-main {
    padding: 0 8px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 17px;
  }

  h3 {
    font-size: 15px;
  }

  .c-btn {
    padding: 10px 12px;
  }

  .c-card-header {
    padding: 10px;
  }

  .c-card-body {
    padding: 10px;
  }

  .c-modal-header {
    padding: 12px;
  }

  .c-modal-body {
    padding: 12px;
  }

  .login-side {
    display: none !important;
  }

  .login-panel {
    width: 100%;
    padding: 20px 16px;
  }

  .contact-card {
    padding: 12px 12px;
    font-size: 13px;
  }
}

/* ========== LANDSCAPE ORIENTATION ========== */
@media (max-height: 600px) and (orientation: landscape) {
  body .main,
  body .lp-main {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* ========== PRINT STYLES ========== */
@media print {

  .c-btn {
    border: 1px solid #000;
    background: transparent;
  }

  .c-modal-mask {
    display: none;
  }

  body {
    background: white;
  }
}

/* ========== HIGH DPI / RETINA ADJUSTMENTS ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Adjust border thickness for retina */
  .c-card,
  .c-input,
  .c-select,
  .c-textarea {
    border-width: 1px;
  }

  /* Optimize icons for retina */
  .ni {
    stroke-width: 1.5;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .c-modal,
  .c-modal-mask {
    animation: none !important;
  }
}