/* =========================================================
   KEEYNET DEVICE WORKSPACE V1
   Table -> selected device -> full-width details/session area
   ========================================================= */

.kc-device-workspace-host {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.kc-device-workspace-host.is-open {
  margin-top: 22px;
  padding-top: 0;

  border-top: 1px solid var(--line);
}


/* ---------------------------------------------------------
   SELECTED DEVICE ROW
   --------------------------------------------------------- */

.kc-device-selectable-row {
  cursor: pointer;
}

.kc-device-selectable-row:hover {
  background:
    color-mix(
      in srgb,
      var(--surface-soft) 72%,
      transparent
    ) !important;
}

.kc-device-row-selected {
  background:
    color-mix(
      in srgb,
      var(--accent) 6%,
      var(--surface)
    ) !important;
}

.kc-device-row-selected > :first-child {
  box-shadow:
    inset 2px 0 0
    var(--accent);
}


/* ---------------------------------------------------------
   CONVERT EXISTING DIALOG INTO INLINE WORKSPACE
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace {
  position: static !important;

  inset: auto !important;

  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: var(--text);
}

#manage-device-dialog.kc-device-workspace::backdrop {
  display: none !important;
  background: transparent !important;
}


/* Existing internal dialog shell should become full width. */

#manage-device-dialog.kc-device-workspace
  > * {
  max-width: none;
}

#manage-device-dialog.kc-device-workspace
  .dialog-shell,
#manage-device-dialog.kc-device-workspace
  .dialog-content,
#manage-device-dialog.kc-device-workspace
  .device-dialog-shell,
#manage-device-dialog.kc-device-workspace
  .device-details-shell {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   DEVICE HEADER
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace
  .dialog-header,
#manage-device-dialog.kc-device-workspace
  .device-dialog-header {
  padding:
    20px 0
    14px !important;

  border-bottom:
    1px solid
    var(--line);

  background: transparent !important;
}

#manage-device-dialog.kc-device-workspace
  h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.018em;
}

#manage-device-dialog.kc-device-workspace
  #manage-device-identifier {
  margin-top: 3px;

  font-family:
    "Roboto Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 10.75px;
  font-weight: 400;

  color: var(--muted);
}


/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace
  [role="tablist"],
#manage-device-dialog.kc-device-workspace
  .device-tabs,
#manage-device-dialog.kc-device-workspace
  .dialog-tabs {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border-bottom:
    1px solid
    var(--line);

  background: transparent;
}

#manage-device-dialog.kc-device-workspace
  [role="tab"],
#manage-device-dialog.kc-device-workspace
  .device-tab {
  font-weight: 500 !important;
}


/* ---------------------------------------------------------
   FLAT AWS/GCP-LIKE INFORMATION GRID
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace
  #manage-device-details {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 0 28px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 8px 0 16px !important;

  border: 0 !important;
  border-bottom:
    1px solid
    var(--line) !important;

  background: transparent !important;
}


/*
 * Remove the previous card appearance regardless of the
 * exact child class used by the current dashboard.
 */
#manage-device-dialog.kc-device-workspace
  #manage-device-details > * {
  min-width: 0 !important;
  min-height: 68px !important;

  margin: 0 !important;
  padding: 11px 0 !important;

  border: 0 !important;
  border-bottom:
    1px solid
    var(--line) !important;

  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

#manage-device-dialog.kc-device-workspace
  #manage-device-details
  span,
#manage-device-dialog.kc-device-workspace
  #manage-device-details
  dt,
#manage-device-dialog.kc-device-workspace
  #manage-device-details
  .device-detail-label {
  display: block;

  margin: 0 0 4px;

  font-size: 9.75px !important;
  font-weight: 500 !important;
  letter-spacing: .045em;

  text-transform: uppercase;

  color: var(--muted) !important;
}

#manage-device-dialog.kc-device-workspace
  #manage-device-details
  strong,
#manage-device-dialog.kc-device-workspace
  #manage-device-details
  dd,
#manage-device-dialog.kc-device-workspace
  #manage-device-details
  .device-detail-value {
  margin: 0;

  font-size: 11.75px !important;
  font-weight: 450 !important;
  line-height: 1.45;

  overflow-wrap: anywhere;

  color: var(--text) !important;
}


/* UUID/IP/version-style technical values stay restrained. */

#manage-device-dialog.kc-device-workspace
  #manage-device-details code {
  font-family:
    "Roboto Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 10.75px;
  font-weight: 400;
}


/* ---------------------------------------------------------
   MANAGE / NETWORK CONTENT
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace
  #manage-device-network {
  width: 100%;

  margin-top: 20px !important;

  border-radius: 0 !important;
  box-shadow: none !important;
}

#manage-device-dialog.kc-device-workspace
  .kc-device-network-row {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/*
 * Give all current/future tab panels full horizontal space.
 */

#manage-device-dialog.kc-device-workspace
  [role="tabpanel"],
#manage-device-dialog.kc-device-workspace
  .device-tab-panel,
#manage-device-dialog.kc-device-workspace
  .device-panel {
  width: 100% !important;
  max-width: none !important;
}


/* ---------------------------------------------------------
   FUTURE SSH / RDP / HTTP SESSION WORKSPACE
   --------------------------------------------------------- */

#manage-device-dialog.kc-device-workspace
  .kc-device-session-surface {
  width: 100%;

  min-height: 650px;

  padding: 0;

  background: transparent;
}

#manage-device-dialog.kc-device-workspace
  .kc-session-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-height: 60px;

  padding: 12px 0;

  border-bottom:
    1px solid
    var(--line);
}

.kc-session-eyebrow {
  display: block;

  margin-bottom: 3px;

  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .06em;

  color: var(--muted);
}

#kc-session-title {
  margin: 0;

  font-size: 15px;
  font-weight: 550;

  color: var(--text);
}

.kc-session-toolbar-actions {
  display: flex;
  gap: 8px;
}

#manage-device-dialog.kc-device-workspace
  .kc-session-viewport {
  width: 100%;

  min-height: 580px;

  margin-top: 14px;

  overflow: hidden;

  border:
    1px solid
    var(--line);

  border-radius: 5px;

  background: #0d1117;
}


/*
 * When a real session is opened, the existing device
 * information disappears and the console gets the entire
 * workspace.
 */
#manage-device-dialog.kc-device-workspace
  &.kc-device-session-mode
  > *:not(.kc-device-session-surface) {
  display: none !important;
}


/*
 * CSS nesting fallback for browsers without nesting support.
 */
#manage-device-dialog.kc-device-workspace.kc-device-session-mode
  > *:not(.kc-device-session-surface) {
  display: none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {

  #manage-device-dialog.kc-device-workspace
    #manage-device-details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }

}

@media (max-width: 680px) {

  .kc-device-workspace-host.is-open {
    margin-top: 16px;
  }

  #manage-device-dialog.kc-device-workspace
    #manage-device-details {
    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 0 !important;
  }

  #manage-device-dialog.kc-device-workspace
    .kc-session-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #manage-device-dialog.kc-device-workspace
    .kc-device-session-surface {
    min-height: 520px;
  }

  #manage-device-dialog.kc-device-workspace
    .kc-session-viewport {
    min-height: 450px;
  }

}