/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0d;
  --surface: #161616;
  --surface2: #1f1f1f;
  --border: #2a2a2a;
  --accent: #c0392b;
  --accent-hover: #e74c3c;
  --text: #e8e8e8;
  --text-muted: #888;
  --text-dim: #555;
  --green: #27ae60;
  --yellow: #f39c12;
  --blue: #2980b9;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Mono', monospace;
  --radius: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,.6);
}

html { font-size: 15px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ===== CONTENT WARNING ===== */
#content-warning {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex;                       /* centering via margin:auto below so it stays */
  overflow-y: auto;                    /* scrollable when the box is taller than the screen */
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  padding: 20px;
}
.cw-box {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 10px;
  max-width: 560px; width: 100%;
  padding: 36px 40px;
  text-align: center;
  margin: auto;                        /* centers when it fits, scroll-safe when it doesn't */
}
.cw-icon { font-size: 3rem; margin-bottom: 16px; }
.cw-box h1 { font-size: 1.5rem; margin-bottom: 10px; color: var(--accent); letter-spacing: .03em; }
.cw-box p { color: var(--text-muted); margin-bottom: 14px; font-size: .95rem; line-height: 1.7; }
.cw-box p strong { color: var(--text); }
.cw-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 28px; border-radius: var(--radius); cursor: pointer;
  font-size: 1rem; font-weight: 600; transition: background .2s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  padding: 12px 28px; border-radius: var(--radius); cursor: pointer;
  font-size: 1rem; transition: border-color .2s, color .2s;
}
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

/* ===== HEADER ===== */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.site-title {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text); white-space: nowrap;
}
.site-title span { color: var(--accent); }
.header-stats {
  font-size: .8rem; color: var(--text-muted);
  background: var(--surface2); padding: 4px 12px; border-radius: 20px;
}

/* ===== FILTERS ===== */
.filters-bar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.filters-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.search-wrap {
  flex: 1; min-width: 200px; position: relative;
}
.search-wrap input {
  width: 100%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px 9px 38px; border-radius: var(--radius);
  font-size: .9rem; transition: border-color .2s;
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); font-size: .85rem; pointer-events: none;
}
.filter-select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius); font-size: .9rem; cursor: pointer;
  min-width: 140px;
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-select option { background: var(--surface); }
.date-group { display: flex; gap: 8px; align-items: center; }
.date-group label { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.date-input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: var(--radius); font-size: .85rem;
  color-scheme: dark;
}
.date-input:focus { outline: none; border-color: var(--accent); }
.btn-reset {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 9px 16px; border-radius: var(--radius); cursor: pointer; font-size: .85rem;
  transition: all .2s; white-space: nowrap;
}
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }

/* ===== RESULTS BAR ===== */
.results-bar {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.results-count { font-size: .9rem; color: var(--text-muted); }
.results-count strong { color: var(--text); }
.view-toggle { display: flex; gap: 6px; }
.view-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: .85rem;
  transition: all .2s;
}
.view-btn.active, .view-btn:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ===== MAIN CONTENT ===== */
.page-body { max-width: 1400px; margin: 0 auto; padding: 0 24px 60px; }

/* ===== GRID ===== */
#gallery.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
#gallery.list-view {
  display: flex; flex-direction: column; gap: 12px;
}

/* ===== CARD ===== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: #444; transform: translateY(-2px); box-shadow: var(--shadow); }

/* Grid card thumbnail */
.grid-view .card-thumb {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; background: #000;
}
.grid-view .card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.card:hover .card-thumb img { transform: scale(1.04); }

/* List card */
.list-view .card {
  display: flex; gap: 0; align-items: stretch;
}
.list-view .card-thumb {
  width: 200px; flex-shrink: 0; position: relative;
  overflow: hidden; background: #000;
}
.list-view .card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Media type badge */
.media-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 3px; text-transform: uppercase;
}
.media-badge.video { background: rgba(192,57,43,.85); }
.media-badge.photo { background: rgba(41,128,185,.85); }

/* Duration badge */
.duration-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.8); color: #fff;
  font-size: .75rem; font-family: var(--mono);
  padding: 3px 7px; border-radius: 3px;
}

