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

.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(6, 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: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;
  }
}


/* Match the PC realtime header controls to the PC home metric/chip bar. */
@media screen and (min-width: 1024px) {
  html.route-realtime .pc-realtime-routebar,
  html.route-realtime .pc-realtime-date-badge,
  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-routebar,
  body:has(#trouble-list-panel[style*="display: block"]) .pc-realtime-date-badge {
    display: none !important;
  }

  html.route-realtime .metric-header-fixed:not(.hidden-metric) {
    display: grid !important;
    grid-template-columns: 430px minmax(0, 1fr) !important;
    grid-template-areas:
      "chips metrics"
      "breakdown breakdown" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: stretch !important;
    padding: 8px 12px 6px !important;
    background: #ffffff !important;
    border-bottom: 0.5px solid #e8eaed !important;
    box-shadow: none !important;
  }

  html.route-realtime .region-filter-full-row {
    grid-area: chips !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.route-realtime .region-filter-full-row > div {
    display: block !important;
  }

  html.route-realtime #region-chip-bar.region-chip-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  html.route-realtime #region-chip-bar.region-chip-bar::before {
    content: none !important;
  }

  html.route-realtime #region-chip-bar .region-chip-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.route-realtime #region-chip-bar .region-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
    padding: 4px 6px !important;
    background: #ffffff !important;
    border: 0.5px solid #e5e7eb !important;
    box-shadow: none !important;
    color: #6b7280 !important;
  }

  html.route-realtime #region-chip-bar .region-chip:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
  }

  html.route-realtime #region-chip-bar .region-chip--active {
    background: #1a2744 !important;
    border-color: #1a2744 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  html.route-realtime #region-chip-bar .region-chip .region-chip__label {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.route-realtime #region-chip-bar .region-chip .region-chip__count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 16px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    opacity: 1 !important;
  }

  html.route-realtime #region-chip-bar .region-chip--active .region-chip__count {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
  }

  html.route-realtime .metric-bar.metric-bar--buttons-only {
    grid-area: metrics !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 0.5px solid #e8eaed !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html.route-realtime .metric-bar.metric-bar--buttons-only > .metric-box {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: start !important;
    gap: 1px 12px !important;
    min-height: 80px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-right: 0.5px solid #f0f0f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html.route-realtime .metric-bar.metric-bar--buttons-only > .metric-box:last-child {
    border-right: none !important;
  }

  html.route-realtime .metric-box .metric-box-label {
    display: contents !important;
  }

  html.route-realtime .metric-box .metric-box-label iconify-icon,
  html.route-realtime .metric-box .metric-box-label svg {
    display: inline-flex !important;
    grid-row: 1 / span 2 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
    border-radius: 14px !important;
    color: #1267e8 !important;
    background: #e8f1ff !important;
    box-sizing: border-box !important;
  }

  html.route-realtime .metric-box[data-metric-key="unprocessed"] .metric-box-label iconify-icon,
  html.route-realtime .metric-box[data-metric-key="unprocessed"] .metric-box-label svg {
    color: #ef4444 !important;
    background: #ffe7e7 !important;
  }

  html.route-realtime .metric-box[data-metric-key="recall"] .metric-box-label iconify-icon,
  html.route-realtime .metric-box[data-metric-key="recall"] .metric-box-label svg {
    color: #f97316 !important;
    background: #fff0df !important;
  }

  html.route-realtime .metric-box[data-metric-key="duplicate_site"] .metric-box-label iconify-icon,
  html.route-realtime .metric-box[data-metric-key="duplicate_site"] .metric-box-label svg {
    color: #d99100 !important;
    background: #fff6dc !important;
  }

  html.route-realtime .metric-box[data-metric-key="accident"] .metric-box-label iconify-icon,
  html.route-realtime .metric-box[data-metric-key="accident"] .metric-box-label svg {
    color: #7c3aed !important;
    background: #f0e5ff !important;
  }

  html.route-realtime .metric-box .metric-box-label span {
    align-self: end !important;
    margin: 0 !important;
    color: #172033 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html.route-realtime .metric-box h2 {
    align-self: start !important;
    margin: 0 !important;
    color: #071c44 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 0.95 !important;
  }

  html.route-realtime .metric-box h2::after {
    content: none !important;
  }

  html.route-realtime .metric-box[data-metric-key="unprocessed"] h2,
  html.route-realtime .metric-box[data-metric-key="recall"] h2,
  html.route-realtime .metric-box[data-metric-key="long_term"] h2 {
    color: #ef4444 !important;
  }

  html.route-realtime .metric-box[data-metric-key="duplicate_site"] h2 {
    color: #d99100 !important;
  }

  html.route-realtime .metric-box[data-metric-key="accident"] h2 {
    color: #7c3aed !important;
  }

  html.route-realtime .metric-breakdown-strip {
    grid-area: breakdown !important;
    margin-top: 0 !important;
  }

  html.route-realtime #dashboard-stack.content-area {
    margin-top: 126px !important;
  }
}


