/* Jira-specific Component Enhancements */

/* Page Layout Improvements */
.main-content {
  background: var(--jira-gray-50);
  min-height: calc(100vh - 64px);
  padding-top: 0; /* Remove any top padding that might cause issues */
}

/* Enhanced Timer Panel */
.timer-panel {
  /* Remove border since the parent card already has one */
  border: none !important;
  box-shadow: none !important;
  /* Add padding to replace card styling */
  padding: 0;
}

/* The outer card that wraps the timer panel keeps its enhanced styling */
.card.timer-panel {
  background: white !important; /* Changed to white background */
  border: 2px solid var(--jira-blue-200) !important;
  box-shadow: var(--jira-shadow-300) !important;
}

.card.timer-panel .card-header {
  background: linear-gradient(135deg, var(--jira-blue-100) 0%, var(--jira-blue-50) 100%) !important;
  border-bottom: 2px solid var(--jira-blue-200) !important;
}

.timer-display {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--jira-blue-600) !important;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(13, 110, 253, 0.1);
}

.timer-controls {
  display: flex;
  gap: var(--jira-space-200);
  justify-content: center;
  margin-top: var(--jira-space-300);
}

.timer-status {
  padding: var(--jira-space-100) var(--jira-space-200);
  border-radius: var(--jira-border-radius-100);
  background: var(--jira-gray-100);
  font-family: monospace;
  font-size: var(--jira-font-size-small);
  color: var(--jira-gray-700);
  border: 1px solid var(--jira-gray-200);
}

/* Navigation and Dropdown Fixes */
.navbar {
  position: relative !important;
  z-index: 1030 !important; /* Ensure navbar is below modals but above content */
}

/* Fix dropdown positioning issues */
.navbar .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1040 !important; /* Higher than navbar but lower than modals */
  margin-top: 0 !important;
  transform: none !important;
  display: none; /* Default hidden state */
}

.navbar .dropdown-menu.show {
  display: block !important;
}

/* Ensure dropdown doesn't interfere with page content */
.navbar .dropdown {
  position: relative !important;
}

/* Fix for Time page specific dropdown issues */
.container-fluid {
  position: relative !important;
  z-index: 1 !important; /* Keep page content below navigation */
}

/* Page header spacing fix */
.page-header {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Sidebar Cards Enhancement */
.sidebar-card {
  transition: all 0.2s ease;
  border: 1px solid var(--jira-gray-200) !important;
}

.sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jira-shadow-300) !important;
}

/* Favorite Items - Restructured with better hierarchy and smaller delete buttons */
.favorite-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--jira-gray-200);
  border-radius: var(--jira-border-radius-100);
  margin-bottom: var(--jira-space-100);
  transition: all 0.2s ease;
  overflow: hidden;
  padding: 0;
}

.favorite-item:last-child {
  margin-bottom: 0;
}

.favorite-item:hover {
  border-color: var(--jira-blue-300);
  box-shadow: var(--jira-shadow-100);
  background: var(--jira-blue-50);
}

.favorite-content {
  flex: 1;
  padding: var(--jira-space-150) var(--jira-space-200);
  cursor: pointer;
  min-width: 0; /* Allow text truncation */
}

