/*
 * 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);
}

/* 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);
}

/* 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);
}

/* 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);
}