/* ========================================================================== 

   TOWEMADE - COMPONENT STYLES

   Version: 3.0

   Description: Reusable component styles (SkeletonLoader, etc.)

   Date: 2025-01-XX

   ========================================================================== */



/* === SKELETON LOADER === */

.skeleton-loader {

  animation: pulse 1.5s ease-in-out infinite;

}



@keyframes pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.6; }

}



@keyframes shimmer {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



.skeleton-line {

  height: 16px;

  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

  border-radius: var(--radius-sm);

  margin-bottom: var(--spacing-3);

}



.skeleton-line--100 { width: 100%; }

.skeleton-line--90 { width: 90%; }

.skeleton-line--80 { width: 80%; }

.skeleton-line--70 { width: 70%; }

.skeleton-line--60 { width: 60%; }

.skeleton-line--50 { width: 50%; }



.skeleton-block {

  height: 200px;

  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

  border-radius: var(--radius-md);

}



.skeleton-avatar {

  width: 48px;

  height: 48px;

  border-radius: var(--radius-full);

  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

  flex-shrink: 0;

}



.skeleton-card {

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  margin-bottom: var(--spacing-4);

}



.skeleton-card__image {

  height: 180px;

  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);

  background-size: 200% 100%;

  animation: shimmer 1.5s infinite;

}



.skeleton-card__content {

  padding: var(--spacing-4);

}



.skeleton-list-item {

  display: flex;

  gap: var(--spacing-4);

  padding: var(--spacing-4);

  border-bottom: 1px solid var(--border-color);

}



.skeleton-list-item__content {

  flex: 1;

}



/* === MODERN FOOTER === */

.modern-footer {

  background: var(--bg-secondary);

  border-top: 1px solid var(--border-color);

  margin-top: auto;

}



.modern-footer__content {

  padding: var(--spacing-12) var(--spacing-8) var(--spacing-4) var(--spacing-8);

}



.modern-footer__brand {

  font-weight: var(--font-weight-bold);

  color: var(--color-primary);

  margin: 0;

}



.modern-footer__brand-icon {

  vertical-align: middle;

  margin-right: var(--spacing-2);

}



.modern-footer__description {

  color: var(--text-secondary);

}



.modern-footer__social {

  margin-top: var(--spacing-4);

}



.modern-footer__section-title {

  font-weight: var(--font-weight-bold);

  margin-bottom: var(--spacing-2);

}



.modern-footer__link {

  display: block;

  padding: var(--spacing-1) 0;

}



.modern-footer__divider {

  border: 0;

  border-top: 1px solid var(--border-color);

  width: 100%;

  margin: 0;

}



.modern-footer__copyright,

.modern-footer__credits {

  color: var(--text-secondary);

}



@media (max-width: 768px) {

  .modern-footer__content {

    padding: var(--spacing-8) var(--spacing-4) var(--spacing-4) var(--spacing-4);

  }

}



/* === ONBOARDING TUTORIAL === */

.onboarding-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.6);

  z-index: var(--z-index-modal);

  backdrop-filter: blur(2px);

}



.onboarding-spotlight {

  position: absolute;

  border: 3px solid var(--color-primary);

  border-radius: var(--radius-md);

  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);

  pointer-events: none;

  transition: all var(--transition-base);

  z-index: calc(var(--z-index-modal) + 1);

}



.onboarding-tooltip {

  position: absolute;

  background: var(--bg-elevated);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-2xl);

  max-width: 400px;

  z-index: calc(var(--z-index-modal) + 2);

  transition: all var(--transition-base);

}



.onboarding-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: var(--spacing-5) var(--spacing-5) var(--spacing-3);

  border-bottom: 1px solid var(--border-color);

}



.onboarding-header__title {

  margin: 0;

  font-size: var(--font-size-lg);

  font-weight: var(--font-weight-semibold);

}



.onboarding-close {

  background: none;

  border: none;

  cursor: pointer;

  padding: var(--spacing-1);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-sm);

  transition: background var(--transition-fast);

  color: var(--text-secondary);

}



.onboarding-close:hover {

  background: var(--bg-hover);

}



.onboarding-body {

  padding: var(--spacing-5);

}



.onboarding-body p {

  margin: 0;

  color: var(--text-secondary);

  line-height: var(--line-height-relaxed);

}



