/**
 * Flatboard 5 - Reputation Plugin Styles
 * Styles pour le système de réputation
 */

/* ============================================
   BADGES
   ============================================ */
.reputation-badge-icon {
    padding: 1rem;
    font-size: 2rem;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.reputation-badge-small {
    padding: 0.5rem;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Mode sombre - Badges d'icônes avec ombre portée */
html[data-theme="dark"] .reputation-badge-icon,
[data-theme="dark"] .reputation-badge-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    filter: brightness(1.1) saturate(1.2);
    border: 2px solid rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .reputation-badge-icon i,
[data-theme="dark"] .reputation-badge-icon i {
    text-shadow: 0 3px 10px rgba(0, 0, 0, 1), 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.4) !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)) brightness(1.4) contrast(1.3) !important;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5);
    font-weight: 900;
}

.reputation-badge-small i {
    margin-right: 0.25rem;
}

/* Badge avec couleur dynamique via data-attribute */
.reputation-badge-icon[data-color],
.reputation-badge-small[data-color],
.reputation-level-badge[data-color] {
    /* La couleur sera définie via style inline uniquement pour la couleur de fond */
}

/* ============================================
   LEVEL BADGES
   ============================================ */
.level-badge-number {
    color: white;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Mode sombre - Badges numérotés avec ombre portée */
html[data-theme="dark"] .level-badge-number,
[data-theme="dark"] .level-badge-number {
    color: white !important;
    border: 2px solid rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.reputation-level-badge {
    color: white;
}

/* Mode sombre - Badges de niveau avec ombre portée */
html[data-theme="dark"] .reputation-level-badge,
[data-theme="dark"] .reputation-level-badge {
    color: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.reputation-progress {
    height: 8px;
}

.reputation-progress-bar {
    transition: width 0.3s ease;
}

.reputation-progress-small {
    height: 8px;
}

.reputation-progress-medium {
    height: 10px;
}

/* ============================================
   CARDS
   ============================================ */
.reputation-card-earned {
    opacity: 1;
}

.reputation-card-not-earned {
    opacity: 0.6;
}

/* ============================================
   IMAGES
   ============================================ */
.reputation-image-cover {
    height: 200px;
    object-fit: cover;
}

.reputation-image-placeholder {
    height: 200px;
}

.reputation-image-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.reputation-image-small {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.reputation-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 12px;
}

.reputation-avatar-small {
    width: 40px;
    height: 40px;
}

/* ============================================
   STATUS INDICATORS
   ============================================ */
.reputation-status-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: #28a745;
}

.reputation-status-offline {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: #dc3545;
}

/* ============================================
   TABLES
   ============================================ */
.reputation-table-rank {
    width: 60px;
}

.reputation-table-actions {
    width: 150px;
}

.reputation-table-icon {
    width: 50px;
}

/* ============================================
   DRAG HANDLE
   ============================================ */
.reputation-drag-handle {
    cursor: move;
}

/* ============================================
   INDENTATION
   ============================================ */
.reputation-indent {
    padding-left: var(--indent, 0);
}

/* ============================================
   DISPLAY UTILITIES
   ============================================ */
.reputation-display-none {
    display: none;
}

.reputation-display-block {
    display: block;
}

.reputation-display-inline {
    display: inline;
}

/* ============================================
   TEXT CENTER
   ============================================ */
.reputation-text-center {
    text-align: center;
    min-width: 80px;
}

/* ============================================
   MODE SOMBRE
   ============================================ */
html[data-theme="dark"] .reputation-badge-small,
[data-theme="dark"] .reputation-badge-small {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
    filter: brightness(1.1);
    color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .reputation-badge-small i,
[data-theme="dark"] .reputation-badge-small i {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

/* Tableaux en mode sombre */
html[data-theme="dark"] .table,
[data-theme="dark"] .table {
    color: #ffffff !important;
}

html[data-theme="dark"] .table th,
[data-theme="dark"] .table th {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td,
[data-theme="dark"] .table td {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .table td a,
[data-theme="dark"] .table td a {
    color: #ffffff !important;
}

html[data-theme="dark"] .table td a:hover,
[data-theme="dark"] .table td a:hover {
    color: #0d6efd !important;
}

/* Forcer la visibilité des liens utilisateur avec ombre portée */
html[data-theme="dark"] .table td .text-decoration-none,
[data-theme="dark"] .table td .text-decoration-none,
html[data-theme="dark"] .table td a.text-reset,
[data-theme="dark"] .table td a.text-reset {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td .text-decoration-none:hover,
[data-theme="dark"] .table td .text-decoration-none:hover,
html[data-theme="dark"] .table td a.text-reset:hover,
[data-theme="dark"] .table td a.text-reset:hover {
    color: #0d6efd !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(13, 110, 253, 0.5) !important;
}

/* Forcer la visibilité de tous les liens dans les tableaux avec ombre portée */
html[data-theme="dark"] .table a,
[data-theme="dark"] .table a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table a:hover,
[data-theme="dark"] .table a:hover {
    color: #0d6efd !important;
    text-decoration: underline !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(13, 110, 253, 0.5) !important;
}

/* Ombre portée pour les points */
html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger),
[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger) {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

/* Forcer la visibilité des points */
html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger),
[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger) {
    color: #ffffff !important;
}

/* Badges avec text-dark en mode sombre */
html[data-theme="dark"] .badge.text-dark,
[data-theme="dark"] .badge.text-dark {
    color: #ffffff !important;
}

/* Cartes en mode sombre */
html[data-theme="dark"] .card,
[data-theme="dark"] .card {
    background-color: var(--bs-dark, #212529) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

html[data-theme="dark"] .card-body .text-muted,
[data-theme="dark"] .card-body .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title {
    color: #ffffff !important;
}

/* Liens en mode sombre */
html[data-theme="dark"] .text-decoration-none,
[data-theme="dark"] .text-decoration-none {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-decoration-none:hover,
[data-theme="dark"] .text-decoration-none:hover {
    color: #0d6efd !important;
}

/* Tableaux avec classes de rang */
html[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

html[data-theme="dark"] .table-warning td,
[data-theme="dark"] .table-warning td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary {
    background-color: rgba(108, 117, 125, 0.15) !important;
}

html[data-theme="dark"] .table-secondary td,
[data-theme="dark"] .table-secondary td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
}

html[data-theme="dark"] .table-info td,
[data-theme="dark"] .table-info td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover td {
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .reputation-badge-small {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
        filter: brightness(1.1);
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .reputation-badge-small i {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
    }
    
    html:not([data-theme="light"]) .table {
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .table th,
    html:not([data-theme="light"]) .table td {
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .card {
        background-color: var(--bs-dark, #212529) !important;
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .card-header {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }
}

/* ============================================
   HEADER ICONS
   ============================================ */
.reputation-header-icon {
    color: var(--primary-color, #007bff);
}

html[data-theme="dark"] .reputation-badge-small,
[data-theme="dark"] .reputation-badge-small {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
    filter: brightness(1.1);
    color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .reputation-badge-small i,
[data-theme="dark"] .reputation-badge-small i {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

/* Tableaux en mode sombre */
html[data-theme="dark"] .table,
[data-theme="dark"] .table {
    color: #ffffff !important;
}

html[data-theme="dark"] .table th,
[data-theme="dark"] .table th {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td,
[data-theme="dark"] .table td {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .table td a,
[data-theme="dark"] .table td a {
    color: #ffffff !important;
}

html[data-theme="dark"] .table td a:hover,
[data-theme="dark"] .table td a:hover {
    color: #0d6efd !important;
}

/* Forcer la visibilité des liens utilisateur avec ombre portée */
html[data-theme="dark"] .table td .text-decoration-none,
[data-theme="dark"] .table td .text-decoration-none,
html[data-theme="dark"] .table td a.text-reset,
[data-theme="dark"] .table td a.text-reset {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table td .text-decoration-none:hover,
[data-theme="dark"] .table td .text-decoration-none:hover,
html[data-theme="dark"] .table td a.text-reset:hover,
[data-theme="dark"] .table td a.text-reset:hover {
    color: #0d6efd !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(13, 110, 253, 0.5) !important;
}

/* Forcer la visibilité de tous les liens dans les tableaux avec ombre portée */
html[data-theme="dark"] .table a,
[data-theme="dark"] .table a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .table a:hover,
[data-theme="dark"] .table a:hover {
    color: #0d6efd !important;
    text-decoration: underline !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(13, 110, 253, 0.5) !important;
}

/* Ombre portée pour les points */
html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger),
[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger) {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

/* Forcer la visibilité des points */
html[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger),
[data-theme="dark"] .table td strong:not(.text-primary):not(.text-success):not(.text-warning):not(.text-info):not(.text-danger) {
    color: #ffffff !important;
}

/* Badges avec text-dark en mode sombre */
html[data-theme="dark"] .badge.text-dark,
[data-theme="dark"] .badge.text-dark {
    color: #ffffff !important;
}

/* Cartes en mode sombre */
html[data-theme="dark"] .card,
[data-theme="dark"] .card {
    background-color: var(--bs-dark, #212529) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

html[data-theme="dark"] .card-body .text-muted,
[data-theme="dark"] .card-body .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title {
    color: #ffffff !important;
}

/* Liens en mode sombre */
html[data-theme="dark"] .text-decoration-none,
[data-theme="dark"] .text-decoration-none {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-decoration-none:hover,
[data-theme="dark"] .text-decoration-none:hover {
    color: #0d6efd !important;
}

/* Tableaux avec classes de rang */
html[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

html[data-theme="dark"] .table-warning td,
[data-theme="dark"] .table-warning td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary {
    background-color: rgba(108, 117, 125, 0.15) !important;
}

html[data-theme="dark"] .table-secondary td,
[data-theme="dark"] .table-secondary td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
}

html[data-theme="dark"] .table-info td,
[data-theme="dark"] .table-info td {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover td {
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .reputation-badge-small {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
        filter: brightness(1.1);
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .reputation-badge-small i {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
    }
    
    html:not([data-theme="light"]) .table {
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .table th,
    html:not([data-theme="light"]) .table td {
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .card {
        background-color: var(--bs-dark, #212529) !important;
        color: #ffffff !important;
    }
    
    html:not([data-theme="light"]) .card-header {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }
}

/* ============================================
   HEADER ICONS
   ============================================ */
.reputation-header-icon {
    color: var(--primary-color, #007bff);
}