/**
 * 4Square Dashboard CSS
 * 
 * This CSS file styles the Drupal-generated dashboard to match the flow-4-dash.html design.
 * It's built to work with Drupal's Layout Builder and Views, respecting the existing HTML structure.
 */

/* Remove the import that's causing errors */
/* @import url('fontawesome.css'); */

/* ---------------------------------------------
   CSS Variables
   These provide consistent colors throughout the dashboard
--------------------------------------------- */
:root {
  /* Primary colors from design */
  --primary: #3498db;
  --primary-dark: #2980b9;
  --success: #2ecc71;
  --success-dark: #27ae60;
  --danger: #e74c3c;
  --danger-dark: #c0392b;
  --warning: #f39c12;
  --warning-dark: #e67e22;
  --purple: #9b59b6;
  --purple-dark: #8e44ad;
  
  /* Text colors */
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #95a5a6;
  
  /* Background colors */
  --background: #f8f9fa;
  --white: #ffffff;
  --silver: #ecf0f1;
  
  /* UI elements */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --border-radius: 12px;
  --border-radius-sm: 6px;
}

/* ---------------------------------------------
   Dashboard Styles
   Additional dashboard-specific styles
--------------------------------------------- */
/* Note: The animation and pulse effects have been intentionally removed.
   The green flash effect is now handled directly in JavaScript for better control
   and to avoid issues with CSS animations running multiple times. */

/* ---------------------------------------------
   Global Dashboard Styles
   Basic styles that set the foundation
--------------------------------------------- */
body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

/* Improve the main container spacing */
.wrap-containers {
  padding: 20px 0;
}

/* Ensure proper spacing in the top container */
.content-top-container {
  max-width: 1580px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Remove default block horizontal rules that disrupt design */
.block-hr {
  display: none !important;
}

/* Make section block titles styled consistently */
.block-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

/* Add FontAwesome icon support before block titles */
.block-title::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome';
  margin-right: 10px;
  font-weight: 900;
  content: "";
}

/* ---------------------------------------------
   Layout Structure
   Sets up the card layout for the dashboard while respecting Drupal's structure
--------------------------------------------- */

/* Main container for all dashboard blocks 
 * Using block display with font-size 0 to eliminate whitespace between inline-block children
 */
.region-content-top {
  display: block;
  padding: 20px 0; /* Increased padding to match mockup spacing */
  font-size: 0; /* Eliminate whitespace between inline-block elements */
}

/* Two column layout for the first row (points balance and rewards cards)
 * Using inline-block with font-size reset to align side by side
 */
.region-content-top > section:nth-child(1),
.region-content-top > section:nth-child(2) {
  display: inline-block;
  width: calc(50% - 15px);
  vertical-align: top;
  margin-bottom: 25px; /* Adjusted to match mockup spacing between rows */
  font-size: 16px; /* Reset font size after parent's 0 */
}

/* We'll use JavaScript to ensure equal heights between the first two cards
 * This approach avoids using flex layout to respect the project guidelines
 * The JavaScript will measure heights and apply the tallest height to both cards
 */

/* Add right margin to first card to create gap */
.region-content-top > section:nth-child(1) {
  margin-right: 30px;
}

/* Base layout for all three activity summary cards */
.region-content-top > section:nth-child(3),
.region-content-top > section:nth-child(4),
.region-content-top > section:nth-child(5) {
  display: inline-block;
  width: 31.333%; /* Adjusted width to account for margins */
  vertical-align: top;
  margin-bottom: 25px; /* Adjusted to match mockup spacing between rows */
  margin-right: 0; /* Reset margin-right to be controlled by ID-specific rules */
}

/* Set specific margins for each activity summary card */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned,
.region-content-top > section:nth-child(3) {
  margin-right: 3% !important; /* Consistent horizontal spacing between activity cards */
}

#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-spent,
.region-content-top > section:nth-child(4) {
  margin-right: 3% !important; /* Consistent horizontal spacing between activity cards */
}

#block-foursquare-dxpr-views-block-ms-incentives-block-1,
.region-content-top > section:nth-child(5) {
  margin-right: 0 !important; /* Last card gets no right margin */
}

