/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing
 * steps.  You can still include application-wide styles in this file,
 * but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or
 * manifest will override earlier ones, depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Step VA Badge Colors */
.badge-step-value-added {
  background-color: var(--bs-success) !important; /* Green */
  color: white !important;
}

.badge-step-non-value-added {
  background-color: var(--bs-danger) !important; /* Red */
  color: white !important;
}

.badge-step-required {
  background-color: var(--bs-warning) !important; /* Orange */
  color: white !important;
}

/* Professional Status Badges (Enterprise Style) */
.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Light mode status badges */
[data-bs-theme="light"] .status-badge-success {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
  border-left: 3px solid var(--bs-success);
}

[data-bs-theme="light"] .status-badge-warning {
  background-color: rgba(217, 119, 6, 0.1);
  color: #D97706;
  border-left: 3px solid var(--bs-warning);
}

[data-bs-theme="light"] .status-badge-danger {
  background-color: rgba(220, 38, 38, 0.1);
  color: #DC2626;
  border-left: 3px solid var(--bs-danger);
}

[data-bs-theme="light"] .status-badge-info {
  background-color: rgba(8, 145, 178, 0.1);
  color: #0891B2;
  border-left: 3px solid var(--bs-info);
}

/* Dark mode status badges */
[data-bs-theme="dark"] .status-badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-left: 3px solid var(--bs-success);
}

[data-bs-theme="dark"] .status-badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border-left: 3px solid var(--bs-warning);
}

[data-bs-theme="dark"] .status-badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-left: 3px solid var(--bs-danger);
}

[data-bs-theme="dark"] .status-badge-info {
  background-color: rgba(6, 182, 212, 0.15);
  color: #06B6D4;
  border-left: 3px solid var(--bs-info);
}

/* Video List Improvements */
.video-row {
  transition: background-color 0.2s ease, transform 0.1s ease;
  border-radius: var(--bs-border-radius);
  padding: 0 !important; /* Remove default padding since we control it inline */
  color: var(--bs-body-color); /* Ensure text color is theme-aware */
}

.video-row:hover {
  background-color: var(--bs-tertiary-bg) !important;
  transform: translateY(-1px);
  color: var(--bs-body-color); /* Maintain text color on hover */
}

.video-row:active {
  transform: translateY(0);
}

/* Fix text color for video titles inside rows */
.video-row .text-dark {
  color: var(--bs-body-color) !important;
}

/* Fix thumbnail placeholder backgrounds */
.video-row .bg-light {
  background-color: var(--bs-secondary-bg) !important;
}

/* Mobile-friendly touch targets */
@media (max-width: 640px) {
  .video-row {
    min-height: 70px !important;
    padding: 1rem !important;
  }
}


/* Video Playlist Improvements */
.video-playlist-item {
  transition: background-color 0.2s ease, transform 0.1s ease;
  border-radius: var(--bs-border-radius);
  padding: 0 !important; /* Remove default padding since we control it inline */
}

.video-playlist-item:hover {
  background-color: var(--bs-tertiary-bg) !important;
  transform: translateX(2px);
}

.current-video {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-left: 3px solid var(--bs-primary);
}

.video-playlist {
  border-radius: var(--bs-border-radius);
}

/* Mobile playlist improvements */
@media (max-width: 640px) {
  .video-playlist-item {
    min-height: 60px !important;
  }

  .video-playlist {
    max-height: 300px !important;
  }
}

/* Navigation Enhancements */
.navbar-brand {
  text-decoration: none;
  color: inherit;
}

.brand-text {
  margin-left: 0.5rem;
  font-weight: 600;
}

.sync-btn .sync-icon {
  transition: transform 0.2s ease;
}

.sync-btn:hover .sync-icon {
  transform: rotate(180deg);
}

/* Top bar styling fixes */
.top-bar {
  padding: 0 1rem;
  min-height: 2.5rem;
}

.top-bar ul {
  background: none;
}

