/**
 * UC-UI Library - Global Styles
 * 
 * This file contains all global styles needed for the UC-UI library.
 * Consumer applications should import this file in their styles.scss:
 * 
 * @import 'uc-ui/styles/uc-ui-global';
 * 
 * Or use the CSS file directly in angular.json:
 * "styles": ["node_modules/uc-ui/styles/uc-ui-global.css"]
 */

/* ============================================================================
   Google Fonts - Material Icons & Roboto
   ============================================================================ */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   Angular Material Theme
   ============================================================================ */
@import '@angular/material/prebuilt-themes/indigo-pink.css';

/* ============================================================================
   CSS Custom Properties (Design System)
   ============================================================================ */
:root {
  /* ========================================================================
     Original Variable Names (used by component SCSS files)
     ======================================================================== */
  /* Primary Colors */
  --primary-color: #3f51b5;
  --primary-light: #757de8;
  --primary-dark: #002984;
  
  /* Accent Colors */
  --accent-color: #ff4081;
  --accent-light: #ff79b0;
  --accent-dark: #c60055;
  
  /* Status Colors */
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
  --info-color: #2196f3;
  
  /* Neutral Colors */
  --background-color: #f5f5f5;
  --surface-color: #ffffff;
  --text-primary: #212121;
  --text-secondary: #757575;
  --border-color: #e0e0e0;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ========================================================================
     UC-UI Namespaced Variables (for new components)
     ======================================================================== */
  /* Primary Colors */
  --uc-primary-color: #1e3a5f;
  --uc-primary-light: #2d5a87;
  --uc-primary-dark: #0d2137;
  
  /* Accent Colors */
  --uc-accent-color: #3b82f6;
  --uc-accent-light: #60a5fa;
  --uc-accent-dark: #2563eb;
  
  /* AI/Gradient Colors */
  --uc-ai-gradient-start: #667eea;
  --uc-ai-gradient-mid: #764ba2;
  --uc-ai-gradient-end: #f093fb;
  
  /* Status Colors */
  --uc-success-color: #16a34a;
  --uc-success-bg: #dcfce7;
  --uc-warning-color: #d97706;
  --uc-warning-bg: #fef3c7;
  --uc-error-color: #dc2626;
  --uc-error-bg: #fee2e2;
  --uc-info-color: #2563eb;
  --uc-info-bg: #dbeafe;
  
  /* GO/NO-GO Colors */
  --uc-go-color: #16a34a;
  --uc-go-bg: #dcfce7;
  --uc-nogo-color: #dc2626;
  --uc-nogo-bg: #fee2e2;
  --uc-hold-color: #d97706;
  --uc-hold-bg: #fef3c7;
  
  /* Risk Rating Colors */
  --uc-risk-low: #16a34a;
  --uc-risk-medium: #d97706;
  --uc-risk-high: #dc2626;
  
  /* Neutral Colors */
  --uc-background-color: #f8fafc;
  --uc-surface-color: #ffffff;
  --uc-text-primary: #1e293b;
  --uc-text-secondary: #64748b;
  --uc-text-muted: #94a3b8;
  --uc-border-color: #e2e8f0;
  --uc-divider-color: #e5e7eb;
  
  /* Shadows */
  --uc-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --uc-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --uc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --uc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --uc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --uc-radius-xs: 2px;
  --uc-radius-sm: 4px;
  --uc-radius-md: 8px;
  --uc-radius-lg: 12px;
  --uc-radius-xl: 16px;
  --uc-radius-2xl: 24px;
  --uc-radius-full: 9999px;
  
  /* Spacing Scale */
  --uc-spacing-1: 4px;
  --uc-spacing-2: 8px;
  --uc-spacing-3: 12px;
  --uc-spacing-4: 16px;
  --uc-spacing-5: 20px;
  --uc-spacing-6: 24px;
  --uc-spacing-8: 32px;
  --uc-spacing-10: 40px;
  --uc-spacing-12: 48px;
  
  /* Typography */
  --uc-font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --uc-font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
  
  /* Font Sizes */
  --uc-text-xs: 0.75rem;
  --uc-text-sm: 0.875rem;
  --uc-text-base: 1rem;
  --uc-text-lg: 1.125rem;
  --uc-text-xl: 1.25rem;
  --uc-text-2xl: 1.5rem;
  --uc-text-3xl: 1.875rem;
  
  /* Font Weights */
  --uc-font-light: 300;
  --uc-font-normal: 400;
  --uc-font-medium: 500;
  --uc-font-semibold: 600;
  --uc-font-bold: 700;
  
  /* Line Heights */
  --uc-leading-tight: 1.25;
  --uc-leading-normal: 1.5;
  --uc-leading-relaxed: 1.75;
  
  /* Transitions */
  --uc-transition-fast: 150ms ease;
  --uc-transition-normal: 200ms ease;
  --uc-transition-slow: 300ms ease;
  
  /* Z-Index Scale */
  --uc-z-dropdown: 1000;
  --uc-z-sticky: 1020;
  --uc-z-fixed: 1030;
  --uc-z-modal-backdrop: 1040;
  --uc-z-modal: 1050;
  --uc-z-popover: 1060;
  --uc-z-tooltip: 1070;
}

