/* ============================================================
   KEEYNET dashboard — Devices page, concept A: one list
   ------------------------------------------------------------
   WHICH LIST THIS TARGETS, because it is not obvious:

   app.js renders the device list twice. originalRenderDevices()
   builds a real <table class="kc-device-table"> into
   #devices-list, then renderDevicesV24() adds .hidden to it and
   builds #devices-v24-list cards instead.

   But app.css:4918 ("SURGICAL OVERRIDE") says:

       #devices-v24-list        { display: none !important }
       #devices-list,
       .v24-legacy-devices-list { display: grid !important }

   #devices-list wins over .hidden on specificity (id beats
   class, both !important), so the page actually shows the
   LEGACY TABLE and the v24 cards are built into a hidden box
   on every render. This layer therefore styles the table.
   Selectors for the v24 cards are kept alongside so nothing
   breaks if that override is ever removed.

   WHAT IT CHANGES. The page is three stacked sections today:
   three stat cards (min-height 12rem each), a card holding the
   list, and a card holding pending enrollments that is empty
   almost all the time. So three numbers take a third of the
   screen, and the device you just enrolled shows up in a
   different card from your devices. This collapses that into
   one card: a thin status strip, then devices, then pending
   enrollments underneath them.

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

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


/* ---------- heading ------------------------------------------ */

#devices .members-heading {
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}

#devices .members-heading h1 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}


/* ---------- the three stat cards become one strip ------------ */

/* app.js keeps writing #devices-total-count, -online-count and
   -enrollment-count, so the numbers stay live — only the box
   around them changes. */

#devices .members-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 28px !important;

  box-sizing: border-box !important;
  margin: 0 0 16px !important;
  padding: 13px 18px !important;

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

#devices .members-summary .summary-card {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;

  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* The topline carries the label plus a status pill; in a strip
   the pill is noise and the label is the part worth keeping. */
#devices .members-summary .card-topline {
  display: block !important;
  margin: 0 !important;
  order: 2;

  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

#devices .members-summary .card-topline > span + span,
#devices .members-summary .live-badge,
#devices .members-summary .verified-dot,
#devices .members-summary .signal-lines {
  display: none !important;
}

#devices .members-summary .metric {
  order: 1;
  font-size: 23px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* The line under each metric only repeats its label. */
#devices .members-summary .summary-card > p {
  display: none !important;
}


/* ---------- the stray header row ----------------------------- */

/* #device-table-head is a third copy of the column labels. The
   markup already carries class="hidden" and a comment saying it
   was "hidden here for real", but .device-table-head sets
   display:grid !important later in app.css (line 7680) than
   .hidden sets display:none !important (line 43), at equal
   specificity — so it still renders above the table. This wins
   on id + class. */
#devices #device-table-head.hidden {
  display: none !important;
}


/* ---------- the one card ------------------------------------- */

#devices .members-content-card {
  margin: 0 0 16px !important;
  padding: 0 !important;

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

#devices .members-content-card .members-section-heading {
  margin: 0 !important;
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

#devices .members-content-card .members-section-heading h2 {
  font-size: 15px !important;
  line-height: 1.3 !important;
}


/* ---------- toolbar (built by the script) -------------------- */

#devices .dol-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}

#devices .dol-search {
  flex: 1 1 220px;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px;

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

#devices .dol-search svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--subtle);
}

#devices .dol-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

#devices .dol-filters {
  display: flex;
  gap: 2px;
  padding: 3px;

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

#devices .dol-filter {
  height: 30px;
  padding: 0 13px;

  border: 0;
  border-radius: 7px;
  background: transparent;

  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--subtle);
  cursor: pointer;

  transition: background .14s ease, color .14s ease;
}

#devices .dol-filter:hover {
  color: var(--text);
}

#devices .dol-filter[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 12%, transparent);
  font-weight: 700;
  color: var(--text);
}

#devices .dol-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#devices .dol-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--subtle);
}


/* ---------- the table sits flush in the card ----------------- */

#devices #devices-list {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#devices .kc-device-table-wrap {
  overflow-x: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#devices .kc-device-table {
  width: 100%;
  border-collapse: collapse;
}

#devices .kc-device-table thead th {
  padding: 10px 18px !important;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line-soft);

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

#devices .kc-device-table tbody td {
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  vertical-align: middle;
}

#devices .kc-device-table tbody tr:last-child td {
  border-bottom: 0;
}

#devices .kc-device-table tbody tr {
  transition: background .12s ease;
}

#devices .kc-device-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

#devices .kc-device-table tbody tr[hidden] {
  display: none !important;
}

#devices .kc-device-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}


/* ---------- the v24 cards, if that override is removed ------- */

#devices .devices-v24-list {
  gap: 0 !important;
  padding: 0 !important;
}

#devices .device-v24-card {
  margin: 0 !important;
  padding: 13px 18px !important;

  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#devices .device-v24-card:hover {
  transform: none !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

#devices .device-v24-card[hidden] {
  display: none !important;
}


/* ---------- pending enrollments, folded in ------------------- */

#devices .dol-pending-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;

  margin: 0;
  padding: 14px 18px 8px;
  border-top: 1px solid var(--line-soft);
}

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

#devices .dol-pending-heading span {
  font-size: 11.5px;
  color: var(--subtle);
}

#devices .device-enrollments-list {
  padding: 0 18px 16px !important;
  display: grid;
  gap: 9px;
}

/* A pending enrollment is not a device yet, so it reads as an
   outline rather than a filled row. */
#devices .device-enrollments-list > * {
  border: 1px dashed var(--border-strong) !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The old section is emptied by the script, not removed. */
#devices .dol-retired {
  display: none !important;
}


/* ---------- empty states ------------------------------------- */

#devices .empty-state {
  margin: 0 !important;
  padding: 34px 18px !important;
  border: 0 !important;
  background: transparent !important;
}

/* .empty-state sets a display in app.css, which beats the
   [hidden] attribute's UA rule — so the no-match notice stayed
   on screen with every row visible. */
#devices .dol-no-match[hidden] {
  display: none !important;
}

#devices #device-enrollments-empty {
  padding: 16px 18px 20px !important;
}

#devices #device-enrollments-empty .empty-icon {
  display: none !important;
}

#devices #device-enrollments-empty h3 {
  font-size: 13px !important;
  margin: 0 0 3px !important;
}

#devices #device-enrollments-empty p {
  font-size: 12px !important;
  margin: 0 !important;
}


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

@media (max-width: 640px) {
  #devices .dol-count {
    display: none;
  }

  #devices .dol-filters {
    width: 100%;
    overflow-x: auto;
  }
}