/* ============================================
   Broc Cards - Single Source of Truth
   Applies to ALL cards in ALL contexts
   ============================================ */

/* ===========================================
   CANONICAL ACTION CARD DIMENSIONS
   All action cards must use these exact sizes
   (Drawer cards have separate sizing in card-flip.css)
   =========================================== */

.action-card,
.swipeable-card,
#overview-view .action-card,
.discover-card {
  /* Base size (768px - 1023px) */
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: 336px !important;
  min-height: 336px !important;
  max-height: 336px !important;
  flex-shrink: 0;
}

/* Medium screens */
@media (min-width: 1024px) and (max-width: 1439px) {

  .action-card,
  .swipeable-card,
  #overview-view .action-card,
  .discover-card {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: 364px !important;
    min-height: 364px !important;
    max-height: 364px !important;
  }
}

/* Large screens */
@media (min-width: 1440px) and (max-width: 1919px) {

  .action-card,
  .swipeable-card,
  #overview-view .action-card,
  .discover-card {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 392px !important;
    min-height: 392px !important;
    max-height: 392px !important;
  }
}

/* XL screens */
@media (min-width: 1920px) {

  .action-card,
  .swipeable-card,
  #overview-view .action-card,
  .discover-card {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
}

/* Base container and inner */
.action-card,
.swipeable-card,
#overview-view .action-card,
.flip-card-front .action-card {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: var(--modern-card-background); /* Base solid — no backdrop-filter needed */
  border: 1px solid var(--brokerly-border-subtle);
  box-shadow: 0 8px 32px -2px rgba(0, 0, 0, 0.05); /* Match AI cards */
}

.action-card .card-inner,
.swipeable-card .card-inner,
#overview-view .action-card .card-inner,
.flip-card-front .action-card .card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 20px;
  background: transparent;
  /* Transparent - parent card sets background */
  /* Typographic base scales with viewport */
  font-size: clamp(12px, min(1.8vw, 2.4vh), 16px);
}