/* FINAL OVERRIDE (PC realtime): use same header style as PC home only */
@media screen and (min-width: 900px) {
  html.route-home .metric-header-fixed:not(.hidden-metric),
  html.route-realtime .metric-header-fixed:not(.hidden-metric),
  html.route-list .metric-header-fixed:not(.hidden-metric),
  body:has(#trouble-list-panel) .metric-header-fixed:not(.hidden-metric) {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    grid-template-areas: "chips metrics" "breakdown breakdown" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: stretch !important;
    padding: 8px 12px 6px !important;
    background: #ffffff !important;
  }

  html.route-home .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  html.route-list .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  body:has(#trouble-list-panel) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row {
    grid-area: chips !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  html.route-home #region-chip-bar.region-chip-bar,
  html.route-realtime #region-chip-bar.region-chip-bar,
  html.route-list #region-chip-bar.region-chip-bar,
  body:has(#trouble-list-panel) #region-chip-bar.region-chip-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  html.route-home #region-chip-bar.region-chip-bar::before,
  html.route-realtime #region-chip-bar.region-chip-bar::before,
  html.route-list #region-chip-bar.region-chip-bar::before,
  body:has(#trouble-list-panel) #region-chip-bar.region-chip-bar::before {
    content: none !important;
  }

  html.route-home #region-chip-bar .region-chip-row,
  html.route-realtime #region-chip-bar .region-chip-row,
  html.route-list #region-chip-bar .region-chip-row,
  body:has(#trouble-list-panel) #region-chip-bar .region-chip-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.route-home #region-chip-bar .region-chip,
  html.route-realtime #region-chip-bar .region-chip,
  html.route-list #region-chip-bar .region-chip,
  body:has(#trouble-list-panel) #region-chip-bar .region-chip {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    max-width: none !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
    padding: 3px 4px !important;
  }

  html.route-home .metric-bar.metric-bar--buttons-only,
  html.route-realtime .metric-bar.metric-bar--buttons-only,
  html.route-list .metric-bar.metric-bar--buttons-only,
  body:has(#trouble-list-panel) .metric-bar.metric-bar--buttons-only {
    grid-area: metrics !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* kill legacy high-specificity realtime rules */
  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar.region-chip-bar,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) #region-chip-bar.region-chip-bar {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 6px !important;
    justify-content: stretch !important;
  }
  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip-row,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
  }
  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) #region-chip-bar .region-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    padding: 4px 6px !important;
  }
}

