/**
 * Privacy Option Cards Styles
 * ============================================
 * Visual privacy selection cards with timeline previews
 */

/* Container */
.privacy-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Privacy Option Card */
/* ⭐2026-08-28 ALIGNED TO THE CANONICAL PRIVACY CARD (.privacy-scale-option,
   board-modals.css ~596 — the one New Group, the first-connect prompt and the
   Review Center use). It declares `1.5px solid var(--slate-200)` and
   `var(--radius-md)`; this card declared a 2px border, so the two rendered
   visibly differently for the SAME three visibility levels.
   The radius was already --radius-md on both — the earlier "12 vs 16px"
   reading came from computed values where the token resolved differently by
   context, and the border width was the real divergence.
   Only the chrome moves. The class NAME stays, because the join wizard's own
   lock/selection logic selects on it in four places. */
.privacy-option-card {
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  cursor: pointer;
  background: var(--white);
  transition: all 0.2s ease;
}

.privacy-option-card:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.privacy-option-card.selected {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* Compact Mode */
.privacy-option-card.compact {
  padding: 12px;
}

.privacy-option-card.compact .privacy-card-body {
  display: none;
}

/* Card Header */
.privacy-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Radio Button */
.privacy-card-radio {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.privacy-card-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.privacy-card-radio .radio-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--slate-300);
  border-radius: 50%;
  background: var(--white);
  transition: all 0.2s;
}

.privacy-card-radio input:checked + .radio-custom {
  border-color: var(--primary);
  background: var(--primary);
}

.privacy-card-radio input:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
}

/* Icon */
.privacy-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-100);
  border-radius: 8px;
  flex-shrink: 0;
}

.privacy-card-icon i {
  font-size: 16px;
  color: var(--slate-600);
}

.privacy-option-card.selected .privacy-card-icon {
  background: var(--primary-100);
}

.privacy-option-card.selected .privacy-card-icon i {
  color: var(--primary);
}

/* Title */
.privacy-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.privacy-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-800);
}

.recommended-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-600);
  background: var(--green-100);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card Body */
.privacy-card-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-100);
}

/* Preview Section */
.privacy-preview {
  background: var(--slate-100);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.preview-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  margin-bottom: 10px;
}

/* Timeline Preview */
.preview-timeline {
  position: relative;
}

.preview-times {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.time-label {
  font-size: 10px;
  color: var(--slate-400);
  width: 14%;
  text-align: center;
}

.preview-track {
  position: relative;
  height: 32px;
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.preview-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--slate-400);
  font-style: italic;
  white-space: nowrap;
}

/* Preview Blocks */
.preview-block {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-block.busy {
  background: var(--slate-400);
}

.preview-block.detailed {
  background: var(--primary-400);
}

.block-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--white);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Benefits & Warning */
.privacy-details {
  font-size: 13px;
}

.privacy-details .benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.privacy-details .benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--slate-600);
}

.privacy-details .benefits-list li i {
  color: var(--green-500);
  font-size: 11px;
  margin-top: 3px;
  flex-shrink: 0;
}

.privacy-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--amber-50);
  border-radius: 6px;
  color: var(--amber-700);
  font-size: 12px;
}

.privacy-warning i {
  color: var(--amber-500);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Tooltip Preview (for inline hints) */
.privacy-tooltip-preview {
  width: 280px;
  padding: 12px;
}

.privacy-tooltip-preview .tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.privacy-tooltip-preview .tooltip-header i {
  color: var(--primary);
}

.privacy-tooltip-preview .tooltip-header strong {
  font-size: 14px;
  color: var(--slate-800);
}

.privacy-tooltip-preview .tooltip-desc {
  font-size: 12px;
  color: var(--slate-500);
  margin-bottom: 12px;
}

.privacy-tooltip-preview .preview-timeline {
  background: var(--slate-50);
  border-radius: 6px;
  padding: 8px;
}

/* Responsive */
@media (max-width: 480px) {
  .privacy-option-card {
    padding: 14px;
  }

  .privacy-card-icon {
    width: 32px;
    height: 32px;
  }

  .privacy-card-icon i {
    font-size: 14px;
  }

  .privacy-label {
    font-size: 14px;
  }

  .recommended-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .preview-times {
    display: none;
  }

  .block-label {
    font-size: 8px;
  }
}

/* Dark Mode
   Gate on the app's explicit `body.dark-mode` toggle, not the OS
   `@media (prefers-color-scheme: dark)`. The app is light-only unless the user
   turns dark mode on in-app; the old media query flipped these privacy cards
   dark on a dark-mode OS even while the rest of the app stayed light — most
   visibly in the join wizard's Privacy step. */
body.dark-mode .privacy-option-card {
  background: var(--slate-800);
  border-color: var(--slate-600);
}

body.dark-mode .privacy-option-card:hover {
  border-color: var(--primary-400);
  background: var(--slate-700);
}

body.dark-mode .privacy-option-card.selected {
  border-color: var(--primary);
  background: var(--slate-700);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

body.dark-mode .privacy-card-radio .radio-custom {
  background: var(--slate-700);
  border-color: var(--slate-500);
}

body.dark-mode .privacy-card-icon {
  background: var(--slate-700);
}

body.dark-mode .privacy-card-icon i {
  color: var(--slate-300);
}

body.dark-mode .privacy-label {
  color: var(--slate-100);
}

body.dark-mode .privacy-preview {
  background: var(--slate-700);
}

body.dark-mode .preview-track {
  background: var(--slate-600);
  border-color: var(--slate-500);
}

body.dark-mode .privacy-details .benefits-list li {
  color: var(--slate-300);
}

body.dark-mode .privacy-warning {
  background: var(--amber-900);
  color: var(--amber-200);
}

/* Privacy Mode Inline Indicator (for forms/settings) */
.privacy-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--slate-100);
  border-radius: 6px;
  font-size: 13px;
  color: var(--slate-600);
}

.privacy-mode-indicator i {
  font-size: 12px;
}

.privacy-mode-indicator.mode-busy-only i { color: var(--blue-500); }
.privacy-mode-indicator.mode-full i { color: var(--green-500); }
.privacy-mode-indicator.mode-private i { color: var(--slate-500); }

/* Help Icon with Hover Preview */
.privacy-help-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--slate-500);
  font-size: 10px;
  cursor: help;
  margin-left: 6px;
}

.privacy-help-trigger:hover::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--slate-800);
  margin-bottom: -6px;
}

.privacy-help-trigger:hover .privacy-help-content {
  display: block;
}

.privacy-help-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-800);
  color: var(--white);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.privacy-help-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--slate-800);
}