@import "/./src/assets/scss/mixins.scss";
@import "/./src/assets/scss/variables.scss";
@import "/./src/assets/scss/icons.scss";
@import "/./src/assets/scss/fonts.scss";
@import "/./src/assets/scss/input.scss";
@import "/./src/assets/scss/buttons.scss";

// ===========================
// TABLER DESIGN SYSTEM
// ===========================

.tabler-list-view {
  min-height: 100vh;
  background-color: #f8fafc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  // Enhanced loading overlay for better performance
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    will-change: opacity;
    transform: translateZ(0); // Force hardware acceleration
    
    &.loading-fade-in {
      animation: fadeInFast 0.2s ease-out;
    }
    
    &.loading-fade-out {
      animation: fadeOutFast 0.15s ease-in;
    }

    .loading-content {
      text-align: center;
      transform: translateZ(0); // Force hardware acceleration
      
      .loading-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e2e8f0;
        border-left-color: #206bc4;
        border-radius: 50%;
        animation: spinOptimized 0.8s linear infinite;
        margin: 0 auto 1.5rem;
        will-change: transform;
        transform: translateZ(0);
      }

      h3 {
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        opacity: 0;
        animation: fadeInText 0.3s ease-out 0.1s forwards;
      }

      p {
        color: #64748b;
        margin: 0;
        font-size: 0.875rem;
        opacity: 0;
        animation: fadeInText 0.3s ease-out 0.2s forwards;
      }
    }
  }

  // Optimized animations for better performance
  @keyframes spinOptimized {
    0% { transform: rotate(0deg) translateZ(0); }
    100% { transform: rotate(360deg) translateZ(0); }
  }
  
  @keyframes fadeInFast {
    0% { 
      opacity: 0; 
      transform: translateY(10px) translateZ(0); 
    }
    100% { 
      opacity: 1; 
      transform: translateY(0) translateZ(0); 
    }
  }
  
  @keyframes fadeOutFast {
    0% { 
      opacity: 1; 
      transform: translateY(0) translateZ(0); 
    }
    100% { 
      opacity: 0; 
      transform: translateY(-5px) translateZ(0); 
    }
  }
  
  @keyframes fadeInText {
    0% { 
      opacity: 0; 
      transform: translateY(5px) translateZ(0); 
    }
    100% { 
      opacity: 1; 
      transform: translateY(0) translateZ(0); 
    }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

// ===========================
// PAGE HEADER TABLER STYLE
// ===========================

.page-header {
  background: #e4e9f7;
  border-bottom: 1px solid #e6e7e9;
  // padding: 0 0 1.5rem 0;
  margin-bottom: 1.5rem;
  // background-color: #e4e9f7;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  .page-pretitle {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .page-title {
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .icon {
      color: #206bc4;
    }
  }

  .btn-list {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }
}

// ===========================
// CARDS TABLER STYLE
// ===========================

.card {
  border: 1px solid #e6e7e9;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background: white;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.15s ease;

  &:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e6e7e9;
    background: #fafbfc;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .card-actions {
      margin-left: auto;
    }
  }

  .card-body {
    padding: 1.5rem;

    &.p-0 {
      padding: 0;
    }
  }

  .card-footer {
    padding: 1rem 1.5rem;
    background: #fafbfc;
    border-top: 1px solid #e6e7e9;
    border-radius: 0 0 8px 8px;
  }

  &.card-sm {
    .card-body {
      padding: 1rem;
    }
  }
}

// ===========================
// STATS CARDS
// ===========================

.row-deck {
  .col-sm-6,
  .col-lg-3 {
    margin-bottom: 1.5rem;
  }
}

// ===========================
// BUTTONS TABLER STYLE
// ===========================

.btn {
  font-weight: 500;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  .icon {
    width: 1rem;
    height: 1rem;
  }

  &.btn-primary {
    background-color: #206bc4;
    border-color: #206bc4;
    color: white;

    &:hover:not(:disabled) {
      background-color: #1c5ba0;
      border-color: #1c5ba0;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(32, 107, 196, 0.3);
    }
  }

  &.btn-outline-primary {
    color: #206bc4;
    border-color: #206bc4;
    background: transparent;

    &:hover:not(:disabled) {
      background-color: #206bc4;
      color: white;
      transform: translateY(-1px);
    }
  }

  &.btn-outline-secondary {
    color: #6c757d;
    border-color: #dee2e6;
    background: transparent;

    &:hover:not(:disabled) {
      background-color: #6c757d;
      border-color: #6c757d;
      color: white;
    }

    &.active {
      background-color: #206bc4;
      border-color: #206bc4;
      color: white;
    }
  }

  &.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
    background: transparent;

    &:hover:not(:disabled) {
      background-color: #dc3545;
      color: white;
    }
  }

  &.btn-outline-success {
    color: #28a745;
    border-color: #28a745;
    background: transparent;

    &:hover:not(:disabled) {
      background-color: #28a745;
      color: white;
    }
  }

  &.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
}

// ===========================
// FORM CONTROLS TABLER
// ===========================

.form-control {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  &:focus {
    outline: none;
    border-color: #206bc4;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.1);
  }
}

.input-group {
  &.input-group-flat {
    .form-control {
      border-right: none;
      border-radius: 6px 0 0 6px;
    }

    .input-group-text {
      border-left: none;
      border-radius: 0 6px 6px 0;
      background: #f8fafc;
      border-color: #d1d5db;
      color: #6c757d;
    }
  }
}