/* Full width for the mutations table section */
.region-content-top > section:nth-child(6) {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* ---------------------------------------------
   Card Base Styles
   Common styling for all dashboard cards
--------------------------------------------- */
.region-content-top > section {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 25px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card hover effect */
.region-content-top > section:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Card top border accent (only for the points balance card) */
.region-content-top > section:not(#block-foursquare-dxpr-rewardsprogram):not(.activity-summary-card)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  /* This top border is now only applied to the points balance card */
}

/* ---------------------------------------------
   Points Balance Card
   Styling for the user's points balance
--------------------------------------------- */
/* Target the points balance card specifically 
 * Using standard block layout but without forcing width
 * to allow parent section's inline-block to work
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 25px;
  /* Standard block layout */
  display: inline-block;
  /* Using min-height instead of fixed height to allow for content growth */
  min-height: 230px;
  margin-bottom: 30px;
  position: relative;
  overflow: visible; /* Allow content to be fully visible */
  box-sizing: border-box;
  /* Width is controlled by parent section */
}

/* Points balance card top border 
 * Adds the gradient top border to visually differentiate this card
 * Using primary blue colors instead of orange/warning
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--primary), var(--primary-dark));
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Points balance card title with icon 
 * Styles the title to match the mockup, including proper spacing and fonts
 * Makes sure the icon is properly displayed
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .block-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  border: none;
  padding: 0;
}

/* Points balance card title icon 
 * Creates a custom CSS-only icon since Font Awesome is not available
 * Uses a star symbol to represent reward points without financial reference
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .block-title::before {
  content: '★';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 14px;
  font-weight: normal;
}

/* Points value container
 * Adds proper margin for the value display to match design
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-content {
  margin: 0;
  padding: 0;
}

/* Points balance value
 * Styles the actual points value with the large font and primary color
 * Matches the mockup's large, prominent display
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .field-content {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  display: block;
  line-height: 1.1; /* Slightly reduced line height */
  margin-bottom: 0; /* Remove bottom margin completely */
}

/* Available points text
 * Styles the "Available 4Square points" text below the value
 * Matches the mockup's subdued, smaller text
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 15px; /* Reduced bottom margin */
  margin-top: 0; /* Keep top margin at 0 */
}

/* Action buttons container
 * Creates the flex container for the buttons at the bottom of the card
 * The view-footer contains the "Available 4Square points" text and links
 * The mockup shows a single button, but we'll style both links to match design
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Reduced gap for better alignment with the text */
  flex-direction: column; /* Stack elements vertically */
  padding-left: 0; /* Remove any potential left padding */
}

/* Primary action button
 * Add btn classes to links and remove redundant styling
 * This now leverages the standardized button styling from buttons.css
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a {
  /* Add appropriate btn classes via JavaScript or Drupal template */
  /* Only keep positioning properties not handled by buttons.css */
  background-color: var(--primary);
  color: white;
  transition: background-color 0.3s;
  margin-left: 0; /* Explicitly remove left margin */
  /* All other styling comes from buttons.css */
}

/* Hover effect for primary button */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a:hover {
  background-color: var(--primary-dark);
}

/* Secondary action button
 * This targets the second link in the footer with an outline style
 * We'll make this less prominent since the mockup only has one button
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a[href*="/redeem"] {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid var(--text-secondary); /* More subtle border */
  color: var(--text-secondary); /* More subtle text */
  transition: all 0.3s;
  text-align: center;
  width: fit-content; /* Match width to content */
}

/* Hover effect for secondary button */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a[href*="/redeem"]:hover {
  background-color: var(--text-secondary);
  color: white;
}

/* Card hover effect
 * Adds subtle elevation on hover for better interactivity
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* -----------------------------------------
 * CRITICAL FIXES - DO NOT REMOVE
 * These address specific layout and styling issues
 * -----------------------------------------
 */

/* Target the Buy More Points link directly based on the actual HTML structure
 * Necessary because the link has no class and was losing styling when URL changed
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a {
  /* Only keeping essential color and spacing properties */
  /* All other button styling now comes from buttons.css */
  background-color: var(--primary) !important;
  color: white !important;
  margin-top: 8px !important; /* Spacing specific to this implementation */
  /* Add class="btn btn-primary" to this element in templates */
  width: auto !important;
  min-width: unset !important;
  max-width: fit-content !important;
}

