:root {
  font-family: system-ui, "Malgun Gothic", sans-serif;
  color: #18334b;
  background: #f2f5f9;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  border: 1px solid #c3ceda;
  background: white;
  color: #254664;
  border-radius: 5px;
  padding: 8px 13px;
  cursor: pointer;
}
button:hover {
  background: #e8f1fc;
}
button:disabled {
  opacity: 0.45;
  cursor: wait;
}
.primary,
nav button.active {
  background: #245aa4;
  color: white;
  border-color: #245aa4;
}
.hidden {
  display: none !important;
}
header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border-bottom: 1px solid #cfdae5;
  padding: 14px 22px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #16447f;
}
.subtitle {
  color: #687e95;
}
nav {
  display: flex;
  gap: 6px;
  flex: 1;
  margin-left: 22px;
}
.layout {
  display: flex;
  min-height: calc(100vh - 66px);
}
aside {
  width: 220px;
  flex-shrink: 0;
  background: #eaf0f7;
  border-right: 1px solid #cbd7e4;
  padding: 20px 14px;
}
aside button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  background: transparent;
  border: 0;
}
aside button.selected {
  background: #cedff3;
  color: #17497e;
}
aside details {
  padding: 8px 0;
}
aside details button {
  padding-left: 18px;
}
main {
  min-width: 0;
  flex: 1;
  padding: 24px;
}
h1 {
  font-size: 24px;
  margin: 0 0 8px;
}
h2 {
  font-size: 16px;
  margin: 0 0 14px;
}
h3 {
  font-size: 14px;
}
p {
  line-height: 1.6;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.page-title p {
  margin: 0;
  color: #6c8094;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat {
  background: white;
  border: 1px solid #d3deea;
  padding: 18px;
  border-radius: 7px;
}
.stat strong {
  display: block;
  font-size: 27px;
  color: #245aa4;
  margin-top: 8px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar h2 {
  margin: 0;
  flex: 1;
}
.toolbar input {
  width: 290px;
}
input,
select,
textarea {
  padding: 9px;
  border: 1px solid #b9c8d9;
  border-radius: 4px;
  color: #18334b;
  background: white;
  max-width: 100%;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #a2c6ee;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 13px;
  text-align: left;
}
th {
  background: #dce7f3;
  color: #294963;
  font-weight: 600;
  white-space: nowrap;
}
td,
th {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e9f0;
}
tbody tr:nth-child(even) {
  background: #f5f8fc;
}
tbody tr.clickable {
  cursor: pointer;
}
tbody tr.selected {
  background: #d2e6f7;
}
.table-wrap {
  overflow: auto;
  border: 1px solid #d2dce8;
  border-radius: 5px;
}
.host-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.host-layout > .table-wrap {
  flex: 1;
  max-height: 56vh;
}
.detail {
  background: white;
  border: 1px solid #ccd9e5;
  border-radius: 5px;
  padding: 20px;
  width: 310px;
  overflow-wrap: anywhere;
}
.detail dt {
  color: #6c8195;
  margin-top: 12px;
}
.detail dd {
  margin: 4px 0;
}
.events {
  margin-top: 20px;
}
.events .table-wrap {
  max-height: 240px;
}
.events summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
}
.muted {
  color: #718396;
  font-size: 12px;
}
.card {
  background: white;
  border: 1px solid #d3deea;
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 18px;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
label {
  display: block;
  margin-bottom: 14px;
}
label input,
label select,
label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.inline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.inline input {
  width: auto;
  margin: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 18px;
}
.wide {
  grid-column: 1/-1;
}
.account {
  max-width: 620px;
}
.badge {
  background: #edf4fa;
  padding: 6px 12px;
  border-radius: 15px;
}
.subnet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  border-top: 1px solid #e0e8f0;
}
.subnet > div {
  flex: 1;
}
.subnet p {
  margin: 4px 0;
}
#notice {
  padding: 12px 18px;
  margin-bottom: 18px;
  background: #e1f0e7;
  border: 1px solid #99cdb0;
  border-radius: 5px;
}
#notice.error {
  background: #fff0ee;
  border-color: #dcb3ae;
  color: #9b3029;
}
#loginError,
#dhcpError {
  color: #a02f29;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.login form {
  width: 400px;
  background: white;
  padding: 38px;
  border: 1px solid #d4deea;
  border-radius: 10px;
  box-shadow: 0 16px 45px #17345312;
}
.login h1 {
  font-size: 19px;
  margin: 24px 0;
}
.login button {
  width: 100%;
}
dialog {
  max-width: 600px;
  width: 90%;
  border: 1px solid #becddd;
  border-radius: 9px;
  padding: 26px;
  box-shadow: 0 16px 60px #0003;
}
dialog::backdrop {
  background: #17304760;
}
dialog textarea {
  width: 100%;
  font-family: monospace;
}
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
#modalText {
  white-space: pre-wrap;
}
#subnetList:empty:after {
  content: "등록된 할당 대역이 없습니다.";
  display: block;
  color: #718396;
  padding: 24px;
  text-align: center;
}
@media (max-width: 1000px) {
  .subtitle {
    display: none;
  }
  header {
    flex-wrap: wrap;
  }
  nav {
    order: 2;
    width: 100%;
    margin: 0;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  aside {
    width: 175px;
  }
}
@media (max-width: 700px) {
  main {
    padding: 15px;
  }
  aside {
    display: none;
  }
  .host-layout {
    flex-direction: column;
  }
  .detail {
    width: 100%;
  }
  .two-col,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .host-layout > .table-wrap {
    width: 100%;
  }
}

/* Familiar IP-Block monitoring layout. */
:root {font-size:12px;color:#092b4b;background:#edf0f5}
button,input,select,textarea,.card,.table-wrap,.detail {border-radius:0}
button {padding:6px 10px;border-color:#99adc5;background:#f5f8fc}
header {height:56px;padding:8px 20px;gap:12px;background:#edf0f5;position:relative}
.probe-window-toggle {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:5px;flex-shrink:0}
.probe-window-toggle svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.probe-window-toggle[aria-expanded="true"] {background:#c5d8ee;border-color:#819bb9}
header .brand {font-size:16px;letter-spacing:0} .subtitle {font-size:19px;color:#102b45;font-weight:600}
header nav {margin-left:15px} header nav button.active,#settingsTab.active {background:#c5d8ee;color:#102b45;border-color:#819bb9}
#receiveStatus {color:#27756a;font-size:11px}
.layout {height:calc(100vh - 56px);min-height:0;overflow:hidden}
#sidebar {width:190px;padding:6px;background:#edf0f5;display:flex;flex-direction:column;gap:0}
#sidebar h3 {margin:0;padding:9px 7px;background:white;border:1px solid #9dafc7;font-weight:400}
#tree,#probeList {background:white;border:1px solid #9dafc7;border-top:0;overflow:auto;padding:4px;min-height:80px}
#tree {flex:1;margin-bottom:8px} #probeList {flex:1}
#sidebar button {margin:1px 0;padding:5px 8px} #sidebar details {padding:3px 0} #sidebar details button {padding-left:22px}
#sidebar button.selected {background:#bdd7ea;outline:1px solid #6899c4}
main {padding:4px 8px;overflow:auto;display:flex;flex-direction:column}
#monitor {min-height:0;flex:1;display:flex;flex-direction:column;border:1px solid #99adc5;background:#d9e4f1}
.stats {display:flex;gap:4px;margin:0;padding:4px;background:#c3d5ec;flex-wrap:wrap}
.stat {padding:4px 9px;border:1px solid #8ea7c6;border-radius:0;background:#e1ebf8;display:flex;gap:14px;align-items:center}
.stat strong {font-size:12px;margin:0;color:inherit}
.toolbar {margin:0;padding:5px 7px;gap:6px;border-top:1px solid #99adc5}
.toolbar h2 {font-size:12px} .toolbar input {width:270px;padding:6px} .toolbar select {padding:5px}
.host-layout {flex:1;min-height:140px;gap:0;align-items:stretch}
.host-layout>.table-wrap {max-height:none;min-width:0;border-left:0;border-right:0;background:#d9e4f1}
#monitor table {font-size:11px;white-space:nowrap;background:#dce6f2}
#monitor td,#monitor th {padding:4px 6px;border:1px solid #bfcede;height:24px}
#monitor th {position:sticky;top:0;background:#aebfd4;color:#102d48;z-index:1;font-weight:400}
#monitor tbody tr:nth-child(even) {background:#edf3fa}
#monitor tbody tr:hover {background:#d0e2ef}
#monitor tbody tr.selected {background:#b3d3e2}
.detail {width:330px;min-width:280px;overflow:auto;padding:12px;background:#edf2f8}
.detail h2 {font-size:14px} .detail dt {margin-top:8px}.detail dd {margin:3px 0}
.events {flex-shrink:0;margin:0;border-top:5px solid #a5b7cb}
.events summary {padding:6px 8px;font-size:12px;background:#c7d8ec}
.events .table-wrap {height:170px;max-height:30vh;resize:vertical;min-height:70px}
#monitor>p.muted {margin:0;padding:4px;font-size:11px;background:#eaf0f8}
.page:not(#monitor) {padding:14px}.page h1 {font-size:20px}
.host-menu {position:fixed;z-index:20;min-width:175px;padding:4px;background:#f5f7fa;border:1px solid #8297b0;box-shadow:2px 3px 9px #0003}
.host-menu button {display:block;width:100%;border:0;text-align:left;background:transparent}
#hostMenu .host-menu-group + .host-menu-group, #hostMenu > button {border-top:1px solid #aabbd0;margin-top:3px;padding-top:4px}
.host-menu-group-title {padding:3px 10px 1px;color:#607590;font-size:11px;font-weight:600}
.host-menu button:hover {background:#c8ddee}
.connection-online {color:#087935}.connection-offline {color:#8c5560}
#notice {flex:none;margin:4px 8px;padding:6px 9px}
.connection-blocked {color:#765800;background:#fff2a8;font-weight:600;white-space:nowrap}
@media(max-width:900px){header {height:auto;flex-wrap:wrap;padding:7px}.layout {height:calc(100dvh - 90px)}header .subtitle {font-size:15px}#receiveStatus {display:none}#sidebar{width:155px}.toolbar input{width:180px}.detail{min-width:220px;width:240px}.two-col{grid-template-columns:1fr}}
@media(max-width:600px){#sidebar{width:125px}.host-layout{position:relative}.detail{position:absolute;right:0;top:0;bottom:0;width:90%;z-index:3}.toolbar h2{flex-basis:100%}header nav{margin-left:0}.form-grid{grid-template-columns:1fr}}

.detail-close {float:right}

/* Manual pp.14-21: menu, shortcuts, Probe tree, host area and lower log. */
#app {height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#app>header,#classicMenu {flex:none}
#app>.layout {flex:1;height:auto;min-height:0}
#classicMenu {display:flex;align-items:center;margin:0;width:100%;gap:3px;padding:3px 12px;background:#edf0f5;border-bottom:1px solid #a7b7ca;order:initial}
#classicMenu details {position:relative}
#classicMenu summary {list-style:none;cursor:pointer;padding:4px 12px}
#classicMenu summary::-webkit-details-marker {display:none}
#classicMenu details[open]>summary,#classicMenu summary:hover {background:#c5d8ee}
#classicMenu details>div {position:absolute;top:100%;left:0;z-index:15;min-width:225px;padding:4px;background:#f5f8fc;border:1px solid #99adc5;box-shadow:2px 3px 7px #0002}
#classicMenu button {display:block;text-align:left;width:100%;border:0;white-space:nowrap}
#classicMenu button:hover {background:#c5d8ee}
.stats .stat.active {background:#b4cce6;border-color:#587fa7}
@media(max-width:600px){#classicMenu{padding:3px;gap:0}#classicMenu summary{padding:4px 9px}#classicMenu details>div{min-width:180px}#classicMenu details:last-child>div{left:auto;right:0}}

.host-detail-actions {display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px}

.host-action-wrap {position:relative;display:inline-flex}
.host-action-icon {display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:6px}
.host-action-icon svg {width:22px;height:22px}
.host-action-tooltip {display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:20;white-space:nowrap;background:#173651;color:white;padding:5px 8px;border:1px solid #99adc5;pointer-events:none;font-size:12px;font-weight:normal}
.host-action-wrap:hover .host-action-tooltip,.host-action-wrap:focus-within .host-action-tooltip {display:block}

#app {position:relative}

#tree summary {cursor:pointer;padding:4px 6px;}
#tree summary.selected {background:#bdd7ea;outline:1px solid #6899c4;}

#diagnosticTabs {display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px}
#diagnosticTabs [aria-selected="true"] {background:#235a99;color:white}

/* Drag boundaries, with keyboard adjustment and persisted dimensions. */
#sidebar {width:var(--probe-width,190px)}
.detail {width:var(--detail-width,330px);min-width:220px;flex-shrink:0}
.events {border-top:0}
.events .table-wrap {height:var(--log-height,170px);max-height:none;resize:none}
.pane-resize {background:#a5b7cb;flex-shrink:0;touch-action:none;user-select:none}
.pane-resize:hover,.pane-resize:focus-visible {background:#2c6ba3;outline:0}
.pane-resize.vertical {width:6px;cursor:col-resize}
.pane-resize.horizontal {height:6px;cursor:row-resize}
#sidebar.hidden+#sidebarResize,#detailResize:has(+.hidden),#monitor:has(#logPanel:not([open])) #logResize {display:none}
body.pane-dragging {user-select:none}
@media(max-width:600px){.pane-resize.vertical{display:none}#sidebar{width:125px}.detail{width:90%}}

#policySensor {display:block;width:340px;max-width:100%}

#hosts td.host-policy-blocked {color:#a51d25;font-weight:600}
#hosts td.host-policy-allowed {color:#16703d;font-weight:600}

#productSwitcher {position:relative}
#productSwitcher>summary {list-style:none;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border:1px solid #8faaca;background:#f4f7fb;color:#163c62;font-size:20px}
#productSwitcher>summary::-webkit-details-marker {display:none}
#productSwitcher>summary:focus-visible {outline:2px solid #245a8e;outline-offset:2px}
#productSwitcher[open]>summary {background:#c5d8ee}
#productSwitcher nav {position:absolute;top:36px;left:0;z-index:30;min-width:190px;margin:0;padding:8px;background:#f5f7fa;border:1px solid #8297b0;box-shadow:2px 3px 9px #0003}
#productSwitcher nav span {display:block;padding:4px 8px;font-size:11px}
#productSwitcher nav button {display:block;width:100%;text-align:left;margin-top:4px}
#app.product-dlp #classicMenu,#app.product-dlp #sidebar,#app.product-dlp #sidebarResize,#app.product-dlp #probeWindowToggle,#app.product-dlp #receiveStatus {display:none}
#app.product-dlp>.layout {grid-template-columns:minmax(0,1fr)}

#productSwitcher nav {display:block;box-sizing:border-box;width:286px;min-width:286px;max-width:calc(100vw - 32px);padding:12px;border:1px solid #bbcadd;border-radius:10px;background:#f9fbfe;box-shadow:0 8px 24px #18345226}
#productSwitcher .product-switcher-heading {padding:2px 4px 10px;font-weight:600;font-size:13px;color:#193f66;white-space:nowrap}
#productSwitcher .product-switcher-heading span {display:block;padding:3px 0 0;font-size:11px;font-weight:400;color:#6d8095}
#productSwitcher nav button {display:flex;align-items:center;gap:12px;padding:12px;margin:4px 0 0;border:1px solid transparent;border-radius:7px;background:transparent;white-space:nowrap;color:#183b5e;transition:background .15s,border-color .15s}
#productSwitcher nav button:hover {background:#edf3fa;border-color:#c7d6e8}
#productSwitcher nav button.active {background:#e4eefb;border-color:#a8c1e0}
#productSwitcher nav .product-icon {display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border-radius:8px;background:#e6edf6;color:#386b9e}
#productSwitcher .product-icon svg {width:24px;height:24px}
#productSwitcher nav .product-copy {display:block;flex:1;padding:0;min-width:0}
#productSwitcher .product-copy strong {display:block;font-size:14px}
#productSwitcher .product-copy small {display:block;margin-top:4px;font-size:11px;color:#71849a;font-weight:400}
#productSwitcher nav .product-selected {display:none;padding:0;font-size:17px;color:#245b98}
#productSwitcher nav button.active .product-selected {display:block}

#hosts td.host-policy-important {color:#245fa6;font-weight:600}

#hostMenu button:disabled {color:#94a1b0;cursor:not-allowed;background:transparent}

#app.product-dhcp #classicMenu,#app.product-dhcp #sidebar,#app.product-dhcp #sidebarResize,#app.product-dhcp #receiveStatus {display:none}

#dhcpMenu,#dhcpSidebar {display:none}
#app.product-dhcp #dhcpMenu {display:flex;flex:none;gap:4px;padding:3px 12px;background:#edf0f5;border-bottom:1px solid #a7b7ca}
#dhcpMenu button {border:0;background:transparent;padding:5px 12px}
#dhcpMenu button:hover {background:#c5d8ee}
#app.product-dhcp #dhcpSidebar {display:block;padding:0;width:var(--probe-width,220px);background:#fff;overflow:auto}
#dhcpSidebar h3 {padding:10px 8px;border-bottom:1px solid #a7b7ca;font-size:14px;font-weight:400;color:#24527b}
#dhcpTree button {display:block;width:calc(100% - 8px);margin:3px 4px;text-align:left;border:1px solid transparent;background:transparent}
#dhcpTree button.selected {background:#b9d5e6;border-color:#819fbd}
#dhcpTree small {display:block;padding:3px 14px;color:#6b8197}
#dhcpSidebarState {padding:8px;color:#245fa6}
#dhcp .page-title {margin-bottom:8px;border-bottom:1px solid #a7b7ca;padding-bottom:8px}
#dhcp .page-title h1 {font-size:17px}
#dhcp .card {border-radius:0;box-shadow:none;background:#eaf0f7;padding:12px;border-color:#a7b7ca;margin:0}
#dhcp .card h2 {font-size:14px;font-weight:600}
#dhcpStats {margin:8px 0;padding:5px;background:#c5d7ed;border:1px solid #a7b7ca;display:flex;gap:4px}
.dhcp-workspace {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dhcp-workspace:has(#subnetForm:not(.hidden)) {grid-template-columns:minmax(0,1fr)}
#dhcpRangesPanel,#dhcpLeasesPanel {grid-column:1}
#subnetForm {grid-column:2;grid-row:1 / span 2;min-width:0}
#subnetDialog {width:min(760px,calc(100vw - 40px));max-width:760px;max-height:90vh;overflow:auto}
#subnetDialog #subnetForm .form-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
#subnetDialog #subnetForm .wide {grid-column:1 / -1}
@media(max-width:600px){#subnetDialog #subnetForm .form-grid{grid-template-columns:1fr}}
#dhcp .subnet {padding:10px;border-bottom:1px solid #b4c6da;background:#dce7f3}
@media(max-width:900px){.dhcp-workspace:has(#subnetForm:not(.hidden)){grid-template-columns:minmax(0,1fr)}#subnetForm{grid-column:1;grid-row:auto}#app.product-dhcp #dhcpSidebar{width:150px}}

.host-sort{border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;padding:0;width:100%;text-align:left;cursor:pointer;white-space:nowrap}.host-sort:hover{text-decoration:underline}.host-sort:focus-visible{outline:2px solid var(--accent,#2467a8);outline-offset:3px}

#hosts td.host-seen-day {background:#fff3b0;color:#745800}
#hosts td.host-seen-three-days {background:#ffd4a3;color:#8a4200}
#hosts td.host-seen-week {background:#ffc7c7;color:#a51d25}

.host-locations-dialog {width:min(1000px,90vw);max-width:90vw}
.host-locations-heading {display:flex;align-items:center;justify-content:space-between;gap:20px}
.host-locations-table {max-height:55vh;overflow:auto}
.host-locations-table table {width:100%;white-space:nowrap}

#vlans .sensor-section {margin:12px 0;border:1px solid #a9bdd5;background:#f6f9fd}
#vlans .sensor-section>summary {padding:11px 14px;font-size:14px;font-weight:600;color:#194b7b;cursor:pointer;background:#dce7f3}
#vlans .sensor-section>summary:hover {background:#cddff0}
#vlans .sensor-section[open]>summary {border-bottom:1px solid #a9bdd5}
#vlans .sensor-section-body {padding:14px;min-width:0}
#vlans .sensor-section-body>.card,#vlans .sensor-section-body>.table-wrap {margin:0}
#vlans .sensor-section-body>p:first-child {margin-top:0}
#vlans .sensor-section-body fieldset {min-width:0;border:1px solid #b2c5da;padding:10px}
#vlans .sensor-section-body fieldset .inline {margin:5px 0}

.time-actions {display:flex;gap:8px;align-items:center}
.time-actions button {flex:1}
.time-result-dialog {width:min(800px,90vw);max-width:90vw}
#timeResultOutput {white-space:pre-wrap;overflow:auto;max-height:55vh;background:#e8eff7;padding:14px;font-size:12px}

#sensorNtpSourcesField[hidden]{display:none}

#dhcpMenu button.selected{background:#c5d8ee;color:#124b80;font-weight:600}
#dhcpStats.hidden{display:none}

#dhcpServicePanel .toolbar .inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#dhcpServicePanel #autostart{width:14px;height:14px;padding:0;margin:0;flex:0 0 auto}

#app.product-dhcp #dhcpMenu{margin-left:0;padding-left:0;gap:0}

#dhcpTree summary{padding:6px 8px;cursor:pointer;color:#124b80}
#dhcpTree summary.selected{background:#b9d5e6}
#dhcpTree details button{padding-left:24px}

#dhcpTree{padding:4px}
#dhcpTree details{margin:0;padding:3px 0}
#dhcpTree summary{padding:4px 6px}
#dhcpTree button{width:100%;margin:1px 0;padding:5px 8px}
#dhcpTree details button{padding-left:22px}

/* Match NAC menu and sidebar spacing. */
#app.product-dhcp #dhcpMenu{margin:0;padding:3px 12px;gap:3px}
#dhcpMenu button{padding:4px 12px}
#app.product-dhcp #dhcpSidebar{padding:6px;background:#edf0f5;width:var(--probe-width,190px)}
#dhcpSidebar h3{margin:0;padding:9px 7px;background:white;border:1px solid #9dafc7;font-weight:400}
#dhcpTree{background:white;border:1px solid #9dafc7;border-top:0;padding:4px;margin-bottom:8px;min-height:80px}
#dhcpTree button{border:0}
#dhcpTree button.selected{background:#bdd7ea;outline:1px solid #6899c4}

#app.product-dhcp #dhcpSidebar{display:flex;flex-direction:column;gap:0}
#dhcpTree{flex:1;min-height:80px;overflow:auto}
#dhcpSidebarState{flex:1;min-height:80px;padding:8px;background:white;border:1px solid #9dafc7;border-top:0;overflow:auto}

header .header-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}

.dhcp-probe-state.enabled{color:#16833b}.dhcp-probe-state.disabled{color:#89939d}

.dhcp-settings-menu{position:relative}.dhcp-settings-menu>summary{cursor:pointer;padding:6px 16px;list-style:none}.dhcp-settings-menu[open]{background:#fff}.dhcp-settings-menu>button{display:block;width:100%;white-space:nowrap;text-align:left}.dhcp-settings-menu[open]{z-index:10}#dhcpGlobalOptions input,#dhcpProbeOptions input{min-width:70px;width:100%}#dhcpGlobalOptions td:first-child,#dhcpProbeOptions td:first-child{width:100px}

/* DHCP settings dropdown follows the NAC menu without changing bar height. */
#dhcpMenu .dhcp-settings-menu{position:relative;align-self:flex-start;background:transparent;z-index:50}#dhcpMenu .dhcp-settings-menu>summary{display:block;height:28px;box-sizing:border-box;padding:5px 16px;line-height:18px}#dhcpMenu .dhcp-settings-menu[open]>summary{background:#d4e5f5}#dhcpMenu .dhcp-settings-menu>button{position:absolute;left:0;width:225px;height:28px;box-sizing:border-box;border:0;border-left:1px solid #9eb5d1;border-right:1px solid #9eb5d1;background:#f4f8fc;padding:5px 16px;text-align:left;box-shadow:3px 3px 5px #0002}#dhcpMenu .dhcp-settings-menu>button:nth-of-type(1){top:28px;border-top:1px solid #9eb5d1}#dhcpMenu .dhcp-settings-menu>button:nth-of-type(2){top:56px}#dhcpMenu .dhcp-settings-menu>button:nth-of-type(3){top:84px;border-bottom:1px solid #9eb5d1}#dhcpMenu .dhcp-settings-menu>button:hover{background:#c5daed}


.dhcp-range-panel{border:1px solid #9eb5d1;background:#dbe7f2}.dhcp-range-panel>.toolbar{margin:0;padding:6px 8px;background:#dbe7f2}.dhcp-range-panel>.muted{display:none}.dhcp-range-table{width:100%;border-collapse:collapse}.dhcp-range-table th,.dhcp-range-table td{padding:5px 7px;border:1px solid #b4c6dc;white-space:nowrap}.dhcp-range-table th{background:#adc0d4}.dhcp-range-table tbody tr:nth-child(even){background:#eef4fa}.dhcp-range-table tr.selected{background:#bdd7ea}.dhcp-range-table tr:hover{background:#cadfed}

#dhcp .dhcp-workspace.dhcp-allocation-split{grid-template-columns:minmax(0,1fr) 310px;align-items:start}
.dhcp-allocation-split #dhcpLeasesPanel{grid-column:1;grid-row:1;padding:0;border:1px solid #9eb5d1;background:#dbe7f2}
.dhcp-allocation-split #dhcpLeasesPanel>.toolbar{padding:6px 8px;margin:0}
.dhcp-allocation-split #dhcpRangesPanel{grid-column:2;grid-row:1;min-width:0}
.dhcp-allocation-split #dhcpRangesPanel>.toolbar{flex-wrap:wrap;gap:4px}
.dhcp-allocation-split #dhcpRangesPanel>.toolbar button,.dhcp-allocation-split #dhcpRangesPanel>.toolbar select{font-size:11px;padding:4px}
.dhcp-scope-summary{padding:10px;border-top:1px solid #b4c6dc;font-size:12px}
.dhcp-scope-summary dl{margin:8px 0;display:grid;grid-template-columns:75px minmax(0,1fr);gap:6px}
.dhcp-scope-summary dt{color:#617994}.dhcp-scope-summary dd{margin:0;overflow-wrap:anywhere}
@media(max-width:1000px){#dhcp .dhcp-workspace.dhcp-allocation-split{grid-template-columns:minmax(0,1fr)}.dhcp-allocation-split #dhcpRangesPanel{grid-column:1;grid-row:2}}
#dhcp #dhcpLeasesPanel{padding:0;background:#d9e4f1;min-height:390px}
#dhcpLeasesPanel>.toolbar{margin:0;padding:6px 8px}
#dhcpLeaseStats{margin:0;padding:5px;display:flex;gap:4px;background:#c5d7ed;border-bottom:1px solid #a7b7ca}
#dhcpLeasesPanel table{font-size:11px;white-space:nowrap;background:#dce6f2}
#dhcpLeasesPanel td,#dhcpLeasesPanel th{padding:4px 6px;border:1px solid #bfcede;height:24px}
#dhcpLeasesPanel th{background:#aebfd4;color:#102d48;font-weight:400}
#dhcpLeasesPanel tbody tr:nth-child(even){background:#edf3fa}
#dhcpLeasesPanel tbody tr:hover{background:#d0e2ef}
#app.product-dhcp #dhcp{padding:0}
#app.product-dhcp #dhcpStats{margin:0 0 4px}
#app.product-dhcp #dhcpSidebar{width:var(--dhcp-probe-width,190px)}
#dhcpSidebarResize{display:none}#app.product-dhcp #dhcpSidebarResize{display:block}
#app.product-dhcp #dhcpSidebar.hidden+#dhcpSidebarResize{display:none}
#dhcpRangeResize{display:none}
#dhcp .dhcp-workspace.dhcp-allocation-split{grid-template-columns:minmax(0,1fr) 6px var(--dhcp-range-width,310px);gap:0}
.dhcp-allocation-split #dhcpRangeResize{display:block;grid-column:2;grid-row:1;align-self:stretch}
.dhcp-allocation-split #dhcpRangesPanel{grid-column:3}
@media(max-width:1000px){#dhcp .dhcp-workspace.dhcp-allocation-split{grid-template-columns:minmax(0,1fr)}.dhcp-allocation-split #dhcpRangeResize{display:none}.dhcp-allocation-split #dhcpRangesPanel{grid-column:1;grid-row:2}}
#ntpMenu{display:none}#app.product-ntp #ntpMenu{display:flex;padding:3px 12px;gap:4px;border-bottom:1px solid #a7b7ca}
#app.product-ntp #classicMenu,#app.product-ntp #sidebar,#app.product-ntp #sidebarResize,#app.product-ntp #receiveStatus,#app.product-ntp #probeWindowToggle{display:none}
#ntp{padding:0;flex:1;border:1px solid #99adc5;background:#d9e4f1;min-height:0;overflow:auto}
#ntp table{font-size:11px}#ntp td,#ntp th{padding:4px 6px;border:1px solid #bfcede}#ntp th{background:#aebfd4;text-align:left}
#ntp td:first-child{white-space:nowrap;width:180px}#ntp td:last-child{overflow-wrap:anywhere}#ntp tbody tr:nth-child(even){background:#edf3fa}
.ntp-diagnostics{padding:8px}.ntp-diagnostics pre{white-space:pre-wrap}#ntpSettingsDialog{width:min(680px,90vw)}
#app.product-ntp #ntpMenu{flex:none;height:35px;box-sizing:border-box;margin:0;background:#edf0f5}
#ntpMenu button{border:0;background:transparent;padding:5px 12px}#ntpMenu button:hover{background:#c5d8ee}
#ntpSidebar,#ntpSidebarResize{display:none}
#app.product-ntp #ntpSidebar{display:flex;flex-direction:column;width:var(--ntp-sidebar-width,230px);flex-shrink:0;padding:6px;background:#edf0f5;overflow:auto}
#app.product-ntp #ntpSidebarResize{display:block}
#ntpSidebar h3{margin:0;padding:9px 7px;background:white;border:1px solid #9dafc7;font-size:14px;font-weight:400}
#ntpServices,#ntpSourceStatus{background:white;border:1px solid #9dafc7;border-top:0;overflow:auto;padding:4px;min-height:80px;flex:1}
#ntpServices{margin-bottom:8px}#ntpServices button{display:block;width:100%;text-align:left;margin:2px 0;padding:8px;border:0;background:transparent}#ntpServices button:hover{background:#bdd7ea}#ntpServices small{display:block;padding-left:16px;color:#617994;margin-top:4px}
.service-dot{color:#8b98a4}.service-dot.online{color:#00852e}.service-dot.failed{color:#bc2730}
#ntpSourceStatus p{padding:4px;overflow-wrap:anywhere}#app.product-ntp #ntp{padding:0}
#app.product-ntp #probeWindowToggle{display:inline-flex}
#app.product-ntp #ntpSidebar.hidden,#app.product-ntp #ntpSidebar.hidden+#ntpSidebarResize{display:none}
/* Shared service shell: NAC, DHCP, NTP, DLP and future registered services. */
#app > .service-menu {flex:none;height:35px;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid #9dafc7;background:#edf0f5;position:relative;z-index:20}
#app > .service-menu:not(.service-active),#app > .layout > .service-sidebar:not(.service-active),#app > .layout > .pane-resize:not(.service-active){display:none!important}
#app > .service-menu.service-active{display:flex!important}
#app > .layout > .service-sidebar.service-active:not(.hidden){display:flex!important;flex-direction:column;flex:none;width:var(--service-sidebar-width,230px);min-width:125px;padding:6px;background:#edf0f5;gap:0;overflow:hidden}
#app > .layout > .pane-resize.service-active{display:block!important}
#app > .layout > .service-sidebar.hidden + .pane-resize{display:none!important}
#app[data-service] #probeWindowToggle{display:inline-flex!important}
.service-sidebar h3{margin:0;padding:9px 7px;background:#fff;border:1px solid #9dafc7;font-size:14px;font-weight:400}
.service-sidebar > div{background:#fff;border:1px solid #9dafc7;border-top:0;overflow:auto;padding:4px;min-height:80px;flex:1}
.service-sidebar > h3:not(:first-child){margin-top:8px}
.service-sidebar button{display:block;width:100%;text-align:left}
.service-sidebar-body p{padding:0 6px}
#app main{padding:4px 8px;min-width:0;min-height:0}
#app .page.service-screen{padding:0;min-height:0;flex:1}
#dlp.service-screen{display:flex;flex-direction:column;border:1px solid #99adc5;background:#d9e4f1;overflow:hidden}
#dlp .table-wrap{flex:1;min-height:0;overflow:auto}
#app .service-screen .stats{gap:4px;margin:0;padding:4px;background:#c3d5ec;flex-wrap:wrap}
#app .service-screen .stat{padding:4px 9px;border:1px solid #8ea7c6;border-radius:0;background:#e1ebf8;gap:14px}
#app .service-screen .toolbar{margin:0;padding:5px 7px;gap:6px;border-top:1px solid #99adc5}
#app .service-screen .toolbar h2{font-size:12px;margin:0}
#app .service-screen table{font-size:11px;white-space:nowrap;background:#dce6f2}
#app .service-screen th,#app .service-screen td{padding:4px 6px;border:1px solid #bfcede;height:24px}
#app .service-screen th{position:sticky;top:0;background:#aebfd4;color:#102d48;z-index:1;font-weight:400}
#app .service-screen tbody tr:nth-child(even){background:#edf3fa}
#app .service-screen tbody tr:hover{background:#d0e2ef}
#app .service-screen tbody tr.selected{background:#b3d3e2}
header .system-name{font-size:16px;font-weight:600;color:#102b45;white-space:nowrap;padding-right:12px;border-right:1px solid #a7b7ca}

/* Keep the product dropdown above every service menu's stacking context. */
#app > header{z-index:30}
header .system-logo{display:flex;align-items:center;flex-shrink:0}
header .system-logo img{display:block;width:180px;height:40px;object-fit:contain}

#app{height:calc(100dvh - 24px)}
#siteCopyright{position:fixed;bottom:0;left:0;right:0;height:24px;display:flex;align-items:center;justify-content:center;background:#edf0f5;border-top:1px solid #c5d1df;color:#64758a;font-size:11px;z-index:1}