/* Keeynet device drawer R1. Presentation only; lifecycle controls stay original. */
:root {
  --kd-canvas:#eef3f0; --kd-panel:#fff; --kd-elevated:#f4f8f5;
  --kd-line:#d5e2d9; --kd-ink:#10241a; --kd-muted:#526b60;
  --kd-dot:#c7d8ce; --kd-green:#087f5b; --kd-red:#c92f50;
  --kd-amber:#a76509; --kd-blue:#087ca8;
}
:root:is([data-theme="black"],[data-theme="dark"]) {
  color-scheme:dark;
  --kd-canvas:#070c10; --kd-panel:#0d151c; --kd-elevated:#121e27;
  --kd-line:#263b48; --kd-ink:#e8f2f5; --kd-muted:#9aafbd;
  --kd-dot:#233541; --kd-green:#42dbab; --kd-red:#ff8096;
  --kd-amber:#f3c173; --kd-blue:#72c9ed;
  --bg:#070c10; --bg-base:#070c10; --surface:#0d151c;
  --surface-strong:#121e27; --surface-soft:#16242e;
  --text:#e8f2f5; --text-secondary:#b6cad6; --text-tertiary:#9aafbd;
  --muted:#9aafbd; --subtle:#9aafbd; --line:#263b48; --line-soft:#20313d;
  --border-strong:#3a5362; --border-subtle:#20313d;
  --accent:#42dbab; --accent-2:#72c9ed; --accent-soft:#123629;
  --success:#42dbab; --success-soft:#123629; --danger:#ff8096;
  --danger-soft:#351b28; --warning:#f3c173; --warning-soft:#352c1e;
  --header-bg:#0d151cf5;
}
html[data-device-drawer="r1"] body {
  background-color:var(--kd-canvas);
  background-image:radial-gradient(var(--kd-dot) .8px,transparent .9px);
  background-size:22px 22px;
}
html[data-device-drawer="r1"] body.kd-drawer-open {overflow:hidden;}
html[data-device-drawer="r1"] #manage-device-dialog[open],
html[data-device-drawer="r1"] #device-modal:not(.hidden) > .modal-card {
  position:fixed !important; inset:0 0 0 auto !important;
  transform:none !important; margin:0 !important;
  width:min(590px,100vw) !important; max-width:100vw !important;
  height:100vh !important; height:100dvh !important;
  min-height:0 !important; max-height:100vh !important; max-height:100dvh !important;
  padding:0 !important; border:0 !important;
  border-left:1px solid var(--kd-line) !important; border-radius:0 !important;
  background:var(--kd-panel) !important; color:var(--kd-ink) !important;
  box-shadow:-20px 0 70px #0004 !important;
  overflow:hidden !important; z-index:1200 !important;
  animation:kd-enter .22s cubic-bezier(.16,1,.3,1);
}
html[data-device-drawer="r1"] #device-modal > .modal-card {width:min(740px,100vw) !important;display:flex;flex-direction:column;}
html[data-device-drawer="r1"] #device-modal {z-index:1190;}
html[data-device-drawer="r1"] #manage-device-dialog .device-dialog-card-v24 {
  display:flex !important; flex-direction:column !important;
  width:100% !important; height:100% !important; max-height:100% !important;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  overflow:hidden !important; background:var(--kd-panel) !important;
}
html[data-device-drawer="r1"] :is(.kdm-scrim,#device-modal .modal-backdrop) {
  background:#030a1261 !important; backdrop-filter:blur(2px);
}
html[data-device-drawer="r1"] #manage-device-dialog::backdrop {background:#030a1261;backdrop-filter:blur(2px);}
html[data-device-drawer="r1"] :is(#manage-device-dialog .device-dialog-heading-v24,#device-modal .modal-header) {
  flex:none !important; margin:0 !important; padding:22px 24px !important;
  border-bottom:1px solid var(--kd-line) !important; border-radius:0 !important;
  background:var(--kd-elevated) !important; color:var(--kd-ink) !important;
}
html[data-device-drawer="r1"] :is(#manage-device-name,#device-detail-title) {
  font-size:19px !important;line-height:1.3 !important;letter-spacing:-.02em;
  overflow-wrap:anywhere;color:var(--kd-ink) !important;
}
html[data-device-drawer="r1"] :is(#manage-device-identifier,#device-detail-subtitle) {
  font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace !important;
  color:var(--kd-muted) !important;overflow-wrap:anywhere;
}
html[data-device-drawer="r1"] #manage-device-dialog .kdm-scroll {
  flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
  overscroll-behavior:contain; padding:24px !important; scrollbar-width:thin;
  scrollbar-color:var(--kd-line) transparent;
}
html[data-device-drawer="r1"] #manage-device-dialog .dialog-actions {
  flex:none !important; margin:0 !important; padding:16px 24px max(16px,env(safe-area-inset-bottom)) !important;
  border-top:1px solid var(--kd-line) !important; background:var(--kd-elevated) !important;
}
html[data-device-drawer="r1"] #device-detail-content {
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 24px 30px;scrollbar-width:thin;
}
html[data-device-drawer="r1"] #device-modal :is(.device-console-columns,.device-console-grid) {grid-template-columns:1fr !important;}
html[data-device-drawer="r1"] #device-modal .device-console-health {display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px;}
html[data-device-drawer="r1"] #device-modal :is(.device-console-section,.device-console-panel,.device-console-health-item) {
  background:var(--kd-elevated) !important; border:1px solid var(--kd-line) !important;
  border-radius:12px !important;color:var(--kd-ink) !important;
}
html[data-device-drawer="r1"] :is(#manage-device-dialog,#device-modal) :is(input,select,textarea) {
  background:var(--kd-panel) !important; color:var(--kd-ink) !important;
  border-color:var(--kd-line) !important; max-width:100%;min-width:0;
}
html[data-device-drawer="r1"] :is(#manage-device-dialog,#device-modal) :is(.muted,.eyebrow,.field-label) {color:var(--kd-muted) !important;}
html[data-device-drawer="r1"] :is(#manage-device-dialog,#device-modal) :is(button,a,input,select):focus-visible {outline:2px solid var(--kd-blue);outline-offset:3px;}
html[data-device-drawer="r1"] #manage-device-dialog :is(.kdm-stats,.kdm-danger,.kc-device-network,.device-detail-grid-v24) {
  border-color:var(--kd-line) !important;
}
html[data-device-drawer="r1"] .kc-device-status.offline {color:var(--kd-red) !important;}
html[data-device-drawer="r1"] .kc-device-status.offline .kc-device-status-dot,
html[data-device-drawer="r1"] .device-live-pill.offline::before,
html[data-device-drawer="r1"] [data-kd-state="offline"]::before {
  background:var(--kd-red) !important;animation:kd-offline 2s ease-in-out infinite;
}
html[data-device-drawer="r1"] .kc-device-status.online .kc-device-status-dot {background:var(--kd-green) !important;}
html[data-device-drawer="r1"] [data-kd-state]::before {
  content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;
  background:var(--kd-muted);vertical-align:middle;
}
html[data-device-drawer="r1"] [data-kd-state="online"]::before {background:var(--kd-green);}
html[data-device-drawer="r1"] [data-kd-state="pending"]::before {background:var(--kd-amber);}
html[data-device-drawer="r1"] [data-kd-state="disabled"]::before {background:var(--kd-muted);animation:none;}
@keyframes kd-offline {0%,100%{opacity:1;box-shadow:0 0 0 0 #ff809638}50%{opacity:.45;box-shadow:0 0 0 5px #ff809600}}
@keyframes kd-enter {from{translate:26px 0;opacity:.6}to{translate:0 0;opacity:1}}
@media (max-width:600px) {
  html[data-device-drawer="r1"] #manage-device-dialog[open],html[data-device-drawer="r1"] #device-modal > .modal-card {width:100vw !important;}
  html[data-device-drawer="r1"] #manage-device-dialog .kdm-scroll,html[data-device-drawer="r1"] #device-detail-content {padding:18px !important;}
  html[data-device-drawer="r1"] #manage-device-dialog .device-detail-grid-v24 {grid-template-columns:1fr !important;}
}
@media (prefers-reduced-motion:reduce) {
 html[data-device-drawer="r1"] *,html[data-device-drawer="r1"] *::before {animation:none !important;scroll-behavior:auto !important;}
}
/* The existing detail renderer builds groups, not individual grid cells. */
html[data-device-drawer="r1"] #manage-device-dialog[open] #manage-device-details.kc-device-details {
  display:flex !important;flex-direction:column !important;gap:16px !important;
  padding:0 !important;border:0 !important;background:transparent !important;
  overflow:visible !important;
}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-group {
  display:flex !important;flex-direction:column !important;grid-template-columns:none !important;
  width:100% !important;min-width:0 !important;padding:16px !important;
  border:1px solid var(--kd-line) !important;border-radius:12px !important;
  background:var(--kd-elevated) !important;
}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-group h3 {margin:0 0 10px !important;color:var(--kd-muted) !important;}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-row {
  display:grid !important;grid-template-columns:minmax(96px,.7fr) minmax(0,1.3fr) !important;
  gap:12px !important;min-width:0 !important;padding:10px 0 !important;
  border-bottom:1px solid var(--kd-line) !important;align-items:baseline !important;
}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-row:last-child {border-bottom:0 !important;}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-key {font-size:10px !important;line-height:1.5 !important;color:var(--kd-muted) !important;}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-value {
  width:auto !important;min-width:0 !important;font-size:12px !important;line-height:1.6 !important;
  overflow-wrap:break-word !important;word-break:normal !important;color:var(--kd-ink) !important;
}
html[data-device-drawer="r1"] :is(.kdm-scrim,#device-modal .modal-backdrop) {background:#030a1226 !important;backdrop-filter:none !important;}
html[data-device-drawer="r1"] #manage-device-dialog::backdrop {background:#030a1226;backdrop-filter:none;}
html[data-device-drawer="r1"] :is(#dashboard-view,.workspace.page-view) {
  background-color:var(--kd-canvas) !important;
  background-image:radial-gradient(var(--kd-dot) .8px,transparent .9px) !important;
  background-size:22px 22px !important;
}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-group {align-items:stretch !important;gap:0 !important;}
html[data-device-drawer="r1"] #manage-device-dialog[open] .kc-device-detail-row {width:100% !important;max-width:100% !important;}
html[data-device-drawer="r1"] :is(.device-live-pill.offline,.kc-device-status-value.offline)::before {
  content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;
  background:var(--kd-red) !important;animation:kd-offline 2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) {
 html[data-device-drawer="r1"] :is(.device-live-pill.offline,.kc-device-status-value.offline)::before {animation:none !important;}
}