/* Hover state for the button */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer a:hover {
  background-color: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ---------------------------------------------
   Rewards Program Card
   Styling for the rewards level information
--------------------------------------------- */
/* Rewards program card styles
 * Using standard block layout instead of flexbox for consistent height
 */
#block-foursquare-dxpr-rewardsprogram {
  background-color: var(--primary);
  color: white;
  border-radius: var(--border-radius);
  padding: 25px;
  position: relative;
  display: inline-block;
  box-shadow: var(--shadow);

  /* Using min-height instead of fixed height to allow for content growth */
  min-height: 230px;
  /* Ensure proper box sizing */
  box-sizing: border-box;
}

/* Remove the before pseudo-element per mockup */
#block-foursquare-dxpr-rewardsprogram::before {
  content: none;
}

/* Rewards title styling */
#block-foursquare-dxpr-rewardsprogram .block-title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

/* Add custom icon for rewards title using CSS-only approach 
 * Matches the style of the points balance icon but uses a different symbol
 * Uses a simple diamond symbol to represent a gift/package without relying on FontAwesome
 */
#block-foursquare-dxpr-rewardsprogram .block-title::before {
  content: '\25C6'; /* Black diamond symbol that appears as a square when rotated */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 14px;
  font-weight: normal;
}

/* Gold level styling */
.rewards-program-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  display: block;
  color: white; /* Fixed: Change to white per mockup */
}

/* Remove the gold level star icon that isn't in mockup */
.rewards-program-value::before {
  content: none;
}

/* Rewards program description */
.rewards-program-description {
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 14px;
  opacity: 0.9;
}

/* View Benefits button 
 * Uses 600 font weight per mockup specifications
 * Positioned properly without relying on flexbox
 */
.rewards-program-button {
  background-color: white;
  color: var(--primary);
  border: none;
  padding: 8px 16px; /* Smaller padding for more compact button */
  border-radius: var(--border-radius-sm);
  font-weight: 600; /* Updated to 600 per mockup */
  cursor: pointer;
  transition: all 0.3s;
  display: inline-block;
  margin-top: 20px;
  width: auto;
  font-size: 14px; /* Smaller font size */
  text-decoration: none;
}

.rewards-program-button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  /* Remove underline on hover to maintain clean button appearance */
  text-decoration: none;
}

/* Replace Font Awesome with CSS-only arrow */
.rewards-program-button::after {
  content: '→';
  margin-left: 8px;
  font-size: 14px;
}

/* ---------------------------------------------
   Activity Summary Cards
   Styling for points earned and spent this month
--------------------------------------------- */
/* Style the activity summary cards to exactly match mockup's activity-item */
section.activity-summary-card {
  padding: 10px 20px !important;
  text-align: center !important;
  background: linear-gradient(145deg, #f9f9f9, #ffffff) !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05), -5px -5px 15px rgba(255, 255, 255, 0.8) !important;
  display: inline-block !important;
  min-width: 30% !important;
  margin-right: 3% !important;
  vertical-align: top !important;
  border-top: none !important;
  border: none !important;
}

/* Style the inner content container */
section.activity-summary-card .view-content {
  display: block;
  position: relative;
  padding: 10px 0;
}

/* Style the icons using more specific selectors */
section.activity-summary-card .view-content:before {
  /* Common styling for all icons */
  font-family: 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900; /* Required for solid icons */
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

/* Individual icons for each card type */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned .view-content:before {
  content: '\f062'; /* Arrow up icon */
  color: var(--success);
}

#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-spent .view-content:before {
  content: '\f063'; /* Arrow down icon */
  color: var(--danger);
}

#block-foursquare-dxpr-views-block-ms-incentives-block-1 .view-content:before {
  content: '\f06b'; /* Gift icon */
  color: var(--primary);
}

/* Style the numerical values inside each card */
section.activity-summary-card .field-content {
  font-size: 28px;
  font-weight: 700;
  margin: 10px 0;
  display: block;
}

/* Add labels below the values using the :after pseudo-element */
section.activity-summary-card .view-content:after {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 5px;
  display: block;
}

/* Add a plus sign to positive values */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned .field-content:not(:empty)::before {
  content: '+';
}

