/* ===================================
  Discord 訊息監控系統 - 響應式設計 (修正版)
  保護桌面版佈局，優化移動端體驗
  ================================ */

/* ===== 桌面版保護措施 ===== */
@media (min-width: 1025px) {
   .dashboard {
       display: grid !important;
       grid-template-columns: 2fr 3fr !important;
       gap: 30px !important;
   }
   
   .stats-grid {
       display: grid !important;
       grid-template-columns: repeat(2, 1fr) !important; /* 桌面版也改為2x2格局 */
       gap: 20px !important;
   }
}

/* ===== 平板設備 (1024px 以下) ===== */
@media (max-width: 1024px) and (min-width: 774px) {
   .container {
       padding: 18px;
   }
   
   .dashboard {
       grid-template-columns: 1fr 1fr;
       gap: 25px;
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr); /* 改為2x2格局 */
       gap: 15px;
   }
}

/* ===== 平板設備 (773px 以下) ===== */
@media (max-width: 773px) {
   .container {
       padding: 15px;
   }
   
   .dashboard {
       grid-template-columns: 1fr;
       gap: 20px;
   }
   
   .header h1 {
       font-size: 2rem;
   }
   
   .header p {
       font-size: 1rem;
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr); /* 平板維持2x2格局 */
       gap: 15px;
   }
   
   .card {
       padding: 20px;
   }
   
   .filters-row, .date-range {
       grid-template-columns: 1fr;
   }
   
   .user-bar {
       padding: 12px 20px;
       flex-direction: column;
       gap: 15px;
       text-align: center;
   }
   
   .user-bar .tab-container {
       width: 100%;
       max-width: none;
       order: 2;
   }
   
   .user-info {
       order: 1;
   }
   
   .logout-btn {
       order: 3;
       align-self: center;
   }
   
   .user-bar .tab-button {
       font-size: 12px;
       padding: 6px 12px;
       min-width: 100px;
   }
   
   .attachments-grid {
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 10px;
   }
   
   .attachment-image {
       height: 100px;
   }
   
   .file-attachment .attachment-file {
       height: 100px;
       font-size: 40px;
   }
   
   .image-modal-img {
       max-height: calc(90vh - 60px);
   }
   
   .image-modal-info {
       flex-direction: column;
       gap: 10px;
       text-align: center;
   }
   
   .message-header, .forum-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
   }
   
   .message-footer {
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
   }
   
   .pagination {
       gap: 5px;
   }
   
   .pagination button {
       padding: 6px 12px;
       font-size: 14px;
   }
   
   .author-name {
       flex-direction: column;
       align-items: flex-start;
       gap: 4px;
   }
   
   .action-badge {
       font-size: 0.7rem;
       padding: 4px 10px;
   }
   
   .form-group[style*="flex"] {
       flex-direction: column;
       gap: 8px !important;
   }
   
   .form-group[style*="flex"] .btn {
       width: 100%;
   }
   
   /* 按鈕載入動畫響應式 */
   .btn-spinner {
       width: 16px;
       height: 16px;
       transform: translate(-50%, -50%) translateX(-12px);
   }
   
   .btn-text {
       font-size: 11px;
       transform: translate(-50%, -50%) translateX(15px);
   }
   
   .btn-success-icon {
       font-size: 14px;
       transform: translate(-50%, -50%) translateX(-12px);
   }
   
   .btn.success .btn-text {
       transform: translate(-50%, -50%) translateX(15px);
       font-size: 11px;
   }
   
   /* 特殊按鈕狀態響應式 */
   .btn-success.loading .btn-spinner {
       border-top-color: white;
       border-color: rgba(255, 255, 255, 0.3);
   }
   
   .btn-success.loading .btn-text {
       color: white;
   }
   
   .download-requires-password.loading .btn-spinner {
       border-top-color: white;
       border-color: rgba(255, 255, 255, 0.3);
   }
   
   .download-admin-required.loading .btn-spinner {
       border-top-color: white;
       border-color: rgba(255, 255, 255, 0.3);
   }
   
   .btn.loading:hover {
       background: var(--primary-gradient) !important;
       transform: none !important;
   }
   
   .download-requires-password.loading:hover {
       background: linear-gradient(135deg, var(--warning-color), #d97706) !important;
   }
   
   .download-admin-required.loading:hover {
       background: linear-gradient(135deg, var(--danger-color), #dc2626) !important;
   }
   
   .btn.loading,
   .btn.success {
       pointer-events: none;
   }
   
   .btn.loading::after {
       content: '' !important;
   }
   
   .btn-text {
       text-overflow: ellipsis;
       overflow: hidden;
       max-width: 80px;
   }
}

/* ===== 手機設備 (480px 以下) ===== */
@media (max-width: 480px) {
   .header h1 {
       font-size: 1.8rem;
   }
   
   .stats-grid {
       grid-template-columns: 1fr; /* 手機單列 */
       gap: 12px;
   }
   
   .stat-number {
       font-size: 2rem;
   }
   
   .card {
       padding: 15px;
   }
   
   .form-control {
       font-size: 16px;
   }
   
   .btn {
       font-size: 14px;
       padding: 10px 20px;
   }
   
   .user-bar .tab-container {
       flex-direction: column;
       gap: 6px;
   }
   
   .user-bar .tab-button {
       width: 100%;
       min-width: auto;
   }
   
   /* 按鈕載入動畫手機版 */
   .btn-spinner {
       width: 14px;
       height: 14px;
       transform: translate(-50%, -50%) translateX(-10px);
   }
   
   .btn-text {
       font-size: 10px;
       transform: translate(-50%, -50%) translateX(12px);
   }
   
   .btn-success-icon {
       font-size: 12px;
       transform: translate(-50%, -50%) translateX(-10px);
   }
   
   .btn.success .btn-text {
       transform: translate(-50%, -50%) translateX(12px);
       font-size: 10px;
   }
   
   /* 小尺寸按鈕響應式 */
   .btn-sm.loading .btn-spinner {
       width: 12px;
       height: 12px;
   }
   
   .btn-sm.loading .btn-text {
       font-size: 10px;
   }
   
   .btn-sm.loading .btn-success-icon {
       font-size: 12px;
   }
}

/* ===== 無障礙與特殊需求支援 ===== */
@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;
   }
   
   .btn-spinner {
       animation: none;
   }
   
   .btn-success-icon {
       animation: none;
   }
   
   .btn::before {
       transition: none;
   }
   
   .ripple-effect {
       animation: none;
   }
   
   .btn:active:not(.loading):not(:disabled):not(.success) {
       transition: none;
   }
}

