/* Custom CSS cho MAIA Medical Invoice App theo nhận diện thương hiệu Logo MAIA CENTER */

:root {
  --maia-teal: #008f8c;
  --maia-teal-dark: #016866;
  --maia-teal-light: #e6f7f6;
  --maia-pink: #e52b75;
  --maia-pink-dark: #b81755;
  --maia-pink-light: #fdf2f8;
  --maia-gradient: linear-gradient(135deg, #008f8c 0%, #a43a85 50%, #e52b75 100%);
  --maia-gradient-hover: linear-gradient(135deg, #017876 0%, #902e73 50%, #cc1d62 100%);
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
}

/* Gradient chữ thương hiệu MAIA */
.text-gradient-maia {
  background: var(--maia-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nút bấm Gradient MAIA */
.btn-maia-gradient {
  background: var(--maia-gradient);
  color: #ffffff;
  transition: all 0.25s ease;
}

.btn-maia-gradient:hover {
  background: var(--maia-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(229, 43, 117, 0.3), 0 4px 6px -4px rgba(0, 143, 140, 0.3);
}

/* Tab buttons active state theo màu logo MAIA */
.tab-btn.active {
  background: var(--maia-gradient);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(229, 43, 117, 0.25);
}

/* Thẻ Danh Mục khi trỏ chuột vào (hover) hoặc khi mở menu có màu gradient tương tự thẻ bên trái */
#btn-tab-category:hover,
#category-dropdown-wrapper:hover #btn-tab-category,
#category-dropdown-wrapper:has(#category-dropdown-menu.is-open) #btn-tab-category {
  background: var(--maia-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(229, 43, 117, 0.25);
}

#btn-tab-category:hover [data-lucide],
#category-dropdown-wrapper:hover #btn-tab-category [data-lucide],
#btn-tab-category.active [data-lucide],
#category-dropdown-wrapper:has(#category-dropdown-menu.is-open) #btn-tab-category [data-lucide] {
  color: #ffffff !important;
}

.tab-btn.active span[class*="bg-teal-100"],
.tab-btn.active span[class*="bg-pink-100"] {
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content:not(.hidden) {
  animation: fadeIn 0.25s ease-out;
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-scale-up {
  animation: scaleUp 0.2s ease-out;
}

/* Table styling */
table th {
  letter-spacing: 0.025em;
}

table tr:hover td {
  background-color: #f8fafc;
}

/* Drag & Drop active styles */
#drop-zone.dragover {
  border-color: var(--maia-pink);
  background-color: #fdf2f8;
  transform: scale(1.008);
}

/* Dropdown Danh Mục */
#category-dropdown-wrapper:hover #category-dropdown-menu,
#category-dropdown-menu.is-open {
  display: block !important;
}

#category-dropdown-wrapper:hover #category-chevron {
  transform: rotate(180deg);
}