/* REVTEK_LIVE_PAGE_COMPACT_LAYOUT_C1
   Cosmetic-only override for the REVTEK Web Live Calls page. */

.live-summary-metrics{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:10px!important;
}

.live-summary-metrics .metric{
  min-width:0!important;
  min-height:96px!important;
  padding:12px 14px!important;
  border-radius:9px!important;
}

.live-summary-metrics .metric .top{
  gap:6px!important;
  align-items:center!important;
  font-size:10px!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;
}

.live-summary-metrics .metric strong{
  font-size:25px!important;
  line-height:1!important;
  margin:8px 0 5px!important;
}

.live-summary-metrics .metric small{
  display:block!important;
  font-size:9px!important;
  line-height:1.22!important;
  min-height:22px!important;
  overflow-wrap:anywhere!important;
}

.live-summary-metrics .metric .tag{
  padding:2px 6px!important;
  font-size:8px!important;
}

.live-summary-metrics + .callout{
  padding:8px 12px!important;
  margin:0 0 10px!important;
  min-height:0!important;
}

.live-summary-metrics + .callout .panel-title{
  margin:0!important;
  gap:10px!important;
  align-items:center!important;
}

.live-summary-metrics + .callout .panel-title > span:first-child{
  font-size:10px!important;
  line-height:1.25!important;
}

.live-summary-metrics + .callout .live-level{
  white-space:nowrap!important;
  font-size:10px!important;
}

@media (max-width:1250px){
  .live-summary-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:720px){
  .live-summary-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Live Calls viewport: keep the page context visible and scroll call rows only. */
.live-table{
  height:clamp(330px,52dvh,680px)!important;
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
}

.live-table thead th{
  position:sticky!important;
  top:0;
  z-index:3;
  box-shadow:0 1px 0 var(--line,#dfe6ef);
}

@media (max-width:720px){
  #view{padding:10px!important}

  .live-summary-metrics{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(138px,44vw)!important;
    grid-template-columns:none!important;
    gap:8px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    padding:0 0 6px!important;
  }

  .live-summary-metrics .metric{
    min-height:82px!important;
    padding:10px 11px!important;
    scroll-snap-align:start;
  }

  .live-summary-metrics .metric strong{
    font-size:22px!important;
    margin:6px 0 3px!important;
  }

  .live-summary-metrics + .callout{
    display:none!important;
  }

  #view .toolbar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
    padding:9px!important;
  }

  #view .toolbar #live-search,
  #view .toolbar .live-filter-count{
    grid-column:1/-1;
  }

  #view .toolbar input,
  #view .toolbar select,
  #view .toolbar button{
    width:100%!important;
    min-width:0!important;
    min-height:42px;
  }

  #view .toolbar .spacer{display:none!important}

  .live-table{
    height:45dvh!important;
    min-height:250px!important;
    border-radius:8px!important;
  }

  .live-table table{
    min-width:1180px!important;
  }

  .live-table th,
  .live-table td{
    padding:10px 9px!important;
  }
}

@media (max-width:420px){
  .live-summary-metrics{grid-auto-columns:minmax(132px,62vw)!important}
  #view .toolbar{grid-template-columns:1fr}
  #view .toolbar #live-search,
  #view .toolbar .live-filter-count{grid-column:auto}
}