/* 焦點可見性 */
button:focus-visible,
input:focus-visible,
select:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* 高對比度支援 */
@media (prefers-contrast: high) {
   .card {
       border: 2px solid var(--text-primary);
   }
   
   .btn-secondary {
       border: 2px solid var(--text-primary);
   }
   
   .clickable-author:hover,
   .clickable-channel:hover {
       border: 2px solid currentColor;
   }
   
   .btn-spinner {
       border-top-color: #000000;
       border-color: rgba(0, 0, 0, 0.3);
   }
   
   .btn.loading {
       border: 2px solid #000000;
   }
   
   .btn-text {
       color: #000000;
       text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
   }
   
   .btn-success-icon {
       color: #000000;
       text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
   }
}

/* ===== 列印樣式 ===== */
@media print {
   body {
       background: white !important;
       color: black !important;
   }
   
   .user-bar,
   .btn,
   .pagination,
   .channel-search-notification,
   .author-search-notification {
       display: none !important;
   }
   
   .card {
       break-inside: avoid;
       box-shadow: none !important;
       border: 1px solid #ccc !important;
       background: white !important;
   }
   
   .message-item,
   .forum-item {
       break-inside: avoid;
       box-shadow: none !important;
       border: 1px solid #ddd !important;
       background: white !important;
   }
   
   .action-badge {
       background: #f5f5f5 !important;
       color: black !important;
       border: 1px solid #ccc !important;
   }
   
   .clickable-author,
   .clickable-channel {
       color: black !important;
       background: transparent !important;
   }
   
   .original-content,
   .reply-content,
   .attachments-section {
       background: #f9f9f9 !important;
       border: 1px solid #ddd !important;
   }
}

/* 大尺寸按鈕響應式 */
@media (min-width: 1200px) {
   .btn-lg.loading .btn-spinner {
       width: 20px;
       height: 20px;
   }
   
   .btn-lg.loading .btn-text {
       font-size: 14px;
   }
   
   .btn-lg.loading .btn-success-icon {
       font-size: 18px;
   }
}

/* 觸控設備優化 */
@media (hover: none) and (pointer: coarse) {
   .btn {
       min-height: 48px; /* 更大的觸控目標 */
   }
   
   .tab-button {
       min-height: 44px;
   }
   
   .attachment-download {
       min-height: 44px;
   }
   
   .btn:hover {
       transform: none; /* 禁用觸控設備的懸停效果 */
   }
   
   .clickable-author:hover,
   .clickable-channel:hover {
       transform: none;
   }
}

/* 橫屏手機 */
@media (max-width: 773px) and (orientation: landscape) {
   .header h1 {
       font-size: 1.5rem;
   }
   
   .user-bar {
       padding: 8px 15px;
       gap: 10px;
   }
   
   .stats-grid {
       grid-template-columns: repeat(4, 1fr); /* 橫屏時顯示四列 */
       gap: 10px;
   }
   
   .stat-card {
       padding: 15px;
   }
   
   .stat-number {
       font-size: 1.8rem;
   }
}

/* 超寬屏幕 */
@media (min-width: 1600px) {
   .container {
       max-width: 1600px;
   }
   
   .dashboard {
       grid-template-columns: 1fr 1fr 1fr;
   }
   
   .results-container {
       grid-column: 1 / -1;
   }
   
   .stats-grid {
       grid-template-columns: repeat(6, 1fr);
   }
}

/* 窄屏設備 */
@media (max-width: 320px) {
   .container {
       padding: 10px;
   }
   
   .card {
       padding: 10px;
       border-radius: 12px;
   }
   
   .btn {
       font-size: 12px;
       padding: 8px 16px;
   }
   
   .user-bar {
       padding: 8px 12px;
   }
   
   .header h1 {
       font-size: 1.5rem;
   }
   
   .attachment-image {
       height: 80px;
   }
   
   .attachments-grid {
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
}