@import "/src/assets/scss/modern-variables.scss";

// ===========================
// AG-GRID THEME ESTAIR MODERN
// ===========================

.ag-theme-estair {
  // Variables CSS pour AG-Grid avec !important pour forcer
  --ag-background-color: #{$bg-secondary} !important;
  --ag-header-background-color: #{$bg-tertiary} !important;
  --ag-odd-row-background-color: #{$bg-primary} !important;
  --ag-row-hover-color: #{$estair-blue-light} !important;
  --ag-selected-row-background-color: #{$estair-blue-light} !important;
  --ag-border-color: #{$border-light} !important;
  --ag-secondary-border-color: #{$border-light} !important;
  --ag-foreground-color: #{$text-primary} !important;
  --ag-secondary-foreground-color: #{$text-secondary} !important;
  --ag-font-size: 13px !important;
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --ag-row-height: 48px !important;
  --ag-header-height: 40px !important;
  
  // Bordures et coins arrondis
  border-radius: $radius-xl;
  overflow: hidden;
  box-shadow: $shadow-md;
  width: 100% !important;
  
  // Container principal
  .ag-root-wrapper {
    width: 100% !important;
  }
  
  .ag-header-viewport {
    width: 100% !important;
  }
  
  .ag-center-cols-clipper {
    width: 100% !important;
  }
  
  .ag-center-cols-container {
    min-width: 100% !important;
  }
  
  // ===========================
  // HEADER MODERNE
  // ===========================
  
  .ag-header {
    background: $bg-tertiary;
    border-bottom: 2px solid $border-light;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    width: 100% !important;
    
    .ag-header-row {
      background: $bg-tertiary;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      width: 100% !important;
      display: flex;
    }
    
    .ag-header-cell {
      font-weight: 600;
      color: $text-secondary;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 12px 16px;
      border-right: 1px solid $border-light;
      transition: all $transition-fast;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      line-height: 16px;
      flex: 1;
      display: flex;
      align-items: center;
      
      &:hover {
        background: $bg-secondary;
        color: $text-primary;
      }
      
      &:last-child {
        border-right: none;
      }
      
      // Colonne de sélection
      &.ag-header-cell-checkbox {
        padding: 12px 8px;
        justify-content: center;
        min-width: 60px;
        max-width: 60px;
        width: 60px;
      }
    }
    
    .ag-header-cell-label {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: flex-start;
      height: 40px;
      line-height: 16px;
    }
    
    .ag-sort-indicator-container {
      margin-left: auto;
      
      .ag-sort-indicator {
        color: $estair-blue;
        font-size: 14px;
      }
    }
  }
  
  // ===========================
  // ROWS MODERNES
  // ===========================
  
  .ag-row {
    border-bottom: 1px solid $border-light;
    transition: all $transition-fast;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    
    &:hover {
      background-color: $estair-blue-light !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    &.ag-row-selected {
      background-color: $estair-blue-light !important;
      border-left: 3px solid $estair-blue !important;
      
      &:hover {
        background-color: $estair-blue-light !important;
      }
    }
    
    &.ag-row-odd {
      background-color: $bg-primary;
      
      &:hover {
        background-color: $estair-blue-light !important;
      }
      
      &.ag-row-selected {
        background-color: $estair-blue-light !important;
      }
    }
  }
  
  // ===========================
  // CELLULES MODERNES
  // ===========================
  
  .ag-cell {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    border-right: 1px solid $border-light;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    
    &:last-child {
      border-right: none;
    }
    
    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px $estair-blue;
    }
    
    // Colonne de sélection
    &.ag-cell-checkbox {
      padding: 12px 8px;
      justify-content: center;
      min-width: 60px;
      max-width: 60px;
      width: 60px;
    }
  }
  
  // ===========================
  // ÉLÉMENTS PERSONNALISÉS
  // ===========================
  
  // Badges modernes pour picklists
  .modern-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: $radius-xl;
    font-size: $text-xs;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: $bg-tertiary;
    color: $text-primary;
  }
  
  // Références modernes
  .modern-reference {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: $estair-blue;
    text-decoration: none;
    font-weight: 500;
    transition: all $transition-fast;
    
    &:hover {
      text-decoration: underline;
      color: $estair-blue-dark;
    }
    
    i {
      font-size: 14px;
    }
  }
  
  // Booléens modernes
  .modern-boolean {
    display: inline-flex;
    align-items: center;
    
    i {
      font-size: 18px;
    }
  }
  
  // Avatars dans les cellules
  .cell-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, $estair-blue, $estair-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-inverse;
    font-size: $text-xs;
    font-weight: 600;
    flex-shrink: 0;
    margin-right: $space-sm;
    
    &.warning {
      background: linear-gradient(135deg, $status-warning, $status-error);
    }
  }
  
  // Montants avec style monospace
  .cell-amount {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
    justify-content: flex-end;
    color: $status-success;
    
    &.negative {
      color: $status-error;
    }
  }
  
  // Status badges
  .status-badge {
    padding: 4px 12px;
    border-radius: $radius-xl;
    font-size: $text-xs;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    &.active {
      background: $estair-green-light;
      color: $status-success;
      border: 1px solid $status-success;
    }
    
    &.pending {
      background: #FEF3C7;
      color: $status-warning;
      border: 1px solid $status-warning;
    }
    
    &.inactive {
      background: #FEE2E2;
      color: $status-error;
      border: 1px solid $status-error;
    }
  }
  
  // Actions dans les cellules
  .cell-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    
    .cell-action {
      width: 28px;
      height: 28px;
      border: none;
      background: none;
      border-radius: $radius-sm;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $text-muted;
      transition: all $transition-fast;
      
      &:hover {
        background: $bg-tertiary;
        color: $text-primary;
      }
      
      i {
        font-size: 16px;
      }
    }
  }
  
  // ===========================
  // PAGINATION MODERNE
  // ===========================
  
  .ag-paging-panel {
    background: $bg-tertiary;
    border-top: 1px solid $border-light;
    padding: $space-md $space-lg;
    
    .ag-paging-page-summary-panel {
      color: $text-secondary;
      font-size: $text-sm;
      font-weight: 500;
    }
    
    .ag-paging-button {
      background: $bg-secondary;
      border: 1px solid $border-light;
      color: $text-secondary;
      border-radius: $radius-md;
      font-weight: 500;
      transition: all $transition-fast;
      min-width: 32px;
      height: 32px;
      
      &:hover:not(.ag-disabled) {
        background: $estair-blue-light;
        border-color: $estair-blue;
        color: $estair-blue;
      }
      
      &.ag-disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
    
    .ag-paging-number {
      color: $estair-blue;
      font-weight: 600;
    }
  }
  
  // ===========================
  // FILTRES FLOTTANTS
  // ===========================
  
  .ag-floating-filter {
    z-index: 1000 !important;
    position: relative;
    background: $bg-secondary !important;
  }
  
  .ag-floating-filter-wrapper {
    z-index: 1000 !important;
    position: relative;
  }
  
  .ag-floating-filter-body {
    z-index: 1000 !important;
    position: relative;
    background: $bg-secondary !important;
    
    input {
      z-index: 1001 !important;
      position: relative;
    }
  }
  
  .ag-floating-filter-input {
    border: 1px solid $border-light;
    border-radius: $radius-sm;
    padding: 8px 12px;
    font-size: 13px;
    background: $bg-secondary;
    color: $text-primary;
    transition: all $transition-fast;
    z-index: 1000 !important;
    position: relative;
    
    &:focus {
      outline: none;
      border-color: $estair-blue;
      box-shadow: 0 0 0 3px rgba(74, 168, 220, 0.1);
    }
    
    &::placeholder {
      color: $text-muted;
    }
  }
  
  .ag-floating-filter-full-body {
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  // Row des filtres flottants
  .ag-header-row.ag-header-row-floating-filter {
    z-index: 1000 !important;
    background: $bg-secondary !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  // Menu déroulant des filtres
  .ag-filter-toolpanel-group {
    z-index: 1500 !important;
  }
  
  .ag-menu {
    z-index: 1500 !important;
  }
  
  .ag-popup {
    z-index: 1500 !important;
  }
  
  // ===========================
  // CHECKBOXES MODERNES
  // ===========================
  
  .ag-checkbox-input-wrapper {
    width: 16px;
    height: 16px;
    border-radius: $radius-sm;
    // border: 2px solid $border-medium;
    background: $bg-secondary;
    transition: all $transition-fast;
    
    &:hover {
      border-color: $estair-blue;
    }
    
    &.ag-checked {
      background: $estair-blue;
      border-color: $estair-blue;
      
      &::after {
        content: '✓';
        color: $text-inverse;
        font-size: $text-xs;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
  
  // ===========================
  // LOADING ET OVERLAYS
  // ===========================
  
  .ag-overlay-loading-wrapper {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    
    .ag-overlay-loading-center {
      background: $bg-secondary;
      border-radius: $radius-xl;
      padding: $space-xl;
      box-shadow: $shadow-lg;
      
      .ag-loading {
        color: $estair-blue;
        font-size: $text-base;
        font-weight: 500;
      }
    }
  }
  
  .ag-overlay-no-rows-wrapper {
    .ag-overlay-no-rows-center {
      color: $text-muted;
      font-size: $text-base;
      font-weight: 500;
    }
  }
}

// ===========================
// RESPONSIVE AG-GRID
// ===========================

@media (max-width: $mobile) {
  .ag-theme-estair {
    --ag-row-height: 44px;
    --ag-header-height: 36px;
    --ag-font-size: 12px;
    
    .ag-header-cell,
    .ag-cell {
      padding: 8px 12px;
    }
    
    .cell-avatar {
      width: 28px;
      height: 28px;
      font-size: 10px;
    }
    
    .status-badge {
      padding: 2px 6px;
      font-size: 10px;
    }
    
    .cell-actions .cell-action {
      width: 24px;
      height: 24px;
      
      i {
        font-size: 14px;
      }
    }
  }
}

// ===========================
// ANIMATIONS
// ===========================

@keyframes ag-row-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ag-theme-estair .ag-row {
  animation: ag-row-slide-in 0.2s ease-out;
}

// ===========================
// DARK MODE SUPPORT
// ===========================

@media (prefers-color-scheme: dark) {
  .ag-theme-estair {
    --ag-background-color: #1F2937;
    --ag-header-background-color: #374151;
    --ag-odd-row-background-color: #1F2937;
    --ag-row-hover-color: #1E3A8A;
    --ag-selected-row-background-color: #1E3A8A;
    --ag-border-color: #4B5563;
    --ag-secondary-border-color: #4B5563;
    --ag-foreground-color: #F9FAFB;
    --ag-secondary-foreground-color: #D1D5DB;
    
    .modern-badge {
      background: #374151;
      color: #F9FAFB;
      border-color: #6B7280;
    }
    
    .modern-reference {
      color: #60A5FA;
      
      &:hover {
        color: #93C5FD;
      }
    }
    
    .status-badge {
      &.active {
        background: #064E3B;
        color: #6EE7B7;
        border-color: #059669;
      }
      
      &.pending {
        background: #78350F;
        color: #FCD34D;
        border-color: #D97706;
      }
      
      &.inactive {
        background: #7F1D1D;
        color: #FCA5A5;
        border-color: #DC2626;
      }
    }
  }
}