// Variables
$primary-color: #3b82f6;
$secondary-color: #1e3a8a;
$accent-color: #0ea5e9;
$danger-color: #ef4444;
$warning-color: #f59e0b;
$light-color: #f0f9ff;
$border-color: #e2e8f0;
$text-color: #525f7f;
$text-muted: #8898aa;
$shadow-color: rgba(50, 50, 93, 0.1);
$radius: 4px;
$transition: all 0.2s ease;

// Import conversation styles
@import "raif/admin/conversation";

// Base styles
body.raif-admin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: $text-color;
  background-color: #f8fafc;
  line-height: 1.5;
  font-size: 0.9375rem;
}

.raif-admin {
  .navbar-brand-logo {
    width: 100px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $secondary-color;
    font-weight: 600;
  }

  a {
    color: $primary-color;
    text-decoration: none;
    transition: $transition;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }

  // Layout
  .navbar {
    box-shadow: 0 2px 5px 0 $shadow-color;
    padding: 0.75rem 1.5rem;

    &.navbar-dark {
      background: linear-gradient(135deg, $secondary-color, darken($secondary-color, 10%)) !important;
    }

    .navbar-brand {
      font-weight: 700;
      letter-spacing: 0.5px;
    }
  }

  .sidebar {
    box-shadow: inset -1px 0 0 $border-color;
    background-color: white !important;
    padding-top: 1rem;
    height: 100vh;

    .nav-link {
      color: $text-color;
      border-radius: $radius;
      margin: 0.25rem 0.75rem;
      padding: 0.5rem 0.75rem;

      &:hover {
        background-color: $light-color;
      }

      &.active {
        background-color: rgba($primary-color, 0.1);
        color: $primary-color;
        font-weight: 500;
      }
    }
  }

  main {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }

  // Cards
  .card {
    border: none;
    border-radius: $radius;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    overflow: hidden;

    .card-header {
      background-color: white;
      border-bottom: 1px solid $border-color;
      padding: 1rem 1.25rem;

      h5 {
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 600;
      }
    }

    .card-body {
      padding: 1.25rem;
    }
    
    &.conversation-card {
      .card-body {
        background-color: #f8f9fa;
      }
    }
  }

  // Tables
  .table {
    margin-bottom: 0;

    th {
      font-weight: 600;
      color: $secondary-color;
      border-top: none;
      padding: 1rem 0.75rem;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    td {
      padding: 1rem 0.75rem;
      vertical-align: middle;
      border-color: $border-color;
    }

    &.table-hover tbody tr:hover {
      background-color: $light-color;
    }

    &.table-striped tbody tr:nth-of-type(odd) {
      background-color: rgba($light-color, 0.5);
    }
  }

  .table-responsive {
    border-radius: $radius;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: white;
    overflow: hidden;
  }

  // Badges
  .badge {
    font-weight: 500;
    padding: 0.4em 0.65em;
    font-size: 0.75em;
    border-radius: 50rem;

    &.bg-success {
      background-color: $accent-color !important;
    }

    &.bg-danger {
      background-color: $danger-color !important;
    }

    &.bg-warning {
      background-color: $warning-color !important;
      color: white !important;
    }

    &.bg-secondary {
      background-color: $text-muted !important;
    }
  }

  // Buttons
  .btn {
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: $radius;
    transition: $transition;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

    &.btn-outline-secondary {
      color: $text-color;
      border-color: $border-color;

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

  // Pre and code blocks
  pre {
    background-color: $light-color;
    border-radius: $radius;
    padding: 1rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: $secondary-color;
    border: 1px solid $border-color;
  }

  .pre-wrap {
    white-space: pre-wrap;
  }

  // List groups
  .list-group-item {
    border-color: $border-color;
    padding: 1rem;

    &:first-child {
      border-top-left-radius: $radius;
      border-top-right-radius: $radius;
    }

    &:last-child {
      border-bottom-left-radius: $radius;
      border-bottom-right-radius: $radius;
    }
  }

  // Pagination
  .pagination {
    .page-link {
      color: $text-color;
      border-color: $border-color;
      padding: 0.5rem 0.75rem;

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

    .page-item.active .page-link {
      background-color: $primary-color;
      border-color: $primary-color;
    }
  }

  // Detail rows
  .row.mb-3 {
    .col-md-3 {
      strong {
        color: $secondary-color;
      }
    }
  }

  // Alerts
  .alert {
    border: none;
    border-radius: $radius;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

    &.alert-info {
      background-color: rgba($primary-color, 0.1);
      color: $primary-color;
    }
  }

  // Text utilities
  .text-muted {
    color: $text-muted !important;
  }

  // Responsive adjustments
  @media (max-width: 767.98px) {
    .sidebar {
      position: static;
      height: auto;
      padding-top: 0;

      .nav-link {
        margin: 0;
        border-radius: 0;
      }
    }

    main {
      padding-top: 1rem;
    }
  }

} // end .raif-admin