* { box-sizing: border-box; margin: 0; padding: 0; }

/* Layout: page is the scroller. Header and toolbar are sticky so they stay
   pinned during vertical scroll; the content area below is just normal block
   flow. vis-timeline uses verticalScroll:false so its own component grows to
   fit, which means the page (not the component) drives vertical scrolling.
   Variables make sticky offsets composable: thead sticks below header+toolbar. */
:root {
  --header-h: 44px;
  --toolbar-h: 52px;
  --topbars-h: calc(var(--header-h) + var(--toolbar-h));
}

html, body {
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
  margin: 0;
}

#app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
}

#toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 99;
  min-height: var(--toolbar-h);
}

#main-content {
  /* Just a block container now — the master view-mode toggle decides whether
     #timeline-container or #event-list is shown; they're never side-by-side. */
}

#app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #1a1a2e;
  color: white;
}

#app-header h1 {
  font-size: 18px;
  font-weight: 600;
}

#auth-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------
   Language picker — flag-icons + custom dropdown
   --------------------------------------------------------------- */

.lang-picker {
  position: relative;
  display: inline-block;
}
#lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
#lang-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
#lang-btn .fi {
  width: 18px;
  height: 13px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
#lang-btn .lang-caret {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

#lang-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}
#lang-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  color: #1f2937;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
#lang-dropdown button:last-child { border-bottom: none; }
#lang-dropdown button:hover { background: #f9fafb; }
#lang-dropdown button.active {
  background: #eef2ff;
  font-weight: 600;
}
#lang-dropdown .fi {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

#toolbar {
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
}

#toolbar-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#search-wrap {
  flex: 1;
  min-width: 0;          /* allow the input to shrink below its intrinsic width */
  max-width: 320px;
  position: relative;
}
#search-input {
  width: 100%;
  height: 32px;
  padding: 4px 10px 4px 30px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 8px center;
  background-size: 14px 14px;
}
#search-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 36px;
  padding: 0;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  color: #4b5563;
  cursor: pointer;
}
#filter-toggle:hover { background: #f3f4f6; }
#filter-badge {
  display: inline-block;
  position: absolute;
  top: -4px;
  right: -4px;
  background: #c0392b;
  color: white;
  border-radius: 9px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  padding: 0 4px;
  font-weight: 600;
}

#overflow-menu { position: relative; }
#overflow-toggle {
  height: 32px;
  width: 32px;
  padding: 0;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: #4b5563;
  cursor: pointer;
}
#overflow-toggle:hover { background: #f3f4f6; }
#overflow-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 200;
}
#overflow-popup.hidden { display: none; }
#overflow-popup button {
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  cursor: pointer;
}
#overflow-popup button:hover { background: #f9fafb; }
#overflow-popup button:last-child { border-bottom: none; }
#overflow-popup button.hidden { display: none; }

#mobile-sort-wrap {
  display: none;     /* visible only at ≤768px (see media query) */
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* Active filter chips (legacy — kept harmless since DOM no longer renders
   them; filter UI is now a modal). Safe to delete in a follow-up cleanup. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: #fef3f3;
  border: 1px solid #e8a0a0;
  color: #8b2020;
}

.chip-x {
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
}

.chip-x:hover {
  color: #c0392b;
}

.filter-clear-btn {
  padding: 2px 10px;
  font-size: 11px;
  border-radius: 12px;
}

/* Category columns */
.filter-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-column {
  min-width: 150px;
  max-width: 200px;
}

.filter-column-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid #1a1a2e;
}

.filter-column-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a2e;
  flex: 1;
}

.filter-column-clear {
  font-size: 10px;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
}

.filter-column-clear:hover {
  color: #1a1a2e;
}

.filter-column-list {
  max-height: 220px;
  overflow-y: auto;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  cursor: pointer;
}

.filter-item-untagged {
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.filter-item-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.filter-item:hover {
  color: #1a1a2e;
}

.filter-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.filter-count {
  margin-left: auto;
  font-size: 10px;
  color: #999;
}

.filter-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  font-size: 11px;
  margin: 1px;
}

#group-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

#group-by, #mobile-sort {
  padding: 4px 8px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 13px;
}

#timeline-container {
  width: 100%;
  /* Lock the timeline component to the viewport remainder under the sticky
     top-bars. With vis-timeline's verticalScroll:true, this means the
     component scrolls internally and its time-axis stays pinned at the top
     — exactly what we want for the timeline mode. Table mode unsets this
     since the table itself shouldn't be height-constrained. */
  height: calc(100vh - var(--topbars-h));
}

#timeline-container .vis-group:nth-child(even) {
  background: rgba(0, 0, 0, 0.04);
}

/* Bigger, more readable date/time axis labels. vis-timeline defaults are
   cramped at 10–11px; bump to 12/13 so months and days don't blur together
   at typical zooms. */