/* Set specific margins for each activity summary card */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned {
  margin-right: 3% !important;
}

#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-spent {
  margin-right: 3% !important;
}

#block-foursquare-dxpr-views-block-ms-incentives-block-1 {
  margin-right: 0 !important; /* Last card gets no right margin */
}

/* Hide the non-working selectors that weren't effective */
/* section.activity-summary-card:last-of-type,
#block-foursquare-dxpr-views-block-ms-incentives-block-1 {
  margin-right: 0 !important;
} */

/* Remove unnecessary styling */
section.activity-summary-card:hover {
  /* Remove hover effects not in mockup */
  transform: none;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05), -5px -5px 15px rgba(255, 255, 255, 0.8);
}

/* Remove colored top borders that aren't in mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned,
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-spent,
#block-foursquare-dxpr-views-block-ms-incentives-block-1 {
  border-top: none;
}

/* Hide only certain Drupal-specific elements but keep contextual menus and footers */
section.activity-summary-card .block-title,
section.activity-summary-card hr.block-hr {
  display: none;
}

/* Ensure contextual menus are visible and properly positioned */
section.activity-summary-card .contextual {
  display: block !important; /* Explicitly show contextual menu */
  z-index: 100; /* Ensure it's above other elements */
  position: absolute !important; /* Keep proper positioning */
}

/* Style the view footers in activity summary cards */
section.activity-summary-card .view-footer {
  display: block !important; /* Explicitly show footer */
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---------------------------------------------
   Mutations (Transaction History) Card
   Styling for the transaction history table
--------------------------------------------- */
/* Card styling to match mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 25px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

/* Add the top border as shown in mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--primary), var(--primary-dark));
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Card title styling to match mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations .block-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  position: relative;
}

/* Add history icon to the block title as in mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations .block-title::before {
  content: '\f017'; /* Clock/history icon */
  font-family: 'Font Awesome 5 Free', 'FontAwesome';
  margin-right: 10px;
  color: var(--primary);
  font-weight: 900;
}

/* Hide the horizontal rule as it's not in the mockup */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations .block-hr {
  display: none;
}

/* Table styling to match mockup */
.view-ms-wallet-mutations table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

/* Table header styling to match mockup */
.view-ms-wallet-mutations table th {
  text-align: left;
  padding: 12px 15px;
  background-color: var(--silver);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}

/* Fix specific column headers and ensure they're all visible with consistent styling */
.view-ms-wallet-mutations table th.views-field-title,
.view-ms-wallet-mutations table th.views-field-created,
.view-ms-wallet-mutations table th.views-field-field-ms-points-1 {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  display: table-cell; /* Ensure header is visible */
  visibility: visible; /* Make sure it's not hidden */
}

/* Ensure column headers have enough padding and are vertically aligned */
.view-ms-wallet-mutations thead tr {
  height: 50px;
}

/* Fix Bootstrap striping that might interfere with our colors */
.view-ms-wallet-mutations .table-striped > tbody > tr:nth-of-type(odd),
.view-ms-wallet-mutations .table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent;
}

/* Fix any inherited styles that might be affecting headers */
.view-ms-wallet-mutations table.table {
  margin-bottom: 0;
}

/* Table cells styling */
.view-ms-wallet-mutations table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

/* Remove border from last row */
.view-ms-wallet-mutations table tr:last-child td {
  border-bottom: none;
}

/* Row hover effect */
.view-ms-wallet-mutations table tr:hover {
  background-color: rgba(52, 152, 219, 0.05);
}

/* 
 * Transaction title styling - using the actual HTML structure
 * Format the nested paragraph elements to match the mockup
 */
.view-ms-wallet-mutations .views-field-title {
  position: relative;
  padding-left: 75px; /* Increase space for the icon */
}

/* Style the merchant name (strong tag in first paragraph) to match transaction-merchant class */
.view-ms-wallet-mutations .views-field-title p strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 15px;
}