/* Header badges */
.action-card .card-header,
.swipeable-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.category-badge {
  color: var(--brokerly-text-secondary);
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.priority-badge {
  color: var(--brokerly-text-secondary);
  border-radius: 999px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Savings */
.savings-label {
  opacity: 0.9;
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.savings-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.savings-amount .currency {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.savings-amount .amount {
  font-size: 48px;
  font-weight: 700;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
}

/* Divider */
.card-divider {
  width: 100%;
  height: 1px;
  opacity: 0.25;
  background: var(--brokerly-text-primary);
  margin: 8px 0;
}

/* Title & description */
.card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  margin: 3px 0 5px;
}

.card-description {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.95;
}

/* Time to complete */
.time-to-complete {
  margin-top: auto;
  display: grid;
  gap: 4px;
}

.time-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.time-value {
  font-size: 13px;
  font-weight: 700;
}

/* Colors - Modern Adaptive Styling (Standardized with Overview) */
.action-card,
.swipeable-card {
  color: var(--brokerly-text-primary) !important;
  background: var(--modern-card-background) !important;
  border: 1px solid var(--brokerly-border-light) !important;
}

/* Left accent strip removed for cleaner look */
.action-card::after,
.swipeable-card::after {
  display: none !important;
}

/* Priority Accent Colors */
.action-card.urgent::after, .swipeable-card.urgent::after { background: #E66152; }
.action-card.high::after, .swipeable-card.high::after { background: #FFD700; }
.action-card.medium::after, .swipeable-card.medium::after { background: #3DB063; }
.action-card.mediumLow::after, .swipeable-card.mediumLow::after { background: #0099D8; }
.action-card.low::after, .swipeable-card.low::after { background: #6B7280; }

/* Badge adjustments for minimal design */
.action-card .priority-badge,
.swipeable-card .priority-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--brokerly-text-secondary) !important;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.action-card.urgent .priority-badge { border-color: rgba(230, 97, 82, 0.3); color: #E66152 !important; }
.action-card.high .priority-badge { border-color: rgba(255, 215, 0, 0.3); color: #D9A621 !important; }
.action-card.medium .priority-badge { border-color: rgba(61, 176, 99, 0.3); color: #3DB063 !important; }

.action-card .category-badge,
.swipeable-card .category-badge {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--brokerly-text-tertiary) !important;
}

/* Text adjustments for readability on light/dark backgrounds */
.action-card .card-title,
.swipeable-card .card-title {
  color: var(--brokerly-text-primary);
}

.action-card .card-description,
.swipeable-card .card-description {
  color: var(--brokerly-text-secondary);
}

.action-card .savings-amount .amount,
.swipeable-card .savings-amount .amount {
  color: var(--brokerly-text-primary);
}

.action-card .savings-label,
.swipeable-card .savings-label {
  color: var(--brokerly-text-tertiary);
}

.action-card.urgent .savings-amount .amount { color: #E66152; }
.action-card.high .savings-amount .amount { color: #D9A621; }
.action-card.medium .savings-amount .amount { color: #3DB063; }

/* Divider should be subtle */
.action-card .card-divider,
.swipeable-card .card-divider {
  background: var(--brokerly-border-light);
  opacity: 0.5;
}

/* Shimmer updates for minimal look */
.action-card .highest-value-highlight::after {
  background: linear-gradient(120deg, transparent 30%, rgba(0, 0, 0, 0.05) 50%, transparent 70%);
}

[data-theme="dark"] .action-card,
[data-theme="dark"] .swipeable-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .action-card .priority-badge,
[data-theme="dark"] .swipeable-card .priority-badge {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* (Removed dedicated comparison background to ensure adherence to 3rd color) */

/* White card tweaks (no longer needed, they are all pastel tinted above var(--modern-card-background)) */

/* Embossed text for gold */
.card-title.embossed {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.8);
}

/* Highest Value Highlight - Shimmer Sweep Animation */
.action-card.highest-value-highlight {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 48px -4px rgba(0, 0, 0, 0.35) !important;
  transform: scale(1.02);
  z-index: 2;
}

.action-card.highest-value-highlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 70%
  );
  transform: translateX(-150%);
  pointer-events: none;
  z-index: 5;
}

.action-card.highest-value-highlight:hover::after,
.action-card.highest-value-highlight:active::after {
  animation: shimmerSweep 2.5s infinite ease-in-out;
}

@keyframes shimmerSweep {
  0% {
    transform: translateX(-150%);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(150%);
  }
}

/* Newly accepted card highlight */
.action-card.newly-accepted {
  animation: newCardHighlight 2s ease-out;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.8),
    0 8px 32px rgba(34, 197, 94, 0.3) !important;
}

@keyframes newCardHighlight {
  0% {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 1),
      0 8px 32px rgba(34, 197, 94, 0.5);
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.9),
      0 8px 32px rgba(34, 197, 94, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.8),
      0 8px 32px rgba(34, 197, 94, 0.3);
  }
}

.action-card.comparison-card {
  background: var(--comparison-gradient) !important;
  border: 1px solid var(--comparison-border) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.action-card.comparison-card::after {
  display: none !important;
}

.action-card.comparison-card .card-inner {
  background: transparent !important;
}

.action-card.comparison-card *:not(.savings-amount):not(.savings-amount *) {
  color: var(--comparison-text-primary) !important;
}

.action-card.comparison-card .savings-amount,
.action-card.comparison-card .savings-amount * {
  color: var(--comparison-savings) !important; 
  text-shadow: none !important;
}

/* ============================================
   ALERT CARD — Warm Coral (Urgent/Deadline)
   ============================================ */

.action-card.alert-card {
  background: var(--alert-bg) !important;
  background-image: var(--alert-gradient) !important;
  border: 1px solid var(--alert-border) !important;
}

.action-card.alert-card::after {
  display: none !important;
}

.action-card.alert-card .card-inner {
  background: transparent !important;
}

.action-card.alert-card .card-title {
  color: var(--alert-text-primary) !important;
}

.action-card.alert-card .card-description {
  color: var(--alert-text-secondary) !important;
}

.action-card.alert-card .category-badge {
  color: var(--alert-accent) !important;
  background: var(--alert-accent-light) !important;
}

.action-card.alert-card .priority-badge {
  color: var(--alert-accent) !important;
  background: var(--alert-accent-light) !important;
  border-color: var(--alert-border) !important;
}

.action-card.alert-card .savings-label,
.action-card.alert-card .time-label {
  color: var(--alert-text-secondary) !important;
}

.action-card.alert-card .savings-amount,
.action-card.alert-card .savings-amount * {
  color: var(--alert-accent) !important;
}

.action-card.alert-card .time-value {
  color: var(--alert-accent) !important;
  font-weight: 800;
}

.action-card.alert-card .card-divider {
  background: var(--alert-border) !important;
}

/* ============================================
   INSIGHT CARD — Fresh Mint (AI Analysis)
   ============================================ */

.action-card.insight-card {
  background: var(--insight-bg) !important;
  background-image: var(--insight-gradient) !important;
  border: 1px solid var(--insight-border) !important;
}

.action-card.insight-card::after {
  display: none !important;
}

.action-card.insight-card .card-inner {
  background: transparent !important;
}

.action-card.insight-card .card-title {
  color: var(--insight-text-primary) !important;
}

.action-card.insight-card .card-description {
  color: var(--insight-text-secondary) !important;
}

.action-card.insight-card .category-badge {
  color: var(--insight-accent) !important;
  background: var(--insight-accent-light) !important;
}

.action-card.insight-card .priority-badge {
  color: var(--insight-accent) !important;
  background: var(--insight-accent-light) !important;
  border-color: var(--insight-border) !important;
}

.action-card.insight-card .savings-label,
.action-card.insight-card .time-label {
  color: var(--insight-text-secondary) !important;
}

.action-card.insight-card .savings-amount,
.action-card.insight-card .savings-amount * {
  color: var(--insight-accent) !important;
}

.action-card.insight-card .time-value {
  color: var(--insight-text-primary) !important;
}

.action-card.insight-card .card-divider {
  background: var(--insight-border) !important;
}

/* ============================================
   QUICK ACTION CARD — Soft Blue (Tasks)
   ============================================ */

.action-card.action-card-quick {
  background: var(--quick-bg) !important;
  background-image: var(--quick-gradient) !important;
  border: 1px solid var(--quick-border) !important;
}

.action-card.action-card-quick::after {
  display: none !important;
}

.action-card.action-card-quick .card-inner {
  background: transparent !important;
}

.action-card.action-card-quick .card-title {
  color: var(--quick-text-primary) !important;
}

.action-card.action-card-quick .card-description {
  color: var(--quick-text-secondary) !important;
}

.action-card.action-card-quick .category-badge {
  color: var(--quick-accent) !important;
  background: var(--quick-accent-light) !important;
}

.action-card.action-card-quick .priority-badge {
  color: var(--quick-accent) !important;
  background: var(--quick-accent-light) !important;
  border-color: var(--quick-border) !important;
}

.action-card.action-card-quick .savings-label,
.action-card.action-card-quick .time-label {
  color: var(--quick-text-secondary) !important;
}

.action-card.action-card-quick .savings-amount,
.action-card.action-card-quick .savings-amount * {
  color: var(--quick-accent) !important;
}

.action-card.action-card-quick .time-value {
  color: var(--quick-text-primary) !important;
}

.action-card.action-card-quick .card-divider {
  background: var(--quick-border) !important;
}

/* Card Priority Color Legend & Accent Borders */
.card-priority-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 8px 0 24px 0;
  padding: 0;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.legend-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* High Priority (Red) */
.legend-item.high-priority {
  color: #E66152;
  border-color: rgba(230, 97, 82, 0.15);
  background: rgba(230, 97, 82, 0.05);
}
.legend-dot.high {
  background-color: #E66152;
  box-shadow: 0 0 10px rgba(230, 97, 82, 0.8);
}
.action-card.high { border-top-color: #E66152 !important; }
.priority-mini-card.high { border-left-color: #E66152 !important; }

/* Medium Priority (Green) */
.legend-item.medium-priority {
  color: #3DB063;
  border-color: rgba(61, 176, 99, 0.15);
  background: rgba(61, 176, 99, 0.05);
}
.legend-dot.medium {
  background-color: #3DB063;
  box-shadow: 0 0 10px rgba(61, 176, 99, 0.8);
}
.action-card.medium { border-top-color: #3DB063 !important; }
.priority-mini-card.medium { border-left-color: #3DB063 !important; }

/* Routine (Blue) */
.legend-item.routine-priority {
  color: #0099D8;
  border-color: rgba(0, 153, 216, 0.15);
  background: rgba(0, 153, 216, 0.05);
}
.legend-dot.low {
  background-color: #0099D8;
  box-shadow: 0 0 10px rgba(0, 153, 216, 0.8);
}
.action-card.low { border-top-color: #0099D8 !important; }
.priority-mini-card.low { border-left-color: #0099D8 !important; }

/* Minimal Priority Accent Borders - Grid Cards */
.action-card {
  border-top-width: 3px !important;
  border-top-style: solid !important;
}

/* Minimal Priority Accent Borders - List Cards */
.priority-mini-card {
  border-left: 4px solid #0099D8 !important; /* fallback */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}