* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: #111; color: #eee; }

/* Any element toggled via the `hidden` attribute must actually hide, even
   when it also has an explicit `display` (e.g. flex) set elsewhere below --
   author `display` rules otherwise beat the UA default [hidden] rule. */
[hidden] { display: none !important; }

#name-gate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 120px auto;
  align-items: stretch;
}
#name-gate input, #name-gate select { padding: 8px; font-size: 16px; background: #1a1a1a; color: #eee; border: 1px solid #333; }
#name-gate button { padding: 8px; font-size: 16px; cursor: pointer; }
#name-gate label { font-size: 13px; color: #9ab; margin-bottom: -6px; }
#create-account-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid #333;
}
#create-account-divider { font-size: 12px; color: #666; text-align: center; }
#account-error { color: #ff6464; font-size: 13px; min-height: 1em; }

#app { padding: 12px; }

#app-body { display: flex; gap: 12px; align-items: flex-start; }

#sidebar {
  width: 280px;
  flex-shrink: 0;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #333;
  border-radius: 4px;
  transition: width 0.15s ease;
}
#sidebar.collapsed {
  width: 32px;
}
#sidebar.collapsed #sidebar-list,
#sidebar.collapsed #sidebar-title,
#sidebar.collapsed #sidebar-filter {
  display: none;
}
#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid #333;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #111;
}
#sidebar-toggle {
  background: none;
  border: none;
  color: #9ab;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  flex-shrink: 0;
}
#sidebar-toggle:hover { color: #fff; }
#sidebar-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #333;
  background: #111;
  position: sticky;
  top: 33px;
  z-index: 1;
}
#sidebar-filter input[type="date"] {
  flex: 1;
  min-width: 0;
  background: #1a1a1a;
  color: #eee;
  border: 1px solid #333;
  border-radius: 3px;
  font-size: 11px;
  padding: 2px;
}
#sidebar-filter span { color: #666; font-size: 11px; }
#sidebar-filter button {
  background: none;
  border: none;
  color: #9ab;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  flex-shrink: 0;
}
#sidebar-filter button:hover { color: #fff; }
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #1c1c1c;
}
.sidebar-item:hover { background: #1a1a1a; }
.sidebar-item.active { background: #223; border-left: 3px solid #4caf50; }
.sidebar-item .num { color: #9ab; width: 44px; flex-shrink: 0; }
.sidebar-item .src-tag {
  font-size: 11px;
  color: #ffb454;
  border: 1px solid #665128;
  border-radius: 3px;
  padding: 0 4px;
}
.sidebar-item .note-flag { flex-shrink: 0; font-size: 12px; }
.sidebar-item .status {
  margin-left: auto;
  font-size: 12px;
  text-align: right;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-item.impact .status { color: #ff8a80; }
.sidebar-item.no-impact .status { color: #80cbc4; }
.sidebar-item.skipped .status { color: #777; }
.sidebar-item.taken .status { opacity: 0.6; }
.sidebar-item.in-progress .status { color: #ffb454; }

#main-panel { flex: 1; min-width: 0; }

header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
header #event-meta { color: #9ab; font-size: 14px; }
header button { padding: 6px 12px; cursor: pointer; }
#annotation-db-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ab; }
#annotation-db-select { padding: 4px; }
#note-btn.has-note { background: #332b1a; border-color: #ffb454; color: #ffb454; }

/* Nav bar (shared.js renderNav), shown on annotate.html/admin.html */
#nav-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  font-size: 13px;
}
#nav-identity { color: #9ab; }
#nav-bar a { color: #eee; text-decoration: none; }
#nav-bar a:hover { text-decoration: underline; }
#nav-bar .nav-current { color: #4caf50; font-weight: 600; }
#nav-bar #logout-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #444;
  color: #9ab;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
#nav-bar #logout-btn:hover { color: #fff; border-color: #666; }

/* Admin page (admin.html) */
#admin-app { max-width: 720px; margin: 24px auto; padding: 0 16px; }
#admin-app h1 { font-size: 20px; margin-bottom: 16px; }
.admin-section {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-section h2 { font-size: 15px; margin: 0 0 12px; color: #9ab; }
.admin-hint { font-size: 12px; color: #666; margin: -6px 0 12px; }
.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-row input[type="text"], .admin-row select {
  padding: 6px;
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 3px;
}
.admin-row button { padding: 6px 12px; cursor: pointer; }
#export-all-label { font-size: 13px; color: #9ab; display: flex; align-items: center; gap: 4px; }
#upload-status { color: #9ab; font-size: 13px; }
#access-db-checkboxes, #default-access-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#access-db-checkboxes label, #default-access-list label { display: flex; align-items: center; gap: 6px; }
.default-tag { color: #4caf50; font-size: 11px; }
#access-panel-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-top: 12px; }
.access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #262626;
}
.access-row:hover { background: #222; }
.access-row .access-dbs { color: #9ab; font-size: 12px; text-align: right; }

/* Admin dashboard: annotator stats / dataset accuracy / assignments */
#stats-table, #accuracy-results { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #262626; }
.admin-table th { color: #9ab; font-weight: 600; white-space: nowrap; }
.admin-table tbody tr:hover { background: #222; }
.admin-row textarea {
  flex: 1;
  min-width: 220px;
  padding: 6px;
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 3px;
  font-family: inherit;
}
.admin-row input[type="number"] { width: 70px; padding: 6px; background: #111; color: #eee; border: 1px solid #333; border-radius: 3px; }
#assign-target-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
#assign-target-checkboxes label { display: flex; align-items: center; gap: 6px; }
#assign-status { color: #9ab; font-size: 13px; }
#assignments-panel { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-top: 12px; }
.assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid #262626;
}
.assign-row .assign-count { color: #9ab; font-size: 12px; }
.assign-row button { padding: 3px 8px; font-size: 12px; cursor: pointer; }

#extracting-overlay, #error-overlay {
  padding: 24px;
  text-align: center;
  font-size: 18px;
  color: #ffb454;
}
#error-overlay { color: #ff6464; }

#skip-note-banner {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #332b1a;
  border: 1px solid #665128;
  border-radius: 4px;
  color: #ffb454;
  font-size: 13px;
}

#grid-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
#highlight-label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #9ab; }
#grid-toolbar button { margin-left: auto; padding: 6px 12px; cursor: pointer; }
#grid-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }

#camera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 60vh;
}
.cam-tile {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: 4px solid transparent;
  outline-offset: -4px;
  transition: outline-color 0.1s ease;
}
.cam-tile.suggested-frame { outline-color: #4caf50; }
.cam-tile.impact-frame { outline-color: #e53935; }
.cam-tile img { max-width: 100%; max-height: 100%; }
.cam-label {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 12px;
  color: #9ab;
  background: rgba(0,0,0,0.5);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 1;
}
.cam-tile.no-data::after {
  content: "No data for this camera";
  color: #666;
}

#transport {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
#transport button { padding: 6px 10px; cursor: pointer; }
#scrub-wrap { position: relative; flex: 1; height: 24px; }
#scrub { width: 100%; }
.marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 28px;
  background: #4caf50;
  pointer-events: none;
}
.marker.impact { background: #e53935; }
#frame-label { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

#annotate-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
#annotate-controls button { padding: 8px 14px; cursor: pointer; }
.toggle.selected { outline: 3px solid #4caf50; }
#mark-impact-btn.marked { outline: 3px solid #e53935; }
#mark-impact-btn:disabled, #save-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#skip-general-btn { margin-left: auto; color: #999; background: #1a1a1a; border: 1px solid #444; }
#skip-general-btn:hover { color: #eee; border-color: #666; }

.role-access-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333;
  flex-wrap: wrap;
}
.role-access-row strong {
  min-width: 7rem;
  padding-top: 0.2rem;
}
.role-db-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

/* Instructions modal */
#instructions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#instructions-modal {
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 24px 28px;
  max-width: 520px;
  width: 90%;
  color: #eee;
}
#instructions-modal h2 { margin: 0 0 16px; font-size: 16px; color: #4caf50; }
#instructions-modal ul { padding-left: 0; list-style: none; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
#instructions-modal li { font-size: 13px; line-height: 1.5; }
.inst-green { color: #4caf50; }
.inst-red { color: #e53935; }
#instructions-actions { display: flex; gap: 10px; justify-content: flex-end; }
#instructions-close-btn { padding: 6px 14px; cursor: pointer; }
#instructions-dismiss-btn { padding: 6px 14px; cursor: pointer; background: none; border: 1px solid #555; color: #9ab; border-radius: 3px; }
#instructions-dismiss-btn:hover { color: #fff; border-color: #888; }
.no-role-option { color: #ff6464; }