/* Style the transaction type (second paragraph) to match transaction-time class */
.view-ms-wallet-mutations .views-field-title p:nth-child(2) {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

/* Fix paragraph spacing to ensure content displays properly */
.view-ms-wallet-mutations .views-field-title p {
  margin: 0; /* Reset default paragraph margins */
  line-height: 1.4; /* Add proper line height for readability */
}

/* 
 * Transaction icons based on the row classes
 * Match the icon styles from the mockup using the transaction-icon classes
 */
.view-ms-wallet-mutations tr td.views-field-title::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  line-height: 40px; /* Center the icon vertically */
}

/* Points purchase icon - green wallet icon */
.view-ms-wallet-mutations tr.Points.purchase td.views-field-title::before,
.view-ms-wallet-mutations tr[class="Points purchase"] td.views-field-title::before {
  content: '\f07a'; /* Shopping cart icon */
  background-color: rgba(46, 204, 113, 0.1); /* Light green background */
  color: var(--success);
}

/* Points redemption icon - red shopping cart */
.view-ms-wallet-mutations tr.Points.redemption td.views-field-title::before,
.view-ms-wallet-mutations tr[class="Points redemption"] td.views-field-title::before {
  content: '\f53a'; /* Shopping bag icon */
  background-color: rgba(231, 76, 60, 0.1); /* Light red background */
  color: var(--danger);
}

/* Stationary purchase icon - red shopping cart */
.view-ms-wallet-mutations tr.Stationary.purchase td.views-field-title::before,
.view-ms-wallet-mutations tr[class="Stationary purchase"] td.views-field-title::before {
  content: '\f07a'; /* Shopping cart icon */
  background-color: rgba(231, 76, 60, 0.1); /* Light red background */
  color: var(--danger);
}

/* Generic purchase icon - fallback */
.view-ms-wallet-mutations tr[class*="purchase"] td.views-field-title::before {
  content: '\f07a'; /* Shopping cart icon */
  background-color: rgba(231, 76, 60, 0.1); /* Light red background */
  color: var(--danger);
}

/* Bonus points icon - purple gift icon */
.view-ms-wallet-mutations tr.Bonus.points td.views-field-title::before,
.view-ms-wallet-mutations tr[class="Bonus points"] td.views-field-title::before {
  content: '\f06b'; /* Gift icon */
  background-color: rgba(155, 89, 182, 0.1); /* Light purple background */
  color: var(--purple);
}

/* 
 * Points amount styling
 * Using direct targeting and !important to override any striped row styling
 */
.view-ms-wallet-mutations .views-field-field-ms-points-1 {
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}

/* Target all row types explicitly to ensure consistent coloring */
/* Positive values - Points purchase */
.view-ms-wallet-mutations tr.Points.purchase .views-field-field-ms-points-1,
.view-ms-wallet-mutations tr[class="Points purchase"] .views-field-field-ms-points-1 {
  color: var(--success) !important;
}

/* Positive values - Bonus points */
.view-ms-wallet-mutations tr.Bonus.points .views-field-field-ms-points-1,
.view-ms-wallet-mutations tr[class="Bonus points"] .views-field-field-ms-points-1 {
  color: var(--success) !important;
}

/* Negative values - Points redemption */
.view-ms-wallet-mutations tr.Points.redemption .views-field-field-ms-points-1,
.view-ms-wallet-mutations tr[class="Points redemption"] .views-field-field-ms-points-1 {
  color: var(--danger) !important;
}

/* Negative values - Stationary purchase (if needed) */
.view-ms-wallet-mutations tr.Stationary.purchase .views-field-field-ms-points-1,
.view-ms-wallet-mutations tr[class="Stationary purchase"] .views-field-field-ms-points-1 {
  color: var(--danger) !important;
}

/* Date styling */
.view-ms-wallet-mutations .views-field-created {
  color: var(--text-secondary);
  font-size: 14px;
}

/* 
 * Responsive table design
 * Ensures the mutations table displays correctly on smaller screens
 */
@media (max-width: 768px) {
  /* Make table scrollable on mobile */
  #block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-mutations {
    overflow-x: auto;
  }
  
  /* Allow for smaller padding on mobile */
  .view-ms-wallet-mutations table td,
  .view-ms-wallet-mutations table th {
    padding: 10px;
  }
  
  /* Adjust icon positioning for smaller screens */
  .view-ms-wallet-mutations .views-field-title {
    padding-left: 50px;
  }
  
  .view-ms-wallet-mutations tr td.views-field-title::before {
    left: 5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
  }
}

