/* Realtime-only visual polish.
   IMPORTANT: Do not style metric header / region chips here.
   PC chip+metric style is owned by z_header_metric.css only. */

.pc-realtime-routebar {
  display: none;
}

.pc-realtime-date-badge {
  display: none;
}

/* Mobile safety: never render realtime PC blocks on mobile */
html.force-mobile #trouble-list-panel .pc-view {
  display: none !important;
}
html.force-mobile #trouble-list-panel .mobile-view {
  display: block !important;
}

@media (max-width: 900px) {
  #trouble-list-panel .pc-view {
    display: none !important;
  }
  #trouble-list-panel .mobile-view {
    display: block !important;
  }
  #trouble-list-panel .pc-realtime-topbar,
  #trouble-list-panel .pc-realtime-routebar,
  #trouble-list-panel .pc-realtime-date-badge {
    display: none !important;
  }
}

@media (min-width: 801px) {
  body:has(#trouble-list-panel[style*="display: block"]) {
    background: #ffffff;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-panel {
    border: 1px solid #e1e7f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 35, 70, 0.05) !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-topbar {
    height: 58px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid #e6edf6 !important;
    background: #ffffff !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-title {
    color: #1267e8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-subtitle {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-map-btn {
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #172033 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible .dash-table-container .dash-spreadsheet-inner th {
    background: #f8fafc !important;
    color: #5b677a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #dfe6f1 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible .dash-cell,
  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible td {
    color: #1f2a3d !important;
    font-size: 13px !important;
    border-bottom: 1px solid #edf1f7 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible td[data-dash-column="현장명"] {
    color: #1267e8 !important;
    font-weight: 800 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible td[data-dash-column="처리내역"] {
    color: #5f6b7a !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #pc-data-table-visible td[data-dash-column="처리상태"] .status-pill {
    border-radius: 7px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-page-numbers {
    padding: 24px 10px 16px !important;
    border-top: 0 !important;
    gap: 10px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-page-btn {
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    border: 1px solid #dbe4f0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-page-btn--active {
    background: #1167e8 !important;
    border-color: #1167e8 !important;
    color: #ffffff !important;
  }
}