/* ============ Top navigation ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-14); letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__brand-mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--accent);
}
.nav__spacer { flex: 1; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--text-secondary); font-size: var(--fs-13); font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav__link--active { color: var(--text-primary); background: var(--bg-hover); }
.nav__badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-11); font-weight: 600; border-radius: var(--r-pill);
  background: var(--status-pending); color: #1a1300;
}
.nav__user { font-size: var(--fs-12); color: var(--text-tertiary); white-space: nowrap; }

/* ============ Buttons / controls ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  color: var(--text-secondary); font-size: var(--fs-13); font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--accent { background: var(--accent); color: #fff; border-color: transparent; }
.btn--accent:hover { background: var(--accent-hover); color: #fff; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.btn--active { color: var(--text-primary); border-color: var(--accent-border); background: var(--accent-soft); }
.btn--full { width: 100%; justify-content: center; }
.btn--sm { height: 30px; font-size: var(--fs-12); }

.select { position: relative; display: inline-flex; align-items: center; }
.select select {
  appearance: none; height: 36px; padding: 0 var(--sp-8) 0 var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); color: var(--text-secondary);
  font-size: var(--fs-13); font-weight: 500; cursor: pointer;
}
.select::after {
  content: ""; position: absolute; right: 12px; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px); pointer-events: none;
}

/* ============ Chips / tags ============ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 30px; padding: 0 var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--r-pill);
  color: var(--text-secondary); font-size: var(--fs-12); font-weight: 500;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip--active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--text-primary); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: 600;
  letter-spacing: 0.01em; border: 1px solid var(--border-default);
  color: var(--text-secondary); background: var(--bg-inset);
}

/* Status badge */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--status-c, var(--border-default));
  color: var(--status-c, var(--text-secondary));
  background: color-mix(in srgb, var(--status-c, var(--bg-inset)) 14%, var(--bg-inset));
}
.status-badge--pending  { --status-c: var(--status-pending); }
.status-badge--approved { --status-c: var(--status-approved); }
.status-badge--rejected { --status-c: var(--status-rejected); }

/* Platform badge */
.platform-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: 600;
  border: 1px solid var(--plat-c, var(--border-default));
  color: var(--plat-c, var(--text-secondary));
  background: color-mix(in srgb, var(--plat-c, var(--bg-inset)) 12%, var(--bg-inset));
}
.platform-badge--bluesky  { --plat-c: var(--platform-bluesky); }
.platform-badge--telegram { --plat-c: var(--platform-telegram); }
.platform-badge--x        { --plat-c: var(--platform-x); }

/* Strike type badge */
.strike-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: 600;
  border: 1px solid var(--type-c, var(--border-default));
  color: var(--type-c, var(--text-secondary));
  background: color-mix(in srgb, var(--type-c, var(--bg-inset)) 12%, var(--bg-inset));
}
.strike-type-badge--drone              { --type-c: var(--strike-type-drone); }
.strike-type-badge--cruise_missile     { --type-c: var(--strike-type-cruise-missile); }
.strike-type-badge--ballistic_missile  { --type-c: var(--strike-type-ballistic-missile); }
.strike-type-badge--friendly_fire      { --type-c: var(--strike-type-friendly-fire); }
.strike-type-badge--other              { --type-c: var(--strike-type-other); }

/* ============ Empty state ============ */
.empty { text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--text-tertiary); }
.empty__title { font-size: var(--fs-16); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-2); }

/* ============ Section header ============ */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head__title { font-size: var(--fs-28); font-weight: 680; letter-spacing: -0.02em; }
.section-head__sub { font-size: var(--fs-13); color: var(--text-tertiary); }
.controls-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.controls-row__spacer { flex: 1; }