/* ============================================================================
   Base Styles
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--uc-font-family);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text-primary);
  background-color: var(--uc-background-color);
}

/* ============================================================================
   Material Icons Helper Classes
   ============================================================================ */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   UC-UI Dialog Styles (for maximized dialog panels)
   ============================================================================ */
.ai-summary-dialog {
  .mat-mdc-dialog-container {
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
  
  .mat-mdc-dialog-surface {
    border-radius: 0 !important;
  }
}

.ai-summary-dialog.maximized {
  .mat-mdc-dialog-container {
    width: 100vw !important;
    height: 100vh !important;
  }
}

/* ============================================================================
   UC-UI Component Base Styles
   ============================================================================ */

/* Card Styles */
.uc-card {
  background: var(--uc-surface-color);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-sm);
  border: 1px solid var(--uc-border-color);
}

/* Button Base */
.uc-btn {
  font-family: var(--uc-font-family);
  font-weight: var(--uc-font-medium);
  border-radius: var(--uc-radius-md);
  transition: all var(--uc-transition-fast);
}

/* AI Gradient Button */
.uc-btn-ai {
  background: linear-gradient(135deg, var(--uc-ai-gradient-start) 0%, var(--uc-ai-gradient-mid) 50%, var(--uc-ai-gradient-end) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  
  &:hover {
    background: linear-gradient(135deg, var(--uc-ai-gradient-mid) 0%, var(--uc-ai-gradient-start) 50%, var(--uc-ai-gradient-end) 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
  }
}

/* Status Badges */
.uc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--uc-radius-full);
  font-size: var(--uc-text-xs);
  font-weight: var(--uc-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uc-badge-success {
  background: var(--uc-success-bg);
  color: var(--uc-success-color);
}

.uc-badge-warning {
  background: var(--uc-warning-bg);
  color: var(--uc-warning-color);
}

.uc-badge-error {
  background: var(--uc-error-bg);
  color: var(--uc-error-color);
}

.uc-badge-info {
  background: var(--uc-info-bg);
  color: var(--uc-info-color);
}

/* GO/NO-GO Decision Styles */
.uc-decision-go {
  background: var(--uc-go-bg);
  color: var(--uc-go-color);
  border-color: var(--uc-go-color);
}

.uc-decision-nogo {
  background: var(--uc-nogo-bg);
  color: var(--uc-nogo-color);
  border-color: var(--uc-nogo-color);
}

.uc-decision-hold {
  background: var(--uc-hold-bg);
  color: var(--uc-hold-color);
  border-color: var(--uc-hold-color);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Text Utilities */
.uc-text-primary { color: var(--uc-text-primary); }
.uc-text-secondary { color: var(--uc-text-secondary); }
.uc-text-muted { color: var(--uc-text-muted); }
.uc-text-success { color: var(--uc-success-color); }
.uc-text-warning { color: var(--uc-warning-color); }
.uc-text-error { color: var(--uc-error-color); }

/* Background Utilities */
.uc-bg-surface { background-color: var(--uc-surface-color); }
.uc-bg-background { background-color: var(--uc-background-color); }

/* Spacing Utilities */
.uc-p-1 { padding: var(--uc-spacing-1); }
.uc-p-2 { padding: var(--uc-spacing-2); }
.uc-p-3 { padding: var(--uc-spacing-3); }
.uc-p-4 { padding: var(--uc-spacing-4); }
.uc-p-6 { padding: var(--uc-spacing-6); }

.uc-m-1 { margin: var(--uc-spacing-1); }
.uc-m-2 { margin: var(--uc-spacing-2); }
.uc-m-3 { margin: var(--uc-spacing-3); }
.uc-m-4 { margin: var(--uc-spacing-4); }
.uc-m-6 { margin: var(--uc-spacing-6); }

/* Flexbox Utilities */
.uc-flex { display: flex; }
.uc-flex-col { flex-direction: column; }
.uc-items-center { align-items: center; }
.uc-justify-center { justify-content: center; }
.uc-justify-between { justify-content: space-between; }
.uc-gap-1 { gap: var(--uc-spacing-1); }
.uc-gap-2 { gap: var(--uc-spacing-2); }
.uc-gap-3 { gap: var(--uc-spacing-3); }
.uc-gap-4 { gap: var(--uc-spacing-4); }

/* Shadow Utilities */
.uc-shadow-sm { box-shadow: var(--uc-shadow-sm); }
.uc-shadow-md { box-shadow: var(--uc-shadow-md); }
.uc-shadow-lg { box-shadow: var(--uc-shadow-lg); }

/* Border Utilities */
.uc-rounded-sm { border-radius: var(--uc-radius-sm); }
.uc-rounded-md { border-radius: var(--uc-radius-md); }
.uc-rounded-lg { border-radius: var(--uc-radius-lg); }
.uc-rounded-full { border-radius: var(--uc-radius-full); }

/* ============================================================================
   Animation Classes
   ============================================================================ */
@keyframes uc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes uc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes uc-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.uc-animate-spin {
  animation: uc-spin 1s linear infinite;
}

.uc-animate-pulse {
  animation: uc-pulse 2s ease-in-out infinite;
}

.uc-animate-bounce {
  animation: uc-bounce 1s ease-in-out infinite;
}

/* Spin icon for loading states */
.spin-icon {
  animation: uc-spin 1s linear infinite;
}

/* Pulse ring effect */
.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: uc-pulse-ring 1.5s ease-out infinite;
}

@keyframes uc-pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ============================================================================
   Scrollbar Styles
   ============================================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  
  &:hover {
    background: #a1a1a1;
  }
}

/* ============================================================================
   Dialog Overrides (for AI Summary Dialog)
   ============================================================================ */
.ai-summary-dialog {
  .mat-mdc-dialog-container {
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    transition: all 0.3s ease;
  }
  
  &.maximized {
    .mat-mdc-dialog-container {
      border-radius: 0 !important;
    }
  }
}

/* Maximized dialog overlay - ensures full screen */
.ai-summary-dialog.maximized {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw !important;
  height: 100vh !important;

  .mat-mdc-dialog-surface {
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}

/* ============================================================================
   Shimmer Animation (for loading states)
   ============================================================================ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ============================================================================
   Flex Utilities (original naming for component compatibility)
   ============================================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ============================================================================
   Status Badge (original styling)
   ============================================================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  
  &.status-green {
    background-color: #e8f5e9;
    color: #2e7d32;
  }
  
  &.status-yellow {
    background-color: #fff3e0;
    color: #ef6c00;
  }
  
  &.status-red {
    background-color: #ffebee;
    color: #c62828;
  }
}

/* ============================================================================
   Utility Classes (original naming)
   ============================================================================ */
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-info { color: var(--info-color) !important; }

.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-error { background-color: var(--error-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* ============================================================================
   Card Styles
   ============================================================================ */
.custom-card {
  background: var(--surface-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-md);
}

/* ============================================================================
   Global Markdown Styling for ngx-markdown
   ============================================================================ */
markdown, .markdown-content, .markdown-wrapper {
  /* Table Styling */
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    
    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: top;
      line-height: 1.5;
    }
    
    th {
      background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
      font-weight: 600;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    
    td {
      background: white;
      color: #374151;
      
      &:first-child {
        font-weight: 500;
        color: #1f2937;
      }
    }
    
    tbody tr {
      transition: background-color 0.15s ease;
      
      &:nth-child(even) td {
        background: #f8fafc;
      }
      
      &:hover td {
        background: #e0f2fe;
      }
      
      &:last-child td {
        border-bottom: none;
      }
    }
  }
  
  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: #1f2937;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
  }
  
  h1 { font-size: 1.75rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  
  /* Paragraphs */
  p {
    margin: 0.75em 0;
    line-height: 1.7;
    color: #374151;
  }
  
  /* Lists */
  ul, ol {
    padding-left: 1.5em;
    margin: 0.75em 0;
    
    li {
      margin: 0.5em 0;
      line-height: 1.6;
    }
  }
  
  /* Horizontal rule */
  hr {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 1.5em 0;
  }
  
  /* Bold text with special highlighting */
  strong {
    font-weight: 600;
    color: #1e3a5f;
  }
  
  /* Italic text */
  em {
    font-style: italic;
    color: #6b7280;
  }
  
  /* Code blocks */
  code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875em;
    color: #d63384;
  }
  
  pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    
    code {
      background: transparent;
      color: inherit;
      padding: 0;
    }
  }
  
  /* Blockquotes */
  blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 1em 0;
    color: #6b7280;
    font-style: italic;
    background: #f8fafc;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
  }
}

/* ============================================================================
   Print Styles (for PDF export)
   ============================================================================ */
@media print {
  .uc-no-print, .no-print {
    display: none !important;
  }
  
  .uc-print-break-before {
    page-break-before: always;
  }
  
  .uc-print-break-after {
    page-break-after: always;
  }
  
  .uc-print-avoid-break {
    page-break-inside: avoid;
  }
}