/**
 * Main CSS file for Sales Enablement Platform
 * Contains shared styles used across the application
 */

/* Custom properties */
:root {
    --color-primary: #3b82f6; /* Blue-500 */
    --color-primary-dark: #2563eb; /* Blue-600 */
    --color-primary-light: #60a5fa; /* Blue-400 */
    --color-success: #10b981; /* Emerald-500 */
    --color-warning: #f59e0b; /* Amber-500 */
    --color-error: #ef4444; /* Red-500 */
    --color-gray-light: #f3f4f6; /* Gray-100 */
    --color-gray-medium: #9ca3af; /* Gray-400 */
    --color-gray-dark: #4b5563; /* Gray-600 */
  }
  
  /* General styles */
  .aspect-w-16 {
    position: relative;
    padding-bottom: calc(9 / 16 * 100%);
  }
  
  .aspect-h-9 {
    position: relative;
    padding-bottom: calc(9 / 16 * 100%);
  }
  
  .aspect-w-16 > *, .aspect-h-9 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  /* Custom animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideIn {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .animate-slide-in {
    animation: slideIn 0.3s ease-in-out;
  }
  
  /* Custom transitions */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  
  /* Custom Card Styles */
  .card {
    @apply bg-white overflow-hidden shadow rounded-lg;
  }
  
  .card-header {
    @apply px-4 py-5 sm:px-6;
  }
  
  .card-body {
    @apply px-4 py-5 sm:p-6;
  }
  
  .card-footer {
    @apply bg-gray-50 px-4 py-4 sm:px-6;
  }
  
  /* Custom Button Styles */
  .btn {
    @apply inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
  }
  
  .btn-secondary {
    @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500;
  }
  
  .btn-success {
    @apply border-transparent text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
  }
  
  .btn-danger {
    @apply border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
  }
  
  /* Custom Form Styles */
  .form-input {
    @apply mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md;
  }
  
  .form-select {
    @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700;
  }
  
  /* Tooltip styles */
  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  .tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
  
  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-blue {
    @apply bg-blue-100 text-blue-800;
  }
  
  .badge-green {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-red {
    @apply bg-red-100 text-red-800;
  }
  
  .badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }
  
  /* Helper classes */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Responsive utilities */
  @media (max-width: 640px) {
    .mobile-full {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }