@font-face {
  font-family: 'AvenirNextLTPro-Regular';
  src: url('/assets/AvenirNextLTPro-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'AvenirNextLTPro-It';
  src: url('/assets/AvenirNextLTPro-It.otf') format('opentype');
}

@font-face {
  font-family: 'AvenirNextLTPro-Bold';
  src: url('/assets/AvenirNextLTPro-Bold.otf') format('opentype');
}

body {
  font-family: 'AvenirNextLTPro-Regular', Muli, Prompt, sans-serif;
}


/* ------------------------------ General CSS: ONLY ---------------------------- */
.cust-main-layout-w {
  padding-left: 95px !important;
}

.ag-pinned-footer-row {
  font-weight: bold !important;
  background-color: #bebfc0 !important;
  border-top: 2px solid #dee2e6 !important;
}


/* ------------------------------ Custom CSS: ONLY ---------------------------- */


/* ----------------------------- Dashboard CSS: ONLY ---------------------------- */



/* Wrapper inside button for animation */
.login-btn .animated-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  /* match button height */
  font-size: 1em;
}

/* Moving icons */
.animated-label span {
  position: absolute;
  font-size: 1.2em;
  opacity: 0;
}

/* Cargo slides in from left */
.cargo {
  animation: cargoJourney 4s infinite;
}

@keyframes cargoJourney {
  0% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }

  15% {
    transform: translate(0px, 10px) scale(1);
    opacity: 1;
  }

  30% {
    transform: translate(40px, 10px) scale(1);
    opacity: 1;
  }

  35% {
    transform: translate(50px, 5px) scale(0.9);
    opacity: 0;
  }

  100% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }
}

/* Ship picks cargo and sails diagonally */
.ship {
  animation: shipJourney 4s infinite;
  animation-delay: 0.25s;
}

@keyframes shipJourney {

  0%,
  20% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }

  25%,
  40% {
    transform: translate(40px, 10px) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(80px, -20px) scale(0.9);
    opacity: 0;
  }

  100% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }
}

/* Plane picks cargo and flies up */
.plane {
  animation: planeJourney 4s infinite;
  animation-delay: 0.9s;
}

@keyframes planeJourney {

  0%,
  40% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }

  50%,
  60% {
    transform: translate(40px, 10px) scale(1);
    opacity: 1;
  }

  70% {
    transform: translate(100px, -40px) scale(0.9);
    opacity: 0;
  }

  100% {
    transform: translate(-50px, 10px) scale(0.8);
    opacity: 0;
  }
}


/* ----------------------------- Invoices CSS: ONLY ---------------------------- */
.metric-grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


/* ----------------------------- User CSS: ONLY ---------------------------- */

/* Wrap grid with a theme that switches when app goes dark */
.ag-table-wrapper .ag-theme {
  height: 100%;
}

body:not(.dark) .ag-theme {
  /* Light mode */
  --ag-theme: ag-theme-alpine;
}

body.dark .ag-theme {
  /* Dark mode */
  --ag-theme: ag-theme-alpine-dark;
}

/* Map variable to AG Grid class */
.ag-theme {
  composes: var(--ag-theme);
}


/* ----------------------------- Inventory CSS: ONLY ---------------------------- */
.exporter-card {
  position: relative;
  border-radius: var(--mantine-radius-md);
  overflow: hidden;

  /* Light mode surface */
  background: color-mix(in srgb,
      var(--mantine-color-white) 96%,
      var(--mantine-color-gray-1));

  /* Ambient + elevation */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.025),
    0 6px 14px rgba(0, 0, 0, 0.06);

  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}


[data-mantine-color-scheme="dark"] .exporter-card {
  background: var(--mantine-color-dark-6);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 8px 22px rgba(0, 0, 0, 0.48);
}


.exporter-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 16px 44px rgba(0, 0, 0, 0.18);
}


[data-mantine-color-scheme="dark"] .neon-box-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: 1px solid transparent !important;
}

.neon-box-hover:hover {
  box-shadow:
    0 0 15px rgba(33, 150, 243, 0.6),
    0 0 30px rgba(33, 150, 243, 0.4),
    0 0 55px rgba(33, 150, 243, 0.3),
    0 0 80px rgba(33, 150, 243, 0.15) !important;
  border-color: #2196f3 !important;
  transform: translateY(-5px) scale(1.01);
}

.exporter-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}

.exporter-card>* {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .exporter-card {
    transition: none;
  }
}

.exporter-card:hover {
  transform: translateY(-4px);
}

/* ----------------------------- CRM Reports CSS: ONLY ---------------------------- */
.crm-reports-empty-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  width: 100%;
}

.crm-reports-empty-content {
  text-align: center;
  animation: fadeInOut 3s ease-in-out infinite;
}

.crm-reports-empty-icon {
  margin-bottom: 20px;
  animation: floating 3s ease-in-out infinite;
  display: flex;
  justify-content: center;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}