/* ---------------------------------------------
   Pagination styling 
 * These styles match the pagination component in the mockup
 * Each component is styled to match the exact appearance shown in the mockup
 */
.view-ms-wallet-mutations nav.pager-nav {
  padding-top: 20px;
  margin-top: 15px;
  border-top: 1px solid #eee;
  margin-bottom: 10px;
}

/* Style the pagination list */
.view-ms-wallet-mutations .pagination {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  margin-top: 5px; /* Less top margin to match mockup */
}

/* Style each pagination item */
.view-ms-wallet-mutations .pagination .page-item {
  margin: 0 3px; /* Slightly more space between items */
}

/* Style pagination links */
.view-ms-wallet-mutations .pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* Fixed width to ensure perfect circles */
  height: 30px; /* Slightly smaller height to match mockup */
  padding: 0;
  border-radius: 50%; /* Circular buttons */
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  background-color: transparent; /* Transparent background for inactive buttons */
  border: none; /* No border for a cleaner look */
  transition: all 0.2s ease;
}

/* Hover effect for page links */
.view-ms-wallet-mutations .pagination .page-link:hover {
  background-color: rgba(52, 152, 219, 0.1); /* Light blue on hover */
  color: var(--primary);
}

/* Active/current page styling */
.view-ms-wallet-mutations .pagination .page-item.is-active .page-link {
  background-color: var(--primary);
  color: white;
}

/* Hide the "First" and "Last" pagination items to match mockup */
.view-ms-wallet-mutations .pagination .pager__item--first,
.view-ms-wallet-mutations .pagination .pager__item--last {
  display: none;
}

/* 
 * Fix Previous/Next buttons to use simple chevron arrows like in the mockup
 * We're replacing the text "Previous" and "Next" with chevron symbols
 */
.view-ms-wallet-mutations .pagination .pager__item--previous .page-link span[aria-hidden],
.view-ms-wallet-mutations .pagination .pager__item--next .page-link span[aria-hidden] {
  font-size: 0; /* Hide original text */
  position: relative;
  display: inline-block;
  width: 10px;
  height: 20px;
  line-height: 20px;
}

/* Add chevron for previous button */
.view-ms-wallet-mutations .pagination .pager__item--previous .page-link span[aria-hidden]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--text-primary);
  border-bottom: 2px solid var(--text-primary);
  transform: translate(-25%, -50%) rotate(45deg);
}

/* Add chevron for next button */
.view-ms-wallet-mutations .pagination .pager__item--next .page-link span[aria-hidden]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-primary);
  border-top: 2px solid var(--text-primary);
  transform: translate(-75%, -50%) rotate(45deg);
}

/* Ensure proper spacing for pagination text */
.view-ms-wallet-mutations .pagination .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Disabled pagination items */
.view-ms-wallet-mutations .pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ensure pagination is centered properly */
.view-ms-wallet-mutations .text-center {
  text-align: center;
}

/* ---------------------------------------------
   Page Title
   Styling for the page title
--------------------------------------------- */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 30px;
}

/* ---------------------------------------------
   Responsive Adjustments
   Ensures the dashboard looks good on all devices
--------------------------------------------- */
@media (max-width: 1024px) {
  /* Adjust card layout for tablets */
  .region-content-top > section:nth-child(1),
  .region-content-top > section:nth-child(2) {
    width: calc(50% - 15px);
  }
  
  .region-content-top > section:nth-child(3),
  .region-content-top > section:nth-child(4),
  .region-content-top > section:nth-child(5) {
    width: 31%;
    margin-right: 2%;
  }
}

@media (max-width: 768px) {
  /* Stack cards in a single column on mobile */
  .region-content-top {
    flex-direction: column;
  }
  
  .region-content-top > section {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
  
  /* Make balance amount smaller on mobile */
  #block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .field-content {
    font-size: 36px;
  }
  
  /* Stack buttons in footer */
  #block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .view-footer {
    flex-direction: column;
  }
  
  /* Larger touch targets on mobile */
  .view-footer a,
  .rewards-program-button {
    padding: 12px 20px;
    display: block;
    margin-bottom: 10px;
    text-align: center;
  }
}

