/**
 * BOOKMARK BADGES & INDICATORS
 *
 * Styly pro NEW a UNREAD příznaky v Stories sekci
 *
 * Dependencies:
 * - global-tokens.css (barevná paleta)
 *
 * Piktogramy:
 * - NEW: ✨ (sparkles/jiskry) - červený odstín, 14px
 * - UNREAD: ● (dot/tečka) - žlutá/oranžová (peach), 16px
 * - BOOKMARK: 🔖 (bookmark emoji) - 16px
 *
 * Design notes:
 * - Používá Unicode piktogramy místo textu
 * - Absolutní pozicování (float over layout)
 * - Pozice status badge: 2.75rem od pravého okraje
 * - Pozice bookmark: 3.75rem od pravého okraje (1rem vlevo od status badge)
 */

/* ============================================
   READ STATUS BADGE
   ============================================ */

.read-status-badge {
  display: inline-block;
  font-family: inherit; /* Use system font for better emoji rendering */
  line-height: 1;
  vertical-align: middle;
}

/* Size variants - larger for pictograms */
.read-status-badge.badge--sm {
  font-size: 0.875rem; /* 14px for sparkles */
}

.read-status-badge.badge--md {
  font-size: 1rem; /* 16px */
}

/* Status variants */
.read-status-badge.badge--new {
  color: var(--color-dark-red);
}

.read-status-badge.badge--unread {
  color: var(--color-peach); /* Yellow/orange dot */
  font-size: 1rem; /* Larger dot */
}

/* ============================================
   ENTRY LIST INTEGRATION
   ============================================ */

/* Ensure entry list items can contain absolutely positioned badges */
.entry-list__item {
  position: relative;
}

/* Badge container - positioned absolutely to float over layout */
.entry-list__item [data-status-badge] {
  position: absolute;
  right: 2.75rem; /* Position closer to "Read" link */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Don't interfere with clicks */
}

/* ============================================
   BOOKMARK INDICATOR (for entry lists)
   ============================================ */

/* Bookmark emoji indicator */
.entry-list__item--bookmark::before {
  content: '🔖';
  position: absolute;
  right: -1.9rem; /* Left side of "Read" link */
  top: 50%;
  transform: translateY(-30%) rotate(-90deg);
  font-size: 1.25rem;
  pointer-events: none;
}

/* ============================================
   BOOKMARK COUNTS (for timeline cards)
   ============================================ */

.bookmark-counts {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--font-family-system);
  font-size: 0.75rem; /* Smaller than card-meta (12px) */
  color: var(--color-peach); /* Same color as unread badge */
}

.bookmark-counts .count {
  font-weight: 400; /* Lighter weight */
  white-space: nowrap;
}

.bookmark-counts .count--new {
  color: var(--color-peach); /* Same yellow/orange as unread */
}

.bookmark-counts .count--unread {
  color: var(--color-peach); /* Yellow/orange like badge */
}

/* Empty state (hidden) */
.bookmark-counts:empty {
  display: none;
}

/* ============================================
   TIMELINE CARD META ROW LAYOUT
   ============================================ */

/* Override stories-timeline.css to adjust layout */
.card-meta-row {
  justify-content: flex-start !important; /* Override space-between */
  gap: 0.5rem !important; /* Tighter default gap */
}

/* Keep "Entries" meta and bookmark counts close together */
.card-meta-row .card-meta {
  margin-right: 0.25rem; /* Small gap after "Entries" */
}

/* Push Open Log/Open Book button to the right */
.card-meta-row .card-button--primary {
  margin-left: auto; /* Push to right */
}

/* Push Published date to the right (for StoryBook) */
.card-meta-row .card-published {
  margin-left: auto; /* Push to right */
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .bookmark-counts {
    font-size: 0.75rem; /* 12px on mobile */
    gap: 0.5rem;
  }

  .read-status-badge.badge--md {
    font-size: 0.625rem; /* Smaller on mobile */
  }

  /* On mobile, badge should be inline (not absolute) */
  .entry-list__item [data-status-badge] {
    position: static;
    transform: none;
    display: inline-block;
    margin-left: 0.5rem;
  }

  /* Bookmark indicator inline on mobile */
  .entry-list__item--bookmark::before {
    position: static;
    transform: none;
    display: inline-block;
    margin-left: 0.5rem;
  }
}