/* Device workspace: a fixed close control and an independently scrolling body. */
#deviceDialog {
  width:min(1280px,calc(100vw - 40px));max-width:calc(100vw - 40px);
  height:auto;max-height:calc(100dvh - 40px);margin:auto;padding:0;
  overflow:hidden;border:1px solid #fff;border-radius:24px;
  background:#f3f5fc;color:#243149;
  box-shadow:0 30px 100px #17234440,inset 0 1px 0 #fff;
}
#deviceDetails {max-height:calc(100dvh - 42px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-top:90px}
#deviceDialog .dialog-close {
  position:absolute;inset:14px 16px auto auto;float:none;margin:0;z-index:12;
  display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;
  border:1px solid #d7dbec;border-radius:50%;background:#fff;color:#3f4868;
  box-shadow:0 4px 14px #29325d18;font-size:28px;line-height:1;
}
#deviceDialog .dialog-close:hover {background:#eeeaff;color:#4936bd;border-color:#a99de6}
#deviceDialog button:focus-visible {outline:3px solid #6552d8;outline-offset:3px}
#deviceDialog .device-detail-header {background:#ffffffe6;padding-right:76px}
#deviceDialog .device-support-bar {background:#ffffffb3;border-color:#ffffffb3}
#deviceDialog .device-title-row {padding-right:0}
#deviceDialog .device-tab {background:transparent}
#deviceDialog .device-tabs {
  position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:4px;overflow:visible;
  padding:10px 70px 10px 16px;margin:0;border:0;border-bottom:1px solid #ffffffb3;
  background:#e9ecf7;box-shadow:inset 0 3px 7px #3c477b18,inset 0 -1px 0 #fff;
  scrollbar-width:thin;
}
#deviceDialog .device-tabs button {
  min-height:40px;padding:9px 10px;gap:6px;border:1px solid transparent;border-radius:13px;
  background:transparent;color:#55617b;font-size:12px;font-weight:600;
  box-shadow:none;transition:background .15s,border-color .15s;
}
#deviceDialog .device-tabs button:hover {background:#ffffff85;color:#4835b3}
#deviceDialog .device-tabs button.active {
  background:linear-gradient(135deg,#d7d7f8,#f0edff);border-color:#b7aceb;color:#403096;
  box-shadow:inset 3px 3px 7px #8c83bd38,inset -3px -3px 6px #ffffffd9;
}
#deviceDialog .device-tabs button .ui-icon {width:15px;height:15px;flex-basis:15px}
#deviceDialog .device-tabs .card-count {background:#ffffffb3;color:#55449d}
#deviceDialog :is(.vital-card,.detail-card,.employee-panel,.table-panel,.action-card,.capture-settings) {
  background:#ffffffe6;border:1px solid #ffffffd9;border-radius:16px;
  box-shadow:0 5px 18px #344c7510,inset 0 1px 0 #fff;
}
#deviceDialog .table-panel th {background:#eef0f8b3;color:#526078}
#deviceDialog .table-panel td {border-color:#dfe4ee99}
#deviceDialog .outlook-stats>div {background:#f9faffe6;border-color:#dbe0f0;border-radius:16px}
#deviceDialog .outlook-stats>.outlook-critical {background:#fff2f3c9;border-color:#f3c4cc}
#deviceDialog :is(.quiet,input,select,textarea) {border-radius:12px}
#deviceDialog .service-buttons {gap:8px}
#deviceDialog .service-buttons button {
  min-height:40px;padding:9px 15px;border-radius:999px;border:1px solid;
  font-weight:650;box-shadow:0 2px 5px #2431490b;transition:filter .15s,box-shadow .15s;
}
#deviceDialog [data-service-type=ServiceStart] {color:#11633d;background:#e1f5e9;border-color:#9bd8b7}
#deviceDialog [data-service-type=ServiceStop] {color:#ab2941;background:#ffebef;border-color:#efa6b5}
#deviceDialog [data-service-type=ServiceRestart] {color:#92510d;background:#fff1d6;border-color:#ebc27e}
#deviceDialog .service-buttons button:not(:disabled):hover {filter:brightness(.95);box-shadow:0 3px 9px #24314920}
#deviceDialog .service-buttons button:disabled {opacity:.5;cursor:not-allowed;box-shadow:none}
#deviceDialog .view-screen-button {border-radius:999px;padding:11px 20px;color:#fff;background:#5543d9}
#deviceDialog .detail-top-actions .power-circle {padding:0;border-radius:50%;width:40px;height:40px;min-height:40px;flex-basis:40px}
#deviceDialog .detail-top-actions .power-restart {background:#eeeaff;color:#5140b3;border:1px solid #c7bdf0}
#deviceDialog .detail-top-actions .power-shutdown {background:#ffebef;color:#b42d46;border:1px solid #efa6b5}
#deviceDialog .muted {color:#606d83}
#deviceDialog::backdrop {background:#202b465c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #deviceDialog {background:linear-gradient(125deg,#eaf1fff2,#f1ecffe8 55%,#e8f8f3ed);backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%)}
  #deviceDialog .device-tabs {background:#e9ecf7e8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
@media(max-width:760px) {
  #deviceDialog {inset:0;width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px);border-radius:18px;padding:0}
  #deviceDetails {max-height:calc(100dvh - 18px);scroll-padding-top:86px}
  #deviceDialog .dialog-close {top:10px;right:12px}
  #deviceDialog .device-detail-header {padding:24px 68px 18px 18px}
  #deviceDialog .device-tabs {flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:8px 66px 8px 10px}
  #deviceDialog .device-tabs button {min-height:44px;padding:10px 12px}
  #deviceDialog .device-tab {padding:20px 14px}
  #deviceDialog .service-buttons button {min-height:44px}
  #deviceDialog :is(#detailNetwork table,#detailNetwork tbody,#detailNetwork tr,#detailNetwork td) {display:block;width:100%}
  #deviceDialog #detailNetwork thead {display:none}
  #deviceDialog #detailNetwork tr {padding:12px;border-bottom:1px solid #dfe4ee}
  #deviceDialog #detailNetwork td {padding:7px;overflow-wrap:anywhere;border:0}
  #deviceDialog #detailNetwork td::before {display:block;color:#606d83;font-size:11px;margin-bottom:4px}
  #detailNetwork td:nth-child(1)::before {content:'Adapter'}#detailNetwork td:nth-child(2)::before {content:'IP addresses'}
  #detailNetwork td:nth-child(3)::before {content:'MAC address'}#detailNetwork td:nth-child(4)::before {content:'Link speed'}
  #detailNetwork td:nth-child(5)::before {content:'State'}#detailNetwork td:nth-child(6)::before {content:'Captured'}
  #deviceDialog #detailNetwork td[colspan]::before {content:none}
}
@media(prefers-reduced-transparency:reduce) {
  #deviceDialog {background:#f3f5fc;backdrop-filter:none;-webkit-backdrop-filter:none}
  #deviceDialog .device-tabs {background:#e9ecf7;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce) {#deviceDialog button {transition:none}}