/*
 * Console Application Stylesheet
 * Custom styles for Console application
 *
 * Note: Tailwind CSS is loaded separately via tailwind.css in the layout
 */

/* ============================================
 * Font Loading
 * ============================================ */

/* All Trim font @font-face declarations are loaded from app/assets/stylesheets/custom.css */
/* This stylesheet is now included in all Console layouts, avoiding path resolution issues */

/* Custom CSS Variables for Design System */
:root {
  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Trim', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Trim Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-poster: 'Trim Poster', 'Trim', ui-sans-serif, system-ui, sans-serif;

  /* Spacing scale (based on 0.25rem = 4px) */
  --spacing-unit: 0.25rem;

  /* Responsive breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Console Dark Theme Colors (Tailwind v4 @theme directive) */
@theme {
  /* Console color palette - backgrounds */
  --color-console-bg: #0e0f0f;
  --color-console-bg-accent: #1a1c1c;
  --color-console-bg-hover: #161818;

  /* Console color palette - borders */
  --color-console-border: #222424;
  --color-console-border-dark: #1a1c1c;
  --color-console-border-light: #292c2c;

  /* Console color palette - text */
  --color-console-foreground: #e7e9e2;
  --color-console-muted: #8b8f8f;

  /* Console color palette - primary (green) */
  --color-console-primary: #40a967;
  --color-console-primary-light: #66b880;
  --color-console-primary-dark: #30844f;

  /* Console color palette - secondary (dark buttons) */
  --color-console-secondary: #131414;
  --color-console-secondary-foreground: #f3f4f0;

  /* Console color palette - form inputs */
  --color-console-input: #1a1c1c;

  /* Console color palette - card */
  --color-console-card: #0e0f0f;
  --color-console-card-foreground: #e7e9e2;

  /* Console color palette - link */
  --color-console-link: #66b880;

  /* Console color palette - error */
  --color-console-error: #ef4444;
}

/* Note: Base typography and utility classes are provided by Tailwind CSS */
/* Add any Console-specific overrides below */

/* Font Family Utility Classes */
.font-heading {
  font-family: var(--font-heading) !important;
}

.font-poster {
  font-family: var(--font-poster) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

/* Main Content Area Background Pattern */
.console-main-bg {
  position: relative;
}

.console-main-bg::before {
  content: '';
  position: fixed;
  top: 59px; /* Below header */
  left: 80px; /* Right of sidebar */
  right: 0;
  bottom: 0;
  opacity: 0.7;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(34, 36, 36, 0.5) 99px, rgba(34, 36, 36, 0.5) 100px),
    repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(34, 36, 36, 0.5) 99px, rgba(34, 36, 36, 0.5) 100px);
  background-size: 100px 100px;
  z-index: 0;
}

.console-main-bg::after {
  content: '';
  position: fixed;
  top: 59px; /* Below header */
  left: 80px; /* Right of sidebar */
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, #090a0a 60%);
  pointer-events: none;
  z-index: 1;
}

/* Ellipse glow effect at top of main content */
.console-main-bg-glow {
  position: fixed;
  top: -20px; /* Adjusted for fixed positioning */
  left: 380px; /* 80px sidebar + 300px offset */
  width: 1319px;
  height: 150px;
  background: radial-gradient(ellipse at center, rgba(64, 169, 103, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Animation Classes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Auth Page Background Pattern */
.auth-grid-pattern {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(26, 28, 28, 0.5) 99px, rgba(26, 28, 28, 0.5) 100px),
    repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(26, 28, 28, 0.5) 99px, rgba(26, 28, 28, 0.5) 100px);
  background-size: 100px 100px;
}

/* Auth Page Ellipse Glow Effect */
.auth-ellipse-glow {
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1336px;
  height: 630px;
  background: radial-gradient(ellipse at center, rgba(64, 169, 103, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}