.top-bar .menu li {
  display: flex;
  align-items: center;
}

.top-bar .menu-text {
  padding: 0.5rem 1rem;
  line-height: 1;
}

.top-bar .button {
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

#status-bar {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: auto;
    opacity: 1;
  }
}

.disabled {
  pointer-events: none;
  cursor: not-allowed !important;
}

/* Search box styling */
.input-group-field:disabled {
  background-color: var(--bs-secondary-bg);
  cursor: not-allowed;
}

/* Context breadcrumb styling */
.top-bar .menu-text {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile navigation improvements */
@media (max-width: 640px) {
  .brand-text {
    display: none;
  }
  
  .status-indicators {
    display: none;
  }
  
  .top-bar .menu-text {
    max-width: 200px;
  }
}

/* StepVA colorization classes - REMOVED (redundant, caused double borders) */

/* =================================================================
   PREMIUM CARD STYLES
   ================================================================= */

/* Card hover effect */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* =================================================================
   VIDEO FEEDBACK RATING SYSTEM
   ================================================================= */

/* Interactive Star Rating Input */
.rating-input {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.rating-star {
  cursor: pointer;
  margin: 0;
  display: inline-block;
}

.rating-icon {
  font-size: 1.5rem;
  color: var(--bs-border-color);
  transition: color 0.2s ease;
}

.rating-radio:checked + .rating-icon,
.rating-icon.active {
  color: var(--bs-warning);
}

.rating-icon:hover {
  color: var(--bs-warning);
  opacity: 0.8;
}

/* Star hover effects */
.rating-star:hover .rating-icon,
.rating-star:hover ~ .rating-star .rating-icon {
  color: var(--bs-border-color);
}

.rating-star:hover .rating-icon {
  color: var(--bs-warning);
  opacity: 0.8;
}

/* Display stars in feedback */
.rating-display {
  font-size: 1.2rem;
}

/* Mobile rating improvements */
@media (max-width: 768px) {
  .rating-icon {
    font-size: 1.8rem;
  }
  
  .rating-input {
    gap: 0.5rem;
    justify-content: center;
  }
}

/* =================================================================
   INDUSTRIAL VIDEO PAGE STYLES
   ================================================================= */

/* Context Bar */
.industrial-context-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.step-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.step-counter {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--bs-primary);
}

.step-total {
  color: var(--bs-secondary);
  font-size: 1rem;
}

.status-indicators {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.status-badge, .file-status {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
}

.status-badge.value-added {
  background: var(--bs-success);
  color: white;
}

.status-badge.non-value {
  background: var(--bs-danger);
  color: white;
}

.status-badge.required {
  background: var(--bs-warning);
  color: var(--bs-body-bg);
}

/* Process Title Card - Theme aware */
.process-title-card {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  padding: 1.5rem;
  border-radius: var(--bs-border-radius-lg);
  border-bottom: 2px solid var(--bs-border-color);
  margin-bottom: 1rem;
  box-shadow: var(--bs-box-shadow);
}

.process-name {
  font-size: 1.375rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.process-name i {
  color: var(--bs-primary);
  margin-right: 0.5rem;
}

.process-step {
  color: var(--bs-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
}

/* Video Player Card */
.video-player-card {
  margin-bottom: 1.5rem;
}

.video-player-card .card-body {
  padding: 0 !important; /* Remove padding to eliminate border effect */
}

.industrial-video-frame {
  border-radius: 0; /* Remove border radius for cleaner look */
  overflow: hidden;
  box-shadow: none; /* Remove shadow, video is inside card already */
}

.industrial-video {
  border-radius: 0; /* Remove border radius */
}

/* Missing Video Styles - Theme aware */
.missing-video-frame {
  background: var(--bs-secondary-bg);
  border: 2px dashed var(--bs-danger);
  border-radius: var(--bs-border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.missing-video-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--bs-secondary);
}

.missing-video-content i {
  font-size: 4rem;
  color: var(--bs-danger);
  margin-bottom: 1rem;
}

.missing-video-content h3 {
  color: var(--bs-body-color);
  margin-bottom: 0.5rem;
}

.missing-actions {
  margin-top: 1rem;
}

/* Industrial Navigation Panel - Theme aware */
.industrial-navigation-panel {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: var(--bs-box-shadow);
}

/* Progress Bar - Now using Bootstrap .progress component */

/* Navigation Controls */
.nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem; /* Reduced from 1rem */
}

.industrial-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Add gap between icon and content */
  padding: 0.5rem 0.75rem; /* Even more compact */
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); /* Reduced from 2px */
  border-radius: var(--bs-border-radius);
  text-decoration: none;
  color: var(--bs-body-color);
  font-weight: 500; /* Even less bold */
  transition: all 0.3s ease;
  min-width: auto; /* Remove fixed width - let content determine size */
  box-shadow: var(--bs-box-shadow-sm);
}

.industrial-nav-btn i {
  font-size: 1rem; /* Smaller icons */
}

.industrial-nav-btn:hover:not(.disabled) {
  background: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
  box-shadow: var(--bs-box-shadow-lg);
}

.industrial-nav-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.btn-label {
  font-size: 0.7rem; /* Even smaller */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-subtitle {
  font-size: 0.65rem; /* Even smaller */
  opacity: 0.75;
  margin-top: 0;
}

.nav-center {
  text-align: center;
}

.current-step-badge {
  background: linear-gradient(135deg,
    rgb(var(--bs-primary-rgb)),
    rgba(var(--bs-primary-rgb), 0.8));
  color: white;
  padding: 0.75rem; /* Reduced from 1rem */
  border-radius: 50%;
  width: 60px; /* Reduced from 80px */
  height: 60px; /* Reduced from 80px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bs-box-shadow);
}

/* StepVA Colors for Current Step Badge */
.current-step-badge.current-va {
  background: linear-gradient(135deg,
    rgb(var(--bs-success-rgb)),
    rgba(var(--bs-success-rgb), 0.8));
}

.current-step-badge.current-nva {
  background: linear-gradient(135deg,
    rgb(var(--bs-danger-rgb)),
    rgba(var(--bs-danger-rgb), 0.8));
}

.current-step-badge.current-req {
  background: linear-gradient(135deg,
    rgb(var(--bs-warning-rgb)),
    rgba(var(--bs-warning-rgb), 0.8));
  color: var(--bs-body-bg);
}

.step-number {
  font-size: 1.25rem; /* Reduced from 1.5rem */
  font-weight: bold;
  line-height: 1;
}

.step-label {
  font-size: 0.6rem; /* Reduced from 0.7rem */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 0.15rem; /* Tighter spacing */
}

/* Process Overview Sidebar */
.process-overview-card {
  max-height: 600px;
  overflow: hidden;
}

.process-overview-header {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-bottom: 2px solid var(--bs-border-color);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.process-overview-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.process-count {
  background: var(--bs-primary);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.process-playlist {
  max-height: 500px;
  overflow-y: auto;
  padding: 1rem;
}

/* Process Step Items */
.process-step-item {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.5rem; /* Reduced from 1rem - more compact list */
  transition: all 0.2s ease;
}

/* StepVA Color Coding for Process Steps - Theme aware */
.process-step-item.step-value-added .step-item-content {
  background: rgba(var(--bs-success-rgb), 0.1);
  border-left: 4px solid var(--bs-success);
}

.process-step-item.step-non-value-added .step-item-content {
  background: rgba(var(--bs-danger-rgb), 0.1);
  border-left: 4px solid var(--bs-danger);
}

.process-step-item.step-required .step-item-content {
  background: rgba(var(--bs-warning-rgb), 0.1);
  border-left: 4px solid var(--bs-warning);
}

.step-item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Reduced from 0.75rem */
  padding: 0.5rem; /* Reduced from 0.75rem - more compact */
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); /* Top, right, bottom */
  border-left: 4px solid var(--bs-border-color); /* Default left border (replaced by StepVA colors) */
  border-radius: var(--bs-border-radius);
  transition: all 0.3s ease;
}

.process-step-item:hover .step-item-content {
  border-top-color: var(--bs-primary);
  border-right-color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  /* Keep border-left from StepVA classes */
  box-shadow: var(--bs-box-shadow);
}

.process-step-item.active-step .step-item-content {
  border-top-color: var(--bs-primary);
  border-right-color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  /* Keep border-left from StepVA classes - don't override */
  background: rgba(var(--bs-primary-rgb), 0.05);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* Step Circles - Theme aware */
.step-circle {
  width: 30px; /* Reduced from 35px */
  height: 30px; /* Reduced from 35px */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem; /* Reduced from 0.9rem */
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary);
  border: 2px solid var(--bs-border-color);
  transition: all 0.3s ease;
}

.step-circle.current {
  background: linear-gradient(135deg,
    rgb(var(--bs-primary-rgb)),
    rgba(var(--bs-primary-rgb), 0.8));
  color: white;
  border-color: var(--bs-primary);
}

.step-circle.completed {
  background: var(--bs-success);
  color: white;
  border-color: var(--bs-success);
}

/* StepVA Circle Colors */
.step-circle.va-circle:not(.current) {
  background: var(--bs-success);
  color: white;
  border-color: var(--bs-success);
}

.step-circle.nva-circle:not(.current) {
  background: var(--bs-danger);
  color: white;
  border-color: var(--bs-danger);
}

.step-circle.req-circle:not(.current) {
  background: var(--bs-warning);
  color: var(--bs-body-bg);
  border-color: var(--bs-warning);
}


/* Step Info Content */
.step-info-content {
  flex: 1;
  min-width: 0;
}

.step-title {
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: 0.15rem; /* Tighter spacing */
  line-height: 1.2; /* Tighter line height */
  font-size: 0.85rem; /* Slightly smaller */
}

.step-status-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.step-va-status {
  font-size: 0.65rem; /* Slightly smaller */
  padding: 0.15rem 0.4rem; /* More compact */
  border-radius: 10px; /* Less rounded */
  font-weight: 600; /* Less bold */
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.step-va-status.value-added {
  background: rgba(var(--bs-success-rgb), 0.2);
  color: var(--bs-success);
}

.step-va-status.non-value {
  background: rgba(var(--bs-danger-rgb), 0.2);
  color: var(--bs-danger);
}

.step-va-status.required {
  background: rgba(var(--bs-warning-rgb), 0.2);
  color: var(--bs-warning);
}

/* Play Indicators */
.step-play-indicator {
  color: var(--bs-secondary);
  font-size: 1.2rem;
}

.current-playing {
  color: var(--bs-primary);
}

/* Step Connectors - Theme aware */
.step-connector {
  width: 2px;
  height: 20px;
  background: var(--bs-border-color);
  margin: 0 auto;
  margin-left: 17px;
  transition: background 0.3s ease;
}

.step-connector.completed {
  background: var(--bs-success);
}

/* StepVA Connector Colors */
.step-value-added + .step-value-added .step-connector {
  background: var(--bs-success);
}

.step-non-value-added + .step-non-value-added .step-connector {
  background: var(--bs-danger);
}

.step-required + .step-required .step-connector {
  background: var(--bs-warning);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .industrial-context-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .nav-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .industrial-nav-btn {
    width: 100%;
    justify-content: center;
  }
  
  .current-step-badge {
    width: 60px;
    height: 60px;
  }
  
  .step-number {
    font-size: 1.2rem;
  }
  
  .step-label {
    font-size: 0.6rem;
  }
  
  .process-playlist {
    max-height: 400px;
  }
  
  .step-item-content {
    gap: 0.5rem;
  }
  
  .step-circle {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}