/**
 * Text Legibility Fixes
 *
 * Fixes identified contrast and readability issues:
 * - Improved font sizes (12px → 13px minimum)
 * - Better contrast ratios for dark theme
 * - Fixed priority badge colors
 * - Reduced opacity issues
 * - Better text colors for secondary elements
 */

/* ===================================
   1. IMPROVE MINIMUM FONT SIZES
   =================================== */

/* Activity Feed - Increase from 12px to 13px */
.activity-item-meta,
.activity-item-time {
  font-size: 0.8125rem !important; /* 13px instead of 12px */
}

/* Kanban Board - Increase from 12px to 13px */
.kanban-ticket-id,
.kanban-ticket-description,
.kanban-ticket-assignee-name,
.kanban-ticket-indicator,
.kanban-quality-gate-label,
.kanban-ticket-activity-item {
  font-size: 0.8125rem !important; /* 13px instead of 12px */
}

/* ===================================
   2. FIX DARK THEME TEXT CONTRAST
   =================================== */

[data-theme="dark"] {
  /* Lighten tertiary text for better contrast */
  --color-text-tertiary: #9ca3af; /* gray-400 instead of gray-500 */
}

/* ===================================
   3. FIX PRIORITY BADGE COLORS
   =================================== */

/* High Priority - White text on solid danger background */
.kanban-ticket-priority[data-priority="high"] {
  background-color: var(--color-danger) !important;
  color: var(--color-white) !important;
  font-weight: 600;
}

/* Medium Priority - Dark text on light warning background */
.kanban-ticket-priority[data-priority="medium"] {
  background-color: #fef3c7 !important; /* amber-100 */
  color: #92400e !important; /* amber-800 */
  font-weight: 600;
}

[data-theme="dark"] .kanban-ticket-priority[data-priority="medium"] {
  background-color: #78350f !important; /* amber-900 */
  color: #fef3c7 !important; /* amber-100 */
}

/* Low Priority - Dark text on light success background */
.kanban-ticket-priority[data-priority="low"] {
  background-color: #d1fae5 !important; /* green-100 */
  color: #065f46 !important; /* green-800 */
  font-weight: 600;
}

[data-theme="dark"] .kanban-ticket-priority[data-priority="low"] {
  background-color: #064e3b !important; /* green-900 */
  color: #d1fae5 !important; /* green-100 */
}

/* ===================================
   4. FIX QUALITY GATE STATUS COLORS
   =================================== */

.kanban-quality-gate-status.passed {
  background-color: var(--color-success) !important;
  color: var(--color-white) !important;
}

.kanban-quality-gate-status.failed {
  background-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}

.kanban-quality-gate-status.pending {
  background-color: #fbbf24 !important; /* amber-400 */
  color: var(--color-gray-900) !important;
}

[data-theme="dark"] .kanban-quality-gate-status.pending {
  background-color: #f59e0b !important; /* amber-500 */
  color: var(--color-gray-900) !important;
}

.kanban-quality-gate-status.skipped {
  background-color: var(--color-gray-300) !important;
  color: var(--color-gray-800) !important;
}

[data-theme="dark"] .kanban-quality-gate-status.skipped {
  background-color: var(--color-gray-600) !important;
  color: var(--color-gray-100) !important;
}

/* ===================================
   5. REDUCE OPACITY ISSUES
   =================================== */

/* Improve disabled form control visibility */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.75 !important; /* 75% instead of 60% */
  cursor: not-allowed;
}

/* Improve disabled button visibility */
.btn:disabled {
  opacity: 0.65 !important; /* 65% instead of 50% */
}

/* Improve form help text visibility */
.form-help {
  opacity: 0.9 !important; /* 90% instead of 80% */
}

/* Reduce loading opacity fade */
#app-view-container.loading {
  opacity: 0.7 !important; /* 70% instead of 60% */
}

.project-card.loading {
  opacity: 0.7 !important; /* 70% instead of 60% */
}

/* Improve dragging visibility */
.kanban-ticket.dragging {
  opacity: 0.7 !important; /* 70% instead of 50% */
}

.kanban-ticket-placeholder {
  opacity: 0.6 !important; /* 60% instead of 50% */
}

/* ===================================
   6. IMPROVE STAT CARD TEXT
   =================================== */

.stat-card-title {
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

.stat-card-change {
  font-size: 0.8125rem !important; /* 13px instead of 12px */
}

/* ===================================
   7. IMPROVE BADGE CONTRAST
   =================================== */

.badge-neutral {
  background-color: var(--color-gray-200) !important;
  color: var(--color-gray-800) !important;
}

[data-theme="dark"] .badge-neutral {
  background-color: var(--color-gray-700) !important;
  color: var(--color-gray-100) !important;
}

/* ===================================
   8. IMPROVE COLUMN COUNT BADGE
   =================================== */

.kanban-column-count {
  background-color: var(--color-gray-300) !important;
  color: var(--color-gray-900) !important;
}

[data-theme="dark"] .kanban-column-count {
  background-color: var(--color-gray-600) !important;
  color: var(--color-gray-100) !important;
}

/* ===================================
   9. IMPROVE TICKET ID VISIBILITY
   =================================== */

.kanban-ticket-id {
  color: var(--color-text-secondary) !important; /* Use secondary instead of tertiary */
  font-weight: 500;
}

/* ===================================
   10. IMPROVE EMPTY/ERROR STATES
   =================================== */

.activity-empty,
.view-loading p,
.view-error p,
.empty-state {
  color: var(--color-text-primary) !important;
  opacity: 0.7;
}

/* ===================================
   11. IMPROVE TOAST MESSAGES
   =================================== */

.toast-message {
  color: var(--color-text-primary) !important;
}

/* ===================================
   12. IMPROVE TAB NAVIGATION
   =================================== */

.tabs-link {
  color: var(--color-text-primary) !important;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.tabs-link:hover {
  opacity: 0.8;
}

.tabs-link.active {
  opacity: 1;
  font-weight: 600;
}

/* ===================================
   13. IMPROVE DEPLOYMENT LABELS
   =================================== */

.deployment-detail-label {
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

/* ===================================
   14. FIX FOOTER SPACING AND DASHBOARD LAYOUT
   =================================== */

/* View container needs to pass through flex layout from app-main */
#app-view-container {
  display: flex;
  flex: 1;
  gap: var(--space-lg);
  min-width: 0;
}

/* Main content should grow to fill space */
#app-view-container .main-content {
  flex: 1;
  min-width: 0;
}

/* Dashboard aside should have fixed width */
#app-view-container .dashboard-aside {
  width: 320px;
  flex-shrink: 0;
}

/* Ensure main area has enough bottom padding */
.app-main {
  padding-bottom: calc(var(--space-xl) * 2) !important;
}

/* Ensure Recent Projects section has proper bottom spacing */
.recent-projects {
  margin-bottom: var(--space-2xl) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  #app-view-container {
    flex-direction: column;
  }

  #app-view-container .dashboard-aside {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .app-main {
    padding-bottom: var(--space-xl) !important;
  }
}