.favorite-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.favorite-client {
  font-size: var(--jira-font-size-small);
  font-weight: 600;
  color: var(--jira-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-project {
  font-size: var(--jira-font-size-medium);
  font-weight: 500;
  color: var(--jira-blue-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-phase {
  font-size: var(--jira-font-size-small);
  color: var(--jira-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-delete-btn {
  background: none;
  border: none;
  color: var(--jira-gray-400);
  padding: var(--jira-space-100);
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0 var(--jira-border-radius-100) var(--jira-border-radius-100) 0;
  margin: 4px 4px 4px 0;
}

.favorite-delete-btn:hover {
  background: var(--jira-red-50);
  color: var(--jira-red-600);
}

.favorite-delete-btn:active {
  background: var(--jira-red-100);
  transform: scale(0.95);
}

.favorite-delete-btn i {
  font-size: 12px;
}

.favorite-star {
  color: var(--jira-gray-300);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.favorite-star:hover {
  color: var(--jira-yellow-500);
  transform: scale(1.2);
}

.favorite-star.favorite-active {
  color: var(--jira-yellow-500);
}

/* Favorites list container - prevent overflow */
.favorites-list {
  /* Remove any extra padding since card-body provides it */
  margin: 0;
  padding: 0;
  /* Prevent horizontal scrollbar */
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Ensure card body doesn't create overflow */
.card-body {
  overflow-x: hidden !important;
}

/* TimerPanel dropdown fixes */
.timer-panel .dropdown-menu-searchable {
  position: absolute !important;
  z-index: 1050 !important; /* Higher than navbar dropdowns */
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background: white !important;
  border: 1px solid var(--jira-gray-300) !important;
  border-radius: var(--jira-border-radius-200) !important;
  box-shadow: var(--jira-shadow-300) !important;
  margin-top: 1px !important;
}

/* Ensure timer panel dropdowns don't get cut off */
.timer-panel .position-relative {
  z-index: auto !important;
}

/* Time Entry List */
.time-entry-item {
  padding: var(--jira-space-200);
  border-radius: var(--jira-border-radius-100);
  border: 1px solid var(--jira-gray-200);
  background: white;
  margin-bottom: var(--jira-space-150);
  transition: all 0.1s ease;
}

.time-entry-item:hover {
  background: var(--jira-gray-50);
  border-color: var(--jira-gray-300);
  box-shadow: var(--jira-shadow-100);
}

.time-entry-actions {
  display: flex;
  gap: var(--jira-space-100);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.time-entry-item:hover .time-entry-actions {
  opacity: 1;
}

/* Project Selection Cards */
.project-card {
  border: 2px solid var(--jira-gray-200) !important;
  border-radius: var(--jira-border-radius-200) !important;
  transition: all 0.2s ease;
  cursor: pointer;
  background: white;
}

.project-card:hover {
  border-color: var(--jira-blue-300) !important;
  background: var(--jira-blue-50) !important;
  transform: translateY(-1px);
  box-shadow: var(--jira-shadow-200) !important;
}

.project-card.selected {
  border-color: var(--jira-blue-500) !important;
  background: var(--jira-blue-100) !important;
  box-shadow: 0 0 0 1px var(--jira-blue-500) !important;
}

/* Status Indicators */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--jira-space-100);
}

.status-dot.active {
  background: var(--jira-green-500);
  box-shadow: 0 0 4px var(--jira-green-300);
}

.status-dot.inactive {
  background: var(--jira-gray-400);
}

.status-dot.warning {
  background: var(--jira-yellow-500);
  box-shadow: 0 0 4px var(--jira-yellow-300);
}

.status-dot.error {
  background: var(--jira-red-500);
  box-shadow: 0 0 4px var(--jira-red-300);
}

/* Budget Indicators */
.budget-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--jira-gray-100);
  border: 2px solid var(--jira-gray-200);
  font-size: var(--jira-font-size-small);
  font-weight: 600;
  transition: all 0.2s ease;
}

.budget-indicator.good {
  background: var(--jira-green-100);
  border-color: var(--jira-green-300);
  color: var(--jira-green-700);
}

.budget-indicator.warning {
  background: var(--jira-yellow-100);
  border-color: var(--jira-yellow-300);
  color: var(--jira-yellow-700);
}

.budget-indicator.danger {
  background: var(--jira-red-100);
  border-color: var(--jira-red-300);
  color: var(--jira-red-700);
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: var(--jira-space-600) var(--jira-space-400);
  color: var(--jira-gray-600);
}

.empty-state-icon {
  font-size: 4rem;
  color: var(--jira-gray-300);
  margin-bottom: var(--jira-space-300);
  opacity: 0.7;
}

.empty-state h3 {
  color: var(--jira-gray-700);
  font-weight: 600;
  margin-bottom: var(--jira-space-200);
}

.empty-state p {
  color: var(--jira-gray-600);
  margin-bottom: var(--jira-space-300);
  font-size: var(--jira-font-size-medium);
}

/* Progress Bars */
.progress {
  height: 8px !important;
  background: var(--jira-gray-200) !important;
  border-radius: var(--jira-border-radius-200) !important;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--jira-blue-400) 0%, var(--jira-blue-500) 100%) !important;
  transition: width 0.3s ease !important;
}

.progress-bar.bg-success {
  background: linear-gradient(90deg, var(--jira-green-400) 0%, var(--jira-green-500) 100%) !important;
}

.progress-bar.bg-warning {
  background: linear-gradient(90deg, var(--jira-yellow-400) 0%, var(--jira-yellow-500) 100%) !important;
}

.progress-bar.bg-danger {
  background: linear-gradient(90deg, var(--jira-red-400) 0%, var(--jira-red-500) 100%) !important;
}

/* Loading States */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--jira-border-radius-200);
  z-index: 10;
}

.loading-overlay .spinner-border {
  border-color: var(--jira-blue-200) var(--jira-blue-200) var(--jira-blue-200) var(--jira-blue-500) !important;
}

/* Breadcrumbs Enhancement */
.breadcrumb {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--jira-font-size-small) !important;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: var(--jira-gray-500) !important;
  margin: 0 var(--jira-space-100) !important;
}

