@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --app-bg: var(--bg-primary);
  --card-bg: rgba(250, 249, 246, 0.95);
  --glass-bg: rgba(250, 249, 246, 0.85);
  --glass-border: rgba(92, 64, 51, 0.2);
  
  /* Gradient accents for a vibrant, professional feel */
  --grad-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  --grad-accent: linear-gradient(135deg, #7A5C43, var(--accent-primary));
  --grad-hover: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.08);
}

body {
  background-color: var(--app-bg) !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

/* Redesigning Cards */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease !important;
}
.card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* Navbar */
.navbar {
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Buttons */
.btn-primary {
  background: var(--grad-accent) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(92, 64, 51, 0.2) !important;
}
.btn-primary:hover {
  background: var(--grad-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(92, 64, 51, 0.3) !important;
}

/* Data Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
table th {
  background: var(--grad-primary) !important;
  color: white !important;
  border: none !important;
  padding: 1.2rem 1rem !important;
  font-weight: 500 !important;
}
table td {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1rem !important;
}
table tr:hover td {
  background-color: var(--bg-secondary) !important;
}

/* Typography tweaks */
h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* Tabs */
.tabs .tab.active {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary) !important;
}