// ==========================================================================
// Admin Common - Composants réutilisables admin
// ==========================================================================

@use '../base/variables' as *;
@use '../base/colors' as *;

// Header commun admin
.admin-header {
  background: $color-light;
  padding: 20px $spacing-lg;
  box-shadow: $shadow;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-lg;

  h1 {
    color: $color-dark;
    font-size: $font-size-h4;
    margin: 0;
  }

  .actions {
    display: flex;
    gap: 15px;
  }

  a {
    color: $color-light;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: $radius-sm;
    background: $color-primary;
    transition: background 0.2s;

    &:hover {
      background: $color-primary-dark;
    }

    &.btn-secondary {
      background: $color-primary-lighter;

      &:hover {
        background: $color-primary-dark;
      }
    }
  }
}

// Container admin
.admin-container {
  max-width: 1200px;
  margin: $spacing-lg auto;
  padding: 0 20px;

  &--narrow {
    max-width: 800px;
  }

  &--wide {
    max-width: $breakpoint-wrapper;
  }
}

// Alerts
.alert {
  padding: 15px;
  border-radius: $radius-sm;
  margin-bottom: 20px;

  &-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

  &-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }

  &-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
  }

  &-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
  }
}

// Badges
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;

  &-success {
    background: #d4edda;
    color: #155724;
  }

  &-warning {
    background: #fff3cd;
    color: #856404;
  }

  &-system {
    background: #e3f2fd;
    color: #1565c0;
  }

  &-danger {
    background: #f8d7da;
    color: #721c24;
  }
}

// Boutons
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: $radius-sm;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  transition: background 0.2s;

  &-primary {
    background: $color-primary;
    color: $color-light;

    &:hover {
      background: $color-primary-dark;
    }
  }

  &-secondary {
    background: $color-primary-lighter;
    color: $color-light;

    &:hover {
      background: $color-primary-dark;
    }
  }

  &-success {
    background: $color-secondary;
    color: $color-light;

    &:hover {
      background: $color-secondary-dark;
    }
  }

  &-danger {
    background: #e74c3c;
    color: $color-light;

    &:hover {
      background: #c0392b;
    }
  }

  &-warning {
    background: $color-warning;
    color: $color-light;

    &:hover {
      background: #e67e22;
    }
  }

  &-info {
    background: #3498db;
    color: $color-light;

    &:hover {
      background: #2980b9;
    }
  }

  &-sm {
    padding: 6px 12px;
    font-size: 13px;
  }

  &-lg {
    padding: 12px 30px;
    font-size: 16px;
  }

  &:disabled {
    background: $color-primary-lighter;
    cursor: not-allowed;
    opacity: 0.6;
  }
}

// Formulaires admin
.form-container {
  background: $color-light;
  padding: $spacing-lg;
  border-radius: $radius-md;
  box-shadow: $shadow;
}

.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: $color-dark;
  }

  input,
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid $color-primary-lighter;
    border-radius: $radius-sm;
    font-size: 14px;
    font-family: $font-family-sans;

    &:focus {
      outline: none;
      border-color: $color-primary;
    }
  }

  textarea {
    min-height: 80px;
    resize: vertical;
  }

  small,
  .help-text {
    font-size: 13px;
    color: $color-primary-dark;
    margin-top: 5px;
    display: block;
  }
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

button {
    padding: 8px 16px;
    background: $color-secondary;
    color: $color-light;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s;
    border: none;

    &:hover {
        cursor: pointer;
    }
}

// Tables
table {
  width: 100%;
  background: $color-light;
  border-radius: $radius-md;
  overflow: hidden;
  border-collapse: collapse;

  thead {

    th {
      font-weight: 600;
      color: $color-primary-dark;
      text-align: left;
      padding: 15px;
      border-bottom: 1px solid $color-primary-lighter;
    }
  }

  tbody {
    tr {
      border-bottom: 1px solid $color-neutral;

      &:hover {
        background: $color-primary-lighter;
      }

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

    td {
      padding: 15px;
      color: $color-dark;

      code {
        background: $color-neutral;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 13px;
      }
    }
  }
}

// Empty state
.empty {
  text-align: center;
  padding: 60px 20px;
  color: $color-primary-lighter;
  background: $color-light;
  border-radius: $radius-md;
}