/**
 * Analytics-Modul Styles
 */

/* Analytics Container */
.analytics {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Header */
.analytics__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.analytics__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Tabs */
.analytics__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
}

.analytics__tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.analytics__tab:hover {
  color: var(--text-primary);
  background: var(--surface-bg);
}

.analytics__tab--active {
  background: var(--color-primary);
  color: white;
}

.analytics__tab--active:hover {
  background: var(--color-primary-hover);
  color: white;
}

/* Content */
.analytics__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Stats Grid */
.analytics__stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.analytics__stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
}

.analytics__stat-card--positive {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.05);
}

.analytics__stat-card--negative {
  border-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.05);
}

.analytics__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--text-xl);
  color: var(--color-primary);
  background: linear-gradient(
    135deg,
    rgba(247, 165, 0, 0.12) 0%,
    rgba(247, 165, 0, 0.06) 100%
  );
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.analytics__stat-card--positive .analytics__stat-icon {
  color: var(--color-success);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.12) 0%,
    rgba(34, 197, 94, 0.06) 100%
  );
}

.analytics__stat-card--negative .analytics__stat-icon {
  color: var(--color-danger);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.12) 0%,
    rgba(239, 68, 68, 0.06) 100%
  );
}

.analytics__stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analytics__stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analytics__stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.analytics__stat-card--positive .analytics__stat-value {
  color: var(--color-success);
}

.analytics__stat-card--negative .analytics__stat-value {
  color: var(--color-danger);
}

/* Sections */
.analytics__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.analytics__section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Extremes */
.analytics__extremes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.analytics__extreme-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
}

.analytics__extreme-card--empty {
  opacity: 0.6;
}

.analytics__extreme-icon {
  font-size: 1.25rem;
}

.analytics__extreme-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analytics__extreme-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.analytics__extreme-value {
  font-weight: 600;
  font-family: var(--font-mono);
}

.analytics__extreme-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Chart Container */
.analytics__chart-container {
  position: relative;
  height: 250px;
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
}

/* Weekday Grid */
.analytics__weekday-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
}

.analytics__weekday-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.analytics__weekday-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.analytics__weekday-bar-container {
  width: 100%;
  max-width: 40px;
  height: 80px;
  background: var(--surface-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.analytics__weekday-bar {
  width: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: height var(--transition-normal);
}

.analytics__weekday-value {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.analytics__weekday-count {
  font-size: 0.625rem;
  color: var(--text-muted);
}

/* Heatmap */
.analytics__heatmap-container {
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 700px;
}

.heatmap__months {
  display: grid;
  grid-template-columns: 30px repeat(53, 1fr);
  gap: 2px;
  font-size: 0.625rem;
  color: var(--text-secondary);
  padding-left: 2px;
}

.heatmap__month {
  text-align: left;
}

.heatmap__grid {
  display: flex;
  gap: var(--space-2);
}

.heatmap__weekdays {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.625rem;
  color: var(--text-secondary);
  width: 20px;
}

.heatmap__weekdays span {
  height: 10px;
  line-height: 10px;
}

.heatmap__weeks {
  display: flex;
  gap: 2px;
}

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

.heatmap__day {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--surface-border);
}

.heatmap__day--level-0 {
  background: var(--surface-border);
}

.heatmap__day--level-1 {
  background: rgba(var(--color-primary-rgb), 0.2);
}

.heatmap__day--level-2 {
  background: rgba(var(--color-primary-rgb), 0.4);
}

.heatmap__day--level-3 {
  background: rgba(var(--color-primary-rgb), 0.6);
}

.heatmap__day--level-4 {
  background: var(--color-primary);
}

.heatmap__day--today {
  outline: 2px solid var(--color-warning);
  outline-offset: 1px;
}

.heatmap__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: 0.625rem;
  color: var(--text-secondary);
}

.heatmap__legend-scale {
  display: flex;
  gap: 2px;
}

/* Trend Comparison */
.analytics__trend-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.analytics__trend-card {
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
}

.analytics__trend-card--previous {
  opacity: 0.8;
}

.analytics__trend-card h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.analytics__trend-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.analytics__trend-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analytics__trend-stat .label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.analytics__trend-stat .value {
  font-family: var(--font-mono);
  font-weight: 600;
}

.analytics__trend-stat .value.positive {
  color: var(--color-success);
}

.analytics__trend-stat .value.negative {
  color: var(--color-danger);
}

.analytics__trend-diff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.analytics__trend-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  font-weight: bold;
}

.analytics__trend-arrow.up {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}

.analytics__trend-arrow.down {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.analytics__trend-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.analytics__trend-change .positive {
  color: var(--color-success);
}

.analytics__trend-change .negative {
  color: var(--color-danger);
}

.analytics__trend-empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-secondary);
}

