/* Timeline page layout */
.wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 18px; }

.list { margin-top: 14px; display: grid; gap: 10px; }
.item { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.meta { opacity:.75; font-size: 12px; margin-bottom: 4px; }
.tag  { display:inline-block; padding: 2px 8px; border-radius:999px; font-size: 12px; margin-left: 8px; background: rgba(255,255,255,.06); }

/* Timeline component */
.timeline-wrap { margin: 16px 0; }
.tl-header { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.tl-range { font-size: 14px; opacity: .8; }

.tl-legend { display:flex; gap:10px; flex-wrap:wrap; }
.tl-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; opacity:.9; }
.tl-dot { width:10px; height:10px; border-radius:999px; background: var(--tlColor, #64748b); display:inline-block; }

.tl-bar {
  position: relative;
  height: 54px;
  border-radius: 14px;
  padding: 14px 10px 22px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.tl-track {
  position:absolute;
  left:10px; right:10px;
  top: 22px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.tl-seg {
  position:absolute;
  top: 19px;
  height: 16px;
  border-radius: 999px;
  border: 0;
  background: var(--tlColor, #64748b);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
  opacity: .95;
}

.tl-seg:hover { transform: translateY(-1px); opacity: 1; }
.tl-seg:focus { outline: 2px solid rgba(59,130,246,.6); outline-offset: 2px; }

.tl-ticks { position:absolute; left:10px; right:10px; bottom: 4px; top: 0; pointer-events:none; }
.tl-tick { position:absolute; bottom: 4px; transform: translateX(-50%); text-align:center; }
.tl-tick-line { display:block; width:1px; height: 12px; background: rgba(255,255,255,.18); margin:0 auto; }
.tl-tick-label { display:block; font-size: 11px; opacity: .7; margin-top:2px; }

/* Chips */
.tl-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
  align-items:center;
}
.tl-chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}
.tl-chip:hover{ background: rgba(255,255,255,.10); }
.tl-chip.is-active{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.14);
}
.tl-chip.is-inactive{ opacity: .55; }
.tl-chip-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.12);
  opacity: .85;
}
.tl-chip-spacer{ flex: 1 1 auto; }

.tl-empty {
    display: none;
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.tl-empty.is-visible { 
    display: block; 
}

.sort-btn{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
}
.sort-btn:hover{ background: rgba(255,255,255,.10); }
.sort-btn.is-active{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.14);
}

.sort-btn-icon{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;              /* για να μη πιάνει χώρο */
  font-size: 16px;
  line-height: 1;
}