#new-group-form {
  margin-top: 20px;
  display: none;
}

#groups-form-message,
#form-message {
  margin-top: 15px;
}

#iot-device-list table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
#iot-device-list th,
#iot-device-list td {
  padding: 8px;
  text-align: left;
}
#iot-device-list a {
  color: #0073aa;
  text-decoration: none;
}
#iot-device-list a:hover {
  text-decoration: underline;
}
#register-device-form textarea {
  width: 100%;
  height: 80px;
}
#form-message {
  margin-top: 10px;
  font-weight: bold;
}
#form-message .error {
  color: red;
}
#form-message .success {
  color: green;
}
#device-details {
  margin-top: 20px;
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
}

/* device-info */
.device-info {
  font-family: sans-serif;
  white-space: nowrap;
  margin-bottom: 20px;
}
.device-info strong {
  display: inline-block;
  width: 140px; /* Adjust as needed */
  font-weight: bold;
}
/* */
td.device-comment a {
  padding: 0 3px;
}

td.device-comment .td-actions {
  float: right;
}

@media only screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
  }

  thead {
    display: none;
  }

  tr {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
  }

  td {
    display: flex;
    justify-content: space-between; /* label left, value right */
    align-items: flex-start;
    padding: 5px 0;
    word-break: break-word;
    border-left: none;
    border-right: none;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    flex: 0 0 45%; /* label width */
    margin-right: 10px;
    word-break: break-word;
  }

  td > * {
    flex: 1 1 auto; /* content takes remaining space */
    word-break: break-word;
    display: contents;
  }

  /* Optional: for multi-line wrapping of floated elements inside td */
  td > .right {
    margin-left: auto; /* push right-aligned element to right */
  }

  td .td-text {
    flex: 0 0 auto; /* text only as wide as content */
  }

  td .td-actions {
    display: flex; /* keep anchors together */
    gap: 5px; /* space between anchors */
    flex: 0 0 auto; /* width fits content */
  }
}