/* V84.34 — final exact responsive layout. Table/grid rules are intentionally untouched. */

/* Desktop/tablet admin: prevent action/status overlap on medium widths. */
@media (min-width:721px) and (max-width:1500px){
  #cx72Header .cx72HeadRow{
    display:grid!important;
    grid-template-columns:70px minmax(360px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:8px 10px!important;
    align-items:center!important;
    padding:8px 12px!important;
    min-height:0!important;
  }
  #cx72Header .cx72Brand{grid-column:1!important;grid-row:1!important}
  #cx72Header .cx72SearchSlot{grid-column:2!important;grid-row:1!important;max-width:none!important;width:100%!important}
  #cx72Header .cx72Status{grid-column:3!important;grid-row:1!important;justify-content:flex-end!important;gap:7px!important;min-width:0!important}
  #cx72Header .cx72TopTools{
    grid-column:1/4!important;grid-row:2!important;
    display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important;width:100%!important
  }
  #cx72Header .cx72TopTools .cx72Btn{flex:0 0 auto!important}
}

/* Exact mobile layout requested by user. */
@media (max-width:720px){
  /* ===== Secondary viewer ===== */
  .cx8418ViewerTop{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    gap:8px!important;
    padding:8px 10px 10px!important;
    align-items:center!important;
    width:100%!important;
    min-height:0!important;
    overflow:visible!important;
    direction:ltr!important;
  }
  .cx8418ViewerTop .cx77ViewBrand{grid-column:1!important;grid-row:1!important;align-self:center!important}
  .cx8418ViewerTop .cx77ViewBrand b{display:none!important}
  .cx8418ViewerTop .cx77ViewBrand img{width:54px!important;height:54px!important;object-fit:contain!important}

  .cx8418ViewerTop .cx77TopSearch{grid-column:2/4!important;grid-row:1!important;width:100%!important;max-width:none!important;min-width:0!important}
  .cx8418ViewerTop .cxUnifiedSearchBar{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;width:100%!important
  }
  .cx8418ViewerTop #searchQ{
    height:50px!important;width:100%!important;min-width:0!important;border-radius:15px!important;font-size:17px!important;
    padding-inline:44px 12px!important;box-sizing:border-box!important
  }
  .cx8418ViewerTop #clearSearchViewer{
    display:block!important;left:12px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;font-size:20px!important
  }
  .cx8418ViewerTop .cxCancelSearchBtn{
    position:static!important;width:auto!important;min-width:112px!important;height:50px!important;border-radius:15px!important;
    padding:0 13px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    font-size:14px!important;white-space:nowrap!important;box-sizing:border-box!important
  }
  .cx8418ViewerTop .cxCancelSearchBtn span:last-child{display:inline!important}

  /* row 2: last update | connected | account */
  .cx8418ViewerTop .cxViewerMetaWrap{
    grid-column:1/3!important;grid-row:2!important;width:100%!important;display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr)!important;gap:8px!important;align-items:center!important;
    margin:0!important;direction:ltr!important
  }
  .cx8418ViewerTop .cxViewerInfoPill,
  .cx8418ViewerTop .cxViewerConnectedPill{
    width:100%!important;height:42px!important;min-width:0!important;padding:0 8px!important;border-radius:13px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;box-sizing:border-box!important
  }
  .cx8418ViewerTop .cx8418ViewerAccount{grid-column:3!important;grid-row:2!important;justify-self:end!important;align-self:center!important;margin:0!important}
  .cx8418ViewerTop .cx8418ViewerAccount .cx84AccountCard{
    min-width:44px!important;width:44px!important;height:42px!important;padding:0!important;justify-content:center!important;border-radius:12px!important
  }
  .cx8418ViewerTop .cx8418ViewerAccount .cx84AccountText,.cx8418ViewerTop .cx8418ViewerAccount .cx84Chevron{display:none!important}
  .cx8418ViewerTop .cx8418ViewerAccount .cx84Avatar{width:34px!important;height:34px!important}

  /* row 3 tools: two columns exactly as approved image */
  .cx8418ViewerTop .cx77TopActions{
    grid-column:1/4!important;grid-row:3!important;width:100%!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;direction:ltr!important;align-items:stretch!important
  }
  .cx8418ViewerTop .cx77TopActions > .cx8418Action,
  .cx8418ViewerTop .cx77TopActions > .cxViewerZoomBox{
    width:100%!important;max-width:none!important;min-width:0!important;height:48px!important;margin:0!important;
    border-radius:13px!important;padding:0 8px!important;box-sizing:border-box!important;justify-content:center!important;gap:8px!important;
    font-size:13px!important;direction:rtl!important
  }
  .cx8418ViewerTop #cxViewerCopyImage{order:1!important}
  .cx8418ViewerTop #cxViewerClearSort{order:4!important}
  .cx8418ViewerTop #cxViewerRefresh{order:5!important}
  .cx8418ViewerTop .cxViewerZoomBox{order:6!important;display:flex!important;align-items:center!important;border:1px solid #b9cde0!important;background:#fff!important;color:#1d3d63!important}
  .cx8418ViewerTop #modeAgent{order:7!important;grid-column:1/3!important}
  .cx8418ViewerTop .cxViewerZoomBtn{width:38px!important;height:34px!important;border-radius:10px!important}
  .cx8418ViewerTop .cxViewerZoomPct{min-width:58px!important;text-align:center!important;font-weight:900!important}

  /* distinct colors */
  .cx8418ViewerTop #cxViewerCopyImage{background:#eef0ff!important;border-color:#8f96ff!important;color:#3730a3!important}
  .cx8418ViewerTop #cxViewerClearSort{background:#fff6e8!important;border-color:#f4b860!important;color:#9a4f00!important}
  .cx8418ViewerTop #cxViewerRefresh{background:#e9fbf8!important;border-color:#55c9b9!important;color:#08766a!important}
  .cx8418ViewerTop #modeAgent{background:#edf5ff!important;border-color:#8dc0ff!important;color:#1f68c3!important}

  /* ===== Admin mobile: same arrangement, grid itself untouched ===== */
  #cx72Header .cx72HeadRow{
    display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;grid-template-rows:auto auto auto!important;
    gap:8px!important;padding:8px 10px 10px!important;align-items:center!important;min-height:0!important;height:auto!important
  }
  #cx72Header .cx72Brand{grid-column:1!important;grid-row:1!important}
  #cx72Header .cx72Brand img{width:54px!important;height:54px!important;object-fit:contain!important}
  #cx72Header .cx72SearchSlot{grid-column:2/4!important;grid-row:1!important;width:100%!important;max-width:none!important;min-width:0!important}
  #cx72Header .searchWrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;width:100%!important;max-width:none!important}
  #cx72Header .searchWrap input{height:50px!important;border-radius:15px!important;font-size:17px!important;min-width:0!important;width:100%!important}
  #cx72Header #cancelSearchAdmin{position:static!important;min-width:112px!important;height:50px!important;border-radius:15px!important;padding:0 13px!important;white-space:nowrap!important}

  #cx72Header .cx72Status{
    grid-column:1/4!important;grid-row:2!important;display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr) auto!important;
    gap:8px!important;width:100%!important;align-items:center!important;justify-content:stretch!important
  }
  #cx72Header .cx72Clock,#cx72Header .cx72Ready{display:flex!important;width:100%!important;height:42px!important;justify-content:center!important;padding:0 8px!important;border-radius:13px!important;font-size:12px!important;box-sizing:border-box!important}
  #cx72Header .cx84AccountCard{min-width:44px!important;width:44px!important;height:42px!important;padding:0!important;justify-content:center!important;border-radius:12px!important}
  #cx72Header .cx84AccountText,#cx72Header .cx84Chevron{display:none!important}
  #cx72Header .cx84Avatar{width:34px!important;height:34px!important}

  #cx72Header .cx72TopTools{
    grid-column:1/4!important;grid-row:3!important;width:100%!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:stretch!important;justify-content:stretch!important
  }
  #cx72Header .cx72TopTools .cx72Btn,#cx72Header .cx72TopTools .cxGridZoom{
    width:100%!important;height:48px!important;min-width:0!important;max-width:none!important;margin:0!important;border-radius:13px!important;
    justify-content:center!important;padding:0 8px!important;box-sizing:border-box!important;font-size:13px!important
  }
  #cx72Header #cx72Copy{order:1!important}
  #cx72Header #cx72ClearSort{order:4!important}
  #cx72Header #cx72Refresh{order:5!important}
  #cx72Header #cxGridZoom{order:6!important;display:flex!important;align-items:center!important}
  #cx72Header #cxGridZoom button{width:38px!important;height:34px!important;border-radius:10px!important}
  #cx72Header #cxGridZoom span{min-width:58px!important;text-align:center!important;font-weight:900!important}

  /* ===== Bottom page bar with live counts ===== */
  .cxBottomBar{padding:7px 8px 10px!important;min-height:58px!important}
  .cxBottomBar .tabs{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:0!important;overflow:visible!important}
  .cxBottomBar .tabs button{
    min-width:0!important;width:100%!important;height:48px!important;padding:0 7px!important;border-radius:14px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;font-size:12px!important;white-space:nowrap!important
  }
  .cxBottomBar .tabs button .cx8434TabCount{
    min-width:28px!important;height:28px!important;padding:0 8px!important;border-radius:999px!important;background:#eef4f8!important;color:#1e4f78!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;font-weight:900!important;font-size:13px!important;line-height:1!important
  }
  .cxBottomBar .tabs button.active .cx8434TabCount{background:#fff!important;color:#1177c9!important}
  #cx72SheetCount{display:none!important}
}