/* Admin Panel Styles */

.admin-panel {
    padding: var(--spacing-md);
}

.admin-title {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    font-family: var(--font-family-heading);
    margin-bottom: var(--spacing-lg);
}

.admin-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-form-border);
}

.admin-tab {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-family: var(--font-family-heading);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab:hover {
    color: var(--color-link);
}

.admin-tab.active {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

.admin-content {
    margin-top: var(--spacing-md);
}

.admin-section-title {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    font-family: var(--font-family-heading);
    margin-bottom: var(--spacing-md);
}

.admin-subtitle {
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.admin-table th {
    background-color: var(--color-background-dark);
    color: var(--color-text-secondary);
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: bold;
    font-family: var(--font-family-heading);
}

.admin-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.admin-table th.sortable:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.admin-table td {
    padding: var(--spacing-sm);
    border-bottom: var(--border-width-thin) solid var(--color-form-border);
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-link-row td:first-child {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-link-row td:first-child a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table tr:hover {
    background-color: var(--color-background-secondary);
}

.admin-search {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.admin-search .form-input {
    flex: 1;
}

.level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--font-size-xs);
    font-weight: bold;
}

.level-badge.level-admin {
    background-color: #ff6b6b;
    color: #fff;
}

.level-badge.level-moderator {
    background-color: #4ecdc4;
    color: #fff;
}

.level-badge.level-user {
    background-color: #95e1d3;
    color: #000;
}

.level-badge.level-pending {
    background-color: #fce38a;
    color: #000;
}

.level-badge.level-restricted {
    background-color: #f38181;
    color: #fff;
}

.level-badge.level-banned {
    background-color: #aa0000;
    color: #fff;
}

.level-badge.level-deleted {
    background-color: #666;
    color: #fff;
}

.level-select {
    background-color: var(--color-background);
    color: var(--color-text);
    border: var(--border-width-thin) solid var(--color-form-border);
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
}

.level-select option {
    background-color: var(--color-background);
    color: var(--color-text);
}

.level-select:focus {
    outline: none;
    border-color: var(--color-primary);
    border-style: outset;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.admin-pagination {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background-color: var(--color-background-secondary);
    padding: var(--spacing-md);
    border-left: 3px solid var(--color-link);
}

.stat-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-heading);
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xxl);
    font-family: var(--font-family-heading);
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-table {
        font-size: var(--font-size-xs);
    }

    .admin-table th,
    .admin-table td {
        padding: var(--spacing-xs);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}