/* hard-fix: keep metrics on the right column on PC realtime */
@media screen and (min-width: 801px) {
  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric),
  body:has(#trouble-list-panel[style*="display:block"]) .metric-header-fixed:not(.hidden-metric),
  html.route-home .metric-header-fixed:not(.hidden-metric),
  html.route-realtime .metric-header-fixed:not(.hidden-metric) {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    grid-template-areas:
      "chips metrics"
      "breakdown breakdown" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: stretch !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  body:has(#trouble-list-panel[style*="display:block"]) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  html.route-home .metric-header-fixed:not(.hidden-metric) .region-filter-full-row,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) .region-filter-full-row {
    grid-area: chips !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row > div,
  body:has(#trouble-list-panel[style*="display:block"]) .metric-header-fixed:not(.hidden-metric) .region-filter-full-row > div,
  html.route-home .metric-header-fixed:not(.hidden-metric) .region-filter-full-row > div,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) .region-filter-full-row > div {
    display: block !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) .metric-bar.metric-bar--buttons-only,
  body:has(#trouble-list-panel[style*="display:block"]) .metric-header-fixed:not(.hidden-metric) .metric-bar.metric-bar--buttons-only,
  html.route-home .metric-header-fixed:not(.hidden-metric) .metric-bar.metric-bar--buttons-only,
  html.route-realtime .metric-header-fixed:not(.hidden-metric) .metric-bar.metric-bar--buttons-only {
    grid-area: metrics !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #dashboard-stack.content-area,
  body:has(#trouble-list-panel[style*="display:block"]) #dashboard-stack.content-area,
  html.route-realtime #dashboard-stack.content-area,
  html.route-home #dashboard-stack.content-area,
  html.route-list #dashboard-stack.content-area {
    margin-top: 112px !important;
    padding-top: 0 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) #trouble-list-panel .pc-realtime-panel,
  body:has(#trouble-list-panel[style*="display:block"]) #trouble-list-panel .pc-realtime-panel,
  html.route-realtime #trouble-list-panel .pc-realtime-panel,
  html.route-home #trouble-list-panel .pc-realtime-panel,
  html.route-list #trouble-list-panel .pc-realtime-panel {
    margin-top: 4px !important;
  }

  html.route-home #region-chip-bar .region-chip .region-chip__label,
  html.route-realtime #region-chip-bar .region-chip .region-chip__label,
  html.route-list #region-chip-bar .region-chip .region-chip__label,
  body:has(#trouble-list-panel) #region-chip-bar .region-chip .region-chip__label {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }
  html.route-home #region-chip-bar .region-chip .region-chip__count,
  html.route-realtime #region-chip-bar .region-chip .region-chip__count,
  html.route-list #region-chip-bar .region-chip .region-chip__count,
  body:has(#trouble-list-panel) #region-chip-bar .region-chip .region-chip__count {
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b778c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    opacity: 0.95 !important;
  }
  html.route-home #region-chip-bar .region-chip--active .region-chip__count,
  html.route-realtime #region-chip-bar .region-chip--active .region-chip__count,
  html.route-list #region-chip-bar .region-chip--active .region-chip__count,
  body:has(#trouble-list-panel) #region-chip-bar .region-chip--active .region-chip__count {
    color: #ffffff !important;
  }

  html.route-home .metric-box h2::after,
  html.route-realtime .metric-box h2::after,
  html.route-list .metric-box h2::after,
  body:has(#trouble-list-panel) .metric-box h2::after {
    content: "건";
    margin-left: 6px;
    font-size: 0.42em;
    font-weight: 700;
    color: #6b7280;
    vertical-align: middle;
  }
}

/* FINAL OVERRIDE: unify PC sidebar style to main style on all pages */
@media screen and (min-width: 801px) {
  #sidebar-root.sidebar,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar {
    width: 180px !important;
    background: #1a2744 !important;
    color: #dce8fa !important;
    border-right: 0.5px solid rgba(255, 255, 255, 0.10) !important;
    padding: 14px 10px 12px !important;
    box-shadow: none !important;
  }

  #sidebar-root.sidebar .sidebar-pc-brand,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand {
    padding: 2px 6px 12px !important;
    margin: 0 2px 8px !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.10) !important;
  }
  #sidebar-root.sidebar .sidebar-pc-brand-title,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
  }
  #sidebar-root.sidebar .sidebar-pc-brand-meta,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-pc-brand-meta {
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #9bb3df !important;
  }

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

  #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link,
  #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link:visited,
  #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link:focus,
  #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link:active,
  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-nav-grid > a.nav-link:visited,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link:focus,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-nav-grid > a.nav-link:active {
    color: #dce8fa !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    margin: 0 2px 4px !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  #sidebar-root.sidebar .sidebar-work-group > summary.sidebar-work-summary,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-work-group > summary.sidebar-work-summary {
    margin: 0 2px 4px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #dce8fa !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  #sidebar-root.sidebar .sidebar-work-subnav .nav-link,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-work-subnav .nav-link {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  #sidebar-root.sidebar .sidebar-logout-btn,
  body:has(#trouble-list-panel[style*="display: block"]) #sidebar-root.sidebar .sidebar-logout-btn {
    height: 36px !important;
    min-height: 36px !important;
    margin: 8px 6px 4px !important;
    width: calc(100% - 12px) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
  }

  body:has(#trouble-list-panel[style*="display: block"]) .metric-header-fixed:not(.hidden-metric) {
    left: 180px !important;
  }
}