/* Platform Icon Color Schemes */

/* Default scheme - uses brand colors */
.platform-icon-default {
  filter: none;
}

/* Black icons for property settings and create property pages */
.platform-input-group img.platform-icon,
.platform-label img.platform-icon,
.platform-input-group img.platform-icon-default,
.platform-label img.platform-icon-default {
  filter: brightness(0) saturate(100%);
  transition: filter 0.3s ease;
}

/* Show brand colors on hover for property pages */
.platform-input-group:hover img.platform-icon,
.platform-label:hover img.platform-icon,
.platform-input-group:hover img.platform-icon-default,
.platform-label:hover img.platform-icon-default {
  filter: none;
}

/* White/monochrome scheme - for dark backgrounds */
.platform-icon-white {
  filter: brightness(0) invert(1);
}

/* Muted scheme - grayscale for subtle appearance */
.platform-icon-muted {
  filter: grayscale(100%) opacity(0.7);
}

/* Brand color scheme - ensures proper brand colors */
.platform-icon-brand {
  filter: none;
}

.platform-icon-brand.platform-icon-google {
  filter: none; /* Google's multi-color logo should stay as is */
}

.platform-icon-brand.platform-icon-booking {
  filter: none; /* Booking blue is already correct */
}

.platform-icon-brand.platform-icon-tripadvisor {
  filter: none; /* TripAdvisor green is already correct */
}

.platform-icon-brand.platform-icon-holidaycheck {
  filter: none; /* HolidayCheck blue is already correct */
}

.platform-icon-brand.platform-icon-expedia {
  filter: none; /* Expedia yellow/blue is already correct */
}

/* Dark mode scheme - inverted for light backgrounds in dark mode */
.platform-icon-dark {
  filter: brightness(0.8) contrast(1.2);
}

/* Hover effects for interactive icons */
.platform-icon-interactive {
  transition: filter 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.platform-icon-interactive:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}

/* Specific adjustments for better contrast on different backgrounds */
.material-thin .platform-icon-default,
.material-ultra-thin .platform-icon-default {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* For property cards and dashboard */
.property-card .platform-icon,
.platform-link .platform-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* Platform badges with proper spacing */
.platform-badge .platform-icon {
  margin-right: 8px;
}

/* Dashboard platform link styling */
.platform-link img.platform-icon,
.platform-link img.platform-icon-default {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Apply subtle brand colors to dashboard icons */
.platform-link img.platform-icon-google,
.platform-link img.platform-icon-default[alt="Google"] {
  filter: brightness(0) saturate(100%) invert(43%) sepia(73%) saturate(1352%) hue-rotate(196deg) brightness(102%) contrast(96%);
}

.platform-link img.platform-icon-booking,
.platform-link img.platform-icon-default[alt="Booking.com"] {
  filter: brightness(0) saturate(100%) invert(13%) sepia(95%) saturate(3042%) hue-rotate(203deg) brightness(94%) contrast(101%);
}

.platform-link img.platform-icon-tripadvisor,
.platform-link img.platform-icon-default[alt="TripAdvisor"] {
  filter: brightness(0) saturate(100%) invert(51%) sepia(79%) saturate(466%) hue-rotate(116deg) brightness(92%) contrast(89%);
}

.platform-link img.platform-icon-holidaycheck,
.platform-link img.platform-icon-default[alt="HolidayCheck"] {
  filter: brightness(0) saturate(100%) invert(23%) sepia(93%) saturate(1458%) hue-rotate(190deg) brightness(96%) contrast(101%);
}

.platform-link img.platform-icon-expedia,
.platform-link img.platform-icon-default[alt="Expedia"] {
  filter: brightness(0) saturate(100%) invert(81%) sepia(62%) saturate(1037%) hue-rotate(5deg) brightness(102%) contrast(101%);
}

/* Hover effect for dashboard platform links */
.platform-link:hover img.platform-icon,
.platform-link:hover img.platform-icon-default {
  transform: scale(1.15);
}

/* Enterprise cards with centered icons */
.platform-enterprise-icon .platform-icon {
  display: block;
  margin: 0 auto;
}

/* Ensure icons maintain aspect ratio */
.platform-icon {
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* Note: Analysis page platform stat card styles are in analysis.css for proper cascade order */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .platform-icon-muted {
    filter: grayscale(0%) opacity(1);
  }
  
  .platform-icon-white {
    filter: brightness(0) invert(1) contrast(2);
  }
}

/* Dark mode automatic adjustments */
@media (prefers-color-scheme: dark) {
  .platform-icon-default {
    filter: brightness(0.9);
  }
  
  .platform-icon-muted {
    filter: grayscale(100%) opacity(0.8) brightness(1.2);
  }
}