/* ============================================================
   KEEYNET dashboard — Add Device: platform tiles (Concept A)
   ------------------------------------------------------------
   Replaces the Platform <select> in #add-device-form with a tile
   grid, so "only Linux has a client today" is visible instead of
   hidden behind a dropdown click.

   Written entirely in the existing design tokens, so it follows
   the Green / Black / Dull White themes with no extra rules.

   Scoped to #add-device-form — no other dialog or page is
   touched.

   The <select id="device-platform"> stays in the DOM and stays
   the single source of truth: app.js:5438 still reads
   .value from it, and it is still the element the tiles write
   to. Removing this layer leaves a working dropdown.

   To remove: delete the <link> to this file and the <script>
   tag for add-device-tiles.js.
   ============================================================ */


/* ---------- header: icon + tighter type ---------------------- */

#add-device-form .dialog-heading {
  align-items: flex-start;
  gap: 14px;
}

/* The heading is a space-between flex row. A third child would
   otherwise push the title block into the middle of it, so the
   title block is told to take the slack. */
#add-device-form .dialog-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

#add-device-form .adt-heading-icon {
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 2px;

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

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

#add-device-form .adt-heading-icon svg {
  width: 20px;
  height: 20px;
}


/* ---------- the select, kept but taken out of the layout ----- */

/* Not display:none — a hidden-but-present control keeps
   form validation, the name= attribute and any code that
   reads or writes .value working exactly as before. */
#add-device-form .adt-select-host {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- the tile group ----------------------------------- */

#add-device-form .adt-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#add-device-form .adt-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#add-device-form .adt-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}

#add-device-form .adt-label-note {
  font-size: 11.5px;
  color: var(--subtle);
}

#add-device-form .adt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}


/* ---------- a tile ------------------------------------------- */

#add-device-form .adt-tile {
  position: relative;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 9px;

  margin: 0;
  padding: 13px 12px 12px;
  text-align: left;

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

  font: inherit;
  color: var(--text);
  cursor: pointer;

  transition:
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

#add-device-form .adt-tile:hover:not([aria-disabled="true"]) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
}

#add-device-form .adt-tile:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#add-device-form .adt-tile-icon {
  color: var(--muted);
  line-height: 0;
}

#add-device-form .adt-tile-icon svg {
  width: 22px;
  height: 22px;
}

/* name and sub are spans, so they need to be told to stack */
#add-device-form .adt-tile-text,
#add-device-form .adt-tile-name,
#add-device-form .adt-tile-sub {
  display: block;
}

#add-device-form .adt-tile-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

#add-device-form .adt-tile-sub {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--subtle);
}


/* ---------- selected ----------------------------------------- */

#add-device-form .adt-tile[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

#add-device-form .adt-tile[aria-checked="true"] .adt-tile-icon {
  color: var(--accent);
}

#add-device-form .adt-tile[aria-checked="true"] .adt-tile-sub {
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

#add-device-form .adt-check {
  position: absolute;
  top: 9px;
  right: 9px;

  width: 18px;
  height: 18px;

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

  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  line-height: 0;
}

#add-device-form .adt-check svg {
  width: 10px;
  height: 10px;
}

#add-device-form .adt-tile[aria-checked="true"] .adt-check {
  display: flex;
}


/* ---------- unavailable -------------------------------------- */

#add-device-form .adt-tile[aria-disabled="true"] {
  cursor: default;
  background: var(--surface-soft);
  border-color: var(--border-subtle);
}

#add-device-form .adt-tile[aria-disabled="true"] .adt-tile-icon,
#add-device-form .adt-tile[aria-disabled="true"] .adt-tile-name {
  color: var(--subtle);
}

#add-device-form .adt-soon {
  position: absolute;
  top: 10px;
  right: 10px;

  padding: 3px 6px;
  border-radius: 5px;

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

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--subtle);
}


/* ---------- the hint, as a note block ------------------------ */

#add-device-form .form-hint.adt-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  margin: 0;
  padding: 13px 15px;

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

  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

#add-device-form .form-hint.adt-note svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--accent);
}

#add-device-form .form-hint.adt-note strong {
  font-weight: 700;
  color: var(--text);
}


/* ---------- footer slot counter ------------------------------ */

#add-device-form .dialog-actions {
  align-items: center;
}

#add-device-form .adt-slots {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-right: auto;

  font-size: 11.5px;
  color: var(--subtle);
}

#add-device-form .adt-slots svg {
  flex: none;
  width: 13px;
  height: 13px;
}


/* ---------- short viewports ---------------------------------- */

/* The tiles make the card ~160px taller than the dropdown did
   (442px -> 601px measured). That still clears a 720px-tall
   window, but a very short one would run off the bottom, and the
   card has no max-height of its own. This engages only below
   680px so no normal screen ever sees an inner scrollbar. */

@media (max-height: 680px) {
  #add-device-form {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}


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

@media (max-width: 560px) {
  #add-device-form .adt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #add-device-form .adt-slots {
    display: none;
  }
}