/* resources/css/app.css */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');
@import "tailwindcss";
@config "../../tailwind.config.js";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Brand Palette (Based on Image) */
  --color-page-bg: #E3EBE8;
  --color-sidebar-bg: #3D4E4B;
  --color-accent-gold: #D4A017;
  --color-accent-teal: #21A59F;

  /* Dark Mode Adjustments */
  --color-dark-bg: #1A2120;
  --color-dark-card: #ffffff;
  --color-dark-border: #f3f4f6;
  --color-dark-text: #E3EBE8;

  --color-primary-500: #D4A017;
  --color-primary-600: #B88B14;

  /* Sidebar Specific */
  --color-sidebar-text: #E3EBE8;
  --color-sidebar-active-bg: #E3EBE8;
  --color-sidebar-active-text: #3D4E4B;

  /* Typography */
  --font-sans: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Lexend', sans-serif;

  /* Premium Radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-2xl: 3rem;

  /* Shadows */
  --shadow-card: 0 10px 40px oklch(23% 0.05 180 / 0.04), 0 2px 8px oklch(23% 0.05 180 / 0.02);
  --shadow-modal: 0 30px 100px oklch(0% 0 0 / 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-page-bg);
  color: #2D3748;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

/* Removed global .bg-white override to allow explicit white cards */

/* Removed aggressive overrides to restore theme consistency */
.dark .text-gray-400,
.dark .text-gray-500 {
  color: #94a3a8;
}

.dark .text-[#3D4E4B] {
  color: var(--color-dark-text);
}

.dark .bg-gray-50,
.dark .bg-gray-50\/30,
.dark .bg-gray-50\/50,
.dark .bg-gray-50\/20 {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3D4E4B22;
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #3D4E4B44;
}

/* Dashboard Card Variants */
.card-gold {
  background-color: var(--color-accent-gold);
  color: white;
}

.card-teal {
  background-color: var(--color-accent-teal);
  color: white;
}

.card-dark {
  background-color: var(--color-sidebar-bg);
  color: white;
}

.card-white {
  background-color: white;
  color: #2D3748;
}

/* ─── Smooth Animation System ──────────────────────────────────────────────
   Replaces animate.css. All animations use:
   - Small translate distances (10-16px) — not 100% like animate.css
   - cubic-bezier(0.16, 1, 0.3, 1) — ease-out-expo, natural deceleration
   - GPU-composited properties only: opacity + transform
   ─────────────────────────────────────────────────────────────────────── */

@keyframes _fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes _fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes _fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes _fade-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes _fade-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes _zoom-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: none; }
}

@keyframes _shake {
  0%,100% { transform: none;           }
  18%     { transform: translateX(-7px); }
  36%     { transform: translateX(6px);  }
  54%     { transform: translateX(-4px); }
  72%     { transform: translateX(3px);  }
}

@keyframes _page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes _shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-shimmer {
  background: linear-gradient(90deg, 
    rgba(0,0,0,0.03) 25%, 
    rgba(0,0,0,0.06) 37%, 
    rgba(0,0,0,0.03) 63%
  );
  background-size: 200% 100%;
  animation: _shimmer 1.4s ease-in-out infinite;
}

.dark .anim-shimmer {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.03) 25%, 
    rgba(255,255,255,0.06) 37%, 
    rgba(255,255,255,0.03) 63%
  );
  background-size: 200% 100%;
}

.anim-fade  { animation: _fade-in   0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-up    { animation: _fade-up   0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-down  { animation: _fade-down 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-left  { animation: _fade-left 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-right { animation: _fade-right 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-zoom  { animation: _zoom-in   0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-shake { animation: _shake     0.6s  cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.anim-page  { animation: _page-in   0.5s  cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Authentication Styling */
.auth-card {
  background-color: white;
  border-radius: 2.5rem;
  box-shadow: 0 30px 60px -12px rgba(61, 78, 75, 0.15), 0 18px 36px -18px rgba(61, 78, 75, 0.1);
}

.auth-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #111827;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow  0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-sans);
}

.auth-input::placeholder {
  color: #d1d5db;
}

.auth-input:focus {
  border-color: #3D4E4B;
  box-shadow: 0 0 0 3px rgba(61, 78, 75, 0.1);
  outline: none;
}

/* App-wide input field — same border/shape as auth-input, gold accent on focus */
.input-field {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-sans);
  outline: none;
}
.dark .input-field {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
.input-field::placeholder {
  color: #d1d5db;
  font-weight: 400;
}
.input-field:focus {
  border-color: #D4A017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}
.input-field.is-error {
  border-color: #fca5a5;
  background-color: #fef2f2;
}
.dark .input-field.is-error {
  background-color: rgba(239, 68, 68, 0.05);
}