// ===========================
// BADGES TABLER STYLE
// ===========================

.badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  &.bg-primary {
    background-color: #206bc4 !important;
    color: white;
  }

  &.bg-secondary {
    background-color: #6c757d !important;
    color: white;
  }

  &.bg-success {
    background-color: #28a745 !important;
    color: white;
  }

  &.bg-danger {
    background-color: #dc3545 !important;
    color: white;
  }

  &.bg-warning {
    background-color: #ffc107 !important;
    color: #212529;
  }

  &.bg-info {
    background-color: #17a2b8 !important;
    color: white;
  }
}

// ===========================
// PROGRESS BARS
// ===========================

.progress {
  height: 0.5rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
  overflow: hidden;

  &.progress-sm {
    height: 0.25rem;
  }

  .progress-bar {
    height: 100%;
    background-color: #206bc4;
    transition: width 0.3s ease;

    &.progress-bar-indeterminate {
      background: linear-gradient(90deg, transparent, #206bc4, transparent);
      background-size: 200% 100%;
      animation: progress-indeterminate 1.5s infinite;
    }
  }
}

@keyframes progress-indeterminate {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

// ===========================
// ENHANCED MODERN STYLES
// ===========================

// Improved KPI Cards with hover effects and progress bars
.hover-shadow-lg {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  
  &:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }
}

.transition-all {
  transition: all 0.2s ease;
}

.letter-spacing-1 {
  letter-spacing: 0.025em;
}

// Modern search styling
.modern-search {
  .form-control {
    &.is-valid {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
  }
  
  .input-group-text {
    &.bg-transparent {
      background: transparent !important;
    }
    
    &.border-end-0 {
      border-right: none !important;
    }
  }
  
  .form-control {
    &.border-start-0 {
      border-left: none !important;
    }
    
    &.ps-0 {
      padding-left: 0 !important;
    }
  }
}

// Modern controls with enhanced styling
.modern-controls {
  .btn {
    position: relative;
    overflow: visible;
    
    .position-absolute {
      &.top-0.start-100 {
        top: -8px !important;
        left: calc(100% - 8px) !important;
      }
    }
  }
}

// Enhanced tooltips
[data-bs-toggle="tooltip"] {
  position: relative;
}

// Progress bars for KPI cards  
.bg-purple {
  background-color: #8b5cf6 !important;
}

// Enhanced card styling
.font-weight-bold {
  font-weight: 700 !important;
}

.h3 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.small {
  font-size: 0.875rem !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

// Enhanced gap utilities
.gap-2 {
  gap: 0.5rem !important;
}

// ===========================
// AG-GRID ENHANCED THEME
// ===========================

.ag-theme-tabler-modern {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f8fafc;
  --ag-odd-row-background-color: #fafbfc;
  --ag-row-hover-color: #f1f5f9;
  --ag-selected-row-background-color: #e3f2fd;
  --ag-border-color: #e6e7e9;
  --ag-secondary-border-color: #f1f5f9;
  --ag-foreground-color: #1e293b;
  --ag-secondary-foreground-color: #64748b;
  --ag-font-size: 14px;
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ag-row-height: 48px;
  --ag-header-height: 40px;

  border: none;
  border-radius: 0;
  font-family: var(--ag-font-family);

  .ag-header {
    background: var(--ag-header-background-color);
    border-bottom: 2px solid var(--ag-border-color);

    .ag-header-cell {
      border-right: 1px solid var(--ag-secondary-border-color);
      padding: 0 16px;
      
      .ag-header-cell-label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
        text-transform: none;
        letter-spacing: normal;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        height: 100%;
      }

      &:hover {
        background-color: #f1f5f9;
      }
      
      &.ag-header-cell-sortable {
        .ag-header-cell-label {
          .ag-sort-indicator-container {
            margin-left: 4px;
            
            .ag-sort-indicator {
              width: 0;
              height: 0;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              
              &.ag-sort-ascending-icon {
                border-bottom: 6px solid #374151;
                border-top: none;
              }
              
              &.ag-sort-descending-icon {
                border-top: 6px solid #374151;
                border-bottom: none;
              }
              
              &.ag-sort-none-icon {
                border-bottom: 6px solid #cbd5e1;
                border-top: none;
                opacity: 0.3;
              }
            }
          }
        }
        
        &:hover {
          .ag-sort-indicator-container .ag-sort-indicator.ag-sort-none-icon {
            opacity: 0.6;
            border-bottom-color: #94a3b8;
          }
        }
      }
    }

    .ag-header-cell-resize::after {
      background-color: #206bc4;
      width: 2px;
    }
  }

  .ag-row {
    border-bottom: 1px solid var(--ag-secondary-border-color);
    transition: background-color 0.15s ease;

    &:hover {
      background-color: var(--ag-row-hover-color) !important;
    }

    &.ag-row-selected {
      background-color: var(--ag-selected-row-background-color) !important;
      border-left: 3px solid #206bc4;
      box-shadow: inset 0 1px 0 rgba(32, 107, 196, 0.1);
      
      &:hover {
        background-color: #dbeafe !important;
      }
    }

    &.ag-row-odd {
      background-color: var(--ag-odd-row-background-color);

      &:hover {
        background-color: #f1f5f9 !important;
      }

      &.ag-row-selected {
        background-color: var(--ag-selected-row-background-color) !important;
      }
    }
  }

  .ag-cell {
    border-right: 1px solid #f8fafc;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ag-foreground-color);

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #206bc4;
      border-radius: 4px;
    }

    &:last-child {
      border-right: none;
    }
  }

  // Enhanced checkbox styling
  .ag-checkbox-input-wrapper {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #206bc4;
      background-color: #f0f9ff;
    }

    &.ag-checked {
      background: #206bc4;
      border-color: #206bc4;

      &::after {
        content: '';
        width: 6px;
        height: 10px;
        border: 2px solid white;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg);
        margin-top: -2px;
      }
    }

    &.ag-indeterminate {
      background: #206bc4;
      border-color: #206bc4;

      &::after {
        content: '';
        width: 8px;
        height: 2px;
        background: white;
        border-radius: 1px;
      }
    }
  }

  // Loading overlay styling
  .ag-overlay-loading-wrapper {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);

    .ag-overlay-loading-center {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      
      .ag-overlay-loading-text {
        color: #374151;
        font-weight: 500;
      }
    }
  }

  // No rows overlay
  .ag-overlay-no-rows-wrapper {
    .ag-overlay-no-rows-center {
      color: #6b7280;
      font-size: 16px;
      
      &::before {
        content: '📄';
        font-size: 48px;
        display: block;
        margin-bottom: 16px;
        opacity: 0.5;
      }
    }
  }
}

