/**
 * AtRiskPanel Styles
 * Follows the admin dark-theme spec used by StatsCards / page.module.css.
 */

.panel {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  border-left: 4px solid var(--color-error, #f87171);
  border-radius: 20px;
  padding: var(--spacing-lg, 24px);
  box-shadow: 0 30px 50px -40px rgba(8, 47, 73, 0.8);
  margin-bottom: var(--spacing-xl, 32px);
  /* Without box-sizing: border-box the panel's padding expands the total
     rendered width beyond the modal's content area, causing the horizontal
     scroll that tableWrap's overflow-x: auto cannot contain. */
  box-sizing: border-box;
}

.title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary, #f8fafc);
  margin: 0 0 var(--spacing-md, 16px) 0;
}

.chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md, 16px);
  margin-bottom: var(--spacing-lg, 24px);
}

.countChip {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-radius: 12px;
  border: 1px solid;
  background: rgba(15, 23, 42, 0.5);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.countChip:hover {
  filter: brightness(1.15);
}

.countChip--active {
  box-shadow: 0 0 0 2px currentColor;
}

.countChip.zo.countChip--active {
  background: rgba(248, 113, 113, 0.2);
}

.countChip.subdomain.countChip--active {
  background: rgba(255, 107, 53, 0.2);
}

.filterClear {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  background: transparent;
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.filterClear:hover {
  background: rgba(148, 163, 184, 0.1);
}

.countChip.zo {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}

.countChip.subdomain {
  border-color: rgba(255, 107, 53, 0.4);
  background: rgba(255, 107, 53, 0.08);
}

.countValue {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary, #f8fafc);
}

.countLabel {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
}

.tableWrap {
  overflow-x: auto;
}

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

.table th {
  text-align: left;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
  border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
}

.table td {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  color: var(--color-text-primary, #f8fafc);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.email {
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
}

.age {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
}

/* Lay the issue chips out with a real gap so multiple chips (e.g. ZO +
   Subdomain) aren't crowded; wraps instead of overflowing on narrow widths. */
.issueCell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

.issueChip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid;
}

.issueChip.zo {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
}

.issueChip.subdomain {
  color: #fed7aa;
  border-color: rgba(255, 107, 53, 0.5);
  background: rgba(255, 107, 53, 0.12);
}

.inspectButton {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
  background: rgba(56, 189, 248, 0.1);
  color: var(--color-primary-accent, #38bdf8);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.inspectButton:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
}

.actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.secondaryButton {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.35));
  background: transparent;
  color: var(--color-text-secondary, rgba(203, 213, 225, 0.9));
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.secondaryButton:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.5);
}

.truncated {
  margin: var(--spacing-md, 16px) 0 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-tertiary, rgba(148, 163, 184, 0.85));
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--spacing-md, 16px) 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-secondary, rgba(148, 163, 184, 0.85));
}

.pageBtn {
  background: none;
  border: none;
  color: var(--color-primary-accent);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0 6px;
}

.pageBtn[disabled] {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-success, #34d399);
}

.error {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  border-radius: 12px;
  padding: var(--spacing-md, 16px);
}

.error p {
  margin: 0;
  font-size: 0.875rem;
  color: #fee2e2;
}

.loading {
  display: flex;
  gap: var(--spacing-md, 16px);
}

.skeletonChip {
  height: 56px;
  width: 180px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.18) 25%,
    rgba(148, 163, 184, 0.28) 50%,
    rgba(148, 163, 184, 0.18) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}