/*
 * mobile.css — Responsive Breakpoints
 * 包含所有 @media 查詢與行動裝置專用調整
 */

/* ===== Global Mobile Adjustments ===== */
@media (max-width: 640px) {
  .wrap { padding: 12px 10px; }
  .nav { padding: 8px 10px; }
  .nav a { font-size: 13px; padding: 5px 8px; }
  .utilbar { padding: 6px 10px; }
  .brand { font-size: 14px; }
  .fab-btn { width: 40px; height: 40px; }
  .fab-btn svg { width: 18px; height: 18px; }
  .mobile-menu-btn { min-width: 40px; min-height: 40px; }
  .section-title { font-size: 14px; margin: 16px 0 8px; }
  .card { padding: 12px 14px; border-radius: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card-sm { padding: 10px 12px; }
  .card-val { font-size: 18px; }
  .card .chg { font-size: 12px; }
  .freshness { font-size: 11px; padding: 4px 0 6px; }
  .pager button { padding: 5px 9px; font-size: 12px; }
  th, td { padding: 8px 6px; font-size: 12px; }
  .table-wrap { border-radius: 10px; }
  .drawer { width: 280px; padding: 12px; }
  .toolbar { gap: 6px; }
  .toolbar label { font-size: 12px; }
  .toolbar select { padding: 5px 8px; font-size: 12px; }
  .row { font-size: 13px; padding: 6px 0; }
  .switch { width: 44px; height: 24px; }
  .switch::after { width: 20px; height: 20px; }
  .switch.on::after { left: 20px; }
  .seg button { padding: 6px 8px; font-size: 12px; }
  .kline-toolbar button { padding: 4px 8px; font-size: 11px; }
  .row-input { flex-direction: column; align-items: stretch; }
  .row-input input[type="text"],
  .row-input input[type="search"] { width: 100%; min-width: 0; }
  .row-input button { width: 100%; }
  .form-row { flex-direction: column; gap: 8px; }
  .layout { grid-template-columns: 1fr; }
  .panel { padding: 12px; }
  .mh-layout { grid-template-columns: 1fr; }
  .tv-box { min-height: 280px; }
  .perf h3 { font-size: 13px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .card-title { font-size: 14px; }
  .badge { font-size: 10px; padding: 1px 6px; }
  .pill { font-size: 11px; padding: 2px 8px; }
  .alert { padding: 10px 12px; font-size: 12px; }
  .kv { font-size: 12px; padding: 6px 0; }
  .count { font-size: 12px; }
  .disclaimer { font-size: 10px; padding: 16px 8px; }
  .footer { font-size: 11px; padding: 16px; }
  .btn { padding: 7px 14px; font-size: 12px; }
  .btn-sm { padding: 4px 8px; font-size: 11px; }
  .btn-lg { padding: 10px 20px; font-size: 13px; }
  .empty-state { padding: 30px 16px; }
  .empty-state svg { width: 48px; height: 48px; }
  .empty-state h4 { font-size: 13px; }
  .empty-state p { font-size: 12px; }
}

/* ===== Small Mobile (<= 480px) ===== */
@media (max-width: 480px) {
  .wrap { padding: 10px 8px; }
  .nav { gap: 2px; }
  .nav a { padding: 4px 6px; font-size: 12px; }
  .utilbar { gap: 4px; padding: 4px 8px; }
  .brand { font-size: 13px; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .card-sm { padding: 8px 10px; }
  .card-val { font-size: 16px; }
  .section-title { font-size: 13px; }
  .pager { gap: 4px; }
  .pager button { padding: 4px 7px; font-size: 11px; }
  th, td { padding: 6px 4px; font-size: 11px; }
  .drawer { width: 100%; max-width: 100%; border-radius: 0; }
  .search.expanded input { width: 140px; }
  .kline-toolbar { gap: 4px; }
  .kline-toolbar button { padding: 3px 6px; font-size: 10px; }
}

/* ===== Tablet (641px - 1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .wrap { max-width: 960px; padding: 16px 20px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .mh-layout { grid-template-columns: 1fr 300px; }
  .layout { grid-template-columns: 260px 1fr; }
  .drawer { width: 300px; }
}

/* ===== Desktop (1025px - 1440px) ===== */
@media (min-width: 1025px) and (max-width: 1440px) {
  .wrap { max-width: 1200px; padding: 20px 24px; }
  .mh-layout { grid-template-columns: 1fr 340px; }
}

/* ===== Large Desktop (>= 1441px) ===== */
@media (min-width: 1441px) {
  .wrap { max-width: 1400px; padding: 24px 32px; }
  .mh-layout { grid-template-columns: 1fr 380px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ===== Landscape Mobile ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .drawer { max-height: 100vh; overflow-y: auto; }
  .tv-box { min-height: 240px; }
  .utilbar { position: static; }
  .nav { position: static; }
}

/* ===== Dark Mode Specific Mobile ===== */
@media (max-width: 640px) {
  [data-theme="dark"] .freshness { background: #2a1d12; color: #fdba74; }
}

/* ===== High DPI / Retina ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-btn svg { image-rendering: -webkit-optimize-contrast; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Print ===== */
@media print {
  .sticky-header,
  .utilbar,
  .drawer,
  .drawer-mask,
  .kline-toolbar,
  .pager,
  .footer,
  .disclaimer { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .table-wrap { overflow: visible; border: 1px solid #ccc; }
  th, td { border-color: #ccc; }
  a { text-decoration: none; color: #000; }
}

/* ===== Focus Visible (Accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
  :root { --border: #000; --row-hover: #e0e0e0; }
  [data-theme="dark"] { --border: #fff; --row-hover: #333; }
}