/* ==========================================================================
   Card Components - BEM Naming
   ========================================================================== */

/* ========================================================================
   Base Card - FastRetro Neo-Brutalist Style
   ======================================================================== */
.card {
  background-color: var(--color-surface-solid);
  border: var(--border-retro) solid var(--color-shadow-light);
  border-radius: var(--radius-retro-lg);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-light);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-light);
}

/* Card that shouldn't have hover effect */
.card--static {
  transition: none;
}

.card--static:hover {
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-light);
  transform: none;
}

/* Dark mode cards - VISIBLE colored shadows */
.dark .card,
html.dark .card {
  background-color: oklch(22% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default);
}

.dark .card:hover,
html.dark .card:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-default);
}

.dark .card--static:hover,
html.dark .card--static:hover {
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default);
}

/* ========================================================================
   Card Color Variants
   ======================================================================== */

/* Pink theme - FastRetro style */
.card--pink {
  background: linear-gradient(135deg, var(--color-pastel-pink), oklch(96% 0.06 350));
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) oklch(55% 0.15 350);
}

.card--pink:hover {
  box-shadow: var(--shadow-retro-xl) oklch(55% 0.15 350);
}

.dark .card--pink,
html.dark .card--pink {
  background: linear-gradient(135deg, oklch(30% 0.08 350), oklch(25% 0.06 350));
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-pink);
}

.dark .card--pink:hover,
html.dark .card--pink:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-pink);
}

/* Sky theme - FastRetro style */
.card--sky {
  background: linear-gradient(135deg, var(--color-pastel-blue), oklch(96% 0.04 230));
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) oklch(45% 0.12 230);
}

.card--sky:hover {
  box-shadow: var(--shadow-retro-xl) oklch(45% 0.12 230);
}

.dark .card--sky,
html.dark .card--sky {
  background: linear-gradient(135deg, oklch(30% 0.06 230), oklch(25% 0.05 230));
  border-color: var(--color-border-dark-sky);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-sky);
}

.dark .card--sky:hover,
html.dark .card--sky:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-sky);
}

/* Amber theme - FastRetro style */
.card--amber {
  background: linear-gradient(135deg, var(--color-pastel-yellow), oklch(96% 0.05 95));
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) oklch(55% 0.14 85);
}

.card--amber:hover {
  box-shadow: var(--shadow-retro-xl) oklch(55% 0.14 85);
}

.dark .card--amber,
html.dark .card--amber {
  background: linear-gradient(135deg, oklch(32% 0.06 85), oklch(27% 0.05 85));
  border-color: var(--color-border-dark-amber);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-amber);
}

.dark .card--amber:hover,
html.dark .card--amber:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-amber);
}

/* ========================================================================
   Card Sizes & Spacing
   ======================================================================== */

/* Padding variants */
.card--padded {
  padding: var(--space-lg);
}

.card--padded-sm {
  padding: var(--space-md);
}

.card--padded-lg {
  padding: var(--space-xl);
}

/* Compact */
.card--compact {
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
}

/* No padding (content handles its own) */
.card--flush {
  padding: 0;
}

/* ========================================================================
   Card Shape Variants
   ======================================================================== */

/* More rounded */
.card--rounded-xl {
  border-radius: var(--radius-xl);
}

.card--rounded-3xl {
  border-radius: var(--radius-3xl);
}

/* Less rounded */
.card--rounded-md {
  border-radius: var(--radius-md);
}

/* Flat (minimal shadow) - FastRetro small shadow version */
.card--flat {
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
}

.card--flat:hover {
  box-shadow: var(--shadow-retro) var(--color-shadow-light);
  transform: translate(-1px, -1px);
}

.dark .card--flat,
html.dark .card--flat {
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-default);
}

.dark .card--flat:hover,
html.dark .card--flat:hover {
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
}

/* ========================================================================
   Card Structure
   ======================================================================== */
.card__header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.card__body {
  padding: var(--space-lg);
}

.card__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* When card has no padding, use these */
.card--flush .card__header {
  padding: var(--space-md) var(--space-lg);
}

.card--flush .card__body {
  padding: var(--space-lg);
}

.card--flush .card__footer {
  padding: var(--space-md) var(--space-lg);
}

/* ========================================================================
   Card Title & Content
   ======================================================================== */
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-ink);
  margin: 0;
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-xs);
}

