/**
 * Series Status News Styling - Compact & Improved
 *
 * Custom styling for the Series Status News infobox with tooltips and compact design
 *
 * @package Fictioneer Child Theme
 * @since 1.0.0
 */

/* =============================================================================
   SERIES STATUS NEWS INFOBOX - COMPACT
============================================================================= */

.chapter__series-status,
.story__series-status {
  position: relative;
  background: var(--ssn-background, rgba(102, 126, 234, 0.04));
  border: 1px solid var(--ssn-border, rgba(102, 126, 234, 0.12));
  border-radius: 6px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.chapter__series-status:hover,
.story__series-status:hover {
  background: var(--ssn-background-hover, rgba(102, 126, 234, 0.06));
  border-color: var(--ssn-border-hover, rgba(102, 126, 234, 0.18));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Story page specific - add top padding */
.story__series-status {
  margin-top: 1.25rem;
}

/* Dark mode adjustments */
:root[data-mode="dark"] .chapter__series-status,
:root[data-mode="dark"] .story__series-status {
  background: var(--ssn-background-dark, rgba(102, 126, 234, 0.06));
  border-color: var(--ssn-border-dark, rgba(102, 126, 234, 0.15));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:root[data-mode="dark"] .chapter__series-status:hover,
:root[data-mode="dark"] .story__series-status:hover {
  background: var(--ssn-background-dark-hover, rgba(102, 126, 234, 0.09));
  border-color: var(--ssn-border-dark-hover, rgba(102, 126, 234, 0.22));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Light mode adjustments */
:root[data-mode="light"] .chapter__series-status,
:root[data-mode="light"] .story__series-status {
  background: var(--ssn-background-light, rgba(102, 126, 234, 0.025));
  border-color: var(--ssn-border-light, rgba(102, 126, 234, 0.1));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

:root[data-mode="light"] .chapter__series-status:hover,
:root[data-mode="light"] .story__series-status:hover {
  background: var(--ssn-background-light-hover, rgba(102, 126, 234, 0.04));
  border-color: var(--ssn-border-light-hover, rgba(102, 126, 234, 0.15));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* =============================================================================
   NESTED SECTIONS
============================================================================= */

.ssn-main-section {
  position: relative;
}

/* General News - Nested Section */
.ssn-general-news-section {
  position: relative;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ssn-divider, rgba(102, 126, 234, 0.15));
}

:root[data-mode="dark"] .ssn-general-news-section {
  border-top-color: rgba(102, 126, 234, 0.2);
}

:root[data-mode="light"] .ssn-general-news-section {
  border-top-color: rgba(102, 126, 234, 0.12);
}

/* =============================================================================
   STATUS BADGES - COMPACT WITH TOOLTIPS
============================================================================= */

.ssn-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 0.65rem;
  position: relative;
}

.ssn-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--badge-background);
  color: var(--badge-color);
  border: 1px solid var(--badge-border);
  transition: all 0.15s ease;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Tooltip content - Available on all devices */
.ssn-badge[data-status="completed"]::after,
.ssn-badge[data-status="ongoing"]::after,
.ssn-badge[data-status="dropped"]::after {
  content: 'Translation Status';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.ssn-badge[data-status="translation-process"]::after,
.ssn-badge[data-status="proofreading-process"]::after,
.ssn-badge[data-status="hiatus"]::after,
.ssn-badge[data-status="technical"]::after,
.ssn-badge[data-status="delay"]::after {
  content: 'Translation Progress Details';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

/* Tooltip arrow - Available on all devices */
.ssn-badge[data-status="completed"]::before,
.ssn-badge[data-status="ongoing"]::before,
.ssn-badge[data-status="dropped"]::before,
.ssn-badge[data-status="translation-process"]::before,
.ssn-badge[data-status="proofreading-process"]::before,
.ssn-badge[data-status="hiatus"]::before,
.ssn-badge[data-status="technical"]::before,
.ssn-badge[data-status="delay"]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

/* Desktop hover behavior */
@media (hover: hover) {
  .ssn-badge[data-status="completed"]:hover::after,
  .ssn-badge[data-status="ongoing"]:hover::after,
  .ssn-badge[data-status="dropped"]:hover::after,
  .ssn-badge[data-status="translation-process"]:hover::after,
  .ssn-badge[data-status="proofreading-process"]:hover::after,
  .ssn-badge[data-status="hiatus"]:hover::after,
  .ssn-badge[data-status="technical"]:hover::after,
  .ssn-badge[data-status="delay"]:hover::after {
    opacity: 1;
  }

  .ssn-badge[data-status="completed"]:hover::before,
  .ssn-badge[data-status="ongoing"]:hover::before,
  .ssn-badge[data-status="dropped"]:hover::before,
  .ssn-badge[data-status="translation-process"]:hover::before,
  .ssn-badge[data-status="proofreading-process"]:hover::before,
  .ssn-badge[data-status="hiatus"]:hover::before,
  .ssn-badge[data-status="technical"]:hover::before,
  .ssn-badge[data-status="delay"]:hover::before {
    opacity: 1;
  }
}

.ssn-separator {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-600);
  opacity: 0.6;
  margin: 0 3px;
}

.ssn-sub-separator {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-600);
  opacity: 0.5;
  margin: 0 3px;
}

/* =============================================================================
   MAIN STATUS COLORS
============================================================================= */

/* Completed - Green */
.ssn-badge[data-status="completed"] {
  --badge-background: rgba(76, 175, 80, 0.15);
  --badge-color: #4caf50;
  --badge-border: rgba(76, 175, 80, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="completed"] {
  --badge-background: rgba(76, 175, 80, 0.2);
  --badge-color: #81c784;
}

:root[data-mode="light"] .ssn-badge[data-status="completed"] {
  --badge-background: rgba(76, 175, 80, 0.1);
  --badge-color: #388e3c;
}

/* Ongoing - Blue */
.ssn-badge[data-status="ongoing"] {
  --badge-background: rgba(33, 150, 243, 0.15);
  --badge-color: #2196f3;
  --badge-border: rgba(33, 150, 243, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="ongoing"] {
  --badge-background: rgba(33, 150, 243, 0.2);
  --badge-color: #64b5f6;
}

:root[data-mode="light"] .ssn-badge[data-status="ongoing"] {
  --badge-background: rgba(33, 150, 243, 0.1);
  --badge-color: #1976d2;
}

/* Dropped - Red */
.ssn-badge[data-status="dropped"] {
  --badge-background: rgba(244, 67, 54, 0.15);
  --badge-color: #f44336;
  --badge-border: rgba(244, 67, 54, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="dropped"] {
  --badge-background: rgba(244, 67, 54, 0.2);
  --badge-color: #ef5350;
}

:root[data-mode="light"] .ssn-badge[data-status="dropped"] {
  --badge-background: rgba(244, 67, 54, 0.1);
  --badge-color: #d32f2f;
}

/* =============================================================================
   SUB STATUS COLORS
============================================================================= */

/* Translation Process - Teal */
.ssn-badge[data-status="translation-process"] {
  --badge-background: rgba(0, 150, 136, 0.15);
  --badge-color: #009688;
  --badge-border: rgba(0, 150, 136, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="translation-process"] {
  --badge-background: rgba(0, 150, 136, 0.2);
  --badge-color: #4db6ac;
}

:root[data-mode="light"] .ssn-badge[data-status="translation-process"] {
  --badge-background: rgba(0, 150, 136, 0.1);
  --badge-color: #00796b;
}

/* Proofreading Process - Indigo */
.ssn-badge[data-status="proofreading-process"] {
  --badge-background: rgba(63, 81, 181, 0.15);
  --badge-color: #3f51b5;
  --badge-border: rgba(63, 81, 181, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="proofreading-process"] {
  --badge-background: rgba(63, 81, 181, 0.2);
  --badge-color: #7986cb;
}

:root[data-mode="light"] .ssn-badge[data-status="proofreading-process"] {
  --badge-background: rgba(63, 81, 181, 0.1);
  --badge-color: #303f9f;
}

/* Hiatus - Amber */
.ssn-badge[data-status="hiatus"] {
  --badge-background: rgba(255, 193, 7, 0.15);
  --badge-color: #ffc107;
  --badge-border: rgba(255, 193, 7, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="hiatus"] {
  --badge-background: rgba(255, 193, 7, 0.2);
  --badge-color: #ffd54f;
}

:root[data-mode="light"] .ssn-badge[data-status="hiatus"] {
  --badge-background: rgba(255, 193, 7, 0.1);
  --badge-color: #ffa000;
}

/* Technical - Purple */
.ssn-badge[data-status="technical"] {
  --badge-background: rgba(156, 39, 176, 0.15);
  --badge-color: #9c27b0;
  --badge-border: rgba(156, 39, 176, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="technical"] {
  --badge-background: rgba(156, 39, 176, 0.2);
  --badge-color: #ba68c8;
}

:root[data-mode="light"] .ssn-badge[data-status="technical"] {
  --badge-background: rgba(156, 39, 176, 0.1);
  --badge-color: #7b1fa2;
}

/* Delay - Orange */
.ssn-badge[data-status="delay"] {
  --badge-background: rgba(255, 152, 0, 0.15);
  --badge-color: #ff9800;
  --badge-border: rgba(255, 152, 0, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="delay"] {
  --badge-background: rgba(255, 152, 0, 0.2);
  --badge-color: #ffb74d;
}

:root[data-mode="light"] .ssn-badge[data-status="delay"] {
  --badge-background: rgba(255, 152, 0, 0.1);
  --badge-color: #f57c00;
}

/* General News - Gray */
.ssn-badge[data-status="general-news"] {
  --badge-background: rgba(96, 125, 139, 0.15);
  --badge-color: #607d8b;
  --badge-border: rgba(96, 125, 139, 0.3);
}

:root[data-mode="dark"] .ssn-badge[data-status="general-news"] {
  --badge-background: rgba(96, 125, 139, 0.2);
  --badge-color: #90a4ae;
}

:root[data-mode="light"] .ssn-badge[data-status="general-news"] {
  --badge-background: rgba(96, 125, 139, 0.1);
  --badge-color: #455a64;
}

/* =============================================================================
   MESSAGE CONTENT - COMPACT
============================================================================= */

.ssn-message {
  font-size: 12px;
  line-height: 1.5;
}

.ssn-message p:first-child {
  margin-top: 0;
}

.ssn-message p:last-child {
  margin-bottom: 0;
}

.ssn-message a {
  color: var(--ssn-link-color, var(--fg-400));
  text-decoration: underline;
}

.ssn-message a:hover {
  color: var(--ssn-link-hover-color, var(--fg-200));
}

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

@media only screen and (max-width: 640px) {
  .chapter__series-status,
  .story__series-status {
    padding: 0.75rem 0.85rem;
    border-radius: 5px;
  }

  .story__series-status {
    margin-top: 1rem;
  }

  .ssn-general-news-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .ssn-status-badges {
    gap: 4px;
    margin-bottom: 0.55rem;
  }

  .ssn-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .ssn-separator,
  .ssn-sub-separator {
    font-size: 9px;
    margin: 0 2px;
  }

  .ssn-message {
    font-size: 11px;
  }
}

/* =============================================================================
   MOBILE TOOLTIP SUPPORT (CLICK/TAP TO SHOW)
============================================================================= */

/* Show tooltip when .show-tooltip class is active (mobile tap) */
.ssn-badge.show-tooltip::after {
  opacity: 1 !important;
}

.ssn-badge.show-tooltip::before {
  opacity: 1 !important;
}

/* =============================================================================
   CUSTOM THEME VARIABLES (OPTIONAL OVERRIDES)
============================================================================= */

/*
 * Customize these CSS variables in your main child theme CSS file
 * to match your specific color scheme:
 *
 * :root {
 *   --ssn-accent-primary: #your-color;
 *   --ssn-accent-secondary: #your-color;
 *   --ssn-background: rgba(your-color, 0.05);
 *   --ssn-background-dark: rgba(your-color, 0.08);
 *   --ssn-background-light: rgba(your-color, 0.03);
 *   --ssn-link-color: #your-color;
 *   --ssn-link-hover-color: #your-color;
 * }
 */