.breadcrumb-item a {
  color: var(--jira-gray-600) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.breadcrumb-item a:hover {
  color: var(--jira-blue-600) !important;
}

.breadcrumb-item.active {
  color: var(--jira-gray-800) !important;
  font-weight: 600 !important;
}

/* Subscription Banner */
.subscription-banner {
  background: linear-gradient(135deg, var(--jira-yellow-50) 0%, var(--jira-yellow-100) 100%);
  border: 1px solid var(--jira-yellow-300);
  border-radius: var(--jira-border-radius-200);
  padding: var(--jira-space-200) var(--jira-space-300);
  margin-bottom: var(--jira-space-400);
}

.subscription-banner.premium {
  background: linear-gradient(135deg, var(--jira-blue-50) 0%, var(--jira-blue-100) 100%);
  border-color: var(--jira-blue-300);
}

.subscription-banner.trial {
  background: linear-gradient(135deg, var(--jira-yellow-50) 0%, var(--jira-yellow-100) 100%);
  border-color: var(--jira-yellow-300);
}

.subscription-banner.expired {
  background: linear-gradient(135deg, var(--jira-red-50) 0%, var(--jira-red-100) 100%);
  border-color: var(--jira-red-300);
}

/* Search and Filter Controls */
.search-controls {
  background: white;
  border: 1px solid var(--jira-gray-200);
  border-radius: var(--jira-border-radius-200);
  padding: var(--jira-space-300);
  margin-bottom: var(--jira-space-400);
  box-shadow: var(--jira-shadow-100);
}

/* Data Table Enhancements */
.data-table {
  border: 1px solid var(--jira-gray-200) !important;
  border-radius: var(--jira-border-radius-200) !important;
  overflow: hidden;
}

.data-table thead th {
  background: linear-gradient(135deg, var(--jira-gray-50) 0%, white 100%) !important;
  border-bottom: 2px solid var(--jira-gray-200) !important;
  font-weight: 600 !important;
  color: var(--jira-gray-900) !important;
  padding: var(--jira-space-200) var(--jira-space-300) !important;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

.data-table tbody tr {
  transition: background-color 0.1s ease;
}

.data-table tbody tr:hover {
  background: var(--jira-blue-50) !important;
}

.data-table tbody td {
  padding: var(--jira-space-200) var(--jira-space-300) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--jira-gray-200) !important;
}

/* Action Button Groups */
.action-buttons {
  display: flex;
  gap: var(--jira-space-075);
  align-items: center;
}

.action-buttons .btn {
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--jira-space-075) !important;
}

.action-buttons .btn i {
  margin: 0 !important;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
  .timer-display {
    font-size: 2rem !important;
  }

  .page-title h1 {
    font-size: var(--jira-font-size-xlarge) !important;
  }

  .action-buttons {
    flex-direction: column;
    gap: var(--jira-space-100);
  }

  .action-buttons .btn {
    width: 100%;
    min-width: auto;
    justify-content: flex-start;
  }

  .action-buttons .btn i {
    margin-right: var(--jira-space-100) !important;
  }

  /* Mobile dropdown fixes */
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    background-color: rgba(33, 37, 41, 0.95) !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 576px) {
  .timer-display {
    font-size: 1.75rem !important;
  }

  .data-table {
    font-size: var(--jira-font-size-small) !important;
  }

  .data-table th,
  .data-table td {
    padding: var(--jira-space-150) var(--jira-space-200) !important;
  }
}

/* Animation Classes */
.fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

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

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Focus and accessibility improvements */
.focus-ring:focus {
  outline: 2px solid var(--jira-blue-500) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid var(--jira-gray-800) !important;
  }

  .btn {
    border: 2px solid currentColor !important;
  }

  .card.timer-panel {
    border: 3px solid var(--jira-blue-800) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.quick-actions-header .btn-outline-primary,
.quick-actions-header .btn-outline-secondary {
    border: none !important;
}

.grid-actions .btn-outline-primary,
.grid-actions .btn-outline-secondary,
.grid-actions .btn-outline-danger {
    border: none !important;
}