/* Animation for updated values */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: var(--primary); }
  100% { transform: scale(1); }
}

/* 
 * Apply pulse animation to all field-content elements with numbers
 * We use multiple selectors to ensure all values are animated
 * .updated is applied by JS when values change
 * The other selectors target specific field content areas across different cards
 */
.updated, 
.views-field-field-ms-points .field-content,
.points-balance-card .field-content,
.rewards-program-card .field-content,
section.activity-summary-card .field-content,
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-earned .field-content,
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-spent .field-content,
#block-foursquare-dxpr-views-block-ms-incentives-block-1 .field-content {
  animation: pulse 0.6s ease-in-out;
}

/* 
 * Add Font Awesome icons to the block titles
 * Implements the same icons as in the mockup using CSS pseudo-elements
 * !important flags ensure these override any existing icon styling
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .block-title::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  content: "\f005" !important; /* fa-star */
  display: inline-block;
  margin-right: 10px;
  color: var(--primary);
  font-weight: 900;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

#block-foursquare-dxpr-rewardsprogram .block-title::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  content: "\f06b" !important; /* fa-gift */
  display: inline-block;
  margin-right: 10px;
  color: white;
  font-weight: 900;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------
   Sidebar Menu with Font Awesome Icons
   Styling for the dashboard navigation menu
--------------------------------------------- */

/* 
 * Header and sidebar container styling
 * Matches the mockup design for the sidebar header
 */
.navbar.foursquare-dxpr-header.left {
  width: 280px;
  background-color: var(--white);
  box-shadow: var(--shadow);
  z-index: 100;
}

.foursquare-dxpr-header--side {
  position: fixed;
  height: 100vh;
}

/* 
 * Hide the default HR element and adjust logo spacing
 * Clean up default theme elements that don't match our design
 */
.block-hr {
  display: none;
}

.wrap-branding {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--silver);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.logo.navbar-btn {
  margin: 0;
  padding: 10px 0;
  max-width: 160px;
}

/* 
 * Navigation region styling
 * Create proper space and structure for the nav menu
 */
.region-navigation-collapsible {
  padding: 0;
  width: 100%;
}

/* 
 * Ensure sidebar navigation doesn't exceed container
 * Constrain menu items within their parent
 */
.foursquare-dxpr-main-menu .nav.navbar-nav {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 
 * Base styling for menu items 
 * Creates consistent layout and spacing for all menu links
 */
#foursquare-dxpr-main-menu .nav-item a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 6px;
  margin-bottom: 5px;
  transition: all 0.2s ease;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 
 * Menu item hover state 
 * Subtle background highlight on hover for better UX
 */
#foursquare-dxpr-main-menu .nav-item a:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

/* 
 * Active menu item 
 * Clearly indicates the current page/section
 */
#foursquare-dxpr-main-menu .nav-item a.is-active {
  background-color: var(--primary);
  color: white;
}

/* 
 * Add icons using ::before pseudo-element
 * Common properties for all menu icons
 */
#foursquare-dxpr-main-menu .nav-item a.menu-dashboard::before,
#foursquare-dxpr-main-menu .nav-item a.menu-transactions::before,
#foursquare-dxpr-main-menu .nav-item a.menu-rewards::before,
#foursquare-dxpr-main-menu .nav-item a.menu-account::before,
#foursquare-dxpr-main-menu .nav-item a.menu-settings::before,
#foursquare-dxpr-main-menu .nav-item a.menu-help::before,
#foursquare-dxpr-main-menu .nav-item a.menu-logout::before,
/* Alternative selectors for dashboard block structure */
#block-foursquare-dxpr-dashboard .nav-item a.menu-dashboard::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-transactions::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-rewards::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-account::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-settings::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-help::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-logout::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  margin-right: 12px;
  width: 24px;
  text-align: center;
  font-size: 16px;
}

/* 
 * Dashboard icon
 * Tachometer alt icon represents the dashboard as shown in mockup
 */
#foursquare-dxpr-main-menu .nav-item a.menu-dashboard::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-dashboard::before {
  content: '\f3fd'; /* tachometer-alt icon */
  color: var(--primary);
}

/* 
 * Transactions icon
 * Exchange icon represents transactions/history
 */
