/**
 * Workout History - Base Styles
 * Core layout, cards, tabs, and state UI
 *
 * Component styles are split into separate files:
 * - components/workout-history-sessions.css  : Session list and entries
 * - components/workout-history-exercises.css : Exercise performance
 * - components/workout-history-toolbar.css   : Toolbar, pagination, calendar
 *
 * @version 2.0.0
 */

/* ============================================
   HISTORY CARD STYLING
   ============================================ */

.history-card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  border: 1px solid var(--bs-border-color);
  animation: fadeIn 0.3s ease;
}

.history-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.history-header {
  padding: 1rem;
  background: var(--bs-card-bg);
  border-bottom: 1px solid var(--bs-border-color);
  transition: background-color 0.2s ease;
}

.history-header:hover {
  background: var(--bs-gray-50);
}

.history-header[aria-expanded="true"] {
  background: var(--bs-gray-100);
}

.history-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-icon .avatar-initial {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* ============================================
   COLLAPSE ANIMATION
   ============================================ */

.history-card .collapse {
  transition: height 0.3s ease;
}

.history-card .bx-chevron-down {
  transition: transform 0.3s ease;
  font-size: 1.25rem;
}

.history-card [aria-expanded="true"] .bx-chevron-down {
  transform: rotate(180deg);
}

/* ============================================
   HISTORY TABS
   ============================================ */

.history-tabs {
  border-bottom-color: var(--bs-border-color);
}

.history-tabs .nav-link {
  font-weight: 500;
  color: var(--bs-secondary-color);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.625rem 1rem;
  margin-bottom: -1px;
}

.history-tabs .nav-link:hover {
  color: var(--bs-heading-color);
  border-bottom-color: var(--bs-gray-300);
}

.history-tabs .nav-link.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  background: transparent;
}

.history-tabs .nav-link i {
  font-size: 1.125rem;
  vertical-align: -0.15em;
}

/* History Tabs Wrapper */
.history-tabs-wrapper {
  border-bottom: 1px solid var(--bs-border-color);
}

.history-tabs-wrapper .history-tabs {
  border-bottom: none;
}

/* Tab content - remove outer padding */
#historyTabContent {
  padding: 0;
}

#historyTabContent .tab-pane {
  padding: 0;
}

/* ============================================
   EMPTY/ERROR/LOADING STATES
   ============================================ */

#historyEmptyState i,
#historyErrorState i {
  font-size: 4rem;
  opacity: 0.5;
}

#historyLoadingState .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  font-size: 0.75rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.cursor-pointer {
  cursor: pointer;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 991.98px) {
  .history-header {
    padding: 0.875rem;
  }

  .history-icon {
    width: 36px;
    height: 36px;
  }

  .history-icon .avatar-initial {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
  }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 767.98px) {
  .history-header {
    padding: 0.75rem;
  }

  .history-icon {
    width: 32px;
    height: 32px;
  }

  .history-icon .avatar-initial {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .history-header h6 {
    font-size: 0.875rem;
  }

  .history-header small {
    font-size: 0.75rem;
  }

  .history-tabs .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   DARK MODE
   ============================================ */

[data-bs-theme="dark"] .history-header {
  background-color: var(--bs-gray-900);
}

[data-bs-theme="dark"] .history-header:hover {
  background-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .history-header[aria-expanded="true"] {
  background-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .history-tabs .nav-link:hover {
  border-bottom-color: var(--bs-gray-600);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.history-header:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.history-header:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .history-card {
    border-width: 2px;
  }

  .history-header {
    border-bottom-width: 2px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .history-card,
  .history-header,
  .bx-chevron-down,
  .collapse {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .history-header {
    cursor: default !important;
  }

  .history-card .collapse {
    display: block !important;
    height: auto !important;
  }

  .bx-chevron-down {
    display: none !important;
  }

  .btn {
    display: none !important;
  }

  .history-card {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .history-tabs {
    display: none !important;
  }
}