/* naughtylist page-specific overrides on top of hack.css + dark.css */

body.hack.dark {
  /* Slightly tighter line-height + green-on-black tweak. hack.css uses
     #ccc by default; nudge it toward a "phosphor terminal" green to
     reinforce the IDS / hacker aesthetic without going full meme. */
  background: #000;
  color: #c8e6c9;
}

.container { padding-top: 1.5rem; padding-bottom: 3rem; }

/* 3D globe of all-time offenders */
.globe-section { margin: 1.5rem 0 2rem; }
.globe-box {
  width: 100%;
  height: 460px;
  background: radial-gradient(ellipse at center, #050a08 0%, #000 70%);
  border: 1px solid #1f2a30;
  overflow: hidden;
}
.globe-box canvas { display: block; }
.globe-caption { margin: 0.5rem 0 0; font-size: 0.85rem; text-align: center; }

.section-note { margin: -0.5rem 0 0.5rem; font-size: 0.85rem; }

/* persistent-offenders (hall of shame) table */
.offenders-table .bans {
  color: #ff2e88;
  font-weight: bold;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.offenders-table .events { text-align: right; color: #78909c; font-variant-numeric: tabular-nums; }
.offenders-table .when { color: #607d8b; white-space: nowrap; font-size: 0.82rem; }
.offenders-table .reason { color: #4caf50; font-size: 0.82rem; }

@media screen and (max-width: 600px) {
  .globe-box { height: 320px; }
}

.ascii-banner pre {
  background: transparent;
  border: none;
  color: #4caf50;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.05;
  white-space: pre;
  overflow-x: auto;
}

.ascii-banner .tagline {
  margin-top: 0.5rem;
  color: #b0bec5;
}

.hl  { color: #ff2e88; }
.ok  { color: #4caf50; }
.dim { color: #607d8b; }

.alert {
  color: #f44336;
  border: 1px solid #f44336;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

/* Stats strip */
.stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
  border-top: 1px dashed #333;
  border-bottom: 1px dashed #333;
  padding: 1rem 0;
}
.stat-block { flex: 1 1 14rem; min-width: 14rem; }
.stat-num   { font-size: 2.6rem; color: #ff2e88; line-height: 1; }
.stat-label {
  text-transform: uppercase;
  color: #78909c;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  letter-spacing: 0.05em;
}
.rank {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.rank li {
  padding: 0;
  border-bottom: 1px dotted #1f2a30;
  line-height: 1.6;
}
.rank li:after { content: ""; }

/* Ban table */
table.wide {
  margin: 1rem 0;
  font-size: 0.92rem;
}
table.wide thead th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ff2e88;
  border-color: #333;
  text-align: left;
  font-size: 0.78rem;
}
table.wide tbody td {
  border-color: #1a1a1a;
  padding: 6px 10px;
}
table.wide tbody tr:hover td { background: #0d1b14; }

.ip      { color: #fff; }
.cc      { color: #ff9800; text-align: center; }
.asn     { color: #90a4ae; }
.reason  { color: #4caf50; }
.when    { color: #607d8b; }
.expiry  { color: #b0bec5; }
.events  { color: #78909c; text-align: right; }
.empty   {
  text-align: center;
  color: #607d8b;
  padding: 2rem 1rem;
  font-style: italic;
}

.page-footer {
  margin-top: 2.5rem;
  color: #607d8b;
  font-size: 0.85rem;
}
.page-footer a {
  color: #4caf50;
  border-bottom-color: #4caf50;
}
.page-footer a:hover { background: #4caf50; color: #000; }

/* search bar (filters both tables) */
.search-bar {
  margin: 1.5rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.search-bar input[type=search] {
  flex: 1 1 24rem;
  min-width: 14rem;
  background: #0a0a0a;
  border: 1px solid #1f2a30;
  color: #ffeb3b;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95rem;
}
.search-bar input[type=search]:focus {
  outline: none;
  border-color: #4caf50;
  background: #0d1b14;
}
.search-bar .search-hint {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* horizontal scroll wrapper keeps wide tables from breaking narrow layouts */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* pagination controls */
.pager {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: -1rem 0 2rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.pager button {
  background: transparent;
  border: 1px solid #4caf50;
  color: #4caf50;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.pager button:hover:not([disabled]) { background: #4caf50; color: #000; }
.pager button[disabled] {
  border-color: #333;
  color: #333;
  cursor: default;
}
.pager-info { color: #78909c; }

@media screen and (max-width: 600px) {
  .ascii-banner pre { font-size: 0.55rem; }
  .stat-num { font-size: 1.8rem; }
  table.wide { font-size: 0.78rem; }
  table.wide tbody td { padding: 4px 6px; }
}