/*
 * Unified Hub Component System
 *
 * This file consolidates CV Hub and LinkedIn Hub styles into a single,
 * theme-able component system. Eliminates 1,500+ lines of duplicate code.
 *
 * Usage: Add data-theme="cv" or data-theme="linkedin" to .hub-container
 */

/* ========================================================================
   HUB THEMING SYSTEM
   ======================================================================== */

/* LinkedIn Theme */
.hub-container[data-theme="linkedin"] {
  --hub-primary: var(--color-linkedin-primary);
  --hub-secondary: var(--color-linkedin-secondary);
  --hub-dark: var(--color-linkedin-dark);
  --hub-gradient: var(--gradient-linkedin);
  --hub-gradient-hover: var(--gradient-linkedin-hover);
  --hub-shadow: var(--shadow-linkedin);
}

/* CV Theme */
.hub-container[data-theme="cv"] {
  --hub-primary: var(--color-cv-primary);
  --hub-secondary: var(--color-cv-secondary);
  --hub-dark: var(--color-cv-dark);
  --hub-gradient: var(--gradient-cv);
  --hub-gradient-hover: var(--gradient-cv-hover);
  --hub-shadow: var(--shadow-cv);
}

/* ========================================================================
   HUB CONTAINER
   ======================================================================== */
.hub-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg);
  font-family: var(--font-family-base);
  min-height: 100vh;
  background: transparent;
}

/* Legacy class support */
.cv-hub-container,
.linkedin-hub-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg);
  font-family: var(--font-family-base);
  min-height: 100vh;
  background: transparent;
}

/* ========================================================================
   HUB HEADER
   ======================================================================== */
.hub-header {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.hub-header h1 {
  color: var(--hub-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}

.hub-header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
}

/* Legacy class support */
.cv-hub-header,
.linkedin-hub-header {
  @extend .hub-header;
}

.cv-hub-header h1 {
  color: var(--color-cv-primary);
}

.linkedin-hub-header h1 {
  color: var(--color-linkedin-primary);
}

/* ========================================================================
   TAB NAVIGATION
   ======================================================================== */
.hub-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 5px;
  background: white;
  padding: 8px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.hub-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: transparent;
  transition: var(--transition-all);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.hub-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-gray-700);
  text-decoration: none;
}

.hub-tab.active {
  background: var(--hub-gradient);
  color: white;
  box-shadow: var(--hub-shadow);
}

.hub-tab.active:hover {
  background: var(--hub-gradient-hover);
  color: white;
  text-decoration: none;
}

.hub-tab i:first-child {
  font-size: 0.95rem;
}

/* Tab Badge */
.tab-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.6rem;
  margin-left: 3px;
}

.tab-badge.success {
  background: var(--color-success);
  color: white;
}

.tab-badge.processing {
  background: var(--color-warning);
  color: white;
}

.hub-tab.active .tab-badge.success {
  background: white;
  color: var(--color-success);
}

.hub-tab.active .tab-badge.processing {
  background: white;
  color: var(--color-warning);
}

/* Legacy class support */
.cv-tabs-nav,
.linkedin-tabs-nav {
  @extend .hub-tabs-nav;
}

.cv-tab,
.linkedin-tab {
  @extend .hub-tab;
}

.cv-tab.active {
  background: var(--gradient-cv);
  box-shadow: var(--shadow-cv);
}

.cv-tab.active:hover {
  background: var(--gradient-cv-hover);
}

.linkedin-tab.active {
  background: var(--gradient-linkedin);
  box-shadow: var(--shadow-linkedin);
}

.linkedin-tab.active:hover {
  background: var(--gradient-linkedin-hover);
}

/* ========================================================================
   UTILITY COMPONENTS
   ======================================================================== */

/* Refresh Indicator */
.refresh-indicator {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Premium Badge */
.premium-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  margin-left: 5px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========================================================================
   MARKDOWN CONTENT STYLING (GitHub-like)
   ======================================================================== */
.markdown-content {
  font-family: var(--font-family-base);
  line-height: var(--line-height-relaxed);
  color: #24292f;
  background-color: white;
  padding: 0;
}

.markdown-content h1 {
  color: #1e293b;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #d0d7de;
}

.markdown-content h2 {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #d0d7de;
}

.markdown-content h3 {
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 24px 0 16px 0;
}

.markdown-content h4 {
  color: var(--color-cv-primary);
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 16px 0;
}

.markdown-content h5 {
  color: #656d76;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 24px 0 16px 0;
}

.markdown-content p {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-content blockquote {
  padding: 0 1em;
  color: #656d76;
  border-left: 0.25em solid #d0d7de;
  margin: 0 0 16px 0;
}

.markdown-content ul,
.markdown-content ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 2em;
}

.markdown-content li {
  margin-bottom: 4px;
}

.markdown-content li + li {
  margin-top: 4px;
}

.markdown-content strong {
  font-weight: 600;
  color: #1e293b;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(175, 184, 193, 0.2);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.markdown-content pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 6px;
  margin: 16px 0;
}

.markdown-content pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-content table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  margin: 16px 0;
}