// ===========================
// AG-GRID TABLER THEME (Legacy Support)
// ===========================

.ag-theme-tabler {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #fafbfc;
  --ag-odd-row-background-color: #fafbfc;
  --ag-row-hover-color: #f1f5f9;
  --ag-selected-row-background-color: #e3f2fd;
  --ag-border-color: #e6e7e9;
  --ag-secondary-border-color: #f1f5f9;
  --ag-foreground-color: #1e293b;
  --ag-secondary-foreground-color: #64748b;
  --ag-font-size: 14px;
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ag-row-height: 48px;
  --ag-header-height: 44px;

  border: none;
  border-radius: 0;

  .ag-header {
    border-bottom: 1px solid #e6e7e9;
    background: #fafbfc;

    .ag-header-cell {
      border-right: 1px solid #f1f5f9;
      padding: 0 1rem;

      .ag-header-cell-label {
        font-weight: 600;
        color: #374151;
        font-size: 14px;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        height: 100%;
        text-transform: none;
        letter-spacing: normal;
      }

      &:hover {
        background-color: #f1f5f9;
      }
      
      &.ag-header-cell-sortable {
        .ag-header-cell-label {
          .ag-sort-indicator-container {
            margin-left: 4px;
            
            .ag-sort-indicator {
              width: 0;
              height: 0;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              
              &.ag-sort-ascending-icon {
                border-bottom: 6px solid #374151;
                border-top: none;
              }
              
              &.ag-sort-descending-icon {
                border-top: 6px solid #374151;
                border-bottom: none;
              }
              
              &.ag-sort-none-icon {
                border-bottom: 6px solid #d1d5db;
                border-top: none;
                opacity: 0.3;
              }
            }
          }
        }
        
        &:hover {
          .ag-sort-indicator-container .ag-sort-indicator.ag-sort-none-icon {
            opacity: 0.6;
            border-bottom-color: #9ca3af;
          }
        }
      }
    }

    .ag-header-cell-resize::after {
      background-color: #206bc4;
    }
  }

  .ag-row {
    border-bottom: 1px solid #f1f5f9;

    &:hover {
      background-color: #f8fafc !important;
    }

    &.ag-row-selected {
      background-color: #e3f2fd !important;
      border-left: 3px solid #206bc4;
    }

    &.ag-row-odd {
      background-color: #fafbfc;

      &:hover {
        background-color: #f1f5f9 !important;
      }

      &.ag-row-selected {
        background-color: #e3f2fd !important;
      }
    }
  }

  .ag-cell {
    border-right: 1px solid #f8fafc;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.4;

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #206bc4;
    }

    &:last-child {
      border-right: none;
    }
  }

  // Force hide AG-Grid pagination (we use custom pagination)
  .ag-paging-panel {
    display: none !important;
  }

  // Original pagination styles (kept for reference but hidden)
  /*
  .ag-paging-panel {
    background: #fafbfc;
    border-top: 1px solid #e6e7e9;
    padding: 0.75rem 1rem;

    .ag-paging-page-summary-panel {
      color: #64748b;
      font-size: 0.875rem;
    }

    .ag-paging-button {
      background: white;
      border: 1px solid #dee2e6;
      color: #374151;
      border-radius: 6px;
      font-weight: 500;
      padding: 0.375rem 0.75rem;
      margin: 0 0.125rem;

      &:hover:not(.ag-disabled) {
        background: #f8fafc;
        border-color: #206bc4;
        color: #206bc4;
      }

      &.ag-disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    .ag-paging-number {
      color: #206bc4;
      font-weight: 600;
    }
  }
  */

  // Checkbox styling
  .ag-checkbox-input-wrapper {
    width: 18px;
    height: 18px;
    // border: 2px solid #d1d5db;
    border-radius: 4px;
    background: white;

    &:hover {
      border-color: #206bc4;
    }

    &.ag-checked {
      background: #206bc4;
      border-color: #206bc4;

      &::after {
        content: '✓';
        color: white;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
}

// ===========================
// DROPDOWN MENUS
// ===========================

.dropdown {
  .dropdown-toggle {
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.15s ease;

    &:hover {
      background: #f8fafc;
      color: #374151;
    }

    &::after {
      display: none;
    }
  }

  .dropdown-menu {
    border: 1px solid #e6e7e9;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    min-width: 200px;

    .dropdown-item {
      padding: 0.75rem 1rem;
      color: #374151;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      transition: all 0.15s ease;

      &:hover {
        background: #f8fafc;
        color: #1e293b;
      }

      .dropdown-item-icon {
        width: 1rem;
        height: 1rem;
        color: #6c757d;
      }
    }
  }
}

// ===========================
// PAGINATION TABLER
// ===========================

.pagination {
  margin: 0;
  
  .page-item {
    .page-link {
      border: 1px solid #dee2e6;
      color: #374151;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 500;
      background: white;
      border-radius: 6px;
      margin: 0 0.125rem;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      gap: 0.25rem;

      &:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #206bc4;
        color: #206bc4;
        transform: translateY(-1px);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
      }

      .icon {
        width: 1rem;
        height: 1rem;
      }
    }

    &.active .page-link {
      background: #206bc4;
      border-color: #206bc4;
      color: white;
    }

    &.disabled .page-link {
      opacity: 0.5;
      cursor: not-allowed;
      background: #f8fafc;
      border-color: #e6e7e9;
      color: #6c757d;
    }
  }
}

// ===========================
// EMPTY STATE
// ===========================

.empty {
  text-align: center;
  padding: 4rem 2rem;

  .empty-img {
    margin-bottom: 2rem;

    img {
      max-width: 200px;
      opacity: 0.8;
    }
  }

  .empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
  }

  .empty-subtitle {
    color: #64748b;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .empty-action {
    .btn {
      padding: 0.75rem 1.5rem;
      font-size: 0.875rem;
    }
  }
}

