@import "tailwindcss";

/* Custom theme font and utilities for FactureExpress */
@layer base {
  body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  /* Form Input Visible Border System */
  input,
  select,
  textarea {
    border: 1.5px solid #cbd5e1 !important; /* Visible Slate-300 / Gray border */
    background-color: #f8fafc;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  textarea {
    resize: none;
    overflow-y: hidden;
    min-height: 46px;
    box-sizing: border-box;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: #94a3b8 !important; /* Slate-400 on hover */
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #2563eb !important; /* Blue-600 on focus */
    background-color: #ffffff !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  }
}

/* Glassmorphism & custom utility classes */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Invoice Paper Styling */
.invoice-paper {
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Toast Slide-In Animation */
@keyframes toastSlide {
  from {
    transform: translateY(100%) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.animate-toast {
  animation: toastSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth transition between views */
.view-transition {
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* Print Overrides */
@media print {
  body {
    background: white !important;
    padding: 0 !important;
  }

  .no-print {
    display: none !important;
  }

  .invoice-paper-container {
    position: static !important;
  }

  .invoice-paper {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
  }
}