:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  --brand: #018e97;
  --ink: #182126;
  --muted: #69767d;
  --border: #e2e7e9;
  --soft: #f5f7f7;
  --normal: #23875b;
  --normal-bg: #eaf7f0;
  --attention: #b96713;
  --attention-bg: #fff3df;
  --stale: #c13c3c;
  --stale-bg: #fdecec;
  --unknown: #647178;
  --unknown-bg: #eef1f2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--ink);
}

body > header,
body > nav,
body > main {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 112px;
  padding-block: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
}

.brand-icon svg,
.routing-icon svg {
  width: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand h1 {
  margin: 0;
  font-size: 1.38rem;
  font-weight: 750;
  letter-spacing: 0.035em;
}

.brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.api-link {
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.api-link:hover {
  text-decoration: underline;
}

.main-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px;
  border-bottom: 1px solid var(--border);
}

.nav-button {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}

.nav-button.active {
  background: #f0f3f3;
  color: var(--ink);
}

main {
  padding-block: 36px 56px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 20px;
}

.section-heading h2,
.routing-placeholder h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
}

.section-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.last-cycle {
  padding: 6px 11px;
  border-radius: 999px;
  background: #f0f2f3;
  color: var(--muted);
  font-size: 0.78rem;
}

.fleet-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.device-card {
  background: #fff;
}

.device-card + .device-card {
  border-top: 1px solid var(--border);
}

.device-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 15px;
}

.radio-state {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: currentColor;
}

.radio-state svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.device-card[data-status="normal"] .radio-state {
  color: var(--normal);
}

.device-card[data-status="attention"] .radio-state {
  color: var(--attention);
}

.device-card[data-status="stale"] .radio-state {
  color: var(--stale);
}

.device-card[data-status="unknown"] .radio-state {
  color: var(--unknown);
}

.device-identity {
  min-width: 0;
  flex: 1;
}

.device-identity h3 {
  overflow: hidden;
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-identity p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.state-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.state-badge.normal {
  background: var(--normal-bg);
  color: var(--normal);
}

.state-badge.attention {
  background: var(--attention-bg);
  color: var(--attention);
}

.state-badge.stale {
  background: var(--stale-bg);
  color: var(--stale);
}

.state-badge.unknown {
  background: var(--unknown-bg);
  color: var(--unknown);
}

.device-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 20px 17px 64px;
  background: #fff;
}

.metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 20px 0 0;
}

.metric + .metric {
  border-left: 0;
}

.metric svg {
  width: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: #7c888e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.metric-text {
  min-width: 0;
}

.metric-label {
  display: none;
}