// ===========================
// UTILITIES
// ===========================

.text-muted {
  color: #6c757d !important;
}

.text-primary {
  color: #206bc4 !important;
}

.text-success {
  color: #28a745 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.bg-primary {
  background-color: #206bc4 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-success {
  background-color: #28a745 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

// ===========================
// RESPONSIVE DESIGN
// ===========================

@media (max-width: 768px) {
  .page-header {
    .btn-list {
      width: 100%;
      justify-content: center;

      .btn {
        flex: 1;
        justify-content: center;
      }
    }
  }

  .card {
    margin-bottom: 1rem;

    .card-header {
      padding: 1rem;
      flex-direction: column;
      gap: 1rem;
      align-items: stretch;

      .card-actions {
        margin-left: 0;
      }
    }

    .card-body {
      padding: 1rem;
    }
  }

  .btn-group {
    flex-direction: column;
    width: 100%;

    .btn {
      border-radius: 6px !important;
      margin-bottom: 0.25rem;
    }
  }

  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

@media (max-width: 576px) {
  .page-header {
    padding: 1rem 0;

    .page-title {
      font-size: 1.5rem;
    }
  }

  .ag-theme-tabler {
    --ag-row-height: 44px;
    --ag-header-height: 40px;
    --ag-font-size: 13px;

    .ag-cell {
      padding: 0 0.75rem;
    }
  }

  .empty {
    padding: 2rem 1rem;

    .empty-img img {
      max-width: 150px;
    }
  }
}

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

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

.card {
  animation: fadeIn 0.3s ease-out;
}

.btn:hover {
  animation: none;
}

// ===========================
// CUSTOM SCROLLBARS
// ===========================

.table-responsive {
  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

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

  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;

    &:hover {
      background: #94a3b8;
    }
  }
}

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

@media (prefers-color-scheme: dark) {
  .tabler-list-view {
    background-color: #0f172a;
    color: #f1f5f9;
  }

  .card {
    background: #1e293b;
    border-color: #334155;

    .card-header {
      background: #334155;
      border-color: #475569;
    }

    .card-footer {
      background: #334155;
      border-color: #475569;
    }
  }

  .ag-theme-tabler {
    --ag-background-color: #1e293b;
    --ag-header-background-color: #334155;
    --ag-odd-row-background-color: #334155;
    --ag-row-hover-color: #475569;
    --ag-selected-row-background-color: #1e40af;
    --ag-border-color: #475569;
    --ag-secondary-border-color: #334155;
    --ag-foreground-color: #f1f5f9;
    --ag-secondary-foreground-color: #cbd5e1;
  }
}

// ===========================
// MODERN LIST VIEW STYLES
// ===========================

.modern-list-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f8fafc;
  
  // Modern variables
  $bg-primary: #f8fafc;
  $bg-secondary: #ffffff;
  $bg-tertiary: #f1f5f9;
  $text-primary: #1e293b;
  $text-secondary: #64748b;
  $text-muted: #94a3b8;
  $text-inverse: #ffffff;
  $estair-blue: #206bc4;
  $estair-blue-light: #e3f2fd;
  $estair-blue-dark: #1c5ba0;
  $border-light: #e2e8f0;
  $border-medium: #cbd5e1;
  $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  $shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  $status-error: #dc2626;
  $space-xs: 0.25rem;
  $space-sm: 0.5rem;
  $space-md: 1rem;
  $space-lg: 1.5rem;
  $space-xl: 2rem;
  $text-xs: 0.75rem;
  $text-sm: 0.875rem;
  $text-base: 1rem;
  $text-lg: 1.125rem;
  $text-xl: 1.25rem;
  $text-2xl: 1.5rem;
  $radius-sm: 0.25rem;
  $radius-md: 0.375rem;
  $radius-lg: 0.5rem;
  $radius-xl: 0.75rem;
  $transition-fast: 0.15s;
  $transition-normal: 0.2s;
  $tablet: 768px;
  $mobile: 576px;

  // Page header moderne - Section titre et boutons
  .page-header {
    background: $bg-secondary;
    border-bottom: 1px solid $border-light;
    box-shadow: $shadow-sm;

    .header-content {
      padding: $space-lg $space-xl;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: $space-xl;

      @media (max-width: $tablet) {
        flex-direction: column;
        align-items: stretch;
        gap: $space-md;
      }

      @media (max-width: $mobile) {
        padding: $space-md;
      }
    }
  }

  .page-title-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: $space-md;
    min-width: 0;

    .title-icon {
      font-size: 32px;
      width: 32px;
      height: 32px;
      color: $estair-blue;
      flex-shrink: 0;
    }

    .title-text {
      min-width: 0;

      .page-title {
        font-size: $text-xl;
        font-weight: 600;
        color: $text-primary;
        margin: 0 0 2px 0;
        line-height: 1.2;
      }

      .page-description {
        font-size: $text-sm;
        color: $text-secondary;
        margin: 0;
        line-height: 1.4;
      }
    }

    @media (max-width: $mobile) {
      .title-icon {
        font-size: 24px;
        width: 24px;
        height: 24px;
      }

      .title-text .page-title {
        font-size: $text-lg;
      }
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: $space-sm;
    flex-shrink: 0;

    @media (max-width: $tablet) {
      width: 100%;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    // Bouton succès (vert)
    .btn-success {
      background-color: #10b981 !important;
      border-color: #10b981 !important;
      color: white !important;

      &:hover:not(:disabled) {
        background-color: #059669 !important;
        border-color: #059669 !important;
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }

    // Bouton dark (noir/gris foncé)
    .btn-dark {
      background-color: #475569 !important;
      border-color: #475569 !important;
      color: white !important;

      &:hover {
        background-color: #334155 !important;
        border-color: #334155 !important;
      }
    }

    // Bouton secondaire (gris clair)
    .btn-secondary {
      background-color: #6b7280 !important;
      border-color: #6b7280 !important;
      color: white !important;

      &:hover {
        background-color: #4b5563 !important;
        border-color: #4b5563 !important;
      }
    }

    // Style général des boutons
    button[mat-raised-button],
    button[mat-stroked-button] {
      height: 36px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;

      mat-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
        margin-right: 4px;
      }
    }

    button[mat-icon-button] {
      width: 36px;
      height: 36px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;

      &:hover {
        background-color: #f1f5f9;
        border-color: #94a3b8;
      }
    }
  }

  // KPIs modernes - Disposés horizontalement en haut
  .kpi-section {
    background: #e4e9f7;
    padding: $space-lg 0rem;
    // padding: 0 0 $space-lg 0;
    // margin-bottom: $space-lg;
    border-bottom: 1px solid $border-light;

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, calc(33.333% - #{$space-md})));
      gap: $space-lg;
      max-width: 100%;

      @media (max-width: $tablet) {
        grid-template-columns: repeat(2, 1fr);
        gap: $space-md;
      }

      @media (max-width: $mobile) {
        grid-template-columns: 1fr;
        gap: $space-sm;
      }
    }
  }

  .kpi-card {
    background: #ffffff;
    border: none;
    border-radius: 6px;
    padding: $space-md;
    display: flex;
    align-items: center;
    gap: $space-md;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex: 1;
    min-width: 0;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .kpi-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      flex-shrink: 0;
      
      mat-icon {
        font-size: 24px;
        width: 24px;
        height: 24px;
      }
    }
    
    .kpi-content {
      flex: 1;
      min-width: 0;
      
      .kpi-value {
        font-size: 24px;
        font-weight: 600;
        color: #1F2937;
        line-height: 1;
        margin-bottom: 4px;
        
        .kpi-skeleton {
          width: 60px;
          height: 20px;
          background: #E5E7EB;
          border-radius: 4px;
          animation: pulse 1.5s ease-in-out infinite;
        }
      }
      
      .kpi-label {
        font-size: 14px;
        color: #6B7280;
        font-weight: 500;
        text-transform: none;
        letter-spacing: normal;
      }
    }
  }

  // Toolbar de filtres - sous le header
  .filters-toolbar {
    background: $bg-secondary;
    border-bottom: 1px solid $border-light;
    padding: $space-md $space-xl;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $space-lg;

    @media (max-width: $tablet) {
      flex-direction: column;
      gap: $space-md;
      padding: $space-md $space-lg;
    }

    @media (max-width: $mobile) {
      padding: $space-sm $space-md;
    }
  }

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: $space-lg;
    flex: 1;
    
    @media (max-width: $tablet) {
      width: 100%;
      justify-content: space-between;
    }
  }

  .selection-info {
    display: flex;
    align-items: center;
    gap: $space-xs;
    background: $estair-blue-light;
    color: $estair-blue;
    padding: 0rem $space-md;
    border-radius: $radius-lg;
    font-size: $text-sm;
    font-weight: 600;
    border: 1px solid $estair-blue;

    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }

    button {
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
      padding: 4px;
      border-radius: $radius-sm;
      transition: all $transition-fast;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: rgba(32, 107, 196, 0.2);
      }

      mat-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
      }
    }
  }

  .view-controls {
    display: flex;
    align-items: center;
    gap: $space-sm;

    button[mat-icon-button] {
      width: 36px;
      height: 36px;
      border: 1px solid $border-medium;
      background: $bg-secondary;
      color: $text-muted;
      border-radius: $radius-md;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all $transition-fast;

      &:hover {
        border-color: $estair-blue;
        color: $estair-blue;
        background: $estair-blue-light;
      }

      &.active {
        background: $estair-blue;
        border-color: $estair-blue;
        color: white;
      }

      mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
      }
    }

    button[mat-stroked-button] {
      display: flex;
      align-items: center;
      gap: $space-xs;
      padding: 6px 12px;
      border: 1px solid $border-medium;
      background: $bg-secondary;
      color: $text-secondary;
      border-radius: $radius-md;
      cursor: pointer;
      font-size: $text-sm;
      font-weight: 500;
      transition: all $transition-normal;
      position: relative;
      height: 36px;

      &:hover {
        border-color: $estair-blue;
        color: $estair-blue;
        background: $estair-blue-light;
      }

      &.active {
        background: $estair-blue-light;
        border-color: $estair-blue;
        color: $estair-blue;
      }

      mat-icon {
        font-size: 18px;
        width: 18px;
        height: 18px;
      }

      .filter-count-badge {
        background: $estair-blue;
        color: white;
        border-radius: 12px;
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        margin-left: 6px;
        line-height: 1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: $space-md;
    
    @media (max-width: $tablet) {
      width: 100%;
      justify-content: space-between;
    }
  }

  .quick-search {
    position: relative;
    display: flex;
    align-items: center;

    mat-icon {
      position: absolute;
      left: 10px;
      color: $text-muted;
      font-size: 20px;
      width: 20px;
      height: 20px;
      z-index: 1;
      pointer-events: none;
    }

    input {
      width: 240px;
      height: 36px;
      padding: 0 12px 0 38px;
      border: 1px solid $border-medium;
      border-radius: $radius-md;
      font-size: $text-sm;
      background: $bg-secondary;
      color: $text-primary;
      transition: all $transition-normal;

      @media (max-width: $mobile) {
        width: 150px;
      }

      &:focus {
        outline: none;
        border-color: $estair-blue;
        box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.1);
      }

      &::placeholder {
        color: $text-muted;
      }
    }
  }

  .action-buttons {
    display: flex;
    align-items: center;
    gap: $space-sm;
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: $space-xs;
      padding: $space-sm $space-md;
      border-radius: $radius-md;
      font-size: $text-sm;
      font-weight: 500;
      cursor: pointer;
      transition: all $transition-normal;
      border: 1px solid transparent;
      white-space: nowrap;
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      mat-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
      }
      
      .btn-label {
        @media (max-width: $mobile) {
          display: none;
        }
      }
      
      &.primary {
        background: $estair-blue;
        color: $text-inverse;
        border-color: $estair-blue;
        
        &:hover:not(:disabled) {
          background: $estair-blue-dark;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }
      }
      
      &.secondary {
        background: $bg-secondary;
        color: $text-secondary;
        border-color: $border-light;
        
        &:hover:not(:disabled) {
          background: $bg-tertiary;
          color: $text-primary;
          border-color: $border-medium;
        }
      }
      
      &.danger {
        background: $status-error;
        color: $text-inverse;
        border-color: $status-error;
        
        &:hover:not(:disabled) {
          background: #DC2626;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }
      }
      
      &.success {
        background: #10B981;
        color: $text-inverse;
        border-color: #10B981;

        &:hover:not(:disabled) {
          background: #059669;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }
      }

      &.info {
        background: #0EA5E9;
        color: $text-inverse;
        border-color: #0EA5E9;

        &:hover:not(:disabled) {
          background: #0284C7;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }
      }
      
      &.refresh {
        background: none;
        color: $text-muted;
        border: none;
        padding: $space-sm;
        
        &:hover:not(:disabled) {
          background: $bg-tertiary;
          color: $text-primary;
        }
      }
    }
  }

  // Container tableau
  .table-container {
    flex: 1;
    background: $bg-secondary;
    border-radius: $radius-xl $radius-xl 0 0;
    overflow: visible; // Changé de hidden à visible pour permettre l'affichage de la pagination
    position: relative;
    // margin: 0 $space-lg $space-lg;
    box-shadow: $shadow-md;
    min-height: 400px;
    display: flex;
    flex-direction: column; // Ajout pour organiser ag-grid et pagination en colonne

    // Ensure AG-Grid has proper dimensions
    ag-grid-angular {
      flex: 1; // Changé de height: 100% à flex: 1 pour laisser place à la pagination
      width: 100%;
      overflow: hidden; // L'overflow est maintenant sur ag-grid seulement

      &.ag-theme-estair {
        height: 100%;
        min-height: 350px; // Réduit légèrement pour laisser place à la pagination
      }
    }
    
    @media (max-width: $mobile) {
      margin: 0 $space-md $space-md;
      border-radius: $radius-lg $radius-lg 0 0;
    }
  }

  // État vide
  .empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $bg-secondary;
    
    .empty-content {
      text-align: center;
      max-width: 400px;
      padding: $space-xl;
      
      .empty-icon {
        font-size: 64px;
        width: 64px;
        height: 64px;
        color: $text-muted;
        margin-bottom: $space-lg;
        opacity: 0.5;
      }
      
      .empty-title {
        font-size: $text-lg;
        font-weight: 600;
        color: $text-primary;
        margin: 0 0 $space-sm 0;
      }
      
      .empty-description {
        font-size: $text-sm;
        color: $text-secondary;
        margin: 0 0 $space-lg 0;
        line-height: 1.5;
      }
      
      .empty-action {
        display: flex;
        align-items: center;
        gap: $space-xs;
        padding: $space-sm $space-lg;
        background: $estair-blue;
        color: $text-inverse;
        border: none;
        border-radius: $radius-md;
        font-size: $text-sm;
        font-weight: 500;
        cursor: pointer;
        transition: all $transition-normal;
        
        &:hover {
          background: $estair-blue-dark;
          transform: translateY(-1px);
          box-shadow: $shadow-md;
        }
        
        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}

// Performance optimizations for modern browsers
* {
  box-sizing: border-box;
}

// Optimize rendering for large datasets
.modern-list-view {
  will-change: auto;
  
  .table-container {
    ag-grid-angular {
      transform: translateZ(0); // Force hardware acceleration
    }
  }
}

// AG-Grid theme estair
::ng-deep .ag-theme-estair {
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f1f5f9;
  --ag-odd-row-background-color: #f8fafc;
  --ag-row-hover-color: #e3f2fd;
  --ag-selected-row-background-color: #e3f2fd;
  --ag-border-color: #e2e8f0;
  --ag-secondary-border-color: #e2e8f0;
  --ag-foreground-color: #1e293b;
  --ag-secondary-foreground-color: #64748b;
  --ag-font-size: 14px;
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  .ag-header {
    border-bottom: 2px solid #e2e8f0;
    
    .ag-header-cell {
      .ag-header-cell-label {
        font-weight: 600;
        color: #374151 !important;
        font-size: 14px;
        text-transform: none;
        letter-spacing: normal;
        justify-content: flex-start;
        display: flex !important;
        align-items: center;
        height: 100%;
        opacity: 1 !important;
        visibility: visible !important;
      }
    }
  }
  
  .ag-floating-filter {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 32px;
    
    .ag-floating-filter-input {
      background: white !important;
      border: 1px solid #d1d5db !important;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 13px;
      width: 100% !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      
      &:focus {
        border-color: #206bc4 !important;
        outline: none;
        box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.1);
      }
    }
    
    .ag-floating-filter-button {
      display: block !important;
      visibility: visible !important;
    }
  }
  
  .ag-header {
    .ag-header-cell {
      &.ag-header-cell-sortable {
        .ag-header-cell-label {
          .ag-sort-indicator-container {
            margin-left: 4px;
            
            .ag-sort-indicator {
              width: 0;
              height: 0;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              
              &.ag-sort-ascending-icon {
                border-bottom: 6px solid #64748b;
                border-top: none;
              }
              
              &.ag-sort-descending-icon {
                border-top: 6px solid #64748b;
                border-bottom: none;
              }
              
              &.ag-sort-none-icon {
                border-bottom: 6px solid #cbd5e1;
                border-top: none;
                opacity: 0.3;
              }
            }
          }
        }
        
        &:hover {
          .ag-sort-indicator-container .ag-sort-indicator.ag-sort-none-icon {
            opacity: 0.6;
            border-bottom-color: #94a3b8;
          }
        }
      }
    }
  }
  
  .ag-row {
    border-bottom: 1px solid #e2e8f0;
    
    &:hover {
      background-color: #e3f2fd !important;
    }
    
    &.ag-row-selected {
      background-color: #e3f2fd !important;
      border-left: 3px solid #206bc4 !important;
    }
  }
  
  // Enhanced pagination styling for .ag-theme-estair (HIDDEN - replaced by custom pagination)
  /*
  .ag-paging-panel {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 48px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    
    .ag-paging-page-summary-panel {
      color: #64748b !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      display: block !important;
      visibility: visible !important;
      min-width: 200px !important;
      width: auto !important;
      flex-shrink: 0 !important;
    }
    
    .ag-paging-button {
      background: white !important;
      border: 1px solid #d1d5db !important;
      color: #374151 !important;
      border-radius: 6px !important;
      font-weight: 500 !important;
      padding: 6px 12px !important;
      margin: 0 2px !important;
      font-size: 14px !important;
      cursor: pointer !important;
      
      &:hover:not(.ag-disabled) {
        background: #f8fafc !important;
        border-color: #206bc4 !important;
        color: #206bc4 !important;
      }
      
      &.ag-disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background: #f3f4f6 !important;
        color: #9ca3af !important;
      }
    }
    
    .ag-paging-number {
      color: #206bc4 !important;
      font-weight: 600 !important;
      margin: 0 8px !important;
    }
    
    .ag-paging-row-summary-panel {
      color: #64748b !important;
      font-size: 14px !important;
      display: block !important;
      visibility: visible !important;
    }
    
    .ag-paging-button-wrapper {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex-shrink: 0 !important;
      min-width: 200px !important;
      justify-content: flex-end !important;
    }
  }
  */
}

// Animations
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

// ===========================
// PAGINATION PERSONNALISÉE
// ===========================

.custom-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #fafafa;
  font-size: 14px;

  .pagination-info {
    color: #666;
    
    .pagination-text {
      font-weight: 500;
    }
  }

  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;

    .page-info {
      margin: 0 16px;
      font-weight: 500;
      color: #333;
    }

    button[mat-icon-button] {
      &:disabled {
        opacity: 0.5;
      }
    }
  }
}

// ===========================
// PAGINATION PERSONNALISÉE
// ===========================

.custom-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
  margin-top: auto;
  
  .pagination-info {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    
    span {
      display: inline-block;
    }
  }
  
  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .mat-icon-button {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      transition: all 0.2s ease;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      
      &:not([disabled]) {
        &:hover {
          background: #f1f5f9;
          border-color: #206bc4;
          
          .mat-icon {
            color: #206bc4;
          }
        }
        
        &:active {
          background: #e2e8f0;
          transform: scale(0.95);
        }
      }
      
      &[disabled] {
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
        
        .mat-icon {
          color: #cbd5e1;
        }
      }
      
      .mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
        color: #475569;
        transition: color 0.2s ease;
      }
    }
    
    .page-indicator {
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      padding: 0 16px;
      white-space: nowrap;
      background: #f8fafc;
      border-radius: 6px;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
    }
  }
  
  // Responsive
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    
    .pagination-info {
      text-align: center;
      font-size: 13px;
    }
    
    .pagination-controls {
      justify-content: center;
      
      .mat-icon-button {
        width: 36px;
        height: 36px;
        
        .mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
        }
      }
      
      .page-indicator {
        font-size: 13px;
        padding: 6px 10px;
      }
    }
  }
}

// Animation pour l'affichage de la pagination
.custom-pagination {
  animation: fadeInUp 0.3s ease-out;
}

