/*
 * Platform01 Custom Styles
 * Application-specific CSS for components and utilities
 */

/* Customer Card Styles */
.customer-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.2s ease-in-out;
}

.customer-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  .customer-card {
    box-shadow: inset 0 0 0 2px rgb(55 65 81);
  }

  .customer-card:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
}

/* Product Card Styles */
.product-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.2s ease-in-out;
}

.product-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.product-card-new:hover {
  box-shadow: inset 0 0 0 2px var(--color-danger);
}

@media (prefers-color-scheme: dark) {
  .product-card {
    box-shadow: inset 0 0 0 2px rgb(55 65 81);
  }

  .product-card:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }

  .product-card-new {
    box-shadow: inset 0 0 0 2px rgb(127 29 29);
  }

  .product-card-new:hover {
    box-shadow: inset 0 0 0 2px var(--color-danger);
  }
}

/* Formulation Card Styles */
.formulation-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.2s ease-in-out;
}

.formulation-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  .formulation-card {
    box-shadow: inset 0 0 0 2px rgb(55 65 81);
  }

  .formulation-card:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
}

/* Contact Card Styles */
.contact-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.2s ease-in-out;
}

.contact-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  .contact-card {
    box-shadow: inset 0 0 0 2px rgb(55 65 81);
  }

  .contact-card:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
}

/* Ticket Card Styles */
.ticket-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.8s ease-in-out;
}

.ticket-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  .ticket-card {
    box-shadow: inset 0 0 0 2px rgb(55 65 81);
  }

  .ticket-card:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
}

/* Label Layout Card Styles */
.label-layout-card {
  box-shadow: inset 0 0 0 2px rgb(219 234 254);
  transition: box-shadow 0.2s ease-in-out;
}

.label-layout-card:hover {
  box-shadow: inset 0 0 0 2px rgb(22 163 74);
}

/* Exchange Rate Card Styles */
.exchange-rate-card {
  box-shadow: inset 0 0 0 2px rgb(220 252 231);
  transition: box-shadow 0.2s ease-in-out;
}

.exchange-rate-card:hover {
  box-shadow: inset 0 0 0 2px oklch(0.696 0.17 162.48);
}

/* Separator / Hairline Styles - Inspired by Fizzy */
.separator-hairline {
  height: 0;
  width: 100%;
  /* Fallback for browsers that don't support color-mix */
  border-top: 1px solid rgba(30, 58, 138, 0.15);
  /* Modern color-mix for ultra-thin appearance: blue-900 at 15% opacity */
  border-top: 1px solid color-mix(in srgb, rgb(30 58 138) 15%, transparent);
}

.separator-hairline-vertical {
  border-left: 1px solid color-mix(in srgb, rgb(30 58 138) 15%, transparent);
  border-top: 0;
}

/* Alternative using CSS variables for flexibility */
:root {
  --separator-color: color-mix(in srgb, rgb(30 58 138) 35%, transparent);
  --separator-width: 1px;
  --separator-style: solid;
}

.border-separator {
  height: 0;
  width: 100%;
  border-top-width: var(--separator-width);
  border-top-style: var(--separator-style);
  border-top-color: var(--separator-color);
}

/* New comment highlight animation (broadcast only) */
@keyframes comment-highlight {
  0% { box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.comment-highlight > div {
  animation: comment-highlight 2s ease-out;
}