/* ============================================================= */
/* EasyFBR — Global Styles (Namecheap Version)                   */
/* Now with clean white login page background                   */
/* ============================================================= */

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

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

:root {
  --primary: #4361ee;
  --primary-hover: #3a56d4;
  --secondary: #7209b7;
  --accent: #f72585;
  --success: #06d6a0;
  --warning: #ff9f1c;
  --danger: #ef476f;
  --sidebar: #1e1e2f;
  --sidebar-foreground: #e2e8f0;
  --background: #f1f5f9;        /* Light gray-blue for dashboard */
  --card: #ffffff;
  --border: #e2e8f0;
  --muted: #64748b;
}

.dark {
  --primary: #5d7aff;
  --sidebar: #0f0f1a;
  --background: #0f0f1a;
  --card: #1a1a2e;
  --border: #334155;
  --muted: #94a3b8;
}

/* ============ GLOBAL STYLES ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--background);
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
}

/* ============ LOGIN PAGE — CLEAN WHITE BACKGROUND ============ */
body.login-page,
body.login-page::before {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  background-attachment: fixed;
}

.login-container {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
}

/* Optional: Add subtle pattern or blur effect */
body.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, #e0e7ff 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, #c7d2fe 0%, transparent 50%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

/* ============ REST OF YOUR STYLES (buttons, cards, etc.) ============ */
.btn-primary {
  @apply bg-[var(--primary)] hover:bg-[var(--primary-hover)] text-white font-semibold py-3 px-6 rounded-lg transition shadow-md hover:shadow-lg;
}
.btn-success { @apply bg-[var(--success)] hover:bg-[#05b885] text-white font-semibold py-3 px-6 rounded-lg transition shadow-md; }
.btn-warning { @apply bg-[var(--warning)] hover:bg-[#e68a00] text-white font-semibold py-3 px-6 rounded-lg transition shadow-md; }
.btn-danger { @apply bg-[var(--danger)] hover:bg-[#d93a5e] text-white font-semibold py-3 px-6 rounded-lg transition shadow-md; }
.btn-outline { @apply border-2 border-[var(--primary)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-white font-semibold py-3 px-6 rounded-lg transition; }

.card {
  @apply bg-[var(--card)] rounded-xl shadow-lg border border-[var(--border)] p-6 transition hover:shadow-xl;
}
.dashboard-card {
  @apply card hover:-translate-y-1 transition-all duration-300;
}

.badge {
  @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
}
.badge-success { @apply bg-green-100 text-green-800; }
.badge-warning { @apply bg-yellow-100 text-yellow-800; }
.badge-danger  { @apply bg-red-100 text-red-800; }
.badge-info    { @apply bg-blue-100 text-blue-800; }
.badge-pending { @apply bg-orange-100 text-orange-800; }

.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-foreground);
}
.sidebar a {
  @apply flex items-center gap-3 px-4 py-3 rounded-lg transition hover:bg-white/10;
}
.sidebar .active {
  @apply bg-white/15 font-semibold;
}

h1 { @apply text-3xl font-bold text-gray-900; }
h2 { @apply text-2xl font-bold text-gray-800; }
.text-muted { @apply text-[var(--muted)]; }

.text-center a.inline-block {
  @apply inline-block;
}

@media (max-width: 768px) {
  h1 { @apply text-2xl; }
}