/* ========================================
   mobile.css - レスポンシブ共通ルール
   全HTMLの最後のCSSとして読み込む
   全ルールは @media ブロック内に限定
   ======================================== */

/* === Tap Targets (WCAG 2.5.8: min 44x44px) === */
@media (max-width: 991px) {
  .toolbar-btn,
  .emoji-btn,
  .send-btn,
  .sticker-btn,
  .chat-action-btn,
  .filter-options-btn,
  .sync-friends-btn,
  .sender-settings,
  .info-edit-btn,
  .folder-action-btn,
  .sticker-picker-close,
  .template-picker-close,
  .modal-close,
  .action-dropdown-btn,
  .btn-area-action {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === Font Size Floor (min 13px on mobile) === */
@media (max-width: 767px) {
  .friend-time,
  .friend-last-message,
  .sender-label,
  .info-sub,
  .info-label,
  .message-sender,
  .message-time,
  .stat-label-sub,
  .user-role,
  .char-counter,
  .broadcast-label,
  .step-label,
  .message-sender-info,
  .field-type-badge,
  .folder-count,
  .breadcrumb-link {
    font-size: 13px;
  }
}

/* === Modal Improvements === */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 8px;
  }

  .modal-overlay .modal-content,
  .template-confirm-dialog,
  .custom-modal .modal-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    margin: 8px;
    border-radius: 8px;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 28px;
    padding: 8px;
  }
}

/* === 2-Column Layout Collapse === */
@media (max-width: 767px) {
  .tag-separate,
  .friend-info-layout {
    flex-direction: column;
    height: auto !important; /* Override calc(100vh - 210px) from form-create.css */
  }

  .tag-left,
  .folder-sidebar {
    width: 100%;
    flex-shrink: 1;
    padding-right: 0;
    margin-bottom: 16px;
  }

  .tag-right,
  .fields-container {
    margin-top: 0;
    width: 100%;
  }
}

/* === Table Card Layout (768px and below) === */
@media (max-width: 768px) {
  /* Hide table headers */
  .data-table thead,
  .reply-table thead,
  .form-table thead,
  .fields-table thead,
  .friends-table thead,
  .order-table thead,
  .subscription-table thead,
  .reservation-table thead,
  .step-table thead,
  .template-table thead,
  .broadcast-table thead,
  .event-table thead,
  .tags-table thead,
  .table-container table thead,
  .chat-table thead,
  .responses-table thead,
  .booking-table thead,
  .lesson-table thead {
    display: none;
  }

  /* Convert rows to cards */
  .data-table tbody tr,
  .reply-table tbody tr,
  .form-table tbody tr,
  .fields-table tbody tr,
  .friends-table tbody tr,
  .order-table tbody tr,
  .subscription-table tbody tr,
  .reservation-table tbody tr,
  .step-table tbody tr,
  .template-table tbody tr,
  .broadcast-table tbody tr,
  .event-table tbody tr,
  .tags-table tbody tr,
  .table-container table tbody tr,
  .chat-table tbody tr,
  .responses-table tbody tr,
  .booking-table tbody tr,
  .lesson-table tbody tr {
    display: block;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: #fff;
  }

  /* Make cells flex for label + value */
  .data-table tbody td,
  .reply-table tbody td,
  .form-table tbody td,
  .fields-table tbody td,
  .friends-table tbody td,
  .order-table tbody td,
  .subscription-table tbody td,
  .reservation-table tbody td,
  .step-table tbody td,
  .template-table tbody td,
  .broadcast-table tbody td,
  .event-table tbody td,
  .tags-table tbody td,
  .table-container table tbody td,
  .chat-table tbody td,
  .responses-table tbody td,
  .booking-table tbody td,
  .lesson-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, #eee);
  }

  /* Remove border on last cell */
  .data-table tbody td:last-child,
  .reply-table tbody td:last-child,
  .form-table tbody td:last-child,
  .fields-table tbody td:last-child,
  .friends-table tbody td:last-child,
  .order-table tbody td:last-child,
  .subscription-table tbody td:last-child,
  .reservation-table tbody td:last-child,
  .step-table tbody td:last-child,
  .template-table tbody td:last-child,
  .broadcast-table tbody td:last-child,
  .event-table tbody td:last-child,
  .tags-table tbody td:last-child,
  .table-container table tbody td:last-child,
  .chat-table tbody td:last-child,
  .responses-table tbody td:last-child,
  .booking-table tbody td:last-child,
  .lesson-table tbody td:last-child {
    border-bottom: none;
  }

  /* Show data-label as pseudo-element */
  .data-table tbody td::before,
  .reply-table tbody td::before,
  .form-table tbody td::before,
  .fields-table tbody td::before,
  .friends-table tbody td::before,
  .order-table tbody td::before,
  .subscription-table tbody td::before,
  .reservation-table tbody td::before,
  .step-table tbody td::before,
  .template-table tbody td::before,
  .broadcast-table tbody td::before,
  .event-table tbody td::before,
  .tags-table tbody td::before,
  .table-container table tbody td::before,
  .chat-table tbody td::before,
  .responses-table tbody td::before,
  .booking-table tbody td::before,
  .lesson-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary, #666);
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 12px;
  }

  /* Hide checkbox columns on mobile card */
  .col-checkbox {
    display: none;
  }

  /* Table min-width override */
  .data-table,
  .fields-table,
  .friends-table,
  .tags-table {
    min-width: auto;
  }
}

/* === Grid Adjustments === */
@media (max-width: 767px) {
  .sticker-picker-body {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .sticker-picker-body {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .preset-items-grid {
    grid-template-columns: 1fr;
  }
}

/* === Sticker/Template Picker === */
@media (max-width: 767px) {
  .sticker-picker,
  .template-picker {
    max-height: 250px;
  }
}

/* === Action Buttons Wrap === */
@media (max-width: 767px) {
  .page-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .page-header .page-actions,
  .page-header .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .page-header .page-actions .btn,
  .page-header .header-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* === Chat Toolbar Wrap === */
@media (max-width: 767px) {
  .chat-input-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .chat-input-area {
    padding: 8px 12px;
  }
}