.markdown-content table th,
.markdown-content table td {
  padding: 6px 13px;
  border: 1px solid #d0d7de;
}

.markdown-content table th {
  font-weight: 600;
  background-color: #f6f8fa;
}

.markdown-content table tr {
  background-color: #ffffff;
  border-top: 1px solid #c6cbd1;
}

.markdown-content table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

.markdown-content hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #d0d7de;
  border: 0;
}

/* Emoji support */
.markdown-content .emoji {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: text-top;
}

/* ========================================================================
   REVIEW CONTAINER
   ======================================================================== */
.cv-review-container,
.linkedin-review-container {
  font-family: var(--font-family-base);
  min-height: 100vh;
}

/* ========================================================================
   CV ANALYSIS RESPONSIVE COMPONENTS (Mobile-First)
   ======================================================================== */

/* Profile Summary Card - Mobile First */
.cv-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.cv-profile-photo {
  flex-shrink: 0;
  text-align: center;
}

.cv-profile-info {
  flex: 1;
  min-width: 0;
}

/* Main Content Grid - Mobile First (single column) */
.cv-content-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.cv-content-main,
.cv-content-sidebar {
  width: 100%;
}

/* Benefits Grid - Mobile First (single column) */
.cv-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Analysis Overview Card - Mobile First */
.cv-analysis-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.cv-analysis-score {
  flex-shrink: 0;
}

.cv-analysis-details {
  flex: 1;
  min-width: 0;
}

/* Metrics Grid - Mobile First */
.cv-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Experience/Education Item Header - Mobile First */
.cv-item-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.cv-item-header-info {
  order: 1;
}

.cv-item-header-meta {
  order: 2;
  color: #64748b;
  font-size: 0.9rem;
}

/* Contact Info - Mobile First */
.cv-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.cv-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

/* Action Plan Item - Mobile First */
.cv-action-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cv-action-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f97316;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cv-action-content {
  flex: 1;
  min-width: 0;
}

.cv-action-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
}

/* Score Badge Row - Mobile First */
.cv-score-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.cv-score-badge {
  flex-shrink: 0;
}

.cv-score-details {
  flex: 1;
  min-width: 0;
}

/* CTA Header - Mobile First */
.cv-cta-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  text-align: center;
}

.cv-cta-icon {
  flex-shrink: 0;
}

.cv-cta-text {
  flex: 1;
  min-width: 0;
}

/* Tablet and up (640px+) */
@media (min-width: 640px) {
  .cv-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cv-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cv-contact-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  .cv-action-item {
    flex-direction: row;
    gap: 15px;
  }

  .cv-action-meta {
    flex-direction: row;
    gap: 15px;
  }

  .cv-score-row {
    flex-direction: row;
    text-align: left;
  }

  .cv-cta-header {
    flex-direction: row;
    text-align: left;
  }
}

/* Desktop (768px+) */
@media (min-width: 768px) {
  .cv-profile-grid {
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    text-align: left;
  }

  .cv-analysis-overview {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .cv-item-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cv-item-header-meta {
    order: 0;
    text-align: right;
  }
}

/* Large Desktop (1024px+) */
@media (min-width: 1024px) {
  .cv-content-grid {
    flex-direction: row;
  }

  .cv-content-main {
    flex: 2;
  }

  .cv-content-sidebar {
    flex: 1;
  }

  .cv-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* ========================================================================
   SMART NAVIGATION SECTION
   ======================================================================== */
.smart-navigation-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .smart-navigation-section {
    flex-direction: column;
    gap: 12px;
  }

  .smart-navigation-section .btn-cv-premium,
  .smart-navigation-section .btn-cv-custom,
  .smart-navigation-section .btn-continue-journey {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ========================================================================
   RESPONSIVE STYLES
   ======================================================================== */
@media (max-width: 768px) {
  .hub-container,
  .cv-hub-container,
  .linkedin-hub-container {
    padding: 15px;
  }

  .hub-tabs-nav,
  .cv-tabs-nav,
  .linkedin-tabs-nav {
    padding: 6px;
    gap: 3px;
  }

  .hub-tab,
  .cv-tab,
  .linkedin-tab {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .hub-tab .tab-text,
  .cv-tab .tab-text,
  .linkedin-tab .tab-text {
    display: none;
  }

  .hub-tab i:first-child,
  .cv-tab i:first-child,
  .linkedin-tab i:first-child {
    font-size: 1rem;
  }

  .hub-card,
  .cv-hub-card,
  .linkedin-hub-card {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .hub-tabs-nav,
  .cv-tabs-nav,
  .linkedin-tabs-nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }

  .hub-tab,
  .cv-tab,
  .linkedin-tab {
    flex: 1;
    justify-content: center;
    padding: 8px 6px;
  }
}