* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: #1f2937;
  background: #f4f6f8;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  background: #1261a6;
  color: #fff;
}

button.secondary {
  background: #4b5563;
}

button.danger {
  background: #b42318;
}

button:disabled,
button[aria-disabled="true"],
input[type="checkbox"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #c9d1dc;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.app-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 20px 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.brand h1 {
  margin: 0;
  font-size: 28px;
}

.brand p {
  margin: 5px 0 0;
  color: #5d6673;
}

.panel {
  background: #fff;
  border: 1px solid #dce2ea;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 18px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title h2 {
  margin: 0 0 12px;
}

.device-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) minmax(280px, 2fr) auto;
  gap: 10px;
  align-items: start;
}

.device-form textarea {
  min-height: 44px;
  resize: vertical;
}


.stack {
  display: grid;
  gap: 12px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.hidden {
  display: none !important;
}

.message {
  min-height: 24px;
  color: #5d6673;
}

.message.error {
  color: #b42318;
}

.message.ok {
  color: #087443;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid #e5e9ef;
  padding: 10px 8px;
  text-align: left;
  white-space: nowrap;
}

th {
  font-size: 12px;
  text-transform: uppercase;
  color: #5d6673;
}

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.status.on {
  background: #dcfce7;
  color: #166534;
}

.status.off {
  background: #fee2e2;
  color: #991b1b;
}

.codebox {
  min-height: 58px;
  overflow-wrap: anywhere;
  border: 1px solid #dce2ea;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
  font-family: Consolas, monospace;
  font-size: 12px;
}

.codebox.compact {
  max-width: 360px;
  max-height: 82px;
  overflow: auto;
}

.comment-input {
  min-width: 220px;
}

@media (max-width: 860px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .device-form {
    grid-template-columns: 1fr;
  }
}

.ttl-input {
  width: 92px;
}

#create-user-form input,
#create-user-form select {
  width: auto;
  min-width: 130px;
}

.login-panel {
  max-width: 420px;
}


.actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.actions-row button {
  min-width: 76px;
  padding: 9px 10px;
}


th:last-child,
td:last-child {
  min-width: 270px;
}

#users-body tr {
  cursor: pointer;
}

#users-body tr.selected-row {
  background: #eef6ff;
}

#devices-body td {
  vertical-align: top;
}

.device-detail {
  display: block;
  margin-top: 5px;
  color: #5d6673;
  white-space: normal;
  overflow-wrap: anywhere;
}

.board-identity {
  min-width: 170px;
}

.firmware-cell {
  min-width: 130px;
}

.device-actions {
  flex-wrap: wrap;
}

#devices-body .empty-state {
  padding: 22px 8px;
  white-space: normal;
  color: #5d6673;
}


.firmware-select-cell { white-space: nowrap; }
.firmware-checkbox,
#select-ready-updates { width: 18px; height: 18px; padding: 0; vertical-align: middle; }
.firmware-checkbox { margin: 0 8px 0 0; }
.firmware-selection { margin: 12px 0; }


#action-unavailable-dialog,
#delete-device-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid #c9d1dc;
  border-radius: 8px;
  color: #1f2937;
  box-shadow: 0 16px 48px #0003;
}

#action-unavailable-dialog::backdrop,
#delete-device-dialog::backdrop { background: #11182788; }
#action-unavailable-dialog h2,
#delete-device-dialog h2 { margin: 0 0 12px; }
#action-unavailable-reason,
#delete-device-question,
#delete-device-id { line-height: 1.5; overflow-wrap: anywhere; }
#action-unavailable-dialog form { text-align: right; }


.catalog-help { color: #5d6673; line-height: 1.5; overflow-wrap: anywhere; }
.catalog-form, .catalog-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.catalog-wide, .catalog-metadata { grid-column: 1 / -1; }
.catalog-form button { justify-self: start; }
.catalog-filters { margin: 16px 0; }
.catalog-filters label:first-child { flex: 1; min-width: 220px; }
#firmware-upload-panel summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
#firmware-catalog-body td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; max-width: 300px; }
#firmware-catalog-body td:last-child { min-width: 150px; }
.download-checkbox, #select-download-devices { width: 18px; height: 18px; padding: 0; vertical-align: middle; }
.firmware-select-cell label { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 400; }
#firmware-picker-dialog { width: min(660px, calc(100vw - 32px)); padding: 24px; border: 1px solid #c9d1dc; border-radius: 8px; color: #1f2937; }
#firmware-picker-dialog::backdrop { background: #11182788; }
#firmware-picker-dialog h2 { margin-top: 0; }
#firmware-picker-message { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .catalog-form, .catalog-metadata { grid-template-columns: 1fr; }
}

#remembered-account {
  margin-bottom: 12px;
}

#password-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid #c9d1dc; border-radius: 8px; color: #1f2937; }
#password-dialog::backdrop { background: #11182788; }
#password-dialog h2 { margin-top: 0; }
#password-help, #password-message { overflow-wrap: anywhere; }


#device-events-panel .table-wrap { max-height: 60vh; margin: 12px 0; }
#device-events-panel th { position: sticky; top: 0; background: #f5f7fa; }
#device-events-panel td { overflow-wrap: anywhere; }