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

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
    box-sizing: border-box;
  }

  body {
    @apply bg-dashboard-background text-foreground;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

@layer components {
  .dashboard-card {
    @apply bg-dashboard-card rounded-xl shadow-sm border border-dashboard-border p-3 md:p-5 transition-all duration-300 hover:shadow-md;
  }

  .dashboard-btn {
    @apply px-3 py-1.5 md:px-4 md:py-2 rounded-lg transition-all duration-200 font-medium focus:outline-none focus:ring-2 focus:ring-dashboard-primary focus:ring-opacity-50 text-sm;
  }

  .dashboard-btn-primary {
    @apply dashboard-btn bg-dashboard-primary text-white hover:opacity-90;
  }

  .dashboard-btn-secondary {
    @apply dashboard-btn bg-dashboard-secondary text-dashboard-primary hover:bg-dashboard-hover;
  }

  .dashboard-label {
    @apply text-xs uppercase tracking-wider text-dashboard-muted font-semibold mb-1 md:mb-2;
  }

  .dashboard-input {
    @apply w-full px-3 py-2 bg-white border border-dashboard-border rounded-lg focus:outline-none focus:ring-2 focus:ring-dashboard-primary focus:ring-opacity-50 text-sm;
  }

  .dashboard-dropdown {
    @apply relative inline-block text-left;
  }

  .dashboard-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }

  .dashboard-badge-primary {
    @apply dashboard-badge bg-dashboard-primary bg-opacity-10 text-dashboard-primary;
  }

  .dashboard-badge-accent {
    @apply dashboard-badge bg-dashboard-accent bg-opacity-10 text-dashboard-accent;
  }

  .container-dashboard {
    @apply w-full mx-auto px-3 md:px-6 max-w-[1200px];
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .btn-mobile-friendly {
    @apply min-h-[40px] min-w-[40px] px-3 py-2;
  }

  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }

  .mobile-card {
    @apply p-3 md:p-5 rounded-lg shadow-sm;
  }

  .safe-area-bottom {
    @apply pb-[env(safe-area-inset-bottom,16px)];
  }

  .top-nav-bar {
    @apply h-14 md:h-16 flex items-center justify-between px-3 md:px-6;
  }
}

/* Glass effect for cards */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Page transitions */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

/* Mobile Navigation Animations */
.mobile-nav-enter {
  transform: translateY(100%);
}

.mobile-nav-enter-active {
  transform: translateY(0);
  transition: transform 300ms ease-out;
}

.mobile-nav-exit {
  transform: translateY(0);
}

.mobile-nav-exit-active {
  transform: translateY(100%);
  transition: transform 300ms ease-in;
}

/* Responsive container */
.container-dashboard {
  @apply w-full mx-auto px-3 md:px-6 max-w-[1200px];
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Responsive text sizes */
.text-responsive-xs {
  @apply text-xs md:text-sm;
}

.text-responsive-sm {
  @apply text-sm md:text-base;
}

.text-responsive-base {
  @apply text-base md:text-lg;
}

.text-responsive-lg {
  @apply text-lg md:text-xl;
}

.text-responsive-xl {
  @apply text-xl md:text-2xl;
}

/* Responsive spacing */
.p-responsive {
  @apply p-3 md:p-6;
}

.py-responsive {
  @apply py-2 md:py-4;
}

.px-responsive {
  @apply px-3 md:px-6;
}

.m-responsive {
  @apply m-2 md:m-4;
}

.my-responsive {
  @apply my-2 md:my-4;
}

.mx-responsive {
  @apply mx-2 md:mx-4;
}

.gap-responsive {
  @apply gap-2 md:gap-4;
}

/* Viewport height fixes for mobile browsers */
.mobile-vh {
  height: 100vh;
  height: -webkit-fill-available; 
  height: stretch;
}

/* Fix for mobile 100vh issues */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

/* Fixed position element that respects safe areas */
.fixed-safe {
  @apply fixed;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
}

/* Improved layout for absolutely positioned elements */
.absolute-center {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}