/* Local, presentation-only styles for client/legacyPlateUi.mjs. */
.legacy-plate-card,
.original-plate-card {
  overflow: hidden;
  border: 1px solid #d9e2ed;
  border-radius: 12px;
  background: #fff;
  color: #1e334f;
  box-shadow: 0 1px 2px rgb(22 48 84 / .05);
}

.legacy-plate-card {
  cursor: pointer;
}

.legacy-plate-card:focus-visible,
.legacy-plate-link:focus-visible,
.legacy-plate-row-actions button:focus-visible,
.legacy-plate-actions button:focus-visible {
  outline: 3px solid #6aa8f8;
  outline-offset: 2px;
}

.legacy-plate-card > header,
.legacy-plate-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
}

.legacy-plate-card > header {
  border-bottom: 1px solid #e9eef5;
}

.legacy-plate-card > footer {
  min-height: 42px;
  border-top: 1px solid #e9eef5;
  background: #fbfdff;
}

.legacy-plate-card-id {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.legacy-plate-card h3 {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #163865;
  font-size: 18px;
  line-height: 1.2;
}

.legacy-plate-type {
  display: inline-block;
  border-radius: 99px;
  padding: 3px 7px;
  background: #eaf3ff;
  color: #195eae;
  font-size: 11px;
  font-weight: 700;
}

.legacy-plate-card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 13px;
}

.legacy-plate-card-body > div,
.legacy-plate-relation {
  min-width: 0;
}

.legacy-plate-card-body small,
.legacy-plate-relation small {
  display: block;
  color: #718198;
  font-size: 11px;
}

.legacy-plate-card-body b,
.legacy-plate-card-body span,
.legacy-plate-relation b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #2a405d;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-plate-owner,
.legacy-plate-port {
  grid-column: span 1;
}

.legacy-plate-expiry {
  color: #60738a;
  font-size: 11px;
}

.legacy-plate-actions,
.legacy-plate-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legacy-plate-actions button,
.legacy-plate-row-actions button {
  min-width: 28px;
  min-height: 28px;
  border: 1px solid #c9d9ed;
  border-radius: 6px;
  background: #fff;
  color: #1559ad;
  cursor: pointer;
}

.legacy-plate-actions button:hover,
.legacy-plate-row-actions button:hover {
  border-color: #1768d8;
  background: #edf5ff;
}

.legacy-plate-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 99px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Validity colours are semantic and used by both mobile cards and tables. */
.legacy-plate-status.valid,
.status-valid {
  background: #dcf7e8;
  color: #18794e;
}

.legacy-plate-status.soon,
.status-soon {
  background: #fff1c9;
  color: #8c5500;
}

.legacy-plate-status.expired,
.status-expired {
  background: #ffe1e5;
  color: #b42332;
}

.legacy-plate-status.neutral,
.status-neutral {
  background: #edf1f5;
  color: #63738a;
}

.legacy-plate-relation.empty,
.legacy-empty-value {
  color: #77879a;
  font-size: 12px;
}

.original-plate-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-height: 24px;
}

.original-plate-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1768d8;
}

.original-plate-table-wrap {
  overflow-x: auto;
  border: 1px solid #d9e2ed;
  border-radius: 11px;
  background: #fff;
}

.original-plate-table,
.legacy-plate-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: #2a405d;
  font-size: 13px;
}

.legacy-plate-table th,
.legacy-plate-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e7edf4;
  text-align: left;
  vertical-align: middle;
}

.legacy-plate-table th {
  background: #f6f9fd;
  color: #58708e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.legacy-plate-table tbody tr:last-child td {
  border-bottom: 0;
}

.legacy-plate-table tbody tr:hover {
  background: #f9fbfe;
}

.legacy-plate-table th.selection,
.legacy-plate-table td:first-child:has(.original-plate-select) {
  width: 42px;
  text-align: center;
}

.legacy-plate-link {
  display: grid;
  gap: 3px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #174a8b;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.legacy-plate-link b {
  overflow-wrap: anywhere;
}

.legacy-plate-link small {
  color: #75859a;
  font-size: 11px;
}

.legacy-plate-table .legacy-plate-relation b {
  max-width: 130px;
}

.original-plate-detail-cards,
.legacy-plate-detail-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.legacy-detail-card {
  min-width: 0;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  padding: 13px;
  background: #fff;
}

.legacy-detail-card h3 {
  margin: 0 0 10px;
  color: #21456f;
  font-size: 14px;
}

.plate-identity-card,
.legacy-detail-card.notes,
.legacy-detail-card.attachment-summary {
  grid-column: 1 / -1;
}

.plate-identity-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.legacy-detail-plate-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 13px 0;
}

.legacy-detail-plate-pair > div {
  min-width: 0;
  border-radius: 8px;
  padding: 10px;
  background: #f4f8fd;
}

.legacy-detail-plate-pair > span {
  color: #4776ac;
  font-size: 20px;
}

.legacy-detail-plate-pair small,
.legacy-detail-plate-pair b {
  display: block;
}

.legacy-detail-plate-pair small,
.legacy-detail-row dt {
  color: #708097;
  font-size: 11px;
}

.legacy-detail-plate-pair b {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #193e70;
  font-size: 15px;
}

.legacy-detail-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.legacy-detail-row {
  min-width: 0;
  border-radius: 7px;
  padding: 8px;
  background: #f8fafc;
}

.legacy-detail-row dt,
.legacy-detail-row dd {
  margin: 0;
}

.legacy-detail-row dd {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #2d4059;
  font-size: 13px;
}

.legacy-detail-row.status-valid { border-left: 3px solid #20935a; }
.legacy-detail-row.status-soon { border-left: 3px solid #d18a00; }
.legacy-detail-row.status-expired { border-left: 3px solid #d13d4e; }
.legacy-detail-row.status-neutral { border-left: 3px solid #8290a2; }

.legacy-detail-card.notes p,
.legacy-detail-card.attachment-summary p {
  margin: 0;
  color: #526b87;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .legacy-plate-card-body { grid-template-columns: 1fr; }
  .legacy-plate-owner,
  .legacy-plate-port { grid-column: auto; }
  .original-plate-detail-cards,
  .legacy-plate-detail-cards { grid-template-columns: 1fr; }
  .legacy-detail-card,
  .plate-identity-card,
  .legacy-detail-card.notes,
  .legacy-detail-card.attachment-summary { grid-column: auto; }
  .legacy-detail-card dl { grid-template-columns: 1fr; }
  .legacy-detail-plate-pair { grid-template-columns: 1fr; }
  .legacy-detail-plate-pair > span { transform: rotate(90deg); justify-self: center; }
}