.card__text {
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

/* ========================================================================
   Interactive Cards (clickable)
   ======================================================================== */
.card--interactive {
  cursor: pointer;
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Link card */
a.card {
  text-decoration: none;
  color: inherit;
}

a.card:hover {
  text-decoration: none;
}

/* ========================================================================
   Card with Image
   ======================================================================== */
.card__image {
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  margin: -2px -2px 0 -2px; /* Compensate for border */
}

.card__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Image at bottom */
.card__image--bottom {
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  margin: 0 -2px -2px -2px;
}

/* ========================================================================
   Stacked Cards
   ======================================================================== */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card-stack--sm {
  gap: var(--space-sm);
}

.card-stack--lg {
  gap: var(--space-lg);
}

/* ========================================================================
   Legacy Aliases (Tailwind-style class names)
   For backward compatibility with existing views
   ======================================================================== */

/* card-modern = card (FastRetro style) */
.card-modern {
  background-color: var(--color-surface-solid);
  border: var(--border-retro) solid var(--color-shadow-light);
  border-radius: var(--radius-retro-lg);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-light);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dark .card-modern,
html.dark .card-modern {
  background-color: oklch(22% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-default);
}

.card-modern:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-light);
}

.dark .card-modern:hover,
html.dark .card-modern:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-default);
}

/* card-pink (FastRetro style) */
.card-pink {
  background: linear-gradient(135deg, var(--color-pastel-pink), oklch(96% 0.06 350));
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) oklch(55% 0.15 350);
}

.card-pink:hover {
  box-shadow: var(--shadow-retro-xl) oklch(55% 0.15 350);
}

.dark .card-pink,
html.dark .card-pink {
  background: linear-gradient(135deg, oklch(30% 0.08 350), oklch(25% 0.06 350));
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-pink);
}

.dark .card-pink:hover,
html.dark .card-pink:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-pink);
}

/* card-sky (FastRetro style) */
.card-sky {
  background: linear-gradient(135deg, var(--color-pastel-blue), oklch(96% 0.04 230));
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-lg) oklch(45% 0.12 230);
}

.card-sky:hover {
  box-shadow: var(--shadow-retro-xl) oklch(45% 0.12 230);
}

.dark .card-sky,
html.dark .card-sky {
  background: linear-gradient(135deg, oklch(30% 0.06 230), oklch(25% 0.05 230));
  border-color: var(--color-border-dark-sky);
  box-shadow: var(--shadow-retro-lg) var(--color-shadow-dark-sky);
}

.dark .card-sky:hover,
html.dark .card-sky:hover {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-sky);
}

/* ==========================================================================
   Day Card Component
   ========================================================================== */

.day-card {
  cursor: pointer;
}

.day-card:hover:not(.day-card--expanded) .day-card__inner {
  border-color: var(--color-amber-400);
}

.day-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.day-card__inner {
  max-width: 95%;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.98), oklch(98% 0.01 95 / 0.95));
  border: var(--border-retro) solid var(--color-shadow-light);
  border-radius: var(--radius-retro);
  box-shadow: var(--shadow-retro) var(--color-shadow-light);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease;
}

@media (min-width: 768px) {
  .day-card__inner {
    max-width: 85%;
    padding: var(--space-md);
  }
}

.dark .day-card__inner,
html.dark .day-card__inner {
  background: linear-gradient(135deg, oklch(25% 0.02 250 / 0.98), oklch(20% 0.02 250 / 0.95));
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
}

.day-card:hover .day-card__inner {
  border-color: var(--color-amber-400);
}

.dark .day-card:hover .day-card__inner,
html.dark .day-card:hover .day-card__inner {
  border-color: var(--color-amber-500);
}

.day-card__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-card__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.day-card__date-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-retro-sm);
  background: var(--gradient-retro-rainbow);
  color: var(--color-shadow-light);
  font-weight: var(--font-black);
  font-size: var(--text-lg);
  border: var(--border-retro) solid var(--color-shadow-light);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .day-card__date-badge {
    width: 3rem;
    height: 3rem;
    font-size: var(--text-xl);
  }
}

.dark .day-card__date-badge,
html.dark .day-card__date-badge {
  background: linear-gradient(135deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-pink);
}

.day-card__info {
  display: flex;
  flex-direction: column;
}

.day-card__title {
  font-weight: var(--font-black);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  letter-spacing: 0.025em;
}

@media (min-width: 640px) {
  .day-card__title {
    font-size: var(--text-base);
  }
}

.dark .day-card__title,
html.dark .day-card__title {
  color: var(--color-gray-100);
}

.day-card__subtitle {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: 2px;
}

.dark .day-card__subtitle,
html.dark .day-card__subtitle {
  color: var(--color-gray-400);
}

.day-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.day-card__count {
  display: inline-flex;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-pastel-yellow);
  border: 2px solid var(--color-shadow-light);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-light);
}

.dark .day-card__count,
html.dark .day-card__count {
  background-color: oklch(55% 0.14 85);
  border-color: var(--color-border-dark-amber);
  color: oklch(15% 0.02 85);
  box-shadow: var(--shadow-retro-xs) var(--color-shadow-dark-amber);
}

.day-card__action {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
  transition: color var(--transition-fast);
}

.day-card:hover .day-card__action {
  color: var(--color-amber-600);
}

.dark .day-card__action,
html.dark .day-card__action {
  color: var(--color-gray-400);
}

.dark .day-card:hover .day-card__action,
html.dark .day-card:hover .day-card__action {
  color: var(--color-amber-400);
}