// Les styles complexes Tabler ont été supprimés
// Le loading utilise maintenant des styles inline simples

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

// ===========================
// AG-GRID THEME ALPINE PERSONNALISÉ
// ===========================

::ng-deep .ag-theme-alpine {
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ag-font-size: 12px;
  --ag-row-height: 40px;
  --ag-header-height: 40px;
  --ag-border-color: #e2e8f0;
  --ag-secondary-border-color: #f1f5f9;
  --ag-foreground-color: #374151;
  --ag-secondary-foreground-color: #6b7280;
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f8fafc;
  --ag-odd-row-background-color: #fafbfc;
  --ag-row-hover-color: #f1f5f9;
  --ag-selected-row-background-color: #e3f2fd;

  // Hauteur minimum pour voir au moins 10 lignes
  min-height: 500px;
  height: 500px;

  // Headers avec design moderne
  .ag-header {
    border-bottom: 2px solid var(--ag-border-color);

    .ag-header-cell {
      border-right: 1px solid var(--ag-secondary-border-color);

      .ag-header-cell-label {
        font-weight: 600;
        color: #374151;
        font-size: 13px;
        text-transform: none;
        letter-spacing: normal;
      }

      &:hover {
        background-color: var(--ag-header-background-color);
      }
    }
  }

  // Lignes avec hauteur réduite
  .ag-row {
    border-bottom: 1px solid var(--ag-secondary-border-color);

    &:hover {
      background-color: var(--ag-row-hover-color) !important;
    }

    &.ag-row-selected {
      background-color: var(--ag-selected-row-background-color) !important;
      border-left: 3px solid #206bc4;
    }
  }

  // Cellules avec bordures visibles et tooltips
  .ag-cell {
    border-right: 1px solid var(--ag-secondary-border-color);
    font-size: 12px;
    line-height: 1.4;
    padding: 0 12px;
    color: #6b7280;

    // Truncate long text with ellipsis
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    // Tooltip pour texte long
    &[title] {
      cursor: help;
    }

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #206bc4;
      border-radius: 2px;
    }

    &:last-child {
      border-right: none;
    }
  }

  // Filtres flottants avec design moderne
  .ag-floating-filter {
    background: #f8fafc;
    border-bottom: 1px solid var(--ag-border-color);

    .ag-floating-filter-input {
      // background: #ffffff;
      // border: 1px solid #d1d5db;
      // border-radius: 4px;
      // padding: 4px 8px;
      // font-size: 12px;

      &:focus {
        border-color: #206bc4;
        outline: none;
        box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.1);
      }

      &::placeholder {
        color: #9ca3af;
      }
    }
  }

  // Checkboxes modernes
  .ag-checkbox-input-wrapper {
    width: 16px;
    height: 16px;
    // border: 2px solid #d1d5db;
    border-radius: 3px;
    background: white;

    &:hover {
      border-color: #206bc4;
    }

    &.ag-checked {
      background: #206bc4;
      border-color: #206bc4;

      &::after {
        content: '✓';
        color: white;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }

  // Loading overlay
  .ag-overlay-loading-wrapper {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);

    .ag-overlay-loading-center {
      background: white;
      border-radius: 8px;
      padding: 2rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

      .ag-loading {
        color: #374151;
        font-weight: 500;
      }
    }
  }

  // Empty state
  .ag-overlay-no-rows-wrapper {
    .ag-overlay-no-rows-center {
      color: #6b7280;
      font-size: 14px;
    }
  }
}

// Styles pour les liens de référence dans AG Grid (rendu hors shadow DOM)
::ng-deep .reference-cell-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-style 0.15s ease;

  &:hover {
    color: #1d4ed8;
    text-decoration-style: solid;
  }
}