/* ============ Forms ============ */
.form-section {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.form-section__title { font-size: var(--fs-14); font-weight: 600; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.field-grid--wide { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--fs-12); font-weight: 500; color: var(--text-secondary); }
.field__label .required { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: var(--fs-11); color: var(--text-tertiary); }
.field__error { font-size: var(--fs-11); color: var(--danger); }
.field__input, .field__textarea, .field__select {
  background: var(--bg-inset); border: 1px solid var(--border-default); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); color: var(--text-primary); font-size: var(--fs-14);
  font-family: inherit; width: 100%;
}
.field__input:focus, .field__textarea:focus, .field__select:focus {
  outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__input--invalid { border-color: var(--danger); }
.field__textarea { resize: vertical; min-height: 84px; }
.field__select { appearance: none; cursor: pointer; }

.radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.radio-field { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; }
.radio-field input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.checkbox-field { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; }
.checkbox-field input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.source-row { display: flex; align-items: flex-end; gap: var(--sp-3); }
.source-row .field { flex: 1; }
.source-row .field--grow { flex: 2; }
.source-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.geocode-results { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.geocode-result {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.geocode-result:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============ Login ============ */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.login-card { width: 100%; max-width: 360px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.login-card__title { font-size: var(--fs-18); font-weight: 600; text-align: center; }
.login-card__error { font-size: var(--fs-12); color: var(--danger); text-align: center; }

/* ============ App shell: sidebar + map ============ */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: calc(100vh - var(--nav-h)); }
.app-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); background: var(--bg-app); overflow: hidden; }
.app-sidebar__filters { padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--sp-3); }
.app-sidebar__list { flex: 1; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.app-map { position: relative; }
#leaflet-map { width: 100%; height: 100%; background: var(--bg-inset); }

/* ============ Strike card (sidebar list item) ============ */
.strike-card {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.strike-card:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.strike-card--selected { border-color: var(--accent-border); background: var(--accent-soft); }
.strike-card__thumb {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-sm);
  object-fit: cover; background: var(--bg-inset);
}
.strike-card__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.strike-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.strike-card__title { font-size: var(--fs-13); font-weight: 600; line-height: var(--lh-tight); }
.strike-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--fs-11); color: var(--text-tertiary); }
.strike-card__date { font-variant-numeric: tabular-nums; }
.strike-card__badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* ============ Strike detail ============ */
.detail-panel { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); max-width: 720px; }
.detail-panel__title { font-size: var(--fs-22); font-weight: 680; letter-spacing: -0.01em; }
.detail-panel__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.detail-panel__desc { font-size: var(--fs-14); color: var(--text-secondary); line-height: var(--lh-normal); }
.detail-panel__section-title { font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: var(--sp-2); }

/* ============ Source embeds ============ */
.embeds { display: flex; flex-direction: column; gap: var(--sp-4); }
.embed { border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; background: var(--bg-inset); }
.embed__fallback { display: flex; flex-direction: column; }
.embed__fallback-thumb { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.embed__fallback-body { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.embed__fallback-link { color: var(--accent); font-size: var(--fs-13); }
.embed__fallback-link:hover { color: var(--accent-hover); }
.embed__telegram-frame { width: 100%; border: none; min-height: 260px; }

/* ============ Media / upload ============ */
.media-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.media-item video { width: 100%; border-radius: var(--r-md); background: var(--bg-inset); }
.upload-progress { height: 6px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; }
.upload-progress__bar { height: 100%; background: var(--accent); transition: width var(--dur) var(--ease); }
.upload-status { font-size: var(--fs-12); color: var(--text-tertiary); }
.upload-status--error { color: var(--danger); }
.upload-status--ok { color: var(--status-approved); }

/* ============ Review queue ============ */
.review-item {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.review-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.review-item__head-main { display: flex; gap: var(--sp-3); min-width: 0; }
.review-item__thumb { width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-inset); }
.review-item__title { font-size: var(--fs-16); font-weight: 600; }
.review-item__actions { display: flex; gap: var(--sp-2); }
.review-item__note-field { margin-top: var(--sp-2); }
.review-list { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ============ Detail drawer (overlays the map) ============ */
.detail-drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 90vw;
  background: var(--bg-app); border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg); z-index: 45; overflow-y: auto;
}
.detail-drawer__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); z-index: 80;
  padding: var(--sp-2) var(--sp-4); background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); font-size: var(--fs-13); color: var(--text-primary);
}