@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--md-sys-color-background);
  --color-foreground: var(--md-sys-color-on-background);
  --font-sans: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --color-card: var(--md-sys-color-surface-container);
  --color-card-foreground: var(--md-sys-color-on-surface);
  --color-popover: var(--md-sys-color-surface-container-high);
  --color-popover-foreground: var(--md-sys-color-on-surface);

  --color-primary: var(--md-sys-color-primary);
  --color-primary-foreground: var(--md-sys-color-on-primary);
  --color-secondary: var(--md-sys-color-secondary);
  --color-secondary-foreground: var(--md-sys-color-on-secondary);
  --color-muted: var(--md-sys-color-surface-container-high);
  --color-muted-foreground: var(--md-sys-color-on-surface-variant);
  --color-accent: var(--md-sys-color-primary-container);
  --color-accent-foreground: var(--md-sys-color-on-primary-container);

  --color-border: var(--md-sys-color-outline-variant);
  --color-input: var(--md-sys-color-outline);
  --color-ring: var(--md-sys-color-primary);
  --color-destructive: var(--md-sys-color-error);

  --color-sidebar: var(--md-sys-color-surface-container-low);
  --color-sidebar-foreground: var(--md-sys-color-on-surface);
  --color-sidebar-primary: var(--md-sys-color-primary-container);
  --color-sidebar-primary-foreground: var(--md-sys-color-on-primary-container);
  --color-sidebar-accent: var(--md-sys-color-surface-container-high);
  --color-sidebar-accent-foreground: var(--md-sys-color-on-surface);
  --color-sidebar-border: var(--md-sys-color-outline-variant);
  --color-sidebar-ring: var(--md-sys-color-primary);

  --color-brand: var(--md-sys-color-primary);
  --color-brand-foreground: var(--md-sys-color-on-primary);

  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 6px);
  --radius-2xl: calc(var(--radius) + 12px);
  --radius-3xl: calc(var(--radius) + 18px);
}

:root {
  --radius: 1rem;
  --nav-rail-width: 80px;
  --nav-rail-expanded-width: 280px;
  --nav-bar-height: 80px;
  
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
  --md-sys-motion-duration-medium: 200ms;
  --md-sys-motion-duration-long: 400ms;
}

@layer base {
  * {
    @apply border-border outline-ring/45;
  }

  html,
  body {
    @apply h-full overflow-x-hidden;
    background-color: var(--md-sys-color-background);
  }

  body {
    @apply bg-background text-foreground antialiased;
    text-rendering: optimizeLegibility;
    background-image:
      radial-gradient(
        circle at 12% 14%,
        color-mix(in oklab, var(--md-sys-color-primary-container) 65%, transparent),
        transparent 48%
      ),
      radial-gradient(
        circle at 90% -2%,
        color-mix(in oklab, var(--md-sys-color-surface-variant) 78%, transparent),
        transparent 38%
      ),
      linear-gradient(165deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
    background-attachment: fixed;
  }

  .dark body {
    background-image:
      radial-gradient(
        circle at 10% 8%,
        color-mix(in oklab, var(--md-sys-color-primary-container) 40%, transparent),
        transparent 44%
      ),
      radial-gradient(
        circle at 90% 0%,
        color-mix(in oklab, var(--md-sys-color-surface-variant) 56%, transparent),
        transparent 36%
      ),
      linear-gradient(170deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
  }
}

@layer components {
  .surface-card {
    @apply bg-card/40 backdrop-blur-md border border-white/10 text-card-foreground rounded-3xl p-6 shadow-sm transition-all duration-200;
  }

  .surface-card-muted {
    @apply bg-muted/50 rounded-2xl transition-all duration-200;
  }

  .surface-hero {
    @apply bg-muted/60 backdrop-blur-xl border border-white/5 rounded-[2rem] shadow-sm;
  }

  .m3-badge {
    @apply absolute -top-1 -right-1 bg-destructive text-white text-[10px] font-medium min-w-[16px] h-4 rounded-full flex items-center justify-center px-1;
  }

  .page-enter {
    animation: fadeIn var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-emphasized);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Navigation System */

.navigation-bar {
  @apply fixed left-0 right-0 bottom-0 h-[var(--nav-bar-height)] bg-background/80 backdrop-blur-xl flex justify-around items-center px-4 z-50 transition-transform duration-300 border-t border-white/5;
}

.navigation-bar.hidden {
  @apply translate-y-full;
}

.navigation-rail {
  @apply fixed left-0 top-0 bottom-0 w-[var(--nav-rail-width)] bg-sidebar/40 backdrop-blur-md flex flex-col py-4 border-r border-white/5 z-50 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)] overflow-hidden;
}

.navigation-rail.expanded {
  @apply w-[var(--nav-rail-expanded-width)];
}

.nav-item {
  @apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-300 rounded-2xl mx-2;
}

.nav-item:hover {
  @apply bg-sidebar-accent/50 text-foreground;
}

.nav-item.active {
  @apply bg-sidebar-primary text-sidebar-primary-foreground font-semibold;
}

.navigation-bar .nav-item {
  @apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16 bg-transparent;
}

.navigation-bar .nav-item.active {
  @apply bg-transparent text-primary;
}

.nav-item-icon-wrapper {
  @apply w-12 h-8 flex items-center justify-center rounded-2xl transition-all duration-300 relative;
}

.navigation-bar .nav-item.active .nav-item-icon-wrapper {
  @apply bg-primary/10;
}

.nav-item-label {
  @apply text-[11px] font-medium whitespace-nowrap transition-all duration-300;
}

.navigation-rail.expanded .nav-item {
  @apply h-12 rounded-2xl mx-4 px-4;
}

.navigation-rail.expanded .nav-item-label {
  @apply text-sm ml-3 flex-1 opacity-100;
}

/* Submenu */

.submenu {
  @apply flex flex-col pl-14 pr-4 gap-1 mb-2 overflow-hidden transition-all duration-300;
}

.submenu-item {
  @apply h-10 flex items-center no-underline text-muted-foreground text-sm rounded-xl px-4 transition-all duration-200;
}

.submenu-item:hover {
  @apply bg-sidebar-accent/30 text-foreground;
}

.submenu-item.active {
  @apply bg-primary/10 text-primary font-medium;
}

/* Main Content with Padding Fix #4 */
.main-content {
  @apply flex-1 p-6 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)];
  padding-top: 2rem;
}

@media (min-width: 600px) {
  .navigation-bar { display: none; }
  .main-content { 
    margin-left: var(--nav-rail-width); 
    padding-top: 3rem;
  }
}

@media (min-width: 1240px) {
  .main-content.with-expanded-rail { 
    margin-left: var(--nav-rail-expanded-width); 
    padding-top: 4rem;
  }
}

@media (max-width: 599px) {
  .main-content { 
    padding-bottom: calc(var(--nav-bar-height) + 2rem); 
    padding-top: 2rem;
  }
}