.metric-value {
  display: block;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-value.danger {
  color: var(--stale);
}

.metric.low-battery svg {
  stroke: var(--stale);
}

.empty-state {
  padding: 44px 20px;
  color: var(--muted);
  text-align: center;
}

.admin-tools {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  color: var(--ink);
}

.admin-tools > summary {
  padding: 20px 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
}

.admin-content {
  padding-bottom: 20px;
}

.panel {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.panel h3 {
  margin: 0 0 16px;
}

.token-panel,
.type-form {
  display: flex;
  align-items: end;
  gap: 12px;
}

.token-panel .control-field,
.type-form .control-field {
  width: min(360px, 100%);
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 12px;
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control-field label {
  font-size: 0.78rem;
  font-weight: 600;
}

.control-field-narrow {
  max-width: 190px;
}

.control-field input,
.control-field select {
  width: 100%;
}

button,
input,
select {
  font: inherit;
}

button {
  padding: 9px 13px;
  border: 1px solid #ccd4d7;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

button:hover {
  border-color: #aeb9bd;
}

button.danger {
  border-color: #e5a2a2;
  color: var(--stale);
}

input,
select {
  padding: 9px;
  border: 1px solid #ccd4d7;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

th,
td {
  padding: 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.pagination,
.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination {
  margin-top: 14px;
}

.status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  font-size: 0.8rem;
}

.routing-placeholder {
  display: grid;
  min-height: 340px;
  place-items: center;
  align-content: center;
  padding: 40px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}

.routing-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 13px;
  background: #eaf5f6;
  color: var(--brand);
}

.routing-placeholder p {
  margin: 9px 0 0;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  body > header,
  body > nav,
  body > main {
    width: min(100% - 28px, 1120px);
  }

  .app-header {
    min-height: 96px;
  }

  .brand-icon {
    width: 44px;
    height: 44px;
  }

  .brand h1 {
    font-size: 1.02rem;
  }

  .api-link {
    display: none;
  }

  .main-nav .nav-button {
    min-width: 0;
    flex: 1;
  }

  main {
    padding-block: 28px 42px;
  }

  .device-metrics {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 63px;
  }

  .metric:nth-child(3) {
    border-left: 0;
  }

  .metric:nth-child(n + 3) {
    border-top: 0;
  }
}

@media (max-width: 430px) {
  .brand {
    gap: 11px;
  }

  .brand h1 {
    font-size: 0.92rem;
    letter-spacing: 0.02em;
  }

  .brand p {
    font-size: 0.74rem;
  }

  .section-heading h2 {
    font-size: 1.28rem;
  }

  .device-card-top {
    gap: 11px;
    padding: 15px;
  }

  .metric {
    gap: 8px;
    padding: 12px;
  }

  .metric-value {
    font-size: 0.78rem;
  }

  .token-panel,
  .type-form {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Interface MADIPTT CONTROL V1, alignée sur les maquettes de supervision et routage. */
.fleet-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px;
  margin: 0 14px 34px;
}

.fleet-overview div {
  display: grid;
  gap: 5px;
}

.fleet-overview span {
  color: var(--muted);
  font-size: 1rem;
}

.fleet-overview strong {
  font-size: 1.75rem;
  font-weight: 500;
}

.fleet-overview small {
  color: var(--muted);
}

.fleet-overview .normal strong {
  color: #0aa347;
}

.fleet-overview .alert strong {
  color: #dd2f2f;
}

.device-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.device-name-row h3 {
  min-width: 0;
}

.refresh-button {
  display: grid;
  width: 29px;
  height: 29px;
  padding: 5px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--brand);
}

.refresh-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.refresh-button.spinning svg {
  animation: refresh-spin 1s linear infinite;
}

.refresh-button.failed {
  color: var(--attention);
}

.refresh-button:disabled {
  color: #a7b0b4;
  cursor: default;
}

.refresh-label {
  color: var(--muted);
  font-size: 0.66rem;
  white-space: nowrap;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

.metric.danger,
.metric.low-battery {
  color: var(--stale);
}

.metric.danger svg,
.metric.low-battery svg {
  stroke: var(--stale);
}

.routing-config {
  padding: 2px 0 20px;
}

.section-heading.compact {
  align-items: center;
  margin-bottom: 0;
}

.routing-block {
  padding: 25px 0;
  border-bottom: 1px solid var(--border);
}

.routing-block h3,
.cadence-block > label {
  display: block;
  margin: 0 0 14px;
  font-size: 0.84rem;
  font-weight: 650;
}

.routing-block-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.choice-list {
  display: grid;
  gap: 6px;
}

.choice-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.choice-row input,
.field-options input {
  width: 17px;
  height: 17px;
  accent-color: #111;
}

.choice-row span {
  display: grid;
  flex: 1;
  gap: 2px;
}

.choice-row b {
  font-size: 0.86rem;
}

.choice-row small,
.choice-row em,
.muted,
.empty-inline {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.field-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.field-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
}

.cadence-block select {
  width: 100%;
  border-radius: 999px;
}

.cadence-block p {
  margin: 7px 10px 0;
}

button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.registry {
  margin-top: 28px;
}

.device-form {
  display: grid;
  grid-template-columns: 1fr 150px 1fr auto;
  gap: 10px;
}

.registry-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.registry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.registry-row + .registry-row {
  border-top: 1px solid var(--border);
}

.registry-row span {
  display: grid;
  flex: 1;
}

.registry-row small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .fleet-overview {
    gap: 15px;
    margin-inline: 0;
  }

  .fleet-overview strong {
    font-size: 1.35rem;
  }

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