/* Global styles and PrimeNG theme setup */

/* Import PrimeNG Theme (Lara Dark with Purple accent) */
@use "primeicons/primeicons.css";
@use "primeflex/primeflex.css";

/* Global Variables */
:root {
  /* Base application variables */
  --app-font-family:  Poppins, sans-serif;
  --app-primary: var(--primary-color);
  --app-card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
  --app-content-padding: 1.5rem;
  --app-border-radius: 6px;
  --app-transition-speed: 0.3s;
  
  /* Purple Theme Colors - Default values that will be overridden by ThemeService */
  --primary-color: #7E57C2;
  --primary-color-text: #ffffff;
  --primary-dark: #5E35B1;
  --primary-light: #B39DDB;
  
  /* Dark theme base colors */
  --surface-ground: #121212;
  --surface-section: #1E1E1E;
  --surface-card: #262626;
  --surface-overlay: #2A2A2A;
  --surface-border: #383838;
  
  --text-color: #F5F5F5;
  --text-color-secondary: #BDBDBD;
  --text-color-disabled: #757575;
  
  /* App-specific accent colors */
  --accent-purple-50: #EDE7F6;
  --accent-purple-100: #D1C4E9;
  --accent-purple-200: #B39DDB;
  --accent-purple-300: #9575CD;
  --accent-purple-400: #7E57C2; /* Main accent */
  --accent-purple-500: #673AB7;
  --accent-purple-600: #5E35B1;
  --accent-purple-700: #512DA8;
  --accent-purple-800: #4527A0;
  --accent-purple-900: #311B92;
  
  /* Sidebar Layout Variables */
  --sidebar-width: 270px;                    /* Single source for both desktop/mobile */
  --sidebar-width-collapsed: 70px;
  --sidebar-height: 100vh;
  --sidebar-z-index: 1000;
  
  /* Sidebar Visual Variables */
  --sidebar-background: linear-gradient(135deg, #2c1a47 0%, #1a0e29 50%, #1e1230 75%, rgba(30, 18, 48, 0.95) 100%);
  --sidebar-border: 1px solid rgba(142, 68, 173, 0.15);
  --sidebar-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
  --sidebar-backdrop-filter: blur(5px);
  
  /* Sidebar Top Line */
  --sidebar-top-line-height: 1px;
  --sidebar-top-line-background: linear-gradient(90deg, rgba(142, 68, 173, 0.6), rgba(103, 58, 183, 0.6));
  --sidebar-top-line-shadow: 0 0 8px rgba(142, 68, 173, 0.4);
  
  /* Logo Variables */
  --sidebar-logo-size: 50px;
  --sidebar-logo-background: rgba(142, 68, 173, 0.1);
  --sidebar-logo-border: 1px solid rgba(142, 68, 173, 0.3);
  --sidebar-logo-icon-size: 30px;
  
  /* Navigation Variables */
  --sidebar-nav-padding: 1rem 0;
  --sidebar-nav-item-padding: 10px 20px;
  --sidebar-nav-icon-wrapper-size: 48px;
  --sidebar-nav-icon-size: 22px;
  --sidebar-nav-border-radius: 0 6px 6px 0;
  --sidebar-nav-hover-transform: translateX(4px);
  
  /* Text & Color Variables */
  --sidebar-text-white: #ffffff;
  --sidebar-text-gradient: linear-gradient(to right, #fff, #bbb);
  --sidebar-text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  --sidebar-logo-glow: 0 0 10px 6px rgba(89, 16, 185, 0.5);
  --sidebar-heart-color: rgb(147, 0, 255);
  --sidebar-heart-shadow: 0 0 6px rgba(239, 68, 68, 0.7), 0 0 12px rgba(239, 68, 68, 0.5);
  
  /* Animation Variables */
  --sidebar-transition-duration: 0.3s;
  --sidebar-transition-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
  --sidebar-animation-easing: ease-in-out;
  
  /* Standard color palette for logs and events */
  --yellow-50: #fffde7;
  --yellow-100: #fff9c4;
  --yellow-200: #fff59d;
  --yellow-300: #fff176;
  --yellow-400: #ffee58;
  --yellow-500: #ffeb3b;
  --yellow-600: #fdd835;
  --yellow-700: #fbc02d;
  --yellow-800: #f9a825;
  --yellow-900: #f57f17;
  
  --blue-50: #e3f2fd;
  --blue-100: #bbdefb;
  --blue-200: #90caf9;
  --blue-300: #64b5f6;
  --blue-400: #42a5f5;
  --blue-500: #2196f3;
  --blue-600: #1e88e5;
  --blue-700: #1976d2;
  --blue-800: #1565c0;
  --blue-900: #0d47a1;
  
  --red-50: #ffebee;
  --red-100: #ffcdd2;
  --red-200: #ef9a9a;
  --red-300: #e57373;
  --red-400: #ef5350;
  --red-500: #f44336;
  --red-600: #e53935;
  --red-700: #d32f2f;
  --red-800: #c62828;
  --red-900: #b71c1c;
  
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-200: #ffcc80;
  --orange-300: #ffb74d;
  --orange-400: #ffa726;
  --orange-500: #ff9800;
  --orange-600: #fb8c00;
  --orange-700: #f57c00;
  --orange-800: #ef6c00;
  --orange-900: #e65100;
  
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
}

/* Base Styles */
html {
  font-size: 14px;
}

body {
  font-family: var(--app-font-family);
  margin: 0;
  padding: 0;
  background-color: var(--surface-ground);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

.grid-container {
  margin-bottom: 1rem;
}

/* PrimeNG Component Customizations */

/* Card styles */
.p-card {
  border-radius: var(--border-radius);
  box-shadow: var(--app-card-shadow) !important;
  transition: transform var(--app-transition-speed), box-shadow var(--app-transition-speed);

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  }
  
  .p-card-title {
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .p-card-subtitle {
    font-weight: 400;
    color: var(--text-color-secondary);
    margin-bottom: 1rem;
  }
  
  .p-card-content {
    padding: 0.5rem 0;
  }
  
  .p-card-footer {
    padding-top: 1rem;
    display: flex;
    gap: 0.5rem;
  }
}

/* Button styling */
.p-button {
  border-radius: var(--border-radius);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  
  &:focus {
    box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--primary-color), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  &.p-button-outlined {
    background-color: transparent;
    
    &:hover {
      background-color: var(--primary-50);
    }
  }
  
  &.p-button-text {
    background-color: transparent;
    color: var(--primary-color);
    border-color: transparent;
    
    &:hover {
      background-color: var(--surface-hover);
      color: var(--primary-600);
    }
  }
}

/* Form elements */
.form-field {
  margin-bottom: 1.5rem;
  
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
}

.field-row {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  
  label {
    min-width: 200px;
    font-weight: 500;
  }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  html {
    font-size: 13px;
  }
  
  .p-card .p-card-content {
    padding: 0.25rem 0;
  }
  
  .field-row {
    flex-direction: column;
    align-items: flex-start;
    
    label {
      margin-bottom: 0.5rem;
    }
  }
  
  .p-select, .p-autocomplete {
    width: 100%;
  }
}

/* PrimeNG Sidebar Override - moved to sidebar-content component */

/* Dark purple theme overrides */
.dark-mode {
  /* Button styles */
  .p-button {
    &.p-button-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      
      &:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
      }
    }
    
    &.p-button-outlined {
      border-color: var(--primary-color);
      color: var(--primary-color);
      
      &:hover {
        background-color: rgba(126, 87, 194, 0.1);
      }
    }
    
    &.p-button-text {
      color: var(--primary-color);
      
      &:hover {
        background-color: rgba(126, 87, 194, 0.1);
      }
    }
  }
  
  .p-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2) !important;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }
  }
  
  /* Selection and focus states */
  .p-checkbox .p-checkbox-box.p-highlight,
  .p-radiobutton .p-radiobutton-box.p-highlight {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  /* Accent color for various components */
  .p-select-panel .p-select-items .p-select-item.p-highlight,
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
  .p-listbox .p-listbox-list .p-listbox-item.p-highlight,
  .p-select-panel .p-select-items .p-select-item:focus,
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus,
  .p-listbox .p-listbox-list .p-listbox-item:focus {
    background-color: rgba(126, 87, 194, 0.16);
    color: var(--primary-color);
  }
  
  /* Navigation elements */
  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    border-color: var(--primary-color);
    color: var(--primary-color);
  }
  
  /* Focus and selection ring */
  .p-component:focus,
  .p-inputtext:focus,
  .p-select:focus,
  .p-autocomplete:focus {
    box-shadow: 0 0 0 1px var(--primary-light);
    border-color: var(--primary-color);
  }
  
  /* Links */
  a:not(.p-button) {
    color: var(--primary-light);
    
    &:hover {
      color: var(--primary-color);
    }
  }
  
  /* Sidebar and navigation */
  .sidebar {
    .sidebar-nav {
      li.active {
        background-color: rgba(126, 87, 194, 0.16);
        border-left-color: var(--primary-color);
        
        a {
          color: var(--primary-color);
        }
      }
    }
  }
}