/* Day Card Expandable Styles */
.day-card__header {
  cursor: pointer;
}

.day-card__arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-base);
  margin-left: var(--space-xs);
}

.day-card__arrow--up {
  transform: rotate(180deg);
}

/* Messages container - hidden by default */
.day-card__messages {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease,
              opacity 0.25s ease,
              padding 0.3s ease;
  max-width: 95%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .day-card__messages {
    max-width: 85%;
  }
}

.day-card__messages > * {
  overflow: hidden;
}

.day-card__messages--visible {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.dark .day-card__messages--visible,
html.dark .day-card__messages--visible {
  background: oklch(18% 0.02 250);
  border-color: var(--color-slate-600);
}

/* Expanded state */
.day-card--expanded {
  z-index: 2;
}

.day-card--expanded .day-card__inner {
  border-color: var(--color-amber-400);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

.dark .day-card--expanded .day-card__inner,
html.dark .day-card--expanded .day-card__inner {
  border-color: var(--color-amber-500);
}

.day-card--expanded .day-card__messages--visible {
  border-color: var(--color-amber-400);
}

.dark .day-card--expanded .day-card__messages--visible,
html.dark .day-card--expanded .day-card__messages--visible {
  border-color: var(--color-amber-500);
}

/* Collapsing animation */
.day-card--collapsing .day-card__inner {
  transition: all 0.3s ease;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* ==========================================================================
   Message Preview List (for expanded day cards)
   ========================================================================== */

.message-preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.message-preview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.dark .message-preview,
html.dark .message-preview {
  background: oklch(22% 0.02 250);
  border-color: var(--color-slate-600);
}

.message-preview__time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-gray-500);
  font-family: var(--font-mono);
  min-width: 3rem;
}

.dark .message-preview__time,
html.dark .message-preview__time {
  color: var(--color-gray-400);
}

.message-preview__content {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.dark .message-preview__content,
html.dark .message-preview__content {
  color: var(--color-gray-300);
}

/* Empty state inside expanded card */
.day-card__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  color: var(--color-gray-500);
  font-style: italic;
}

.dark .day-card__empty,
html.dark .day-card__empty {
  color: var(--color-gray-400);
}

/* Divider between header and action */
.day-card__action {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Loading state inside expanded card */
.day-card__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  gap: var(--space-sm);
  color: var(--color-gray-500);
}

.dark .day-card__loading,
html.dark .day-card__loading {
  color: var(--color-gray-400);
}

.day-card__loading-dots {
  display: flex;
  gap: var(--space-xs);
}

.day-card__loading-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-amber-400);
  border-radius: 50%;
  animation: dayCardLoadingBounce 1.4s infinite ease-in-out both;
}

.day-card__loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.day-card__loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes dayCardLoadingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Error state inside expanded card */
.day-card__error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  color: var(--color-red-500);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.day-card__error:hover {
  color: var(--color-red-600);
  text-decoration: underline;
}

.dark .day-card__error,
html.dark .day-card__error {
  color: var(--color-red-400);
}

.dark .day-card__error:hover,
html.dark .day-card__error:hover {
  color: var(--color-red-300);
}

/* Focus styles for keyboard accessibility */
.day-card__header:focus {
  outline: none;
}

.day-card__header:focus-visible .day-card__inner {
  outline: 2px solid var(--color-amber-500);
  outline-offset: 2px;
}

.dark .day-card__header:focus-visible .day-card__inner,
html.dark .day-card__header:focus-visible .day-card__inner {
  outline-color: var(--color-amber-400);
}

/* Day card input for renaming */
.day-card__input {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-retro-sm);
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-default);
  width: 100%;
  max-width: 200px;
}

.day-card__input::placeholder {
  color: var(--color-gray-500);
}

.day-card__input:focus {
  outline: none;
  border-color: var(--color-border-default);
  background-color: var(--color-surface-solid);
  padding: 0.2rem 0.4rem;
}

.dark .day-card__input,
html.dark .day-card__input {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-dark-default);
}

.dark .day-card__input:focus,
html.dark .day-card__input:focus {
  border-color: var(--color-border-dark-default);
  background-color: var(--color-surface-dark-solid);
}

.day-card__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.day-card__edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-fast);
  color: var(--color-gray-500);
}

.day-card__title-wrap:hover .day-card__edit-btn,
.day-card:hover .day-card__edit-btn {
  opacity: 1;
}

.day-card__edit-btn:hover {
  background-color: oklch(95% 0.03 220);
  color: oklch(45% 0.12 220);
  border-color: oklch(85% 0.08 220);
}

.dark .day-card__edit-btn:hover,
html.dark .day-card__edit-btn:hover {
  background-color: oklch(30% 0.08 220 / 0.3);
  color: oklch(75% 0.10 220);
  border-color: oklch(50% 0.10 220);
}

.day-card__edit-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .day-card__input {
    max-width: 150px;
  }
}