/* Scoped monitoring appearance; call state, filters and refresh logic are unchanged. */
#monitor{font-family:EverycallPretendard,"Malgun Gothic",sans-serif;color:#172b4d;}
#monitor :is(button,input,select,table){font-family:inherit;}
#workspace #monitor .monitor-filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0 16px;background:white;border:0;box-shadow:none;}
#workspace #monitor .monitor-filter-bar :is(input:not([type=checkbox]),select,button),#workspace #monitor .monitor-date-shortcuts>summary{height:40px;min-height:40px;box-sizing:border-box;margin:0;border:1px solid #8590a2;border-radius:6px;background:white;color:#172b4d;font-size:14px;padding:8px 12px;}
#workspace #monitor .monitor-filter-bar button.primary{background:#0c66e4;border-color:#0c66e4;color:white;}
#workspace #monitor .monitor-refresh-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;background:transparent;}
#monitor .monitor-refresh-bar label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;}
#monitor input[type=checkbox]{accent-color:#0c66e4;}
#workspace #monitor .monitor-view-tabs{display:flex;gap:20px;border-bottom:2px solid #dfe1e6;background:white;margin:0 0 16px;padding:0;}
#workspace #monitor .monitor-view-tabs button{background:transparent;color:#44546f;border:0;border-bottom:3px solid transparent;border-radius:0;margin-bottom:-2px;padding:12px 2px;font-size:14px;min-height:44px;box-shadow:none;}
#workspace #monitor .monitor-view-tabs button[aria-selected=true]{color:#0c66e4;border-bottom-color:#0c66e4;font-weight:700;}
#monitor .monitor-panel,#monitor .monitor-board,#monitor .parity-detail{background:white;border:0;box-shadow:none;padding:0;}
#monitor .table-wrap{overflow:auto;max-height:65vh;border:1px solid #dfe1e6;border-radius:8px;}
#monitor table{font-variant-numeric:tabular-nums;border-collapse:collapse;}
#monitor table th{position:sticky!important;top:0!important;z-index:3;background:#f7f8f9!important;color:#44546f!important;border:0!important;border-bottom:1px solid #dfe1e6!important;padding:10px 12px!important;font-size:13px!important;font-weight:600!important;white-space:nowrap;}
#monitor table td{background:white!important;color:#172b4d!important;border:0!important;border-bottom:1px solid #dfe1e6!important;padding:10px 12px!important;font-size:14px!important;line-height:1.5!important;}
#monitor table tr:hover td{background:#f7f8f9!important;}
#monitor .monitor-member-table th .monitor-column-filter{color:#44546f!important;font-weight:600;font-size:13px;}
#monitor .monitor-member-table th .monitor-column-filter.filter-active{color:#0c66e4!important;}
#monitor .monitor-member-table td:nth-child(2),#monitor .monitor-member-table td:last-child{white-space:nowrap;}
#monitor .monitor-group-badge{background:#f1f2f4!important;color:#172b4d!important;border-radius:4px;font-weight:500;}
#monitor .monitor-device-detail{font-size:13px;line-height:1.5;}
#monitor .monitor-device-detail p{margin:2px 0;}
#monitor .monitor-online,#monitor .contact-time,#monitor .reference-scope{color:#626f86;font-size:13px;}
#monitor .monitor-extra-summary{margin-top:16px;border:1px solid #dfe1e6;border-radius:8px;padding:12px;}
#monitor .metrics .metric{background:white;border:1px solid #dfe1e6;border-radius:8px;box-shadow:none;padding:16px;}
#monitor .metrics .metric p{color:#44546f;font-size:13px;}
#monitor .metrics .metric strong{color:#172b4d;font-size:24px;font-variant-numeric:tabular-nums;}
#monitor :is(button,input,select,summary):focus-visible{outline:2px solid #0c66e4;outline-offset:2px;}
#monitor [hidden]{display:none!important;}
@media(max-width:900px){#monitor .monitor-member-table table{min-width:900px;}#workspace #monitor .monitor-view-tabs{gap:12px;flex-wrap:wrap;}}
/* Group identity and call state remain readable as text as well as color. */
#monitor .monitor-group-badge{background:var(--group-color,#44546f)!important;color:#fff!important;padding:3px 9px;border-radius:5px;font-weight:600;}
#monitor .monitor-group-badge[data-color="0"]{--group-color:#44546f;}
#monitor .monitor-group-badge[data-color="1"]{--group-color:#216e4e;}
#monitor .monitor-group-badge[data-color="2"]{--group-color:#6e5dc6;}
#monitor .monitor-group-badge[data-color="3"]{--group-color:#0e6b7d;}
#monitor .monitor-group-badge[data-color="4"]{--group-color:#974f0c;}
#monitor .monitor-group-badge[data-color="5"]{--group-color:#943d73;}
#monitor .monitor-group-badge[data-color="6"]{--group-color:#546b26;}
#monitor .monitor-group-badge[data-color="7"]{--group-color:#0055cc;}
#monitor .monitor-group-badge[data-color="8"]{--group-color:#805f18;}
#monitor .monitor-group-badge[data-color="9"]{--group-color:#65546f;}
#monitor .monitor-member-table [role=status][data-state]{background:var(--state-color,#596579)!important;color:white!important;border-color:transparent!important;font-weight:600;padding:4px 10px;border-radius:5px;}
#monitor [data-state=ACTIVE]{--state-color:#216e4e;}
#monitor [data-state=READY]{--state-color:#0055cc;}
#monitor [data-state=DIALING],#monitor [data-state=RESERVED]{--state-color:#0e6b7d;}
#monitor [data-state=PAUSED]{--state-color:#805f18;}
#monitor [data-state=ENDED]{--state-color:#6e5dc6;}
#monitor [data-state=UNKNOWN]{--state-color:#ae2e24;}
#monitor [data-state=OFFLINE],#monitor [data-state=NO_DEVICE],#monitor [data-state=DISABLED]{--state-color:#596579;}
#monitor .monitor-member-table .monitor-connection{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;gap:5px;margin:0;}
#monitor .monitor-member-table .monitor-online{display:block;line-height:1.4;text-align:center;font-variant-numeric:tabular-nums;}
#monitor .monitor-member-table th:nth-child(4) .monitor-column-filter{text-align:center;}
#monitor .monitor-member-table td:nth-child(4){vertical-align:middle;text-align:center;}
#monitor [data-state=OFFLINE]{--state-color:#974f0c;}
#monitor [data-state=NO_DEVICE]{--state-color:#596579;}
#monitor [data-state=DISABLED]{--state-color:#403845;}
#monitor .monitor-online[data-online=true]{color:#216e4e;font-weight:600;}
#monitor .monitor-online[data-online=true]::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#22a06b;animation:everycall-online-pulse 2s ease-in-out infinite;}
@keyframes everycall-online-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 #22a06b40;}50%{opacity:.45;box-shadow:0 0 0 4px #22a06b00;}}
@media(prefers-reduced-motion:reduce){#monitor .monitor-online[data-online=true]::before{animation:none;}}
#monitor [data-state=OFFLINE]{--state-color:#596579;}
#monitor .monitor-member-table [role=status][data-state=OFFLINE]::before{background:#ff5630;box-shadow:0 0 0 2px #ffffff26;}
#monitor .monitor-member-table [role=status][data-state=NO_DEVICE]::before{background:#c1c7d0;}

/* Monitoring overview: match the compact statistics workspace. */
#workspace #monitor .monitor-filter-bar{padding:14px 16px;background:#f7f8fa;border:1px solid #dfe4ec;border-radius:8px;margin:0 0 4px;gap:8px;}
#workspace #monitor .monitor-filter-bar :is(input:not([type=checkbox]),select,button),#workspace #monitor .monitor-date-shortcuts>summary{height:36px;min-height:36px;font-size:13px;border-color:#c4cdd9;padding:7px 10px;flex:0 0 auto;width:auto;}
#workspace #monitor .monitor-filter-bar input[type=datetime-local]{width:186px;min-width:0;max-width:100%;}
#workspace #monitor .monitor-filter-bar select{width:148px;max-width:100%;}
#workspace #monitor .monitor-refresh-bar{display:flex!important;flex-direction:row!important;justify-content:flex-end;align-items:center;gap:8px;padding:8px 0 12px;min-height:48px;width:100%;}
#workspace #monitor .monitor-refresh-bar>label{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;width:auto!important;flex:0 0 auto;white-space:nowrap;}
#workspace #monitor .monitor-refresh-bar input[type=checkbox]{width:16px!important;height:16px!important;margin:0;min-height:0;}
#workspace #monitor .monitor-refresh-bar :is(select,button){height:34px;min-height:34px;width:auto!important;flex:0 0 auto;margin:0;padding:5px 10px;border:1px solid #c4cdd9;border-radius:5px;background:#fff;color:#44546f;font-size:13px;}
#workspace #monitor .monitor-refresh-bar select{width:80px!important;}
#monitor .monitor-refresh-time{font-size:12px;color:#626f86;white-space:nowrap;min-width:145px;}
#monitor .monitor-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:2px 0 20px;}
#monitor .monitor-overview-item{border:1px solid #dfe4ec;border-radius:8px;background:#fff;padding:14px 18px;}
#monitor .monitor-overview-item>span{display:block;color:#44546f;font-size:13px;}
#monitor .monitor-overview-item>strong{display:block;font-size:28px;line-height:1.4;margin:6px 0;font-variant-numeric:tabular-nums;}
#monitor .monitor-overview-item>small{font-size:12px;color:#626f86;line-height:1.5;}
#monitor .monitor-overview-item:nth-child(2){border-top:3px solid #0c66e4;padding-top:12px;}
#monitor .monitor-overview-item:nth-child(2)>strong{color:#0c66e4;}
#monitor .monitor-overview-item:nth-child(4)>strong{color:#974f0c;}
#workspace #monitor .monitor-view-tabs{gap:28px;margin-bottom:14px;}
#monitor .monitor-member-table{border:1px solid #dfe4ec;border-radius:8px;}
#monitor .monitor-member-table table{width:100%;min-width:1000px;}
#monitor .monitor-member-table td:nth-child(3){font-weight:600;}
#monitor .monitor-member-table td:nth-child(5){text-align:left!important;min-width:270px;}
#monitor .monitor-member-table :is(th,td):last-child{min-width:165px;}
#monitor .monitor-device-detail{display:block!important;}
#monitor .monitor-device-detail .presence-phone{font-weight:600;color:#172b4d;}
#monitor .monitor-device-detail .contact-time{font-weight:400;font-size:12px;color:#626f86;}
#monitor .monitor-group-badge{font-size:12px;white-space:nowrap;}
@media(max-width:850px){#monitor .monitor-overview{grid-template-columns:repeat(2,minmax(0,1fr));}#workspace #monitor .monitor-refresh-bar{justify-content:flex-start;}#workspace #monitor .monitor-view-tabs{gap:16px;}#monitor .monitor-overview-item{padding:12px;}#monitor .monitor-overview-item>small{font-size:11px;}}

/* Compact live monitoring: prioritize visible agent rows. */
#workspace #monitor .monitor-overview{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 8px;padding:7px 0;border-bottom:1px solid #dfe4ec;}
#workspace #monitor .monitor-overview-item{display:flex;align-items:center;gap:8px;border:0;border-right:1px solid #dfe4ec;border-radius:0;padding:0 18px;background:transparent;}
#workspace #monitor .monitor-overview-item:first-child{padding-left:0;}
#workspace #monitor .monitor-overview-item:last-child{border-right:0;}
#workspace #monitor .monitor-overview-item>strong{font-size:16px;margin:0;line-height:24px;}
#workspace #monitor .monitor-overview-item>span{font-size:12px;}
#workspace #monitor .monitor-overview-item>small{display:none;}
#workspace #monitor .monitor-filter-bar{padding:8px 10px;margin:0;}
#workspace #monitor .monitor-refresh-bar{padding:5px 0;min-height:38px;}
#workspace #monitor .monitor-view-tabs{margin:0 0 6px;gap:22px;}
#workspace #monitor .monitor-view-tabs button{padding:7px 2px;min-height:35px;font-size:13px;}
#workspace #monitor #monitor-view-agents,#workspace #monitor #monitor-view-agents>.card{padding:0!important;margin:0!important;border:0!important;}
#monitor .monitor-member-table :is(th,td){padding:6px 9px!important;font-size:12px!important;line-height:1.4!important;}
#monitor .monitor-member-table td{height:42px;}
#monitor .monitor-member-table th .monitor-column-filter{font-size:12px!important;}
#monitor .monitor-member-table .monitor-connection{flex-direction:row;flex-wrap:wrap;gap:6px;}
#monitor .monitor-member-table .monitor-online{font-size:11px;white-space:nowrap;}
#monitor .monitor-member-table [role=status][data-state]{font-size:12px;padding:3px 7px;white-space:nowrap;}
#monitor .monitor-device-detail{display:flex!important;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:12px;}
#monitor .monitor-device-detail p{margin:0;}
#monitor .monitor-device-detail button{font-size:11px;padding:3px 7px;min-height:26px;}
#monitor .monitor-device-fold{font-size:11px;color:#626f86;}
#monitor .monitor-device-fold summary{cursor:pointer;white-space:nowrap;}
#monitor .monitor-device-fold[open]{flex-basis:100%;}
#monitor .monitor-device-fold[open] p{padding-top:3px;}
#monitor .monitor-member-table{max-height:calc(100vh - 300px);min-height:240px;}
#monitor .monitor-column-filters{margin:0!important;padding:4px 0!important;}
@media(max-width:700px){#workspace #monitor .monitor-overview-item{padding:2px 8px;}#monitor .monitor-member-table{max-height:65vh;}}

/* Keep live refresh beside the date preset control. */
#workspace #monitor .monitor-filter-bar>.monitor-refresh-bar{width:auto!important;flex:0 0 auto;justify-content:flex-start;margin:0 0 0 4px;padding:0;min-height:36px;gap:7px;}
#workspace #monitor .monitor-filter-bar>.monitor-refresh-bar :is(select,button){height:36px;min-height:36px;}
#workspace #monitor .monitor-filter-bar>.monitor-refresh-bar .monitor-refresh-time{min-width:0;font-size:11px;}
#workspace #monitor .monitor-filter-bar{margin-bottom:6px;}
@media(max-width:900px){#workspace #monitor .monitor-filter-bar>.monitor-refresh-bar{flex:1 1 100%;margin-left:0;}}

/* Stable column positions regardless of pending-result buttons. */
#workspace #monitor .monitor-member-table .monitor-connection{display:grid;grid-template-columns:120px 105px;justify-content:center;align-items:center;gap:8px;text-align:left;}
#workspace #monitor .monitor-member-table .monitor-connection>[role=status]{justify-self:start;}
#workspace #monitor .monitor-member-table .monitor-online{text-align:left;}
#workspace #monitor .monitor-member-table td:nth-child(4){min-width:250px;}
#workspace #monitor .monitor-member-table td:nth-child(5){min-width:410px;}
#workspace #monitor .monitor-device-detail{display:grid!important;grid-template-columns:140px 115px minmax(120px,1fr);justify-content:start!important;align-items:center;gap:4px 10px;width:100%;text-align:left!important;}
#workspace #monitor .monitor-device-detail>.presence-phone{grid-column:1;grid-row:1;white-space:nowrap;}
#workspace #monitor .monitor-device-detail>.monitor-device-fold{grid-column:2;grid-row:1;justify-self:start;}
#workspace #monitor .monitor-device-detail>button{grid-column:3;grid-row:1;justify-self:start;margin:0;white-space:nowrap;}
#workspace #monitor .monitor-device-detail>p:not(.presence-phone){grid-column:1 / -1;}
#workspace #monitor .monitor-device-detail>.monitor-device-fold[open]{grid-column:1 / -1;grid-row:2;width:100%;}

#workspace #monitor .monitor-app-version{color:#0052cc;font-weight:600;white-space:nowrap;}
#workspace #monitor .monitor-device-detail{grid-template-columns:140px minmax(155px,auto) minmax(120px,1fr);}
#workspace #monitor .monitor-device-fold>summary{color:#344563;font-weight:600;padding:4px 0;}
#workspace #monitor .monitor-device-card{margin:6px 0;padding:9px 12px;background:#fff;border:1px solid #dfe3e8;border-radius:6px;white-space:normal;}
#workspace #monitor .monitor-device-card-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#172b4d;font-size:12px;}
#workspace #monitor .monitor-device-card-head .muted{font-size:11px;font-weight:400;}
#workspace #monitor .monitor-device-facts{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 10px;margin:7px 0 0;font-size:11px;line-height:1.5;}
#workspace #monitor .monitor-device-facts dt{color:#626f86;font-weight:400;}
#workspace #monitor .monitor-device-facts dd{margin:0;color:#344563;overflow-wrap:anywhere;}
#workspace #monitor .monitor-device-history{margin-top:7px;}
#workspace #monitor .monitor-device-fold>summary{display:list-item;list-style-position:inside;padding:6px 10px;min-height:30px;box-sizing:border-box;border:1px solid #9aafd0;border-radius:5px;background:#edf3ff;color:#173b70;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;}
#workspace #monitor .monitor-device-fold>summary:hover{background:#dfeaff;border-color:#3868ad;}
#workspace #monitor .monitor-device-fold>summary:focus-visible{outline:2px solid #0052cc;outline-offset:2px;}
#workspace #monitor .monitor-device-fold[open]>summary{width:max-content;background:#dfeaff;border-color:#3868ad;}
#workspace #monitor .monitor-device-detail{grid-template-columns:minmax(0,140px) max-content max-content;justify-content:start!important;}
#workspace #monitor .monitor-device-detail>.presence-phone{white-space:normal;overflow-wrap:anywhere;}
#workspace #monitor .monitor-device-detail{grid-template-columns:140px minmax(0,1fr);align-items:center;gap:8px 10px;}
#workspace #monitor .monitor-call-info{min-width:0;text-align:left;}
#workspace #monitor .monitor-call-info .presence-phone{white-space:nowrap;font-size:12px;}
#workspace #monitor .monitor-call-info p:not(.presence-phone){font-size:10px;line-height:1.4;color:#626f86;margin-top:3px;white-space:normal;overflow-wrap:anywhere;}
#workspace #monitor .monitor-call-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px;min-width:0;}
#workspace #monitor .monitor-call-actions>button{margin:0;white-space:nowrap;}
#workspace #monitor .monitor-call-actions>.monitor-device-fold{max-width:100%;}
#workspace #monitor .monitor-call-actions>.monitor-device-fold[open]{flex-basis:100%;width:100%;}