/* ============================================
   OVERVIEW - RESPONSIVE LAYOUT
   ============================================ */

/* Mobile Layout (default) - Vertical Stack */
#overview-view .view-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  max-width: 800px; /* Constrain width like Money view */
  margin: 0 auto; /* Center the content */
}

/* Mobile: Ensure metric values use compact notation (handled by formatter) */
@media (max-width: 768px) {
  #overview-view .stat-value,
  #overview-view .metric-value {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    line-height: 1.2;
    /* No truncation - formatter handles abbreviation (10K, 100K, 1M) */
  }
  
  #overview-view .quick-stat-card,
  #overview-view .stat-card {
    min-width: 0; /* Allow flex shrinking */
  }
}

/* Ensure header stays at top always */
#overview-view .view-header {
  order: -1; /* Always first, even in grid layouts */
  flex-shrink: 0;
}

/* Left Column - Quick Stats, AI Message, Tenders */
#overview-view .overview-left-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Priority Actions Section */
#overview-view .priority-actions {
  width: 100%;
}

#overview-view .section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--brokerly-text-primary);
  margin-bottom: 16px;
}

/* Priority Card Styling - Same as Actions View */
#overview-view #priority-card {
  width: 100%;
}

#overview-view .action-card {
  /* Width and height come from cards-unified.css canonical sizes */
  background: var(--modern-card-background);
  border-radius: 20px;
  margin: 0 auto; /* Center in container */
  padding: 0; /* No padding on outer card */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#overview-view .action-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Apply ALL the same gradient and styling rules as Actions view */
#overview-view .action-card.urgent {
  background: linear-gradient(135deg,
    #E66152 0%,
    #FF6F61 25%,
    #F26859 50%,
    #D9594A 100%
  );
  color: white;
}

#overview-view .action-card.high {
  background: linear-gradient(135deg,
    #D9A621 0%,
    #FFD700 25%,
    #D9A621 50%,
    #B87A0A 100%
  );
  color: white;
}

#overview-view .action-card.medium {
  background: linear-gradient(135deg,
    #3DB063 0%,
    #50C878 25%,
    #47BD6E 50%,
    #33A358 100%
  );
  color: white;
}

#overview-view .action-card.mediumLow {
  background: linear-gradient(135deg,
    #0099D8 0%,
    #00B4D8 25%,
    #00A8CC 50%,
    #0088BB 100%
  );
  color: white;
}

#overview-view .action-card.low {
  background: linear-gradient(135deg,
    #F5F5F7 0%,
    #FFFFFF 25%,
    #FAFAFA 50%,
    #F0F0F2 100%
  );
  color: #2C3E50;
}

/* Card Inner - Always Transparent */
#overview-view .card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Shimmer effect for gold/high priority cards */
#overview-view .action-card.high::before,
#overview-view .action-card.urgent::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
}

#overview-view .action-card.high:hover::before,
#overview-view .action-card.urgent:hover::before {
  animation: shimmerOnce 0.6s ease-out forwards;
}

@keyframes shimmerOnce {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

/* ============================================
   TABLET & DESKTOP LAYOUT (768px+)
   Side-by-side: Quick Stats | Priority Card
   ============================================ */
@media (min-width: 768px) {
  #overview-view .view-content {
    max-width: 900px; /* Wider to accommodate side-by-side */
    padding: 24px;
  }

  /* Create side-by-side layout container */
  #overview-view .overview-main-content {
    display: grid;
    grid-template-columns: 1fr auto; /* Left column takes remaining space, card auto-sizes */
    gap: 24px;
    align-items: start;
    justify-content: center; /* Center both columns */
    max-width: 840px; /* 20% wider: 700 * 1.2 = 840px */
    margin: 0 auto;
  }

  #overview-view .overview-left-column {
    max-width: 400px; /* Constrain left column width */
  }

  #overview-view .priority-actions {
    width: auto; /* Don't force 100% width */
  }

  #overview-view .action-card {
    /* Width and height come from cards-unified.css */
    margin: 0; /* No auto-centering, aligned right */
  }
}

/* Larger screen sizes - card sizing comes from cards-unified.css */
@media (min-width: 1024px) and (max-width: 1439px) {
  #overview-view .view-content {
    max-width: 1000px;
  }

  #overview-view .overview-left-column {
    max-width: 450px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  #overview-view .view-content {
    max-width: 1100px;
  }

  #overview-view .overview-left-column {
    max-width: 500px;
  }
}