#timeline-container .vis-time-axis .vis-text {
  font-size: 12px;
}
#timeline-container .vis-time-axis .vis-text.vis-major {
  font-size: 13px;
  font-weight: 500;
}

/* Smooth out vertical lane changes during pan. vis-timeline reshuffles items
   when its visible-set changes; the Y hop without animation reads as jitter.
   200ms ease-out on `top` is enough to perceive the move as intentional. */
#timeline-container .vis-item {
  transition: top 200ms ease-out;
}

/* Kuvvet color coding. All branches share a harmonized pastel band so one
   text colour (black) reads on every solo card AND every multi-stripe split.
   Multi-Kuvvet items: sort first letters → 'kuv-<sorted-letters>' (no
   conditionals). Class name is built by sort+join in JS. CSS defines stripes.

   Letter codes: d=Deniz, h=Hava, j=Jandarma, k=Kara, s=Sahil Güvenlik. */

:root {
  --kuv-d:    #94a8d4;  /* Deniz    — cornflower */
  --kuv-h:    #bae6fd;  /* Hava     — very light sky */
  --kuv-j:    #e8a8a8;  /* Jandarma — dusty rose */
  --kuv-k:    #a4b87a;  /* Kara     — olive / sage */
  --kuv-o:    #b8a4d4;  /* ÖKK      — muted lavender (elite/joint) */
  --kuv-s:    #fbb070;  /* SG       — peach */
  --kuv-none: #efd984;  /* none     — chamois */
}

#timeline-container .vis-item[class*="kuv-"] {
  color: #1a1a1a;
}

/* Singles — solid background + matching darker border */
#timeline-container .vis-item.kuv-d    { background-color: var(--kuv-d);    border-color: #7591c2; }
#timeline-container .vis-item.kuv-h    { background-color: var(--kuv-h);    border-color: #7dc6e8; }
#timeline-container .vis-item.kuv-j    { background-color: var(--kuv-j);    border-color: #c47a7a; }
#timeline-container .vis-item.kuv-k    { background-color: var(--kuv-k);    border-color: #7e9159; }
#timeline-container .vis-item.kuv-o    { background-color: var(--kuv-o);    border-color: #8b7aa8; }
#timeline-container .vis-item.kuv-s    { background-color: var(--kuv-s);    border-color: #d68548; }
#timeline-container .vis-item.kuv-none { background-color: var(--kuv-none); border-color: #b89a4a; }

/* Two-Kuvvet diagonal splits — all 10 alphabetically-sorted pairs. */
#timeline-container .vis-item.kuv-dh { background: linear-gradient(135deg, var(--kuv-d) 50%, var(--kuv-h) 50%); }
#timeline-container .vis-item.kuv-dj { background: linear-gradient(135deg, var(--kuv-d) 50%, var(--kuv-j) 50%); }
#timeline-container .vis-item.kuv-dk { background: linear-gradient(135deg, var(--kuv-d) 50%, var(--kuv-k) 50%); }
#timeline-container .vis-item.kuv-ds { background: linear-gradient(135deg, var(--kuv-d) 50%, var(--kuv-s) 50%); }
#timeline-container .vis-item.kuv-hj { background: linear-gradient(135deg, var(--kuv-h) 50%, var(--kuv-j) 50%); }
#timeline-container .vis-item.kuv-hk { background: linear-gradient(135deg, var(--kuv-h) 50%, var(--kuv-k) 50%); }
#timeline-container .vis-item.kuv-hs { background: linear-gradient(135deg, var(--kuv-h) 50%, var(--kuv-s) 50%); }
#timeline-container .vis-item.kuv-jk { background: linear-gradient(135deg, var(--kuv-j) 50%, var(--kuv-k) 50%); }
#timeline-container .vis-item.kuv-js { background: linear-gradient(135deg, var(--kuv-j) 50%, var(--kuv-s) 50%); }
#timeline-container .vis-item.kuv-ks { background: linear-gradient(135deg, var(--kuv-k) 50%, var(--kuv-s) 50%); }