.onboarding-footer {

  padding: var(--spacing-3) var(--spacing-5) var(--spacing-5);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.onboarding-progress {

  display: flex;

  gap: var(--spacing-2);

}



.onboarding-progress__dot {

  width: 8px;

  height: 8px;

  border-radius: var(--radius-full);

  background: var(--color-gray-300);

  transition: all var(--transition-base);

}



.onboarding-progress__dot--active {

  background: var(--color-primary);

  width: 24px;

  border-radius: var(--radius-sm);

}



.onboarding-actions {

  display: flex;

  gap: var(--spacing-2);

}



/* === WEB DASHBOARD === */

.web-dashboard {

  max-width: 1400px;

  margin: 0 auto;

}



.web-dashboard__banner {

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: var(--text-inverse);

  padding: var(--spacing-8) !important;

}



.web-dashboard__avatar {

  width: 80px;

  height: 80px;

  border-radius: var(--radius-full);

}



.web-dashboard__avatar--placeholder {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(7, 19, 26, 0.22);

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: var(--text-inverse);

  font-family: var(--font-family-headings);

  font-size: 1.75rem;

  font-weight: var(--font-weight-semibold);

}



.text-inverse {

  color: var(--text-inverse) !important;

}



.text-inverse-secondary {

  color: rgba(255, 255, 255, 0.8) !important;

}



.stats-card {

  transition: transform var(--transition-fast), box-shadow var(--transition-fast);

}



.stats-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



.stats-card--primary {

  border-left: 4px solid var(--color-primary);

}



.stats-card--info {

  border-left: 4px solid var(--color-info);

}



.stats-card--success {

  border-left: 4px solid var(--color-success);

}



.stats-card--warning {

  border-left: 4px solid var(--color-warning);

}



.stats-card__bg-icon {

  font-size: 3rem;

  opacity: 0.3;

}



.stats-card__trend-icon {

  font-size: 0.875rem;

}



.rank-badge {

  font-size: 1.2rem;

  padding: var(--spacing-2);

}



.org-item {

  cursor: pointer;

  transition: all var(--transition-fast);

}



.org-item:hover {

  transform: translateX(4px);

  box-shadow: var(--shadow-md);

}



.org-item__icon {

  font-size: 2rem;

  color: var(--color-primary);

}



.activity-icon {

  color: var(--color-primary);

}



.achievement-card {

  width: 150px;

  text-align: center;

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: var(--text-inverse);

}



.achievement-card__icon {

  font-size: 3rem;

  margin-bottom: var(--spacing-2);

}



@media (max-width: 768px) {

  .web-dashboard__banner {

    padding: var(--spacing-4) !important;

  }

  

  .stats-card {

    margin-bottom: var(--spacing-4);

  }

}



/* === CIVIC DASHBOARD / DIRECTORY / LEADERBOARD === */

.web-dashboard .rz-card,

.web-organizations-page .rz-card,

.leaderboard-page .rz-card {

  background: rgba(8, 21, 28, 0.78);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: var(--radius-2xl);

  box-shadow: var(--shadow-md);

}



.web-dashboard__banner {

  background:

    linear-gradient(145deg, rgba(212, 169, 93, 0.18), rgba(120, 213, 255, 0.08)),

    rgba(8, 21, 28, 0.92) !important;

  border: 1px solid rgba(212, 169, 93, 0.2) !important;

  border-radius: 30px !important;

  box-shadow: var(--shadow-xl);

}



.web-dashboard__banner .rz-button {

  border-radius: 999px !important;

}



.web-dashboard .rz-selectbar {

  padding: 0.35rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

}



.web-dashboard .rz-selectbar .rz-button {

  border-radius: 999px !important;

}



.stats-card {

  min-height: 220px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-left-width: 1px;

  border-radius: 28px !important;

  background: rgba(7, 19, 26, 0.82);

}



.stats-card--primary,

.stats-card--info,

.stats-card--success,

.stats-card--warning {

  border-left: 1px solid rgba(255, 255, 255, 0.06);

}



.stats-card--primary {

  box-shadow: inset 0 0 0 1px rgba(212, 169, 93, 0.18);

}



.stats-card--info {

  box-shadow: inset 0 0 0 1px rgba(120, 213, 255, 0.16);

}



.stats-card--success {

  box-shadow: inset 0 0 0 1px rgba(98, 208, 168, 0.18);

}



.stats-card--warning {

  box-shadow: inset 0 0 0 1px rgba(240, 106, 94, 0.18);

}



.stats-card__bg-icon {

  color: rgba(255, 255, 255, 0.1);

}



.rank-badge {

  border-radius: 18px !important;

}



.org-item,

.web-organizations-page .org-card,

.web-organizations-page .list-card {

  border-radius: 24px !important;

  background: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow: none;

}



.web-organizations-page .rz-row:first-child,

.leaderboard-page .modern-page-header {

  padding: 1.5rem 0;

}



.web-organizations-page .rz-textbox,

.web-organizations-page .rz-dropdown,

.leaderboard-page .rz-dropdown {

  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

}



.web-organizations-page .rz-selectbutton {

  width: 100%;

}



.web-organizations-page .rz-selectbutton .rz-button {

  border-radius: 999px !important;

}



.web-organizations-page .org-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}



