/* ============================================================
   KEEYNET dashboard — concept E: the device modal, rebuilt
   ------------------------------------------------------------
   #manage-device-dialog keeps its markup and all of its
   handlers. What changes is the shape:

   1. The Info / Manage / Activity tabs split about one screen
      of content across three clicks. The nav goes away and all
      three panels show at once, each with its own heading, in a
      single scroll.

   2. Four large buttons — Reconcile, Restart agent, Update
      client, Repair — are all disabled and all labelled
      "Remote action coming later". Four dead controls read as
      broken software. They are replaced by one honest line
      (inserted by device-modal.js).

   3. Disable and Revoke credential sat beside Rename as equals.
      They move into a bordered danger zone; Rename stays in the
      footer with Done.

   Written in the existing design tokens, so it follows the
   Green / Black / Dull White themes.

   The panels are forced visible here rather than by stripping
   their [hidden] attributes, so app.js's tab handlers can keep
   toggling that attribute without anything disappearing.

   To remove: delete the <link> and <script> tags.
   ============================================================ */


/* ---------- the dialog ---------------------------------------- */

/* It was rendering INLINE, halfway down the page, left-aligned
   and clipped. Two causes:
     - app.css:7289 sets position: static !important on dialogs
       inside the dashboard grid, which drops it into normal
       flow even when it is open;
     - it opens non-modally here (:modal is false), so there is
       no ::backdrop and nothing dims the page behind it.

   This pins it to the middle of the viewport. The scrim is the
   second box-shadow: a 100vmax spread paints the whole window
   without needing an extra element, so it works whether the
   dialog was opened with show() or showModal(). */

#manage-device-dialog[open] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  margin: 0 !important;
  max-height: calc(100vh - 48px) !important;
  z-index: 1200 !important;

  /* Lifted out of flow it no longer inherits anything to sit on,
     so it needs its own opaque surface or the page shows
     straight through it. */
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;

  box-shadow: 0 32px 80px -20px rgba(10, 28, 19, .45) !important;
}

/* The scrim is a real element on <body>, added by the script.
   A 100vmax box-shadow spread was tried first and computed
   correctly, but never painted: #dashboard-view has
   overflow: hidden, and ::backdrop does not exist here because
   the dialog opens non-modally. A body-level element has
   neither problem. */
.kdm-scrim {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 28, 19, .45);
}

#manage-device-dialog[open] .device-dialog-card-v24 {
  background: var(--surface) !important;
}

#manage-device-dialog::backdrop {
  background: rgba(10, 28, 19, .45);
}

/* The card can never be taller than the dialog now holding it. */
#manage-device-dialog .device-dialog-card-v24 {
  max-height: calc(100vh - 48px) !important;
}

/* A full-width native scrollbar inside a 680px dialog is most of
   what made it look unfinished. */
#manage-device-dialog .kdm-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

#manage-device-dialog .kdm-scroll::-webkit-scrollbar {
  width: 8px;
}

#manage-device-dialog .kdm-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--border-strong);
  background-clip: content-box;
}

#manage-device-dialog .kdm-scroll::-webkit-scrollbar-track {
  background: transparent;
}


/* .dashboard-dialog sets width: min(820px, 100vw - 32px)
   !important and .device-dialog-v24 asks for 940px. A device is
   a short record, not a workspace — 680px reads better and
   keeps the two-column detail grid from stretching. */
#manage-device-dialog.dashboard-dialog {
  width: min(680px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}


#manage-device-dialog .device-dialog-card-v24 {
  display: flex;
  flex-direction: column;
  gap: 0;

  box-sizing: border-box;
  /* .dashboard-dialog already sets the dialog's own width with
     !important, so the card simply fills it. */
  width: 100%;
  max-height: min(820px, calc(100vh - 48px));
  padding: 0;

  border-radius: 20px;
  overflow: hidden;
}


/* ---------- hero header: status is the headline --------------- */

#manage-device-dialog .device-dialog-heading-v24 {
  flex: none;
  align-items: flex-start;
  gap: 14px;

  margin: 0;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line-soft);
}

#manage-device-dialog .device-dialog-heading-v24 > div:not(.kdm-icon) {
  flex: 1 1 auto;
  min-width: 0;
}