/* Three-Kuvvet diagonal stripes — all 10 alphabetically-sorted triples. */
#timeline-container .vis-item.kuv-dhj { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-h) 33.33%, var(--kuv-h) 66.67%, var(--kuv-j) 66.67%); }
#timeline-container .vis-item.kuv-dhk { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-h) 33.33%, var(--kuv-h) 66.67%, var(--kuv-k) 66.67%); }
#timeline-container .vis-item.kuv-dhs { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-h) 33.33%, var(--kuv-h) 66.67%, var(--kuv-s) 66.67%); }
#timeline-container .vis-item.kuv-djk { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-j) 33.33%, var(--kuv-j) 66.67%, var(--kuv-k) 66.67%); }
#timeline-container .vis-item.kuv-djs { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-j) 33.33%, var(--kuv-j) 66.67%, var(--kuv-s) 66.67%); }
#timeline-container .vis-item.kuv-dks { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-k) 33.33%, var(--kuv-k) 66.67%, var(--kuv-s) 66.67%); }
#timeline-container .vis-item.kuv-hjk { background: linear-gradient(135deg, var(--kuv-h) 33.33%, var(--kuv-j) 33.33%, var(--kuv-j) 66.67%, var(--kuv-k) 66.67%); }
#timeline-container .vis-item.kuv-hjs { background: linear-gradient(135deg, var(--kuv-h) 33.33%, var(--kuv-j) 33.33%, var(--kuv-j) 66.67%, var(--kuv-s) 66.67%); }
#timeline-container .vis-item.kuv-hks { background: linear-gradient(135deg, var(--kuv-h) 33.33%, var(--kuv-k) 33.33%, var(--kuv-k) 66.67%, var(--kuv-s) 66.67%); }
#timeline-container .vis-item.kuv-jks { background: linear-gradient(135deg, var(--kuv-j) 33.33%, var(--kuv-k) 33.33%, var(--kuv-k) 66.67%, var(--kuv-s) 66.67%); }

/* Four-Kuvvet — all 5 alphabetically-sorted quads. */
#timeline-container .vis-item.kuv-dhjk { background: linear-gradient(135deg, var(--kuv-d) 25%, var(--kuv-h) 25%, var(--kuv-h) 50%, var(--kuv-j) 50%, var(--kuv-j) 75%, var(--kuv-k) 75%); }
#timeline-container .vis-item.kuv-dhjs { background: linear-gradient(135deg, var(--kuv-d) 25%, var(--kuv-h) 25%, var(--kuv-h) 50%, var(--kuv-j) 50%, var(--kuv-j) 75%, var(--kuv-s) 75%); }
#timeline-container .vis-item.kuv-dhks { background: linear-gradient(135deg, var(--kuv-d) 25%, var(--kuv-h) 25%, var(--kuv-h) 50%, var(--kuv-k) 50%, var(--kuv-k) 75%, var(--kuv-s) 75%); }
#timeline-container .vis-item.kuv-djks { background: linear-gradient(135deg, var(--kuv-d) 25%, var(--kuv-j) 25%, var(--kuv-j) 50%, var(--kuv-k) 50%, var(--kuv-k) 75%, var(--kuv-s) 75%); }
#timeline-container .vis-item.kuv-hjks { background: linear-gradient(135deg, var(--kuv-h) 25%, var(--kuv-j) 25%, var(--kuv-j) 50%, var(--kuv-k) 50%, var(--kuv-k) 75%, var(--kuv-s) 75%); }

/* Five-Kuvvet — all branches at once. */
#timeline-container .vis-item.kuv-dhjks { background: linear-gradient(135deg, var(--kuv-d) 20%, var(--kuv-h) 20%, var(--kuv-h) 40%, var(--kuv-j) 40%, var(--kuv-j) 60%, var(--kuv-k) 60%, var(--kuv-k) 80%, var(--kuv-s) 80%); }

/* ÖKK-bearing combos — focused on 15 Temmuz event patterns.
   ÖKK is a tribally distinct joint-SF command, NOT a generic SF label —
   service-internal SF (SAT/MAK/JÖAK) stay in their parent tribe.
   Realistic ÖKK joint patterns:
     - do: Deniz + ÖKK    (mixed naval+ÖKK ops, e.g. #121 Casa De Maris)
     - ho: Hava + ÖKK     (Akıncı base personnel + ÖKK detachment)
     - jo: Jandarma + ÖKK (rare, possible JÖAK/ÖKK coordination)
     - ko: Kara + ÖKK     (GK raid, Çankaya/Külliye, civilian arrest ops)
     - hko: Akıncı joint  (air base + land + ÖKK)
   Pure-ÖKK events (HQ, planning, command) use solo `o`. */
#timeline-container .vis-item.kuv-do  { background: linear-gradient(135deg, var(--kuv-d) 50%, var(--kuv-o) 50%); }
#timeline-container .vis-item.kuv-ho  { background: linear-gradient(135deg, var(--kuv-h) 50%, var(--kuv-o) 50%); }
#timeline-container .vis-item.kuv-jo  { background: linear-gradient(135deg, var(--kuv-j) 50%, var(--kuv-o) 50%); }
#timeline-container .vis-item.kuv-ko  { background: linear-gradient(135deg, var(--kuv-k) 50%, var(--kuv-o) 50%); }

