/*
 * Shared component styles.
 * Reusable components used across multiple templates.
 */

/* =============================================================================
   Modern Card Styles
   ============================================================================= */

.card-modern {
  background: var(--card-bg, white);
  border: 1px solid var(--border-color, #e3e8f0);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast, 0.15s ease-in-out),
              transform var(--transition-fast, 0.15s ease-in-out);
}

.card-modern:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-header-custom {
  background: var(--card-bg, white);
  border-bottom: 1px solid var(--border-color, #e3e8f0);
  border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0 !important;
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-header-custom .bi {
  color: var(--primary-color, #2563EB);
  font-size: 0.95rem;
  opacity: 0.85;
}

/* =============================================================================
   Modern Table Styles
   ============================================================================= */

.table-modern {
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

.table-modern th {
  border-top: none;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.table-modern tbody tr {
  transition: background-color var(--transition-fast, 0.15s ease-in-out);
}

.table-modern tbody tr:hover {
  background-color: var(--surface-light, #f1f5fb);
}

.table-modern td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.table-borderless-modern td {
  padding: 0.75rem 0.5rem;
  border: none;
  font-size: 0.9rem;
}

.table-borderless-modern td:first-child {
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  width: 40%;
}

/* =============================================================================
   Soft Badge System
   ============================================================================= */

.badge-soft {
  font-weight: 500;
  font-size: 0.72em;
  padding: 0.3em 0.65em;
  border-radius: var(--radius-sm, 0.375rem);
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Light mode */
.badge-soft-success {
  background-color: rgba(22, 163, 74, 0.11);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.2);
}

.badge-soft-danger {
  background-color: rgba(220, 38, 38, 0.10);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.2);
}

.badge-soft-warning {
  background-color: rgba(217, 119, 6, 0.11);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.2);
}

.badge-soft-neutral {
  background-color: rgba(100, 116, 139, 0.10);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.18);
}

.badge-soft-info {
  background-color: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}

/* Dark mode badge overrides */
[data-theme="dark"] .badge-soft-success {
  background-color: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.22);
}

[data-theme="dark"] .badge-soft-danger {
  background-color: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.22);
}

[data-theme="dark"] .badge-soft-warning {
  background-color: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.22);
}

[data-theme="dark"] .badge-soft-neutral {
  background-color: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .badge-soft-info {
  background-color: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.22);
}

/* =============================================================================
   Dashboard Header
   ============================================================================= */

.dashboard-header {
  background: transparent;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
}

.dashboard-header h1,
.dashboard-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  letter-spacing: -0.02em;
}