/* Aggregation (Weekly/Monthly) */
.analytics__aggregation {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.analytics__aggregation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.analytics__aggregation-card {
  padding: var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
}

.analytics__aggregation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.analytics__aggregation-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.analytics__aggregation-range {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.analytics__aggregation-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.analytics__aggregation-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analytics__aggregation-stat .label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.analytics__aggregation-stat .value {
  font-family: var(--font-mono);
  font-weight: 600;
}

.analytics__aggregation-stat .value.positive {
  color: var(--color-success);
}

.analytics__aggregation-stat .value.negative {
  color: var(--color-danger);
}

.analytics__aggregation-stat--highlight {
  padding: var(--space-2);
  background: var(--surface-bg);
  border-radius: var(--radius-sm);
}

.analytics__aggregation-days {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-border);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Empty State */
.analytics__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-8);
  color: var(--text-secondary);
  font-style: italic;
}

/* Pagination */
.analytics__pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

/* Responsive */
@media (max-width: 768px) {
  .analytics__header {
    flex-direction: column;
    align-items: stretch;
  }

  .analytics__tabs {
    justify-content: center;
  }

  .analytics__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics__extremes {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics__trend-comparison {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .analytics__trend-diff {
    flex-direction: row;
    justify-content: center;
  }

  .analytics__aggregation-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics__chart-container {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .analytics__stats-grid {
    grid-template-columns: 1fr;
  }

  .analytics__extremes {
    grid-template-columns: 1fr;
  }

  .analytics__weekday-grid {
    flex-wrap: wrap;
    justify-content: center;
  }

  .analytics__weekday-item {
    flex: 0 0 calc(14.28% - var(--space-2));
  }
}

/* ===== Export Tab Styles ===== */

.analytics__export {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.analytics__export-info {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.analytics__export-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-elevated);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.analytics__export-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.analytics__export-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 200px;
}

.analytics__export-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.analytics__export-field .form-select {
  /* Ensure native dropdown arrow is hidden */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--space-3);
  padding-right: var(--space-10);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  /* Use background shorthand to ensure only ONE arrow is shown */
  background: var(--surface-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right var(--space-3) center;
  background-size: 20px 20px;
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

/* Dark Mode: Helles Icon für export selects */
[data-theme="dark"] .analytics__export-field .form-select {
  background: var(--surface-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right var(--space-3) center;
  background-size: 20px 20px;
}

.analytics__export-field .form-select:hover {
  border-color: var(--color-primary);
}

.analytics__export-field .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(247, 165, 0, 0.15);
}

.analytics__export-field .form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.analytics__export-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.analytics__export-actions .btn {
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.analytics__export-actions .btn--primary {
  background: var(--brand-primary);
  color: white;
}

.analytics__export-actions .btn--primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
}

.analytics__export-actions .btn--primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.analytics__export-hints {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.analytics__export-hints li {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  color: var(--text-secondary);
  line-height: 1.5;
}

.analytics__export-hints li strong {
  color: var(--text-primary);
}

/* ===== Multi-Select User Liste ===== */

.analytics__export-users {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
  overflow: hidden;
}

.analytics__export-users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
}

.analytics__export-users-header label {
  font-weight: 500;
  color: var(--text-primary);
}

.analytics__export-users-actions {
  display: flex;
  gap: var(--space-2);
}

.form-select--small {
  /* Ensure native dropdown arrow is hidden */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-8);
  font-size: 0.8125rem;
  min-width: 140px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* Single arrow via background shorthand */
  background: var(--surface-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right var(--space-2) center;
  background-size: 16px 16px;
}

/* Dark Mode für .form-select--small */
[data-theme="dark"] .form-select--small {
  background: var(--surface-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right var(--space-2) center;
  background-size: 16px 16px;
}

.analytics__export-select-all {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-border);
  background: linear-gradient(
    135deg,
    rgba(247, 165, 0, 0.05) 0%,
    rgba(247, 101, 0, 0.03) 100%
  );
}

.analytics__export-select-all .form-checkbox {
  font-weight: 500;
}

.analytics__export-select-all .text-muted {
  color: var(--text-secondary);
  font-weight: 400;
}

.analytics__export-users-list {
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-2);
}

.analytics__export-user-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.analytics__export-user-item:hover {
  background: var(--surface-hover);
}

.analytics__export-user-item.hidden {
  display: none;
}

.analytics__export-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.analytics__export-user-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics__export-user-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics__export-selection-info {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--surface-border);
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--surface-bg);
}

.analytics__export-selection-info span {
  font-weight: 600;
  color: var(--color-primary);
}

/* Self-Export Badge für Employees */
.analytics__export-self-info {
  padding: var(--space-3) 0;
}

.analytics__export-self-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(247, 165, 0, 0.1) 0%,
    rgba(247, 101, 0, 0.05) 100%
  );
  border: 1px solid rgba(247, 165, 0, 0.2);
  border-radius: var(--radius-full);
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 640px) {
  .analytics__export-row {
    flex-direction: column;
  }

  .analytics__export-field {
    min-width: 100%;
  }

  .analytics__export-users-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .analytics__export-users-list {
    max-height: 220px;
  }
}