#manage-device-dialog .kdm-icon {
  flex: none;
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}

#manage-device-dialog .kdm-icon svg {
  width: 22px;
  height: 22px;
}

#manage-device-dialog .device-dialog-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
}

#manage-device-dialog #manage-device-name {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

#manage-device-dialog #manage-device-identifier {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}


/* ---------- one scroll, no tabs ------------------------------- */

#manage-device-dialog .device-detail-tabs {
  display: none !important;
}

/* app.js keeps toggling [hidden] on these as the (now hidden)
   tabs are clicked; overriding display means that no longer
   decides what is on screen. */
#manage-device-dialog .device-tab-panel {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#manage-device-dialog .kdm-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  padding: 20px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#manage-device-dialog .kdm-section-title {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--subtle);
}


/* ---------- details grid -------------------------------------- */

#manage-device-dialog .device-detail-grid-v24 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;

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

  border: 1px solid var(--line-soft) !important;
  border-radius: 12px !important;
  background: var(--line-soft) !important;
  overflow: hidden !important;
}

#manage-device-dialog .device-detail-grid-v24 > * {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}

#manage-device-dialog .device-detail-grid-v24 .device-detail-label,
#manage-device-dialog .device-detail-grid-v24 > * > span:first-child {
  display: block;
  margin-bottom: 3px;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--subtle) !important;
}

/* Values wrap normally — a date like "Oct 4, 2026, 4:38 AM"
   needs to, or it runs into the next column. */
#manage-device-dialog .device-detail-value,
#manage-device-dialog .device-detail-grid-v24 strong {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Addresses are one token. app.css gives .kc-device-detail-value
   overflow-wrap: anywhere, which split "10.167.244.1" across two
   lines after the last dot. */
/* break-word, not anywhere: it breaks a word only when the word
   genuinely does not fit, so "10.167.244.1" stays whole while
   "Oct 4, 2026, 4:38 AM" still wraps at its spaces. nowrap is
   wrong here — these two share one class. */
#manage-device-dialog .kc-device-detail-value,
#manage-device-dialog .device-detail-grid-v24 code {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#manage-device-dialog .kdm-scroll > div[hidden] {
  display: none !important;
}


/* ---------- remote access pills -------------------------------- */

#manage-device-dialog #device-remote-actions {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}


/* ---------- the four dead buttons ------------------------------ */

#manage-device-dialog .device-manage-intro,
#manage-device-dialog #manage-device-guidance {
  display: none !important;
}

/* ---------- "Coming soon", used everywhere it applies -------- */

#manage-device-dialog .kdm-soon {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  padding: 2px 7px;
  border-radius: 6px;

  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);

  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--subtle) !important;
  white-space: nowrap;
}


/* ---------- the three stat tiles ------------------------------- */

#manage-device-dialog .kdm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#manage-device-dialog .kdm-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;

  box-sizing: border-box;
  padding: 13px 14px;

  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-soft);
}

#manage-device-dialog .kdm-stat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--subtle);
}

#manage-device-dialog .kdm-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text-tertiary);
}

#manage-device-dialog .kdm-stat-note {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--subtle);
}


/* ---------- the upcoming chips --------------------------------- */

/* These are the real .device-maintenance-action buttons, kept
   disabled by app.js. As four full-width buttons they read as
   broken; as chips alongside the stat tiles they read as a
   roadmap. */
#manage-device-dialog .device-maintenance-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#manage-device-dialog .device-maintenance-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;

  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px 13px !important;

  border: 1px solid var(--line-soft) !important;
  border-radius: 11px !important;
  background: var(--surface-soft) !important;

  text-align: left !important;
  cursor: default !important;
  opacity: 1 !important;
}

#manage-device-dialog .device-maintenance-action strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}


/* ---------- activity ------------------------------------------- */

#manage-device-dialog .device-activity-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

#manage-device-dialog .device-activity-heading .eyebrow {
  display: none !important;
}

#manage-device-dialog .device-activity-heading h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--subtle);
}

#manage-device-dialog .device-activity-stream {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

#manage-device-dialog .device-activity-stream:empty::after {
  content: "No activity has been recorded for this device yet.";
  display: block;
  padding: 14px;
  font-size: 12.5px;
  color: var(--muted);
}


