/* ============================================
   MOBILE SUBPAGE RESPONSIVE CSS
   Shared mobile fixes for standalone dashboard pages
   (pages outside index.html that have inline styles)
   Load AFTER page inline styles: <link rel="stylesheet" href="mobile-subpage-responsive.css">
   Created: 2026-05-28 by CodeBot
   ============================================ */

/* ===== TABLET (max-width: 1024px) ===== */
@media screen and (max-width: 1024px) {
  /* Reduce body padding on medium screens */
  body {
    padding: 16px !important;
  }

  /* Collapse 5-6 column grids to 3 */
  .g6, .g5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Wallet grid reduce min-width */
  .wallet-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}

/* ===== TABLET PORTRAIT & LARGE PHONES (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
  /* --- Global Layout --- */
  body {
    padding: 12px !important;
    font-size: 14px;
  }

  /* Containers should use full width */
  .container,
  .admin-container,
  .triage-container,
  .bug-tracker-container,
  .approval-queue-container,
  .sc-calendar-container {
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  /* --- Headers: stack vertically --- */
  .header,
  .hdr,
  .triage-header,
  .tracker-header,
  .approval-header,
  .sc-page-header,
  .wallet-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  /* Header titles: scale down */
  .header h1,
  .hdr-t,
  .triage-header h1,
  .tracker-header h1,
  .approval-header h2,
  .sc-page-title {
    font-size: 1.2em !important;
  }

  /* Header right-side controls: stack or wrap */
  .header-right,
  .hdr-r,
  .header .stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* --- Stat Cards: 2 columns on tablet --- */
  .queue-stats,
  .tracker-stats,
  .stats-bar,
  .header .stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .stat-card,
  .stat-item {
    padding: 12px !important;
    text-align: center !important;
  }

  .stat-card .number,
  .stat-number,
  .stat-value,
  .st-v {
    font-size: 22px !important;
  }

  /* --- Grid Layouts: collapse --- */
  .g6, .g5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .g4, .g3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .g2, .g2e {
    grid-template-columns: 1fr !important;
  }

  .wallet-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Filter Bars: stack vertically --- */
  .filters-bar,
  .filter-row,
  .search-filters,
  .filter-group {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .filters-bar select,
  .filter-row select,
  .search-filters select,
  .search-filters input,
  .filter-group select,
  .filter-group input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  .search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .search-bar input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* --- Tabs: horizontal scroll --- */
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 8px !important;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* --- Tables: horizontal scroll wrapper --- */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  thead {
    display: table-header-group;
  }

  th, td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* --- Touch Targets: minimum 44px --- */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-refresh,
  .btn-sync,
  .connect-btn,
  .search-btn,
  .close-btn,
  [class*="btn-"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Small icon-only buttons still need tap area */
  button[class*="close"],
  .close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Modals: full-width on mobile --- */
  .fix-modal-content,
  .modal-content,
  .modal-body,
  [class*="modal-content"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    margin: 5vh auto !important;
    border-radius: 12px !important;
  }

  .fix-modal-overlay,
  .modal-overlay,
  [class*="modal-overlay"] {
    padding: 0 !important;
  }

  /* --- Cards: full width --- */
  .crd,
  .wallet-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* Large text scale-down */
  .total-value {
    font-size: 32px !important;
  }

  .balance {
    font-size: 22px !important;
  }

  /* Portfolio summary */
  .portfolio-summary {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  /* Content area */
  .content {
    padding: 12px !important;
  }

  /* Page body padding adjustments */
  .sc-page-header {
    padding: 14px 12px !important;
  }

  /* Calendar-specific: allow horizontal scroll */
  .sc-calendar-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== SMALL PHONES (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
  body {
    padding: 8px !important;
    font-size: 13px;
  }

  /* --- Stat Cards: single column --- */
  .queue-stats,
  .tracker-stats,
  .stats-bar,
  .header .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .stat-card,
  .stat-item {
    padding: 10px 8px !important;
  }

  .stat-card .number,
  .stat-number,
  .stat-value,
  .st-v {
    font-size: 18px !important;
  }

  .stat-card .label,
  .stat-label,
  .st-l {
    font-size: 10px !important;
  }

  /* --- All grids: single column --- */
  .g6, .g5, .g4, .g3 {
    grid-template-columns: 1fr !important;
  }

  /* --- Headers --- */
  .header h1,
  .triage-header h1,
  .tracker-header h1,
  .approval-header h2 {
    font-size: 1.05em !important;
  }

  .header {
    padding: 12px !important;
  }

  /* Tabs smaller */
  .tab {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  /* Table cells tighter */
  th, td {
    padding: 8px !important;
    font-size: 12px !important;
  }

  /* Buttons: stack in rows */
  .header-right,
  .hdr-r {
    flex-direction: column !important;
    width: 100% !important;
  }

  .header-right button,
  .hdr-r button {
    width: 100% !important;
  }

  /* Filter selects full width */
  .filters-bar,
  .filter-row {
    padding: 8px !important;
  }

  /* Cards even tighter */
  .crd,
  .wallet-card {
    padding: 10px !important;
    margin-bottom: 6px !important;
  }

  /* Modals: full screen */
  .fix-modal-content,
  .modal-content,
  [class*="modal-content"] {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 90vh !important;
    margin: 5vh 0 !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Large value text */
  .total-value {
    font-size: 26px !important;
  }

  .balance {
    font-size: 20px !important;
  }

  /* Portfolio section */
  .portfolio-summary {
    padding: 16px !important;
  }

  /* Reduce wallet logo */
  .wallet-logo {
    font-size: 36px !important;
  }

  /* Chain badges */
  .chain-badge {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
}

/* ===== VERY SMALL PHONES (max-width: 360px) ===== */
@media screen and (max-width: 360px) {
  body {
    padding: 6px !important;
  }

  .stat-card .number,
  .stat-number,
  .stat-value,
  .st-v {
    font-size: 16px !important;
  }

  .tab {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  th, td {
    padding: 6px !important;
    font-size: 11px !important;
  }
}

/* ===== LANDSCAPE MODE ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body {
    padding: 8px !important;
  }

  .header, .hdr, .triage-header {
    padding: 8px 12px !important;
  }

  .queue-stats,
  .tracker-stats,
  .stats-bar {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
}

/* ===== CROSS-VIEW COMPONENT FIXES (v26) ===== */

/* --- Metrics Grid / Cards --- */
@media screen and (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .metric-card {
    padding: 14px 12px !important;
  }

  .metric-icon {
    font-size: 28px !important;
    margin-bottom: 6px !important;
  }

  .metric-label {
    font-size: 12px !important;
  }

  .metric-value {
    font-size: 20px !important;
  }

  /* --- Chart Containers --- */
  .chart-container {
    height: 220px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .chart-container canvas {
    width: 100% !important;
    max-width: 100% !important;
  }

  .metrics-section {
    padding: 16px 12px !important;
    margin-bottom: 12px !important;
  }

  .metrics-section h2 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }

  /* --- Activity Logs / Feeds --- */
  .activity-log {
    max-height: 220px !important;
    padding: 0 !important;
  }

  .activity-item {
    padding: 10px !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
    border-left-width: 2px !important;
  }

  .feed-panel {
    padding: 12px !important;
  }

  .feed-filters {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .feed-item {
    padding: 10px !important;
    font-size: 13px !important;
  }

  .feed-bot-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* --- Task Stats --- */
  .task-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .task-count {
    font-size: 28px !important;
  }

  .task-label {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  /* --- Status Badges --- */
  .status-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }

  /* --- Bot Interface --- */
  .bot-interface {
    padding: 12px !important;
  }

  .input-panel {
    margin-bottom: 12px !important;
  }

  .input-panel textarea,
  .bot-input {
    width: 100% !important;
    min-height: 100px !important;
    font-size: 16px !important;
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .input-controls {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .input-controls select,
  .template-select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .input-controls button,
  .submit-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* --- Health Checks --- */
  .health-checks {
    gap: 8px !important;
  }

  .health-check {
    padding: 10px 12px !important;
    gap: 10px !important;
    font-size: 14px !important;
  }

  .health-icon {
    font-size: 20px !important;
  }

  /* --- Log Entries --- */
  .log-entry {
    padding: 10px !important;
    font-size: 13px !important;
  }

  .log-time {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  /* --- Plugin / Bot Grids --- */
  .plugin-grid,
  .bot-grid,
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* --- Two-Column Layouts --- */
  .two-col,
  .split-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .two-col > *,
  .split-layout > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Action Bars --- */
  .action-bar,
  .toolbar,
  .controls-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .action-bar input,
  .action-bar select,
  .toolbar input,
  .toolbar select,
  .action-bar .search-box {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .action-bar button,
  .toolbar button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* --- Monitoring Header --- */
  .monitoring-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    text-align: center !important;
  }

  .monitoring-header h1 {
    font-size: 20px !important;
  }

  .monitoring-container {
    padding: 0 8px !important;
  }

  /* --- Form Groups --- */
  .form-group,
  .field-group {
    margin-bottom: 12px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .field-group input,
  .field-group select,
  .field-group textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .form-row > * {
    width: 100% !important;
  }

  .form-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .form-actions button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* --- Wallet Info --- */
  .wallet-info-panel,
  .info-panel,
  .detail-panel {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .wallet-address {
    font-size: 11px !important;
    word-break: break-all !important;
  }

  /* --- User Tables --- */
  .user-table,
  .users-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* --- Notification Bars --- */
  .alert,
  .notification-bar,
  .info-bar,
  .warning-bar {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* --- Small Phone Additions (480px) --- */
@media screen and (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .chart-container {
    height: 180px !important;
  }

  .activity-log {
    max-height: 180px !important;
  }

  .activity-item {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .task-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .task-count {
    font-size: 22px !important;
  }

  .task-label {
    font-size: 10px !important;
  }

  .status-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .plugin-grid,
  .bot-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .health-check {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
  }

  .log-entry {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .monitoring-header h1 {
    font-size: 18px !important;
  }

  .feed-item {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .metrics-section {
    padding: 12px 10px !important;
    border-radius: 8px !important;
  }
}

/* ===== TOUCH TARGET ENFORCEMENT ===== */

@media (pointer: coarse) {
  .status-badge,
  .chain-badge,
  .tag {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .health-check,
  .activity-item,
  .feed-item,
  .log-entry {
    min-height: 44px !important;
  }

  select {
    min-height: 44px !important;
  }
}

/* ===== UNIVERSAL MOBILE HELPERS ===== */

/* Prevent horizontal overflow on all mobile */
@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Prevent iOS zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Images and media never overflow */
  img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Pre/code blocks: scroll instead of overflow */
  pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* Links and buttons: prevent text overflow */
  a, button {
    word-break: break-word !important;
  }

  /* Disable hover effects on touch devices */
  @media (hover: none) {
    *:hover {
      transform: none !important;
    }

    .connect-btn:hover,
    .tab:hover,
    tr:hover {
      transform: none !important;
    }
  }
}