.dashboard-header p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.dashboard-header .bi {
  color: var(--primary-color, #2563EB);
}

/* =============================================================================
   Chart Container
   ============================================================================= */

.chart-container-modern {
  background: var(--card-bg, white);
  border-radius: var(--radius-md, 0.5rem);
  padding: 1rem;
  margin: 0.5rem 0;
}

/* =============================================================================
   Status and Metric Indicators
   ============================================================================= */

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.metric-value {
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.section-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}

/* =============================================================================
   Rider Header
   ============================================================================= */

.rider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.rider-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* =============================================================================
   Modal Styles
   ============================================================================= */

.modal-modern .modal-content {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background-color: var(--card-bg);
}

.modal-header-modern {
  background: var(--card-bg, white);
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-header-modern .modal-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.modal-header-modern .modal-title .bi {
  color: var(--primary-color, #2563EB);
  margin-right: 0.4rem;
}

/* Override Bootstrap's default close button in modal header */
.modal-header-modern .btn-close {
  filter: none;
  opacity: 0.5;
}

[data-theme="dark"] .modal-header-modern .btn-close {
  filter: invert(1);
  opacity: 0.6;
}

.modal-body-modern {
  padding: 1.5rem;
  background-color: var(--surface-light, #f1f5fb);
  color: var(--text-primary, #1e293b);
}

.modal-footer-modern {
  background-color: var(--surface-light, #f1f5fb);
  border-top: 1px solid var(--border-color, #e3e8f0);
  padding: 1rem 1.5rem;
}

/* Modal table styles */
.modal-modern .table-borderless-modern td {
  padding: 0.875rem 1.25rem;
  border: none;
  border-bottom: 1px solid var(--border-color, #e3e8f0);
  vertical-align: middle;
}

.modal-modern .table-borderless-modern tbody tr:last-child td {
  border-bottom: none;
}

.info-label-cell {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
  width: 40%;
  /* Must stay a real table cell. display:flex takes the td out of table layout —
     the browser wraps it in an anonymous cell that shrink-wraps to the content —
     so the width above is ignored and long labels wrap to four lines on narrow
     screens. The icon aligns via vertical-align instead. */
  display: table-cell;
  vertical-align: middle;
}

.info-label-cell .bi {
  vertical-align: -0.125em;
}

.info-value-cell {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  width: 60%;
}

.info-value-cell .badge,
.info-value-cell .badge-soft {
  font-size: 0.8125rem;
}

/* Performance comparison styles */
.performance-delta {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.performance-reference {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}

/* Section ranking styles */
.ranking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem 0.625rem;
  font-variant-numeric: tabular-nums;
}

.ranking-rank {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.ranking-total {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
}

.ranking-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1.25rem 0.875rem;
}

.ranking-bar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--success-color, #16a34a),
    var(--warning-color, #f59e0b),
    var(--danger-color, #dc2626)
  );
  opacity: 0.85;
}

.ranking-bar-marker {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background-color: var(--text-primary, #1e293b);
  box-shadow: 0 0 0 2px var(--card-bg, white);
}

.ranking-bar-bound {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.modal-modern .ranking-table td {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.ranking-rank-cell {
  width: 15%;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}

.ranking-time-cell {
  width: 27%;
}

.ranking-date-cell {
  width: 33%;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}

.ranking-delta-cell {
  width: 25%;
  text-align: right;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
}

.modal-modern .ranking-table tr.ranking-row-current td {
  background-color: var(--surface-light, #f1f5fb);
}

.modal-modern .ranking-table tr.ranking-row-current td:first-child {
  box-shadow: inset 3px 0 0 0 var(--primary-color, #2563eb);
  color: var(--primary-color, #2563eb);
}

/* Modal loading state */
#modalLoadingSpinner {
  background: var(--card-bg, white);
  border-radius: var(--radius-md, 0.5rem);
  margin: 1rem;
  padding: 2rem;
}

/* Progress bar no transition for immediate updates */
#holdProgress .progress-bar {
  transition: none !important;
}

/* =============================================================================
   Modal Mobile Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .modal-lg {
    max-width: 95%;
    margin: 0.5rem auto;
  }

  .modal-body-modern {
    padding: 1rem;
  }

  .modal-header-modern {
    padding: 1rem 1.25rem;
  }

  .modal-footer-modern {
    padding: 0.75rem 1.25rem;
  }

  .modal-header-modern .modal-title {
    font-size: 0.9375rem;
  }

  .modal-modern .table-borderless-modern td {
    padding: 0.75rem 1rem;
  }

  /* Pin the column widths below rather than leaving them as hints, so the value
     column's unbreakable timestamps can't win the negotiation and squeeze the
     labels. The ranking table sizes its own columns and is left alone. */
  .modal-modern .table-borderless-modern:not(.ranking-table) {
    table-layout: fixed;
  }

  .info-label-cell {
    font-size: 0.75rem;
    width: 45%;
  }

  .info-value-cell {
    font-size: 0.875rem;
    width: 55%;
    /* Fixed layout won't shrink to fit, so let a long unbroken value wrap
       rather than spill out of its cell. */
    overflow-wrap: break-word;
  }

  /* Enlarge the tap target to 44px without scaling the icon. border-box keeps
     Bootstrap's own padding inside the 44px rather than adding to it. */
  .modal-header-modern .btn-close {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    background-position: center;
  }

  .performance-delta {
    font-size: 1rem;
  }

  .performance-reference {
    font-size: 0.7rem;
  }

  .ranking-summary,
  .ranking-bar-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ranking-rank {
    font-size: 1rem;
  }

  .modal-modern .ranking-table td {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  /* The delta column is the first thing to go when the window gets cramped */
  .ranking-date-cell {
    width: 45%;
  }

  .ranking-delta-cell {
    display: none;
  }

  .card-header-custom {
    padding: 0.75rem 1rem;
  }
}

/* =============================================================================
   Dark Mode Bootstrap Overrides
   ============================================================================= */

[data-theme="dark"] .table {
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-lighter);
  color: var(--text-primary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--surface-lighter);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--surface-lighter);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .form-floating > label {
  color: var(--text-secondary);
}

[data-theme="dark"] .badge.bg-light {
  background-color: var(--surface-lighter) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--surface-lighter) !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}

[data-theme="dark"] .alert-warning .btn-outline-warning {
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

[data-theme="dark"] .alert-warning .btn-outline-warning:hover {
  background-color: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
  color: #fbbf24;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .section-badge.inactive {
  background: var(--surface-lighter);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .section-badge.active {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.3);
}

/* Card header in dark mode */
[data-theme="dark"] .card-header-custom {
  background: var(--card-bg);
  border-bottom-color: var(--border-color);
}