.target-cell {
  font-size: 12px;
  color: var(--color-text-muted);
}

.title-cell {
  font-weight: 600;
}

.number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

.list-toolbar h2 {
  margin: 0;
}

.list-toolbar input[type='search'] {
  width: 240px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
}

.header-links {
  display: flex;
  gap: 16px;
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .list-toolbar input[type='search'] {
    width: 100%;
  }
}

.card > h2 {
  margin-top: 0;
}

/* Bảng không xuống dòng — cột nào dài thì cuộn ngang trong .table-scroll (shared.css) để xem hết thông
   tin, thay vì bóp cột cho vừa khung làm chữ vỡ thành nhiều dòng. */
.data-table th,
.data-table td {
  white-space: nowrap;
}

/* Cột nút hành động luôn dính mép phải khi cuộn ngang. Cần nền đặc (không thì chữ các cột bị cuộn qua
   lộ ra phía sau) và bóng mờ bên trái để báo hiệu còn nội dung bị che. */
.data-table .sticky-col {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--color-surface);
  box-shadow: -8px 0 8px -8px rgba(15, 23, 42, 0.18);
}

/* Giữ <td> ở display: table-cell (shared.css đặt .actions-cell là flex) — td dạng flex không kéo giãn
   theo chiều cao hàng nên viền dưới bị lệch khi 1 ô khác trong hàng xuống dòng. */
.data-table td.actions-cell {
  display: table-cell;
}

.actions-cell .icon-btn + .icon-btn {
  margin-left: 6px;
}

/* Bảng shortlink nhiều cột hơn bảng mockup — nới khung trang để đỡ phải cuộn ngang trên màn hình rộng. */
.page {
  max-width: 1120px;
}

.owner-cell {
  font-size: 12px;
  color: var(--color-text-muted);
}

.hint + .login-buttons {
  margin-top: 14px;
}

.detail-list {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px 14px;
  margin: 0;
  font-size: 14px;
}

.detail-list dt {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 2px;
}

.detail-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-list a {
  color: var(--color-primary);
  text-decoration: none;
}

.detail-list a:hover {
  text-decoration: underline;
}

.detail-value-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.detail-value-row > :first-child {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .detail-list dd {
    margin-bottom: 10px;
  }
}

/* Popup xem chi tiết shortlink — rộng hơn modal mặc định (420px) vì hiển thị nguyên link đích dài và bảng
   lịch sử click; giới hạn chiều cao, cuộn bên trong modal. */
.modal.modal-wide {
  max-width: 760px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.detail-clicks {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.detail-clicks h4 {
  margin: 0;
  font-size: 14px;
}

.detail-clicks-summary {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-muted);
}

.detail-clicks-scroll {
  max-height: 280px;
  overflow-y: auto;
}

.detail-clicks .data-table {
  font-size: 13px;
}

.detail-clicks .data-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
}

.detail-qr {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.detail-qr-image {
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  image-rendering: pixelated;
}

.detail-qr-info {
  flex: 1;
  min-width: 0;
}

.detail-qr-info h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.detail-qr-url {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.detail-qr .action-row {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .detail-qr {
    flex-direction: column;
    align-items: center;
  }
}