monacousa-portal/assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base layer overrides */
@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-gradient-light min-h-screen antialiased;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* Typography defaults */
  h1 {
    @apply text-4xl font-bold text-gray-800;
  }
  
  h2 {
    @apply text-3xl font-bold text-gray-800;
  }
  
  h3 {
    @apply text-2xl font-semibold text-gray-700;
  }
  
  h4 {
    @apply text-xl font-semibold text-gray-700;
  }
  
  p {
    @apply text-gray-600;
  }
}

/* Component layer */
@layer components {
  /* Bright Glass Card Variants */
  .glass-card-bright {
    @apply glass rounded-glass p-6 transition-all duration-300;
  }
  
  .glass-card-ultra {
    @apply glass-ultra rounded-glass p-6 transition-all duration-300;
  }
  
  .glass-card-monaco {
    @apply glass-monaco rounded-glass p-6 transition-all duration-300;
  }

  /* Glass Stat Card */
  .glass-stat-card {
    @apply glass-light rounded-glass p-6 hover:glass-ultra transition-all duration-300 hover:-translate-y-1 hover:shadow-glass-lg;
  }
  
  .glass-stat-icon {
    @apply w-12 h-12 rounded-xl bg-glass-monaco-soft flex items-center justify-center mb-4;
  }
  
  .glass-stat-value {
    @apply text-3xl font-bold text-gray-800 mb-1;
  }
  
  .glass-stat-label {
    @apply text-sm text-gray-600 uppercase tracking-wide;
  }

  /* Glass Dues Card */
  .glass-dues-card {
    @apply glass rounded-glass p-4 hover:shadow-glass-lg transition-all duration-300;
  }
  
  .glass-dues-header {
    @apply flex items-center justify-between mb-3;
  }
  
  .glass-dues-avatar {
    @apply w-10 h-10 rounded-full ring-2 ring-white/60;
  }
  
  .glass-dues-name {
    @apply font-semibold text-gray-800;
  }
  
  .glass-dues-amount {
    @apply text-lg font-bold text-monaco-600;
  }
  
  .glass-dues-status {
    @apply px-3 py-1 rounded-full text-xs font-medium;
  }
  
  .glass-dues-status-overdue {
    @apply bg-red-100 text-red-700;
  }
  
  .glass-dues-status-upcoming {
    @apply bg-amber-100 text-amber-700;
  }

  /* Glass Button Variants */
  .btn-glass {
    @apply glass-button px-6 py-2.5 rounded-xl font-medium text-gray-700 hover:text-monaco-600;
  }
  
  .btn-glass-primary {
    @apply bg-gradient-monaco text-white px-6 py-2.5 rounded-xl font-medium shadow-monaco-sm hover:shadow-monaco transition-all duration-300 hover:-translate-y-0.5;
  }
  
  .btn-glass-secondary {
    @apply glass px-6 py-2.5 rounded-xl font-medium text-monaco-600 border-monaco-200 hover:bg-glass-monaco-soft;
  }
  
  .btn-glass-ghost {
    @apply bg-transparent border-2 border-monaco-600 text-monaco-600 px-6 py-2.5 rounded-xl font-medium hover:bg-glass-monaco-soft transition-all duration-300;
  }

  /* Glass Navigation Items */
  .nav-item-glass {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-glass-monaco-soft hover:text-monaco-600 hover:translate-x-0.5;
  }
  
  .nav-item-glass-active {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl bg-glass-monaco text-monaco-600 font-medium relative;
  }
  
  .nav-item-indicator {
    @apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-monaco rounded-r-full;
  }

  /* Glass Input Fields */
  .input-glass {
    @apply glass-input px-4 py-3 rounded-xl w-full;
  }
  
  .select-glass {
    @apply glass-input px-4 py-3 rounded-xl w-full appearance-none cursor-pointer;
  }
  
  .textarea-glass {
    @apply glass-input px-4 py-3 rounded-xl w-full resize-none;
  }

  /* Glass Table */
  .table-glass {
    @apply glass-ultra rounded-glass overflow-hidden;
  }
  
  .table-glass thead {
    @apply bg-glass-monaco-soft border-b border-white/40;
  }
  
  .table-glass th {
    @apply px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider;
  }
  
  .table-glass td {
    @apply px-6 py-4 text-gray-600;
  }
  
  .table-glass tbody tr {
    @apply border-b border-white/20 hover:bg-glass-monaco-soft transition-colors duration-150;
  }

  /* Glass Modal/Dialog */
  .modal-glass {
    @apply glass-ultra rounded-glass shadow-2xl;
  }
  
  .modal-glass-header {
    @apply px-6 py-4 border-b border-white/40 bg-gradient-glass;
  }
  
  .modal-glass-body {
    @apply px-6 py-4;
  }
  
  .modal-glass-footer {
    @apply px-6 py-4 border-t border-white/40 bg-glass-monaco-soft flex justify-end gap-3;
  }

  /* Glass Badge */
  .badge-glass {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass border border-white/60;
  }
  
  .badge-glass-monaco {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass-monaco text-monaco-700 border-monaco-200;
  }

  /* Glass Alert */
  .alert-glass {
    @apply glass-light rounded-glass p-4 border-l-4;
  }
  
  .alert-glass-success {
    @apply alert-glass border-green-500 text-green-800;
  }
  
  .alert-glass-warning {
    @apply alert-glass border-amber-500 text-amber-800;
  }
  
  .alert-glass-error {
    @apply alert-glass border-red-500 text-red-800;
  }
  
  .alert-glass-info {
    @apply alert-glass border-blue-500 text-blue-800;
  }
}

/* Utility layer */
@layer utilities {
  /* Text gradient utilities */
  .text-gradient-monaco {
    @apply bg-gradient-monaco bg-clip-text text-transparent;
  }
  
  /* Hover lift effect */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
  }
  
  /* Hover scale effect */
  .hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
  }
  
  /* Focus ring Monaco */
  .focus-monaco {
    @apply focus:ring-2 focus:ring-monaco-400 focus:ring-offset-2 focus:outline-none;
  }
  
  /* Loading skeleton */
  .skeleton {
    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 rounded-lg;
  }
}

/* Custom animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Glass morphism scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}