:root {
        --primary-color: #1a237e;
        --secondary-color: #283593;
        --accent-color: #3949ab;
        --danger-color: #c62828;
        --light-gray: #f5f7fa;
        --dark-text: #333;
      }

      body {
        background-color: var(--light-gray);
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        overflow: hidden;
      }

      .card-header {
        background: linear-gradient(
          135deg,
          var(--primary-color),
          var(--secondary-color)
        );
        color: white;
        padding: 18px 25px;
        font-weight: bold;
        font-size: 1.25rem;
        border: none;
      }

      .refresh-btn {
        cursor: pointer;
        transition: transform 0.3s ease;
        background-color: rgba(255, 255, 255, 0.2);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .refresh-btn:hover {
        transform: rotate(180deg);
        background-color: rgba(255, 255, 255, 0.3);
      }

      .last-update {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        font-style: italic;
      }

      .table-responsive {
        border-radius: 0 0 15px 15px;
        overflow: hidden;
      }

      table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
      }

      thead.table-dark {
        background-color: var(--secondary-color);
      }

      thead.table-dark th {
        border: none;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        padding: 15px;
        color: white;
      }

      tbody tr {
        transition: all 0.2s ease;
      }

      tbody tr:hover {
        background-color: rgba(57, 73, 171, 0.05) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      tbody td {
        padding: 15px;
        vertical-align: middle;
        border-top: 1px solid #f0f0f0;
      }

      .spinner {
        display: none;
        margin-right: 5px;
      }

      .banned-reason {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .player-name {
        font-weight: 600;
        color: var(--primary-color);
      }

      .badge {
        font-size: 0.8rem;
        font-weight: 500;
        padding: 6px 10px;
        border-radius: 30px;
      }

      .badge-admin {
        background-color: var(--danger-color);
        color: white;
      }

      .badge-moderator {
        background-color: var(--accent-color);
        color: white;
      }

      .ban-date {
        font-size: 0.9rem;
        color: #555;
      }

      .ban-reason-tooltip {
        cursor: pointer;
        position: relative;
      }

      .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
      }

      .status-active {
        background-color: #e53935;
        box-shadow: 0 0 5px #e53935;
      }

      .row-index {
        background-color: rgba(26, 35, 126, 0.1);
        color: var(--primary-color);
        font-weight: 600;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      @media (max-width: 768px) {
        .banned-reason {
          max-width: 150px;
        }

        .card-header {
          flex-direction: column;
          align-items: flex-start !important;
        }

        .last-update {
          margin-bottom: 10px;
        }
      }

      /* Filtreleme ve Arama için ek CSS stilleri - Style bloğuna ekleyin */
      .active-filters {
        font-size: 0.9rem;
      }

      .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
      }

      .dropdown-item.active {
        background-color: var(--primary-color);
        color: white;
      }

      .card-body.bg-light {
        background-color: rgba(245, 247, 250, 0.7);
      }

      .input-group .form-control:focus,
      .input-group .btn:focus {
        box-shadow: none;
        border-color: var(--primary-color);
      }

      .badge {
        transition: all 0.2s ease;
      }

      .badge i {
        opacity: 0.7;
      }

      .badge:hover i {
        opacity: 1;
      }

      /* Yükselme animasyonu ekleyebilirsiniz */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .active-filters {
        animation: fadeIn 0.3s ease-in-out;
      }

      .stat-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .chart-container {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;
      }

      #stats-total-bans,
      #stats-last-24h {
        color: var(--primary-color);
      }

      #stats-top-admin {
        color: var(--secondary-color);
        font-size: 1.25rem;
      }

      #stats-common-reason {
        color: var(--danger-color);
        font-size: 1.25rem;
      }
      /* Tablo satırına tıklanabilir görünüm ekle */
      #ban-list-tbody tr {
        cursor: pointer;
      }

      /* Detay modal stilleri */
      .player-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
      }

      .comment-section {
        max-height: 200px;
        overflow-y: auto;
      }

      /* Toast bildirimi stilleri */
      .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
      }

      /* Vurgulanan satır için stil */
      .highlight-row {
        background-color: rgba(57, 73, 171, 0.1) !important;
        animation: highlight-fade 2s ease-in-out;
      }

      @keyframes highlight-fade {
        0% {
          background-color: rgba(57, 73, 171, 0.3);
        }
        100% {
          background-color: rgba(57, 73, 171, 0.1);
        }
      }