/* RestaurantFlow - Main CSS File */

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Global Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #FF5A5F;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e04347;
}

/* Common Components */
.btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition duration-300 hover:bg-opacity-90 hover:shadow-lg;
}

.btn-secondary {
  @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition duration-300 hover:bg-opacity-90 hover:shadow-lg;
}

.btn-outline {
  @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium transition duration-300 hover:bg-primary hover:text-white hover:shadow-lg;
}

.card {
  @apply bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-xl;
}

.section-heading {
  @apply text-3xl md:text-4xl font-bold mb-6 text-secondary;
}

.gradient-text {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent;
}

/* Feature Card */
.feature-card {
  @apply p-6 rounded-xl transition-all duration-300 border border-gray-100;
}

.feature-card:hover {
  @apply transform -translate-y-2 shadow-xl border-primary border-opacity-50;
}

.feature-icon {
  @apply w-16 h-16 rounded-full flex items-center justify-center text-2xl mb-4 text-white;
}

/* Custom Tooltip */
.tooltip {
  @apply relative inline-block;
}

.tooltip .tooltip-text {
  @apply invisible absolute z-10 text-center text-white text-sm rounded-md py-2 px-4 bottom-full left-1/2 transform -translate-x-1/2 mb-1 opacity-0 transition-opacity duration-300 bg-dark;
  width: 140px;
}

.tooltip:hover .tooltip-text {
  @apply visible opacity-100;
}

/* Table Status Indicators */
.status-available {
  @apply bg-green-100 text-green-800 border-green-300;
}

.status-occupied {
  @apply bg-red-100 text-red-800 border-red-300;
}

.status-reserved {
  @apply bg-yellow-100 text-yellow-800 border-yellow-300;
}

.status-maintenance {
  @apply bg-gray-100 text-gray-800 border-gray-300;
}

/* Responsive Table */
.responsive-table {
  @apply w-full border-collapse;
}

.responsive-table th {
  @apply p-3 bg-gray-100 text-left text-gray-600 font-semibold border-b;
}

.responsive-table td {
  @apply p-3 border-b border-gray-200;
}

.responsive-table tr:hover {
  @apply bg-gray-50;
}

/* Dashboard Stat Card */
.stat-card {
  @apply bg-white p-6 rounded-xl shadow-md flex flex-col;
}

.stat-value {
  @apply text-3xl font-bold mt-2 mb-1;
}

.stat-label {
  @apply text-gray-500 text-sm;
}

.stat-change {
  @apply text-sm mt-2 flex items-center;
}

.stat-change.positive {
  @apply text-green-600;
}

.stat-change.negative {
  @apply text-red-600;
}

/* Interactive Timeline */
.timeline {
  @apply relative border-l-2 border-gray-200 ml-3 pl-6 py-2;
}

.timeline-item {
  @apply relative mb-8;
}

.timeline-point {
  @apply absolute -left-10 w-4 h-4 rounded-full bg-primary border-4 border-white;
}

.timeline-date {
  @apply text-sm text-gray-500 mb-1;
}

.timeline-content {
  @apply bg-white p-4 rounded-lg shadow-sm;
}

/* Glass Morphism Effect */
.glass-card {
  @apply bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-white border-opacity-20 rounded-xl shadow-lg;
}

/* 3D Button Effect */
.btn-3d {
  @apply relative px-6 py-3 bg-primary text-white rounded-lg font-medium transition duration-300;
  transform-style: preserve-3d;
  transform: perspective(1000px) translateZ(0);
}

.btn-3d:hover {
  transform: perspective(1000px) translateZ(10px);
  @apply shadow-xl;
}

.btn-3d:active {
  transform: perspective(1000px) translateZ(5px);
}

/* Floating Labels for Form Inputs */
.float-input {
  @apply relative;
}

.float-input input,
.float-input textarea {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 transition duration-200;
}

.float-input label {
  @apply absolute left-3 px-1 transition-all duration-200 pointer-events-none text-gray-500 bg-white;
  top: 50%;
  transform: translateY(-50%);
}

.float-input input:focus ~ label,
.float-input input:not(:placeholder-shown) ~ label,
.float-input textarea:focus ~ label,
.float-input textarea:not(:placeholder-shown) ~ label {
  @apply text-primary text-sm;
  top: 0;
}

/* Special Element - Blob Background */
.blob-bg {
  @apply absolute -z-10 w-[500px] h-[500px] opacity-10 blur-3xl rounded-full;
  background: radial-gradient(circle, rgba(255,90,95,1) 0%, rgba(0,194,179,1) 100%);
  animation: blob-move 20s infinite alternate ease-in-out;
}

@keyframes blob-move {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(5%, 10%) scale(1.1);
  }
  66% {
    transform: translate(-10%, 5%) scale(0.9);
  }
  100% {
    transform: translate(5%, -5%) scale(1.05);
  }
}