#timeline-container .vis-item.kuv-dho { background: linear-gradient(135deg, var(--kuv-d) 33.33%, var(--kuv-h) 33.33%, var(--kuv-h) 66.67%, var(--kuv-o) 66.67%); }
#timeline-container .vis-item.kuv-hko { background: linear-gradient(135deg, var(--kuv-h) 33.33%, var(--kuv-k) 33.33%, var(--kuv-k) 66.67%, var(--kuv-o) 66.67%); }

/* 5-Kuvvet with ÖKK — full TSK joint planning (Çayyolu villa). */
#timeline-container .vis-item.kuv-dhjko { background: linear-gradient(135deg, var(--kuv-d) 20%, var(--kuv-h) 20%, var(--kuv-h) 40%, var(--kuv-j) 40%, var(--kuv-j) 60%, var(--kuv-k) 60%, var(--kuv-k) 80%, var(--kuv-o) 80%); }

/* Event list — Table-mode container. No longer a sidebar; full width when
   shown. DataTable.js renders into this either as a desktop table or as a
   stacked card list (mobile). */
#event-list {
  width: 100%;
  background: #fff;
  font-size: 13px;
}

/* Modal overlay — shared by editor and translation */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  z-index: 2000;
  overflow-y: auto;
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-box-wide {
  max-width: 700px;
}

/* Flag-style tag categories rendered as checkboxes (Durum: Doğrulandı,
   Kamuya Açık). Inline row of compact toggles. */
.flag-group .flag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.flag-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.flag-checkbox input {
  margin: 0;
}

/* Marker for text showing in the source language because the current-language
   translation is missing. Hovering the element reveals the localized hint. */
.i18n-fallback::after {
  content: '·';
  margin-left: .25em;
  color: #ca8a04;
  font-weight: bold;
  cursor: help;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

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

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}
.admin-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  color: #666;
}
.admin-tab.active {
  color: #111;
  border-bottom-color: #2563eb;
  font-weight: 600;
}
.admin-hint {
  font-size: 12px;
  color: #666;
  margin: 4px 0 12px;
}

/* Bağlantı Üret tab — three cascading dropdowns + URL preview + copy.
   Reuses the existing modal-action button look via the input/button pair. */
.link-builder { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.link-builder-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
}
.link-builder-row label { font-size: 13px; color: #374151; }
.link-builder-row select { padding: 6px 8px; font-size: 13px; }
.link-builder-output {
  display: flex; gap: 8px;
  margin-top: 4px;
}
.link-builder-output input {
  flex: 1; padding: 7px 10px;
  font: inherit; font-size: 12.5px;
  background: #f9fafb; color: #1f2937;
  border: 1px solid #d1d5db; border-radius: 6px;
  user-select: all;
  overflow-wrap: anywhere;
}
.link-builder-output button {
  padding: 7px 14px; cursor: pointer;
  background: #2563eb; color: #fff;
  border: 1px solid #1d4ed8; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.link-builder-output button:hover { background: #1d4ed8; }
[dir="rtl"] .link-builder-row { grid-template-columns: 110px 1fr; }
/* Redaction tab — full tag list as checkboxes, default checked = public.
   Unchecking a tag adds it to the redaction blacklist. */
.redaction-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
}
.redaction-list {
  max-height: 60vh;
  overflow-y: auto;
}
.redaction-section {
  margin-bottom: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 6px 10px;
}
.redaction-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  padding: 4px 0;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.redaction-section > summary .cat-name {
  flex: 1;
}
.bulk-toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.bulk-toggle-wrap input {
  margin: 0;
  cursor: pointer;
}
.redaction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  padding-top: 6px;
}
.redaction-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.redaction-item:hover {
  background: #f3f4f6;
}
.redaction-item.redacted {
  color: #b91c1c;
  text-decoration: line-through;
}
.redaction-item input {
  margin: 0;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-users-table th,
.admin-users-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 13px;
}

.admin-users-table th {
  background: #f8f8f8;
}

button {
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

button:hover {
  background: #eee;
}

button.primary {
  background: #1a1a2e;
  color: white;
  border-color: #1a1a2e;
}

button.danger {
  background: #c0392b;
  color: white;
  border-color: #c0392b;
}

.hidden { display: none !important; }

/* Server-rendered, crawler/LLM-only content. Present in DOM for indexing
   but never shown to humans (the SPA paints the same data interactively). */
.crawler-only { display: none !important; }

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #555;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.tag-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.tag-row select,
.tag-row input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
}

.tag-row button {
  padding: 2px 8px;
  font-size: 12px;
}

.autocomplete-wrapper {
  position: relative;
  flex: 1;
}

.autocomplete-wrapper input {
  width: 100%;
}

.autocomplete-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1001;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.autocomplete-list.visible {
  display: block;
}