.web-organizations-page .org-card {

  min-height: 260px;

}



.leaderboard-page .podium-card {

  border-radius: 30px !important;

  padding: 2rem 1.25rem 1.5rem;

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),

    rgba(8, 21, 28, 0.82) !important;

  border: 1px solid rgba(255, 255, 255, 0.07);

}



.leaderboard-page .podium-card.gold {

  box-shadow: inset 0 0 0 1px rgba(212, 169, 93, 0.22), var(--shadow-lg);

}



.leaderboard-page .podium-card.silver {

  box-shadow: inset 0 0 0 1px rgba(120, 213, 255, 0.18), var(--shadow-md);

}



.leaderboard-page .podium-card.bronze {

  box-shadow: inset 0 0 0 1px rgba(240, 106, 94, 0.18), var(--shadow-md);

}



.leaderboard-page .rz-datagrid {

  background: transparent;

  border: none;

}



.leaderboard-page .rz-datagrid-table td,

.leaderboard-page .rz-datagrid-table th {

  border-color: rgba(255, 255, 255, 0.06);

  background: transparent;

}



.leaderboard-page .rz-datagrid-table tbody tr:hover {

  background: rgba(255, 255, 255, 0.03);

}



.live-container {

  min-height: calc(100vh - var(--header-height) - 2rem);

  padding: 1.5rem;

  border-radius: 32px;

  border: 1px solid rgba(255, 255, 255, 0.07);

  background:

    radial-gradient(circle at top left, rgba(120, 213, 255, 0.12), transparent 24%),

    radial-gradient(circle at top right, rgba(212, 169, 93, 0.14), transparent 24%),

    linear-gradient(180deg, rgba(8, 19, 26, 0.98), rgba(11, 22, 30, 0.98));

}



.live-header,

.join-card,

.live-task-card {

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(9, 22, 30, 0.76);

  backdrop-filter: blur(16px);

}



.live-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.25rem;

  border-radius: 24px;

}



.logo {

  font-family: var(--font-family-headings);

  font-size: 1.6rem;

}



.live-badge,

.connection-status {

  font: 500 11px/1 "Azeret Mono", monospace;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}



.live-content {

  display: grid;

  grid-template-columns: 360px 1fr;

  gap: 1.25rem;

  margin-top: 1.25rem;

}



.join-card {

  padding: 1.5rem;

  border-radius: 28px;

}



.scenario-title-card {

  margin-top: 1rem;

  padding: 1rem;

  border-radius: 22px;

  background: linear-gradient(135deg, rgba(212, 169, 93, 0.14), rgba(120, 213, 255, 0.06));

}



.tasks-scroll {

  display: grid;

  gap: 1rem;

}



.live-task-card {

  padding: 1.25rem;

  border-radius: 26px;

}



.live-option {

  padding: 0.85rem 0;

}



.opt-bar-bg {

  margin-top: 0.5rem;

  height: 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

}