@media (min-width: 1920px) {
  #overview-view .view-content {
    max-width: 1200px;
  }

  #overview-view .overview-left-column {
    max-width: 550px;
  }
}

/* ============================================
   TEXT STYLING - Match Actions View
   ============================================ */
#overview-view .card-title.embossed {
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.4),
    -1px -1px 0 rgba(255, 255, 255, 0.8);
}

#overview-view .savings-amount {
  color: white;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.4),
    -1px -1px 0 rgba(255, 255, 255, 0.8);
}

/* Text alignment - match Actions view (right-aligned) */
#overview-view .action-card .savings-display,
#overview-view .action-card .savings-amount,
#overview-view .action-card .savings-label,
#overview-view .action-card .time-to-complete,
#overview-view .action-card .time-label,
#overview-view .action-card .time-value {
  text-align: right !important;
}

#overview-view .action-card .card-inner {
  align-items: flex-end !important;
}

#overview-view .action-card.low .card-inner,
#overview-view .action-card.low .card-inner * {
  color: #2C3E50 !important;
}

#overview-view .action-card.low .category-badge {
  color: white !important;
}

#overview-view .action-card.low .savings-amount {
  color: #50C878 !important;
  text-shadow: none;
}

/* ============================================
   AI BROKER MESSAGE CARD
   ============================================ */
.ai-broker-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* AI Assistant gradient styling - only the speech bubble has gradient */
.ai-broker-card.ai-assistant-gradient {
  background: var(--modern-card-background);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ai-broker-card.ai-assistant-gradient .ai-name {
  color: var(--brokerly-text-primary);
}

/* Default to Clive's purple gradient */
.ai-broker-card.ai-assistant-gradient .ai-message-bubble,
.ai-broker-card.ai-assistant-gradient.clive .ai-message-bubble {
  background: var(--clive-gradient);
  border-radius: 16px;
  padding: 16px 20px;
  color: white;
  box-shadow: 0 4px 12px var(--clive-glow);
  position: relative;
  margin-left: 8px;
}

/* Clara's teal gradient */
.ai-broker-card.ai-assistant-gradient.clara .ai-message-bubble {
  background: var(--clara-gradient);
  box-shadow: 0 4px 12px var(--clara-glow);
}

/* Speech bubble triangle pointing to avatar - Clive (default) */
.ai-broker-card.ai-assistant-gradient .ai-message-bubble::before,
.ai-broker-card.ai-assistant-gradient.clive .ai-message-bubble::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--clive-primary) transparent;
}

/* Speech bubble triangle - Clara */
.ai-broker-card.ai-assistant-gradient.clara .ai-message-bubble::before {
  border-color: transparent transparent var(--clara-primary) transparent;
}

.ai-broker-card.ai-assistant-gradient .ai-message-bubble p {
  color: white;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.ai-broker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-avatar-border {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(
    135deg,
    #FF6F61,  /* Coral */
    #FFD700,  /* Gold */
    #50C878,  /* Emerald */
    #007AA5,  /* Cerulean */
    #007AFF,  /* Primary */
    #FF6F61   /* Coral repeat */
  );
  background-size: 200% 200%;
  animation: rotateGradient 3s linear infinite;
}

@keyframes rotateGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ai-avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--modern-card-background);
}

.ai-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--brokerly-text-primary);
}

.ai-message-bubble {
  background: var(--modern-card-background);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}

.ai-message-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 32px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--modern-card-background);
}

.ai-message-bubble p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brokerly-text-primary);
}

/* ============================================
   TENDERS STATUS CARD
   ============================================ */
.tenders-status-card {
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  position: relative;
}

.tenders-status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tenders-status-card:active {
  transform: translateY(0);
}

.tenders-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tenders-icon {
  font-size: 24px;
}

.tenders-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--brokerly-text-primary);
  margin: 0;
}

.tenders-status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tenders-count {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.tenders-message {
  font-size: 15px;
  color: var(--brokerly-text-secondary);
  line-height: 1.4;
}

.tenders-details {
  margin-top: 8px;
  font-size: 13px;
  color: var(--brokerly-text-tertiary);
  line-height: 1.3;
  opacity: 0.8;
}

.attention-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #FF6F61;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}