.autocomplete-item {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.autocomplete-item:hover {
  background: #f0f0f0;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.form-actions button {
  flex: 0 0 auto;            /* never stretch buttons; size by content */
}

/* Editor modal header row: title + Copy Link button side-by-side. The
   button sits next to the status badges (verified ✓ / public 🌐) where
   there's slack — keeps form-actions row uncluttered for primary actions. */
.event-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.event-modal-head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.link-copy-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  color: #4b5563;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.link-copy-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #1f2937;
}

/* Header right section */
#header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

#lang-switcher {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #2a2a4e;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

/* Translation modal specifics */

#trans-key-listbox {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 12px;
}

.trans-key-item {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-family: monospace;
}

.trans-key-item:last-child {
  border-bottom: none;
}

.trans-key-item:hover {
  background: #f5f5f5;
}

.trans-key-item.selected {
  background: #1a1a2e;
  color: white;
}

.trans-key-grid-header {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 8px;
  padding: 6px 0;
  border-bottom: 2px solid #1a1a2e;
}

.trans-lang-block {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 12px;
}

.trans-lang-block h3 {
  font-size: 14px;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.trans-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.trans-table th,
.trans-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.trans-table th {
  font-size: 12px;
  color: #888;
  font-weight: 600;
}

.trans-table input,
.trans-lang-block input[data-key],
.trans-lang-block textarea[data-key] {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}

input.dirty,
textarea.dirty {
  border-color: #e67e22;
  background: #fef9f3;
}

/* ---------------------------------------------------------------
   View-mode switcher (segmented control) — Timeline | Table
   --------------------------------------------------------------- */

.segmented {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-right: 4px;
}
.segmented-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid #d1d5db;
  cursor: pointer;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  height: 28px;
}
.segmented-btn:last-child { border-right: none; }
.segmented-btn:hover { background: #f3f4f6; color: #374151; }
.segmented-btn.active {
  background: #1a1a2e;
  color: #fff;
}
.segmented-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Master view-mode toggle. Body class is set by app.js on load and on every
   click of the segmented switcher. Timeline = the default; Table = full-width
   data table (or cards on mobile). Group-by selector stays in both modes
   because grouping makes sense for table sections too. */
body.view-mode-table  #timeline-container { display: none; }
body.view-mode-table  #event-list         { display: block; }
body.view-mode-timeline #timeline-container { display: block; }
body.view-mode-timeline #event-list       { display: none; }

/* ---------------------------------------------------------------
   Auth modal — login + register
   --------------------------------------------------------------- */

.auth-modal-box {
  /* Override the default modal-box: tighter max-width (auth doesn't need
     a wide editor canvas), more generous padding, slightly more rounding.
     The close X handles cancel, so no inline Cancel button competes with
     the primary CTA — keeps the visual hierarchy clean. */
  position: relative;
  max-width: 420px;
  padding: 32px 32px 28px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.auth-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.auth-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.auth-header {
  margin-bottom: 22px;
  text-align: center;
}
.auth-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}
.auth-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.auth-field input[type=email],
.auth-field input[type=password],
.auth-field input[type=text] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.auth-field input::placeholder { color: #9ca3af; }
.auth-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.auth-field input:disabled {
  background: #f9fafb;
  color: #9ca3af;
}
.auth-hint {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

/* Password input + visibility toggle. The button sits inside the input's
   trailing edge; the input gets right padding to make room. */
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap input {
  padding-right: 44px;
}
.auth-toggle-pw {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.auth-toggle-pw:hover { background: #f3f4f6; color: #374151; }
.auth-toggle-pw .eye-hide { display: none; }
.auth-toggle-pw.shown .eye-show { display: none; }
.auth-toggle-pw.shown .eye-hide { display: block; }

/* Terms scroller — soft inset, comfortable line-height for legal prose. */
.auth-terms-box {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #374151;
  border-radius: 8px;
}
.auth-terms-box p { margin: 0 0 8px; }
.auth-terms-box p:last-child { margin-bottom: 0; }
.auth-terms-box:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Consent checkbox: large clickable label, custom-styled box. */
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #374151;
  cursor: pointer;
  padding: 4px 0;
}
.auth-checkbox input[type=checkbox] {
  margin: 2px 0 0 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

/* Inline message slot — only takes vertical space when populated. */
.auth-msg {
  font-size: 13px;
  text-align: center;
  margin: 0;
  min-height: 0;
  color: #c0392b;
}
.auth-msg:empty { display: none; }
.auth-msg.success { color: #16a34a; }

/* Primary CTA — full-width, prominent, the only solid button on the form. */
.auth-submit {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, transform 0.06s;
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
  background: #1d4ed8;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Login ↔ register switch link — small, centered, muted but tappable. */
.auth-switch {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.auth-switch a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
}
.auth-switch a:hover { text-decoration: underline; }

/* Mobile: still readable on small screens; the modal-overlay flex centering
   does the heavy lifting, we just shrink padding a hair. */
@media (max-width: 480px) {
  .auth-modal-box {
    padding: 24px 20px 20px;
    max-width: 100%;
    border-radius: 10px;
  }
  .auth-header h2 { font-size: 20px; }
}

/* ===============================================================
   Status badges (verified ✓ / public 🌐) — inline SVG, platform-free
   ----------------------------------------------------------------
   Two render paths:
   - DataTable + Editor modal: <span class="status-badge"> wraps the SVG via
     StatusIcons.makeBadge / .badgeHTML helpers.
   - Timeline items: badges injected purely via CSS ::before with a data-URL
     SVG background. Item `content` stays a plain string so vis-timeline's
     HTML sanitizer (which strips <svg>) is never engaged.
   =============================================================== */

.status-badge {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 4px;
  line-height: 1;
}
.status-badge svg { display: block; }

/* Timeline-item badges — pseudo-element, no DOM wrapping, no sanitizer. The
   ::before slot widens to fit 1 or 2 badges; multi-bg-image stacks them
   horizontally when both flags are set. SVGs are inline data URLs (no
   extra request) and use single-quoted attrs so the CSS url() can use
   double quotes without escaping. The `#` in `#16a34a` / `#2563eb` must
   be %23 since `#` is the URL fragment delimiter. */
.vis-item.is-verified .vis-item-content::before,
.vis-item.is-public   .vis-item-content::before {
  content: "";
  display: inline-block;
  height: 12px;
  vertical-align: -2px;
  /* margin-inline-end auto-flips for RTL — gap goes to the left of the badge
     (where the title text starts) in Arabic, to the right in LTR. Plain
     margin-right would put the gap on the wrong side in RTL and the badge
     would sit flush against the title. */
  margin-inline-end: 4px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.vis-item.is-verified:not(.is-public) .vis-item-content::before {
  width: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='14' height='14' rx='3' fill='%2316a34a'/><path d='M4.2 8.2 L6.8 10.8 L11.8 5.5' stroke='white' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.vis-item.is-public:not(.is-verified) .vis-item-content::before {
  width: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='7' fill='%232563eb'/><ellipse cx='8' cy='8' rx='3' ry='7' stroke='white' stroke-width='0.8' fill='none'/><line x1='1' y1='8' x2='15' y2='8' stroke='white' stroke-width='0.8'/><path d='M2.4 5 Q8 7 13.6 5' stroke='white' stroke-width='0.7' fill='none'/><path d='M2.4 11 Q8 9 13.6 11' stroke='white' stroke-width='0.7' fill='none'/></svg>");
}
.vis-item.is-verified.is-public .vis-item-content::before {
  width: 28px;
  background-position: 0 center, 16px center;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='14' height='14' rx='3' fill='%2316a34a'/><path d='M4.2 8.2 L6.8 10.8 L11.8 5.5' stroke='white' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='7' fill='%232563eb'/><ellipse cx='8' cy='8' rx='3' ry='7' stroke='white' stroke-width='0.8' fill='none'/><line x1='1' y1='8' x2='15' y2='8' stroke='white' stroke-width='0.8'/><path d='M2.4 5 Q8 7 13.6 5' stroke='white' stroke-width='0.7' fill='none'/><path d='M2.4 11 Q8 9 13.6 11' stroke='white' stroke-width='0.7' fill='none'/></svg>");
}

/* ===============================================================
   DataTable — Table-mode rendering (desktop grid + mobile cards)
   =============================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.data-table thead {
  position: sticky;
  top: var(--topbars-h);
  z-index: 5;
  background: #f8f9fa;
}

.data-table-header {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  font-size: 12px;
  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
}
.data-table-header.sortable { cursor: pointer; user-select: none; }
.data-table-header.sortable:hover { background: #f3f4f6; }
.data-table-header .th-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.data-table-header .sort-arrow {
  font-size: 12px;
  color: #6b7280;
  min-width: 10px;
}
.data-table-header .th-search,
.data-table-header .th-tag-select {
  display: block;
  margin-top: 6px;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  color: #111;
  background: #fff;
}
.data-table-header .th-search:focus {
  outline: none;
  border-color: #2563eb;
}

.data-table-row {
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.08s;
}
.data-table-row:hover { background: #f9fafb; }
.data-table-row td.data-table-cell {
  padding: 8px 10px;
  vertical-align: top;
  font-size: 13px;
  color: #1f2937;
  border-right: 1px solid #f3f4f6;
}
.data-table-cell.cell-date {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #4b5563;
}
.data-table-cell.cell-date .date-end {
  color: #9ca3af;
  font-size: 11px;
}
.data-table-cell.cell-title {
  font-weight: 500;
}
.data-table-empty {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
}

/* Group divider — full-width section header rendered between rows when a
   grouping is active. Scrolls with content (not sticky) — keeping it sticky
   would require coordinated offset calc with the sticky thead and adds
   complexity for marginal benefit. */
.data-table-group-divider td {
  padding: 10px 12px;
  background: #eef2ff;
  border-top: 1px solid #c7d2fe;
  border-bottom: 1px solid #c7d2fe;
  color: #3730a3;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Mobile cards group divider — same role as the table version. */
.data-cards-group-divider {
  padding: 8px 4px;
  margin-top: 8px;
  color: #3730a3;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #c7d2fe;
}
.data-cards-group-divider:first-child { margin-top: 0; }

/* Cards (mobile only). Card click opens the same Editor modal as table rows. */
.data-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.data-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.data-card:hover { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.data-card .card-date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}
.data-card .card-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}
.data-card .card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.data-card .card-chip {
  display: inline-block;
  padding: 1px 6px;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 10px;
  font-size: 11px;
}
.data-cards-empty {
  padding: 32px;
  text-align: center;
  color: #9ca3af;
}

/* ===============================================================
   IntroModal — first-impression "What is this site?" overlay
   ===============================================================
   Auto-shows on bare home page (no event deep link, no ?query).
   Re-accessible via the "Hakkında" / About entry in the overflow menu. */

.intro-modal-box {
  max-width: 560px;
  padding: 28px 32px 24px;
  position: relative;
}
.intro-modal-header h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}
.intro-modal-body {
  margin-bottom: 18px;
  color: #374151;
}
.intro-modal-body p {
  margin: 0 0 12px;
  line-height: 1.55;
  font-size: 14px;
}
.intro-modal-body p:last-child { margin-bottom: 0; }
.intro-modal-footer {
  display: flex;
  justify-content: flex-end;
}
.intro-dismiss-btn {
  padding: 10px 22px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.intro-dismiss-btn:hover { background: #1d4ed8; }
.intro-dismiss-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .intro-modal-box {
    padding: 22px 18px 18px;
    max-width: 100%;
  }
  .intro-modal-header h2 { font-size: 18px; }
}

/* ===============================================================
   Timeline off-viewport indicators — small "context anchor" chips
   at each end of the timeline showing how many filtered events sit
   beyond the current visible window. inset-inline-start/end auto-
   flip in RTL to match vis-timeline's own RTL time-axis flip; the
   chevron glyphs (‹/›) bidi-mirror themselves.
   =============================================================== */
#timeline-container { position: relative; }   /* anchor for the overlay chips */

.timeline-overflow {
  position: absolute;
  bottom: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #4338ca;
  font: 600 12px/1.2 inherit;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms, transform 120ms;
}
.timeline-overflow:hover  { background: #eef2ff; transform: translateY(-1px); }
.timeline-overflow:active { transform: translateY(0); }
.timeline-overflow.hidden { display: none; }
.timeline-overflow-earlier { inset-inline-start: 14px; }
.timeline-overflow-later   { inset-inline-end:   14px; }

@media (max-width: 768px) {
  .timeline-overflow { bottom: 8px; font-size: 11.5px; padding: 3px 8px; }
  .timeline-overflow-earlier { inset-inline-start: 8px; }
  .timeline-overflow-later   { inset-inline-end:   8px; }
}

/* ===============================================================
   IntroModal hints — non-obvious interaction tips at the bottom
   of the About modal, separated from the prose by an <hr>.
   Strings live statically per-language in intro-content.js; the
   icons are positional (zoom / hide / hover / click / link).
   =============================================================== */
.intro-hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 16px 0 12px;
}
.intro-hints {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intro-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #374151;
  line-height: 1.5;
}
.intro-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
}
.intro-hint-icon svg { width: 18px; height: 18px; }
.intro-hint-text { padding-top: 4px; overflow-wrap: anywhere; }
[dir="rtl"] .intro-hint { flex-direction: row; }

/* ===============================================================
   ContextMenu — small positioned menu shown on right-click /
   long-press of a timeline item (currently for tag-hide actions).
   =============================================================== */
.context-menu {
  position: fixed;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 4px;
  min-width: 220px;
  max-width: min(360px, 92vw);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.context-menu.hidden { display: none; }
.context-menu-item {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  color: #1f2937;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.context-menu-item:hover,
.context-menu-item:focus-visible {
  background: #eef2ff;
  color: #1e1b4b;
  outline: none;
}
[dir="rtl"] .context-menu-item { text-align: right; }

/* ===============================================================
   Timeline item hover tooltip (vis-timeline .vis-tooltip override)
   — rich HTML preview so users see event details without clicking.
   vis-timeline ships .vis-tooltip with white-space: nowrap; we override
   to normal so long titles and descriptions actually wrap inside the
   card instead of running off the right edge of the viewport.
   =============================================================== */
.vis-tooltip {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #d1d5db !important;
  border-radius: 12px !important;
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.08) !important;
  padding: 0 !important;
  width: 360px !important;
  max-width: 92vw !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  z-index: 9999 !important;
  pointer-events: none;
  overflow: hidden;
}
.vis-tooltip .tt-card { padding: 12px 14px 14px; }
.vis-tooltip .tt-date {
  display: inline-block;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.vis-tooltip .tt-title {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  word-break: normal;
}
.vis-tooltip .tt-desc {
  color: #1f2937;
  font-size: 12.5px;
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.vis-tooltip .tt-tags {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef0f3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vis-tooltip .tt-tagrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  overflow-wrap: anywhere;
}
.vis-tooltip .tt-cat {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  padding-top: 2px;
  min-width: 56px;
}
.vis-tooltip .tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.vis-tooltip .tt-chip {
  display: inline-block;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
[dir="rtl"] .vis-tooltip { direction: rtl; text-align: right; }

/* ===============================================================
   updated_at column / card footer — muted freshness signal.
   =============================================================== */
.cell-updated {
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
}
.card-updated {
  margin-top: 8px;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* ===============================================================
   FilterModal — opens from the toolbar Filtrele button
   =============================================================== */

.filter-modal-box {
  max-width: 600px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
}
.filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.filter-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.filter-search-row {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.filter-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}
.filter-search-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.filter-modal-columns {
  padding: 14px 20px;
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.filter-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.filter-clear-all {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 4px;
}
.filter-clear-all:hover { color: #374151; }
.filter-cancel-btn {
  padding: 8px 16px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.filter-cancel-btn:hover { background: #f9fafb; }
.filter-apply-btn {
  padding: 8px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.filter-apply-btn:hover { background: #1d4ed8; }

/* ===============================================================
   Mobile (≤768px) — sticky bar overhaul, vis-timeline trims, etc.
   =============================================================== */

@media (max-width: 768px) {
  /* Toolbar gets tighter; allow controls to wrap to a 2nd row gracefully. */
  #toolbar { padding: 6px 8px; }
  #toolbar-row1 { flex-wrap: wrap; gap: 6px; }
  #search-wrap { max-width: none; flex: 1 1 160px; }

  /* Group-by label takes too much room on narrow screens — drop the colon
     prefix label; the dropdown's placeholder ("Grupsuz") makes intent clear. */
  #group-selector label { display: none; }
  #mobile-sort-wrap { display: inline-flex; }
  #mobile-sort-wrap label { display: none; }

  /* vis-timeline: hide the left labelset column (group names) so the
     events panel gets the full screen width. Group context is sacrificed
     for screen real-estate; the toolbar group-by dropdown remains. */
  #timeline-container .vis-panel.vis-left,
  #timeline-container .vis-panel.vis-right { display: none; }

  /* DataTable on mobile: the table itself is hidden (cards take its place).
     Keep the cards container scrollable as part of the page. */
  .data-table { display: none; }
  .data-cards { display: flex; }

  /* Filter modal full-bleed on phones. */
  .filter-modal-box {
    max-width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 10px;
  }
  .filter-modal-columns { grid-template-columns: 1fr; gap: 8px; }
}

/* On desktop, hide the cards container — DataTable always renders the
   table form there. (DataTable.js writes either .data-table or .data-cards
   into #event-list; this CSS hides the wrong one per viewport.) */
@media (min-width: 769px) {
  .data-cards { display: none; }
  #mobile-sort-wrap { display: none; }
}

/* When the toolbar has room (≥1024px), inline the editor/sysadmin buttons
   instead of hiding them behind the ⋮ overflow. Keeps the DOM single-sourced
   (buttons live in #overflow-popup); CSS just lifts them out of the popup
   visually. Below this breakpoint the buttons collapse back to the popup.
   The `!important` on inline-flex is required to outrank the global
   `.hidden { display: none !important }` rule — the popup keeps its .hidden
   class as a mobile fallback, so we explicitly override it on desktop. */
@media (min-width: 1024px) {
  #overflow-toggle { display: none !important; }
  #overflow-popup,
  #overflow-popup.hidden {
    display: inline-flex !important;
    position: static;
    flex-direction: row;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    gap: 6px;
    z-index: auto;
  }
  #overflow-popup button {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 12px;
    height: 32px;
    background: #fff;
    font-size: 13px;
    border-bottom: 1px solid #d1d5db;   /* override the popup's bottom border */
  }
  #overflow-popup button:hover { background: #f3f4f6; }
  /* Per-button .hidden (auth-gated) still hides individual buttons; the
     global .hidden!important rule already does this, so no override needed. */
}