/**
 * Dashboard Main Stylesheet
 * 
 * This is the primary stylesheet for the 4Square dashboard.
 * It imports all component stylesheets and defines global dashboard styles.
 * 
 * Components are organized into separate files for maintainability and clarity.
 * We keep layout manipulation minimal to avoid conflicts with Drupal's Layout Builder.
 */

/* ---------------------------------------------
   Dashboard Global Styles
--------------------------------------------- */
.region-content-top {
  padding: 20px 0;
}

/* These classes are applied to each block via the Drupal UI */
.points-balance-card,
.rewards-program-card,
.activity-summary-card {
  height: 100%; /* Full height for all cards */
}

/* Card with potential action */
.card-actionable {
  cursor: pointer;
}

/* Customize contextual links to not interfere with our design */
.contextual-region .contextual {
  z-index: 100;
}

/* Add subtle transition effects for hover states */
a, button {
  transition: all 0.2s ease;
}

/* ---------------------------------------------
   Tooltip/Hint Styling
--------------------------------------------- */
/* This is shown when the user first visits the dashboard */
.buy-points-hint {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  background-color: var(--text-primary);
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.buy-points-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--text-primary);
}

.buy-points-hint.active {
  opacity: 1;
  transform: translateX(-50%) translateY(calc(-100% - 10px));
}

/* ---------------------------------------------
   Updated elements animations
--------------------------------------------- */
/* Animation for values that are updated */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.updated {
  animation: pulse 0.6s ease-in-out;
}

/* ---------------------------------------------
   Utility Classes
--------------------------------------------- */
.text-positive {
  color: var(--success) !important;
}

.text-negative {
  color: var(--danger) !important;
}

.text-highlight {
  color: var(--primary) !important;
}

.text-gold {
  color: var(--warning) !important;
}

/* ---------------------------------------------
   Responsive Improvements
--------------------------------------------- */
@media (max-width: 767px) {
  /* Increase tap target size on mobile */
  .view-footer a {
    padding: 5px 0;
    margin-bottom: 5px;
  }
  
  /* More breathing room in mobile view */
  .region-content-top {
    padding: 10px;
  }
}

/* ---------------------------------------------
   Print Styles (for account statements)
--------------------------------------------- */
@media print {
  .points-balance-card,
  .rewards-program-card,
  .activity-summary-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  .contextual-links,
  .view-footer a {
    display: none !important;
  }
}

/* ---------------------------------------------
   Note: This file will be minified in production.
   Component imports would normally be handled by a build system.
   For the Asset Injector, you may need to copy/paste these styles
   or add the files individually.
--------------------------------------------- */