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

.metric-box--total {
  display: none !important;
}

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

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

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar {
    width: 210px !important;
    background: linear-gradient(180deg, #061b3f 0%, #08275c 100%) !important;
    border-right: 0 !important;
    padding: 22px 14px !important;
    box-shadow: 10px 0 30px rgba(6, 27, 63, 0.12);
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand {
    padding: 0 4px 20px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand-meta {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #a9bad4 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-nav-grid {
    padding: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-work-group > summary.sidebar-work-summary {
    min-height: 46px !important;
    margin: 0 0 5px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    color: #dce8ff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    gap: 12px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link[aria-current="page"] {
    background: linear-gradient(90deg, #123b82 0%, #0969ff 100%) !important;
    box-shadow: inset 3px 0 0 #5ca2ff !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-logout-btn {
    height: 42px !important;
    min-height: 42px !important;
    margin: auto 2px 4px !important;
    width: calc(100% - 4px) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-weight: 800 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) {
    left: 210px !important;
    top: 0 !important;
    right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "routebar"
      "chips"
      "metrics"
      "breakdown" !important;
    gap: 0 !important;
    padding: 0 26px 10px !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-routebar {
    grid-area: routebar;
    display: flex;
    height: 58px;
    margin: 0 -26px 14px;
    padding: 0 28px;
    background: #ffffff;
    border-bottom: 1px solid #e4eaf3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-routebar__title,
  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-routebar__user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-routebar__user {
    gap: 9px;
    font-size: 13px;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .region-filter-full-row {
    grid-area: chips !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    min-width: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .region-filter-full-row > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    column-gap: 18px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-date-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    color: #41516b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar.region-chip-bar {
    display: grid !important;
    grid-template-columns: max-content repeat(8, minmax(62px, 86px)) !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: start !important;
    padding: 0 !important;
    min-height: 40px !important;
    background: transparent !important;
    border: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar.region-chip-bar::before {
    content: "구역 선택";
    color: #172033;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 4px 9px !important;
    border-radius: 7px !important;
    border: 1px solid #dce4f0 !important;
    background: #ffffff !important;
    color: #172033 !important;
    box-shadow: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip__label {
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip__count {
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #6b778c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip--active {
    background: #1167e8 !important;
    border-color: #1167e8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(17, 103, 232, 0.18) !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #region-chip-bar .region-chip--active .region-chip__count {
    color: #ffffff !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only {
    grid-area: metrics !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(15, 35, 70, 0.05) !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only > .metric-box {
    min-height: 88px !important;
    padding: 18px 18px !important;
    border: 0 !important;
    border-right: 1px solid #edf1f7 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 14px !important;
    text-align: left !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only > .metric-box--total {
    display: grid !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only > .metric-box:last-child {
    border-right: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box .metric-box-label {
    display: contents !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box .metric-box-label iconify-icon,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box .metric-box-label svg {
    display: inline-flex !important;
    grid-row: 1 / span 2;
    width: 44px !important;
    height: 44px !important;
    padding: 11px;
    border-radius: 14px;
    color: #1267e8 !important;
    background: #e8f1ff;
    box-sizing: border-box;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="unprocessed"] .metric-box-label iconify-icon,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="unprocessed"] .metric-box-label svg {
    color: #ef4444 !important;
    background: #ffe7e7;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="recall"] .metric-box-label iconify-icon,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="recall"] .metric-box-label svg {
    color: #f97316 !important;
    background: #fff0df;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="duplicate_site"] .metric-box-label iconify-icon,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="duplicate_site"] .metric-box-label svg {
    color: #d99100 !important;
    background: #fff6dc;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="accident"] .metric-box-label iconify-icon,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="accident"] .metric-box-label svg {
    color: #7c3aed !important;
    background: #f0e5ff;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box .metric-box-label span {
    color: #172033 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box h2 {
    color: #071c44 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="unprocessed"] h2,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="recall"] h2,
  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="long_term"] h2 {
    color: #ef4444 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="duplicate_site"] h2 {
    color: #d99100 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box[data-metric-key="accident"] h2 {
    color: #7c3aed !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box h2::after {
    content: " 건";
    margin-left: 3px;
    color: #778399;
    font-size: 13px;
    font-weight: 800;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-breakdown-strip {
    grid-area: breakdown !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #dashboard-stack.content-area {
    margin-left: 210px !important;
    margin-top: 206px !important;
    padding: 0 26px 30px !important;
    background: #ffffff !important;
  }

  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;
  }
}

@media (max-width: 1180px) and (min-width: 801px) {
  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #dashboard-stack.content-area {
    margin-top: 320px !important;
  }
}

/* Higher-specificity final PC realtime overrides: beat z_header_metric.css 4x2 rules. */
@media (min-width: 801px) {
  html,
  body {
    background: #ffffff !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar.region-chip-bar {
    display: grid !important;
    grid-template-columns: max-content repeat(8, minmax(62px, 86px)) !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: start !important;
    min-height: 40px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip-row {
    display: contents !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip__label {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip__count {
    font-size: 11px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row {
    margin-bottom: 6px !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-bar.metric-bar--buttons-only > .metric-box {
    min-height: 80px !important;
    padding: 14px 16px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 1px !important;
    align-content: center !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box .metric-box-label span {
    align-self: end !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-box h2 {
    align-self: start !important;
    margin: 0 !important;
    line-height: 0.95 !important;
    font-weight: 600 !important;
  }
}