/* ---------- danger zone ----------------------------------------- */

#manage-device-dialog .kdm-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--line));
  border-radius: 12px;
  overflow: hidden;
}

#manage-device-dialog .kdm-danger-title {
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}

#manage-device-dialog .kdm-danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 13%, transparent);
}

#manage-device-dialog .kdm-danger-row:last-child {
  border-bottom: 0;
}

#manage-device-dialog .kdm-danger-row > span {
  flex: 1 1 200px;
  min-width: 0;
}

#manage-device-dialog .kdm-danger-row strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

#manage-device-dialog .kdm-danger-row small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--subtle);
}

/* The real buttons, moved in by the script.

   app.css styles these with a TWO-ID selector —
   "#manage-device-dialog #manage-device-status, ..." — setting
   border: 0 !important, which outranks any one-id rule. So
   these use two ids as well, or a destructive control keeps
   rendering as a plain accent-coloured text link. */
#manage-device-dialog .kdm-danger #manage-device-status,
#manage-device-dialog .kdm-danger #manage-device-revoke,
#manage-device-dialog .kdm-danger #manage-device-delete {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 13px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;

  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;

  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

#manage-device-dialog .kdm-danger #manage-device-revoke,
#manage-device-dialog .kdm-danger #manage-device-delete {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line)) !important;
  color: var(--danger) !important;
  font-weight: 700 !important;
}

#manage-device-dialog .kdm-danger #manage-device-status:disabled,
#manage-device-dialog .kdm-danger #manage-device-revoke:disabled,
#manage-device-dialog .kdm-danger #manage-device-delete:disabled {
  opacity: .5;
  cursor: default;
}

/* .device-danger-zone is moved inside .kdm-danger, so its own
   border would draw a box inside a box. */
#manage-device-dialog .kdm-danger .device-danger-zone {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 12px 14px !important;

  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--danger) 13%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#manage-device-dialog .kdm-danger .device-danger-zone > div {
  flex: 1 1 200px;
  min-width: 0;
}

/* The old row the two buttons came out of. */
#manage-device-dialog .planned-actions.device-manage-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
}

#manage-device-dialog .planned-actions.device-manage-actions:empty {
  display: none;
}


/* ---------- footer ---------------------------------------------- */

#manage-device-dialog .dialog-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0;
  padding: 14px 26px;

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

#manage-device-dialog .dialog-actions .kdm-enrolled {
  flex: 1;
  font-size: 11.5px;
  color: var(--subtle);
}

#manage-device-dialog .dialog-actions #manage-device-rename {
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface) !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

#manage-device-dialog .dialog-actions #manage-device-rename:disabled {
  opacity: .5;
  cursor: default;
}


/* ---------- narrow screens --------------------------------------- */

@media (max-width: 560px) {
  #manage-device-dialog .kdm-stats {
    grid-template-columns: minmax(0, 1fr);
  }

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

  #manage-device-dialog .device-detail-grid-v24 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #manage-device-dialog .kdm-scroll,
  #manage-device-dialog .device-dialog-heading-v24,
  #manage-device-dialog .dialog-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  #manage-device-dialog .dialog-actions .kdm-enrolled {
    display: none;
  }
}


/* ---------- leftovers from the old layout ---------------------- */

/* With the maintenance grid and guidance hidden, these wrappers
   are left drawing empty bordered boxes. */
#manage-device-dialog .planned-actions.device-manage-actions,
#manage-device-dialog .device-tab-panel > *:empty {
  display: none !important;
}

#manage-device-dialog [data-device-panel="manage"] {
  display: contents !important;
}


/* ---------- detail rows ------------------------------------------ */

/* .kc-device-detail-row pins its value column to a fixed ~71px,
   which broke "10.167.244.1" after the last dot and wrapped the
   last-seen date onto two lines. Label left, value right, value
   taking whatever is left. */

#manage-device-dialog .kc-device-detail-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#manage-device-dialog .kc-device-detail-row > :first-child {
  flex: none !important;
  width: auto !important;
}

#manage-device-dialog .kc-device-detail-value {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: right !important;
}