#foursquare-dxpr-main-menu .nav-item a.menu-transactions::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-transactions::before {
  content: '\f0ec'; /* exchange icon */
  color: var(--primary);
}

/* 
 * Rewards icon
 * Gift icon represents rewards program
 */
#foursquare-dxpr-main-menu .nav-item a.menu-rewards::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-rewards::before {
  content: '\f06b'; /* gift icon */
  color: var(--primary);
}

/* 
 * Account icon
 * User icon represents account settings/profile
 */
#foursquare-dxpr-main-menu .nav-item a.menu-account::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-account::before {
  content: '\f007'; /* user icon */
  color: var(--primary);
}

/* 
 * Settings icon
 * Cog icon represents system settings
 */
#foursquare-dxpr-main-menu .nav-item a.menu-settings::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-settings::before {
  content: '\f013'; /* cog icon */
  color: var(--primary);
}

/* 
 * Help icon
 * Question mark icon for help/support
 */
#foursquare-dxpr-main-menu .nav-item a.menu-help::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-help::before {
  content: '\f059'; /* question circle icon */
  color: var(--primary);
}

/* 
 * Logout icon
 * Sign-out icon for logout function
 */
#foursquare-dxpr-main-menu .nav-item a.menu-logout::before,
#block-foursquare-dxpr-dashboard .nav-item a.menu-logout::before {
  content: '\f2f5'; /* sign-out icon */
  color: var(--primary);
}

/* 
 * White icon for active menu items
 * Ensures icon color matches text color when item is active
 */
#foursquare-dxpr-main-menu .nav-item a.is-active::before,
#block-foursquare-dxpr-dashboard .nav-item a.is-active::before {
  color: white;
}

/* 
 * Sidebar layout customization
 * Ensures consistent spacing and positioning
 */
#foursquare-dxpr-main-menu.foursquare-dxpr-main-menu {
  padding-top: 20px !important;
  width: 256px;
  box-sizing: border-box;
}

/* 
 * Category headers in sidebar menu
 * For grouping related menu items
 */
#foursquare-dxpr-main-menu .nav-category,
#block-foursquare-dxpr-dashboard .block-title {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 20px 0 10px 15px;
  padding-right: 15px;
  width: 100%;
  box-sizing: border-box;
}

/* 
 * Main content adjustment
 * Push content to accommodate fixed sidebar
 */
.main-content, 
.region-content, 
.content-top-container {
  margin-left: 0;
  padding: 30px;
}

/* 
 * Ensure the menu is properly displayed when expanded
 * Override any theme settings that might hide it
 */
.foursquare-dxpr-main-menu {
  display: block !important;
  overflow-y: auto;
}

/* 
 * Add Font Awesome icons to the block titles
 * Implements the same icons as in the mockup using CSS pseudo-elements
 * !important flags ensure these override any existing icon styling
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-ms-points-balance .block-title::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  content: "\f005" !important; /* fa-star */
  display: inline-block;
  margin-right: 10px;
  color: var(--primary);
  font-weight: 900;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

#block-foursquare-dxpr-rewardsprogram .block-title::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  content: "\f06b" !important; /* fa-gift */
  display: inline-block;
  margin-right: 10px;
  color: white;
  font-weight: 900;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------
   Chart Section
   Styling for the points activity chart block
--------------------------------------------- */
/* Main chart block container */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-block-1 {
  display: block;
  width: 100%;
  margin-bottom: 30px;
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 25px;
  overflow: hidden;
}

/* Chart block title styling */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-block-1 .block-title::before {
  content: none; /* Remove the chart icon to match mockup */
}

/* 
 * Chart attachment (bonus points) styling 
 * This section styles the bonus points display below the chart
 * to match the mockup's "rewards-advantage" section
 */
#block-foursquare-dxpr-views-block-ms-wallet-mutations-block-1 .attachment-after {
  border-top: 1px solid #f0f0f0; /* Light separator like in mockup */
  padding-top: 15px;
  margin-top: 5px;
}

/* 
 * Chart metrics container
 * Centers the content and adds appropriate spacing like in mockup
 */
.chart-metrics {
  text-align: center;
  padding: 15px 20px;
}

/* 
 * Bonus points value (equivalent to advantage-value in mockup)
 * Large, bold, primary colored text to highlight the value