/* Dark table, compact, matches site palette */
#whats-new {
  margin: 10px 0 16px;
}

/* Table wrapper */
.wn-table-wrap {
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  background: #151515;
}

/* Table */
.wn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #151515;
}
.wn-table thead th {
  background: #171717;
  color: #ddd;
  font-weight: 600;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #2a2a2a;
  white-space: nowrap;
}
.wn-table tbody td {
  color: #eee;
  padding: 9px 10px;
  border-bottom: 1px solid #222;
  vertical-align: middle;
}
.wn-table tbody tr:hover {
  background: #191919;
}

/* Columns */
.wn-col-when    { width: 160px; }
.wn-col-file    { min-width: 220px; }
.wn-col-version { width: 110px; color:#b7bcc3; }
.wn-col-status  { width: 120px; text-align: left; }
.wn-col-desc    { min-width: 300px; color:#cfd3d9; }
.wn-col-images  { width: 120px; text-align: left; }
.wn-col-user    { width: 110px; color:#b7bcc3; }

/* Chips */
.wn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #202020;
  font-size: 12px;
  color: #ddd;
}
.wn-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wn-red   { background:#e24a4a; }
.wn-amber { background:#e3b341; }
.wn-green { background:#3fb950; }
.wn-blue  { background:#3da9fc; }

/* Thumbs */
.wn-thumbs {
  display: inline-flex;
  gap: 6px;
}
.wn-thumb {
  width: 44px;
  height: 44px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #202020;
  object-fit: cover;
  cursor: pointer;
}
.wn-thumb:hover {
  border-color:#555;
  background:#252525;
}
.wn-thumb.empty {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#aaa;
  width:auto; height:auto; padding:2px 6px;
}

/* Pager */
.wn-pager {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.wn-page-btn {
  cursor:pointer;
  border:1px solid #333;
  background:#1e1e1e;
  color:#eee;
  border-radius:8px;
  padding:.35rem .6rem;
  font-size:13px;
}
.wn-page-btn:hover { border-color:#555; background:#252525; }
.wn-page-btn[disabled] { opacity:.55; cursor:not-allowed; }
.wn-page-btn.active { outline:2px solid #3fb950; outline-offset:2px; }

/* Empty state */
.wn-empty {
  padding: 14px;
  color: #a7a7a7;
  border: 1px solid #2a2a2a;
  background: #121212;
  border-radius: 10px;
}

/* -------- Modal -------- */
.wn-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  z-index: 9000;
}
.wn-modal-backdrop[aria-hidden="false"] { display: block; }
.wn-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 95vw);
  max-height: 90vh;
  overflow: auto;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.wn-modal-header, .wn-modal-footer {
  padding: 10px 12px;
  border-bottom: 1px solid #222;
  display:flex; align-items:center; justify-content:space-between;
}
.wn-modal-footer { border-top: 1px solid #222; border-bottom:none; }
.wn-modal-header h3 { color:#ddd; margin:0; font-size:18px; }
.wn-modal-body { padding: 12px; display: grid; gap: 12px; }

.wn-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wn-figure {
  border:1px solid #2a2a2a;
  border-radius:10px;
  background:#0f0f0f;
  padding:8px;
}
.wn-figure figcaption {
  color:#a7a7a7; font-size:12px; margin-bottom:6px;
}
.wn-figure img {
  width: 100%;
  height: auto;
  display:block;
  border-radius:6px;
  background:#151515;
}

.wn-details {
  border:1px solid #2a2a2a; border-radius:10px;
  background:#0f0f0f; padding:10px; color:#ddd;
  display:grid; gap:6px;
}
.wn-key { color:#a7a7a7; margin-right:6px; }
.wn-desc { margin-top:6px; }

/* Buttons (modal footer / header) */
.wn-btn {
  cursor:pointer;
  border:1px solid #333;
  background:#1e1e1e;
  color:#eee;
  border-radius:8px;
  padding:.45rem .7rem;
  font-size:14px;
}
.wn-btn:hover { border-color:#555; background:#252525; }
.wn-btn-ghost {
  background:transparent; border-color:#333; color:#bbb;
  font-size:22px; line-height:1; padding:2px 8px; border-radius:8px;
}
.wn-btn-ghost:hover { color:#fff; border-color:#555; }

/* Responsive: single column images on small screens */
@media (max-width: 820px) {
  .wn-images { grid-template-columns: 1fr; }
}
/* ---------- Fullscreen Image Lightbox ---------- */
.wn-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.wn-lightbox[aria-hidden="false"] {
  display: flex;
}
.wn-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  object-fit: contain;
}
/* ---------- Modal header chips ---------- */
.wn-modal-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
}

.wn-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.wn-header-chips {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.wn-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid #2a2a2a;
  background: #202020;
  color: #ddd;
}

.wn-chip-user {
  background: #1b1b1b;
  color: #cfe3ff;
}

#wn-modal-close {
  justify-self: end;
}

/* ---------- Lightbox ---------- */
.wn-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.wn-lightbox[aria-hidden="false"] {
  display: flex;
}

.wn-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
/* ----- Traffic-light chip colors ----- */
.wn-chip--green { background:#143018; border-color:#285a31; color:#b9f6c1; }
.wn-chip--amber { background:#2f2815; border-color:#5d4d1b; color:#ffe4a3; }
.wn-chip--red   { background:#2a1515; border-color:#5a2a2a; color:#ffb3b3; }
.wn-chip--blue  { background:#152431; border-color:#2a4e6b; color:#bcdfff; }

/* tiny dot inside chips */
.wn-chip .wn-dot {
  display:inline-block; width:8px; height:8px; border-radius:999px;
  margin-right:6px; flex:0 0 8px; background:#888;
}
.wn-chip--green .wn-dot { background:#3fb950; }
.wn-chip--amber .wn-dot { background:#e3b341; }
.wn-chip--red   .wn-dot { background:#e24a4a; }
.wn-chip--blue  .wn-dot { background:#3da9fc; }

/* file link icon next to filename */
.wn-filecell {
  display:flex; align-items:center; gap:8px;
}
.wn-link-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:1px solid #333; border-radius:6px;
  background:#202020; color:#9cc4ff; text-decoration:none;
}
.wn-link-icon:hover { border-color:#555; background:#252525; }
.wn-link-icon svg { width:14px; height:14px; }