/* Admin quick-delete button */
.card-delete-btn {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.15);
  color: #ccc; font-size: .85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
  z-index: 10;
}
.card:hover .card-delete-btn { opacity: 1; }
.card-delete-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* Play overlay */
.play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.3);
}
.card:hover .play-overlay { opacity: 1; }
.play-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(192,57,43,.9);
  display: flex; align-items: center; justify-content: center;
}
.play-icon::after {
  content: ''; border: 0 solid transparent;
  border-left: 14px solid #fff; border-top: 9px solid transparent;
  border-bottom: 9px solid transparent; margin-left: 4px;
}

/* Card info */
.card-info {
  padding: 12px 14px;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.grid-view .card-info { padding: 12px 14px; }

.card-date {
  font-size: .75rem; color: var(--text-muted); font-family: var(--mono);
  display: flex; align-items: center; gap: 6px;
}
.topic-tag {
  font-size: .7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
.topic-war-crimes { background: rgba(192,57,43,.2); color: #e74c3c; }
.topic-news { background: rgba(41,128,185,.2); color: #3498db; }
.topic-resistance { background: rgba(39,174,96,.2); color: #2ecc71; }
.topic-iof { background: rgba(243,156,18,.2); color: #f39c12; }
.topic-settler { background: rgba(155,89,182,.2); color: #9b59b6; }
.topic-default { background: rgba(100,100,100,.2); color: #888; }

.card-source {
  font-size: .8rem; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.card-source strong { color: var(--text); }
.card-desc {
  font-size: .82rem; color: var(--text-muted); line-height: 1.5;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.list-view .card-desc { -webkit-line-clamp: 2; }

/* ===== PAGINATION ===== */
.pagination {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  padding: 32px 0 16px; flex-wrap: wrap;
}
.page-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  padding: 8px 14px; border-radius: var(--radius); cursor: pointer; font-size: .9rem;
  min-width: 40px; text-align: center; transition: all .2s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-ellipsis { color: var(--text-dim); padding: 8px 4px; }

/* ===== LIGHTBOX / MODAL ===== */
#modal-overlay {
  /* z-index must beat the sticky site header (nav.css z-index:900) — otherwise the
     opaque header renders OVER the modal's top: ~1cm crop on desktop, the whole top
     half (incl. the video top + close button) hidden on mobile, with no way to scroll
     it into view because the overlay is position:fixed. */
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#modal-overlay.open { display: flex; }

.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; max-width: 1100px; width: 100%;
  max-height: 92vh; max-height: 92dvh; overflow: hidden;   /* dvh accounts for mobile URL bar */
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: .95rem; color: var(--text-muted); font-weight: 500; }
.modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 4px 8px; border-radius: 4px;
  transition: color .2s, background .2s;
}
.modal-close:hover { color: var(--text); background: var(--surface2); }

.modal-body {
  display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden;  /* min-height:0 lets children shrink so scroll works */
  flex-direction: row;
}

.modal-media {
  flex: 1; min-width: 0; min-height: 0;
  background: #000; display: flex; align-items: center; justify-content: center;
}
/* Desktop: media is bounded by the body height (not a fixed 70vh), so header + media +
   nav always fit inside the box and nothing clips off the top. */
.modal-media video, .modal-media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}

/* Mobile: stack vertically, make the whole body scroll, and CAP the media height so the
   whole (portrait) video fits and the description below is reachable. This block MUST come
   AFTER the base .modal-media rules: equal specificity → source order wins, so placing it
   before let the base `max-height:100%` override the cap → the video overflowed and its top
   half sat above the scroll area, unreachable. */
@media (max-width: 700px) {
  #modal-overlay { padding: 10px; }
  .modal-body { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-media { flex: 0 0 auto; max-height: 60vh; align-items: flex-start; }
  .modal-media video, .modal-media img { max-height: 60vh; }
}

.modal-meta {
  width: 320px; flex-shrink: 0;
  padding: 20px; overflow-y: auto;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 700px) {
  .modal-meta { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

.meta-section h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); margin-bottom: 6px; font-weight: 600;
}
.meta-value {
  font-size: .88rem; color: var(--text); line-height: 1.6;
  word-break: break-word;
}
.meta-value.mono { font-family: var(--mono); font-size: .82rem; }

.modal-nav {
  display: flex; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--border); background: var(--surface2);
}
.nav-btn {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); padding: 10px; border-radius: var(--radius);
  cursor: pointer; font-size: .9rem; transition: all .2s; text-align: center;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.btn-download { flex: 0 0 auto; background: #1a2e1a; border-color: #2d5a2d; color: var(--green); }
.btn-download:hover { background: #1f381f; border-color: var(--green); color: var(--green); }
.btn-delete { flex: 0 0 auto; background: #2e1a1a; border-color: #5a2d2d; color: var(--accent); }
.btn-delete:hover { background: #3d1f1f; border-color: var(--accent); color: var(--accent-hover); }
/* Public flag button + dropdown (report a clip to moderators) */
.modal-flag-wrap { position: relative; flex: 0 0 auto; display: flex; }
.btn-flag { flex: 0 0 auto; background: #2e1a1a; border-color: #5a2d2d; color: var(--accent); white-space: nowrap; }
.btn-flag:hover { background: #3d1f1f; border-color: var(--accent); color: var(--accent-hover); }
.btn-flag:disabled { opacity: .55; cursor: default; }
.flag-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 6px; display: none;
}
.flag-menu.open { display: block; }
.flag-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-muted); padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-family: var(--font); font-size: .85rem; line-height: 1.4;
}
.flag-menu-item:hover { background: var(--surface2); color: var(--accent); }
.btn-submit-footage { background: var(--accent); color: #fff; padding: 7px 16px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .2s; white-space: nowrap; margin-left: auto; }
.btn-submit-footage:hover { background: var(--accent-hover); color: #fff; }
.btn-admin { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-family: var(--font); font-size: .82rem; transition: all .2s; text-decoration: none; }
.btn-admin:hover { border-color: var(--accent); color: var(--accent); }
.btn-admin.active { border-color: var(--accent); color: var(--accent); background: rgba(192,57,43,.1); }
.btn-admin-tool { color: var(--text-muted); font-size: .78rem; padding: 5px 10px; }
.admin-badge { display: inline-block; background: var(--surface); color: var(--accent); font-size: .68rem; padding: 1px 6px; border-radius: 10px; margin-left: 4px; font-weight: 600; }

/* Source links */
.source-links { display: flex; flex-direction: column; gap: 6px; }
.source-link {
  font-size: .8rem; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.source-link:hover { color: var(--accent-hover); }

/* ===== CONFIDENCE BADGES ===== */
.conf-badge {
  font-size: .68rem; padding: 2px 7px; border-radius: 3px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.conf-medium { background: rgba(243,156,18,.2); color: #f39c12; }
.conf-low    { background: rgba(100,100,100,.2); color: #888; }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center; padding: 80px 20px; color: var(--text-muted);
}
.empty-state .es-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; }

/* ===== LOADING ===== */
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; gap: 16px; color: var(--text-muted);
}
.spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  /* Content warning: compact so the buttons are reachable on small/iOS screens */
  .cw-box { padding: 26px 20px; }
  .cw-icon { font-size: 2.4rem; margin-bottom: 10px; }
  .cw-box h1 { font-size: 1.3rem; }
  .cw-box p { font-size: .9rem; line-height: 1.6; }
  .cw-buttons { margin-top: 20px; }
  /* Header */
  .header-inner {
    padding: 10px 16px;
    gap: 8px;
  }
  .site-title {
    font-size: .98rem;
    flex: 0 0 100%;
  }
  .header-stats {
    font-size: .72rem;
    padding: 4px 10px;
    flex: 0 0 100%;
    text-align: center;
  }
  /* Header action buttons: clean 2-then-1 grid, equal width, full tap targets */
  .btn-submit-footage {
    padding: 10px 12px;
    font-size: .8rem;
    margin: 0 !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
  }
  .btn-admin, .btn-admin-tool {
    padding: 5px 10px;
    font-size: .75rem;
  }
  #admin-controls { margin-left: 0 !important; }

  /* Filters: all controls full width */
  .filters-bar { padding: 10px 16px; }
  .filters-inner {
    flex-direction: column;
    gap: 8px;
  }
  .search-wrap { min-width: unset; width: 100%; }
  .filter-select {
    width: 100%;
    min-width: unset;
  }
  .date-group {
    width: 100%;
  }
  .date-input {
    flex: 1;
    min-width: 0;
  }
  .btn-reset { width: 100%; }

  /* Results bar */
  .results-bar { padding: 10px 16px; }

  /* Page padding */
  .page-body { padding: 0 12px 40px; }

  /* Gallery */
  #gallery.grid-view {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .list-view .card-thumb { width: 120px; }
  .modal-meta { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}