@media (max-width: 1180px) {

  .web-organizations-page .org-grid,

  .live-content {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .stats-card {

    min-height: auto;

  }



  .leaderboard-page .podium-item {

    margin-bottom: 1rem;

  }

}



/* === MESSAGES PAGE === */

.messages-page {

  height: calc(100vh - var(--header-height) - 2rem);

  display: flex;

  flex-direction: column;

}



.messages-container {

  display: flex;

  height: 100%;

  overflow: hidden;

  border-radius: var(--radius-lg);

  background-color: var(--bg-elevated);

  box-shadow: var(--shadow-md);

}



.messages-sidebar {

  width: 100%;

  max-width: 360px;

  border-right: 1px solid var(--border-color);

  overflow-y: auto;

  display: flex;

  flex-direction: column;

}



.messages-chat {

  flex: 1;

  display: flex;

  flex-direction: column;

  height: 100%;

}



.messages-chat-header {

  padding: var(--spacing-4);

  border-bottom: 1px solid var(--border-color);

}



.messages-chat-body {

  flex: 1;

  overflow-y: auto;

  padding: var(--spacing-4);

  background-color: var(--bg-secondary);

}



.messages-chat-input {

  padding: var(--spacing-4);

  border-top: 1px solid var(--border-color);

  background-color: var(--bg-elevated);

}



/* === CONVERSATION CARDS === */

.conversation-card {

  cursor: pointer;

  transition: all var(--transition-fast);

  margin-bottom: var(--spacing-2);

}



.conversation-card:hover {

  background-color: var(--bg-hover);

}



.conversation-card--active {

  background-color: var(--color-primary-lightest);

  border-left: 4px solid var(--color-primary);

}



.conversation-avatar {

  width: 48px;

  height: 48px;

  border-radius: var(--radius-full);

  object-fit: cover;

  flex-shrink: 0;

}



.conversation-content {

  min-width: 0;

}



.conversation-last-message {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  color: var(--text-secondary);

}



.chat-header-avatar {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  object-fit: cover;

}



/* === MESSAGE BUBBLES === */

.message-bubble {

  display: flex;

  margin-bottom: var(--spacing-3);

}



.message-bubble--own {

  justify-content: flex-end;

}



.message-bubble--received {

  justify-content: flex-start;

}



.message-bubble__content {

  max-width: 70%;

  padding: var(--spacing-3) var(--spacing-4);

  border-radius: var(--radius-lg);

}



.message-bubble--own .message-bubble__content {

  background-color: var(--color-primary);

  color: var(--text-inverse);

  border-top-right-radius: var(--radius-sm);

}



.message-bubble--received .message-bubble__content {

  background-color: var(--bg-tertiary);

  color: var(--text-primary);

  border-top-left-radius: var(--radius-sm);

}



.message-bubble__meta {

  margin-top: var(--spacing-1);

  opacity: 0.8;

}



.message-bubble--own .message-bubble__meta {

  color: var(--text-inverse);

}



.message-bubble--received .message-bubble__meta {

  color: var(--text-secondary);

}



.message-read-icon {

  font-size: 14px;

  margin-left: 4px;

  vertical-align: middle;

}



/* === EMPTY STATES === */

.messages-empty-icon {

  font-size: 48px;

  color: var(--text-secondary);

}



.messages-empty-state-icon {

  font-size: 64px;

  color: var(--text-secondary);

}



.messages-placeholder-icon {

  font-size: 96px;

  color: var(--text-secondary);

}



/* === RESPONSIVE === */

@media (max-width: 768px) {

  .messages-sidebar {

    max-width: 100%;

    border-right: none;

  }

  

  .messages-container {

    flex-direction: column;

  }

}



/* === DARK MODE ADJUSTMENTS === */

[data-theme="dark"] .skeleton-line,

[data-theme="dark"] .skeleton-block,

[data-theme="dark"] .skeleton-avatar,

[data-theme="dark"] .skeleton-card__image {

  background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 50%, var(--color-gray-700) 75%);

  background-size: 200% 100%;

}



[data-theme="dark"] .messages-chat-body {

  background-color: var(--color-gray-800);

}



[data-theme="dark"] .conversation-card--active {

  background-color: var(--color-primary-darker);

}



[data-theme="dark"] .onboarding-progress__dot {

  background: var(--color-gray-600);

}



/* ==========================================================================

   CIVIC ATLAS — PAGE SPECIFIC COMPONENTS (added v4.0)

   ========================================================================== */



/* Dashboard page */

.web-dashboard {

  background: var(--paper);

}



/* Organizations page */

.web-organizations-page {

  background: var(--paper);

}



/* Leaderboard page */

.leaderboard-page {

  background: var(--paper);

}



/* Scenario Live page */

.live-container {

  background: var(--paper);

}



/* Override Radzen card styling globally for atlas look */

.rz-card {

  background: var(--paper) !important;

  border: 1px solid var(--rule) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

}



/* Make Radzen dropdowns and inputs match the atlas style */

.rz-textbox,

.rz-dropdown,

.rz-select-button {

  border-radius: 0 !important;

  border-color: var(--rule-2) !important;

  background: var(--paper) !important;

  color: var(--ink) !important;

  font-family: var(--font-family-base) !important;

}