:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #eef2f5;
  color: #182026;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid #1f6f8b;
  background: #1f6f8b;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

button.secondary {
  background: white;
  color: #1f3542;
  border-color: #9aaab4;
}

button.danger {
  background: #a33a32;
  border-color: #a33a32;
}

input,
select {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #b8c4cc;
  border-radius: 6px;
  background: white;
}

.login-panel {
  width: min(360px, calc(100vw - 32px));
  margin: 12vh auto;
  padding: 24px;
  background: white;
  border: 1px solid #d7dee3;
  border-radius: 8px;
}

.login-panel form {
  display: grid;
  gap: 12px;
}

.form-message,
.app-message {
  margin: 0;
  color: #8a2924;
}

.form-message {
  font-size: 14px;
}

.app-message {
  margin: 12px 20px 0;
  padding: 10px 12px;
  background: #f8e5e3;
  border: 1px solid #e4b9b5;
  border-radius: 6px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid #d7dee3;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
}

.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
}

.tabs button {
  background: transparent;
  color: #1f3542;
  border-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.tabs button.active {
  background: white;
  border-color: #d7dee3;
}

.tab-page {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.panel {
  background: white;
  border: 1px solid #d7dee3;
  border-radius: 8px;
  padding: 16px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 17px;
}

.panel-header,
.card-actions,
.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-header {
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-header h2 {
  margin: 0;
}

.form-actions {
  align-items: stretch;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.device-filters,
.device-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.device-filters input {
  flex: 1 1 220px;
}

.device-pagination {
  justify-content: flex-end;
}

.device-list-page {
  max-height: 60vh;
  overflow: auto;
  contain: layout paint;
}

.device-list-page > .row {
  content-visibility: auto;
  contain-intrinsic-size: auto 58px;
}

.table {
  display: grid;
  gap: 6px;
}

.row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 90px 1fr 1fr 1fr repeat(4, auto);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  background: #f8fafb;
  border: 1px solid #e4e9ed;
  border-radius: 6px;
  min-height: 38px;
}

.log-row {
  grid-template-columns: 150px 150px 1fr 2fr;
}

.status {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dfe7ec;
}

.online {
  background: #d8f0e1;
  color: #175f36;
}

.offline {
  background: #f3e0df;
  color: #7a2a24;
}

.route-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.route-card {
  border: 1px solid #d7dee3;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.route-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.route-card-header h3 {
  margin-top: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.detail-item,
.detail-section {
  padding: 10px;
  border: 1px solid #e4e9ed;
  border-radius: 6px;
  background: #f8fafb;
}

.detail-item strong,
.detail-item span {
  display: block;
}

.detail-item strong {
  margin-bottom: 5px;
  color: #43535d;
  font-size: 13px;
}

.detail-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.detail-section h3 {
  margin-top: 0;
}

.detail-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.detail-list-item {
  padding: 7px 8px;
  background: white;
  border-radius: 4px;
}

.route-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.device-pill {
  display: block;
  margin: 4px 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: #edf2f5;
}

.settings-list {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 260px);
  gap: 8px 12px;
  align-items: center;
}

canvas {
  width: 100%;
  height: 220px;
  border: 1px solid #d7dee3;
  border-radius: 8px;
  background: #ffffff;
}

@media (max-width: 820px) {
  .grid-form,
  .row,
  .log-row,
  .settings-list {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
  }
}